/* MIX STAGE (B5b) — the dough is made in phases; every phase change animates.
   Stage is a fixed 1024×768 canvas scaled to fit the screen. */
.mxs{position:absolute;left:0;top:0;width:1024px;height:768px;transform-origin:0 0;overflow:hidden;background:#fff8fb}
.mxs svg{overflow:visible}
.mxs .world{position:absolute;left:0;top:0;width:1024px;height:768px;transform-origin:0 0;transition:transform .85s cubic-bezier(.65,0,.35,1)}
.mxs .world.zoom{transform:translate(-552px,-182px) scale(1.4)}
.mxs .mx-backdrop{position:absolute;left:-700px;top:-1100px;width:2424px;height:2968px}   /* far past the stage: the camera zoom, wide phones and portrait screens never show an edge */
.mxs .layer{position:absolute;left:0;top:0;width:1024px;height:768px;pointer-events:none}
.mxs .fx{z-index:50}
.mxs .hud{z-index:60}
.mxs .hud .hit,.mxs .hud .action.show,.mxs .hud .endcard.show{pointer-events:auto}

/* ---------- ingredients ---------- */
.mxs .mx-item{position:absolute;touch-action:none;cursor:grab;pointer-events:auto}
.mxs .item-art{width:100%;height:100%;filter:drop-shadow(0 3px 2px rgba(90,40,80,.2))}
.mxs .mx-item svg{display:block;width:100%;height:100%}
.mxs .mx-item.lifted{opacity:.35;transition:opacity .15s}
.mxs .mx-item.restock{animation:restock .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes restock{0%{transform:scale(.55);opacity:.2}60%{transform:scale(1.1);opacity:1}100%{transform:none;opacity:1}}
.mxs .mx-item.nope{animation:nope .35s ease}
@keyframes nope{0%,100%{transform:none}25%{transform:translateX(-5px) rotate(-4deg)}75%{transform:translateX(5px) rotate(4deg)}}
.mxs .hint-ring{position:absolute;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,.95) 0 38%,rgba(255,170,205,.6) 58%,rgba(255,170,205,0) 71%);animation:hintPulse 1.1s ease-in-out infinite}
@keyframes hintPulse{0%,100%{transform:scale(.88);opacity:.65}50%{transform:scale(1.08);opacity:1}}

