/* ── COUNTDOWN OVERLAY ── */
#countdownOverlay{display:none;position:fixed;inset:0;z-index:550;align-items:center;justify-content:center;background:rgba(180,210,240,0.6);backdrop-filter:blur(4px);}
.countdown-num{font-size:18rem;font-weight:800;color:white;text-shadow:0 8px 0 rgba(0,0,0,.1);animation:popIn .5s cubic-bezier(.34,1.56,.64,1);}

/* ── WIND OVERLAY ── */
#windOverlay{display:none;position:fixed;inset:0;z-index:500;pointer-events:none;background:rgba(180,210,240,0);}

/* ── TIMER BAR ── */
#timerBar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:490;pointer-events:none;padding:6px clamp(24px,6vw,48px) 10px;background:rgba(255,255,255,0.7);backdrop-filter:blur(4px);transition:background .5s;}
#timerBar.urgent{background:rgba(255,220,220,0.85);}
.tb-row{display:flex;align-items:center;gap:10px;}
.tb-label{font-size:.75rem;font-weight:700;color:var(--text);opacity:.6;white-space:nowrap;flex-shrink:0;}
.tb-track{flex:1;height:8px;background:rgba(0,0,0,.08);border-radius:99px;overflow:hidden;}
.tb-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#66bb6a,#a5d6a7);transition:width 1s linear,background .5s;}
.tb-time{font-size:.75rem;font-weight:700;color:var(--text);opacity:.55;white-space:nowrap;flex-shrink:0;min-width:36px;text-align:right;}

