/* ═══════════════════════════════════════════════════════
   🪑 MUSICAL CHAIRS — PHONICS EDITION v3.1
   ALL animations: scramble, sit, collide, spotlight, ambiance
   ★ v3.1 FIX: Broken comment at old line 523 was hiding ALL
     back-side flashcard CSS. Fixed + added mobile amber theme.
   ═══════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&family=Bubblegum+Sans&display=swap');
:root{--floor:#D7CCC8;--wall:#FFF9C4;--chair-w:clamp(48px,11vw,72px);--chair-h:clamp(62px,14vw,90px);--kid-w:clamp(34px,7.5vw,50px);}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{width:100%;height:100%;overflow:hidden;touch-action:manipulation;-webkit-user-select:none;user-select:none;font-family:'Fredoka',sans-serif;}

/* ═══ PARTY ROOM ═══ */
#game-stage{position:fixed;inset:0;overflow:hidden;background:linear-gradient(180deg,var(--wall) 0%,#FFF3E0 35%,var(--floor) 35.5%,#BCAAA4 100%);transition:background .5s;}
#floor-tex{position:absolute;bottom:0;left:0;right:0;height:65%;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0px,transparent 78px,rgba(0,0,0,.04) 78px,rgba(0,0,0,.04) 80px),repeating-linear-gradient(0deg,transparent 0px,transparent 38px,rgba(0,0,0,.03) 38px,rgba(0,0,0,.03) 40px);border-top:4px solid #8D6E63;z-index:1;}
#spotlight{position:absolute;top:30%;left:50%;transform:translate(-50%,-20%);width:80vw;height:60vh;border-radius:50%;background:radial-gradient(ellipse,rgba(255,255,200,.15) 0%,transparent 70%);pointer-events:none;z-index:2;transition:all .5s;}

/* ═══════════════════════════════════════════════════════
   ★ ROUND AMBIANCE LEVELS ★
   ═══════════════════════════════════════════════════════ */
/* Round 1-5: Simple warm (default) */
.amb-1 #spotlight{background:radial-gradient(ellipse,rgba(255,255,200,.12) 0%,transparent 70%);}