/* ---------- carried item + particles ---------- */
.mxs .carry{position:absolute;left:0;top:0;pointer-events:none;filter:drop-shadow(0 14px 10px rgba(90,40,80,.28));will-change:transform}
.mxs .carry.follow{transition:transform .05s linear}
.mxs .carry svg{display:block;width:100%;height:100%}
.mxs .carry-art{width:100%;height:100%}
.mxs .carry-art.shaking{animation:shake .11s ease-in-out infinite alternate}
@keyframes shake{from{transform:translateX(-8px) rotate(-7deg)}to{transform:translateX(8px) rotate(7deg)}}
.mxs .mx-puff{position:absolute;border-radius:50%;opacity:.95;border:2px solid rgba(90,45,76,.45);transition:transform .8s cubic-bezier(.2,.8,.3,1),opacity .8s ease-in;pointer-events:none}
.mxs .crystal{position:absolute;width:7px;height:7px;border-radius:2px;border:1.5px solid rgba(90,45,76,.6);transition:transform .42s cubic-bezier(.5,0,1,.6),opacity .18s}
.mxs .mx-drop{position:absolute;border-radius:50%;border:2px solid #5a2d4c;transition:transform .45s cubic-bezier(.2,.8,.4,1),opacity .25s}
.mxs .ring{position:absolute;border-radius:50%;border:3px solid rgba(255,255,255,.95);box-shadow:0 0 0 2px rgba(90,45,76,.35);transition:transform .5s ease-out,opacity .5s ease-out}
.mxs .stream{position:absolute;width:18px;border-radius:9px;border:2.5px solid #5a2d4c;box-sizing:border-box;transform-origin:50% 0;transform:scaleY(0);transition:transform .18s ease-in}
.mxs .shell{position:absolute;transition:transform .45s cubic-bezier(.2,.9,.3,1),opacity .4s .15s}
.mxs .shell svg{display:block;width:100%;height:100%}
.mxs .mx-yolk{position:absolute;border-radius:50%;background:radial-gradient(circle at 40% 35%,#ffe27a,#ffb400 70%);border:3px solid #5a2d4c;box-shadow:0 0 0 6px #fff,0 0 0 8.5px #5a2d4c;transition:transform .3s cubic-bezier(.5,0,1,.5)}
.mxs .sparkle{position:absolute;pointer-events:none;transition:transform .7s cubic-bezier(.2,.8,.3,1),opacity .6s .25s}
.mxs .speed{position:absolute;height:12px;border-radius:6px;background:#fff;border:2.5px solid rgba(90,45,76,.45);transition:transform .5s ease-out,opacity .5s ease-out}
.mxs .mist{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.95),rgba(235,246,255,.45) 60%,rgba(235,246,255,0) 72%);transition:transform 1.6s ease-out,opacity 1.6s ease-in;pointer-events:none}

/* ---------- the bowl ---------- */
.mxs .bowl-shadow{position:absolute;left:547px;top:630px;width:426px;height:42px;border-radius:50%;background:radial-gradient(ellipse,rgba(90,40,80,.38),transparent 70%);opacity:0;transform:scale(.3);transition:transform .6s cubic-bezier(.3,1.3,.5,1),opacity .6s}
.mxs .bowl-shadow.in{opacity:1;transform:none}
.mxs .bowl-wrap{position:absolute;left:480px;top:194px;width:560px;height:560px;transform:translateY(-660px);transform-origin:50% 81%}
.mxs .bowl-wrap.in{transform:none;transition:transform .62s cubic-bezier(.32,1.3,.55,1)}
.mxs .bowl-wrap.land{animation:bowlLand .38s ease-out}
@keyframes bowlLand{0%{transform:scale(1.09,.88)}55%{transform:scale(.97,1.04)}100%{transform:none}}
.mxs .bowl-wrap.bump{animation:bowlBump .32s ease-out}
@keyframes bowlBump{0%{transform:none}40%{transform:scale(1.025,.975)}100%{transform:none}}
.mxs .mx-bowl-art{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain;pointer-events:none;transition:filter .2s}
.mxs .bowl-wrap.armed .mx-bowl-art{filter:drop-shadow(0 0 14px #fff) drop-shadow(0 0 12px #ff9fc6)}
.mxs .mx-bowl-inner{position:absolute;left:12.43%;top:26.1%;width:76%;height:21.4%;border-radius:50%;overflow:hidden;pointer-events:none;isolation:isolate;-webkit-mask-image:-webkit-radial-gradient(white,black)}
.mxs .mx-wall{position:absolute;inset:0;background:linear-gradient(180deg,#ecd9e4 0%,#fffafd 18%,#fbeef4 62%,#f1dde8 100%)}
.mxs .mx-heap{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;opacity:0;transform-origin:50% 100%;transition:transform .6s cubic-bezier(.3,1.5,.5,1),opacity .4s}
.mxs .mx-heap.on{opacity:1}
.mxs .mx-heap.slump{transform:scale(1.3,.28);opacity:0;transition:transform .7s ease-in,opacity .45s .3s}
.mxs .mx-bat{position:absolute;left:19%;top:57%;width:62%;height:62%;border-radius:50%;overflow:hidden;opacity:0;isolation:isolate;-webkit-mask-image:-webkit-radial-gradient(white,black);transition:left .6s cubic-bezier(.3,1.25,.5,1),top .6s cubic-bezier(.3,1.25,.5,1),width .6s cubic-bezier(.3,1.25,.5,1),height .6s cubic-bezier(.3,1.25,.5,1),opacity .4s}
.mxs .mx-bat.on{opacity:1}
.mxs .mx-bat-base{position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse 64% 72% at 42% 66%,var(--bat-light,#fff6df) 0%,var(--bat,#ffe7a8) 55%,var(--bat-shade,#f2c277) 100%);box-shadow:inset 0 14px 16px -8px var(--bat-edge,rgba(200,140,90,.5))}
.mxs .mx-swirl{position:absolute;left:50%;top:50%;width:100%;height:0;padding-bottom:100%;transform:translate(-50%,-50%) scaleY(.2816) rotate(var(--rot,0deg));will-change:transform}
.mxs .mx-swirl svg{position:absolute;left:0;top:0;width:100%;height:100%;display:block;overflow:visible}
.mxs .mx-bat-top{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.mxs .mx-bat::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 2.5px 0 var(--bat-light,#fff6df),inset 0 0 0 1.5px var(--bat-line,rgba(200,140,90,.45));pointer-events:none}
.mxs .mx-heart{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;opacity:0}
.mxs .mx-heart.on{opacity:1}
.mxs .chunks{position:absolute;left:0;top:0;width:100%;height:100%}
.mxs .mx-chunk{position:absolute;width:15%;height:0;padding-bottom:15%;transform:translate(-50%,-60%);transition:left .12s linear,top .12s linear}
.mxs .mx-chunk svg{position:absolute;left:0;top:0;width:100%;height:100%;display:block;animation:chunkIn .4s cubic-bezier(.3,1.6,.5,1)}
@keyframes chunkIn{from{transform:translateY(-30px) scale(.4)}to{transform:none}}

/* ---------- the dry-goods stand ---------- */
.mxs .riser{position:absolute;left:0;top:0;width:520px;height:768px;transform:translateX(-620px)}
.mxs .riser.in{transform:none;transition:transform .55s cubic-bezier(.2,1.3,.4,1)}
.mxs .riser.out{transform:translateX(-680px);transition:transform .45s cubic-bezier(.6,0,.9,.4)}
.mxs .riser-svg{position:absolute;left:0;top:0;width:520px;height:768px;pointer-events:none}
.mxs .riser .mx-item{opacity:0}
.mxs .riser .mx-item.in{opacity:1;animation:popIn .5s cubic-bezier(.3,1.5,.5,1) both}
.mxs .riser .mx-item.shown{opacity:1}
@keyframes popIn{0%{transform:translateY(-60px) scale(.3);opacity:0}55%{transform:translateY(6px) scale(1.12,.9);opacity:1}80%{transform:translateY(-3px) scale(.97,1.03)}100%{transform:none;opacity:1}}
.mxs .riser .mx-item.bye{animation:byeHop .62s cubic-bezier(.4,0,.8,.6) both}
@keyframes byeHop{0%{transform:none;opacity:1}28%{transform:translate(-26px,-80px) rotate(-16deg);opacity:1}100%{transform:translate(-700px,30px) rotate(-70deg);opacity:0}}

/* ---------- the fridge ---------- */
.mxs .fridge{position:absolute;left:0;top:0;width:520px;height:800px;perspective:1100px;perspective-origin:140px 540px;transform:translateX(-700px);visibility:hidden;will-change:transform}
.mxs .fridge.enter{visibility:visible;transform:none;transition:transform .78s cubic-bezier(.2,1.22,.35,1)}
.mxs .fridge.land{animation:fridgeLand .34s ease-out;transform-origin:300px 800px}
@keyframes fridgeLand{0%{transform:scale(1.045,.955)}50%{transform:scale(.985,1.015)}100%{transform:none}}
.mxs .fr-body{position:absolute;left:0;top:0;width:520px;height:800px}
.mxs .fridge-light{position:absolute;left:152px;top:316px;width:306px;height:486px;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 50% 3%,rgba(255,255,255,.95),rgba(236,246,255,.35) 50%,rgba(236,246,255,0) 78%)}
.mxs .fridge.lit .fridge-light{animation:flicker .6s linear forwards}
@keyframes flicker{0%{opacity:0}15%{opacity:.85}25%{opacity:.15}40%{opacity:1}55%{opacity:.45}70%,100%{opacity:1}}
.mxs .fridge-spill{position:absolute;left:-220px;top:280px;width:580px;height:580px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(227,242,255,.55),rgba(227,242,255,0) 68%);opacity:0;transition:opacity .6s}
.mxs .fridge.lit .fridge-spill{opacity:1}
.mxs .dish{position:absolute;border-radius:50%;background:radial-gradient(ellipse at 45% 30%,#fff,#ffe4f1 70%,#f3c9dc);border:3px solid #5a2d4c;box-shadow:0 4px 6px rgba(60,60,120,.18);box-sizing:border-box}
.mxs .fr-items,.mxs .fr-crisper,.mxs .fr-top,.mxs .liner-items{position:absolute;left:0;top:0;width:0;height:0}
.mxs .crisper{position:absolute;left:158px;top:704px;width:294px;height:100px;border-radius:12px 12px 0 0;background:linear-gradient(180deg,rgba(214,234,255,.34),rgba(184,212,246,.42));border:3px solid #7fa8d8;border-bottom:none;box-shadow:inset 0 3px 0 rgba(255,255,255,.75);pointer-events:none;box-sizing:border-box}
.mxs .crisper::after{content:"";position:absolute;left:113px;top:8px;width:62px;height:10px;border-radius:5px;background:#fff;border:2px solid #7fa8d8}
.mxs .fdoor-front{position:absolute;left:140px;top:312px;width:322px;height:492px;transform-origin:0 50%;transition:transform .27s cubic-bezier(.55,0,1,.45)}
.mxs .fdoor-front svg,.mxs .fdoor-liner>svg{position:absolute;left:0;top:0;width:100%;height:100%}
.mxs .fridge.open .fdoor-front{transform:rotateY(-90deg)}
.mxs .fdoor-front.gone{visibility:hidden}
.mxs .fdoor-liner{position:absolute;left:0;top:312px;width:142px;height:492px;transform-origin:100% 50%;transform:scaleX(0);transition:transform .34s cubic-bezier(.2,1.35,.4,1)}
.mxs .fridge.liner-out .fdoor-liner{transform:none}
.mxs .fridge.closing .fdoor-liner{transition:transform .2s ease-in}
.mxs .fridge.closing .fdoor-front{transition:transform .34s cubic-bezier(.2,1.5,.4,1)}
.mxs .fridge .mx-item.hello{animation:hello .55s cubic-bezier(.3,1.5,.5,1) both}
@keyframes hello{0%,100%{transform:none}35%{transform:translateY(-14px) rotate(-5deg)}65%{transform:translateY(2px) scale(1.04,.96)}}
.mxs .fface{position:absolute;left:0;top:0;width:520px;height:800px;pointer-events:none}
.mxs .fface .eo,.mxs .fface .ec,.mxs .fface .ew,.mxs .fface .zzz,.mxs .fface .fm-smile,.mxs .fface .fm-sleep{display:none}
.mxs .fridge.face-sleep .fface .ec,.mxs .fridge.face-sleep .fface .zzz,.mxs .fridge.face-sleep .fface .fm-sleep{display:inline}
.mxs .fridge.face-awake .fface .eo,.mxs .fridge.face-awake .fface .fm-smile{display:inline}
.mxs .fridge.face-wink .fface .eoL,.mxs .fridge.face-wink .fface .ewR,.mxs .fridge.face-wink .fface .fm-smile{display:inline}
.mxs .fface .eo{transform-box:fill-box;transform-origin:center}
.mxs .fridge.face-awake .fface .eo{animation:fBlink 4.4s ease-in-out infinite}
.mxs .fridge.wake .fface .eo{animation:eyePop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes fBlink{0%,90%,100%{transform:scaleY(1)}94%{transform:scaleY(.08)}}
@keyframes eyePop{0%{transform:scaleY(.1)}60%{transform:scaleY(1.25)}100%{transform:scaleY(1)}}
.mxs .fface .zzz text{animation:zzz 2.4s ease-in-out infinite}
.mxs .fface .zzz text:nth-child(2){animation-delay:.4s}
.mxs .fface .zzz text:nth-child(3){animation-delay:.8s}
@keyframes zzz{0%,100%{opacity:.45;transform:translateY(0)}50%{opacity:1;transform:translateY(-7px)}}
.mxs .fr-bubble{position:absolute;left:474px;top:176px;background:#fff;border:2.5px solid #5a2d4c;border-radius:14px 14px 14px 4px;padding:6px 12px;font-weight:900;font-size:16px;color:#5a2d4c;opacity:0;transform:scale(.6) translateY(8px);transform-origin:0 100%;transition:opacity .2s,transform .3s cubic-bezier(.3,1.6,.5,1);white-space:nowrap;pointer-events:none;box-shadow:0 4px 8px rgba(90,40,80,.14)}
.mxs .fr-bubble.show{opacity:1;transform:none}

/* ---------- whisk + stir ---------- */
.mxs .mx-whisk{position:absolute;left:0;top:0;width:190px;height:436px;pointer-events:none;transform-origin:95px 346.6px;filter:drop-shadow(0 5px 5px rgba(90,40,80,.28));opacity:0}
.mxs .mx-whisk .coat{opacity:0;transition:opacity .3s}
.mxs .mx-whisk.coated .coat{opacity:1}
.mxs .mx-whisk.in-batter{clip-path:inset(0 0 86px 0)}
.mxs .mx-collar{position:absolute;left:0;top:0;width:180px;height:52px;pointer-events:none;opacity:0;transition:opacity .15s}
.mxs .mx-collar.show{opacity:1}
.mxs .mx-collar svg,.mxs .mx-ribbon svg{display:block;overflow:visible}
.mxs .mx-ribbon{position:absolute;left:0;top:0;width:1024px;height:768px;pointer-events:none}
.mxs .hmeter{position:absolute;left:0;top:0;width:1024px;height:300px;pointer-events:none;opacity:0;transform:translateY(-14px);transition:opacity .3s,transform .45s cubic-bezier(.3,1.4,.5,1)}
.mxs .hmeter.show{opacity:1;transform:none}
.mxs .hmeter svg{position:absolute;left:0;top:0;width:1024px;height:300px;overflow:visible}
.mxs .hmeter i{position:absolute;width:30px;height:28px;margin:-14px 0 0 -15px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -11 24 22'%3E%3Cpath d='M0 9 C-9 3 -11 -3 -7 -6.5 C-4.5 -8.6 -1.4 -7.6 0 -5 C1.4 -7.6 4.5 -8.6 7 -6.5 C11 -3 9 3 0 9 Z' fill='%23fff' stroke='%23dcb9cd' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.mxs .hmeter i.on{width:34px;height:31px;margin:-16px 0 0 -17px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -11 24 22'%3E%3Cpath d='M0 9 C-9 3 -11 -3 -7 -6.5 C-4.5 -8.6 -1.4 -7.6 0 -5 C1.4 -7.6 4.5 -8.6 7 -6.5 C11 -3 9 3 0 9 Z' fill='%23ff8fb1' stroke='%235a2d4c' stroke-width='2' stroke-linejoin='round'/%3E%3Cellipse cx='-4.2' cy='-3.4' rx='2' ry='1.4' fill='%23fff' transform='rotate(-30 -4.2 -3.4)'/%3E%3C/svg%3E");animation:hmOn .4s cubic-bezier(.3,1.8,.5,1)}
.mxs .hmeter.full i{animation:hmJump .55s cubic-bezier(.3,1.6,.5,1) var(--d,0ms) both}
@keyframes hmOn{0%{transform:scale(.4)}60%{transform:scale(1.35)}100%{transform:none}}
@keyframes hmJump{0%{transform:none}40%{transform:translateY(-16px) scale(1.25)}100%{transform:none}}
.mxs .mx-whisk.show{opacity:1}
.mxs .stir-hint{position:absolute;pointer-events:none;opacity:0;transition:opacity .4s}
.mxs .stir-hint.show{opacity:1}
.mxs .stir-hint svg{display:block;width:100%;height:100%;animation:hintPulse 1.2s ease-in-out infinite}
.mxs .meter{position:absolute;left:402px;top:120px;width:220px;height:22px;border-radius:11px;background:#fff;border:3px solid #5a2d4c;overflow:hidden;opacity:0;transform:translateY(-10px);transition:opacity .3s,transform .3s}
.mxs .meter.show{opacity:1;transform:none}
.mxs .meter i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#ffb6cf,#ff5fa2);transition:width .12s}

/* ---------- HUD ---------- */
.mxs .hud-grad{position:absolute;left:0;top:0;width:1024px;height:70px;background:linear-gradient(180deg,rgba(255,248,251,.92),rgba(255,248,251,0))}
.mxs .hud-el{opacity:0;transform:translateY(-70px);transition:transform .45s cubic-bezier(.3,1.4,.5,1),opacity .3s}
.mxs .hud.hud-in .hud-el{opacity:1;transform:none}
.mxs .mx-pill{position:absolute;top:12px;height:34px;border-radius:17px;box-shadow:0 3px 0 rgba(90,40,80,.14);display:flex;align-items:center;justify-content:center;gap:6px;font-weight:900;font-size:14px;color:#5a2d4c}
.mxs .circ{position:absolute;top:8px;width:40px;height:40px;border-radius:50%;box-shadow:0 3px 0 rgba(90,40,80,.16);display:flex;align-items:center;justify-content:center;text-decoration:none}
.mxs .mx-steps{position:absolute;left:var(--pill-cx,507px);translate:-50% 0;top:10px;height:38px;border-radius:19px;background:rgba(255,255,255,.96);box-shadow:0 3px 0 rgba(90,40,80,.14);display:flex;align-items:center;gap:6px;padding:0 8px;box-sizing:border-box}
.mxs .mx-steps .mixlabel{height:26px;padding:0 10px;border-radius:13px;background:#ff8fb1;color:#fff;font-weight:900;font-size:12px;display:flex;align-items:center;white-space:nowrap}
.mxs .ph{position:relative;width:28px;height:28px;border-radius:50%;background:#fbe3ee;display:flex;align-items:center;justify-content:center;transition:transform .3s cubic-bezier(.3,1.6,.5,1),background .3s,box-shadow .3s}
.mxs .ph svg{width:20px;height:20px;display:block}
.mxs .ph.on{background:#fff;box-shadow:0 0 0 3px #ff8fb1;transform:scale(1.14)}
.mxs .ph.done::after{content:"";position:absolute;right:-4px;top:-4px;width:13px;height:13px;border-radius:50%;border:1.5px solid #fff;background:#5aa06f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2 L5.2 8.4 L9 4' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.mxs .stepdot{width:20px;height:20px;border-radius:50%;background:#f7dbe9;color:#c79bb6;font-weight:900;font-size:10px;display:flex;align-items:center;justify-content:center}
.mxs .mx-badge{position:absolute;left:548px;top:62px;width:52px;height:52px;border-radius:50%;background:#fff;border:3px solid #ff8fb1;box-shadow:0 4px 8px rgba(90,40,80,.18);overflow:hidden;opacity:0;transform:scale(.4);transition:opacity .25s,transform .4s cubic-bezier(.3,1.6,.5,1)}
.mxs .mx-badge.in{opacity:1;transform:none}
.mxs .mx-badge.talk{animation:badgeTalk .38s cubic-bezier(.3,1.6,.5,1)}
@keyframes badgeTalk{40%{transform:scale(1.14)}100%{transform:none}}
.mxs .mx-badge .puppet{position:absolute;left:-8%;top:2%;width:116%;height:auto}
.mxs .mx-bubble{position:absolute;left:608px;top:66px;max-width:176px;background:#fff;border:2px solid #ffd1e6;border-radius:14px 14px 14px 4px;padding:6px 11px;font-weight:800;font-size:13.5px;line-height:1.25;color:#5a2d4c;box-shadow:0 3px 6px rgba(90,40,80,.12);opacity:0;transform-origin:0 100%}
.mxs .mx-bubble.show{opacity:1;animation:bubblePop .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes bubblePop{from{transform:scale(.6)}to{transform:none}}
.mxs .ticket{position:absolute;left:796px;top:60px;width:214px;height:56px;border-radius:14px;background:#fff8d6;border:2px dashed #e6c86a;box-shadow:0 4px 8px rgba(90,40,80,.14);display:flex;align-items:center;gap:6px;padding:0 10px;box-sizing:border-box;opacity:0;transform:translateY(-20px);transition:opacity .3s,transform .4s cubic-bezier(.3,1.5,.5,1)}
.mxs .ticket.in{opacity:1;transform:none}
.mxs .ticket .tk-face{width:38px;height:40px;overflow:hidden}
.mxs .ticket .tk-face .puppet{width:100%;height:auto}
.mxs .ticket small{font-weight:800;font-size:11px;color:#a98a3a}
.mxs .chip{position:relative;width:30px;height:30px;border-radius:9px;background:#fff;border:2px solid #ecd9a0;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
.mxs .chip svg{width:24px;height:24px;display:block}
.mxs .chip.done{background:#e3f7e8;border-color:#5aa06f;animation:chipDone .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes chipDone{40%{transform:scale(1.3)}100%{transform:none}}
.mxs .action{position:absolute;right:18px;top:698px;height:52px;padding:0 22px 0 16px;border-radius:26px;background:linear-gradient(180deg,#ffb6cf,#ff8fb1);border:3px solid #fff;box-shadow:0 5px 0 #d97aa0,0 8px 14px rgba(90,40,80,.22);display:flex;align-items:center;gap:8px;font-family:inherit;font-weight:900;font-size:20px;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.15);cursor:pointer;opacity:0;transform:translateY(30px) scale(.8);transition:opacity .25s,transform .4s cubic-bezier(.3,1.5,.5,1);pointer-events:none}
.mxs .action.show{opacity:1;transform:none;animation:actPulse 1.4s ease-in-out .5s infinite}
@keyframes actPulse{0%,100%{box-shadow:0 5px 0 #d97aa0,0 8px 14px rgba(90,40,80,.22)}50%{box-shadow:0 5px 0 #d97aa0,0 8px 24px rgba(255,95,162,.6)}}
.mxs .action svg{width:30px;height:30px;display:block;background:#fff;border-radius:50%;padding:2px;box-sizing:border-box}
.mxs .action span::after{content:" →"}

.mxs .endcard{position:absolute;left:302px;top:170px;width:420px;padding:22px 24px 18px;box-sizing:border-box;border-radius:28px;background:#fff;border:3.5px solid #5a2d4c;box-shadow:0 10px 0 rgba(90,40,80,.12),0 24px 44px rgba(90,40,80,.25);display:none;flex-direction:column;align-items:center;gap:12px}
.mxs .endcard.show{display:flex;animation:cardIn .5s cubic-bezier(.3,1.5,.5,1)}
@keyframes cardIn{from{transform:translateY(40px) scale(.8);opacity:0}to{transform:none;opacity:1}}
.mxs .endcard h2{margin:0;font-size:30px;font-weight:900;color:#5a2d4c}
.mxs .ec-swatch{width:130px;height:46px;border-radius:50%;border:3px solid #5a2d4c;box-shadow:inset 0 7px 0 rgba(255,255,255,.55),inset 0 -5px 0 rgba(90,40,80,.12)}
.mxs .ec-went{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;max-width:360px}
.mxs .ec-went span svg{width:34px;height:34px;display:block}
.mxs .ec-buttons{display:flex;gap:12px;margin-top:4px}
.mxs .ec-buttons button{font-family:inherit;font-weight:900;font-size:17px;padding:13px 20px;border-radius:24px;border:3px solid #fff;cursor:pointer;box-shadow:0 4px 0 rgba(90,40,80,.18)}
.mxs .ec-again{background:#f3e6ff;color:#5a2d4c;border-color:#5a2d4c!important}
.mxs .ec-next{background:linear-gradient(180deg,#ffb6cf,#ff5fa2);color:#fff}
.mxs .ec-note{font-size:13px;font-weight:700;color:#8a6a86;min-height:16px;text-align:center}
.mxs .start{position:absolute;left:0;top:0;width:1024px;height:768px;z-index:100;display:flex;align-items:center;justify-content:center;background:rgba(255,240,247,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:opacity .35s}
.mxs .start button{font-family:inherit;font-weight:900;font-size:32px;color:#fff;padding:22px 46px;border-radius:40px;border:4px solid #fff;background:linear-gradient(180deg,#ffb6cf,#ff5fa2);box-shadow:0 7px 0 #d9689a,0 14px 24px rgba(90,40,80,.25);cursor:pointer;animation:actPulse 1.4s ease-in-out infinite}
.mxs .start.gone{opacity:0;pointer-events:none}

/* ---------- character rig (same as the game) ---------- */
.mxs .puppet{display:block;overflow:visible}
.mxs .pp-eyes{transform-box:fill-box;transform-origin:50% 55%;animation:ppBlink 4.6s ease-in-out infinite}
@keyframes ppBlink{0%,91%,100%{transform:scaleY(1)}94%{transform:scaleY(.06)}97%{transform:scaleY(1)}}
.mxs .puppet .pp-mouth>*{display:none}
.mxs .puppet[data-mood="happy"] .m-smile,.mxs .puppet[data-mood="excited"] .m-open,.mxs .puppet[data-mood="yum"] .m-yum,.mxs .puppet[data-mood="grossed"] .m-grossed,.mxs .puppet[data-mood="o"] .m-o,.mxs .puppet[data-mood="flat"] .m-flat{display:block}
.mxs .pp-brows,.mxs .b-left,.mxs .b-right{transform-box:fill-box;transform-origin:center;transition:transform .2s}
.mxs .puppet[data-mood="excited"] .pp-brows,.mxs .puppet[data-mood="o"] .pp-brows{transform:translateY(-7px)}
.mxs .puppet[data-mood="grossed"] .b-left{transform:rotate(14deg)}
.mxs .puppet[data-mood="grossed"] .b-right{transform:rotate(-14deg)}
.mxs .puppet[data-mood="grossed"] .pp-blush{opacity:.15}

/* locked ingredients: greyed, with the star count needed */
.mxs .mx-item.locked{cursor:not-allowed}
.mxs .mx-item.locked .item-art{filter:grayscale(.85) brightness(1.08) opacity(.72)}
.mxs .lock{position:absolute;right:-4px;bottom:2px;height:20px;padding:0 6px 0 4px;border-radius:10px;background:#8a6a96;border:2px solid #fff;display:flex;align-items:center;gap:2px;color:#fff;font-weight:900;font-size:11px;box-shadow:0 2px 0 rgba(90,40,80,.2);pointer-events:none}
.mxs .lock svg{display:block;width:11px;height:11px}

.mxs .stepdone{width:20px;height:20px;border-radius:50%;background:#5aa06f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2 L5.2 8.4 L9 4' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/72% no-repeat;flex:none}
/* ---- SCOOP STAGE (js/scoop/) — the pan is the star ---- */
.scs .sc-rail{position:absolute;left:0;top:0;width:1024px;height:768px;pointer-events:none}
.scs .sc-rail svg{position:absolute;left:0;top:0;display:block}
.scs .sc-mini{position:absolute;top:122px;width:66px;height:74px;padding:0;border:0;background:none;cursor:pointer;pointer-events:auto;transform:translateY(-40px);opacity:0;transition:transform .45s cubic-bezier(.3,1.5,.5,1) calc(var(--i) * 60ms),opacity .3s calc(var(--i) * 60ms)}
.scs .sc-rail.in .sc-mini{transform:none;opacity:1}
.scs .sc-mini svg{position:absolute;left:2px;top:10px;display:block;filter:drop-shadow(0 3px 2px rgba(90,40,80,.2))}
.scs .sc-hook{position:absolute;left:28px;top:-6px;width:10px;height:16px;border:3px solid #5a2d4c;border-bottom:none;border-radius:6px 6px 0 0;box-sizing:border-box}
.scs .sc-mini.on svg{opacity:.45;filter:grayscale(.3)}
.scs .sc-mini.on::after{content:"";position:absolute;left:4px;top:12px;width:56px;height:40px;border:3px dashed #e0a9c2;border-radius:10px;box-sizing:border-box}
.scs .sc-mini.nope{animation:nope .35s}
.scs .sc-bowl{position:absolute;left:0;top:0;width:1024px;height:768px;transform:translateX(-420px);transition:transform .55s cubic-bezier(.3,1.2,.5,1)}
.scs .sc-bowl.in{transform:none}
.scs .sc-bowl svg{position:absolute;left:0;top:0;display:block;pointer-events:none}
.scs .sc-bowl-shadow{position:absolute;height:26px;border-radius:50%;background:radial-gradient(ellipse,rgba(90,40,80,.34),transparent 70%)}
.scs .sc-bowl-hint{opacity:0}
.scs .sc-bowl.hint:not(.scooped) .sc-bowl-hint{opacity:1;animation:hintPulse 1.2s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 50%}
.scs .sc-pan{position:absolute;left:0;top:0;width:1024px;height:768px;pointer-events:none;transform:translateY(-760px);transform-origin:648px 648px}
.scs .sc-pan.in{transform:none;transition:transform .55s cubic-bezier(.32,1.25,.55,1)}
.scs .sc-pan.out{transform:translateX(760px) rotate(6deg);transition:transform .3s cubic-bezier(.6,0,.9,.5)}
.scs .sc-pan.land{animation:bowlLand .38s ease-out .5s}
.scs .sc-pan svg{position:absolute;left:0;top:0;display:block}
.scs .sc-scoop{position:absolute;left:0;top:0;width:300px;height:300px;pointer-events:none;opacity:0;transform-origin:90px 160px;filter:drop-shadow(0 6px 6px rgba(90,40,80,.28));transition:opacity .2s}
.scs .sc-scoop.show{opacity:1}
.scs .sc-scoop.grab svg{animation:scGrab .26s ease-out}
.scs .sc-scoop.empty .sc-load{opacity:0;transition:opacity .12s .1s}
.scs .sc-scoop svg{display:block;overflow:visible;transform-origin:90px 160px}
@keyframes scGrab{0%{transform:scale(.8,1.1)}60%{transform:scale(1.08,.94)}100%{transform:none}}
.scs .sc-drop{position:absolute;width:34px;height:40px;border-radius:50% 50% 50% 50%/60% 60% 42% 42%;background:radial-gradient(circle at 36% 30%,var(--bat-light) 0 22%,var(--bat) 60%);border:2.6px solid #5a2d4c;box-sizing:border-box;pointer-events:none;transition:transform .25s cubic-bezier(.55,0,1,.6)}

/* ---- OVEN STAGE (js/oven/) — the oven is the star ---- */
.ovs .ov-decor{position:absolute;left:0;top:0;width:1024px;height:768px;pointer-events:none}
.ovs .ov-oven{position:absolute;left:0;top:0;width:1024px;height:820px;transform:translateX(760px);perspective:1100px;perspective-origin:520px 330px;pointer-events:none}
.ovs .ov-oven.enter{transform:none;transition:transform .7s cubic-bezier(.3,1.08,.5,1)}
.ovs .ov-oven.land{animation:fridgeLand .36s ease-out;transform-origin:520px 800px}
.ovs .ov-body,.ovs .ov-face{position:absolute;left:0;top:0;display:block}
.ovs .ov-cavity-glow{opacity:0;transition:opacity .5s}
.ovs .ov-oven.on .ov-cavity-glow{opacity:.5}
.ovs .ov-oven.armed .ov-cavity-glow{opacity:.3}
.ovs .ov-coil{opacity:.35;transition:opacity .4s}
.ovs .ov-oven.on .ov-coil{opacity:1}
.ovs .ov-face .f-sleep{opacity:0;transition:opacity .2s}
.ovs .ov-oven.sleep .f-sleep{opacity:1}
.ovs .ov-face .f-awake{transition:opacity .2s}
.ovs .ov-oven.sleep .f-awake{opacity:0}
.ovs .ov-face .f-worry,.ovs .ov-face .f-sweat{opacity:0}
.ovs .ov-oven.worried .f-worry,.ovs .ov-oven.worried .f-sweat{opacity:1}
.ovs .ov-oven.worried .f-smile{opacity:0}
.ovs .ov-oven.wake .f-awake ellipse{animation:eyePop .45s cubic-bezier(.3,1.6,.5,1);transform-box:fill-box;transform-origin:50% 50%}
.ovs .ov-knob{position:absolute;top:203px;width:74px;height:74px;padding:0;border:0;background:none;pointer-events:auto;border-radius:50%}
.ovs .ov-knob svg{display:block;overflow:visible}
.ovs .ov-knob .kn-turn{transition:transform .5s cubic-bezier(.3,1.5,.5,1)}
.ovs .ov-heat{left:343px;cursor:pointer}
.ovs .ov-clock{left:623px;pointer-events:none}
.ovs .ov-oven.hint-heat .ov-heat{animation:knobHint 1s ease-in-out infinite}
.ovs .ov-heat.turned{filter:drop-shadow(0 0 10px #ffb347)}
@keyframes knobHint{0%,100%{transform:scale(1);filter:drop-shadow(0 0 0 #fff)}50%{transform:scale(1.12);filter:drop-shadow(0 0 14px #fff) drop-shadow(0 0 8px #ff9f43)}}
.ovs .ov-inside{position:absolute;left:0;top:0;width:1024px;height:768px;transform:translate(248px,368px) scale(.42);transform-origin:0 0;opacity:0}
.ovs .ov-inside.on{opacity:1}
.ovs .ov-inside svg,.ovs .ov-pan svg{position:absolute;left:0;top:0;display:block}
.ovs .ov-door{position:absolute;left:0;top:0;width:1024px;height:768px;transform-origin:520px 692px;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.4,1.3,.55,1);pointer-events:none}
.ovs .ov-door.open{transform:rotateX(-86deg)}
.ovs .ov-door-front,.ovs .ov-door-back{position:absolute;left:0;top:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.ovs .ov-door-back{transform-origin:520px 520px;transform:rotateX(180deg)}
.ovs .ov-door-front svg,.ovs .ov-door-back svg{display:block}
.ovs .ov-doorglow{opacity:0;transition:opacity .6s}
.ovs .ov-oven.on .ov-doorglow{opacity:1}
.ovs .ov-gold-glow{opacity:0}
.ovs .ov-oven.gold .ov-gold-glow{animation:goldPulse .7s ease-in-out infinite alternate}
@keyframes goldPulse{from{opacity:.25}to{opacity:1}}
.ovs .ov-door-hit{position:absolute;left:330px;top:348px;width:380px;height:344px;border-radius:30px;pointer-events:auto;cursor:pointer}
.ovs .ov-heat-lines{position:absolute;left:376px;top:84px;width:120px;height:70px;opacity:0;transition:opacity .6s;background:
  radial-gradient(ellipse 5px 30px at 16px 40px,rgba(255,179,92,.55),transparent 70%),radial-gradient(ellipse 5px 30px at 56px 34px,rgba(255,179,92,.5),transparent 70%),radial-gradient(ellipse 5px 30px at 96px 40px,rgba(255,179,92,.55),transparent 70%);animation:heatRise 1.6s ease-in-out infinite}
.ovs .ov-oven.on .ov-heat-lines{opacity:1}
@keyframes heatRise{0%{transform:translateY(8px) scaleX(1)}50%{transform:translateY(-4px) scaleX(1.3)}100%{transform:translateY(8px) scaleX(1)}}
.ovs .ov-pan{position:absolute;left:0;top:0;width:1024px;height:768px;transform-origin:0 0;pointer-events:none}
.ovs .ov-pan.lifted{filter:drop-shadow(0 16px 10px rgba(90,40,80,.3))}
.ovs .ov-pan.hidden{opacity:0}
.ovs .ov-pan.hint{animation:panGlow 1.1s ease-in-out infinite}
@keyframes panGlow{0%,100%{filter:drop-shadow(0 0 0 rgba(255,255,255,0))}50%{filter:drop-shadow(0 0 16px #fff) drop-shadow(0 0 8px #ff9fc6)}}
/* ---- DECORATING STUDIO (js/decorate/) — the treat is the star, the trolley is the menu ---- */
.dcs{touch-action:none}
.dcs .world>svg,.dcs .dc-stand svg,.dcs .dc-cart-art svg{position:absolute;left:0;top:0;display:block}
.dcs .ds-ring{opacity:.35}
.dcs .world.lit .ds-ring{animation:flicker .6s linear forwards}
.dcs .world.flash::after{content:"";position:absolute;inset:0;background:#fff;pointer-events:none;animation:dcFlash .55s ease-out forwards}
@keyframes dcFlash{from{opacity:.75}to{opacity:0}}
.dcs .dc-stand{position:absolute;left:0;top:0;width:1024px;height:768px;pointer-events:none}
.dcs .dc-hero{position:absolute;left:160px;top:110px;width:460px;height:460px;pointer-events:none;transform:translateY(-660px);transform-origin:50% 91%}
.dcs .dc-hero.in{transform:none;transition:transform .55s cubic-bezier(.32,1.25,.55,1)}
.dcs .dc-hero.land{animation:bowlLand .38s ease-out}
.dcs .dc-hero.hop{animation:dcHop .6s cubic-bezier(.3,1.4,.5,1)}
@keyframes dcHop{0%{transform:none}35%{transform:translateY(-26px) scale(1.04)}70%{transform:translateY(2px) scale(1.03,.97)}100%{transform:none}}
.dcs .dc-hero svg{display:block;overflow:visible}
/* the trolley */
.dcs .dc-cart{position:absolute;left:0;top:0;width:1024px;height:768px;pointer-events:none;transform:translateX(450px)}
.dcs .dc-cart.arrive{transform:none;transition:transform .72s cubic-bezier(.22,1.16,.4,1)}
.dcs .dc-cart.arrive.out{transform:translateX(450px);transition:transform .42s cubic-bezier(.6,0,.9,.4)}
.dcs .dc-cart-art,.dcs .dc-items{position:absolute;left:0;top:0;width:1024px;height:768px;transform-origin:770px 668px}
.dcs .dc-cart .dc-spoke{transform-box:fill-box;transform-origin:50% 50%}
.dcs .dc-cart.rolling .dc-spoke{animation:dcSpin .26s linear infinite}
.dcs .dc-cart.rolling.back .dc-spoke{animation-direction:reverse}
@keyframes dcSpin{to{transform:rotate(360deg)}}
.dcs .dc-cart.land .dc-cart-art,.dcs .dc-cart.land .dc-items{animation:cartLand .45s ease-out}
@keyframes cartLand{0%{transform:rotate(-2.2deg)}45%{transform:rotate(1.2deg)}75%{transform:rotate(-.4deg)}100%{transform:none}}
.dcs .dc-item{position:absolute;padding:0;margin:0;border:0;background:none;cursor:pointer;pointer-events:auto;touch-action:none;transform-origin:50% calc(100% - 4px);-webkit-tap-highlight-color:transparent;font:inherit}
.dcs .dc-item.deco{pointer-events:none}
.dcs .dc-item svg{position:absolute;left:0;top:0;display:block;overflow:visible;filter:drop-shadow(0 3px 2px rgba(90,40,80,.2));transition:transform .25s cubic-bezier(.3,1.6,.5,1),filter .2s,opacity .15s}
.dcs .dc-item.sel svg{transform:translateY(-10px);filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 9px #ff5fa2)}
.dcs .dc-item.bump svg{animation:dcBump .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes dcBump{0%{scale:1}40%{scale:1.12 .92}100%{scale:1}}
.dcs .dc-item.locked svg{filter:grayscale(.85) brightness(1.08) opacity(.75)}
.dcs .dc-item.nope svg{animation:nope .35s ease}
.dcs .dc-item.lifted svg{opacity:.3}
/* the arrow (right of the trolley) + which cart you're on */
.dcs .dc-more{position:absolute;left:942px;top:366px;width:70px;height:70px;border-radius:50%;padding:0;border:4px solid #fff;background:linear-gradient(180deg,#ffb6cf,#ff5fa2);box-shadow:0 5px 0 #d9689a,0 10px 16px rgba(90,40,80,.25);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transform:scale(.3);transition:opacity .25s,transform .4s cubic-bezier(.3,1.6,.5,1);-webkit-tap-highlight-color:transparent}
.dcs .dc-more svg{display:block;transition:translate .2s}
.dcs .hud.ready .dc-more{opacity:1;transform:none;pointer-events:auto}
.dcs .hud.ready .dc-more:active{transform:scale(.9)}
.dcs .dc-more.nudge{animation:dcNudge 1.1s ease-in-out 3}
@keyframes dcNudge{0%,100%{translate:0 0}25%{translate:12px 0}50%{translate:-2px 0}70%{translate:6px 0}}
.dcs .dc-dots{position:absolute;left:950px;top:446px;width:54px;display:flex;justify-content:center;gap:6px;opacity:0;transition:opacity .3s}
.dcs .hud.ready .dc-dots{opacity:1}
.dcs .dc-dots i{width:11px;height:11px;border-radius:50%;background:#f3d3e3;border:2px solid #fff;box-shadow:0 1px 0 rgba(90,40,80,.2);transition:background .2s,transform .3s cubic-bezier(.3,1.6,.5,1)}
.dcs .dc-dots i.on{background:#ff5fa2;transform:scale(1.2)}
/* undo + start over */
.dcs .dc-tools{position:absolute;left:18px;top:694px;display:flex;gap:12px;opacity:0;transform:translateY(30px);transition:opacity .25s,transform .4s cubic-bezier(.3,1.5,.5,1)}
.dcs .hud.ready .dc-tools{opacity:1;transform:none}
.dcs .dc-tools button{width:56px;height:56px;border-radius:50%;padding:0;border:3px solid #fff;background:linear-gradient(180deg,#d9c8ff,#a98ce6);box-shadow:0 4px 0 #8a6cc4,0 7px 12px rgba(90,40,80,.2);display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent}
.dcs .dc-tools button:active{transform:translateY(3px);box-shadow:0 1px 0 #8a6cc4}
.dcs .dc-tools svg{display:block}
/* the tool in your hand, and a topping being carried */
.dcs .dc-hand{position:absolute;left:0;top:0;width:120px;height:150px;pointer-events:none;opacity:0;transition:opacity .2s,transform .45s cubic-bezier(.3,1.25,.5,1);filter:drop-shadow(0 10px 8px rgba(90,40,80,.28));will-change:transform}
.dcs .dc-hand.show{opacity:1}
.dcs .dc-hand.active{transition:opacity .2s}
.dcs .dc-hand svg{display:block;overflow:visible}
.dcs .dc-hand.shake.active svg{animation:dcShake .1s ease-in-out infinite alternate}
@keyframes dcShake{from{transform:translate(-3px,-2px) rotate(-5deg)}to{transform:translate(3px,2px) rotate(5deg)}}
.dcs .dc-carry{position:absolute;left:0;top:0;width:120px;height:140px;pointer-events:none;filter:drop-shadow(0 12px 9px rgba(90,40,80,.3));will-change:transform}
.dcs .dc-carry.home{transition:transform .32s cubic-bezier(.3,1.3,.5,1),opacity .25s .1s;opacity:0}
.dcs .dc-carry svg{display:block;overflow:visible}
/* decorations landing on the treat */
.dcs .dc-new{transform-box:fill-box;transform-origin:50% 70%;animation:dcPop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes dcPop{0%{transform:scale(.3)}60%{transform:scale(1.12,.92)}100%{transform:none}}
.dcs .dc-fall{animation:dcFall .3s cubic-bezier(.5,0,1,.6) both}
@keyframes dcFall{from{transform:translateY(-40px);opacity:.3}to{transform:none;opacity:1}}
.dcs .dc-drop{animation:dcDrop .5s cubic-bezier(.3,1.5,.5,1) both}
@keyframes dcDrop{0%{transform:translateY(-40px) scale(.7)}55%{transform:translateY(3px) scale(1.14,.86)}100%{transform:none}}
.dcs .h-top .dc-flame{transform-box:fill-box;transform-origin:50% 100%;animation:dcFlame .45s ease-in-out infinite alternate}
@keyframes dcFlame{from{transform:scale(1,1) rotate(-4deg)}to{transform:scale(.88,1.12) rotate(4deg)}}
/* the decorated treat, handed to the serve step */
.cake-canvas.deco-shot .dc-snap{position:absolute;left:0;top:0;width:100%;height:100%;display:block;overflow:visible}
.cake-canvas.deco-shot .dc-flame{transform-box:fill-box;transform-origin:50% 100%;animation:dcFlame .45s ease-in-out infinite alternate}
.dcs .dc-tools .dc-clear.arm{background:linear-gradient(180deg,#ff9a9a,#ff5f6d);box-shadow:0 4px 0 #d94a58,0 7px 12px rgba(90,40,80,.2);animation:nope .35s ease}
/* ---- SERVING COUNTER (js/counter/) — cut a slice, feed the customer ---- */
.cts{touch-action:none}
.cts .world>svg,.cts .ct-counter svg,.cts .ct-stand svg{position:absolute;left:0;top:0;display:block}
.cts .ct-counter,.cts .ct-stand{position:absolute;left:0;top:0;width:1024px;height:768px;pointer-events:none}
.cts .mx-badge,.cts .mx-bubble{display:none}
.cts .ct-cust{position:absolute;left:622px;top:190px;width:380px;height:456px;pointer-events:none;transform:translateX(460px)}
.cts .ct-cust.in{transform:none;transition:transform .62s cubic-bezier(.3,1.2,.5,1)}
.cts .ct-body{width:100%;height:100%;transform-origin:50% 88%;transition:transform .24s cubic-bezier(.3,1.3,.5,1)}
.cts .ct-cust.lean .ct-body{transform:translate(-16px,36px) rotate(-5deg)}
.cts .ct-cust.hop .ct-body{animation:ctHop .5s cubic-bezier(.3,1.4,.5,1) 2}
@keyframes ctHop{0%,100%{transform:none}40%{transform:translateY(-18px)}70%{transform:translateY(0) scaleY(.96)}}
.cts .ct-cust .puppet{display:block;width:100%;height:100%;filter:drop-shadow(0 8px 10px rgba(90,40,80,.2))}
.cts .ct-cust .pp-head{transform-box:fill-box;transform-origin:50% 100%;animation:ctSway 3.6s ease-in-out infinite alternate}
.cts .ct-cust .pp-body{transform-box:fill-box;transform-origin:50% 100%;animation:ctBreathe 2.6s ease-in-out infinite alternate}
.cts .ct-cust.talk .pp-mouth>*,.cts .ct-cust.chew .pp-mouth>*{display:none}
.cts .ct-cust.talk .pp-mouth .m-open{display:block;transform-box:fill-box;transform-origin:50% 0;animation:ctTalk .16s ease-in-out infinite alternate}
.cts .ct-cust.chew .pp-mouth .m-open{display:block;transform-box:fill-box;transform-origin:50% 0;animation:ctTalk .24s ease-in-out infinite alternate}
.cts .ct-cust.chew .pp-head{animation:ctChew .24s ease-in-out infinite alternate}
@keyframes ctSway{from{transform:rotate(-2.5deg)}to{transform:rotate(2.5deg)}}
@keyframes ctBreathe{from{transform:scaleY(1)}to{transform:scaleY(1.02)}}
@keyframes ctTalk{from{transform:scaleY(.3)}to{transform:scaleY(1)}}
@keyframes ctChew{from{transform:translateY(0)}to{transform:translateY(4px) scaleY(.96)}}
.cts .ct-bubble{position:absolute;right:348px;top:232px;max-width:230px;background:#fff;border:2.5px solid #ffd1e6;border-radius:18px 18px 4px 18px;padding:9px 14px;font-weight:900;font-size:17px;line-height:1.25;color:#5a2d4c;box-shadow:0 4px 10px rgba(90,40,80,.14);opacity:0;transform-origin:100% 100%}
.cts .ct-bubble.show{opacity:1;animation:bubblePop .35s cubic-bezier(.3,1.6,.5,1)}
.cts .ct-board{position:absolute;left:430px;top:612px;width:180px;height:60px;pointer-events:none}
.cts .ct-board svg,.cts .ct-plate svg{display:block;overflow:visible}
.cts .ct-board .ct-board-knife{transition:opacity .15s}
.cts .ct-board.empty .ct-board-knife{opacity:0}
.cts .ct-board.hint .ct-board-knife{animation:ctNudge 1.2s ease-in-out infinite}
@keyframes ctNudge{0%,60%,100%{opacity:1}30%{opacity:.55}}
.cts .ct-plate{position:absolute;left:692px;top:612px;width:240px;height:72px;pointer-events:none}
.cts .ct-plate.hint svg{animation:ctGlow 1.1s ease-in-out infinite}
@keyframes ctGlow{0%,100%{filter:drop-shadow(0 0 0 #fff)}50%{filter:drop-shadow(0 0 10px #fff) drop-shadow(0 0 8px #ff9fc6)}}
.cts .ct-plate.bounce svg{animation:ctPlate .4s cubic-bezier(.3,1.6,.5,1)}
@keyframes ctPlate{40%{transform:scale(1.06,.9)}100%{transform:none}}
.cts .ct-cake{position:absolute;left:100px;top:110px;width:460px;height:460px;pointer-events:none}
.cts .ct-cake svg,.cts .ct-slice svg,.cts .ct-plated svg{display:block;overflow:visible}
.cts .ct-guide{animation:ctDash .9s linear infinite;filter:drop-shadow(0 0 3px #ff5fa2)}
@keyframes ctDash{to{stroke-dashoffset:-40}}
.cts .ct-start{transform-box:fill-box;transform-origin:50% 50%;animation:hintPulse 1.1s ease-in-out infinite}
.cts .ct-wedge-glow{animation:ctPulse .9s ease-in-out infinite alternate}
@keyframes ctPulse{from{opacity:.35}to{opacity:1}}
.cts .ct-slice{position:absolute;left:100px;top:110px;width:460px;height:460px;pointer-events:none;visibility:hidden;will-change:transform}
.cts .ct-slice.up{visibility:visible;filter:drop-shadow(0 14px 12px rgba(90,40,80,.3))}
.cts .ct-plated{position:absolute;left:692px;top:476px;width:240px;height:200px;pointer-events:none;transform-origin:50% 86%}
.cts .ct-plated.flip-in{animation:ctFlip .4s cubic-bezier(.3,1.5,.5,1)}
@keyframes ctFlip{0%{transform:scaleX(0)}60%{transform:scale(1.08,.94)}100%{transform:none}}
.cts .ct-knife{position:absolute;left:0;top:0;width:120px;height:210px;pointer-events:none;opacity:0;filter:drop-shadow(0 10px 8px rgba(90,40,80,.3));transition:opacity .15s}
.cts .ct-knife.show{opacity:1}
.cts .ct-knife svg{display:block;overflow:visible}
.cts .ct-crumb{position:absolute;width:7px;height:6px;border-radius:2px;border:1.4px solid rgba(90,45,76,.55);box-sizing:border-box;transition:transform .6s cubic-bezier(.4,0,1,.6),opacity .4s .4s;pointer-events:none}
.cts .ct-heart{position:absolute;width:30px;height:28px;pointer-events:none;transition:transform 1.2s cubic-bezier(.2,.8,.3,1),opacity .9s .4s}
/* name tags on the dry-goods stand, and the name that rides along with a carried ingredient */
.mxs .mx-tag{position:absolute;transform:translateX(-50%);padding:3px 10px;border-radius:11px;background:#fff;border:2px solid #f4b8d0;box-shadow:0 2px 0 rgba(90,40,80,.12);font-weight:900;font-size:13px;line-height:1.15;color:#5a2d4c;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .3s}
.mxs .riser.in .mx-tag{opacity:1;transition-delay:.8s}
.mxs .carry-name{position:absolute;left:0;top:0;padding:4px 12px;border-radius:13px;background:#fff;border:2.5px solid #ff8fb1;box-shadow:0 4px 8px rgba(90,40,80,.18);font-weight:900;font-size:16px;color:#5a2d4c;white-space:nowrap;pointer-events:none;transition:opacity .2s;z-index:2}
.mxs .carry-name.bye{opacity:0}
/* ---- FREE BAKE: pick a pan (js/choose/) ---- */
.chs{touch-action:none}
.chs .mx-steps{display:none}
.chs .world{opacity:0;transition:opacity .35s,transform .38s ease-in}
.chs .world.in{opacity:1}
.chs.leaving .world{opacity:0;transform:scale(1.04)}
.chs .ch-board{position:absolute;left:0;top:0;display:block;pointer-events:none}
.chs .ch-cards{position:absolute;left:0;top:0;width:1024px;height:768px}
.chs .ch-card{position:absolute;width:140px;height:158px;padding:0;margin:0;border:0;background:none;cursor:pointer;pointer-events:auto;transform-origin:70px 0;animation:chSwing 3.2s ease-in-out calc(var(--i) * -.37s) infinite alternate;-webkit-tap-highlight-color:transparent;font:inherit}
@keyframes chSwing{from{transform:rotate(-2.2deg)}to{transform:rotate(2.2deg)}}
.chs .ch-hook{position:absolute;left:62px;top:-6px;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid #5a2d4c;box-sizing:border-box}
.chs .ch-hook::after{content:"";position:absolute;left:3.5px;top:10px;width:3px;height:12px;background:#5a2d4c;border-radius:2px}
.chs .ch-pan{position:absolute;left:14px;top:14px;width:112px;height:112px;filter:drop-shadow(0 5px 4px rgba(90,40,80,.22));transition:transform .3s cubic-bezier(.3,1.6,.5,1),filter .2s}
.chs .ch-pan svg{display:block}
.chs .ch-makes{position:absolute;right:0;top:12px;width:42px;height:42px;border-radius:50%;background:#fff;border:3px solid #ffd1e6;box-sizing:border-box;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 0 rgba(90,40,80,.14)}
.chs .ch-makes svg{display:block}
.chs .ch-name{position:absolute;left:50%;bottom:0;transform:translateX(-50%);padding:3px 10px;border-radius:11px;background:#fff;border:2px solid #f4b8d0;font-weight:900;font-size:13px;color:#5a2d4c;white-space:nowrap;box-shadow:0 2px 0 rgba(90,40,80,.12);transition:background .2s,color .2s}
.chs .ch-card.sel{animation:none;z-index:2}
.chs .ch-card.sel .ch-pan{transform:translateY(-10px) scale(1.1);filter:drop-shadow(0 0 6px #fff) drop-shadow(0 0 12px #ff5fa2)}
.chs .ch-card.sel .ch-name{background:#ff8fb1;border-color:#fff;color:#fff}
.chs .ch-card.locked .ch-pan,.chs .ch-card.locked .ch-makes{filter:grayscale(.85) opacity(.7)}
.chs .ch-card.nope{animation:nope .35s ease}
.chs .ch-lock{position:absolute;left:8px;top:12px;height:22px;padding:0 8px 0 6px;border-radius:11px;background:#8a6a96;border:2px solid #fff;display:flex;align-items:center;gap:3px;color:#fff;font-weight:900;font-size:12px}
.chs .ch-lock svg{display:block}
.chs .ch-preview{position:absolute;left:696px;top:196px;width:300px;height:300px;pointer-events:none}
.chs .ch-preview svg{display:block;overflow:visible}
.chs .ch-preview.pop{animation:chPop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes chPop{0%{transform:translateY(-40px) scale(.6);opacity:0}60%{transform:translateY(4px) scale(1.04,.95);opacity:1}100%{transform:none}}
.chs .ch-ask{position:absolute;left:50px;top:36px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.75);border:4px dashed #f4b8d0;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#8a6a86;font-weight:800;font-size:15px;line-height:1.2;text-align:center}
.chs .ch-ask b{font-size:58px;line-height:1;color:#ff8fb1}
.chs .ch-count{position:absolute;right:6px;top:36px;padding:4px 12px;border-radius:16px;background:#ffd23f;border:3px solid #5a2d4c;font-weight:900;font-size:22px;color:#5a2d4c}
.chs .ch-caption{position:absolute;left:696px;top:592px;width:300px;display:flex;flex-direction:column;align-items:center;gap:2px;opacity:0;transform:translateY(8px);transition:opacity .25s,transform .35s cubic-bezier(.3,1.5,.5,1);pointer-events:none}
.chs .ch-caption.show{opacity:1;transform:none}
.chs .ch-caption b{font-size:24px;font-weight:900;color:#5a2d4c}
.chs .ch-caption span{font-size:15px;font-weight:800;color:#8a6a86}
.chs .ch-q{font-size:18px;font-weight:900;color:#ff8fb1}
.mxs .tk-star{font-size:18px;color:#ffb300;line-height:1}