/* ── HOLD BUTTON ── */
.hbtn{position:relative;overflow:hidden;background:white;border:2px solid rgba(220,50,50,.25);border-radius:50px;padding:8px 18px;font-size:.88rem;font-weight:800;color:#c62828;cursor:pointer;box-shadow:0 2px 8px var(--shadow);font-family:'Baloo 2',cursive;-webkit-tap-highlight-color:transparent;flex-shrink:0;user-select:none;letter-spacing:.3px;}
.hbtn .hf{position:absolute;top:0;left:0;bottom:0;width:0%;background:#ef5350;border-radius:50px;pointer-events:none;opacity:.35;}
.hbtn span{position:relative;z-index:1;}
.hbtn-dark{background:rgba(239,83,80,.25);backdrop-filter:blur(8px);color:white;box-shadow:0 2px 10px rgba(0,0,0,.2);border-color:rgba(239,83,80,.45);}
.hbtn-dark .hf{background:rgba(239,83,80,.7);}
.tbar{display:flex;align-items:center;width:100%;gap:10px;}
.abs-back{position:absolute;top:16px;left:16px;z-index:100;}

/* ── TAP PRE-GLOW ── */
#tapPreGlow{position:absolute;top:50%;left:50%;width:0;height:0;pointer-events:none;transition:opacity .7s;}
#tapPreGlow .pgdot{position:absolute;font-size:1.8rem;line-height:1;animation:pgPulse var(--dur) ease-in-out infinite;animation-delay:var(--del);animation-direction:alternate;}

/* ── TAP MAGIC ── */
#tapScreen{display:none;position:fixed;inset:0;z-index:10;background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460);cursor:crosshair;overflow:hidden;}
.tap-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.4rem;font-weight:800;color:rgba(255,255,255,.3);text-align:center;pointer-events:none;transition:opacity .5s;}
.spark{position:absolute;pointer-events:none;border-radius:50%;animation:sparkAnim ease-out forwards;}

.tapring{position:absolute;pointer-events:none;border-radius:50%;border:3px solid currentColor;transform:translate(-50%,-50%) scale(0);animation:ringExp .6s ease-out forwards;}

.tapglow{position:absolute;pointer-events:none;border-radius:50%;filter:blur(18px);animation:glowRipple .9s ease-out forwards;}

.tapem{position:absolute;pointer-events:none;font-size:2rem;transform:translate(-50%,-50%);animation:emFloat 1.2s ease-out forwards;}

/* ── PAINT ── */
#paintScreen{display:none;position:fixed;inset:0;z-index:10;background:#fff8f0;overflow:hidden;flex-direction:column;}
.paint-top{position:fixed;top:0;left:0;right:0;z-index:20;height:64px;display:flex;align-items:center;padding:0 12px;gap:10px;background:rgba(255,248,240,.97);backdrop-filter:blur(6px);border-bottom:2px solid rgba(0,0,0,.07);}
.paint-bottom{position:fixed;bottom:0;left:0;right:0;z-index:20;padding:8px 14px 10px;background:rgba(255,248,240,.97);backdrop-filter:blur(6px);border-top:2px solid rgba(0,0,0,.07);}
.pcols{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;max-width:480px;margin:0 auto;}
@media(orientation:landscape){.pcols{grid-template-columns:repeat(12,1fr);max-width:none;gap:4px;}.paint-bottom{padding:5px 14px 6px;}}
.pswatch{aspect-ratio:1;width:100%;border-radius:50%;border:3px solid white;box-shadow:0 2px 8px rgba(0,0,0,.18);cursor:pointer;transition:transform .15s;-webkit-tap-highlight-color:transparent;position:relative;max-width:52px;justify-self:center;}
@media(orientation:landscape){.pswatch{max-width:36px;border-width:2px;}}
.pswatch::after{content:'';position:absolute;inset:-8px;border-radius:50%;}
.pswatch.active{box-shadow:0 0 0 4px #444,0 2px 10px rgba(0,0,0,.3);transform:scale(1.12);}
.pclr{background:white;border:2px solid #ddd;border-radius:50px;padding:9px 16px;font-size:.88rem;font-weight:700;color:var(--text);cursor:pointer;font-family:'Baloo 2',cursive;flex-shrink:0;}
.psave{background:#66bb6a;border:none;border-radius:50px;padding:9px 16px;font-size:.88rem;font-weight:700;color:white;cursor:pointer;font-family:'Baloo 2',cursive;flex-shrink:0;}
#paintCanvas{position:fixed;top:64px;left:0;touch-action:none;}

/* ── POP IT ── */
#popScreen{display:none;position:fixed;inset:0;z-index:10;background:linear-gradient(160deg,#f8e1f4,#e8d5f0,#d4e8f8);overflow:hidden;flex-direction:column;align-items:center;justify-content:center;}
.pit-title{font-size:1.8rem;font-weight:900;color:#6a3d7c;margin-bottom:10px;letter-spacing:-.5px;}
.pit-subtitle{font-size:.82rem;font-weight:700;color:#b39dbc;margin-top:-6px;margin-bottom:14px;}
.pit-card{background:white;border-radius:32px;padding:clamp(10px,3vw,16px);box-shadow:0 8px 32px rgba(0,0,0,.12);width:min(88vw,min(88vh,340px));}
.pit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.pit-bub{aspect-ratio:1;border-radius:50%;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s,box-shadow .12s;box-shadow:0 5px 0 rgba(0,0,0,.14),0 2px 10px rgba(0,0,0,.09);position:relative;}
.pit-bub:not(.pit-popped):active{transform:scale(.88);}
.pit-bub.pit-popped{box-shadow:inset 0 5px 14px rgba(0,0,0,.22),0 1px 2px rgba(0,0,0,.06);filter:brightness(.82) saturate(.65);transform:scale(.96);cursor:default;}

.pit-card.celebrate{animation:pitCeleb .35s ease-in-out;}

/* ── BALLOONS ── */
#balloonScreen{display:none;position:fixed;inset:0;z-index:10;overflow:hidden;background:url('../Images/GameAssets/Balloons/Background.png') center/cover no-repeat;}
.bal-score{position:absolute;top:16px;right:16px;font-size:1rem;font-weight:900;color:white;text-shadow:0 2px 8px rgba(0,0,0,.35);z-index:20;background:rgba(0,0,0,.22);border-radius:50px;padding:8px 16px;line-height:1;}
.balloon-el{position:absolute;cursor:pointer;-webkit-tap-highlight-color:transparent;z-index:10;animation:balFloat ease-in-out forwards;animation-duration:var(--dur);}


.balloon-el.bal-pop{animation:balPop .32s ease-out forwards!important;}

.bal-burst{position:absolute;pointer-events:none;width:12px;height:12px;border-radius:50%;animation:balBurst .5s ease-out forwards;z-index:30;}

/* ── SOUNDS — revamped ── */
#soundsScreen{display:none;position:fixed;inset:0;z-index:10;background:linear-gradient(160deg,#0d0d1a,#1a0a2e,#0d1a2e);overflow:visible;flex-direction:column;align-items:stretch;justify-content:flex-start;}
.sounds-nav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:25;background:rgba(0,0,0,.55);backdrop-filter:blur(12px);border-top:1px solid rgba(255,255,255,.08);height:72px;}
.snav-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:none;border:none;cursor:pointer;font-family:'Baloo 2',cursive;-webkit-tap-highlight-color:transparent;transition:background .2s;position:relative;}
.snav-btn.active{background:rgba(255,255,255,.07);}
.snav-btn.active::before{content:'';position:absolute;top:0;left:10%;right:10%;height:3px;background:var(--snav-accent,white);border-radius:0 0 4px 4px;}
.snav-icon{font-size:1.8rem;line-height:1;}
.snav-lbl{font-size:.65rem;font-weight:800;color:rgba(255,255,255,.55);letter-spacing:.5px;text-transform:uppercase;}
.snav-btn.active .snav-lbl{color:white;}
.sounds-panel{position:absolute;inset:0;bottom:72px;display:none;flex-direction:column;align-items:center;justify-content:center;padding:clamp(8px,2vw,16px);padding-top:clamp(48px,8vw,64px);}
.sounds-panel.active{display:flex;}
/* drum grid */
.dgrid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:auto auto;gap:clamp(8px,2vw,14px);width:100%;max-width:520px;}
.dpad{border-radius:clamp(18px,4vw,28px);border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-family:'Baloo 2',cursive;-webkit-tap-highlight-color:transparent;user-select:none;box-shadow:0 6px 0 rgba(0,0,0,.45),0 4px 20px rgba(0,0,0,.4);transition:transform .07s,box-shadow .07s,filter .07s;aspect-ratio:1;}
.dpad.wide{grid-column:span 2;aspect-ratio:2/1;}
.dpad.hit{transform:translateY(4px) scale(.95);box-shadow:0 2px 0 rgba(0,0,0,.45);filter:brightness(1.3);}
.dem{font-size:clamp(1.8rem,5vw,2.8rem);line-height:1;pointer-events:none;}
.dlbl{font-size:clamp(.65rem,1.8vw,.9rem);font-weight:800;color:rgba(255,255,255,.9);pointer-events:none;}
/* fluid pads */
.fluid-grid{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(4,1fr);gap:clamp(8px,2vw,14px);width:100%;max-width:460px;height:100%;}
.fpad{border-radius:clamp(20px,5vw,36px);border:2px solid rgba(255,255,255,.15);cursor:pointer;font-family:'Baloo 2',cursive;-webkit-tap-highlight-color:transparent;user-select:none;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;transition:filter .1s,transform .1s;}
.fpad:active{filter:brightness(1.4);transform:scale(.96);}
.fpad-ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.4);transform:scale(0);animation:fluidRipple .7s ease-out forwards;pointer-events:none;}

.fpad-inner{display:flex;flex-direction:column;align-items:center;gap:4px;position:relative;z-index:1;pointer-events:none;}
.fpad-icon{font-size:clamp(1.6rem,4vw,2.2rem);}
.fpad-label{font-size:clamp(.7rem,2vw,.95rem);font-weight:800;color:rgba(255,255,255,.95);letter-spacing:.5px;}
/* animal pads */
.agrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,2.5vw,16px);width:100%;max-width:480px;}
.apad{border-radius:clamp(20px,5vw,32px);border:none;cursor:pointer;font-family:'Baloo 2',cursive;-webkit-tap-highlight-color:transparent;user-select:none;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;box-shadow:0 6px 0 rgba(0,0,0,.4),0 4px 16px rgba(0,0,0,.35);transition:transform .1s,box-shadow .1s;}
.apad.hit{transform:translateY(4px) scale(.93);box-shadow:0 2px 0 rgba(0,0,0,.4);}
.apad-emoji{font-size:clamp(2rem,6vw,3rem);pointer-events:none;filter:drop-shadow(0 3px 6px rgba(0,0,0,.3));}
.apad-lbl{font-size:clamp(.7rem,2vw,.88rem);font-weight:800;color:rgba(255,255,255,.92);pointer-events:none;}