/* Round 6-10: Disco colored */
.amb-2 #spotlight{background:radial-gradient(ellipse,rgba(255,200,100,.2) 0%,transparent 60%);}
.amb-2 .dray{height:100px!important;}
.amb-2{background:linear-gradient(180deg,#FFF3E0 0%,#FFE0B2 35%,var(--floor) 35.5%,#A1887F 100%)!important;}

/* Round 11-15: FULL PARTY! */
.amb-3{background:linear-gradient(180deg,#FCE4EC 0%,#F8BBD0 30%,#FFE0B2 35%,var(--floor) 35.5%,#A1887F 100%)!important;}
.amb-3 #spotlight{background:radial-gradient(ellipse,rgba(255,180,255,.2) 0%,rgba(255,255,100,.1) 40%,transparent 70%);animation:spotColor 2s ease-in-out infinite alternate;}
@keyframes spotColor{0%{background:radial-gradient(ellipse,rgba(255,180,255,.2) 0%,transparent 70%);}100%{background:radial-gradient(ellipse,rgba(100,255,180,.2) 0%,transparent 70%);}}
.amb-3 .bflag{animation-duration:1.5s!important;}
.amb-3 .disco-sphere{animation-duration:2s!important;box-shadow:0 0 20px rgba(255,255,255,.6),0 0 40px rgba(255,235,59,.3)!important;}

/* Floating balloons (Round 11+) */
.balloon{position:absolute;bottom:-30px;z-index:4;pointer-events:none;animation:balloonUp 4s ease-out forwards;font-size:1.2rem;}
@keyframes balloonUp{0%{opacity:0;transform:translateY(0);}10%{opacity:.8;}100%{opacity:0;transform:translateY(-110vh) translateX(20px);}}

/* ═══ SPOTLIGHT MODE (correct answer) ═══ */
.spotlight-mode::after{content:'';position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9;pointer-events:none;animation:dimIn .4s ease forwards;}
@keyframes dimIn{0%{opacity:0;}100%{opacity:1;}}
.spotlight-on{z-index:12!important;position:relative;}
.spotlight-on::after{content:'';position:absolute;top:-30px;left:50%;transform:translateX(-50%);width:120%;height:calc(100% + 60px);background:radial-gradient(ellipse at center top,rgba(255,255,200,.4) 0%,rgba(255,255,200,.1) 50%,transparent 70%);border-radius:50%;pointer-events:none;animation:spotGlow .8s ease-in-out infinite alternate;z-index:13;}
@keyframes spotGlow{0%{opacity:.6;}100%{opacity:1;}}

/* Disco strobe */
.disco-strobe .dray{opacity:.5!important;animation:drayS .2s ease-in-out infinite!important;}
@keyframes drayS{0%,100%{height:100px;opacity:.4;}50%{height:140px;opacity:.6;}}

/* ═══ BUNTING ═══ */
#bunting{position:absolute;top:0;left:0;right:0;height:55px;z-index:5;overflow:hidden;}
.bunting-string{position:absolute;top:16px;left:3%;right:3%;height:0;border-bottom:2px dashed rgba(121,85,72,.4);}
.bflag{position:absolute;top:14px;width:22px;height:30px;clip-path:polygon(0 0,100% 0,50% 100%);animation:bfS 2.5s ease-in-out infinite;transform-origin:top center;}
.bflag:nth-child(even){animation-delay:-1.2s;}
@keyframes bfS{0%,100%{transform:rotate(-4deg);}50%{transform:rotate(4deg);}}

/* ═══ DISCO BALL ═══ */
#disco-ball{position:absolute;top:2px;left:50%;transform:translateX(-50%);z-index:6;}
.disco-stem{width:2px;height:14px;background:#9E9E9E;margin:0 auto;}
.disco-sphere{width:32px;height:32px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#E0E0E0 30%,#BDBDBD 60%,#9E9E9E);box-shadow:0 0 12px rgba(255,255,255,.4),0 0 30px rgba(255,235,59,.15);animation:dR 5s linear infinite;position:relative;}
.disco-sphere::before{content:'';position:absolute;inset:4px;border-radius:50%;background:repeating-conic-gradient(rgba(255,255,255,.3) 0deg,transparent 15deg,rgba(255,255,255,.1) 30deg);}
@keyframes dR{0%{transform:rotateY(0);}100%{transform:rotateY(360deg);}}
.dray{position:absolute;top:44px;left:50%;width:2px;background:linear-gradient(180deg,rgba(255,235,59,.25),transparent);transform-origin:top center;pointer-events:none;z-index:3;opacity:0;}
.music-on .dray{animation:dP 1.8s ease-in-out infinite;}
@keyframes dP{0%,100%{opacity:.15;height:80px;}50%{opacity:.35;height:120px;}}

/* ═══ SPEAKERS ═══ */
.speaker{position:absolute;bottom:54%;z-index:8;width:clamp(28px,5.5vw,44px);height:clamp(36px,7vw,56px);background:linear-gradient(180deg,#424242,#1a1a1a);border-radius:5px;box-shadow:2px 3px 8px rgba(0,0,0,.3);}
.speaker::before{content:'';position:absolute;top:15%;left:50%;transform:translateX(-50%);width:55%;aspect-ratio:1;background:radial-gradient(circle,#616161 25%,#333 50%,#1a1a1a);border-radius:50%;}
.speaker::after{content:'';position:absolute;bottom:10%;left:50%;transform:translateX(-50%);width:28%;aspect-ratio:1;background:radial-gradient(circle,#757575 30%,#333);border-radius:50%;}
.spk-l{left:3%;}.spk-r{right:3%;}
.music-on .speaker{animation:spP .35s ease-in-out infinite alternate;}
@keyframes spP{0%{transform:scale(1);}100%{transform:scale(1.06);}}
.mnote{position:absolute;font-size:clamp(1rem,2.5vw,1.4rem);opacity:0;z-index:7;pointer-events:none;}
.mnote.fly{animation:nF 2.5s ease-out forwards;}
@keyframes nF{0%{opacity:0;transform:translateY(0) rotate(0);}15%{opacity:.7;}100%{opacity:0;transform:translateY(-90px) rotate(25deg) translateX(20px);}}

/* ═══════════════════════════════════════════════════════
   🪑 CHAIRS
   ═══════════════════════════════════════════════════════ */
#arena{position:absolute;top:52%;left:50%;transform:translate(-50%,-45%);width:clamp(260px,60vw,420px);height:clamp(200px,40vw,300px);z-index:10;overflow:visible;}
.chair-slot{position:absolute;display:flex;flex-direction:column;align-items:center;cursor:pointer;transition:transform .25s;-webkit-tap-highlight-color:transparent;}
.chair-slot:active{transform:scale(.9)!important;}
.chair-art{position:relative;width:var(--chair-w);height:var(--chair-h);transition:filter .3s,transform .3s;}
.chair-art::after{content:'';position:absolute;bottom:-5px;left:8%;width:84%;height:10px;background:radial-gradient(ellipse,rgba(0,0,0,.22) 0%,rgba(0,0,0,.05) 60%,transparent 80%);border-radius:50%;z-index:-1;}
.ch-face{position:absolute;top:16%;left:50%;transform:translateX(-50%);display:flex;gap:clamp(4px,1.2vw,8px);z-index:2;pointer-events:none;}
.ch-eye{width:clamp(5px,1.3vw,9px);height:clamp(6px,1.6vw,11px);background:#fff;border-radius:50%;position:relative;box-shadow:0 1px 2px rgba(0,0,0,.15);}
.ch-eye::after{content:'';position:absolute;bottom:1px;left:50%;transform:translateX(-50%);width:55%;height:55%;background:#333;border-radius:50%;transition:.3s;}
.ch-mouth-line{position:absolute;top:38%;left:50%;transform:translateX(-50%);width:clamp(6px,1.5vw,10px);height:2px;background:rgba(255,255,255,.45);border-radius:2px;transition:.3s;pointer-events:none;}
.chair-slot.correct .ch-mouth-line{height:clamp(4px,1vw,6px);border-radius:0 0 50% 50%;background:rgba(255,255,255,.7);}
.chair-slot.correct .ch-eye{animation:eyeHappy .4s ease;}
@keyframes eyeHappy{0%,100%{transform:scaleY(1);}50%{transform:scaleY(.4);}}
.chair-slot.wrong .ch-eye::after{transform:translateX(-50%) translateY(-2px);}
.chair-slot.wrong .ch-mouth-line{width:clamp(7px,1.8vw,11px);height:clamp(5px,1.2vw,8px);border-radius:50%;background:rgba(255,255,255,.55);}
.ch-back{position:absolute;top:0;left:12%;width:76%;height:52%;border-radius:10px 10px 3px 3px;box-shadow:inset -3px -3px 8px rgba(0,0,0,.12),inset 4px 4px 10px rgba(255,255,255,.2),2px 3px 10px rgba(0,0,0,.18);}
.ch-back::before{content:'';position:absolute;top:10%;left:14%;width:28%;height:55%;background:rgba(255,255,255,.18);border-radius:5px;transform:rotate(-3deg);}
.ch-seat{position:absolute;bottom:22%;left:4%;width:92%;height:20%;border-radius:5px;box-shadow:inset -2px -2px 5px rgba(0,0,0,.08),inset 3px 3px 8px rgba(255,255,255,.15),0 4px 8px rgba(0,0,0,.12);}
.ch-legs{position:absolute;bottom:0;left:10%;width:80%;height:24%;}
.ch-leg{position:absolute;bottom:0;width:11%;border-radius:0 0 2px 2px;box-shadow:1px 2px 3px rgba(0,0,0,.15);background:linear-gradient(180deg,#8D6E63,#4E342E);}
.ch-leg:nth-child(1){left:0;height:100%;}.ch-leg:nth-child(2){right:0;height:100%;}.ch-leg:nth-child(3){left:32%;height:75%;}.ch-leg:nth-child(4){right:32%;height:75%;}
.ch-red .ch-back{background:linear-gradient(140deg,#EF5350,#C62828);}.ch-red .ch-seat{background:linear-gradient(90deg,#E53935,#B71C1C);}
.ch-blue .ch-back{background:linear-gradient(140deg,#42A5F5,#1565C0);}.ch-blue .ch-seat{background:linear-gradient(90deg,#1E88E5,#0D47A1);}
.ch-green .ch-back{background:linear-gradient(140deg,#66BB6A,#2E7D32);}.ch-green .ch-seat{background:linear-gradient(90deg,#43A047,#1B5E20);}
.ch-orange .ch-back{background:linear-gradient(140deg,#FFA726,#E65100);}.ch-orange .ch-seat{background:linear-gradient(90deg,#FB8C00,#BF360C);}

/* Golden chair */
.chair-slot.golden .ch-back{background:linear-gradient(140deg,#FFD600,#FF8F00)!important;box-shadow:inset -3px -3px 8px rgba(0,0,0,.1),inset 4px 4px 10px rgba(255,255,255,.4),0 0 20px rgba(255,215,0,.4)!important;}
.chair-slot.golden .ch-seat{background:linear-gradient(90deg,#FFC107,#FF8F00)!important;}
.chair-slot.golden .ch-leg{background:linear-gradient(180deg,#FFB300,#E65100)!important;}
.golden-glow{animation:gP 1s ease-in-out infinite!important;filter:drop-shadow(0 0 8px rgba(255,215,0,.5))!important;}
@keyframes gP{0%,100%{filter:drop-shadow(0 0 8px rgba(255,215,0,.4));}50%{filter:drop-shadow(0 0 16px rgba(255,215,0,.7));}}
.chair-slot.golden::before{content:'✨';position:absolute;top:-8px;right:-4px;font-size:.7rem;animation:spkF 1.5s ease-in-out infinite;z-index:20;}
@keyframes spkF{0%,100%{transform:translateY(0) scale(1);opacity:.7;}50%{transform:translateY(-6px) scale(1.2);opacity:1;}}

/* Word label */
.ch-word{margin-top:3px;background:rgba(255,255,255,.92);backdrop-filter:blur(2px);border:2px solid rgba(0,0,0,.08);border-radius:10px;padding:2px 10px;font-family:'Bubblegum Sans',cursive;font-size:clamp(.82rem,2.8vw,1.25rem);font-weight:700;color:#333;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.08);min-width:48px;opacity:0;transform:scale(.7);transition:opacity .4s,transform .4s cubic-bezier(.34,1.56,.64,1),background .3s,border-color .3s;}
.ch-word.show{opacity:1;transform:scale(1);}
.ch-word.hint-pulse{animation:hP .5s ease;background:rgba(255,243,224,.95);border-color:#FFB300;}
@keyframes hP{0%{transform:scale(1);}50%{transform:scale(1.15);}100%{transform:scale(1);}}

/* Feedback */
.chair-slot.correct .chair-art{animation:cB .6s ease;}
.chair-slot.correct .ch-word{background:#C8E6C9;border-color:#43A047;color:#1B5E20;}
.chair-slot.wrong .chair-art{animation:cSh .45s ease;}
.chair-slot.wrong .ch-word{background:#FFCDD2;border-color:#E53935;color:#B71C1C;}
@keyframes cB{0%{transform:scale(1);}25%{transform:scale(1.15);}50%{transform:scale(.92);}100%{transform:scale(1);}}
@keyframes cSh{0%,100%{transform:rotate(0);}12%{transform:rotate(10deg);}25%{transform:rotate(-10deg);}37%{transform:rotate(8deg);}50%{transform:rotate(-6deg);}62%{transform:rotate(4deg);}75%{transform:rotate(-2deg);}}

/* ★ CHAIR DODGE — slides away on wrong answer! ★ */
.chair-slot.chair-dodge .chair-art{animation:chairDodge .6s ease!important;}
@keyframes chairDodge{0%{transform:translateX(0);}20%{transform:translateX(18px) rotate(5deg);}50%{transform:translateX(-14px) rotate(-3deg);}80%{transform:translateX(6px);}100%{transform:translateX(0);}}

/* Positions */
.chair-slot.pos-0{left:0%;top:42%;z-index:12;}.chair-slot.pos-1{left:22%;top:4%;z-index:10;}.chair-slot.pos-2{right:22%;top:4%;z-index:10;}.chair-slot.pos-3{right:0%;top:42%;z-index:12;}

/* ═══════════════════════════════════════════════════════
   👧👦 CHARACTERS
   ═══════════════════════════════════════════════════════ */
#kids-layer{display:none;}
.kid{position:absolute;width:var(--kid-w);pointer-events:none;
/* Default smooth slide for position changes */
transition:left .7s cubic-bezier(.25,.46,.45,.94),top .7s cubic-bezier(.25,.46,.45,.94);}
.kid-wrap{display:flex;flex-direction:column;align-items:center;position:relative;}
.kid-wrap::after{content:'';position:absolute;bottom:-4px;left:12%;width:76%;height:8px;background:radial-gradient(ellipse,rgba(0,0,0,.18) 0%,transparent 80%);border-radius:50%;z-index:-1;}

/* Head */
.k-head{width:calc(var(--kid-w)*.72);aspect-ratio:1;border-radius:50%;position:relative;box-shadow:inset -3px -3px 6px rgba(0,0,0,.08),inset 3px 3px 8px rgba(255,255,255,.25),0 3px 8px rgba(0,0,0,.12);}
.k-head::after{content:'';position:absolute;bottom:22%;left:8%;width:20%;height:14%;background:rgba(255,138,128,.35);border-radius:50%;box-shadow:calc(var(--kid-w)*.42) 0 0 0 rgba(255,138,128,.35);}
.k-head::before{content:'';position:absolute;top:10%;left:18%;width:22%;height:28%;background:rgba(255,255,255,.22);border-radius:50%;transform:rotate(-15deg);}
.k-eyes{position:absolute;top:40%;left:50%;transform:translateX(-50%);display:flex;gap:calc(var(--kid-w)*.14);}
.k-eye{width:calc(var(--kid-w)*.12);height:calc(var(--kid-w)*.15);background:#333;border-radius:50%;position:relative;transition:all .3s;}
.k-eye::before{content:'';position:absolute;top:1px;left:1px;width:2px;height:2px;background:#fff;border-radius:50%;}
.k-mouth{position:absolute;bottom:20%;left:50%;transform:translateX(-50%);width:calc(var(--kid-w)*.22);height:calc(var(--kid-w)*.1);border-radius:0 0 50% 50%;background:#E53935;transition:all .3s;}
.k-hair{position:absolute;top:-4px;left:-3px;right:-3px;height:48%;border-radius:50% 50% 20% 20%;z-index:-1;}
.k-body{width:calc(var(--kid-w)*.6);height:calc(var(--kid-w)*.45);border-radius:8px 8px 3px 3px;margin-top:-2px;position:relative;box-shadow:inset -2px -2px 4px rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.08);}
.k-arm{position:absolute;top:2px;width:calc(var(--kid-w)*.15);height:calc(var(--kid-w)*.35);border-radius:4px;transform-origin:top center;}
.k-arm-l{left:-20%;}.k-arm-r{right:-20%;}
.k-legs{display:flex;gap:2px;margin-top:-1px;}
.k-leg{width:calc(var(--kid-w)*.2);height:calc(var(--kid-w)*.28);border-radius:3px 3px 5px 5px;}
.kid-1 .k-head{background:linear-gradient(140deg,#FFCC80,#FFB74D);}.kid-1 .k-hair{background:#5D4037;}.kid-1 .k-body,.kid-1 .k-arm{background:#EF5350;}.kid-1 .k-leg{background:#1565C0;}
.kid-2 .k-head{background:linear-gradient(140deg,#FFCC80,#FFB74D);}.kid-2 .k-hair{background:#212121;height:55%;top:-6px;border-radius:50%;}.kid-2 .k-body,.kid-2 .k-arm{background:#42A5F5;}.kid-2 .k-leg{background:#424242;}
.kid-3 .k-head{background:linear-gradient(140deg,#D7CCC8,#BCAAA4);}.kid-3 .k-hair{background:#FF8F00;height:52%;top:-5px;}.kid-3 .k-body,.kid-3 .k-arm{background:#66BB6A;}.kid-3 .k-leg{background:#5D4037;}
.kid-4 .k-head{background:linear-gradient(140deg,#FFCC80,#FFB74D);}.kid-4 .k-hair{background:#333;height:46%;top:-3px;border-radius:50% 50% 30% 30%;}.kid-4 .k-body,.kid-4 .k-arm{background:#AB47BC;}.kid-4 .k-leg{background:#1565C0;}

/* ═══ UNIQUE DANCE STYLES ═══ */
.dance-hiphop .kid-wrap{animation:hB .4s ease-in-out infinite alternate!important;}
.dance-hiphop .k-arm-l{animation:hAL .4s ease-in-out infinite alternate!important;}
.dance-hiphop .k-arm-r{animation:hAR .4s ease-in-out infinite alternate .2s!important;}
.dance-hiphop .k-leg:first-child{animation:hLL .35s ease-in-out infinite alternate!important;}
.dance-hiphop .k-leg:last-child{animation:hLR .35s ease-in-out infinite alternate .17s!important;}
@keyframes hB{0%{transform:translateY(0) scaleY(1);}100%{transform:translateY(-8px) scaleY(.92);}}
@keyframes hAL{0%{transform:rotate(-50deg);}100%{transform:rotate(30deg);}}
@keyframes hAR{0%{transform:rotate(40deg);}100%{transform:rotate(-20deg);}}
@keyframes hLL{0%{transform:rotate(-12deg) translateX(-2px);}100%{transform:rotate(12deg) translateX(2px);}}
@keyframes hLR{0%{transform:rotate(12deg) translateX(2px);}100%{transform:rotate(-12deg) translateX(-2px);}}

.dance-ballet .kid-wrap{animation:bS .8s ease-in-out infinite alternate!important;}
.dance-ballet .k-arm-l{animation:bAL .8s ease-in-out infinite alternate!important;}
.dance-ballet .k-arm-r{animation:bAR .8s ease-in-out infinite alternate!important;}
.dance-ballet .k-leg:first-child{animation:bL .6s ease-in-out infinite alternate!important;}
@keyframes bS{0%{transform:translateY(0) rotate(-8deg);}100%{transform:translateY(-6px) rotate(8deg);}}
@keyframes bAL{0%{transform:rotate(-70deg);}100%{transform:rotate(-100deg);}}
@keyframes bAR{0%{transform:rotate(70deg);}100%{transform:rotate(100deg);}}
@keyframes bL{0%{transform:rotate(0);}100%{transform:rotate(20deg);}}

.dance-moonwalk .kid-wrap{animation:mS .6s ease-in-out infinite alternate!important;}
.dance-moonwalk .k-arm-l{animation:mAL .6s ease-in-out infinite alternate!important;}
.dance-moonwalk .k-arm-r{animation:mAR .6s ease-in-out infinite alternate .3s!important;}
.dance-moonwalk .k-legs{animation:mLs .3s ease-in-out infinite alternate!important;}
@keyframes mS{0%{transform:translateX(-4px) rotate(-3deg);}100%{transform:translateX(4px) rotate(3deg);}}
@keyframes mAL{0%{transform:rotate(-10deg);}100%{transform:rotate(30deg);}}
@keyframes mAR{0%{transform:rotate(10deg);}100%{transform:rotate(-30deg);}}
@keyframes mLs{0%{transform:skewX(-5deg);}100%{transform:skewX(5deg);}}

.dance-bhangra .kid-wrap{animation:bhB .35s ease-in-out infinite alternate!important;}
.dance-bhangra .k-arm-l{animation:bhA .35s ease-in-out infinite alternate!important;}
.dance-bhangra .k-arm-r{animation:bhA .35s ease-in-out infinite alternate .17s!important;}
.dance-bhangra .k-legs{animation:bhL .35s ease-in-out infinite alternate!important;}
@keyframes bhB{0%{transform:translateY(0) scaleY(1);}100%{transform:translateY(-4px) scaleY(.88);}}
@keyframes bhA{0%{transform:rotate(-60deg);}100%{transform:rotate(60deg);}}
@keyframes bhL{0%{transform:scaleX(1);}100%{transform:scaleX(1.3);}}

/* Default dance base */
.kid.dancing .kid-wrap{animation:dB .45s ease-in-out infinite alternate;}
@keyframes dB{0%{transform:translateY(0) rotate(-6deg);}100%{transform:translateY(-5px) rotate(6deg);}}
.kid.dancing .k-arm-l{animation:aL .35s ease-in-out infinite alternate;}
.kid.dancing .k-arm-r{animation:aR .35s ease-in-out infinite alternate .18s;}
@keyframes aL{0%{transform:rotate(-35deg);}100%{transform:rotate(25deg);}}
@keyframes aR{0%{transform:rotate(25deg);}100%{transform:rotate(-35deg);}}
.kid.dancing .k-leg:first-child{animation:lL .3s ease-in-out infinite alternate;}
.kid.dancing .k-leg:last-child{animation:lR .3s ease-in-out infinite alternate .15s;}
@keyframes lL{0%{transform:rotate(-10deg);}100%{transform:rotate(10deg);}}
@keyframes lR{0%{transform:rotate(10deg);}100%{transform:rotate(-10deg);}}

/* ═══ FROZEN ═══ */
.kid.frozen .kid-wrap{animation:none!important;}
.kid.frozen .k-arm,.kid.frozen .k-leg,.kid.frozen .k-legs{animation:none!important;}

/* ═══ IDLE ═══ */
.kid.idle .kid-wrap{animation:iB 1.2s ease-in-out infinite;}
@keyframes iB{0%,100%{transform:translateY(0);}50%{transform:translateY(-3px);}}

/* ═══════════════════════════════════════════════════════
   ★ SCRAMBLE: CONFUSED WOBBLE ★
   Kids look around bewildered for 0.5s
   ═══════════════════════════════════════════════════════ */
.kid.confused .kid-wrap{animation:confWob .2s ease-in-out infinite alternate!important;}
.kid.confused .k-head{animation:confLook .3s ease-in-out infinite alternate!important;}
.kid.confused .k-arm{animation:none!important;}
.kid.confused .k-leg,.kid.confused .k-legs{animation:none!important;}
@keyframes confWob{0%{transform:translateX(-3px) rotate(-5deg);}100%{transform:translateX(3px) rotate(5deg);}}
@keyframes confLook{0%{transform:rotate(-10deg);}100%{transform:rotate(10deg);}}

/* ═══ RUSHING — faster transition when sliding to chair ═══ */
.kid.rushing{transition:left .4s cubic-bezier(.22,.61,.36,1)!important,top .4s cubic-bezier(.22,.61,.36,1)!important;}
.kid.rushing .kid-wrap{animation:rushBob .2s ease-in-out infinite alternate!important;}
@keyframes rushBob{0%{transform:translateY(0) rotate(-3deg);}100%{transform:translateY(-4px) rotate(3deg);}}

/* ═══════════════════════════════════════════════════════
   ★ JUMPING — kid leaps up before sitting ★
   ═══════════════════════════════════════════════════════ */
.kid.jumping .kid-wrap{animation:jumpUp .3s ease-out forwards!important;}
.kid.jumping .k-arm-l{animation:none!important;transform:rotate(-80deg);}
.kid.jumping .k-arm-r{animation:none!important;transform:rotate(80deg);}
.kid.jumping .k-leg{animation:none!important;}
@keyframes jumpUp{0%{transform:translateY(0) scale(1);}50%{transform:translateY(-20px) scale(1.1);}100%{transform:translateY(-8px) scale(1);}}

/* ═══ REAL SITTING ═══ */
.kid.sitting .kid-wrap{animation:none!important;transform:translateY(2px);}
.kid.sitting .k-arm{animation:none!important;transform:rotate(5deg);}
.kid.sitting .k-legs{transform:rotate(75deg) translateX(4px) scaleY(.8);animation:none!important;}
.kid.sitting .k-leg{animation:none!important;}
.kid.sitting{transition:left .3s ease,top .3s ease!important;}

/* Happy mouth */
.kid.happy .k-mouth{height:calc(var(--kid-w)*.16)!important;background:#EF5350;border-radius:0 0 50% 50%;}

/* ═══ VICTORY DANCE ★ ═══ */
.kid.victory-dance .kid-wrap{animation:vD .3s ease-in-out infinite alternate!important;}
.kid.victory-dance .k-arm-l{animation:vAL .25s ease-in-out infinite alternate!important;}
.kid.victory-dance .k-arm-r{animation:vAR .25s ease-in-out infinite alternate .12s!important;}
.kid.victory-dance .k-leg:first-child{animation:vLg .2s ease-in-out infinite alternate!important;}
.kid.victory-dance .k-leg:last-child{animation:vLg .2s ease-in-out infinite alternate .1s!important;}
.kid.victory-dance .k-legs{animation:none!important;transform:none;}
@keyframes vD{0%{transform:translateY(0) rotate(-10deg) scale(1);}100%{transform:translateY(-10px) rotate(10deg) scale(1.05);}}
@keyframes vAL{0%{transform:rotate(-80deg);}100%{transform:rotate(40deg);}}
@keyframes vAR{0%{transform:rotate(80deg);}100%{transform:rotate(-40deg);}}
@keyframes vLg{0%{transform:rotate(-15deg);}100%{transform:rotate(15deg);}}

/* ═══ SAD KID ═══ */
.kid.sad-kid .kid-wrap{animation:sadS .8s ease-in-out infinite!important;}
.kid.sad-kid .k-arm{animation:none!important;transform:rotate(5deg);}
.kid.sad-kid .k-leg,.kid.sad-kid .k-legs{animation:none!important;}
.kid.sad-kid .k-mouth{width:calc(var(--kid-w)*.16)!important;height:calc(var(--kid-w)*.06)!important;border-radius:50% 50% 0 0!important;background:#999!important;bottom:18%;}
.kid.sad-kid .k-eye{height:calc(var(--kid-w)*.08)!important;}
@keyframes sadS{0%,100%{transform:translateY(0) rotate(-2deg);}50%{transform:translateY(3px) rotate(2deg);}}

/* ═══════════════════════════════════════════════════════
   ★ WRONG REACTIONS ★
   ═══════════════════════════════════════════════════════ */
/* Head shake "No no!" */
.kid.head-shake .k-head{animation:headNo .15s ease-in-out 4 alternate!important;}
.kid.head-shake .k-arm-l{animation:none!important;transform:rotate(0);}
.kid.head-shake .k-arm-r{animation:none!important;transform:rotate(0);}
@keyframes headNo{0%{transform:rotate(-15deg);}100%{transform:rotate(15deg);}}
.kid.head-shake .k-mouth{width:calc(var(--kid-w)*.26)!important;height:calc(var(--kid-w)*.12)!important;border-radius:50%!important;background:#FF8A80!important;}

/* ═══ COLLISION BUMPS ★ ═══ */
.kid.bump-left .kid-wrap{animation:bumpL .35s ease-out!important;}
.kid.bump-right .kid-wrap{animation:bumpR .35s ease-out!important;}
@keyframes bumpL{0%{transform:translateX(0);}30%{transform:translateX(-12px) rotate(-10deg);}100%{transform:translateX(0);}}
@keyframes bumpR{0%{transform:translateX(0);}30%{transform:translateX(12px) rotate(10deg);}100%{transform:translateX(0);}}

/* ═══ HUD ═══ */
#hud-bar{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:5px 10px;background:linear-gradient(180deg,rgba(0,0,0,.25),transparent);z-index:50;}
.hud-pill{background:rgba(255,255,255,.88);backdrop-filter:blur(3px);border:2px solid rgba(0,0,0,.06);border-radius:14px;padding:4px 14px;display:flex;align-items:center;gap:6px;font-weight:700;font-size:clamp(.9rem,2.8vw,1.15rem);color:#333;}
.hi{font-size:clamp(1rem,3vw,1.3rem);}
#lives-box .ht{font-size:clamp(1rem,2.8vw,1.2rem);transition:.3s;}
#lives-box .ht.lost{opacity:.15;transform:scale(.5);filter:grayscale(1);}
.ht.breaking{animation:htB .4s ease-out!important;}
@keyframes htB{0%{transform:scale(1);}40%{transform:scale(1.6);}100%{transform:scale(.5);}}
#speed-badge{position:fixed;top:clamp(30px,4.5vh,42px);left:8px;background:linear-gradient(135deg,#FF6F00,#F44336);color:#fff;font-family:'Bubblegum Sans',cursive;font-size:clamp(.65rem,2vw,.85rem);font-weight:700;padding:3px 10px;border-radius:10px;z-index:50;display:none;animation:bdP .6s ease-in-out infinite alternate;}
@keyframes bdP{0%{transform:scale(1);}100%{transform:scale(1.1);}}

/* Q box */
#q-box{position:fixed;top:clamp(36px,5.5vh,50px);left:50%;transform:translateX(-50%);background:linear-gradient(140deg,#FFF8E1,#FFF);border:3px solid #FFD600;border-radius:16px;padding:5px 16px;box-shadow:0 4px 20px rgba(0,0,0,.1);z-index:50;text-align:center;min-width:clamp(160px,40vw,220px);display:none;animation:qI .4s cubic-bezier(.34,1.56,.64,1);}
@keyframes qI{0%{transform:translateX(-50%) scale(0);}100%{transform:translateX(-50%) scale(1);}}
#q-label{font-size:clamp(.52rem,1.5vw,.68rem);color:#999;margin-bottom:1px;}
#q-word{font-family:'Bubblegum Sans',cursive;font-size:clamp(1.2rem,4vw,1.8rem);font-weight:700;color:#D32F2F;letter-spacing:1px;}
#q-sub{font-size:clamp(.48rem,1.3vw,.6rem);color:#aaa;margin-top:1px;}
#btn-hear{position:fixed;top:clamp(92px,13vh,115px);left:50%;transform:translateX(-50%);background:#FFF;border:2px solid #FFD600;border-radius:50%;width:36px;height:36px;display:none;align-items:center;justify-content:center;cursor:pointer;z-index:50;box-shadow:0 2px 10px rgba(0,0,0,.1);font-size:1rem;}
#btn-hear:active{transform:translateX(-50%) scale(.85);}

/* Rhyme viz */
#rhyme-box{position:fixed;bottom:clamp(30px,6vh,50px);left:50%;transform:translateX(-50%);background:rgba(255,255,255,.95);backdrop-filter:blur(4px);border:3px solid #66BB6A;border-radius:16px;padding:6px 18px;box-shadow:0 4px 20px rgba(0,0,0,.12);z-index:55;text-align:center;animation:rvP .4s cubic-bezier(.34,1.56,.64,1);}
#rhyme-box.hidden{display:none;}
@keyframes rvP{0%{transform:translateX(-50%) scale(0);}100%{transform:translateX(-50%) scale(1);}}
.rv-words{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:3px;}
.rv-w{font-family:'Bubblegum Sans',cursive;font-size:clamp(1.1rem,3.5vw,1.6rem);font-weight:700;color:#333;}
.rv-hl{color:#D32F2F;font-size:clamp(1.3rem,4.5vw,2rem);display:inline-block;animation:rvZ .6s ease-in-out infinite alternate;text-decoration:underline;text-underline-offset:3px;}
@keyframes rvZ{0%{transform:scale(1);}100%{transform:scale(1.15);}}
.rv-eq{font-size:clamp(.9rem,3vw,1.3rem);color:#66BB6A;font-weight:700;}
#rv-msg{font-size:clamp(.5rem,1.5vw,.68rem);color:#888;margin-top:2px;}

/* Feedback */
#feedback{position:fixed;top:45%;left:50%;transform:translate(-50%,-50%) scale(0);font-family:'Bubblegum Sans',cursive;font-size:clamp(1.4rem,5.5vw,2rem);text-shadow:2px 3px 8px rgba(0,0,0,.2);z-index:60;pointer-events:none;opacity:0;white-space:nowrap;color:#fff;}
#feedback.pop{transform:translate(-50%,-50%) scale(1);opacity:1;transition:.25s cubic-bezier(.34,1.56,.64,1);}
#feedback.out{transform:translate(-50%,-50%) scale(1.3);opacity:0;transition:.35s ease-out;}
.sfly{position:fixed;font-family:'Bubblegum Sans',cursive;font-size:1.1rem;font-weight:700;color:#FFD600;z-index:65;pointer-events:none;animation:sfU .9s ease-out forwards;text-shadow:1px 1px 2px rgba(0,0,0,.2);}
@keyframes sfU{0%{opacity:1;transform:translateY(0) scale(1);}100%{opacity:0;transform:translateY(-55px) scale(1.3);}}
.cpiece{position:fixed;z-index:55;pointer-events:none;border-radius:2px;animation:cF 1.4s ease-out forwards;}
@keyframes cF{0%{opacity:1;transform:translate(0,0) rotate(0) scale(1);}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(720deg) scale(.15);}}

/* Overlays */
.ov{position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:100;padding:10px;}
.ov.hidden{display:none;}
.scard{background:#fff;border-radius:20px;padding:clamp(12px,2.5vh,22px) clamp(14px,4vw,26px);text-align:center;box-shadow:0 12px 50px rgba(0,0,0,.18);max-width:min(96vw,520px);width:100%;animation:scI .45s cubic-bezier(.34,1.56,.64,1);}
@keyframes scI{0%{transform:scale(.3);opacity:0;}100%{transform:scale(1);opacity:1;}}
.scard .bemoji{font-size:clamp(2rem,7vw,2.8rem);margin-bottom:3px;}
.scard h1{font-family:'Bubblegum Sans',cursive;font-size:clamp(.95rem,3.2vw,1.3rem);color:#333;margin-bottom:3px;}
.scard p{font-size:clamp(.6rem,1.8vw,.78rem);color:#666;margin-bottom:6px;line-height:1.4;}
.fscore{font-family:'Bubblegum Sans',cursive;font-size:clamp(1.6rem,6.5vw,2.4rem);color:#FFD600;text-shadow:2px 2px 0 #F9A825;margin:3px 0;}
.pbtn{display:inline-flex;align-items:center;gap:5px;background:linear-gradient(135deg,#66BB6A,#388E3C);color:#fff;border:none;border-radius:13px;padding:clamp(7px,1.4vh,11px) clamp(14px,3.5vw,22px);font-family:'Bubblegum Sans',cursive;font-size:clamp(.78rem,2.2vw,.95rem);cursor:pointer;box-shadow:0 3px 12px rgba(56,142,60,.3);margin:3px;transition:.15s;}
.pbtn:active{transform:scale(.9);}
.pbtn.sec{background:linear-gradient(135deg,#42A5F5,#1565C0);box-shadow:0 3px 12px rgba(21,101,192,.3);}
#round-pill{position:fixed;top:clamp(30px,4.5vh,42px);right:6px;background:rgba(0,0,0,.35);color:#fff;font-size:clamp(.72rem,2.2vw,.9rem);font-weight:700;padding:4px 10px;border-radius:10px;z-index:50;}
#day-badge{position:fixed;top:clamp(52px,7vh,68px);right:6px;background:rgba(76,175,80,.9);color:#fff;font-size:clamp(.6rem,1.8vw,.78rem);font-weight:700;padding:3px 10px;border-radius:10px;z-index:50;}
#eq{position:fixed;bottom:6px;left:50%;transform:translateX(-50%);display:flex;align-items:flex-end;gap:2px;height:18px;z-index:50;opacity:0;transition:opacity .3s;}
#eq.on{opacity:1;}
.eqb{width:3px;background:#43A047;border-radius:1px;}
.eqb:nth-child(1){animation:eP .5s ease-in-out infinite alternate;}.eqb:nth-child(2){animation:eP .5s ease-in-out infinite alternate .1s;}.eqb:nth-child(3){animation:eP .5s ease-in-out infinite alternate .2s;}.eqb:nth-child(4){animation:eP .5s ease-in-out infinite alternate .15s;}.eqb:nth-child(5){animation:eP .5s ease-in-out infinite alternate .25s;}
@keyframes eP{0%{height:3px;}100%{height:16px;}}
#eq.off .eqb{animation:none;height:3px;}
#eq.fast .eqb{background:#FF9800;}
#eq.turbo .eqb{background:#F44336;animation-duration:.25s!important;}

/* ═══════════════════════════════════════════════════════
   ★ LEARNING PATH DASHBOARD ★
   ═══════════════════════════════════════════════════════ */
#dash-ov{z-index:200;background:linear-gradient(135deg,#0d1b4a 0%,#1a237e 30%,#283593 60%,#3949ab 100%);}
#dash-wrap{position:fixed;inset:0;display:flex;flex-direction:column;overflow:hidden;}
#dash-header{text-align:center;padding:clamp(10px,2.5vh,18px) 12px clamp(4px,1vh,8px);flex-shrink:0;z-index:5;}
#dash-emoji{font-size:clamp(2rem,6vw,3.2rem);line-height:1;margin-bottom:2px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.3));animation:dashFloat 3s ease-in-out infinite;}
@keyframes dashFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
#dash-title{font-family:'Bubblegum Sans',cursive;font-size:clamp(1.2rem,4vw,2rem);color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.3);margin-bottom:1px;}
#dash-sub{font-size:clamp(.5rem,1.4vw,.7rem);color:rgba(255,255,255,.65);letter-spacing:1px;margin-bottom:clamp(4px,1vh,8px);}
#dash-prog-wrap{max-width:280px;margin:0 auto;}
#dp-bar{height:8px;background:rgba(255,255,255,.12);border-radius:4px;overflow:hidden;margin-bottom:3px;}
#dp-fill{height:100%;background:linear-gradient(90deg,#66BB6A,#AED581,#FFD600);border-radius:4px;transition:width .8s ease;width:0;}
#dp-text{font-size:clamp(.42rem,1.2vw,.55rem);color:rgba(255,255,255,.6);font-weight:600;}

#path-scroll{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:0 4px;}
#path-scroll::-webkit-scrollbar{width:4px;}
#path-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:2px;}
#path-container{position:relative;width:100%;max-width:340px;margin:0 auto;min-height:400px;}
#road-svg{position:absolute;top:0;left:0;width:100%;pointer-events:none;}

.road-dashes{animation:dashFlow 2s linear infinite;}
@keyframes dashFlow{to{stroke-dashoffset:-56;}}

#day-nodes{position:absolute;top:0;left:0;width:100%;height:100%;}

/* ═══════ v19b: 3x BIGGER RAINBOW NODES WITH 3D EFFECT ═══════ */
.dnode{
    position:absolute;transform:translate(-50%,-50%);
    width:clamp(64px,18vw,82px);height:clamp(64px,18vw,82px);
    border-radius:50%;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    cursor:pointer;transition:all .3s cubic-bezier(.34,1.56,.64,1);z-index:5;
    border:3px solid rgba(255,255,255,.35);
}
.dnode.unlocked{
    /* Default green — overridden per-node by JS inline styles */
    background:linear-gradient(135deg,#66BB6A,#43A047);
    box-shadow:0 6px 20px rgba(76,175,80,.5),inset 0 2px 0 rgba(255,255,255,.35),0 -2px 0 rgba(0,0,0,.15);
}
.dnode.unlocked:active{transform:translate(-50%,-50%) scale(.88);}
.dnode.unlocked:hover{transform:translate(-50%,-50%) scale(1.08);}
.dnode.current{
    background:linear-gradient(135deg,#FFD600,#FF6F00);
    box-shadow:0 6px 24px rgba(255,214,0,.7),inset 0 2px 0 rgba(255,255,255,.4),0 0 30px rgba(255,214,0,.3);
    border:3px solid #fff;
    animation:nodeGlow 2s ease-in-out infinite alternate;
}
@keyframes nodeGlow{0%{box-shadow:0 6px 24px rgba(255,214,0,.4),0 0 15px rgba(255,214,0,.15);}100%{box-shadow:0 6px 30px rgba(255,214,0,.8),0 0 40px rgba(255,214,0,.4);}}
.dnode.locked{background:rgba(255,255,255,.07);border:2px dashed rgba(255,255,255,.18);cursor:not-allowed;opacity:.45;}

.dnode-icon-top{font-size:clamp(1.1rem,3.5vw,1.5rem);line-height:1;margin-bottom:1px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2));}
.dnode-icon{font-size:clamp(1rem,3vw,1.3rem);line-height:1;margin-top:2px;}
.dnode-num{
    font-family:'Bubblegum Sans',cursive;
    font-size:clamp(.7rem,2.2vw,.92rem);font-weight:700;
    color:#fff;line-height:1.1;
    text-shadow:0 2px 5px rgba(0,0,0,.4);
}
.dnode-stars{position:absolute;bottom:-16px;font-size:clamp(.55rem,1.8vw,.7rem);white-space:nowrap;filter:drop-shadow(0 1px 3px rgba(0,0,0,.3));}
.dnode-pulse{position:absolute;inset:-8px;border-radius:50%;border:3px solid rgba(255,214,0,.5);animation:pulseRing 2s ease-out infinite;pointer-events:none;}
@keyframes pulseRing{0%{transform:scale(1);opacity:1;}100%{transform:scale(1.5);opacity:0;}}

/* Peek nodes */
.dnode.peek{
    background:rgba(255,255,255,.06) !important;
    border:2px dashed rgba(255,255,255,.15) !important;
    cursor:default !important;opacity:.4;
    box-shadow:none !important;
    animation:peekPulse 3s ease-in-out infinite;
}
@keyframes peekPulse{0%,100%{opacity:.3;}50%{opacity:.55;}}

/* ═══════ v19b: DECORATIVE ELEMENTS ═══════ */
.road-decor{
    position:absolute;transform:translate(-50%,-50%);
    z-index:2;pointer-events:none;
}
.decor-emoji{
    font-size:clamp(1.6rem,5vw,2.2rem);
    filter:drop-shadow(0 3px 8px rgba(0,0,0,.3));
    display:block;
}
.decor-anim-0{animation:decorBob 3s ease-in-out infinite;}
.decor-anim-1{animation:decorSpin 6s linear infinite;}
.decor-anim-2{animation:decorWiggle 2.5s ease-in-out infinite;}
@keyframes decorBob{0%,100%{transform:translate(-50%,-50%) translateY(0);}50%{transform:translate(-50%,-50%) translateY(-10px);}}
@keyframes decorSpin{0%{transform:translate(-50%,-50%) rotate(0deg);}100%{transform:translate(-50%,-50%) rotate(360deg);}}
@keyframes decorWiggle{0%,100%{transform:translate(-50%,-50%) rotate(-8deg);}50%{transform:translate(-50%,-50%) rotate(8deg);}}

/* Floating letters */
.float-letter{
    position:absolute;transform:translate(-50%,-50%);
    font-family:'Bubblegum Sans',cursive;
    font-size:clamp(.9rem,2.8vw,1.3rem);font-weight:700;
    color:rgba(255,255,255,.08);
    pointer-events:none;z-index:1;
    animation:floatDrift linear infinite;
}
@keyframes floatDrift{
    0%{transform:translate(-50%,-50%) translateY(0) rotate(0deg);opacity:.08;}
    50%{opacity:.15;}
    100%{transform:translate(-50%,-50%) translateY(-40px) rotate(15deg);opacity:.04;}
}

/* Floating musical notes */
.float-note{
    position:absolute;transform:translate(-50%,-50%);
    font-size:clamp(.7rem,2.2vw,1rem);
    pointer-events:none;z-index:1;
    opacity:.2;
    animation:noteDrift ease-in-out infinite;
}
@keyframes noteDrift{
    0%{transform:translate(-50%,-50%) translateY(0) scale(1);opacity:.15;}
    50%{transform:translate(-50%,-50%) translateY(-20px) scale(1.2);opacity:.3;}
    100%{transform:translate(-50%,-50%) translateY(0) scale(1);opacity:.15;}
}

.fog-hint{
    position:absolute;left:50%;transform:translateX(-50%);
    text-align:center;font-size:clamp(.5rem,1.5vw,.65rem);
    color:rgba(255,255,255,.5);font-weight:600;
    white-space:nowrap;letter-spacing:.5px;
    animation:fogFloat 2.5s ease-in-out infinite;
}
@keyframes fogFloat{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(-5px);}}

#dash-footer{flex-shrink:0;text-align:center;padding:clamp(6px,1.5vh,12px);background:rgba(0,0,0,.15);}
#dash-footer .pbtn{font-size:clamp(.55rem,1.6vw,.72rem);padding:6px 18px;}

/* ═══════════════════════════════════════════════════════
   ★ ORIGINAL FLASHCARD CSS (from style.css) ★
   ═══════════════════════════════════════════════════════ */
.inline-f-card {
    background-color: transparent;
    perspective: 1000px;
    cursor: pointer;
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-right: 15px;
    margin-bottom: 15px;
}
.inline-f-card .f-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.inline-f-card.flipped .f-inner {
    transform: rotateY(180deg);
}
.inline-f-card .f-front, .inline-f-card .f-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 1rem;
    overflow: hidden;
}
.inline-f-card .f-front {
    background-color: #ffffff;
    border: 3px solid #e2e8f0;
    z-index: 2;
    display: flex;
    flex-direction: column;
}
.inline-f-card .f-back {
    background-color: #f0f9ff;
    border: 3px solid #3b82f6;
    transform: rotateY(180deg);
    z-index: 1;
    display: flex;
    flex-direction: column;
    text-align: left;
}
.inline-img-wrapper {
    height: 70%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background: white;
    border-bottom: 2px solid #f1f5f9;
}
.inline-img-wrapper img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.inline-word-title {
    height: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    color: #1e3a8a;
    background: #f8fafc;
}
.click-hint {
    font-size: 0.7rem;
    color: #ef4444;
    text-transform: uppercase;
    margin-top: 5px;
    background: #fee2e2;
    padding: 2px 8px;
    border-radius: 10px;
}

/* 11. रिस्पॉन्सिव्ह सेटिंग्स (Responsive) */
@media (max-width: 768px) {
    .inline-f-card {
        width: 180px;
        height: 280px;
        margin-right: 8px;
        margin-bottom: 8px;
    }
    .inline-word-title {
        font-size: 1.5rem;
    }
    .active-card-zoom {
        transform: scale(1.1) !important;
    }
}
@media (min-width: 769px) and (max-width: 1599px) {
    .inline-f-card {
        width: 300px;
        height: 450px;
        margin-right: 20px;
    }
    .inline-word-title {
        font-size: 2rem;
    }
    .active-card-zoom {
        transform: scale(1.2) !important;
    }
}
@media (min-width: 1600px) {
    .inline-f-card {
        width: 380px;
        height: 550px;
        margin-right: 30px;
    }
    .inline-word-title {
        font-size: 2.5rem;
    }
    .active-card-zoom {
        transform: scale(1.25) !important;
    }
}

/* ═══════════════════════════════════════════════════════
   ★ BACK-SIDE COLOR-CODED CSS (from style.css — EXACT MATCH) ★
   ═══════════════════════════════════════════════════════ */
.f-back {
    display: flex;
    flex-direction: column;
    text-align: left;
    background: #ffffff;
}
.back-header {
    background: #f8fafc;
    padding: 8px;
    text-align: center;
    border-bottom: 1px solid #e2e8f0;
}
.inline-pron {
    font-family: Segoe UI;
    color: #64748b;
    font-weight: bold;
    font-size: 1rem;
}
.back-scroll-content {
    padding: 10px;
    overflow-y: auto !important;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1;
}
.back-scroll-content::-webkit-scrollbar {
    width: 4px;
}
.back-scroll-content::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
.section-meaning {
    background: #dcfce7;
    border-left: 5px solid #16a34a;
    border-radius: 5px;
    padding: 8px;
}
.label-meaning {
    color: #15803d;
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
    display: block;
}
.text-meaning {
    color: #14532d;
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.2;
}
.section-def {
    background: #dbeafe;
    border-left: 5px solid #2563eb;
    border-radius: 5px;
    padding: 8px;
}
.label-def {
    color: #1e40af;
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
    display: block;
}
.text-def {
    color: #1e3a8a;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;
}
.section-sent {
    background: #f3e8ff;
    border-left: 5px solid #9333ea;
    border-radius: 5px;
    padding: 8px;
}
.label-sent {
    color: #7e22ce;
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
    display: block;
}
.list-sent {
    list-style: none;
    padding: 0;
    margin: 0;
}
.list-sent li {
    font-size: 0.85rem;
    color: #581c87;
    margin-bottom: 4px;
    padding-left: 10px;
    position: relative;
}
.list-sent li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #9333ea;
    font-weight: bold;
}

/* ★ Mobile back-side override (matches style.css Section 7) ★ */
@media screen and (max-width: 768px) {
    #fc-box .inline-f-card .f-back {
        overflow-y: auto !important;
        justify-content: flex-start !important;
        padding: 10px !important;
        background-color: #fffbeb !important;
        border: 2px solid #fbbf24 !important;
    }
}

/* ═══════════════════════════════════════════════════════
   GAME FLASHCARD OVERLAY
   ★ FIX 2: Font reset — stops Fredoka from leaking
   ★ FIX 3: Explicit card size + scale for side-by-side
   ═══════════════════════════════════════════════════════ */

/* Slide-up overlay */
#fc-box{
    position:fixed;bottom:0;left:0;right:0;z-index:180;
    background:linear-gradient(0deg,rgba(26,35,126,.97) 0%,rgba(26,35,126,.92) 85%,transparent 100%);
    padding:clamp(10px,2vh,20px) clamp(6px,2vw,14px) clamp(8px,1.5vh,14px);
    transform:translateY(100%);
    transition:transform .45s cubic-bezier(.22,1,.36,1);
    pointer-events:none;
    max-height:85vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
    /* ★ FIX 2: FONT RESET — original site uses system fonts.
       Game body uses Fredoka which corrupts flashcard text.
       Reset here so ALL card elements inherit system fonts. ★ */
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
#fc-box.fc-show{transform:translateY(0);pointer-events:auto;}
#fc-box.hidden{display:none;}

/* ★ FIX 3: Side-by-side flex + scale wrapper ★ */
.fc-cards-row{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    gap:10px;
    margin-bottom:8px;
    transform:scale(0.85);
    transform-origin:top center;
}

/* ★ FIX 3: GAME-CONTEXT CARD SIZE ★
   Original style.css responsive rules:
     mobile: 180×280, tablet: 300×450, desktop: 380×550
   Problem: Tablet/desktop sizes make cards HUGE in game.
   Fix: Force mobile-like size inside game overlay.
   ONLY width/height — NO internal styling changes. ★ */
#fc-box .inline-f-card{
    width:160px !important;
    height:250px !important;
    margin:0 !important;
}

/* Entry animation */
#fc-box .inline-f-card{
    animation:fcSlideUp .5s cubic-bezier(.34,1.56,.64,1) both;
}
#fc-box .inline-f-card:nth-child(2){animation-delay:.15s;}
@keyframes fcSlideUp{
    0%{opacity:0;transform:translateY(30px) scale(.9);}
    100%{opacity:1;transform:translateY(0) scale(1);}
}

/* Listen button (only element not in original site) */
.fc-listen-btn{
    text-align:center;
    font-size:0.75rem;
    color:#3b82f6;
    background:#f0f9ff;
    border-top:1px solid #e2e8f0;
    padding:5px 8px;
    cursor:pointer;
    transition:background .2s;
}
.fc-listen-btn:active{background:#dbeafe;}

/* ★ v19: "Next Round" button — primary navigation, bigger ★ */
.fc-next{
    display:block;width:100%;max-width:280px;margin:6px auto 0;
    background:linear-gradient(135deg,#FFD600,#FFA000);color:#4e342e;
    border:none;border-radius:24px;
    font-family:'Bubblegum Sans',cursive;
    font-size:clamp(.85rem,2.8vw,1.15rem);font-weight:700;
    padding:clamp(10px,2vh,16px) 20px;cursor:pointer;
    box-shadow:0 4px 16px rgba(255,160,0,.5);
    animation:fcSlideUp .5s cubic-bezier(.34,1.56,.64,1) .3s both;
    letter-spacing:.5px;
}
.fc-next:active{transform:scale(.94);}

/* ★ v19: Inline rhyme display inside fc-box ★ */
.fc-rhyme-row{
    display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
    gap:6px 10px;
    background:rgba(255,255,255,.12);
    border:2px solid rgba(102,187,106,.6);border-radius:14px;
    padding:6px 14px;margin-bottom:8px;
    animation:fcSlideUp .35s cubic-bezier(.34,1.56,.64,1) both;
}
.fc-rhyme-row.fc-sight-label{border-color:rgba(255,193,7,.5);background:rgba(255,255,255,.08);}
.fc-rw{font-family:'Bubblegum Sans',cursive;font-size:clamp(1.1rem,3.5vw,1.5rem);font-weight:700;color:#fff;text-transform:uppercase;}
.fc-rhl{color:#FFEB3B;text-decoration:underline;text-underline-offset:3px;}
.fc-req{font-size:clamp(1rem,3vw,1.3rem);color:#66BB6A;font-weight:900;}
.fc-rmsg{font-size:clamp(.65rem,2vw,.85rem);color:#B2DFDB;width:100%;text-align:center;margin-top:2px;}

/* Narrow phones: scale down more */
@media(max-width:360px){
    .fc-cards-row{transform:scale(0.75);transform-origin:top center;}
    #fc-box .inline-f-card{width:145px !important;height:225px !important;}
}
/* Very narrow: stack vertically */
@media(max-width:300px){
    .fc-cards-row{flex-direction:column;align-items:center;transform:scale(0.65);}
}

/* ═══════ FOG OF WAR — DASHBOARD ═══════ */
/* (v19b: peek + fog-hint styles moved to dashboard section above) */

/* ═══════════════════════════════════════════════════════
   ★ v20: CANDY 3D GAME CONTROL BUTTONS ★
   ═══════════════════════════════════════════════════════ */
#game-ctrls{
    position:fixed;bottom:10px;left:50%;transform:translateX(-50%);
    display:flex;gap:10px;z-index:60;
    background:rgba(0,0,0,.35);backdrop-filter:blur(8px);
    border-radius:22px;padding:6px 14px;
    box-shadow:0 4px 16px rgba(0,0,0,.25);
}
#game-ctrls.hidden{display:none;}
.gc-btn{
    width:46px;height:46px;border:none;border-radius:50%;
    font-size:1.3rem;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:transform .15s,box-shadow .15s;
    position:relative;
}
/* ★ Back button — blue candy ★ */
#gc-back{
    background:linear-gradient(180deg,#64B5F6 0%,#1E88E5 60%,#1565C0 100%);
    box-shadow:0 4px 0 #0D47A1,0 6px 12px rgba(21,101,192,.4),inset 0 2px 0 rgba(255,255,255,.35);
    color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3);
}
/* ★ Pause button — amber candy ★ */
#gc-pause{
    background:linear-gradient(180deg,#FFD54F 0%,#FFB300 60%,#FF8F00 100%);
    box-shadow:0 4px 0 #E65100,0 6px 12px rgba(255,143,0,.4),inset 0 2px 0 rgba(255,255,255,.4);
    color:#4E342E;text-shadow:0 1px 0 rgba(255,255,255,.3);
}
/* ★ Next button — green candy ★ */
#gc-next{
    background:linear-gradient(180deg,#81C784 0%,#43A047 60%,#2E7D32 100%);
    box-shadow:0 4px 0 #1B5E20,0 6px 12px rgba(46,125,50,.4),inset 0 2px 0 rgba(255,255,255,.35);
    color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3);
}
/* ★ Stop button — red candy ★ */
#gc-stop{
    background:linear-gradient(180deg,#EF5350 0%,#E53935 60%,#C62828 100%);
    box-shadow:0 4px 0 #8B0000,0 6px 12px rgba(198,40,40,.4),inset 0 2px 0 rgba(255,255,255,.3);
    color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3);
}
/* ★ Press effect — button pushes down ★ */
.gc-btn:active{
    transform:translateY(3px) scale(.95);
    box-shadow:0 1px 0 rgba(0,0,0,.3),0 2px 6px rgba(0,0,0,.2),inset 0 2px 0 rgba(255,255,255,.2)!important;
}
/* Gloss highlight */
.gc-btn::before{
    content:'';position:absolute;top:3px;left:15%;right:15%;height:40%;
    border-radius:50%;
    background:linear-gradient(180deg,rgba(255,255,255,.45) 0%,transparent 100%);
    pointer-events:none;
}

/* ═══════════════════════════════════════════════════════
   ★ v20: DYNAMIC WORLD THEMES ★
   Applied via body class. Only backgrounds + decorations.
   Chairs, kids, flashcards, rhyme-box, dashboard UNTOUCHED.
   ═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
   ★ v21: 6 IMMERSIVE ANIMATED WORLDS ★
   Each theme uses pseudo-elements on:
   #game-stage, #floor-tex, #spotlight, #bunting,
   .bunting-string, #disco-ball (::before + ::after = 12 layers)
   ═══════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   🌊 THEME 1: DEEP OCEAN WORLD
   ══════════════════════════════════════════════════════════ */
.theme-ocean #game-stage{
    background:linear-gradient(180deg,
        #01579B 0%,#0277BD 10%,#0288D1 18%,#039BE5 26%,#0097A7 33%,
        #5D4037 34%,#4E342E 50%,#3E2723 70%,#33271c 100%) !important;
}
.theme-ocean #floor-tex{
    background:
        radial-gradient(ellipse at 20% 40%,rgba(93,64,55,.2) 0%,transparent 40%),
        radial-gradient(ellipse at 75% 60%,rgba(78,52,46,.15) 0%,transparent 35%),
        repeating-linear-gradient(85deg,transparent 0px,transparent 18px,rgba(62,39,35,.08) 18px,rgba(62,39,35,.08) 20px)!important;
    border-top:3px solid #0288D1!important;
}
/* Sun rays from above */
.theme-ocean #spotlight{
    background:radial-gradient(ellipse at 40% -10%,rgba(255,255,200,.12) 0%,transparent 50%),
        radial-gradient(ellipse at 60% -10%,rgba(255,255,200,.08) 0%,transparent 45%)!important;
}
.theme-ocean #spotlight::before{
    content:'';position:absolute;top:0;left:15%;width:12%;height:70%;
    background:linear-gradient(180deg,rgba(255,255,220,.1) 0%,transparent 100%);
    transform:skewX(-12deg);pointer-events:none;
    animation:oceanRay1 6s ease-in-out infinite alternate;
}
.theme-ocean #spotlight::after{
    content:'';position:absolute;top:0;left:55%;width:10%;height:60%;
    background:linear-gradient(180deg,rgba(255,255,220,.07) 0%,transparent 100%);
    transform:skewX(8deg);pointer-events:none;
    animation:oceanRay2 8s ease-in-out infinite alternate;
}
@keyframes oceanRay1{0%{left:12%;opacity:.3;}100%{left:22%;opacity:.7;}}
@keyframes oceanRay2{0%{left:52%;opacity:.2;}100%{left:62%;opacity:.5;}}

/* Schools of fish — multi-fish via box-shadow */
.theme-ocean #game-stage::before{
    content:'🐠';position:absolute;top:12%;left:-10%;font-size:clamp(1.2rem,3.5vw,1.8rem);
    z-index:3;pointer-events:none;
    text-shadow:
        25px 8px 0 rgba(0,0,0,0),
        55px -5px 0 rgba(0,0,0,0),
        80px 12px 0 rgba(0,0,0,0);
    animation:fishSchool 10s linear infinite;
}
.theme-ocean #game-stage::after{
    content:'🐟';position:absolute;top:22%;left:-15%;font-size:clamp(1rem,3vw,1.4rem);
    z-index:3;pointer-events:none;opacity:.7;
    animation:fishSchool 14s linear 3s infinite;
}
@keyframes fishSchool{
    0%{transform:translateX(0);opacity:0;}
    5%{opacity:.8;}
    90%{opacity:.8;}
    100%{transform:translateX(calc(100vw + 80px));opacity:0;}
}

/* Rising bubbles via floor-tex pseudo */
.theme-ocean #floor-tex::before{
    content:'';position:absolute;bottom:0;left:25%;width:8px;height:8px;
    border-radius:50%;background:rgba(255,255,255,.3);
    box-shadow:
        40px 10px 0 3px rgba(255,255,255,.2),
        -30px -20px 0 2px rgba(255,255,255,.25),
        80px 5px 0 4px rgba(255,255,255,.15),
        120px -10px 0 2px rgba(255,255,255,.2),
        -60px 15px 0 3px rgba(255,255,255,.18);
    z-index:4;pointer-events:none;
    animation:bubblesRise 5s ease-in infinite;
}
.theme-ocean #floor-tex::after{
    content:'';position:absolute;bottom:0;left:60%;width:6px;height:6px;
    border-radius:50%;background:rgba(255,255,255,.25);
    box-shadow:
        30px 8px 0 2px rgba(255,255,255,.2),
        -20px -5px 0 3px rgba(255,255,255,.15),
        60px 12px 0 2px rgba(255,255,255,.2);
    z-index:4;pointer-events:none;
    animation:bubblesRise 7s ease-in 2s infinite;
}
@keyframes bubblesRise{
    0%{transform:translateY(0) scale(1);opacity:.6;}
    50%{opacity:.4;}
    100%{transform:translateY(-55vh) scale(1.3);opacity:0;}
}

/* Swaying coral/seaweed via bunting */
.theme-ocean #bunting::before{
    content:'🪸';position:absolute;bottom:-100vh;left:8%;font-size:clamp(1.8rem,5vw,2.6rem);
    z-index:3;pointer-events:none;
    animation:coralSway 3.5s ease-in-out infinite;
    transform-origin:bottom center;
    filter:drop-shadow(0 3px 6px rgba(0,0,0,.3));
}
.theme-ocean #bunting::after{
    content:'🌿';position:absolute;bottom:-100vh;right:6%;font-size:clamp(1.5rem,4vw,2.2rem);
    z-index:3;pointer-events:none;
    animation:seaweedSway 4s ease-in-out .5s infinite;
    transform-origin:bottom center;opacity:.7;
}
@keyframes coralSway{0%,100%{transform:rotate(-4deg);}50%{transform:rotate(4deg);}}
@keyframes seaweedSway{0%,100%{transform:rotate(-6deg) scaleY(1);}50%{transform:rotate(6deg) scaleY(1.05);}}

/* Small octopus floating */
.theme-ocean .bunting-string::before{
    content:'🐙';position:absolute;top:50vh;right:8%;font-size:clamp(1.2rem,3.5vw,1.6rem);
    pointer-events:none;z-index:3;
    animation:octopusFloat 6s ease-in-out infinite;
}
@keyframes octopusFloat{
    0%,100%{transform:translate(0,0) rotate(0deg);}
    25%{transform:translate(-15px,-10px) rotate(-5deg);}
    50%{transform:translate(-5px,8px) rotate(3deg);}
    75%{transform:translate(10px,-5px) rotate(-3deg);}
}


/* ══════════════════════════════════════════════════════════
   ❄️ THEME 2: FROZEN ICE LAND
   ══════════════════════════════════════════════════════════ */
.theme-frozen #game-stage{
    background:linear-gradient(180deg,
        #B3E5FC 0%,#81D4FA 10%,#E1F5FE 20%,#E8EAF6 33%,
        #ECEFF1 34%,#F5F5F5 45%,#FAFAFA 60%,#E8EAF6 80%,#CFD8DC 100%) !important;
}
.theme-frozen #floor-tex{
    background:
        radial-gradient(ellipse at 30% 45%,rgba(255,255,255,.5) 0%,transparent 35%),
        radial-gradient(ellipse at 70% 55%,rgba(200,230,255,.4) 0%,transparent 30%),
        radial-gradient(ellipse at 50% 35%,rgba(227,242,253,.3) 0%,transparent 40%)!important;
    border-top:3px solid #90CAF9!important;
}
.theme-frozen #spotlight{
    background:radial-gradient(ellipse,rgba(255,255,255,.15) 0%,transparent 60%)!important;
}
/* Ice mountains in background */
.theme-frozen #spotlight::before{
    content:'';position:absolute;top:0;left:5%;width:35%;height:34%;pointer-events:none;
    background:linear-gradient(150deg,transparent 40%,rgba(200,230,255,.35) 41%,rgba(176,223,252,.25) 55%,transparent 56%),
               linear-gradient(30deg,transparent 45%,rgba(187,222,251,.3) 46%,rgba(144,202,249,.2) 60%,transparent 61%);
}
.theme-frozen #spotlight::after{
    content:'';position:absolute;top:0;right:8%;width:30%;height:33%;pointer-events:none;
    background:linear-gradient(160deg,transparent 35%,rgba(179,229,252,.3) 36%,rgba(129,212,250,.2) 52%,transparent 53%);
}

/* ❄️ FALLING SNOW — multi-layer parallax */
.theme-frozen #game-stage::before{
    content:'';position:absolute;top:-10px;left:0;right:0;height:110%;
    z-index:4;pointer-events:none;
    background-image:
        radial-gradient(2px 2px at 10% 10%,#fff 50%,transparent 50%),
        radial-gradient(3px 3px at 30% 25%,#fff 50%,transparent 50%),
        radial-gradient(2px 2px at 50% 5%,rgba(255,255,255,.8) 50%,transparent 50%),
        radial-gradient(3px 3px at 70% 20%,#fff 50%,transparent 50%),
        radial-gradient(2px 2px at 90% 15%,rgba(255,255,255,.7) 50%,transparent 50%),
        radial-gradient(2px 2px at 20% 30%,#fff 50%,transparent 50%),
        radial-gradient(3px 3px at 60% 35%,rgba(255,255,255,.9) 50%,transparent 50%),
        radial-gradient(2px 2px at 80% 8%,#fff 50%,transparent 50%),
        radial-gradient(2px 2px at 40% 40%,rgba(255,255,255,.6) 50%,transparent 50%),
        radial-gradient(3px 3px at 15% 50%,#fff 50%,transparent 50%);
    background-size:100% 100%;
    animation:snowLayer1 8s linear infinite;
}
.theme-frozen #game-stage::after{
    content:'';position:absolute;top:-10px;left:0;right:0;height:110%;
    z-index:4;pointer-events:none;
    background-image:
        radial-gradient(3px 3px at 5% 8%,rgba(255,255,255,.5) 50%,transparent 50%),
        radial-gradient(2px 2px at 25% 18%,rgba(255,255,255,.4) 50%,transparent 50%),
        radial-gradient(3px 3px at 45% 3%,rgba(255,255,255,.5) 50%,transparent 50%),
        radial-gradient(2px 2px at 65% 28%,rgba(255,255,255,.4) 50%,transparent 50%),
        radial-gradient(3px 3px at 85% 12%,rgba(255,255,255,.5) 50%,transparent 50%),
        radial-gradient(2px 2px at 35% 22%,rgba(255,255,255,.3) 50%,transparent 50%),
        radial-gradient(3px 3px at 75% 38%,rgba(255,255,255,.4) 50%,transparent 50%);
    background-size:100% 100%;
    animation:snowLayer2 12s linear infinite;
}
@keyframes snowLayer1{
    0%{transform:translateY(-5%);}
    100%{transform:translateY(95%);}
}
@keyframes snowLayer2{
    0%{transform:translate(-3%,-5%);}
    100%{transform:translate(3%,90%);}
}

/* Penguin with blinking eyes */
.theme-frozen #bunting::before{
    content:'🐧';position:absolute;bottom:-100vh;left:5%;font-size:clamp(1.8rem,5vw,2.8rem);
    z-index:3;pointer-events:none;
    animation:penguinWaddle 3s ease-in-out infinite;
    filter:drop-shadow(0 3px 8px rgba(0,0,0,.15));
}
@keyframes penguinWaddle{
    0%,100%{transform:rotate(-3deg) translateX(0);}
    25%{transform:rotate(3deg) translateX(3px);}
    50%{transform:rotate(-3deg) translateX(0);}
    75%{transform:rotate(3deg) translateX(-3px);}
}
/* Snowman */
.theme-frozen #bunting::after{
    content:'⛄';position:absolute;bottom:-100vh;right:4%;font-size:clamp(2rem,5.5vw,3rem);
    z-index:3;pointer-events:none;
    filter:drop-shadow(0 3px 8px rgba(0,0,0,.1));
}

/* Sparkle/shimmer on snow surface */
.theme-frozen #floor-tex::before{
    content:'';position:absolute;top:10%;left:0;right:0;height:80%;pointer-events:none;z-index:3;
    background-image:
        radial-gradient(1px 1px at 15% 30%,rgba(255,255,255,.9) 50%,transparent 50%),
        radial-gradient(1px 1px at 45% 60%,rgba(255,255,255,.8) 50%,transparent 50%),
        radial-gradient(1px 1px at 75% 25%,rgba(255,255,255,.9) 50%,transparent 50%),
        radial-gradient(1px 1px at 30% 75%,rgba(255,255,255,.7) 50%,transparent 50%),
        radial-gradient(1px 1px at 85% 50%,rgba(255,255,255,.8) 50%,transparent 50%),
        radial-gradient(1px 1px at 60% 40%,rgba(255,255,255,.9) 50%,transparent 50%);
    background-size:100% 100%;
    animation:iceSparkle 2.5s ease-in-out infinite;
}
@keyframes iceSparkle{0%,100%{opacity:.3;}50%{opacity:1;}}

/* Pine trees */
.theme-frozen .bunting-string::before{
    content:'🌲';position:absolute;top:52vh;right:10%;font-size:clamp(1.6rem,4.5vw,2.4rem);
    pointer-events:none;z-index:3;opacity:.45;
    filter:drop-shadow(0 3px 6px rgba(0,0,0,.1));
}
.theme-frozen .bunting-string::after{
    content:'❄️';position:absolute;top:10vh;left:50%;font-size:1.4rem;
    pointer-events:none;z-index:5;
    animation:bigFlakeSpin 6s linear infinite;
}
@keyframes bigFlakeSpin{0%{transform:rotate(0deg) translateY(0);opacity:.6;}50%{opacity:.9;}100%{transform:rotate(360deg) translateY(20px);opacity:.4;}}


/* ══════════════════════════════════════════════════════════
   🏜️ THEME 3: THE GREAT DESERT
   ══════════════════════════════════════════════════════════ */
.theme-desert #game-stage{
    background:linear-gradient(180deg,
        #FF8F00 0%,#FFA726 8%,#FFB74D 16%,#FFCC80 26%,#FFE0B2 33%,
        #E6C88A 34%,#D4A855 50%,#C9943F 65%,#BF8A30 80%,#C9943F 100%) !important;
}
.theme-desert #floor-tex{
    background:
        radial-gradient(ellipse at 30% 55%,rgba(230,200,138,.25) 0%,transparent 45%),
        radial-gradient(ellipse at 70% 40%,rgba(212,168,85,.2) 0%,transparent 40%),
        repeating-linear-gradient(175deg,transparent 0px,transparent 25px,rgba(201,148,63,.06) 25px,rgba(201,148,63,.06) 27px)!important;
    border-top:none!important;
}
.theme-desert #spotlight{
    background:radial-gradient(ellipse at 30% 10%,rgba(255,235,59,.2) 0%,rgba(255,183,77,.08) 40%,transparent 65%)!important;
}

/* Big blazing sun */
.theme-desert #spotlight::before{
    content:'';position:absolute;top:3%;left:18%;width:clamp(40px,10vw,65px);height:clamp(40px,10vw,65px);
    border-radius:50%;pointer-events:none;
    background:radial-gradient(circle,#FFF176 0%,#FFD54F 40%,#FFB300 70%,transparent 71%);
    box-shadow:0 0 30px rgba(255,235,59,.5),0 0 60px rgba(255,183,77,.3),0 0 100px rgba(255,143,0,.15);
    animation:sunPulse 4s ease-in-out infinite alternate;
}
@keyframes sunPulse{0%{box-shadow:0 0 25px rgba(255,235,59,.4),0 0 50px rgba(255,183,77,.2);transform:scale(1);}100%{box-shadow:0 0 40px rgba(255,235,59,.6),0 0 80px rgba(255,183,77,.3);transform:scale(1.05);}}

/* Sand dunes (CSS wave shapes in background) */
.theme-desert #spotlight::after{
    content:'';position:absolute;top:22%;left:0;right:0;height:14%;pointer-events:none;
    background:
        radial-gradient(ellipse 55% 100% at 20% 100%,rgba(230,200,138,.4) 0%,transparent 70%),
        radial-gradient(ellipse 45% 100% at 55% 100%,rgba(212,168,85,.35) 0%,transparent 65%),
        radial-gradient(ellipse 50% 100% at 85% 100%,rgba(230,200,138,.3) 0%,transparent 70%);
}

/* Heat wave distortion */
.theme-desert #floor-tex::before{
    content:'';position:absolute;top:0;left:0;right:0;height:20%;pointer-events:none;z-index:3;
    background:repeating-linear-gradient(0deg,
        transparent 0px,transparent 3px,rgba(255,255,255,.03) 3px,rgba(255,255,255,.03) 6px);
    animation:heatWave 3s ease-in-out infinite;
}
@keyframes heatWave{
    0%{transform:scaleX(1) translateY(0);}
    25%{transform:scaleX(1.01) translateY(1px);}
    50%{transform:scaleX(0.99) translateY(-1px);}
    75%{transform:scaleX(1.01) translateY(1px);}
    100%{transform:scaleX(1) translateY(0);}
}

/* Camel silhouette crossing */
.theme-desert #game-stage::before{
    content:'🐪';position:absolute;top:24%;left:-10%;font-size:clamp(1.4rem,4vw,2rem);
    z-index:3;pointer-events:none;opacity:.35;
    animation:camelWalk 18s linear infinite;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,.2));
}
@keyframes camelWalk{
    0%{transform:translateX(0) scaleX(1);opacity:0;}
    3%{opacity:.35;}
    95%{opacity:.35;}
    100%{transform:translateX(calc(100vw + 60px)) scaleX(1);opacity:0;}
}

/* Cactus */
.theme-desert #game-stage::after{
    content:'🌵';position:absolute;bottom:10%;right:5%;font-size:clamp(1.8rem,5vw,2.8rem);
    z-index:3;pointer-events:none;
    animation:cactusSway 5s ease-in-out infinite;
    filter:drop-shadow(0 4px 8px rgba(0,0,0,.2));
    transform-origin:bottom center;
}
@keyframes cactusSway{0%,100%{transform:rotate(-1.5deg);}50%{transform:rotate(1.5deg);}}

/* Lizard running */
.theme-desert #bunting::before{
    content:'🦎';position:absolute;bottom:-100vh;left:15%;font-size:clamp(.9rem,2.5vw,1.2rem);
    z-index:3;pointer-events:none;
    animation:lizardRun 8s ease-in-out infinite;
}
@keyframes lizardRun{
    0%{transform:translateX(0) scaleX(1);opacity:0;}
    5%{opacity:.6;}
    45%{transform:translateX(40vw) scaleX(1);opacity:.6;}
    50%{transform:translateX(40vw) scaleX(-1);opacity:.6;}
    95%{transform:translateX(0) scaleX(-1);opacity:.6;}
    100%{transform:translateX(0) scaleX(1);opacity:0;}
}
/* Eagle in sky */
.theme-desert #bunting::after{
    content:'🦅';position:absolute;top:15px;right:20%;font-size:clamp(1.2rem,3.5vw,1.8rem);
    pointer-events:none;z-index:3;opacity:.5;
    animation:eagleGlide 10s ease-in-out infinite;
}
@keyframes eagleGlide{
    0%{transform:translate(0,0) scaleX(1);}
    25%{transform:translate(-40px,-5px) scaleX(1);}
    50%{transform:translate(-80px,3px) scaleX(-1);}
    75%{transform:translate(-35px,-3px) scaleX(-1);}
    100%{transform:translate(0,0) scaleX(1);}
}


/* ══════════════════════════════════════════════════════════
   🎂 THEME 4: HAPPY BIRTHDAY PARTY
   ══════════════════════════════════════════════════════════ */
.theme-birthday #game-stage{
    background:linear-gradient(180deg,
        #CE93D8 0%,#BA68C8 10%,#F8BBD0 20%,#FCE4EC 33%,
        #FFF3E0 34%,#FFECB3 50%,#FFE0B2 70%,#FFCC80 100%) !important;
}
.theme-birthday #floor-tex{
    background:
        repeating-linear-gradient(90deg,
            rgba(233,30,99,.04) 0px,rgba(233,30,99,.04) 40px,
            rgba(156,39,176,.04) 40px,rgba(156,39,176,.04) 80px,
            rgba(63,81,181,.04) 80px,rgba(63,81,181,.04) 120px),
        repeating-linear-gradient(0deg,transparent 0px,transparent 35px,
            rgba(255,193,7,.05) 35px,rgba(255,193,7,.05) 37px)!important;
    border-top:4px solid #E91E63!important;
}
.theme-birthday #spotlight{
    background:radial-gradient(ellipse,rgba(255,200,220,.2) 0%,transparent 60%)!important;
}

/* 🎈 Rising balloons — multi-color via box-shadow */
.theme-birthday #game-stage::before{
    content:'🎈';position:absolute;bottom:-5%;left:12%;font-size:clamp(1.4rem,4vw,2rem);
    z-index:4;pointer-events:none;
    animation:balloonFloat1 7s ease-in-out infinite;
}
.theme-birthday #game-stage::after{
    content:'🎈';position:absolute;bottom:-5%;right:15%;font-size:clamp(1.2rem,3.5vw,1.6rem);
    z-index:4;pointer-events:none;
    animation:balloonFloat2 9s ease-in-out 2s infinite;
}
@keyframes balloonFloat1{
    0%{transform:translateY(0) translateX(0);opacity:0;}
    5%{opacity:.8;}
    85%{opacity:.7;}
    100%{transform:translateY(-110vh) translateX(20px);opacity:0;}
}
@keyframes balloonFloat2{
    0%{transform:translateY(0) translateX(0);opacity:0;}
    5%{opacity:.75;}
    85%{opacity:.65;}
    100%{transform:translateY(-105vh) translateX(-15px);opacity:0;}
}

/* More balloons */
.theme-birthday #floor-tex::before{
    content:'🎈';position:absolute;bottom:0;left:45%;font-size:clamp(1rem,3vw,1.4rem);
    z-index:4;pointer-events:none;
    animation:balloonFloat1 11s ease-in-out 4s infinite;
}
.theme-birthday #floor-tex::after{
    content:'🎈';position:absolute;bottom:0;right:35%;font-size:clamp(1.3rem,3.5vw,1.7rem);
    z-index:4;pointer-events:none;
    animation:balloonFloat2 8s ease-in-out 1s infinite;
}

/* 🎊 Confetti rain */
.theme-birthday #spotlight::before{
    content:'';position:absolute;top:-5%;left:0;right:0;height:110%;pointer-events:none;z-index:4;
    background-image:
        radial-gradient(3px 6px at 8% 15%,#E91E63 80%,transparent 80%),
        radial-gradient(4px 4px at 22% 25%,#2196F3 80%,transparent 80%),
        radial-gradient(3px 5px at 38% 10%,#4CAF50 80%,transparent 80%),
        radial-gradient(4px 3px at 52% 30%,#FFC107 80%,transparent 80%),
        radial-gradient(3px 6px at 68% 8%,#9C27B0 80%,transparent 80%),
        radial-gradient(4px 4px at 82% 22%,#FF5722 80%,transparent 80%),
        radial-gradient(3px 5px at 15% 40%,#00BCD4 80%,transparent 80%),
        radial-gradient(4px 3px at 45% 5%,#E91E63 80%,transparent 80%),
        radial-gradient(3px 6px at 75% 35%,#8BC34A 80%,transparent 80%),
        radial-gradient(4px 4px at 92% 18%,#FF9800 80%,transparent 80%);
    background-size:100% 100%;
    animation:confettiRain 6s linear infinite;
}
@keyframes confettiRain{
    0%{transform:translateY(-10%) rotate(0deg);}
    100%{transform:translateY(100%) rotate(15deg);}
}

/* ✨ Fairy lights blinking */
.theme-birthday #spotlight::after{
    content:'';position:absolute;top:32%;left:2%;right:2%;height:4px;pointer-events:none;z-index:4;
    border-radius:2px;
    box-shadow:
        0 0 6px 2px rgba(255,235,59,.6),
        40px 0 6px 2px rgba(233,30,99,.5),
        80px 0 6px 2px rgba(33,150,243,.5),
        120px 0 6px 2px rgba(76,175,80,.5),
        160px 0 6px 2px rgba(255,152,0,.5),
        200px 0 6px 2px rgba(156,39,176,.5),
        240px 0 6px 2px rgba(0,188,212,.5),
        280px 0 6px 2px rgba(255,87,34,.5);
    animation:fairyBlink 2s ease-in-out infinite alternate;
}
@keyframes fairyBlink{0%{opacity:.4;}50%{opacity:1;}100%{opacity:.5;}}

/* "HAPPY BIRTHDAY" banner */
.theme-birthday #bunting::before{
    content:'🎉 HAPPY BIRTHDAY 🎉';position:absolute;top:8px;left:50%;transform:translateX(-50%);
    font-family:'Bubblegum Sans',cursive;font-size:clamp(.6rem,2vw,.85rem);
    color:#E91E63;letter-spacing:2px;white-space:nowrap;
    text-shadow:0 1px 3px rgba(0,0,0,.15);
    pointer-events:none;z-index:6;
    animation:bannerPulse 2s ease-in-out infinite alternate;
}
@keyframes bannerPulse{0%{transform:translateX(-50%) scale(1);}100%{transform:translateX(-50%) scale(1.03);}}

/* Cake & gift */
.theme-birthday #bunting::after{
    content:'🎂';position:absolute;bottom:-100vh;left:6%;font-size:clamp(1.6rem,4.5vw,2.4rem);
    z-index:3;pointer-events:none;
    animation:cakeBob 3s ease-in-out infinite;
    filter:drop-shadow(0 4px 8px rgba(0,0,0,.15));
}
@keyframes cakeBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}

/* Party hat */
.theme-birthday .bunting-string::before{
    content:'🎁';position:absolute;top:55vh;right:5%;font-size:clamp(1.4rem,4vw,2rem);
    pointer-events:none;z-index:3;
    animation:giftWiggle 2.5s ease-in-out infinite;
}
@keyframes giftWiggle{0%,100%{transform:rotate(-5deg);}50%{transform:rotate(5deg);}}


/* ══════════════════════════════════════════════════════════
   🌴 THEME 5: JUNGLE SAFARI
   ══════════════════════════════════════════════════════════ */
.theme-jungle #game-stage{
    background:linear-gradient(180deg,
        #1B5E20 0%,#2E7D32 8%,#33691E 15%,#388E3C 22%,#2E7D32 33%,
        #6D4C41 34%,#5D4037 48%,#4E342E 65%,#3E2723 100%) !important;
}
.theme-jungle #floor-tex{
    background:
        radial-gradient(ellipse at 35% 50%,rgba(109,76,65,.2) 0%,transparent 40%),
        radial-gradient(ellipse at 70% 45%,rgba(93,64,55,.15) 0%,transparent 35%),
        repeating-linear-gradient(92deg,transparent 0px,transparent 22px,rgba(78,52,46,.07) 22px,rgba(78,52,46,.07) 24px),
        repeating-linear-gradient(2deg,transparent 0px,transparent 28px,rgba(62,39,35,.05) 28px,rgba(62,39,35,.05) 30px)!important;
    border-top:3px solid #2E7D32!important;
}
.theme-jungle #spotlight{
    background:radial-gradient(ellipse,rgba(200,255,200,.08) 0%,rgba(0,80,0,.04) 50%,transparent 70%)!important;
}

/* Dappled sunlight through canopy */
.theme-jungle #spotlight::before{
    content:'';position:absolute;top:0;left:0;right:0;height:34%;pointer-events:none;
    background:
        radial-gradient(circle at 25% 60%,rgba(255,255,200,.1) 0%,transparent 20%),
        radial-gradient(circle at 55% 40%,rgba(255,255,200,.08) 0%,transparent 18%),
        radial-gradient(circle at 80% 55%,rgba(255,255,200,.1) 0%,transparent 22%);
    animation:dappled 4s ease-in-out infinite alternate;
}
@keyframes dappled{0%{opacity:.5;}100%{opacity:.9;}}

/* Hanging vines left */
.theme-jungle #game-stage::before{
    content:'🌿';position:absolute;top:0;left:2%;font-size:clamp(2.2rem,6.5vw,3.5rem);
    z-index:3;pointer-events:none;
    animation:vineHang 4s ease-in-out infinite;
    transform-origin:top center;opacity:.55;
    filter:drop-shadow(0 4px 8px rgba(0,0,0,.3));
}
@keyframes vineHang{0%,100%{transform:rotate(-4deg) scaleY(1);}50%{transform:rotate(4deg) scaleY(1.03);}}

/* Hanging vines right */
.theme-jungle #game-stage::after{
    content:'🍃';position:absolute;top:2%;right:2%;font-size:clamp(1.8rem,5vw,2.8rem);
    z-index:3;pointer-events:none;
    animation:vineHang 5s ease-in-out 1s infinite;
    transform-origin:top right;opacity:.45;
}

/* Blinking eyes in darkness */
.theme-jungle #spotlight::after{
    content:'';position:absolute;top:18%;left:10%;width:6px;height:6px;
    border-radius:50%;pointer-events:none;z-index:4;
    background:#FFEB3B;
    box-shadow:12px 0 0 3px #FFEB3B;
    animation:jungleEyes 5s ease-in-out infinite;
}
@keyframes jungleEyes{
    0%,45%{opacity:0;}
    50%{opacity:.8;}
    52%{opacity:0;}
    54%{opacity:.8;}
    60%,100%{opacity:0;}
}

/* Parrot flying between branches */
.theme-jungle #bunting::before{
    content:'🦜';position:absolute;top:10px;right:15%;font-size:clamp(1.4rem,4vw,2rem);
    pointer-events:none;z-index:5;
    animation:parrotFly 8s ease-in-out infinite;
    filter:drop-shadow(0 3px 8px rgba(0,0,0,.3));
}
@keyframes parrotFly{
    0%{transform:translate(0,0) scaleX(1) rotate(-5deg);}
    25%{transform:translate(-60px,15px) scaleX(1) rotate(3deg);}
    50%{transform:translate(-120px,5px) scaleX(-1) rotate(-3deg);}
    75%{transform:translate(-55px,18px) scaleX(-1) rotate(5deg);}
    100%{transform:translate(0,0) scaleX(1) rotate(-5deg);}
}

/* Monkey swinging */
.theme-jungle #bunting::after{
    content:'🐒';position:absolute;top:20px;left:8%;font-size:clamp(1.3rem,3.5vw,1.8rem);
    pointer-events:none;z-index:5;
    animation:monkeySwing 3s ease-in-out infinite;
    transform-origin:top center;
}
@keyframes monkeySwing{0%,100%{transform:rotate(-15deg);}50%{transform:rotate(15deg);}}

/* Fern at bottom */
.theme-jungle #floor-tex::before{
    content:'🌴';position:absolute;top:-5%;left:3%;font-size:clamp(2.2rem,6.5vw,3.5rem);
    pointer-events:none;z-index:3;opacity:.4;
    transform-origin:bottom center;
    animation:cactusSway 6s ease-in-out infinite;
}
/* Firefly dots floating */
.theme-jungle #floor-tex::after{
    content:'';position:absolute;top:0;left:0;right:0;height:100%;pointer-events:none;z-index:4;
    background-image:
        radial-gradient(2px 2px at 20% 30%,rgba(255,255,100,.7) 50%,transparent 50%),
        radial-gradient(2px 2px at 50% 55%,rgba(255,255,100,.6) 50%,transparent 50%),
        radial-gradient(2px 2px at 78% 20%,rgba(255,255,100,.7) 50%,transparent 50%),
        radial-gradient(2px 2px at 35% 70%,rgba(255,255,100,.5) 50%,transparent 50%),
        radial-gradient(2px 2px at 90% 45%,rgba(255,255,100,.6) 50%,transparent 50%);
    background-size:100% 100%;
    animation:fireflyGlow 3s ease-in-out infinite alternate;
}
@keyframes fireflyGlow{0%{opacity:.2;}50%{opacity:.8;}100%{opacity:.2;}}


/* ══════════════════════════════════════════════════════════
   🚀 THEME 6: SPACE ODYSSEY
   ══════════════════════════════════════════════════════════ */
.theme-space #game-stage{
    background:linear-gradient(180deg,
        #0a0a1a 0%,#0d0d2b 10%,#12123a 20%,#1a1a4e 30%,#0f0f35 33%,
        #37474F 34%,#455A64 45%,#546E7A 60%,#455A64 80%,#37474F 100%) !important;
}
.theme-space #floor-tex{
    background:
        radial-gradient(circle at 25% 45%,rgba(84,110,122,.2) 0%,transparent 25%),
        radial-gradient(circle at 70% 60%,rgba(69,90,100,.15) 0%,transparent 20%),
        radial-gradient(circle at 50% 35%,rgba(55,71,79,.1) 0%,transparent 30%)!important;
    border-top:2px solid #263238!important;
}
.theme-space #spotlight{
    background:radial-gradient(ellipse,rgba(150,150,255,.06) 0%,transparent 60%)!important;
}

/* ★ Twinkling stars field */
.theme-space #game-stage::before{
    content:'';position:absolute;top:0;left:0;right:0;height:34%;
    z-index:3;pointer-events:none;
    background-image:
        radial-gradient(1px 1px at 5% 15%,#fff 50%,transparent 50%),
        radial-gradient(1.5px 1.5px at 12% 28%,rgba(255,255,255,.8) 50%,transparent 50%),
        radial-gradient(1px 1px at 22% 8%,#fff 50%,transparent 50%),
        radial-gradient(2px 2px at 30% 22%,rgba(200,200,255,.7) 50%,transparent 50%),
        radial-gradient(1px 1px at 40% 30%,#fff 50%,transparent 50%),
        radial-gradient(1.5px 1.5px at 50% 12%,rgba(255,255,255,.8) 50%,transparent 50%),
        radial-gradient(1px 1px at 58% 25%,#fff 50%,transparent 50%),
        radial-gradient(2px 2px at 68% 6%,rgba(200,200,255,.9) 50%,transparent 50%),
        radial-gradient(1px 1px at 75% 18%,#fff 50%,transparent 50%),
        radial-gradient(1.5px 1.5px at 85% 28%,rgba(255,255,255,.7) 50%,transparent 50%),
        radial-gradient(1px 1px at 92% 10%,#fff 50%,transparent 50%),
        radial-gradient(1px 1px at 35% 5%,rgba(255,200,200,.8) 50%,transparent 50%),
        radial-gradient(1px 1px at 63% 32%,rgba(200,255,200,.7) 50%,transparent 50%);
    background-size:100% 100%;
    animation:starTwinkle 4s ease-in-out infinite alternate;
}
@keyframes starTwinkle{0%{opacity:.5;}50%{opacity:1;}100%{opacity:.6;}}

/* Nebula color */
.theme-space #game-stage::after{
    content:'';position:absolute;top:0;left:0;right:0;height:34%;
    z-index:2;pointer-events:none;
    background:
        radial-gradient(ellipse at 25% 50%,rgba(156,39,176,.08) 0%,transparent 50%),
        radial-gradient(ellipse at 75% 40%,rgba(63,81,181,.06) 0%,transparent 45%),
        radial-gradient(ellipse at 50% 60%,rgba(233,30,99,.04) 0%,transparent 40%);
}

/* Shooting star */
.theme-space #spotlight::before{
    content:'';position:absolute;top:12%;right:-5%;width:3px;height:3px;
    border-radius:50%;background:#fff;pointer-events:none;z-index:5;
    box-shadow:0 0 4px 1px rgba(255,255,255,.8),10px 4px 8px 0 rgba(255,255,255,.3);
    animation:shootingStar 6s ease-in infinite;
}
@keyframes shootingStar{
    0%{transform:translate(0,0);opacity:0;}
    2%{opacity:1;}
    15%{transform:translate(-40vw,12vh);opacity:.8;}
    20%{opacity:0;}
    100%{opacity:0;}
}

/* Second shooting star on different timing */
.theme-space #spotlight::after{
    content:'';position:absolute;top:22%;right:10%;width:2px;height:2px;
    border-radius:50%;background:#fff;pointer-events:none;z-index:5;
    box-shadow:0 0 3px 1px rgba(200,200,255,.7),8px 3px 6px 0 rgba(200,200,255,.2);
    animation:shootingStar 10s ease-in 3s infinite;
}

/* Rotating Saturn */
.theme-space #bunting::before{
    content:'🪐';position:absolute;top:10px;right:10%;font-size:clamp(1.8rem,5vw,2.8rem);
    pointer-events:none;z-index:5;
    animation:saturnFloat 8s ease-in-out infinite;
    filter:drop-shadow(0 0 12px rgba(156,39,176,.4));
}
@keyframes saturnFloat{
    0%,100%{transform:translate(0,0) rotate(0deg);}
    50%{transform:translate(-10px,8px) rotate(8deg);}
}

/* Rising rocket */
.theme-space #bunting::after{
    content:'🚀';position:absolute;bottom:-100vh;right:25%;font-size:clamp(1.2rem,3.5vw,1.6rem);
    pointer-events:none;z-index:5;
    animation:rocketLaunch 12s ease-in infinite;
    filter:drop-shadow(0 0 8px rgba(255,152,0,.5));
}
@keyframes rocketLaunch{
    0%{transform:translateY(0) rotate(-10deg);opacity:0;}
    5%{opacity:.7;}
    80%{opacity:.6;}
    100%{transform:translateY(-120vh) rotate(-15deg);opacity:0;}
}

/* Earth in the corner */
.theme-space .bunting-string::before{
    content:'🌍';position:absolute;top:40vh;left:5%;font-size:clamp(1.6rem,4.5vw,2.4rem);
    pointer-events:none;z-index:3;opacity:.4;
    animation:earthGlow 5s ease-in-out infinite alternate;
}
@keyframes earthGlow{0%{filter:brightness(1) drop-shadow(0 0 5px rgba(33,150,243,.3));}100%{filter:brightness(1.2) drop-shadow(0 0 12px rgba(33,150,243,.5));}}

/* UFO */
.theme-space .bunting-string::after{
    content:'🛸';position:absolute;top:15vh;left:60%;font-size:clamp(1rem,3vw,1.4rem);
    pointer-events:none;z-index:4;
    animation:ufoHover 7s ease-in-out infinite;
}
@keyframes ufoHover{
    0%{transform:translate(0,0);opacity:.5;}
    25%{transform:translate(-30px,8px);opacity:.7;}
    50%{transform:translate(-15px,-5px);opacity:.3;}
    75%{transform:translate(20px,6px);opacity:.6;}
    100%{transform:translate(0,0);opacity:.5;}
}

/* ═══════════════════════════════════════════════════════
   ★ v15: WORD REPORT (END GAME)
   ═══════════════════════════════════════════════════════ */
#word-report{
    margin:10px 0 8px;
    background:linear-gradient(135deg,#f5f7ff,#fffde7);
    border:2px solid #e0e0e0;border-radius:14px;
    padding:10px;text-align:left;
    max-height:40vh;overflow-y:auto;
    -webkit-overflow-scrolling:touch;
}
.wr-header{
    font-family:'Bubblegum Sans',cursive;
    font-size:clamp(.85rem,2.5vw,1.05rem);
    color:#333;text-align:center;margin-bottom:4px;
}
.wr-stats{
    text-align:center;font-size:clamp(.65rem,1.8vw,.78rem);
    color:#666;margin-bottom:8px;
    padding-bottom:6px;border-bottom:1px dashed #ccc;
}
.wr-section-title{
    font-family:'Bubblegum Sans',cursive;
    font-size:clamp(.72rem,2.2vw,.88rem);
    color:#1565C0;margin:8px 0 4px;
    padding:3px 0;border-bottom:2px solid #BBDEFB;
}
.wr-pairs{display:flex;flex-direction:column;gap:3px;}
.wr-pair{
    display:flex;align-items:center;gap:5px;
    padding:3px 6px;border-radius:8px;
    font-size:clamp(.68rem,2vw,.82rem);
    background:rgba(255,255,255,.7);
}
.wr-pair.wr-missed{background:rgba(255,205,210,.3);}
.wr-icon{font-size:clamp(.6rem,1.6vw,.72rem);flex-shrink:0;}
.wr-target{font-weight:700;color:#333;text-transform:uppercase;}
.wr-arrow{color:#999;font-size:.7rem;flex-shrink:0;}
.wr-correct{font-weight:700;color:#2E7D32;text-transform:uppercase;}
.wr-pat{font-size:clamp(.5rem,1.3vw,.6rem);color:#888;margin-left:auto;}
.wr-sight{display:flex;flex-wrap:wrap;gap:4px;padding:4px 0;}
.wr-sw{
    display:inline-flex;align-items:center;gap:3px;
    background:rgba(255,255,255,.7);border:1px solid #e0e0e0;
    border-radius:8px;padding:3px 8px;
    font-size:clamp(.68rem,2vw,.82rem);font-weight:700;
    text-transform:uppercase;color:#333;
}
.wr-sw.wr-missed{background:rgba(255,205,210,.3);border-color:#ef9a9a;}
.wr-copy{
    display:block!important;width:100%;margin-top:10px;
    background:linear-gradient(135deg,#7E57C2,#5C6BC0)!important;
    box-shadow:0 3px 12px rgba(94,53,177,.3)!important;
    text-align:center;
}
/* Make end-ov scard scrollable for long reports */
#end-ov .scard{
    max-height:90vh;overflow-y:auto;
    -webkit-overflow-scrolling:touch;
}

/* ═══════ SAGA MAP — MISSING KEYFRAMES ═══════ */
@keyframes pulse { 0%{transform:scale(1);opacity:1;} 100%{transform:scale(1.4);opacity:0;} }
@keyframes bob { 0%,100%{transform:translate(-50%,-50%) translateY(0);} 50%{transform:translate(-50%,-50%) translateY(-10px);} }
@keyframes sway { 0%,100%{transform:translate(-50%,-50%) rotate(-5deg);} 50%{transform:translate(-50%,-50%) rotate(5deg);} }
@keyframes bounce { 0%,100%{transform:translate(-50%,-50%) scale(1.1);} 50%{transform:translate(-50%,-50%) scale(1.2);} }

/* ═══════ PREMIUM DASHBOARD UI ═══════ */
#dash-ov { display:flex; flex-direction:column; background:linear-gradient(180deg, #FFF8E1, #FFECB3); z-index:9999; position:fixed; inset:0; }
#dash-header { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:linear-gradient(135deg, #FF9800, #F57C00); color:#fff; box-shadow:0 4px 12px rgba(255,152,0,0.3); z-index:20; }
#profile-icon { position:relative; display:flex; align-items:center; justify-content:center; width:45px; height:45px; }
.profile-circle { width:100%; height:100%; background:#fff; border-radius:50%; font-size:1.6rem; display:flex; align-items:center; justify-content:center; border:2px solid #FFE0B2; box-shadow:0 2px 8px rgba(0,0,0,0.2); }
.profile-badge { position:absolute; bottom:-6px; background:#D84315; color:#fff; font-size:0.65rem; font-weight:700; padding:2px 6px; border-radius:10px; border:2px solid #fff; white-space:nowrap; box-shadow:0 2px 4px rgba(0,0,0,0.2); }
.dash-title { font-family:'Bubblegum Sans',cursive; font-size:1.8rem; font-weight:400; text-shadow:1px 1px 2px rgba(0,0,0,0.2); }
.btn-icon { width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,0.2); border:1px solid rgba(255,255,255,0.4); color:#fff; font-weight:700; font-size:1rem; cursor:pointer; }
#dash-prog { background:#FFE0B2; padding:12px 20px; text-align:center; z-index:15; box-shadow:0 2px 8px rgba(0,0,0,0.1); }
.prog-track { background:#fff; height:14px; border-radius:10px; border:2px solid #FFB74D; overflow:hidden; box-shadow:inset 0 2px 4px rgba(0,0,0,0.1); }
#dp-fill { background:linear-gradient(90deg, #66BB6A, #4CAF50); height:100%; transition:width 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
#dp-text { font-size:0.85rem; color:#E65100; font-weight:700; margin-top:6px; letter-spacing:0.5px; }
#path-scroll { flex:1; overflow-y:auto; overflow-x:hidden; position:relative; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; }
#path-container { position:relative; width:100%; overflow:hidden; }
#saga-fab { position:absolute; bottom:100px; right:20px; z-index:100; background:linear-gradient(135deg, #FFCA28, #FF8F00); color:#fff; border:2px solid #fff; padding:10px 18px; border-radius:30px; font-family:'Bubblegum Sans',cursive; font-size:0.95rem; font-weight:700; box-shadow:0 4px 15px rgba(255,143,0,0.4); display:flex; align-items:center; gap:6px; cursor:pointer; transition:transform 0.2s; }
#saga-fab:active { transform:scale(0.95); }
/* ═══════════════════════════════════════════
   PREMIUM 3D JUICY PLAY-MODE BUTTONS
   Child Psychology · Candy UI · No Emojis
═══════════════════════════════════════════ */
#dash-footer {
  background: linear-gradient(180deg,#fff 0%,#FFFDE7 100%);
  padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 24px rgba(0,0,0,0.10);
  z-index: 20;
  flex-shrink: 0;
}
#play-modes {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

/* ── Wrapper needed for the notification badge ── */
.pm-wrap {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* ── Core 3D Candy Button ── */
.pm-btn {
  position: relative;
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 14px 6px 12px;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-family: 'Bubblegum Sans', cursive;
  /* 3D candy lift: top highlight + bottom shadow trick */
  transform: translateY(0px);
  transition: transform 0.10s cubic-bezier(.34,1.56,.64,1),
              box-shadow 0.10s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  overflow: visible;
}
/* Squish press animation */
.pm-btn:active {
  transform: translateY(5px) scale(0.97);
}

/* ── ALL WORDS — Golden Treasure ── */
.mode-all {
  background: linear-gradient(170deg, #FFF9C4 0%, #FFD54F 55%, #FFAB00 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 7px 0 #E65100,
    0 9px 18px rgba(230,81,0,0.35);
  color: #6D3200;
}
.mode-all:active {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 2px 0 #E65100,
    0 3px 8px rgba(230,81,0,0.25);
}

/* ── FIX MISTAKES — Coral Healing ── */
.mode-red {
  background: linear-gradient(170deg, #FFE0B2 0%, #FF8A65 55%, #E64A19 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 7px 0 #BF360C,
    0 9px 18px rgba(191,54,12,0.35);
  color: #fff;
}
.mode-red:active {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.5) inset,
    0 2px 0 #BF360C,
    0 3px 8px rgba(191,54,12,0.25);
}

/* ── REVISION — Sky Star ── */
.mode-blue {
  background: linear-gradient(170deg, #E1F5FE 0%, #4FC3F7 55%, #0288D1 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 7px 0 #01579B,
    0 9px 18px rgba(1,87,155,0.35);
  color: #fff;
}
.mode-blue:active {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.5) inset,
    0 2px 0 #01579B,
    0 3px 8px rgba(1,87,155,0.25);
}

/* ── Inner gloss sheen ── */
.pm-btn::before {
  content: '';
  position: absolute;
  inset: 2px 4px auto 4px;
  height: 42%;
  border-radius: 16px 16px 50% 50%;
  background: rgba(255,255,255,0.38);
  pointer-events: none;
}

/* ── SVG Icon container ── */
.pm-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.18));
  transition: transform 0.10s ease;
}
.pm-btn:active .pm-icon { transform: scale(0.88); }

/* ── Label ── */
.pm-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1.1;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.mode-all .pm-label { color: #5D2E00; }

/* ════════════════════════════════════════
   NOTIFICATION BADGE (Fix Mistakes)
════════════════════════════════════════ */
.pm-notif-badge {
  position: absolute;
  top: -6px;
  right: -4px;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  background: #F44336;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 900;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2.5px solid #fff;
  box-shadow: 0 2px 8px rgba(244,67,54,0.55);
  animation: badgeFloat 2.2s ease-in-out infinite;
  z-index: 30;
  pointer-events: none;
}
@keyframes badgeFloat {
  0%,100% { transform: translateY(0) scale(1); box-shadow: 0 2px 8px rgba(244,67,54,0.55); }
  45%     { transform: translateY(-4px) scale(1.08); box-shadow: 0 6px 14px rgba(244,67,54,0.7); }
}

/* ════════════════════════════════════════
   SVG ICON ANIMATIONS
════════════════════════════════════════ */
/* Treasure lid bounce */
@keyframes chestLidBounce {
  0%,100% { transform: rotate(0deg); }
  50%     { transform: rotate(-12deg) translateY(-2px); }
}
.chest-lid { transform-origin: 50% 100%; animation: chestLidBounce 3.5s ease-in-out infinite; }

/* Band-aid shimmer */
@keyframes bandaidShimmer {
  0%,100% { opacity:1; }
  50%     { opacity:0.7; }
}
.bandaid-shine { animation: bandaidShimmer 2s ease-in-out infinite; }

/* Star spin sparkle */
@keyframes starPulse {
  0%,100% { transform: scale(1) rotate(0deg); }
  50%     { transform: scale(1.15) rotate(15deg); }
}
.star-icon { transform-origin: center; animation: starPulse 2.8s ease-in-out infinite; }
@keyframes orbitDot {
  0%   { transform: rotate(0deg)   translateX(13px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(13px) rotate(-360deg); }
}
.orbit-dot { transform-origin: center; animation: orbitDot 2.2s linear infinite; }

/* ★ CRITICAL BUG FIX: Force hide dashboard when game starts ★ */
/* ★★★ BULLETPROOF SAGA MAP FIX ★★★
   NEVER display:none — it destroys the layout tree and makes the road vanish.
   visibility:hidden keeps path-scroll dimensions alive so SVG road stays correct. */
#dash-ov.hidden {
    visibility:     hidden  !important;
    opacity:        0       !important;
    pointer-events: none    !important;
    z-index:        -1      !important;
    display:        flex    !important; /* Never remove from layout tree */
    transform:      scale(0.98);
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
#dash-ov:not(.hidden) {
    visibility:     visible;
    opacity:        1;
    pointer-events: auto;
    z-index:        9999;
    transform:      scale(1);
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

/* ══════════════════════════════════════════════════════════════
   PREMIUM REVIEW PANEL  ·  Slide-up Bottom Sheet
   Child Psychology · Duolingo/Lingokids · Clean Rows · Gold Words
══════════════════════════════════════════════════════════════ */

/* ── Blurred backdrop ── */
#rp-backdrop {
  position: fixed; inset: 0; z-index: 9990;
  background: rgba(20, 10, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.38s ease;
}
#rp-backdrop.rp-vis { opacity: 1; pointer-events: auto; }

/* ── Sheet container ── */
#review-panel {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 91dvh;
  z-index: 9999;
  display: flex !important;        /* NEVER display:none — kills CSS transitions */
  flex-direction: column;
  background: #FFFFFF;
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -10px 48px rgba(0,0,0,0.20);
  /* Default: sheet sits entirely below viewport */
  transform: translateY(110%);
  transition: transform 0.44s cubic-bezier(0.32,0.72,0,1);
  overflow: hidden;
  will-change: transform;
  /* Invisible until opened — avoids any paint while off-screen */
  visibility: hidden;
}
/* Visible + slid up — added by JS */
#review-panel.rp-open {
  transform: translateY(0);
  visibility: visible;
}
/* "Closed" state — pointer disabled, hidden, off-screen */
#review-panel.hidden {
  transform: translateY(110%);
  visibility: hidden;
  pointer-events: none;
}

/* ── Drag handle pill ── */
#rp-handle {
  flex-shrink: 0;
  display: flex; justify-content: center;
  padding: 10px 0 2px;
  cursor: grab;
}
#rp-handle-bar {
  width: 38px; height: 4px;
  border-radius: 2px;
  background: #E0E0E0;
}

/* ── Header row ── */
#rp-header {
  flex-shrink: 0;
  position: relative;             /* anchor for absolute close button */
  display: flex; align-items: center;
  padding: 4px 50px 12px 14px;   /* right padding reserves space for close btn */
}
#rp-title {
  flex: 1; text-align: center;
  font-family: 'Bubblegum Sans', cursive;
  font-size: 1.18rem; color: #1A1A2E;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#rp-badge {
  flex-shrink: 0;
  background: #FFF8E1; color: #E65100;
  font-size: 0.7rem; font-weight: 800;
  padding: 4px 10px; border-radius: 20px;
  border: 1.5px solid #FFE082;
  white-space: nowrap;
  margin-right: 6px;
}

/* ── Premium circular ✕ close button (top-right) ── */
#rp-close {
  position: absolute;
  top: 2px; right: 14px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #F0F0F0;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, transform 0.12s cubic-bezier(.34,1.56,.64,1);
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
  z-index: 2;
}
#rp-close:active { background: #E0E0E0; transform: scale(0.84); }
/* CSS-drawn ✕ — no emoji, clean and sharp */
#rp-close::before,
#rp-close::after {
  content: '';
  position: absolute;
  width: 13px; height: 2px;
  background: #888;
  border-radius: 1px;
}
#rp-close::before { transform: rotate(45deg); }
#rp-close::after  { transform: rotate(-45deg); }

/* ── Mode pill bar ── */
#rp-mode-bar {
  flex-shrink: 0;
  display: flex; justify-content: center;
  padding: 0 16px 10px;
}
.rp-mode-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 16px; border-radius: 20px;
  font-size: 0.8rem; font-weight: 800; letter-spacing: 0.2px;
}
.rp-pill-normal, .rp-pill-allwords { background:#FFF3E0; color:#BF360C; border:1.5px solid #FFCC80; }
.rp-pill-mistakes { background:#FFF0EE; color:#C62828; border:1.5px solid #FFCDD2; }
.rp-pill-revision { background:#EEF6FF; color:#1565C0; border:1.5px solid #BBDEFB; }

/* ══════════════════════════════════════════════════════════════
   SCROLLABLE WORD LIST
══════════════════════════════════════════════════════════════ */
#rp-list-container {
  flex: 1; overflow-y: auto;
  background: #fff;
  -webkit-overflow-scrolling: touch;
  /* Thin scrollbar */
  scrollbar-width: thin;
  scrollbar-color: #E0E0E0 transparent;
}

/* ── Sticky lesson group header ── */
.rp-lesson-hdr {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 16px;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(4px);
  border-top: 1px solid #F0F0F0;
  border-bottom: 1px solid #F0F0F0;
}
.rp-hdr-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
}
.rp-hdr-name {
  font-size: 0.73rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 1px; color: #999;
}
.rp-hdr-count {
  margin-left: auto;
  font-size: 0.65rem; font-weight: 700; color: #C8C8C8;
  background: #F7F7F7; padding: 2px 8px; border-radius: 10px;
}

/* ── One clean row per word/sentence ── */
.rp-row {
  display: flex; align-items: center;
  padding: 11px 16px; gap: 14px;
  border-bottom: 1px solid rgba(0,0,0,0.042);
  background: #fff;
  cursor: pointer;
  transition: background 0.14s;
  -webkit-tap-highlight-color: transparent;
}
.rp-row:active { background: #FAFAFA; }
.rp-row:last-child { border-bottom: none; }

/* SVG play button — chunky circle, squishes on press */
.rp-play-btn {
  flex-shrink: 0;
  width: 40px; height: 40px;
  background: transparent; border: none; padding: 0;
  cursor: pointer; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.12s cubic-bezier(.34,1.56,.64,1);
  -webkit-tap-highlight-color: transparent;
}
.rp-play-btn:active { transform: scale(0.78); }

/* Word/sentence text */
.rp-word-text {
  flex: 1; color: #2C2C3E;
  font-size: 1.05rem; font-weight: 700;
  letter-spacing: 0.4px; line-height: 1.35;
  word-break: break-word;
}
.rp-word-text.is-word { text-transform: uppercase; font-size: 1.08rem; }
.rp-word-text.is-sent { font-size: 0.9rem; font-weight: 600; color: #444; }

/* ★ MASTERED ROW — Gold Visual Reward ★ */
.rp-row.rp-mastered { background: linear-gradient(90deg, #FFFDE7 0%, #fff 60%); }
.rp-row.rp-mastered .rp-word-text {
  color: #C17900;
  text-shadow: 0 0 12px rgba(255, 193, 7, 0.4);
  font-weight: 800;
}
/* Gold star badge on mastered rows */
.rp-gold-star {
  flex-shrink: 0;
  width: 18px; height: 18px;
  filter: drop-shadow(0 0 4px rgba(255,193,7,0.7));
}

/* ── Empty / ready state ── */
.rp-empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 52px 24px; gap: 10px; text-align: center;
  min-height: 200px;
}
.rp-empty-icon { font-size: 3.6rem; line-height: 1; }
.rp-empty-title {
  font-family: 'Bubblegum Sans', cursive;
  font-size: 1.35rem; color: #E65100; margin-top: 4px;
}
.rp-empty-sub { font-size: 0.88rem; color: #AAA; line-height: 1.55; }

/* ══════════════════════════════════════════════════════════════
   FOOTER — 3D CANDY PLAY BUTTON
══════════════════════════════════════════════════════════════ */
#rp-footer {
  flex-shrink: 0;
  padding: 12px 18px calc(18px + env(safe-area-inset-bottom));
  background: #fff;
  box-shadow: 0 -5px 22px rgba(0,0,0,0.07);
}
#rp-play-btn {
  position: relative;
  width: 100%; padding: 17px 20px;
  border: none; border-radius: 22px; cursor: pointer;
  font-family: 'Bubblegum Sans', cursive;
  font-size: 1.28rem; font-weight: 400; letter-spacing: 0.5px;
  color: #5A2700;
  background: linear-gradient(170deg, #FFE57F 0%, #FFD600 40%, #FF9800 100%);
  /* 3D bottom wall */
  box-shadow:
    0 1px 0 rgba(255,255,255,0.55) inset,
    0 6px 0 #C76D00,
    0 9px 22px rgba(199,109,0,0.40);
  transform: translateY(0);
  transition: transform 0.1s cubic-bezier(.34,1.56,.64,1), box-shadow 0.1s ease;
  animation: rpCtaPulse 2.6s ease-in-out infinite;
  -webkit-tap-highlight-color: transparent;
}
/* Inner gloss sheen */
#rp-play-btn::before {
  content: '';
  position: absolute; inset: 2px 10px auto 10px; height: 45%;
  border-radius: 16px 16px 50% 50%;
  background: rgba(255,255,255,0.30);
  pointer-events: none;
}
#rp-play-btn:active {
  transform: translateY(5px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.45) inset,
    0 1px 0 #C76D00,
    0 2px 8px rgba(199,109,0,0.22);
  animation: none;
}
@keyframes rpCtaPulse {
  0%,100% { transform:translateY(0);   box-shadow:0 1px 0 rgba(255,255,255,.55) inset, 0 6px 0 #C76D00, 0 9px 22px rgba(199,109,0,.40); }
  50%     { transform:translateY(-3px); box-shadow:0 1px 0 rgba(255,255,255,.55) inset, 0 9px 0 #C76D00, 0 13px 30px rgba(199,109,0,.55); }
}

/* ══════════════════════════════════════════════════════
   ★ FIX 2: One-by-one Star Pop Animation
   Each ⭐ flies in with a springy scale: 0 → 1.3 → 1
   Staggered via JS setTimeout, CSS handles the motion.
══════════════════════════════════════════════════════ */
@keyframes starPop {
  0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
  55%  { transform: scale(1.35) rotate(8deg); opacity: 1; }
  75%  { transform: scale(0.88) rotate(-4deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.star-pop {
  display: inline-block;
  font-size: 1.5em;
  animation: starPop 0.48s cubic-bezier(0.34,1.56,0.64,1) both;
  transform-origin: center;
}

/* ══════════════════════════════════════════════════════
   ★ FIX 3: Low-Health Danger Pulse
   When lives === 1, #lives-box gets this class.
   Heart pulses + warm red glow to build urgency.
══════════════════════════════════════════════════════ */
@keyframes dangerPulse {
  0%,100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0px rgba(255,50,50,0));
  }
  45% {
    transform: scale(1.18);
    filter: drop-shadow(0 0 6px rgba(255,50,50,0.85));
  }
}
#lives-box.danger-pulse {
  animation: dangerPulse 0.75s ease-in-out infinite;
  border-radius: 20px;
}

/* ══════════════════════════════════════════════════════════════════════
   ★ FEATURE 2 — TIME ATTACK FUSE BAR
   Appears below hud-bar when question is live.
   Green → Yellow → Red as time drains.
   .ta-active  = visible and counting
   .ta-danger  = last 2s — red pulse
══════════════════════════════════════════════════════════════════════ */
#time-fuse {
    display: none;
    position: fixed;
    bottom: 85px;        /* safely above bottom game controls, away from q-box */
    left: 50%;
    transform: translateX(-50%);
    width: 85%;
    max-width: 320px;
    z-index: 500;
    padding: 6px 14px 8px;
    background: rgba(20, 10, 40, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 16px;
    align-items: center;
    gap: 10px;
    pointer-events: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    border: 2px solid rgba(255,255,255,0.15);
}
#time-fuse.ta-active { display: flex; }

.ta-label {
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: 'Bubblegum Sans', sans-serif;
    min-width: 36px;
    text-align: center;
    flex-shrink: 0;
}

.ta-track {
    flex: 1;
    height: 10px;
    background: rgba(255,255,255,0.18);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}

.ta-fill {
    height: 100%;
    width: 100%;
    border-radius: 6px;
    background: linear-gradient(90deg, #69F0AE, #FFD740, #FF5252);
    background-size: 300% 100%;
    background-position: 0% 50%;
    /* width transition is set inline by JS */
    box-shadow: 0 0 8px rgba(105,240,174,0.6);
}

/* Last 2 seconds — danger pulse */
#time-fuse.ta-danger .ta-fill {
    background: linear-gradient(90deg, #FF5252, #FF1744);
    box-shadow: 0 0 12px rgba(255,82,82,0.85);
    animation: fuseDanger 0.35s ease-in-out infinite alternate;
}
#time-fuse.ta-danger .ta-label {
    color: #FF5252;
    animation: fuseDanger 0.35s ease-in-out infinite alternate;
}

@keyframes fuseDanger {
    0%   { opacity: 1;   transform: scale(1); }
    100% { opacity: 0.7; transform: scale(1.04); }
}

/* Chair glow when bot steals it */
.chair-slot.bot-stolen .chair-art {
    filter: drop-shadow(0 0 14px #FF1744) brightness(1.4);
    animation: botStealFlash 0.2s ease-in-out 3;
}
@keyframes botStealFlash {
    0%,100% { filter: drop-shadow(0 0 4px #FF1744); }
    50%     { filter: drop-shadow(0 0 18px #FF1744) brightness(1.6); }
}

/* ══════════════════════════════════════════════════════════════════════
   ★ FEATURE 1 — COURSE-LOCKED NODE
   Grey gradient, muted, 🔒 icon — distinct from saga-locked (🔒 peeking)
══════════════════════════════════════════════════════════════════════ */
.dnode.course-locked {
    cursor: not-allowed !important;
    filter: grayscale(0.6);
}
.dnode.course-locked:active {
    transform: scale(0.93) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   ★ FEATURE 1 — PROGRESSION LOCK POPUP
   Full-screen backdrop + centred card, slides up with spring
══════════════════════════════════════════════════════════════════════ */
#lock-popup {
    position: fixed;
    inset: 0;
    z-index: 99998;
    background: rgba(10, 5, 30, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}
#lock-popup.lp-in  { opacity: 1;  pointer-events: auto; }
#lock-popup.lp-out { opacity: 0;  pointer-events: none; }

.lp-card {
    background: linear-gradient(145deg, #1a1040, #2d1b69);
    border: 2px solid rgba(255,215,0,0.35);
    border-radius: 24px;
    padding: 32px 28px 28px;
    text-align: center;
    max-width: min(88vw, 340px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.6), 0 0 40px rgba(100,60,220,0.3);
    transform: translateY(24px) scale(0.95);
    transition: transform 0.32s cubic-bezier(0.34,1.56,0.64,1);
}
#lock-popup.lp-in .lp-card {
    transform: translateY(0) scale(1);
}

.lp-lock-icon {
    font-size: 3rem;
    margin-bottom: 10px;
    animation: lockBounce 0.6s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes lockBounce {
    0%   { transform: scale(0) rotate(-15deg); }
    60%  { transform: scale(1.25) rotate(8deg); }
    100% { transform: scale(1) rotate(0deg); }
}

.lp-title {
    font-family: 'Bubblegum Sans', sans-serif;
    font-size: 1.35rem;
    color: #FFD700;
    margin: 0 0 12px;
}

.lp-body {
    font-size: 0.92rem;
    color: #e0d8ff;
    line-height: 1.55;
    margin: 0 0 10px;
}
.lp-body strong { color: #FFD740; }

.lp-hint {
    font-size: 0.75rem;
    color: #9e93c8;
    margin: 0 0 22px;
}

.lp-btn {
    display: inline-block;
    padding: 13px 32px;
    background: linear-gradient(135deg, #7C4DFF, #651FFF);
    border: none;
    border-radius: 50px;
    color: #fff;
    font-family: 'Bubblegum Sans', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 0 #4527A0, 0 6px 20px rgba(124,77,255,0.5);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.lp-btn:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #4527A0, 0 2px 8px rgba(124,77,255,0.4);
}

/* ══════════════════════════════════════════════════════════════════════
   ★ FEATURE 1 — LIGHTS OUT (Memory Mode, Level 100+)
   .memory-hide: words vanish with a springy pop-out transition
══════════════════════════════════════════════════════════════════════ */
.ch-word.memory-hide {
    opacity: 0 !important;
    transform: scale(0) !important;
    transition: opacity 0.3s cubic-bezier(0.34,1.56,0.64,1),
                transform 0.3s cubic-bezier(0.34,1.56,0.64,1) !important;
    pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════════
   ★ FEATURE 2 — COMBO STREAK FLYTEXT
   Large floating fire badge, rockets upward and fades out
   Gradient: red → gold for dopamine pop
══════════════════════════════════════════════════════════════════════ */
.combo-fly {
    position: fixed;
    left: 50%;
    top: 42%;
    transform: translateX(-50%) scale(0);
    z-index: 9990;
    pointer-events: none;
    font-family: 'Bubblegum Sans', sans-serif;
    font-size: clamp(1.6rem, 6vw, 2.4rem);
    font-weight: 900;
    color: #fff;
    background: linear-gradient(135deg, #FF1744, #FF6D00, #FFD600);
    padding: 10px 22px;
    border-radius: 50px;
    white-space: nowrap;
    box-shadow: 0 6px 28px rgba(255,23,68,0.65), 0 0 0 3px rgba(255,255,255,0.25);
    text-shadow: 0 2px 6px rgba(0,0,0,0.35);
    animation: comboFly 1.35s cubic-bezier(0.22,1,0.36,1) forwards;
}

@keyframes comboFly {
    0%   { transform: translateX(-50%) scale(0) translateY(0px);   opacity: 0; }
    18%  { transform: translateX(-50%) scale(1.25) translateY(0px); opacity: 1; }
    55%  { transform: translateX(-50%) scale(1) translateY(-18px);  opacity: 1; }
    100% { transform: translateX(-50%) scale(0.8) translateY(-60px);opacity: 0; }
}