/* The wrapped artwork is a reward, never the starting workpiece. */
.wrapper-candy>.paper-body{inset:5% 10%;width:auto;height:auto;background:linear-gradient(135deg,#fff6,transparent 30%,#0002),var(--wrap-colour)!important;border:2px solid #fff8;border-radius:5px;clip-path:none;transform:none;box-shadow:inset 0 0 15px #fff3,0 8px 9px #1c092344;transition:inset .5s ease,border-radius .5s ease,transform .15s ease}
.wrapper-bare-sweet{position:absolute;left:34%;top:21%;width:32%;height:31%;border-radius:48%;background:radial-gradient(ellipse at 35% 25%,#fffce3 0 8%,#ffca5c 25%,#e78420 70%,#a94313);box-shadow:inset -5px -5px 8px #a34c2855,0 6px 8px #3b123655;z-index:2;transition:opacity .3s;pointer-events:none}
.wrapper-candy>.paper-body:after{content:'';position:absolute;inset:38% 2% 38%;border-top:1px dashed #ffffff70;border-bottom:1px dashed #ffffff70}
.wrapper-fold-flap{position:absolute;left:10%;width:80%;height:36%;background:linear-gradient(#fff3,#0001),var(--wrap-colour);border:1px solid #fff6;pointer-events:none;backface-visibility:visible;z-index:1;transition:transform .45s ease,inset .45s ease;transform-style:preserve-3d}
.fold-flap-bottom{top:59%;transform-origin:center top}.fold-flap-top{top:5%;transform-origin:center bottom}
.wrapper-candy.folding-bottom .fold-flap-bottom{transform:perspective(600px) rotateX(calc(var(--fold-progress,0)*155deg));z-index:4}
.wrapper-candy.folding-top .fold-flap-top{transform:perspective(600px) rotateX(calc(var(--fold-progress,0)*-155deg));z-index:4}
.wrapper-candy[data-folds='1']>.paper-body{inset:10% 10% 28%;border-radius:7px 7px 35% 35%}
.wrapper-candy[data-folds='1'] .fold-flap-bottom{top:35%;height:35%;border-radius:8px 8px 40% 40%;box-shadow:0 -3px 8px #1d123533;z-index:2}
.wrapper-candy:not([data-folds='0']) .wrapper-bare-sweet{opacity:0}
.wrapper-candy[data-folds='2']>.paper-body{inset:23% 23%;border-radius:44%;background:linear-gradient(#fff8,transparent 25%,#0002 85%,#fff3),var(--wrap-colour)!important;z-index:2}
.wrapper-candy[data-folds='2']>.paper-body:after{inset:12% 4% 75%;border-bottom:0;border-top:1px solid #fff4}
.wrapper-candy[data-folds='2'] .fold-flap-bottom,.wrapper-candy[data-folds='2'] .fold-flap-top{top:23%;height:54%;width:20%;transform:none;border-radius:3px;background:repeating-linear-gradient(8deg,#fff3 0 8px,transparent 8px 18px),var(--wrap-colour)}
.wrapper-candy[data-folds='2'] .fold-flap-bottom{left:7%;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.wrapper-candy[data-folds='2'] .fold-flap-top{left:73%;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.wrapper-candy:has(.twist-left.is-twisted) .fold-flap-bottom{clip-path:polygon(0 0,100% 32%,100% 68%,0 100%);filter:brightness(1.1)}
.wrapper-candy:has(.twist-right.is-twisted) .fold-flap-top{clip-path:polygon(0 32%,100% 0,100% 100%,0 68%);filter:brightness(1.1)}
.wrapper-finished{position:absolute;inset:0;background:url('art/wrapper-candies-v1.webp') calc(var(--paper)*50%) 50%/300% 200% no-repeat;opacity:0;pointer-events:none;z-index:2}
.wrapper-candy[data-ends='2']>.wrapper-finished{opacity:1;animation:wrapReveal .4s ease both}
.wrapper-candy[data-ends='2']>.paper-body,.wrapper-candy[data-ends='2']>.wrapper-fold-flap{opacity:0}
.wrapper-candy .pasted-sticker{z-index:3;transition:top .5s ease}
.wrapper-candy[data-folds='0'] .wrapper-pattern{left:12%;width:76%;top:8%;height:84%;border-radius:0;opacity:.8}
.wrapper-candy[data-folds='0'] .pasted-sticker{width:27%}.wrapper-candy[data-folds='0'][data-stickers='2'] .pasted-sticker{width:24%}
.wrapper-fold-control{position:absolute;left:calc(50% - 48px);width:96px;height:44px;min-height:44px;padding:4px;background:#ffe17d;color:#502369;border:2px solid #fff6;border-radius:22px;font-weight:800;font-size:16px;z-index:7;touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:0 4px #7d4e7899;animation:foldCue 1.2s ease-in-out infinite}
.fold-control-bottom{bottom:0}.fold-control-top{top:0;animation-direction:reverse}
.wrapper-candy.pulling-left>.paper-body,.wrapper-candy.pulling-right>.paper-body{transform:scaleX(calc(1 + var(--paper-pull,0)*.06))}
@keyframes foldCue{50%{translate:0 -5px;box-shadow:0 2px #7d4e7899}}
@keyframes wrapReveal{from{opacity:0;scale:1.05}to{opacity:1;scale:1}}
@media(prefers-reduced-motion:reduce){.wrapper-fold-control,.wrapper-finished{animation:none!important}.wrapper-candy>*,.wrapper-candy .pasted-sticker{transition:none!important}}

/* A continuous neck connects both loose ends to the curved centre. */
.wrapper-candy[data-folds='2']:before{content:'';position:absolute;left:9%;right:9%;top:36%;height:28%;background:linear-gradient(#fff4,#0001),var(--wrap-colour);z-index:1;pointer-events:none}
.wrapper-candy[data-ends='2']:before{opacity:0}

.wrapper-fold-control{left:auto;right:0;width:86px}
/* Wrap first; the finished shape stays intact while it is decorated. */
.wrapper-bare-sweet{left:27%;top:15%;width:46%;height:46%;background:url('art/wrapper-bare-sweet-v34.png') center/contain no-repeat;border-radius:0;box-shadow:none;filter:drop-shadow(0 5px 4px #38102c55)}
.wrapper-tab:disabled{opacity:.4;cursor:default;box-shadow:none}
.wrapper-paper-target{inset:18% 25%;width:50%;height:64%}
.wrapper-candy[data-folds='0']>.wrapper-paper-target{inset:5% 10%;width:80%;height:90%;border-radius:5px}
.wrapper-fold-flap{background:linear-gradient(115deg,#fff5,transparent 35%,#0001),var(--wrap-colour)}
.wrapper-candy[data-folds='1'] .fold-flap-bottom{top:23%;height:42%;border-radius:18% 18% 40% 40%;background:linear-gradient(#fff6,#fff0 50%,#0002),var(--wrap-colour)}
.wrapper-candy[data-folds='1'] .fold-flap-top{z-index:4}
.wrapper-candy[data-ends='2'] .wrapper-pattern{z-index:3;inset:23% 28%;width:44%;height:54%;border-radius:48%;opacity:.88}
.wrapper-candy[data-ends='2'] .wrapper-finished{animation:wrapReveal .6s ease both}
.wrapper-candy[data-ends='2'] .pasted-sticker{z-index:4}
.wrapper-candy[data-ends='2']>.wrapper-paper-target{z-index:5}
.wrapper-palette .wrapper-wrap-note{padding:0 10px}
@media(prefers-reduced-motion:reduce){.wrapper-candy[data-ends='2'] .wrapper-finished{animation:none}}
/* Keep the unwrapped sweet large enough to recognise on phones. */
.wrapper-bare-sweet{left:18%;top:7%;width:64%;height:60%}
/* The loose ends gather under a pull instead of breaking into separate pieces. */
.wrapper-candy.pulling-left .fold-flap-bottom{transform:translateX(calc(var(--paper-pull,0)*-8px)) scaleY(calc(1 - var(--paper-pull,0)*.38));transform-origin:right center}
.wrapper-candy.pulling-right .fold-flap-top{transform:translateX(calc(var(--paper-pull,0)*8px)) scaleY(calc(1 - var(--paper-pull,0)*.38));transform-origin:left center}

/* Own the gesture before pointerdown: later shared button styles allow panning. */
body.halloween-game.rrdd-adventure .wrapper-factory :is(.wrapper-choice,.wrapper-fold-control,.wrapper-twist,.wrapper-paper-target){touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body.halloween-game .wrapper-fold-control.folding{animation:none}
.wrapper-candy:is(.folding-top,.folding-bottom) .wrapper-fold-flap{transition:none}