.spark{position:absolute;width:10px;height:10px;border-radius:50%;pointer-events:none;animation:sparklePop .55s ease-out forwards;}

/* ── PHONICS FLIP GRID ── */
#phonicsScreen{display:none;position:fixed;inset:0;z-index:10;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;padding:68px 16px 48px;gap:16px;background:url('../Images/GameAssets/Phonics/Background.png') center/cover no-repeat;}
/* 3-column grid, 2 rows of 6 cards */
#phcard{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(7px,2vw,12px);width:100%;max-width:440px;}
/* flip wrapper — perspective + 5:6 portrait ratio */
.ph-flip-wrap{aspect-ratio:5/6;cursor:pointer;-webkit-tap-highlight-color:transparent;perspective:900px;}
/* the card — 3D container */
.ph-flip-card{width:100%;height:100%;position:relative;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transition:transform .55s cubic-bezier(.4,0,.2,1);border-radius:16px;}
.ph-flip-card.ph-flipped{transform:rotateY(180deg);}
/* After audio plays, fade the revealed back face to semi-transparent + desaturated */
.ph-flip-card.ph-done .ph-flip-back{
  opacity:.38;
  filter:saturate(.15) brightness(1.08);
  transition:opacity .9s ease 1.6s, filter .9s ease 1.6s;
}
/* front and back shared */
.ph-flip-front,.ph-flip-back{position:absolute;inset:0;border-radius:16px;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;box-shadow:0 4px 18px rgba(0,0,0,.18);}
/* white translucent wash over the gradient — lets bg image bleed through subtly */
.ph-flip-front::before{content:'';position:absolute;inset:0;border-radius:16px;background:rgba(255,255,255,.52);pointer-events:none;}
.ph-flip-back{transform:rotateY(180deg);background:rgba(255,255,255,.62);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}
/* card content helpers */
.ph-card-emoji{line-height:1;filter:drop-shadow(0 2px 6px rgba(0,0,0,.25));}
.ph-card-word{font-weight:800;color:rgba(255,255,255,.88);text-shadow:0 1px 4px rgba(0,0,0,.35);text-transform:uppercase;letter-spacing:.8px;}
.ph-card-letter-pair{line-height:1;font-weight:900;letter-spacing:-2px;}
.ph-card-phoneme{font-weight:700;color:#999;letter-spacing:.5px;text-transform:lowercase;}
.ph-card-letter-big{font-weight:900;line-height:1;}
.ph-card-letter-sm{font-weight:800;line-height:1;opacity:.55;}
.ph-card-sound{font-weight:700;color:#ccc;letter-spacing:2px;margin-top:1px;}
/* progress pill */
#phdots{display:flex;justify-content:center;}
.ph-prog-pill{background:rgba(255,255,255,.75);color:rgba(0,0,0,.65);border-radius:50px;padding:7px 22px;font-size:.9rem;font-weight:800;border:none;letter-spacing:.5px;}

/* ── RAINBOW ── */
#rainbowScreen{display:none;position:fixed;inset:0;z-index:10;background:url('../Images/GameAssets/Rainbow/Background.png') center/cover no-repeat;flex-direction:column;align-items:center;justify-content:flex-end;overflow:hidden;}
#rbsvg{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;}
#rblabel{position:absolute;top:68%;left:0;right:0;z-index:20;font-size:3.5rem;font-weight:800;color:white;-webkit-text-stroke:2px rgba(0,0,0,.6);paint-order:stroke fill;text-shadow:0 3px 0 rgba(0,0,0,.18),0 0 30px rgba(255,255,255,.5);text-align:center;pointer-events:none;transition:opacity .25s;}
#rblabel.hl{opacity:0;}
.rbcloud{position:absolute;background:rgba(255,255,255,.8);border-radius:50px;pointer-events:none;z-index:4;animation:drift linear infinite;}

/* ── WEATHER MACHINE ── */
#weatherScreen{display:none;position:fixed;inset:0;z-index:10;flex-direction:column;overflow:hidden;transition:background .7s ease;}
.wx-scene{width:100%;flex:0 0 56%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.wx-big{display:none;}
.wx-label{display:none;}
.wx-raindrop{position:absolute;width:2px;height:18px;background:rgba(120,180,255,0.7);border-radius:2px;animation:wxRainFall linear forwards;pointer-events:none;z-index:1;}

.wx-snowflake{position:absolute;color:white;font-size:1.2rem;animation:wxSnowDrift linear forwards;pointer-events:none;z-index:1;}

.wx-cloud{position:absolute;font-size:3rem;opacity:0.85;animation:wxCloudDrift linear infinite;pointer-events:none;z-index:1;}

.wx-leaf{position:absolute;font-size:1.4rem;animation:wxLeafBlow linear forwards;pointer-events:none;z-index:1;}

.wx-ray{position:absolute;top:0;right:60px;width:4px;border-radius:2px;background:rgba(255,230,80,0.35);transform-origin:top center;animation:wxRayPulse ease-in-out infinite alternate;pointer-events:none;z-index:1;}

.wx-controls{flex:0 0 44%;width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(6px,2vw,12px);padding:clamp(8px,2vh,14px) clamp(10px,3vw,18px) clamp(20px,4vh,36px);background:rgba(0,0,0,.18);backdrop-filter:blur(8px);}
.wx-btn{background:rgba(255,255,255,.15);border:3px solid rgba(255,255,255,.25);border-radius:20px;padding:clamp(8px,2vh,13px) 6px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;transition:all .18s;-webkit-tap-highlight-color:transparent;font-family:'Baloo 2',cursive;}
.wx-btn:active{transform:scale(.9);}
.wx-btn.wx-active{background:rgba(255,255,255,.38);border-color:white;transform:scale(1.07);box-shadow:0 0 22px rgba(255,255,255,.4);}
.wx-btn-em{font-size:clamp(1.8rem,6vw,2.6rem);line-height:1;pointer-events:none;}
.wx-btn-lbl{font-size:clamp(.62rem,2vw,.8rem);font-weight:800;color:white;pointer-events:none;letter-spacing:.2px;}

/* ── FEELINGS EXPLOSION ── */
#emotionsScreen{display:none;position:fixed;inset:0;z-index:10;flex-direction:column;overflow:hidden;transition:background .5s ease;}
#emTapZone{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;}
#emBigFace{font-size:clamp(7rem,24vw,11rem);line-height:1;animation:emBob 2.2s ease-in-out infinite;filter:drop-shadow(0 6px 18px rgba(0,0,0,.18));pointer-events:none;}

#emBigName{font-size:clamp(2.2rem,8vw,3.2rem);font-weight:900;color:white;text-shadow:0 3px 0 rgba(0,0,0,.15);pointer-events:none;margin-top:14px;}
#emTapHint{font-size:.92rem;font-weight:700;color:rgba(255,255,255,.65);margin-top:10px;pointer-events:none;letter-spacing:.5px;animation:emPulse 2s ease-in-out infinite;}

.em-particle{position:absolute;pointer-events:none;animation:emBurst ease-out forwards;z-index:20;line-height:1;}

#emNavRow{display:flex;align-items:center;gap:10px;padding:12px 18px clamp(24px,5vh,44px);justify-content:center;}
.em-nav-btn{background:rgba(255,255,255,.25);border:none;border-radius:50%;width:52px;height:52px;font-size:1.4rem;color:white;cursor:pointer;-webkit-tap-highlight-color:transparent;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:'Baloo 2',cursive;}
.em-nav-btn:active{transform:scale(.88);}
#emDots{display:flex;gap:7px;justify-content:center;align-items:center;flex:1;}
.em-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.3);transition:all .3s;}
.em-dot.active{background:white;transform:scale(1.5);}

/* ── PIN OVERLAY ── */
#pinOverlay{display:none;position:fixed;inset:0;z-index:950;background:rgba(0,0,0,.65);backdrop-filter:blur(10px);align-items:center;justify-content:center;}
.pin-card{background:white;border-radius:28px;padding:28px 24px 22px;width:min(88vw,330px);display:flex;flex-direction:column;align-items:center;gap:12px;}
.pin-title{font-size:1.05rem;font-weight:800;color:var(--text);text-align:center;line-height:1.3;}
.pin-dots{display:flex;gap:14px;margin:2px 0;}
.pin-dot{width:16px;height:16px;border-radius:50%;border:2.5px solid #ccc;transition:all .15s;}
.pin-dot.filled{background:#66bb6a;border-color:#66bb6a;}
.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;width:100%;}
.pin-key{background:#f5f5f5;border:none;border-radius:16px;font-size:1.45rem;font-weight:800;color:var(--text);font-family:'Baloo 2',cursive;height:54px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .1s,background .1s;}
.pin-key:active{transform:scale(.88);background:#e0e0e0;}
.pin-key.del{font-size:1.1rem;background:#fce4ec;}
.pin-err{font-size:.82rem;font-weight:700;color:#ef5350;min-height:1.1em;text-align:center;}
.pin-cancel{color:#bbb;font-size:.8rem;font-weight:700;background:none;border:none;cursor:pointer;font-family:'Baloo 2',cursive;margin-top:2px;}
.pin-skip{color:#aaa;font-size:.75rem;font-weight:600;background:none;border:none;cursor:pointer;font-family:'Baloo 2',cursive;text-decoration:underline;padding:0;}

/* ── SETTINGS OVERLAY ── */
#settingsOverlay{display:none;position:fixed;inset:0;z-index:940;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);align-items:center;justify-content:center;}
.settings-card{background:white;border-radius:28px;padding:22px 20px 26px;width:min(88vw,390px);display:flex;flex-direction:column;gap:9px;position:relative;max-height:90dvh;overflow-y:auto;}
.settings-title{font-size:1rem;font-weight:800;color:var(--text);text-align:center;}
.settings-close{position:absolute;top:14px;right:14px;background:#f0f0f0;border:none;border-radius:50%;width:34px;height:34px;font-size:1.1rem;cursor:pointer;font-family:'Baloo 2',cursive;-webkit-tap-highlight-color:transparent;}
.settings-end{background:#fce4ec;border:none;border-radius:16px;padding:11px;font-size:.9rem;font-weight:800;color:#c62828;font-family:'Baloo 2',cursive;cursor:pointer;margin-top:2px;-webkit-tap-highlight-color:transparent;}
.feedback-area{width:100%;border:2px solid #e0e0e0;border-radius:14px;padding:12px 14px;font-size:1rem;font-family:'Baloo 2',cursive;color:var(--text);resize:none;box-sizing:border-box;outline:none;}
.feedback-area:focus{border-color:#81d4fa;}
.feedback-send{background:linear-gradient(135deg,#e1f5fe,#b3e5fc);border:2px solid #81d4fa;border-radius:16px;padding:10px;font-size:.88rem;font-weight:800;color:#0277bd;font-family:'Baloo 2',cursive;cursor:pointer;width:100%;-webkit-tap-highlight-color:transparent;}
.feedback-confirm{font-size:.8rem;font-weight:700;color:#43a047;text-align:center;min-height:1.2em;}

/* ── PERSISTENT COG ── */
#settingsCog,#infoBtn{position:fixed;top:14px;z-index:80;background:rgba(255,255,255,.88);border:2px solid rgba(0,0,0,.07);border-radius:50%;width:42px;height:42px;font-size:1.2rem;cursor:pointer;-webkit-tap-highlight-color:transparent;box-shadow:0 2px 10px rgba(0,0,0,.12);display:none;align-items:center;justify-content:center;transition:transform .15s;}
#settingsCog{right:14px;}
#infoBtn{left:14px;font-size:1rem;font-weight:800;color:#0288d1;}
#settingsCog:active,#infoBtn:active{transform:scale(.88);}

/* ── LANDSCAPE ── */
@media(orientation:landscape){
  body{height:auto;min-height:100dvh;overflow-y:auto;}
  #landScreen{flex-direction:column;padding:32px 24px 36px;gap:16px;height:auto;min-height:100dvh;max-height:none;overflow-y:auto;justify-content:center;max-width:500px;margin:0 auto;}
  .land-title{font-size:clamp(2rem,5vw,3rem);}
  .land-logo img{width:clamp(110px,14vw,160px)!important;}
  .land-start{font-size:1.5rem;padding:18px 48px;}
  #timeScreen{height:auto;min-height:100dvh;overflow-y:auto;padding-top:16px;padding-bottom:28px;justify-content:flex-start;}
  #hubScreen{height:auto;min-height:100dvh;overflow-y:auto;padding-bottom:32px;}
  .cat-row .cat-btn{flex:0 0 clamp(110px,18vw,140px);}
  .hub-cards{flex-wrap:wrap;}
  .hub-btn{padding:clamp(10px,2vh,16px) 14px;}
  #gameScreen{height:auto;min-height:100dvh;overflow-y:auto;padding:48px 12px 72px;}
  .choices{gap:8px;}
  .cbtn{min-height:clamp(80px,16vh,130px);max-height:clamp(100px,20vh,150px);}
  #doneScreen{height:auto;min-height:100dvh;overflow-y:auto;padding:24px 20px 40px;}
  .time-btns{grid-template-columns:repeat(4,1fr);}
}

/* ── DAY/NIGHT ── */
#dayNightScreen{display:none;position:fixed;inset:0;z-index:10;overflow:hidden;}
#dnSky{position:absolute;inset:0;transition:opacity .8s ease;z-index:0;background-size:cover;background-position:center bottom;background-repeat:no-repeat;}
#dnGround{display:none;}
#dnSceneLayer{position:absolute;inset:0;z-index:2;pointer-events:none;}
#dnInteractLayer{position:absolute;inset:0;z-index:3;}
.dn-obj{position:absolute;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .15s;user-select:none;line-height:1;}
.dn-obj:active{transform:scale(.85)!important;}
.dn-label-bar{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);z-index:20;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.dn-label{display:inline-block;font-size:1.1rem;font-weight:800;color:white;text-shadow:0 1px 4px rgba(0,0,0,.35);background:rgba(0,0,0,.28);backdrop-filter:blur(8px);border:2px solid rgba(255,255,255,.35);border-radius:50px;padding:10px 26px;transition:transform .12s,background .2s;}
.dn-label:active{transform:scale(.93);background:rgba(0,0,0,.45);}
/* twinkle for stars */

/* firefly float */

.dn-ray{position:absolute;top:0;right:80px;width:3px;border-radius:2px;background:rgba(255,220,60,0.3);transform-origin:top center;animation:dnRayPulse ease-in-out infinite alternate;}

.dn-cloud{position:absolute;pointer-events:none;animation:dnCloudDrift linear infinite;}

.dn-star{position:absolute;pointer-events:none;animation:twinkle ease-in-out infinite alternate;}
/* bird flap */

/* bounce on tap */

.dn-bounce{animation:dnBounce .5s cubic-bezier(.34,1.56,.64,1);}
/* pop text */
.dn-pop{position:absolute;font-size:1.2rem;font-weight:800;color:white;text-shadow:0 2px 4px rgba(0,0,0,.3);pointer-events:none;animation:dnPopText .9s ease-out forwards;white-space:nowrap;z-index:30;}

/* ── PRIZE WHEEL ── */
#fidgetScreen{display:none;position:fixed;inset:0;z-index:10;background:url('../Images/GameAssets/Spin/BG.png') center/cover no-repeat;overflow:hidden;flex-direction:column;align-items:center;justify-content:center;gap:0;}
#fidgetScreen::before{content:'';position:absolute;inset:0;background:linear-gradient(160deg,#1a1a2e,#16213e,#0f3460);opacity:0;transition:opacity .6s ease;pointer-events:none;z-index:0;}
#fidgetScreen.calm-bg::before{opacity:1;}
.wheel-title{font-size:1.6rem;font-weight:900;color:white;margin-bottom:10px;text-shadow:0 2px 12px rgba(0,0,0,.5);}
.wheel-wrap{position:relative;display:flex;align-items:center;justify-content:center;margin-top:20px;}
.wheel-pointer{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:30px;height:36px;background:linear-gradient(180deg,#ffffff 0%,#ffd740 100%);clip-path:polygon(50% 100%,0 0,100% 0);filter:drop-shadow(0 3px 8px rgba(0,0,0,.65));z-index:5;pointer-events:none;}
.fidget-hint{font-size:.85rem;font-weight:700;color:rgba(255,255,255,.5);margin-top:14px;letter-spacing:.5px;}
#fidgetCanvas{cursor:grab;-webkit-tap-highlight-color:transparent;touch-action:none;border-radius:50%;box-shadow:0 0 0 6px rgba(255,255,255,.1),0 8px 40px rgba(0,0,0,.6);}
#fidgetCanvas:active{cursor:grabbing;}
#wheelCogBtn{position:absolute;top:14px;right:14px;z-index:15;background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.18);border-radius:50%;width:44px;height:44px;font-size:1.2rem;cursor:pointer;-webkit-tap-highlight-color:transparent;display:flex;align-items:center;justify-content:center;}
#wheelSettingsBg{display:none;position:fixed;inset:0;z-index:28;}
#wheelSettingsPanel{display:none;position:absolute;top:64px;right:14px;z-index:29;background:rgba(255,255,255,.97);border-radius:20px;padding:16px 18px;min-width:220px;max-width:280px;box-shadow:0 6px 28px rgba(0,0,0,.22);flex-direction:column;gap:10px;}
#wheelSettingsPanel.open{display:flex;}
#wheelSettingsBg.open{display:block;}
.wcset-title{font-size:.95rem;font-weight:900;color:#5d4e3c;border-bottom:2px solid #f0e8e0;padding-bottom:8px;margin-bottom:2px;}
.wcset-lbl{font-size:.6rem;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:#b0a090;margin-top:4px;}
.wcset-grid{display:flex;flex-wrap:wrap;gap:6px;}
.wcset-chip{padding:8px 10px;border-radius:12px;border:2px solid #e0d8d0;background:white;color:#7a6a5a;font-size:.78rem;font-weight:800;font-family:'Baloo 2',cursive;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:all .12s;position:relative;overflow:hidden;}
.wcset-chip.on{border-color:#66bb6a;background:#e8f5e9;color:#2e7d32;}
.wcset-fill{position:absolute;inset:0;background:rgba(102,187,106,.25);width:0%;transition:none;pointer-events:none;border-radius:10px;}
#wheelLabel{font-size:clamp(1.6rem,7vw,2.4rem);font-weight:900;color:white;text-shadow:0 3px 0 rgba(0,0,0,.5);margin-top:10px;min-height:2.8rem;text-align:center;opacity:0;transition:opacity .25s;}
#wheelSpinBtn{margin-top:12px;background:linear-gradient(135deg,#66bb6a,#43a047);border:none;border-radius:50px;padding:14px 44px;font-size:1.2rem;font-weight:900;color:white;cursor:pointer;font-family:'Baloo 2',cursive;box-shadow:0 5px 0 #2e7d32,0 8px 20px rgba(0,0,0,.4);-webkit-tap-highlight-color:transparent;transition:transform .08s,box-shadow .08s;}
#wheelSpinBtn:active{transform:translateY(4px);box-shadow:0 2px 0 #2e7d32;}

/* ── PEEK A BOO ── */
#peekScreen{display:none;position:fixed;inset:0;z-index:10;overflow:hidden;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:60px 20px 28px;background:url('../Images/GameAssets/PAB/BG.png') center/cover no-repeat;-webkit-tap-highlight-color:transparent;cursor:pointer;}
.peek-slot{position:relative;width:min(72vw,280px);height:min(72vw,280px);margin-top:2%;}
.peek-sprite-wrap{position:absolute;inset:0;overflow:hidden;clip-path:inset(0 3px);transition:opacity .3s ease;}
.peek-sprite-img{position:absolute;}
#peekAnimalWrap{position:absolute;inset:0;z-index:3;opacity:0;transform:translateY(14px) scale(.86);transition:transform .46s cubic-bezier(.34,1.56,.64,1),opacity .3s ease;}
#peekAnimalWrap.peeked{transform:scale(1.1);}
#peekAnimalImg{width:100%;height:100%;object-fit:contain;}
#peekFgWrap{z-index:2;clip-path:none;background-repeat:no-repeat;}

.peek-slot.waiting{border-radius:50%;animation:peekPulse 5s ease-out infinite;}

#peekFgWrap.wiggle{animation:peekWiggle .55s ease-in-out;}
.peek-label{font-size:clamp(1.6rem,6vw,2.4rem);font-weight:900;color:white;text-shadow:0 3px 0 rgba(0,0,0,.4);min-height:3rem;text-align:center;opacity:0;transition:opacity .3s;}
.peek-label.show{opacity:1;}
.peek-hint{font-size:1rem;font-weight:700;color:rgba(255,255,255,.9);text-shadow:0 2px 6px rgba(0,0,0,.4);transition:opacity .3s;}