/* Study Games — projector styles for every minigame (shared by the board and the standalone games). */
/* minigame stage */
.stage{flex:1;min-height:0;position:relative;display:flex;flex-direction:column;gap:.6rem}
.mtitle{display:flex;align-items:center;gap:.6rem}
.mtitle .ic{font-size:2rem}
.q{font-family:'Syne',sans-serif;font-weight:700;font-size:clamp(1.2rem,2.2vw,1.9rem);line-height:1.25}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.opt{border-radius:14px;padding:.7rem .9rem;font-weight:700;font-size:1.1rem;color:#fff;display:flex;gap:.6rem;align-items:center}
.opt b{font-family:'Syne',sans-serif;font-size:1.5rem}
.opt.dim{opacity:.35} .opt.win{outline:4px solid #fff}
.c0{background:#dc2626}.c1{background:#2563eb}.c2{background:#ca8a04}.c3{background:#16a34a}
.fill{flex:1;min-height:0;position:relative;border:1px solid var(--border);border-radius:18px;overflow:hidden;background:#0f131b}
.intro{margin:auto;text-align:center;display:flex;flex-direction:column;gap:.8rem;align-items:center;max-width:760px}
.intro .ic{font-size:6rem;line-height:1}
.winners{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.wchip{background:rgba(74,222,128,.12);border:1px solid rgba(74,222,128,.5);border-radius:999px;padding:.3rem .8rem;font-weight:700}
.bugcards{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;flex:1;min-height:0}
.bugcard{background:var(--surface);border:2px solid var(--border);border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;padding:1rem;text-align:center;font-weight:700;font-size:1.15rem}
.bugcard .emo{display:block;line-height:1}
.bugcard.right{border-color:var(--good);background:rgba(74,222,128,.08)} .bugcard.wrong{opacity:.4}
.felt{flex:1;min-height:0;position:relative;border-radius:22px;overflow:hidden;background:radial-gradient(ellipse at 50% 35%,#15803d,#065f46 70%,#064e3b);border:10px solid #7c2d12;box-shadow:inset 0 0 0 3px #a16207,inset 0 0 60px rgba(0,0,0,.45)}
.dealer{position:absolute;left:3%;top:4%;display:flex;align-items:flex-start;gap:.6rem;max-width:70%;z-index:3}
.bubble{background:#fff;color:#111827;border-radius:18px;padding:.7rem 1rem;font:700 clamp(1rem,1.9vw,1.5rem) 'Syne',sans-serif;line-height:1.25;position:relative;margin-top:.6rem;box-shadow:0 6px 16px rgba(0,0,0,.35)}
.bubble::before{content:'';position:absolute;left:-12px;top:22px;border:8px solid transparent;border-right-color:#fff;border-left:0}
.faces{position:absolute;left:3%;right:3%;bottom:4%;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;z-index:2}
.face{border-radius:14px;padding:.6rem .7rem;color:#fff;font-weight:700;display:flex;flex-direction:column;gap:.2rem;border:3px solid rgba(255,255,255,.5);box-shadow:0 8px 18px rgba(0,0,0,.35);transition:opacity .4s}
.face b{font:800 1.8rem 'Syne',sans-serif}
.face.dim{opacity:.45} .face.win{outline:5px solid #fde047;outline-offset:3px}
.face .pct{font:800 1.4rem 'Syne',sans-serif;margin-top:.2rem}
.chips i{position:absolute;width:44px;height:44px;border-radius:50%;border:6px dashed rgba(255,255,255,.75);box-shadow:0 4px 0 rgba(0,0,0,.35)}
.flycard{position:absolute;width:56px;height:80px;z-index:4;transform-style:preserve-3d;pointer-events:none}
.flycard .back,.flycard .front{position:absolute;inset:0;border-radius:8px;border:3px solid #fff;box-shadow:0 6px 14px rgba(0,0,0,.4);backface-visibility:hidden;transition:transform .5s}
.flycard .back{background:repeating-linear-gradient(45deg,#7f1d1d 0 6px,#991b1b 6px 12px)}
.flycard .front{transform:rotateY(180deg)}
.flycard.flip .back{transform:rotateY(180deg)} .flycard.flip .front{transform:rotateY(0)}
.cardback{position:absolute;width:56px;height:80px;border-radius:9px;background:repeating-linear-gradient(45deg,#7c3aed 0 6px,#5b21b6 6px 12px);border:3px solid #fff;box-shadow:0 6px 14px rgba(0,0,0,.4);animation:drift 6s ease-in-out infinite alternate}
@keyframes drift{0%{transform:translate(0,0) rotate(-12deg)}50%{transform:translate(40px,-18px) rotate(10deg)}100%{transform:translate(-30px,12px) rotate(-6deg)}}
.cbars{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;align-items:end;height:100%;padding:1rem}
.cbar{display:flex;flex-direction:column;align-items:center;gap:.4rem;height:100%;justify-content:flex-end}
.cbar i{display:block;width:70%;border-radius:10px 10px 0 0;transition:height 1s}
.cbar b{font-family:'Syne',sans-serif;font-size:1.5rem}
.burst{position:absolute;width:70px;height:70px;margin:-35px 0 0 -35px;border-radius:50%;pointer-events:none;animation:burst .5s ease-out forwards}
@keyframes burst{from{transform:scale(.2);opacity:1}to{transform:scale(1.8);opacity:0}}
.meter{height:14px;border-radius:99px;background:var(--border);overflow:hidden}
.meter i{display:block;height:100%;background:linear-gradient(90deg,#f6a62b,#f87171);transition:width .3s}
.wp{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:.3rem;max-width:30%}
.wp .dot{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font:800 1.6rem 'Syne',sans-serif;color:#fff;border:4px solid #fff;animation:pulse 1.2s ease-in-out infinite;box-shadow:0 0 22px currentColor}
.wp .lbl2{background:rgba(13,15,20,.82);border-radius:10px;padding:.25rem .55rem;font-weight:700;text-align:center;font-size:1rem}
.wp.dead .dot{animation:none;opacity:.25}.wp.boom .dot{animation:boom .8s ease-out forwards}
@keyframes pulse{50%{transform:scale(1.12)}} @keyframes boom{to{transform:scale(2.6);opacity:0}}
.fx{position:absolute;inset:0;pointer-events:none}
.splashq{position:absolute;left:0;right:0;top:0;padding:.6rem .9rem;background:linear-gradient(180deg,rgba(13,15,20,.92),rgba(13,15,20,0));z-index:2}
.splashq .opts{grid-template-columns:repeat(4,1fr)} .splashq .opt{font-size:.95rem;padding:.4rem .6rem}
.typetog{display:grid;grid-template-columns:1fr 1fr;gap:.35rem}
.typetog label{display:flex;align-items:center;gap:.45rem;background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:.35rem .55rem;font-size:.9rem}
.typetog label.na{opacity:.4}
.typetog input{width:auto}
@media (prefers-reduced-motion:reduce){.cardback,.wp .dot,.burst{animation:none}}

/* Weak Point: boss health */
.hpbar{display:flex;align-items:center;gap:.6rem;font-weight:700}
.hpbar .meter{flex:1;height:16px}
.hpbar b{font-family:'DM Mono',monospace;color:var(--muted);font-weight:500;min-width:7em;text-align:right}
/* Answer Shortly: high noon */
.noon{flex:1;min-height:0;position:relative;overflow:hidden;border-radius:18px;background:linear-gradient(180deg,#f59e0b 0%,#fbbf24 38%,#fde68a 60%,#d97706 61%,#b45309 100%)}
.noon .sun{position:absolute;left:46%;top:8%;width:120px;height:120px;border-radius:50%;background:#fff7d6;box-shadow:0 0 80px 30px rgba(255,247,214,.6)}
.noon .mesa{position:absolute;left:-5%;right:-5%;top:45%;height:18%;background:linear-gradient(180deg,#92400e,#78350f);clip-path:polygon(0 100%,4% 30%,18% 30%,22% 70%,40% 70%,46% 10%,62% 10%,66% 60%,84% 60%,90% 25%,100% 25%,100% 100%)}
.noon .cactus{position:absolute;bottom:14%;width:22px;height:120px;border-radius:12px;background:#15803d}
.noon .cactus::before,.noon .cactus::after{content:'';position:absolute;width:14px;height:50px;border-radius:9px;background:#15803d}
.noon .cactus::before{left:-18px;top:28px}.noon .cactus::after{right:-18px;top:12px}
.noon .c1{left:8%}.noon .c2{left:88%;height:90px}
.poster{position:absolute;left:6%;top:12%;width:min(46%,560px);background:#f5e6c8;color:#3b2412;border:6px solid #8b5a2b;border-radius:6px;padding:1rem 1.2rem;box-shadow:0 12px 26px rgba(0,0,0,.35);font-family:Georgia,'Times New Roman',serif;transform:rotate(-2deg)}
.poster .wanted{font:900 2.4rem/1 Georgia,serif;letter-spacing:.12em;text-align:center;border-bottom:3px double #8b5a2b;padding-bottom:.3rem;margin-bottom:.6rem}
.poster .pq{font-size:clamp(1.1rem,2vw,1.6rem);font-weight:700;line-height:1.3}
.poster .pa{margin-top:.6rem;font:900 clamp(1.4rem,2.6vw,2.2rem) Georgia,serif;color:#7f1d1d}
.poster .pr{margin-top:.5rem;font-style:italic;color:#6b4423}
.cowboy{position:absolute;right:12%;bottom:6%;height:62%;overflow:visible}
.cowboy .arm{transform-origin:108px 98px;transition:transform .12s ease-out}
.noon.drawn .cowboy .arm{transform:rotate(-78deg)}
.noon .flash{position:absolute;right:4%;bottom:42%;font:900 3.2rem 'Syne',sans-serif;color:#fff;text-shadow:0 0 18px #f97316,0 0 4px #000;opacity:0;transform:scale(.4);pointer-events:none}
.noon.fire .flash{animation:bang .45s ease-out}
@keyframes bang{0%{opacity:1;transform:scale(.5)}60%{opacity:1;transform:scale(1.25)}100%{opacity:0;transform:scale(1.4)}}
.bullet{position:absolute;left:-12%;font:italic 700 1rem 'DM Mono',monospace;color:#3b2412;white-space:nowrap;animation:whizz .6s linear forwards;pointer-events:none}
.bullet::before{content:'';display:inline-block;width:70px;height:4px;margin-right:.4rem;vertical-align:middle;background:linear-gradient(90deg,transparent,#3b2412)}
@keyframes whizz{from{transform:translateX(0)}to{transform:translateX(125vw)}}
.noon .misses{position:absolute;left:6%;bottom:5%;font:700 1rem 'DM Mono',monospace;color:#fff7d6;text-shadow:0 1px 3px #000}
/* Control Flow */
.flowfill{background:radial-gradient(ellipse at 50% 30%,#1e293b,#0b0e14)}
.flowfill .btext{color:#fff;font:700 18px 'DM Sans',sans-serif;text-align:center;line-height:1.15}
.flowfill .btext b{font-family:'Syne',sans-serif}
.flowfill .basin.dim{opacity:.35}.flowfill .basin.win path{stroke:#fde047;stroke-width:7}
.flowfill .water{stroke-dasharray:2400;stroke-dashoffset:2400;animation:pourdown 2.2s ease-in forwards}
.flowfill .pour{stroke-dasharray:90;stroke-dashoffset:90;animation:pourdown .4s linear forwards}
@keyframes pourdown{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.bullet,.noon .flash,.flowfill .water{animation-duration:.01s}}
/* Knowhow Knockout */
.ring{flex:1;min-height:0;position:relative;border-radius:18px;padding:1rem;overflow:auto;background:radial-gradient(ellipse at 50% 40%,#3b0f0f,#14070a);border:8px solid #b91c1c;box-shadow:inset 0 0 0 4px #fca5a5}
.ring.shake{animation:ringshake .35s}
/* Knockout's tournament tree: first round along the bottom, the champion's seat on top */
#ring:has(#koTree){display:flex;flex-direction:column;gap:.6rem}
.kotree{position:relative;flex:0 0 52%;min-height:220px;border-bottom:2px solid rgba(252,165,165,.25)}
.kolines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.kolines path{fill:none;stroke:rgba(255,255,255,.22);stroke-width:2;vector-effect:non-scaling-stroke}
.kolines path.lit{stroke-width:4}
.seat{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:.3rem;max-width:150px;min-width:46px;min-height:28px;padding:.2rem .5rem;border-radius:999px;background:#1c0a0d;border:2px solid rgba(255,255,255,.25);color:#fff;font-size:.85rem;font-weight:700;white-space:nowrap;z-index:1}
.seat span{overflow:hidden;text-overflow:ellipsis}
.seat i{flex:0 0 auto;width:.7rem;height:.7rem;border-radius:50%}
.seat.small{max-width:90px;font-size:.7rem;padding:.15rem .35rem}
.seat.empty{border-style:dashed;background:#16080a}
.seat.fight{border-color:#fde047;box-shadow:0 0 12px rgba(253,224,71,.5)}
.seat.won{opacity:.55}
.seat.lost{opacity:.35;filter:grayscale(1);text-decoration:line-through;animation:kofall .6s ease-out}
.seat .kox{position:absolute;top:-1.1rem;left:50%;transform:translateX(-50%) rotate(-8deg);font:800 .75rem 'Syne',sans-serif;color:#f87171;text-decoration:none}
.seat.top{min-width:120px;min-height:38px;font-size:1.05rem;border-color:#fde047;background:linear-gradient(90deg,rgba(202,138,4,.5),rgba(253,224,71,.35))}
.crown{position:absolute;left:50%;transform:translateX(-50%);font-size:1.6rem;pointer-events:none}
@keyframes kofall{0%{transform:translate(-50%,-50%) rotate(0)}40%{transform:translate(-50%,-50%) rotate(-14deg)}100%{transform:translate(-50%,-50%) rotate(0)}}
@keyframes ringshake{25%{transform:translate(-4px,2px)}50%{transform:translate(4px,-2px)}75%{transform:translate(-2px,1px)}}
.ring .rtitle{font:800 1.6rem 'Syne',sans-serif;text-align:center;color:#fde047;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.6rem}
.bouts{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:.7rem}
.bout{background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:.5rem .7rem;display:grid;grid-template-columns:1fr auto 1fr;gap:.4rem;align-items:center}
.bout .boxer{display:flex;align-items:center;gap:.4rem;font-size:1rem;color:#fff;transition:opacity .3s}
.bout .boxer.r{justify-content:flex-end}
.bout .glove{font-size:1.6rem}.bout .glove.flip{display:inline-block;transform:scaleX(-1)}
.bout .boxer.win{color:#fde047}.bout .boxer.win .glove{animation:punch .5s}
.bout .boxer.lose{opacity:.35;text-decoration:line-through}
.bout .vs{font:800 1rem 'Syne',sans-serif;color:#fca5a5}
.bout.over .vs{color:#fde047}
.bout .stmt{grid-column:1/-1;font-size:.85rem;color:#fecaca;text-align:center}
@keyframes punch{50%{transform:translateX(18px) scale(1.3)}}
.ring .ladder{margin-top:.8rem;text-align:center;color:#fca5a5;font-family:'DM Mono',monospace;font-size:.85rem}
.champ{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding-top:1rem}
.champ .belt{font:800 2rem 'Syne',sans-serif;color:#1c1917;background:linear-gradient(90deg,#ca8a04,#fde047,#ca8a04);border-radius:999px;padding:.3rem 1.6rem}
.champ .fist{font-size:7rem;animation:raise 1.2s ease-out infinite alternate;transform-origin:bottom}
@keyframes raise{from{transform:translateY(10px) rotate(-8deg)}to{transform:translateY(-12px) rotate(8deg)}}
.champ .cname{font:800 2.6rem 'Syne',sans-serif;color:#fff}
/* Smartillery + Tower Defense maps */
.mapfill canvas{position:absolute;inset:0;width:100%;height:100%}
.sarge{position:absolute;left:12px;bottom:12px;display:flex;align-items:flex-end;gap:.5rem;max-width:60%}
.sbubble{background:#fef3c7;color:#3f3f1f;border:3px solid #556b2f;border-radius:14px;padding:.5rem .8rem;font:700 1rem 'DM Sans',sans-serif;margin-bottom:3.4rem}
.tdres{position:absolute;left:50%;top:12px;transform:translateX(-50%);border-radius:12px;padding:.5rem 1rem;font:800 1.2rem 'Syne',sans-serif;color:#fff}
.tdres.ok{background:rgba(22,163,74,.9)}.tdres.no{background:rgba(185,28,28,.9)}
/* Pot Luck */
.kitchen{background:linear-gradient(180deg,#78350f 0 58%,#451a03 58%);display:flex;align-items:flex-end;justify-content:center}
.chef{position:absolute;left:14px;top:12px;display:flex;align-items:flex-start;gap:.4rem;max-width:46%}
.cbubble{background:#fff;color:#1c1917;border-radius:14px;padding:.5rem .8rem;font:italic 700 1rem Georgia,serif;margin-top:.6rem}
.pot{position:absolute;left:50%;top:22%;transform:translateX(-50%);width:min(34%,380px);aspect-ratio:1.5;border-radius:0 0 46% 46%;background:#334155;border:8px solid #1e293b;overflow:hidden}
.pot .soup{position:absolute;left:0;right:0;top:10%;bottom:0;background:#ca8a04;animation:bubble 1.6s ease-in-out infinite alternate}
.pot.good .soup{background:#16a34a}.pot.bad .soup{background:#57534e}
@keyframes bubble{to{transform:translateY(-6px)}}
.pot .steam{position:absolute;left:20%;right:20%;top:-30%;height:40%;background:radial-gradient(ellipse,rgba(255,255,255,.45),transparent 70%);animation:bubble 2s ease-in-out infinite alternate}
.stations{position:absolute;left:3%;right:3%;bottom:4%;display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem}
.station{background:#fef3c7;color:#3f2a14;border:4px solid #92400e;border-radius:14px;padding:.4rem .5rem;display:flex;flex-direction:column;align-items:center;gap:.2rem;font-weight:700;text-align:center}
.station .food{font-size:2.6rem;line-height:1}
.station.right{border-color:#16a34a;box-shadow:0 0 0 4px rgba(22,163,74,.4)}.station.wrong{opacity:.4}
.toss{position:absolute;bottom:4%;font-size:3rem;animation:toss 1s ease-in forwards;pointer-events:none}
@keyframes toss{0%{transform:translate(0,0) rotate(0)}55%{transform:translate(calc(var(--dx) * .6),-46vh) rotate(260deg)}100%{transform:translate(var(--dx),-34vh) rotate(420deg) scale(.4);opacity:0}}
/* Raft Rush */
.raftq{position:absolute;left:0;right:0;top:0;padding:.6rem .9rem;background:linear-gradient(180deg,rgba(13,15,20,.9),rgba(13,15,20,0));z-index:2}
.raftq .rq{color:#cbd5e1;font-size:.9rem}
.raftq .sides{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:.3rem}
.raftq .side{background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.3);border-radius:10px;padding:.35rem .6rem;font-weight:700;color:#fff;text-align:center}
.raftq .side.safe{border-color:#4ade80;background:rgba(22,163,74,.4)}.raftq .side.danger{border-color:#ef4444;background:rgba(185,28,28,.45)}
/* Smartillery: falling shells, explosions, scorch marks */
.stage.shake{animation:ringshake .35s}
.fxlayer{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.fxlayer .shell{position:absolute;margin:-40px 0 0 -9px;opacity:0;animation:shellfall .75s cubic-bezier(.55,0,1,.6) forwards;filter:drop-shadow(0 6px 4px rgba(0,0,0,.4))}
@keyframes shellfall{0%{opacity:1;transform:translateY(-110vh) scale(1.6)}100%{opacity:1;transform:translateY(0) scale(1)}}
.fxlayer .shadow{position:absolute;width:30px;height:10px;margin:-5px 0 0 -15px;border-radius:50%;background:rgba(0,0,0,.45);opacity:0;transform:scale(.2);animation:shadowgrow .75s ease-in forwards}
@keyframes shadowgrow{0%{opacity:0;transform:scale(.2)}100%{opacity:1;transform:scale(1)}}
.boomfx,.dirtfx{position:absolute;width:0;height:0}
.boomfx .core{position:absolute;left:-46px;top:-46px;width:92px;height:92px;border-radius:50%;background:radial-gradient(circle,#fff7cc 0%,#fde047 25%,#f97316 55%,rgba(127,29,29,.7) 75%,transparent 80%);animation:boomcore .7s ease-out forwards}
.boomfx .ring{position:absolute;left:-30px;top:-30px;width:60px;height:60px;border-radius:50%;border:5px solid rgba(255,237,213,.9);animation:boomring .7s ease-out forwards}
.boomfx b{position:absolute;left:-60px;top:-62px;width:120px;text-align:center;font:800 14px 'Syne',sans-serif;color:#fff;text-shadow:0 1px 3px #000;animation:boomname 1.6s ease-out forwards}
@keyframes boomcore{0%{transform:scale(.2)}40%{transform:scale(1.2)}100%{transform:scale(1.4);opacity:0}}
@keyframes boomring{0%{transform:scale(.3);opacity:1}100%{transform:scale(3);opacity:0}}
@keyframes boomname{0%{opacity:0;transform:translateY(8px)}20%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translateY(-14px)}}
.dirtfx .core{position:absolute;left:-22px;top:-22px;width:44px;height:44px;border-radius:50%;background:radial-gradient(circle,rgba(120,83,50,.9),rgba(120,83,50,0) 70%);animation:boomcore .6s ease-out forwards}
.fxlayer .scorch{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;border:2px solid #0d0f14;box-shadow:0 0 0 5px rgba(0,0,0,.25)}

/* Pot Luck — the kitchen */
.kitchen2{position:relative;overflow:hidden;border-radius:18px;background:#f5efe6}
.kitchen2 .tiles{position:absolute;left:0;right:0;top:0;height:62%;background-color:#eef2f7;background-image:linear-gradient(#cfd8e3 2px,transparent 2px),linear-gradient(90deg,#cfd8e3 2px,transparent 2px);background-size:56px 28px;background-position:0 0,28px 0}
.kitchen2 .tiles::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.35),transparent 60%)}
.kitchen2 .rack{position:absolute;left:30%;right:30%;top:3%;height:8px;border-radius:4px;background:#475569;box-shadow:0 2px 4px rgba(0,0,0,.3)}
.kitchen2 .rack .pan{position:absolute;top:10px;width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#94a3b8,#334155);border:3px solid #1e293b}
.kitchen2 .rack .pan::before{content:'';position:absolute;left:50%;top:-14px;width:5px;height:16px;margin-left:-2.5px;background:#1e293b}
.kitchen2 .rack .p1{left:12%}.kitchen2 .rack .p2{left:62%;width:36px;height:36px}
.kitchen2 .rack .ladle{position:absolute;left:40%;top:8px;width:6px;height:46px;background:#64748b;border-radius:3px}
.kitchen2 .rack .ladle::after{content:'';position:absolute;left:-9px;bottom:-12px;width:24px;height:16px;border-radius:0 0 12px 12px;background:#64748b}
.kitchen2 .shelf{position:absolute;right:3%;top:16%;width:20%;height:46px;border-bottom:8px solid #92400e;display:flex;justify-content:space-around;align-items:flex-end;font-size:1.8rem}
.chef2{position:absolute;left:2%;bottom:20%;width:min(22%,230px);z-index:3}
.chef2 .chefsvg{width:100%;display:block;filter:drop-shadow(0 8px 10px rgba(0,0,0,.25))}
.chef2 .cb2{position:absolute;left:78%;top:2%;width:min(30vw,300px);background:#fff;color:#1c1917;border:3px solid #1c1917;border-radius:16px;padding:.45rem .7rem;font:italic 700 clamp(.9rem,1.4vw,1.15rem)/1.25 Georgia,serif;box-shadow:4px 4px 0 #1c1917}
.chef2 .cb2 b{display:block;font:800 .7rem 'Syne',sans-serif;letter-spacing:.12em;color:#dc2626;font-style:normal}
.kitchen2.bad .chef2{animation:chefrage .25s infinite alternate}
@keyframes chefrage{from{transform:translateX(-2px)}to{transform:translateX(2px)}}
.chef2 .earsteam{animation:earsteam 1s ease-out infinite}
@keyframes earsteam{0%{opacity:0;transform:translateY(6px)}50%{opacity:1}100%{opacity:0;transform:translateY(-10px)}}
.kitchen2 .stove{position:absolute;left:28%;right:28%;bottom:18%;height:16%;background:linear-gradient(180deg,#334155,#0f172a);border-radius:10px 10px 0 0;border:4px solid #0f172a}
.kitchen2 .flames{position:absolute;left:18%;right:18%;top:-14px;height:26px;display:flex;justify-content:space-around}
.kitchen2 .flames i{width:18px;height:26px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:radial-gradient(circle at 50% 70%,#fde047,#f97316 55%,#dc2626);animation:flick .35s ease-in-out infinite alternate;transform-origin:bottom}
.kitchen2 .flames i:nth-child(2n){animation-duration:.27s}.kitchen2 .flames i:nth-child(3n){animation-duration:.41s}
@keyframes flick{from{transform:scaleY(.8) scaleX(1)}to{transform:scaleY(1.15) scaleX(.9)}}
.potwrap{position:absolute;left:50%;bottom:30%;width:min(30%,330px);transform:translateX(-50%);z-index:2}
.potwrap .potsvg{width:100%;display:block;filter:drop-shadow(0 10px 8px rgba(0,0,0,.35))}
.potwrap .soupfill{fill:#d97706;transition:fill .6s}
.kitchen2.good .soupfill{fill:#dc2626}.kitchen2.bad .soupfill{fill:#65733a}
.potwrap .bubbles{position:absolute;left:18%;right:18%;top:8%;height:12%}
.potwrap .bubbles i{position:absolute;bottom:0;width:12px;height:12px;border-radius:50%;background:rgba(255,237,213,.85);animation:bub 1.6s ease-in infinite}
.potwrap .bubbles i:nth-child(1){left:8%}.potwrap .bubbles i:nth-child(2){left:28%;animation-delay:.4s}.potwrap .bubbles i:nth-child(3){left:48%;animation-delay:.9s}
.potwrap .bubbles i:nth-child(4){left:66%;animation-delay:.2s}.potwrap .bubbles i:nth-child(5){left:82%;animation-delay:1.2s}.potwrap .bubbles i:nth-child(6){left:38%;animation-delay:.7s}
@keyframes bub{0%{transform:scale(.3);opacity:0}30%{opacity:1}100%{transform:translateY(-14px) scale(1.2);opacity:0}}
.potwrap .steam2{position:absolute;left:20%;right:20%;bottom:88%;height:120px}
.potwrap .steam2 i{position:absolute;bottom:0;width:40px;height:60px;border-radius:50%;background:radial-gradient(ellipse,rgba(255,255,255,.75),transparent 70%);animation:steamup 2.4s ease-out infinite}
.potwrap .steam2 i:nth-child(1){left:10%}.potwrap .steam2 i:nth-child(2){left:42%;animation-delay:.8s}.potwrap .steam2 i:nth-child(3){left:72%;animation-delay:1.6s}
@keyframes steamup{0%{transform:translateY(0) scale(.6);opacity:0}30%{opacity:1}100%{transform:translateY(-80px) scale(1.4);opacity:0}}
.potwrap .stink{position:absolute;left:10%;right:10%;bottom:95%;display:flex;justify-content:space-around;font-size:2rem;color:#4d7c0f}
.potwrap .stink i{animation:steamup 1.8s ease-out infinite;font-style:normal}.potwrap .stink i:nth-child(2){animation-delay:.6s}.potwrap .stink i:nth-child(3){animation-delay:1.2s}
.potwrap .sparkle{position:absolute;inset:-10% 0 auto 0;height:60%}
.potwrap .sparkle i{position:absolute;font-style:normal;color:#fde047;font-size:1.6rem;animation:twinkle 1.2s ease-in-out infinite}
.potwrap .sparkle i:nth-child(1){left:10%;top:20%}.potwrap .sparkle i:nth-child(2){left:80%;top:10%;animation-delay:.3s}.potwrap .sparkle i:nth-child(3){left:45%;top:-10%;animation-delay:.6s}.potwrap .sparkle i:nth-child(4){left:65%;top:40%;animation-delay:.9s}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1.2)}}
.kitchen2 .stamp{position:absolute;right:4%;top:30%;z-index:4;padding:.4rem 1rem;border:6px solid;border-radius:10px;font:900 clamp(1.6rem,3vw,2.6rem) 'Syne',sans-serif;transform:rotate(-8deg);text-align:center;background:rgba(255,255,255,.85);animation:stampin .45s cubic-bezier(.2,1.6,.4,1)}
.kitchen2 .stamp small{display:block;font:700 .9rem 'DM Sans',sans-serif}
.kitchen2 .stamp.good{color:#15803d;border-color:#15803d}.kitchen2 .stamp.bad{color:#b91c1c;border-color:#b91c1c}
@keyframes stampin{from{transform:rotate(-8deg) scale(2.4);opacity:0}to{transform:rotate(-8deg) scale(1);opacity:1}}
.kitchen2 .tosscount{position:absolute;right:4%;top:30%;background:#1c1917;color:#fde047;border-radius:999px;padding:.3rem .9rem;font:700 1rem 'DM Mono',monospace}
.kitchen2 .boards{position:absolute;left:0;right:0;bottom:0;height:20%;background:linear-gradient(180deg,#a8a29e,#78716c);border-top:6px solid #57534e;display:grid;grid-template-columns:repeat(4,1fr);gap:1.2%;padding:.5% 2%}
.board2{position:relative;align-self:center;background:linear-gradient(180deg,#d4a373,#b07a46);border:4px solid #7c4a1e;border-radius:12px;padding:.25rem .4rem;display:flex;align-items:center;gap:.5rem;color:#2b1608;font-weight:800;font-size:clamp(.8rem,1.3vw,1.05rem);box-shadow:0 4px 0 #5b3412}
.board2 .lbl{color:#1c0f05;font-weight:800;text-shadow:0 1px 0 rgba(255,255,255,.35);line-height:1.15}
.board2 .food2{font-size:clamp(1.8rem,3vw,2.8rem);filter:drop-shadow(0 3px 2px rgba(0,0,0,.3))}
.board2 em{position:absolute;right:-8px;top:-12px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-style:normal;color:#fff;font-weight:900}
.board2.right{border-color:#15803d;box-shadow:0 0 0 4px rgba(22,163,74,.5),0 4px 0 #5b3412}.board2.right em{background:#16a34a}
.board2.wrong{opacity:.55}.board2.wrong em{background:#b91c1c}
.toss2{position:absolute;font-size:2.8rem;pointer-events:none;z-index:5;filter:drop-shadow(0 4px 3px rgba(0,0,0,.35))}
.splash2{position:absolute;width:60px;height:20px;margin:-10px 0 0 -30px;border-radius:50%;border:4px solid rgba(253,186,116,.9);z-index:5;animation:boomring .6s ease-out forwards}
.mapfill{min-height:56vh}

/* Fire Fighter & Grocery Run */
.fill.motion{position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 30%,#1f2937,#0b0f17);border-radius:16px;overflow:hidden}
.fill.motion svg{width:100%;height:100%;display:block}
.fill.motion .zl{font:800 30px Syne,sans-serif;fill:#fff;text-anchor:middle;paint-order:stroke;stroke:#0d0f14;stroke-width:5px}
.fill.motion .lt{font:700 19px 'DM Sans',sans-serif;fill:#fff;text-anchor:middle}
.flames .flame{transform-box:fill-box;transform-origin:50% 100%;animation:flick .5s ease-in-out infinite alternate}
.flames .f1{animation-delay:-.2s}.flames .f2{animation-delay:-.35s}.flames .f3{animation-delay:-.1s}.flames .f4{animation-delay:-.4s}
@keyframes flick{to{transform:scaleY(1.18) skewX(4deg)}}
.flames.out .flame{animation:none;transform:scaleY(0);transition:transform 1.2s}
.flames.big .flame{transform:scale(1.7);transition:transform 1s}
.mobanner{position:absolute;left:50%;bottom:4%;transform:translateX(-50%);font:800 1.9rem 'Syne',sans-serif;padding:.5rem 1.4rem;border-radius:14px;background:rgba(13,15,20,.9);border:3px solid;white-space:nowrap;animation:pop .5s .7s both}
.mobanner.ok{border-color:#4ade80;color:#bbf7d0}.mobanner.no{border-color:#f87171;color:#fecaca}
@keyframes pop{from{transform:translateX(-50%) scale(.5);opacity:0}}
.fill.motion.grocery svg{width:70%}
.fill.motion .legend{width:30%;display:flex;flex-direction:column;gap:.6rem;padding-right:1rem}
.legend .lg{display:flex;align-items:center;gap:.6rem;background:rgba(13,15,20,.8);border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:.5rem .7rem;font-size:1.2rem;font-weight:700;color:#fff}
.legend .lg b{flex:0 0 auto;width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;color:#fff;font-family:Syne,sans-serif}
.legend .lg.dim{opacity:.35}
.maxtag{font:800 34px Syne,sans-serif;fill:#dc2626;text-anchor:middle}
#gtree{transform-box:fill-box;transform-origin:50% 100%}#gtree.shake{animation:gshake .35s}
@keyframes gshake{30%{transform:rotate(-3deg)}65%{transform:rotate(2deg)}}
.fallfruit{animation:fruitfall .9s ease-in both;offset-rotate:0deg}
@keyframes fruitfall{from{transform:translate(var(--sx),230px)}to{transform:translate(var(--ex),var(--ey))}}
