/* WonderMart Episode 1: Mama's Birthday Cake */
:root{
  --blue:#0058B0; --navy:#003068; --red:#D83020; --yellow:#F8D800; --sun:#FFD84D;
  --sky:#4DA8FF; --cyan:#1FD8F5; --coral:#FF6B6B; --lav:#B79CFF; --purple:#8E5CF0;
  --mint:#8BE3C2; --green:#7BC96F; --cream:#FFFCF6; --sand:#FFF4DE; --ink:#2E2A22;
  --batter:#FFE08A; --s:1; --kw:120px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:var(--sand);color:var(--ink);
  font-family:"Baloo 2","Quicksand",ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif;
  -webkit-user-select:none;user-select:none;touch-action:manipulation}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}
#app{position:fixed;inset:0;display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:100%}
#stage{grid-row:2;grid-column:1}
#counter{grid-row:3;grid-column:1}

/* ---------- header ---------- */
.top{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#fff;
  border-bottom:4px solid var(--sky);z-index:30;min-height:58px}
.home{display:flex;align-items:center;gap:6px;text-decoration:none;color:var(--blue);font-weight:800;font-size:15px}
.home img{height:42px;display:block}
.home .back{font-size:22px;line-height:1}
.ep-title{flex:1;text-align:center;font-weight:800;color:var(--navy);font-size:clamp(14px,2.6vw,20px);line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ep-title small{display:block;color:var(--sky);font-size:.72em;letter-spacing:.06em;text-transform:uppercase}
.ctrls{display:flex;gap:8px;align-items:center}
.lang{display:flex;background:#EAF4FF;border-radius:999px;padding:3px}
.lang button{min-width:48px;height:40px;border-radius:999px;font-weight:800;font-size:16px;color:var(--blue)}
.lang button[aria-pressed="true"]{background:var(--blue);color:#fff;box-shadow:0 3px 0 var(--navy)}
#sound{width:46px;height:46px;border-radius:50%;background:#FFF1B8;font-size:22px;box-shadow:0 3px 0 #E8C200}

/* ---------- stage (top half) ---------- */
#stage{position:relative;overflow:hidden;
  background:
   radial-gradient(ellipse at 50% 120%,rgba(255,216,77,.35),transparent 60%),
   repeating-conic-gradient(#FFF8EC 0 25%,#FDEFD9 0 50%) 0 0/48px 48px;}
.garland{position:absolute;left:0;right:0;top:0;height:34px;display:flex;justify-content:space-around;z-index:1;pointer-events:none}
.garland::before{content:"";position:absolute;left:-2%;right:-2%;top:2px;height:14px;border-bottom:3px solid rgba(0,48,104,.25);border-radius:0 0 50% 50%}
.garland i{width:26px;height:30px;clip-path:polygon(0 0,100% 0,50% 100%);margin-top:8px;opacity:.85}
.garland i:nth-child(5n+1){background:var(--red)} .garland i:nth-child(5n+2){background:var(--sun)}
.garland i:nth-child(5n+3){background:var(--sky)} .garland i:nth-child(5n+4){background:var(--lav)}
.garland i:nth-child(5n+5){background:var(--mint)}

#banner{position:absolute;left:50%;top:22px;transform:translateX(-50%);z-index:12;
  display:flex;align-items:center;gap:10px;width:max-content;max-width:min(94%,760px);
  background:#fff;border:4px solid var(--blue);border-radius:26px;padding:6px 8px 6px 20px;
  box-shadow:0 6px 0 var(--navy);font-weight:800;color:var(--navy);
  font-size:clamp(19px,3.6vw,34px);line-height:1.1;text-align:center}
#banner.pop{animation:bannerPop .55s cubic-bezier(.3,1.6,.5,1)}
@keyframes bannerPop{0%{transform:translateX(-50%) scale(.6)}100%{transform:translateX(-50%) scale(1)}}
#say{flex:none;width:52px;height:52px;border-radius:50%;background:var(--sky);color:#fff;font-size:24px;box-shadow:0 4px 0 var(--blue)}
#say:active{transform:translateY(3px);box-shadow:0 1px 0 var(--blue)}

#meter{position:absolute;right:12px;z-index:11;display:none;align-items:center;gap:6px;
  background:#fff;border-radius:999px;padding:6px 14px;font-weight:800;font-size:clamp(20px,3.4vw,30px);
  color:var(--blue);box-shadow:0 4px 0 rgba(0,48,104,.25)}
#meter .slot{width:26px;height:32px;border-radius:50% 50% 46% 46%/60% 60% 40% 40%;border:3px dashed #C9B48A;background:transparent;transition:.25s}
#meter .slot.on{border:3px solid #E9D6B0;background:radial-gradient(circle at 35% 30%,#fff,#F6E7CB);transform:scale(1.15)}
#meter .dot{width:22px;height:22px;border-radius:50%;border:3px solid var(--sun);transition:.25s}
#meter .dot.on{background:var(--sun);transform:scale(1.2)}
body[data-step="eggs"] #meter,body[data-step="stir"] #meter{display:flex}
body[data-step="stir"] #meter{right:auto;left:50%;transform:translateX(-50%);gap:clamp(6px,1.4vw,12px);padding:8px 14px}
#meter .dot.n{width:clamp(38px,6vw,56px);height:clamp(38px,6vw,56px);border:4px solid var(--sun);background:#fff;display:flex;align-items:center;justify-content:center;
  font-style:normal;font-size:clamp(20px,3.4vw,30px);color:#D9A800;line-height:1}
#meter .dot.n.on{background:var(--sun);color:var(--navy);transform:scale(1.08)}
#meter .dot.n.now{animation:numBump .5s cubic-bezier(.3,1.7,.5,1)}
@keyframes numBump{0%{transform:scale(.6)}60%{transform:scale(1.35)}100%{transform:scale(1.08)}}

#work{position:absolute;width:340px;height:250px;left:calc(50% + var(--wx,0px));bottom:4%;
  transform:translateX(-50%) scale(var(--s));transform-origin:50% 100%;z-index:5;transition:left .6s}
body[data-step="win"] #work{left:50%}

/* bowl */
#bowl{position:absolute;left:30px;bottom:0;width:280px;height:178px;transition:transform .7s cubic-bezier(.4,1.4,.5,1),opacity .4s}
#bowl .body{position:absolute;left:0;top:30px;width:280px;height:148px;
  border-radius:0 0 140px 140px/0 0 130px 130px;
  background:linear-gradient(100deg,#9ED6FF 0%,#5BB3FF 45%,#3D96F0 100%);box-shadow:inset -14px -10px 0 rgba(0,48,104,.12)}
#bowl .body::after{content:"";position:absolute;left:36px;top:46px;width:34px;height:60px;border-radius:50%;background:rgba(255,255,255,.55);transform:rotate(18deg)}
#bowl .body::before{content:"";position:absolute;left:96px;bottom:-12px;width:88px;height:20px;border-radius:0 0 18px 18px;background:#2F84DD}
#bowl .mouth{position:absolute;left:0;top:0;width:280px;height:62px;border-radius:50%;overflow:hidden;background:#CBE8FF;
  box-shadow:inset 0 10px 0 rgba(0,48,104,.12)}
#bowl .lip{position:absolute;left:-4px;top:-4px;width:288px;height:70px;border-radius:50%;border:8px solid #BFE4FF;pointer-events:none}
.mouth > *{position:absolute;opacity:0;transition:opacity .4s}
.flour{left:54px;top:10px;width:150px;height:46px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#fff 0 40%,#F2ECE0 70%)}
.butter{left:150px;top:6px;width:64px;height:38px;border-radius:10px;background:linear-gradient(#FFF3A6,#FFD84D);border:3px solid #F2C230;transform:rotate(-8deg)}
.yolk{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#FFC93C 0 45%,#fff 50%);}
.y1{left:48px;top:20px}.y2{left:92px;top:8px}.y3{left:200px;top:22px}.y4{left:118px;top:28px}
.batter{inset:0;border-radius:50%;background:radial-gradient(ellipse at 45% 40%,#FFF0B8,var(--batter) 60%,#F8CF5F)}
.swirl{inset:-20px;border-radius:50%;background:repeating-conic-gradient(rgba(255,255,255,.55) 0 12deg,transparent 12deg 40deg)}
body.has-flour .flour,body.has-butter .butter{opacity:calc(1 - var(--mix,0))}
.yolk.on{opacity:calc(1 - var(--mix,0))}
body.mixing .batter{opacity:var(--mix,0)}
body.mixing .swirl{opacity:calc(var(--mix,0) * .8);animation:spin 3s linear infinite}
body.mixed .batter{opacity:1} body.mixed .swirl{opacity:0}
.spoon span{display:inline-block;transform:scaleY(-1)}
.spoon{position:absolute;left:150px;top:-58px;font-size:84px;opacity:0;transform-origin:50% 90%;transition:opacity .3s;pointer-events:none}
body[data-step="stir"] .spoon{opacity:1}
.spoon.stir{animation:stir .55s ease-in-out}
@keyframes stir{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(-80px,14px) rotate(-25deg)}50%{transform:translate(-120px,4px) rotate(-10deg)}75%{transform:translate(-40px,-6px) rotate(15deg)}100%{transform:translate(0,0) rotate(0)}}
body[data-step="stir"] #bowl{cursor:grab}

#bowl.dance{animation:dance .7s cubic-bezier(.3,1.5,.5,1)}
@keyframes dance{0%{transform:scale(1,1)}20%{transform:scale(1.12,.86) translateY(8px)}45%{transform:scale(.92,1.1) translateY(-16px) rotate(-5deg)}65%{transform:scale(1.04,.96) rotate(4deg)}85%{transform:rotate(-2deg)}100%{transform:none}}
#bowl.wobble{animation:wobble .55s ease}
@keyframes wobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}

/* heart helpers (clip-path set in JS) */
.heart{position:absolute}
/* mould */
#mould{position:absolute;left:70px;top:44px;width:200px;height:180px;opacity:0;transform:scale(.3);transition:opacity .35s,transform .6s cubic-bezier(.3,1.5,.5,1)}
#mould .metal{inset:0;width:200px;height:180px;background:linear-gradient(135deg,#EEF1F5,#A9B2BF 60%,#8B95A3)}
#mould .inner{left:16px;top:14px;width:168px;height:151px;background:linear-gradient(135deg,#8E98A6,#C8CFD8)}
#mould .level{position:absolute;left:0;right:0;bottom:0;height:0;background:radial-gradient(ellipse at 45% 30%,#FFF0B8,var(--batter) 60%,#F2C04E);transition:height 1.8s ease-out}
body.poured #mould .level{height:100%}
body.show-mould #mould{opacity:1;transform:scale(1)}
#stream{position:absolute;left:166px;top:-6px;width:16px;height:150px;border-radius:8px;background:linear-gradient(#FFE9A0,var(--batter));transform-origin:50% 0;transform:scaleY(0);z-index:6}
body.pouring #stream{animation:stream 2.2s ease-in-out forwards}
@keyframes stream{0%{transform:scaleY(0)}20%{transform:scaleY(1)}80%{transform:scaleY(1)}100%{transform:scaleY(0) translateY(150px)}}
#bowl.tilt{transform:translate(70px,-150px) rotate(-55deg) scale(.6)}
#bowl.gone{opacity:0;transform:translate(260px,-150px) rotate(-30deg) scale(.4);pointer-events:none}

/* oven */
#oven{position:absolute;left:35px;top:2px;width:270px;height:244px;opacity:0;transform:translateX(420px);transition:transform .7s cubic-bezier(.3,1.3,.5,1),opacity .3s;pointer-events:none}
#oven .ob{position:absolute;inset:0;border-radius:30px;background:linear-gradient(#FF8A80,var(--coral));box-shadow:inset 0 -10px 0 rgba(0,0,0,.08),0 8px 0 #C94A4A}
#oven .panel{position:absolute;left:0;right:0;top:0;height:48px;border-radius:30px 30px 0 0;background:#fff;z-index:3;display:flex;align-items:center;justify-content:space-around;padding:0 28px}
#oven .panel i{width:24px;height:24px;border-radius:50%;background:var(--sky);box-shadow:inset 0 -4px 0 var(--blue)}
#oven .panel b{font-size:22px;color:var(--red)}
#oven .glass{position:absolute;left:44px;top:72px;width:182px;height:132px;border-radius:22px;border:12px solid #fff;background:rgba(255,170,60,.22);z-index:3}
#oven .feet{position:absolute;left:24px;right:24px;bottom:-14px;height:16px;display:flex;justify-content:space-between;z-index:0}
#oven .feet i{width:30px;height:16px;border-radius:0 0 10px 10px;background:var(--navy)}
body.show-oven #oven{opacity:1;transform:none}
body.baking #oven{animation:ovenBounce .6s ease-in-out 4}
body.baking #oven .glass{animation:glow .6s ease-in-out 4}
@keyframes ovenBounce{0%,100%{transform:scale(1)}40%{transform:scale(1.06,.94) translateY(6px)}70%{transform:scale(.96,1.05) translateY(-8px)}}
@keyframes glow{50%{background:rgba(255,120,30,.6);box-shadow:0 0 40px 10px rgba(255,150,40,.7)}}
body.into-oven #mould{transform:translateY(-6px) scale(.5);opacity:0}
#oven .mini{left:34px;top:13px;width:90px;height:81px;background:var(--batter);opacity:0;transform:scale(.6);transition:opacity .4s .3s,transform .4s .3s,background 2.4s}
body.into-oven #oven .mini{opacity:1;transform:none}
body.baking #oven .mini{background:#F2A65A}

/* cake */
#cake{position:absolute;left:50px;top:10px;width:240px;height:236px;opacity:0;transform:scale(.2) translateY(120px);transition:transform .7s cubic-bezier(.3,1.6,.5,1),opacity .3s;pointer-events:none}
body.show-cake #cake{opacity:1;transform:none}
#cake .plate{position:absolute;left:-10px;bottom:0;width:260px;height:44px;border-radius:50%;background:#fff;box-shadow:0 6px 0 #E3D7C1}
#cake .side{left:20px;top:58px;width:200px;height:170px;background:linear-gradient(90deg,#F27BA7,#FF9CC2 40%,#E9659A)}
#cake .top{z-index:1;left:20px;top:34px;width:200px;height:170px;background:radial-gradient(ellipse at 40% 35%,#FFE3EF,#FFB8D5 70%)}
#cake .sprinkles{position:absolute;z-index:2;left:20px;top:34px;width:200px;height:170px}
#cake .sprinkles i{position:absolute;width:8px;height:16px;border-radius:4px}
#cake .pearls{position:absolute;left:20px;top:34px;width:200px;height:170px}
.candle{position:relative;width:24px;height:96px;border-radius:7px;margin:0 auto;
  background:repeating-linear-gradient(-35deg,var(--c) 0 12px,rgba(255,255,255,.7) 12px 18px);box-shadow:inset -4px 0 0 rgba(0,0,0,.12)}
.candle::before{content:"";position:absolute;left:10px;top:-12px;width:4px;height:13px;background:#5B5342;border-radius:2px}
.candle.red{--c:#FF4D4D}.candle.blue{--c:#3D8BFF}.candle.purple{--c:#9B5CFF}
.flame{position:absolute;left:50%;top:-50px;width:26px;height:40px;margin-left:-13px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  background:radial-gradient(ellipse at 50% 70%,#fff 0 18%,#FFE066 35%,#FF9A1F 75%);opacity:0;transform-origin:50% 100%;
  box-shadow:0 0 26px 10px rgba(255,190,60,.55)}
#cakeCandle{position:absolute;left:108px;top:30px;z-index:4;opacity:0;transform:translateY(-60px)}
#cakeCandle::after{content:"";position:absolute;left:-8px;bottom:-6px;width:40px;height:12px;border-radius:50%;background:rgba(160,40,90,.28);z-index:-1}
body.has-candle #cakeCandle{opacity:1;transform:none;transition:transform .45s cubic-bezier(.3,1.7,.5,1),opacity .2s}
body.lit .flame{opacity:1;animation:flicker .18s ease-in-out infinite alternate}
@keyframes flicker{from{transform:scale(1,1) rotate(-3deg)}to{transform:scale(.92,1.08) rotate(3deg)}}

/* characters */
#kago{position:absolute;left:1%;bottom:2%;width:var(--kw);z-index:9;pointer-events:none}
#kago img{width:100%;display:block;filter:drop-shadow(0 8px 6px rgba(0,0,0,.15));animation:bob 2.4s ease-in-out infinite}
#kago.cheer img{animation:hop .6s ease-out 2}
@keyframes bob{50%{transform:translateY(-6px)}}
@keyframes hop{30%{transform:translateY(-34px) rotate(-6deg)}60%{transform:translateY(0) scale(1.06,.94)}}
.bubble{position:absolute;z-index:2;left:62%;bottom:88%;white-space:nowrap;background:#fff;border:3px solid var(--sky);border-radius:20px;padding:4px 14px;
  font-weight:800;color:var(--blue);font-size:clamp(16px,2.6vw,24px);opacity:0;transform:scale(.4);transform-origin:0 100%;transition:.3s cubic-bezier(.3,1.6,.5,1)}
.bubble::after{content:"";position:absolute;left:12px;bottom:-12px;border:8px solid transparent;border-top-color:var(--sky)}
.bubble.on{opacity:1;transform:scale(1)}
#danny{position:absolute;right:2%;bottom:0;width:calc(var(--kw) * .95);z-index:8;transform:translateX(160%);transition:transform .8s cubic-bezier(.3,1.4,.5,1);pointer-events:none}
#danny img{width:100%;display:block;filter:drop-shadow(0 8px 6px rgba(0,0,0,.15))}
body[data-step="win"] #danny{transform:none}
body[data-step="win"] #danny img{animation:hop .7s ease-out 3 .6s}
#danny .bubble{left:auto;right:55%;transform-origin:100% 100%}
#danny .bubble::after{left:auto;right:12px}

/* visibility per step */
body:not(.show-bowl) #bowl{opacity:0;pointer-events:none}

/* fx */
#fx{position:fixed;inset:0;pointer-events:none;z-index:40;overflow:hidden}
.flyer{position:fixed;z-index:41;display:flex;align-items:center;justify-content:center;animation:fly .75s cubic-bezier(.45,.05,.55,1) forwards}
@keyframes fly{0%{transform:translate(0,0) scale(1) rotate(0)}
  50%{transform:translate(calc(var(--dx)*.5),calc(var(--dy)*.5 - 140px)) scale(1.2) rotate(-14deg)}
  100%{transform:translate(var(--dx),var(--dy)) scale(var(--end,.55)) rotate(10deg)}}
.puff{position:fixed;width:60px;height:60px;margin:-30px;border-radius:50%;background:#fff;opacity:.95;animation:puff .8s ease-out forwards}
@keyframes puff{to{transform:translate(var(--px),var(--py)) scale(2.2);opacity:0}}
.num{position:fixed;margin:-60px 0 0 -60px;width:120px;height:120px;display:flex;align-items:center;justify-content:center;
  font-size:110px;font-weight:800;color:var(--c);-webkit-text-stroke:5px #fff;paint-order:stroke fill;text-shadow:0 6px 0 rgba(0,48,104,.35);animation:num 1s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes num{0%{transform:scale(0) rotate(-20deg)}35%{transform:scale(1.25) rotate(4deg)}70%{transform:scale(1) translateY(-10px);opacity:1}100%{transform:scale(1) translateY(-70px);opacity:0}}
.confetti{position:fixed;top:-60px;font-size:var(--sz);animation:fall var(--t) linear var(--d) forwards}
@keyframes fall{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(var(--sw),25vh) rotate(90deg)}50%{transform:translate(calc(var(--sw)*-1),50vh) rotate(180deg)}100%{transform:translate(var(--sw),115vh) rotate(360deg)}}
.rise{position:fixed;font-size:var(--sz);animation:rise var(--t) ease-out var(--d) forwards;opacity:0}
@keyframes rise{0%{opacity:0;transform:translate(0,0) scale(.4)}15%{opacity:1}100%{opacity:0;transform:translate(var(--sw),-60vh) scale(1.2)}}
.countnum{font-size:90px}

/* ---------- counter (bottom half) ---------- */
#counter{position:relative;z-index:20;padding:22px 12px 6px;
  background:linear-gradient(#FFE781,var(--sun) 30%,#F7C83A);
  border-top:10px solid #FFF3B0;box-shadow:inset 0 -18px 0 var(--cyan)}
#counter::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px;background:linear-gradient(#FFFBE0,#FFF3B0)}
#choices{display:flex;justify-content:center;align-items:flex-end;gap:clamp(10px,3vw,28px);min-height:var(--card);flex-wrap:nowrap}
.card{--card-c:#fff;position:relative;width:var(--card);height:var(--card);border-radius:28px;background:var(--card-c);
  box-shadow:0 8px 0 rgba(150,110,0,.45),0 12px 20px rgba(0,0,0,.08);display:flex;align-items:center;justify-content:center;
  transition:transform .15s;touch-action:none}
.card:active{transform:translateY(5px);box-shadow:0 3px 0 rgba(150,110,0,.45)}
.card .vis{display:flex;align-items:center;justify-content:center;font-size:calc(var(--card) * .56);line-height:1;pointer-events:none}
.card.enter{animation:enter .5s cubic-bezier(.3,1.6,.5,1) backwards;animation-delay:var(--delay,0s)}
@keyframes enter{from{transform:translateY(120%) scale(.6)}}
.card.wiggle{animation:wiggle .5s ease}
@keyframes wiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-12deg)}40%{transform:rotate(10deg)}60%{transform:rotate(-7deg)}80%{transform:rotate(4deg)}}
.card.ok{animation:ok .45s cubic-bezier(.3,1.8,.5,1)}
@keyframes ok{40%{transform:scale(1.25)}100%{transform:scale(1)}}
.card.hint{animation:hint 1.1s ease-in-out infinite}
@keyframes hint{0%,100%{box-shadow:0 8px 0 rgba(150,110,0,.45),0 0 0 0 rgba(77,168,255,.0)}50%{transform:scale(1.07);box-shadow:0 8px 0 rgba(150,110,0,.45),0 0 0 12px rgba(77,168,255,.55)}}
.card.used{opacity:.35;pointer-events:none}
.card.cold{--card-c:linear-gradient(160deg,#E9F6FF,#C8E8FF)}
.card.cold::after{content:"❄️";position:absolute;right:8px;top:6px;font-size:calc(var(--card)*.2)}
.card.cold .vis{filter:drop-shadow(0 0 6px #fff)}
#choices.leave .card{animation:leave .35s ease-in forwards}
@keyframes leave{to{transform:translateY(130%) scale(.6);opacity:0}}
.tap-hint{position:absolute;right:-6px;bottom:-14px;font-size:calc(var(--card)*.3);animation:tapHint 1.2s ease-in-out infinite;pointer-events:none}
@keyframes tapHint{0%,100%{transform:translate(0,0)}50%{transform:translate(-10px,-12px) scale(.9)}}

/* flour sack */
.sack{position:relative;width:calc(var(--card)*.62);height:calc(var(--card)*.74);border-radius:22% 22% 30% 30%/18% 18% 26% 26%;
  background:linear-gradient(160deg,#FFFDF6,#F3E6CC);border:3px solid #DCC7A0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.sack::before{content:"";position:absolute;top:-9%;left:24%;right:24%;height:16%;background:#E9D6B0;border-radius:6px 6px 2px 2px}
.sack b{font-size:calc(var(--card)*.3)}
.sack small{font-family:"Quicksand",sans-serif;font-weight:700;font-size:max(9px,calc(var(--card)*.085));color:var(--blue);line-height:1;text-align:center}
/* egg carton */
.carton{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:8px;background:linear-gradient(#E8DCC4,#D4C29E);border-radius:16px;
  width:calc(var(--card)*.8);height:calc(var(--card)*.8);box-shadow:inset 0 -5px 0 rgba(0,0,0,.08)}
.carton span{display:flex;align-items:center;justify-content:center;font-size:calc(var(--card)*.27);background:#C8B48C;border-radius:50%;box-shadow:inset 0 4px 6px rgba(0,0,0,.18)}
.carton span.gone{font-size:0}
/* moulds */
.shape{position:relative;width:calc(var(--card)*.7);height:calc(var(--card)*.7);background:linear-gradient(135deg,#F3F5F8,#A9B2BF 60%,#8B95A3)}
.shape::after{content:"";position:absolute;inset:13%;background:linear-gradient(135deg,#8E98A6,#C8CFD8);clip-path:inherit;border-radius:inherit}
.shape.star{clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.shape.circle{border-radius:50%}
.shape.square{border-radius:14%}
.shape.heartc{height:calc(var(--card)*.63)}
.shape.heartc::after{inset:0;transform:scale(.76)}
/* candles on counter */
.card .candle{height:calc(var(--card)*.7);width:calc(var(--card)*.2)}
.card .candle::before{left:calc(50% - 2px)}

/* win area */
#winBar{display:none;align-items:center;justify-content:center;gap:clamp(10px,3vw,26px);min-height:var(--card);flex-wrap:wrap}
body[data-step="win"] #choices{display:none}
body[data-step="win"] #winBar{display:flex}
.sticker{width:calc(var(--card)*1.05);height:calc(var(--card)*1.05);border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFF6C4,var(--sun) 60%,#F2B800);
  border:6px dashed #fff;box-shadow:0 0 0 6px var(--sun),0 10px 0 rgba(150,110,0,.4);display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:var(--navy);font-weight:800;line-height:1;font-size:calc(var(--card)*.15);animation:sticker .8s cubic-bezier(.3,1.6,.5,1) .5s backwards}
.sticker b{font-size:calc(var(--card)*.42)}
@keyframes sticker{from{transform:scale(0) rotate(-200deg)}}
.badge{--b:calc(var(--card)*1.02);position:relative;flex:none;width:calc(var(--b)*1.25);height:calc(var(--b)*1.32);animation:badgeIn .9s cubic-bezier(.3,1.6,.5,1) .5s backwards;filter:drop-shadow(0 8px 0 rgba(120,80,0,.28))}
@keyframes badgeIn{0%{transform:scale(0) rotate(-30deg)}100%{transform:none}}
.badge .medal{position:absolute;left:50%;top:0;width:var(--b);height:var(--b);margin-left:calc(var(--b)*-.5);border-radius:50%;z-index:2;
  background:repeating-conic-gradient(from 0deg,#FFCE3D 0 9deg,#F0A800 9deg 18deg)}
.badge .disc{position:absolute;inset:11%;border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:radial-gradient(circle at 35% 28%,#FFF8D6,#FFD84D 55%,#E8A600);border:calc(var(--b)*.035) solid #fff;
  box-shadow:0 0 0 calc(var(--b)*.025) #D99400,inset 0 0 0 calc(var(--b)*.03) rgba(217,148,0,.55)}
.badge .disc b{font-size:calc(var(--b)*.36);margin-top:-14%;filter:drop-shadow(0 3px 0 rgba(0,0,0,.15))}
.badge .disc::before{content:"★ ★ ★";position:absolute;top:9%;left:0;right:0;text-align:center;color:#fff;font-size:calc(var(--b)*.085);letter-spacing:.08em;text-shadow:0 1px 0 rgba(180,110,0,.6)}
.badge .disc::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.75) 50%,transparent 62%);background-size:260% 100%;animation:shine 2.8s ease-in-out 1.5s infinite}
@keyframes shine{0%{background-position:160% 0}60%,100%{background-position:-60% 0}}
.badge .tails i{position:absolute;top:calc(var(--b)*.62);width:calc(var(--b)*.26);height:calc(var(--b)*.66);z-index:1;clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%)}
.badge .tails i:first-child{left:calc(50% - var(--b)*.3);background:linear-gradient(90deg,#1E4FA0,var(--blue));transform:rotate(16deg)}
.badge .tails i:last-child{left:calc(50% + var(--b)*.04);background:linear-gradient(90deg,var(--red),#A8261A);transform:rotate(-16deg)}
.badge .ribbon{position:absolute;left:50%;top:calc(var(--b)*.64);transform:translateX(-50%);z-index:3;white-space:nowrap;
  background:linear-gradient(#E8473A,var(--red));color:#fff;font-weight:800;font-size:calc(var(--b)*.13);line-height:1;padding:.42em 1.15em .38em;
  clip-path:polygon(0 0,100% 0,93% 50%,100% 100%,0 100%,7% 50%);text-shadow:0 2px 0 rgba(0,0,0,.22)}
html[lang="ms"] .badge .ribbon{font-size:calc(var(--b)*.1)}
.big-btn{min-height:96px;min-width:150px;padding:10px 26px;border-radius:30px;font-weight:800;font-size:clamp(20px,3vw,28px);color:#fff;background:var(--red);
  box-shadow:0 8px 0 #9E1F14;display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;line-height:1.05}
.big-btn.blue{background:var(--blue);box-shadow:0 8px 0 var(--navy)}
.big-btn:active{transform:translateY(6px);box-shadow:0 2px 0 #9E1F14}
.big-btn.blue:active{box-shadow:0 2px 0 var(--navy)}

#winTitle{position:absolute;left:50%;top:70px;width:94%;text-align:center;line-height:1.05;transform:translateX(-50%) scale(0);z-index:13;
  font-weight:800;font-size:clamp(28px,6.4vw,64px);color:var(--red);-webkit-text-stroke:6px #fff;paint-order:stroke fill;text-shadow:0 6px 0 var(--navy)}
body[data-step="win"] #winTitle{animation:winPop .8s cubic-bezier(.3,1.6,.5,1) .3s forwards}
body[data-step="win"] #banner{opacity:0}
body[data-step="win"] #winTitle{top:10px}
@keyframes winPop{to{transform:translateX(-50%) scale(1)}}

.credit{margin:10px 0 0;text-align:center;font-family:"Quicksand",sans-serif;font-weight:700;font-size:11px;letter-spacing:.04em;color:rgba(0,48,104,.8)}
#choices.grid2{display:grid;grid-template-columns:repeat(2,var(--card));justify-content:center;gap:14px 20px}

/* start screen */
#start{grid-row:2/4;grid-column:1;position:relative;z-index:25;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:16px;
  background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.35),transparent 55%),linear-gradient(#1A96FF,#1FEBFF)}
#start .row{display:flex;align-items:center;justify-content:center;gap:clamp(8px,3vw,40px)}
#start .logo{width:min(56vw,400px);filter:drop-shadow(0 8px 0 rgba(0,48,104,.25))}
#start .pair{height:min(34vh,300px);animation:bob 2.4s ease-in-out infinite}
#start h1{margin:0;color:#fff;font-size:clamp(26px,5vw,48px);line-height:1;text-shadow:0 4px 0 var(--navy)}
#start h1 small{display:block;font-size:.5em;letter-spacing:.12em;text-transform:uppercase;color:#FFF3B0;margin-bottom:4px}
#playBtn{margin-top:8px;min-width:220px;min-height:100px;font-size:clamp(30px,5vw,46px);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.07)}}
body:not([data-step="start"]) #start{display:none}

@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01s!important;animation-iteration-count:1!important}}
@media (max-aspect-ratio:1/1){#start .row{flex-direction:column;gap:4px}#start .logo{width:min(78vw,420px)}#start .pair{height:min(26vh,260px)}}
@media (max-height:520px){#start{gap:2px;padding:6px}#start .logo{width:min(34vw,300px)}#start .pair{height:min(40vh,200px)}#start h1{font-size:24px}#playBtn{min-height:70px;margin-top:2px}.top{min-height:48px;padding:4px 10px}.home img{height:34px}#banner{top:10px;border-width:3px}#winTitle{top:46px}#counter{padding-top:14px}}
@media (max-width:560px){.home .lbl{display:none}.ep-title small{display:none}}