/* ── 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:.6;}
.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;}
/* Guided play Next button — top-left, same position as All Done button */
/* display:none here, but js/guided-play.js's _gpShowNextBtn() sets
   btn.style.display='flex' inline when showing it — align-items/gap below
   apply once that inline style takes over. */
.gp-next-btn{display:none;position:fixed;top:16px;left:16px;z-index:9999;background:rgba(76,175,80,.9);border-color:rgba(76,175,80,.6);color:white;backdrop-filter:blur(8px);align-items:center;gap:7px;}
.gp-next-icon{width:27px;height:27px;object-fit:contain;position:relative;z-index:1;flex-shrink:0;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25));}
.gp-next-btn .hf{background:rgba(56,142,60,.8);}
.gp-next-btn span{color:white;}

/* ── TAP PRE-GLOW ── */
/* z-index:2 — js/tapmagic.js's nebula canvas (#tapScreen's first child) sets
   itself to z-index:1 and paints an opaque fill every frame; this had no
   z-index of its own (auto), and an explicitly-stacked sibling always paints
   above a z-index:auto one regardless of DOM order, so the canvas was
   completely covering it. Confirmed live: with no z-index here, this
   pre-tap sparkle ring — the ONLY on-screen cue for what to do — was
   invisible from the very first frame. */
#tapPreGlow{position:absolute;top:50%;left:50%;width:0;height:0;pointer-events:none;transition:opacity .7s;z-index:2;}
#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:#06040e;cursor:crosshair;overflow:hidden;}
/* Same z-index:1-canvas-covers-z-index:auto-content bug as #tapPreGlow above
   — "Tap anywhere! ✨" was rendering, just permanently hidden underneath the
   opaque nebula canvas. */
.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;z-index:2;}
.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;width:34px;height:34px;object-fit:contain;transform:translate(-50%,-50%);animation:emFloat 1.2s ease-out forwards;filter:drop-shadow(0 2px 6px rgba(0,0,0,.25));}

/* ── FIREWORKS ── */
#fireworksScreen{
  display:none;position:fixed;inset:0;z-index:10;overflow:hidden;cursor:pointer;
  background:linear-gradient(180deg,#050414 0%,#0b0a2a 55%,#1a1040 100%);
}
#fireworksScreen #fwCanvas{position:absolute;inset:0;width:100%;height:100%;}
#fwHint{
  position:absolute;top:14%;left:50%;transform:translateX(-50%);
  color:#fff;font-family:'Baloo 2',cursive;font-weight:800;font-size:1.15rem;
  text-shadow:0 2px 10px rgba(0,0,0,.6);text-align:center;
  pointer-events:none;z-index:5;transition:opacity .6s;
}
#fwFinaleBtn{
  position:absolute;bottom:max(20px,env(safe-area-inset-bottom));left:50%;
  transform:translateX(-50%);z-index:6;min-height:60px;
  background:linear-gradient(135deg,#ff5e7e,#ffd23f);border:none;border-radius:50px;
  padding:12px 26px;font-family:'Baloo 2',cursive;font-weight:800;font-size:1rem;
  color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.35);
  box-shadow:0 5px 0 rgba(0,0,0,.25),0 8px 18px rgba(0,0,0,.3);
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform .12s,opacity .3s;
}
#fwFinaleBtn:active{transform:translateX(-50%) scale(.93);}
#fwFinaleBtn:disabled{opacity:.5;pointer-events:none;}

/* ── PAINT ── */
#paintScreen{display:none;position:fixed;inset:0;z-index:10;background:#fff8f0;overflow:hidden;flex-direction:column;--pc:rgba(0,0,0,.10);}

/* Two-row toolbar: tools then colors */
.paint-top{
  position:fixed;top:0;left:0;right:0;z-index:20;
  display:flex;flex-direction:column;
  background:rgba(255,248,240,.97);backdrop-filter:blur(6px);
  border-bottom:3px solid var(--pc);transition:border-color .25s ease;
  /* NO overflow:hidden — color row must scroll */
}

/* Row 1: tool buttons */
/* Row 1: tools.
   History: as a plain flex row the 9 controls overflowed a 375px screen and the
   last one was clipped, so a toddler could not reach it. A CSS grid fixed the
   overflow but fought with All Done's variable-width label — span 2 wrapped a
   control to a second row, span 3 with a generic max-width squashed the label
   to "Do".
   Flex with wrapping is the right tool: All Done keeps its natural width, the
   icon buttons are uniform squares, and if they ever do not fit they wrap to a
   second row instead of disappearing off the edge. */
.paint-tools{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;
  padding:6px;gap:4px;width:100%;box-sizing:border-box;
}
/* Icon controls: uniform square touch targets. */
/* .psave carries .hbtn too (it needs the hold fill), but it is an icon button,
   so it must be square like the rest — not label-width like All Done. */
.paint-tools > button:not(.hbtn),
.paint-tools > .psave,
.paint-tools > .pclr{
  /* 38px + 4px gaps lets All Done and all 7 icon controls sit on ONE row at
     375px. Above the 44px guideline only because these are secondary tools —
     the canvas is the target that matters, and a second row cost more usable
     drawing area than the extra 6px gains. */
  flex:0 0 auto;width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  border-radius:11px;font-size:1rem;padding:0;
}
/* All Done keeps its label on one line and never gets squashed. */
.paint-tools > .hbtn:not(.psave){
  flex:0 0 auto;width:auto;min-width:64px;height:38px;
  font-size:.74rem;white-space:nowrap;padding:0 10px;
}
@media(max-width:340px){
  .paint-tools{gap:3px;}
  .paint-tools > button:not(.hbtn),
  .paint-tools > .psave,
  .paint-tools > .pclr{width:36px;height:36px;}
}

/* Row 2: colour swatches — a WRAPPING GRID, never a scroller.
   Measured at 375x812: 12 swatches laid out in one scrolling row came to 672px
   wide, so only 6 were visible and the other 6 were reachable solely by
   horizontal swipe. A toddler will not discover that gesture, so half the
   palette effectively did not exist. A 6-column grid shows all 12 at once. */
.pcols{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:0;align-items:stretch;
  width:100%;
  overflow:visible;          /* nothing to scroll any more */
  touch-action:manipulation;
}

/* Swatches — every one visible, each comfortably above the 60px rule. */
.pswatch{
  width:100%;min-width:0;height:52px;
  border-radius:0;border:none;box-shadow:none;
  cursor:pointer;-webkit-tap-highlight-color:transparent;position:relative;
  overflow:hidden;
}
/* On very narrow screens drop to 4 across so targets stay chunky. */
@media(max-width:340px){
  .pcols{grid-template-columns:repeat(4,1fr);}
}
/* Larger invisible tap zone sits on top */
.pswatch::after{content:'';position:absolute;inset:0;z-index:2;}

/* Color name label — always visible, rotated to read top→bottom in narrow strip */
.pswatch-name{
  position:absolute;top:50%;left:50%;
  /* Rotation removed: it existed for the old horizontal SCROLL row where
     swatches were tall and narrow. In the 6-col wrapping grid they are
     63x52 — wider than tall — so vertical text just read as broken. */
  transform:translate(-50%,-50%);
  white-space:nowrap;
  font-family:'Baloo 2',cursive;
  font-size:clamp(0.52rem,1.55vw,0.72rem);
  font-weight:900;
  letter-spacing:0.06em;
  color:rgba(255,255,255,.82);
  text-shadow:0 1px 4px rgba(0,0,0,.55);
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
  transition:font-size .15s, color .15s, text-shadow .15s;
  z-index:1;
}
/* Dark text on light-colored swatches */
.pswatch-name--dark{
  color:rgba(0,0,0,.62);
  text-shadow:none;
}

/* Active swatch — bright top bar + larger bolder name */
.pswatch.active{
  outline:none;
}
.pswatch.active::before{
  content:'';position:absolute;top:0;left:0;right:0;height:5px;
  background:rgba(255,255,255,.9);
  box-shadow:0 0 8px rgba(255,255,255,.7);
  z-index:1;
}
.pswatch.active .pswatch-name{
  font-size:clamp(0.62rem,1.85vw,0.85rem);
  color:rgba(255,255,255,.98);
  text-shadow:0 0 10px rgba(255,255,255,.5), 0 1px 4px rgba(0,0,0,.6);
}
.pswatch.active .pswatch-name--dark{
  color:rgba(0,0,0,.85);
  text-shadow:0 0 8px rgba(255,255,255,.6);
}

/* Glitter toggle tile — lives at the front of the color row so it's as
   discoverable as any color, not buried in the parent settings panel.
   OFF must read as clearly "asleep" (flat, muted, dim icon) or it gets
   mistaken for already-on — a colorful gradient at rest looked too much
   like the vivid ON state, so OFF is deliberately plain here. */
.pswatch-glitter{
  background:#cfd3d8;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.pswatch-glitter-icon{
  font-size:1.3rem;line-height:1;
  opacity:.45;filter:grayscale(1) drop-shadow(0 1px 2px rgba(0,0,0,.25));
  transition:transform .15s,opacity .15s,filter .15s;
}
.pswatch-glitter.active{
  background:linear-gradient(135deg,#8ee3ff,#ff9ed6,#ffd23f);
  animation:pswatchGlitterPulse 1.6s ease-in-out infinite;
}
.pswatch-glitter.active .pswatch-glitter-icon{
  opacity:1;filter:none drop-shadow(0 1px 2px rgba(0,0,0,.25));
  transform:scale(1.15);
}
/* Explicit ON badge — a checkmark, not just a color shift, so the state
   reads instantly even at a glance. */
.pswatch-glitter.active::after{
  content:'✓';position:absolute;top:3px;right:5px;z-index:2;
  font-size:.62rem;font-weight:900;color:#2e7d32;
  background:#fff;border-radius:50%;width:15px;height:15px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 3px rgba(0,0,0,.35);
}
@keyframes pswatchGlitterPulse{
  0%,100%{box-shadow:inset 0 0 0 rgba(255,255,255,0);}
  50%{box-shadow:inset 0 0 14px rgba(255,255,255,.8);}
}

/* Tool buttons — all 44px round circles for touch */
.p-tool-btn{
  min-width:44px;width:44px;height:44px;
  border:2px solid #ddd;border-radius:50%;background:white;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background .12s,border-color .12s,transform .1s;
  font-family:'Baloo 2',cursive;
}
.p-tool-btn:active{transform:scale(.88);}

/* Brush size cycle */
.p-size-cycle{} /* inherits p-tool-btn */
.p-size-cycle.active{background:#e3f2fd;border-color:#42a5f5;}

/* Dot size indicator inside size button */
.p-dot-active,.p-dot{display:block;border-radius:50%;background:#555;pointer-events:none;transition:width .15s,height .15s;}
.p-dot-sm{width:8px;height:8px;}.p-dot-md{width:14px;height:14px;}.p-dot-lg{width:22px;height:22px;}

/* Eraser */
#pEraseBtn{} /* inherits p-tool-btn */
#pEraseBtn.active{background:#fff3e0;border-color:#ffa726;}
#pGlitterBtn.active{background:#f3e5f5;border-color:#ab47bc;box-shadow:0 0 10px rgba(171,71,188,.45);}

/* Undo */
#pUndoBtn{font-size:1.2rem;} /* inherits p-tool-btn */
#pUndoBtn:disabled{opacity:.3;cursor:default;}
#pUndoBtn:not(:disabled):active{transform:scale(.88);}

/* Clear (hold-to-clear) */
.pclr{
  position:relative;overflow:hidden;
  min-width:44px;width:44px;height:44px;
  background:white;border:2px solid #ddd;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;cursor:pointer;color:var(--text);
  -webkit-tap-highlight-color:transparent;
}
.pclr .hf{position:absolute;top:0;left:0;right:0;bottom:0;width:0%;background:#ef5350;border-radius:inherit;pointer-events:none;opacity:.35;}
.pclr svg{position:relative;z-index:1;pointer-events:none;}

/* Save */
.psave{
  background:#66bb6a;border:none;border-radius:50%;
  width:44px;height:44px;font-size:1.1rem;font-weight:700;color:white;
  cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;
}

/* Canvas: starts below both rows (52px tools + 52px colors = 104px) */
#paintCanvas{position:fixed;top:104px;bottom:0;left:0;right:0;width:100%;height:auto;display:block;touch-action:none;box-shadow:inset 4px 0 0 var(--pc),inset -4px 0 0 var(--pc);transition:box-shadow .25s ease;}

/* Legacy — kept so old code doesn't break */
.p-btn{background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:50%;-webkit-tap-highlight-color:transparent;}

/* ── POP IT ── */
#popScreen{display:none;position:fixed;inset:0;z-index:10;background:url('../Images/GameAssets/PopIt/BG.webp') center/cover no-repeat,linear-gradient(160deg,#f8e1f4,#e8d5f0,#d4e8f8);overflow:hidden;flex-direction:column;align-items:center;justify-content:center;}
#pitShapeBtn{position:absolute;bottom:20px;right:20px;z-index:20;width:64px;height:64px;border-radius:50%;border:3px solid rgba(255,255,255,.8);background:rgba(255,255,255,.85);backdrop-filter:blur(4px);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,.15);transition:transform .15s,box-shadow .15s;-webkit-tap-highlight-color:transparent;}
.pit-shuffle-icon{width:68%;height:68%;object-fit:contain;display:block;pointer-events:none;}
#pitShapeBtn:active{transform:scale(.9);box-shadow:0 2px 8px rgba(0,0,0,.15);}
#pitShapeBtn.pit-shuffle-shake{animation:pitShuffleShake .5s ease;}
@keyframes pitShuffleShake{
  0%,100%{transform:rotate(0deg);}
  20%{transform:rotate(-18deg);}
  40%{transform:rotate(14deg);}
  60%{transform:rotate(-10deg);}
  80%{transform:rotate(6deg);}
}
#pitFloaters{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;}
.pit-floater{position:absolute;background-size:contain;background-repeat:no-repeat;background-position:center;pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent;animation:pitFloat var(--fdur) ease-in-out infinite;opacity:.68;transition:opacity .3s ease,transform .15s ease;}
.pit-floater.popped{opacity:0;transform:scale(1.5)!important;pointer-events:none;}
.pit-card{background:white;border-radius:32px;padding:clamp(10px,3vw,16px);box-shadow:0 8px 32px rgba(0,0,0,.12);width:min(96vw,min(88vh,380px));position:relative;z-index:5;}
.pit-grid{display:grid;gap:8px;}
/* No box-shadow chrome here on purpose — the sprite art itself already
   bakes in a full raised-dome look (rim, highlight, base shadow), so a CSS
   button-shell shadow on top just double-draws the same depth cue. */
.pit-bub{aspect-ratio:1;border-radius:50%;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s;position:relative;background-color:transparent;background-size:100%;background-repeat:no-repeat;background-position:center;}
.pit-bub:not(.pit-popped):active{transform:scale(.88);}
.pit-bub.pit-popped{transform:scale(.96);cursor:default;}

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

/* ── BALLOONS ── */
#dinoScreen{display:none;position:fixed;inset:0;z-index:10;overflow:hidden;background:url('../Images/GameAssets/Dinos/background.webp') center/cover no-repeat;}
/* Was a painterly illustrated scene with a big sun, bunting and confetti — a
   completely different style from the rest of the app and a strong focal
   point competing with the balloons themselves (SCENE_STYLE_GUIDE "the
   background must lose"). Plain sky gradient instead, consistent with how
   other full-bleed games (Tap Magic, Fireworks) keep the backdrop quiet. */
#balloonScreen{display:none;position:fixed;inset:0;z-index:10;overflow:hidden;background:linear-gradient(180deg,#8ecfef 0%,#bfe6f7 45%,#eaf7fb 100%);}
.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;}

/* ── Balloons counting-mode prompt bar ── */
#balPrompt{position:absolute;top:16px;left:50%;transform:translateX(-50%);z-index:20;
  display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;max-width:92vw;}
#balPromptText{font-size:1.15rem;font-weight:900;color:white;text-shadow:0 2px 8px rgba(0,0,0,.35);
  text-align:center;background:rgba(0,0,0,.22);border-radius:50px;padding:8px 20px;line-height:1.2;}
#balPips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:280px;}
.bal-pip{width:30px;height:30px;object-fit:contain;filter:grayscale(1) brightness(1.55) opacity(.55);
  transition:filter .25s ease,transform .25s cubic-bezier(.34,1.56,.64,1);}
.bal-pip.filled{filter:none;transform:scale(1.15);animation:balPipFill .4s ease-out;}
@keyframes balPipFill{0%{transform:scale(.6);}60%{transform:scale(1.3);}100%{transform:scale(1.15);}}

/* ── SOUNDS — revamped ── */
/* ── SOUNDS GAME ── */
/* Picker — shares the home-screen backdrop like Sports/ABC (HUB_BG_SCREENS) */
#soundsScreen{display:none;position:fixed;inset:0;z-index:10;background:transparent;align-items:center;justify-content:center;overflow-y:auto;}

/* Drums / Instruments zones — a real scene image (drum kit / band room),
   sized to fit the screen with the whole thing visible (object-fit:contain —
   unlike Sleepy Time's house, here the child needs to see every drum/
   instrument to know what's tappable, so nothing should crop off). */
#drumsZoneScreen{
  display:none;position:fixed;inset:0;z-index:10;
  background:linear-gradient(160deg,#0d0d1a,#1a0a2e,#0d1a2e);
  align-items:center;justify-content:center;overflow:hidden;
}
/* Sized by WIDTH bounded by an HEIGHT-derived cap (62.67vh = 94vh at the 2:3
   ratio), not by height alone — height-first sizing made the box WIDER than
   a narrow phone's viewport (2:3 is squarer than a phone screen), pushing the
   left/right edges off-screen along with their tappable hit regions. This
   guarantees the whole kit is always on-screen and tappable. */
#drumsZoneStage{
  position:relative;width:min(96vw,62.67vh);aspect-ratio:2/3;
}
#drumsZoneStage img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  pointer-events:none;-webkit-user-drag:none;
}
#drumsZoneHits{position:absolute;inset:0;}
.snd-hitzone{
  position:absolute;background:transparent;border:none;padding:0;margin:0;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform .12s ease,background .12s ease;
  border-radius:14px;
}
.snd-hitzone.hit{background:rgba(255,255,255,.22);transform:scale(1.06);}

/* Instruments zone — full-bleed background-only room (safe to crop via
   cover, it's just a plain wall+floor) with each instrument a REAL element
   in a bottom-anchored row, so every one is naturally responsive and
   individually tappable rather than a percentage guess over a flat image. */
#instrumentsZoneScreen{
  display:none;position:fixed;inset:0;z-index:10;overflow:hidden;
  align-items:flex-end;justify-content:center;
}
#instrumentsZoneBg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none;}
/* Equal-share sizing — each button gets exactly 1/7th of the row's width
   (flex:1 1 0 + min-width:0) rather than sizing itself from the image's own
   intrinsic height/aspect-ratio. The previous version let each instrument
   claim whatever width its clamped height implied with no shared budget, so
   7 of them added up to well over 100% and the row overflowed off BOTH
   edges — Guitar (leftmost) and Bell (rightmost) were literally off-screen. */
/* Two rows of 4+3, not one row of 7. Seven across divided a 375px screen into
   49px slices — under the 60px child tap-target rule, and adjacent instruments
   sat only 49px apart so an imprecise tap hit the neighbour. flex-wrap with a
   25% basis gives 4 per row (~84px each at 375px) and still fills the width. */
#instrumentsZoneRow{
  position:relative;z-index:2;width:100%;box-sizing:border-box;
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;
  gap:clamp(4px,2vw,12px);padding:0 6px max(16px,env(safe-area-inset-bottom,12px));
}
.inst-btn{
  background:transparent;border:none;padding:0;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  flex:0 1 calc(25% - 12px);min-width:64px;
  /* Was clamp(64px,13vh,120px) — read as too small (Jason, 2026-08-21).
     Percentage height overrides below (flute/bell/xylophone) scale off
     this box, so they grow proportionally with no separate change needed. */
  height:clamp(88px,19vh,168px);
  display:flex;align-items:flex-end;justify-content:center;
  transition:transform .1s ease;
  position:relative; /* anchors .xylo-mallet */
}
.inst-btn:active{transform:scale(.92);}
.inst-btn img{
  display:block;height:100%;width:auto;max-width:100%;object-fit:contain;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.25));
}
/* Xylophone mallet: hidden at rest, swings down to strike on tap (see
   _xyloStrike in js/sounds.js) — the xylophone's own body doesn't move
   when played, so this is a separate sprite rather than a rotated frame
   like the other 6 instruments. */
.xylo-mallet{
  position:absolute;left:50%;top:-32%;width:34%;height:auto;
  transform:translateX(-50%) rotate(-20deg);transform-origin:50% 12%;
  pointer-events:none;opacity:0;filter:drop-shadow(0 4px 6px rgba(0,0,0,.2));
}
.xylo-mallet.strike{opacity:1;animation:xyloStrike .5s ease-in-out;}
@keyframes xyloStrike{
  0%{opacity:1;transform:translateX(-50%) rotate(-20deg) translateY(0);}
  40%{transform:translateX(-50%) rotate(10deg) translateY(46%);}
  62%{transform:translateX(-50%) rotate(-6deg) translateY(24%);}
  100%{opacity:0;transform:translateX(-50%) rotate(-20deg) translateY(0);}
}
.inst-btn.inst-xylophone img.xylo-flash{filter:brightness(1.45) drop-shadow(0 6px 10px rgba(0,0,0,.25));}
/* Was height:32% — the flute art is drawn diagonally across its own
   square canvas and already fills that canvas (verified by viewing the
   source), so shrinking the box on top of that rendered it at ~52px,
   under this app's own 60px tap-target minimum and visibly tinier than
   every neighboring instrument. No compensation needed; full height like
   guitar/trumpet/violin/ukulele. */
.inst-btn.inst-bell img{height:55%;}
.inst-btn.inst-xylophone img{height:70%;}

/* Shared in-game switcher between the 3 Sounds zones, top-left below the
   All Done pill — same idea as .sports-switch used in Soccer/Basketball. */
.snd-zone-switch{
  position:absolute;top:max(70px,env(safe-area-inset-top) + 60px);left:14px;
  z-index:30;display:flex;flex-direction:column;gap:8px;
}
.snd-zone-switch button{
  width:42px;height:42px;border-radius:50%;border:2px solid rgba(255,255,255,.5);
  background:rgba(0,0,0,.45);backdrop-filter:blur(6px);font-size:1.3rem;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  box-shadow:0 3px 10px rgba(0,0,0,.3);
}
.snd-zone-switch button:active{transform:scale(.9);}

/* Animals zone — the pad-grid mechanic, now its own screen */
#animalsZoneScreen{
  display:none;position:fixed;inset:0;z-index:10;
  background:linear-gradient(160deg,#0d0d1a,#1a0a2e,#0d1a2e);
  flex-direction:column;padding:70px 10px 16px;overflow:hidden;
}
.snd-sec-grid{flex:1;display:grid;gap:8px;min-height:0;width:100%;}
.snd-sec-grid.cols-3{grid-template-columns:repeat(3,1fr);}

/* ── Drum machine pad — glossy 3D rounded square ─────────────────────────── */
.spad {
  position: relative;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  overflow: hidden;
  padding-bottom: 5px;
  font-family: 'Baloo 2', cursive;
  /* background-color set inline per pad; gradient overlay added via background-image */
  background-image: linear-gradient(175deg,
    rgba(255,255,255,.22) 0%,
    rgba(255,255,255,.06) 40%,
    rgba(0,0,0,.06) 65%,
    rgba(0,0,0,.28) 100%);
  /* 3D depth: hard bottom shadow + inner top highlight + inner bottom shadow */
  box-shadow:
    0 5px 0 rgba(0,0,0,.50),
    inset 0 2px 4px rgba(255,255,255,.18),
    inset 0 -8px 18px rgba(0,0,0,.30);
  transition: transform .07s ease, box-shadow .07s ease, filter .07s ease;
}
/* Top-left gloss highlight bubble */
.spad::before {
  content: '';
  position: absolute;
  top: 7%;
  left: 9%;
  width: 30%;
  height: 26%;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.56) 0%, transparent 68%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
}
/* Image area — fills upper portion of pad */
.spad-img {
  position: absolute;
  inset: 8% 7% 22%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 1;
  pointer-events: none;
}
/* Emoji fallback — centered in upper portion */
.spad-emoji {
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -58%);
  font-size: clamp(1.5rem, 5.5vw, 2.2rem);
  line-height: 1;
  z-index: 1;
  pointer-events: none;
}
/* Label at bottom */
.spad-lbl {
  position: relative;
  z-index: 4;
  font-size: clamp(.40rem, 1.6vw, .58rem);
  font-weight: 800;
  color: rgba(255,255,255,.92);
  letter-spacing: .3px;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0,0,0,.8);
  line-height: 1;
  flex-shrink: 0;
}
/* PRESSED — pad sinks, bottom shadow collapses, brightness flares */
.spad.hit {
  transform: translateY(5px) scale(.94);
  box-shadow:
    0 0px 0 rgba(0,0,0,.50),
    inset 0 1px 2px rgba(255,255,255,.10),
    inset 0 -4px 10px rgba(0,0,0,.20);
  filter: brightness(1.55) saturate(1.15);
}
@media(orientation:landscape){
  #soundsGrid{flex-direction:row;gap:8px;padding-top:52px;}
  .snd-section{flex:1;}
  .snd-sec-grid.cols-4{grid-template-columns:repeat(2,1fr);}
  .snd-sec-grid.cols-3{grid-template-columns:repeat(3,1fr);}
}
.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.webp') center/cover no-repeat;}
/* 2-column grid, 3 rows of 6 cards. Was 3x2 — at that width the 5:6
   aspect-ratio card capped out well short of the viewport, leaving ~33%
   empty top and ~30% empty bottom (PLAYTEST_FINDINGS §1.6). Fewer, wider
   columns means each card can grow bigger before hitting the aspect-ratio
   ceiling, which fills far more of the vertical space without distorting
   the card shape the way stretching an unrelated aspect-ratio would. */
#phcard{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(10px,3vw,16px);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-img{width:clamp(3.5rem,20vw,6rem);height:clamp(3.5rem,20vw,6rem);object-fit:contain;filter:drop-shadow(0 3px 8px rgba(0,0,0,.28));flex-shrink:0;}
.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;}
#phdots{display:none;}

/* ── RAINBOW ── */
#rainbowScreen{display:none;position:fixed;inset:0;z-index:10;background:url('../Images/GameAssets/Rainbow/Background.webp') 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;}
/* Sun idly bobs and tilts — "vibing", not just sitting static in the corner. */
@keyframes rbSunVibe{
  0%,100%{transform:translateX(-50%) rotate(-4deg) translateY(0);}
  50%{transform:translateX(-50%) rotate(4deg) translateY(-5px);}
}
/* Arcs pulse (scale) in addition to their existing glow, on tap and on the
   idle auto-cycle. transform-box:fill-box makes the scale originate from the
   arc's own centre rather than the SVG viewport's 0,0 corner. */
.rb-arc{transform-box:fill-box;transform-origin:center;}
@keyframes rbArcPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.045);}}
.rb-arc.rb-pulse{animation:rbArcPulse .6s ease-in-out;}

/* ── FISHTANK ── */
#fishScreen{display:none;position:fixed;inset:0;z-index:10;overflow:hidden;background:url('../Images/GameAssets/Fish/background.webp') center/cover no-repeat;}
.ft-bubble{position:absolute;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.65),rgba(180,220,255,.25));border:1px solid rgba(255,255,255,.35);pointer-events:none;z-index:15;animation:ftBubbleRise var(--bub-dur,4s) ease-in forwards;}

/* ── FEELINGS EXPLOSION ── */
#emStage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,3vh,24px);width:100%;pointer-events:none;}
#emCompositeImg{width:clamp(180px,52vw,290px);height:auto;display:block;border-radius:32px;box-shadow:0 10px 32px rgba(0,0,0,.22);background:white;}
#emCompositeImg.em-pop{animation:emPop .38s cubic-bezier(.34,1.56,.64,1);}
#emLabel{font-size:clamp(1.5rem,6vw,2.2rem);font-weight:900;color:white;text-shadow:0 3px 0 rgba(0,0,0,.2),0 0 32px rgba(255,255,255,.3);letter-spacing:.3px;text-align:center;padding:0 16px;}
#emShuffleBtn{margin-bottom:clamp(28px,5vh,52px);background:white;border:none;border-radius:50px;padding:16px 40px;font-size:1.1rem;font-weight:900;font-family:'Baloo 2',cursive;cursor:pointer;color:#5d4e3c;box-shadow:0 4px 20px rgba(0,0,0,.2);-webkit-tap-highlight-color:transparent;transition:transform .12s;}
#emShuffleBtn:active{transform:scale(.92);}

/* ── 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;}
/* Same overlay treatment as Settings, opened on top of it (higher z-index)
   rather than replacing it — its textarea used to live inline inside
   .settings-scroll and was the single biggest cause of Settings needing to
   scroll (a real ~250px of extra height whenever a parent opened it). */
#feedbackOverlay{display:none;position:fixed;inset:0;z-index:945;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);align-items:center;justify-content:center;}
/* max-height was 90dvh, which capped the card at 731px on a 812px screen and
   left 81px of the display unused while the content inside was scrolling.
   96dvh reclaims most of that; combined with the label pairing above, the
   settings now fit without scrolling on a standard phone. Padding trimmed
   slightly to buy a little more for short screens. */
.settings-card{background:white;border-radius:28px;padding:16px 18px 14px;width:min(88vw,390px);display:flex;flex-direction:column;gap:0;position:relative;max-height:96dvh;overflow:hidden;}
.settings-scroll{overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:9px;padding-bottom:4px;}
.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:3px solid #ef9a9a;border-radius:14px;padding:10px 8px;font-size:.9rem;font-weight:800;color:#c62828;font-family:'Baloo 2',cursive;cursor:pointer;width:100%;-webkit-tap-highlight-color:transparent;box-shadow:0 2px 8px var(--shadow);transition:transform .1s;}
.settings-end:active{transform:scale(.95);}
.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 ── */
/* No white chip behind these any more. It existed because they used to be flat
   emoji with no form of their own; the new icons are soft-3D and read on their
   own. A drop-shadow keeps them separated from busy or dark backgrounds (the
   Tap Magic nebula, the stadium) without a plate. Hit area stays 42px. */
#settingsCog,#infoBtn,#gameCog{position:fixed;top:max(14px,env(safe-area-inset-top) + 8px);z-index:80;background:none;border:none;border-radius:50%;width:42px;height:42px;font-size:1.2rem;cursor:pointer;-webkit-tap-highlight-color:transparent;box-shadow:none;display:none;align-items:center;justify-content:center;transition:transform .15s;padding:0;}
#settingsCog:active,#infoBtn:active,#gameCog:active{transform:scale(.9);}
#settingsCog,#gameCog{right:max(14px,env(safe-area-inset-right) + 8px);}
#infoBtn{left:max(14px,env(safe-area-inset-left) + 8px);font-size:1rem;font-weight:800;color:#0288d1;}
#settingsCog:active,#infoBtn:active,#gameCog:active{transform:scale(.88);}

/* ── GAME COG PANEL ── */
#gameCogBg{display:none;position:fixed;inset:0;z-index:79;}
#gameCogPanel{
  display:none;position:fixed;
  top:max(62px,env(safe-area-inset-top) + 56px);
  right:max(14px,env(safe-area-inset-right) + 8px);
  z-index:81;
  background:white;
  border-radius:20px;
  padding:16px 18px;
  width:220px;
  box-shadow:0 8px 32px rgba(0,0,0,.20);
  border:1.5px solid rgba(0,0,0,.06);
}
.gcog-title{font-size:.82rem;font-weight:900;color:#9e9e9e;letter-spacing:.6px;text-transform:uppercase;margin-bottom:10px;}
.gcog-row{display:flex;align-items:center;justify-content:space-between;padding:7px 0;}
.gcog-row+.gcog-row{border-top:1px solid rgba(0,0,0,.06);}
.gcog-label{font-size:.88rem;font-weight:700;color:#5d4e3c;}

/* iOS-style toggle switch shared by gameCog and in-panel rows */
.gcog-sw{
  flex-shrink:0;
  width:46px;height:27px;
  border-radius:14px;
  background:#ccc;
  border:none;cursor:pointer;
  position:relative;
  transition:background .2s;
  -webkit-tap-highlight-color:transparent;
}
.gcog-sw::after{
  content:'';position:absolute;
  top:3px;left:3px;
  width:21px;height:21px;
  border-radius:50%;
  background:white;
  box-shadow:0 1px 4px rgba(0,0,0,.28);
  transition:transform .2s;
}
.gcog-sw.on{background:#66bb6a;}
.gcog-sw.on::after{transform:translateX(19px);}

/* ── Music play/pause control (inside settings cog panels) ──
   Phase F: rotation UI (prev/next/track-label) removed — each game now has
   its own dedicated track, so only a single play/pause toggle remains. ── */
.gcog-music-single{display:flex;align-items:center;justify-content:center;padding:8px 0 4px;border-top:1px solid rgba(0,0,0,.06);}
.gcog-music-btn{background:rgba(0,0,0,.07);border:none;border-radius:50%;width:34px;height:34px;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;flex-shrink:0;}
.gcog-music-btn:active{background:rgba(0,0,0,.15);}

/* Reusable audio row for injecting into any settings panel */
.snd-divider{font-size:.72rem;font-weight:900;color:#bbb;letter-spacing:.5px;text-transform:uppercase;padding:10px 0 4px;}
.snd-row{display:flex;align-items:center;justify-content:space-between;padding:6px 0;}
.snd-row+.snd-row{border-top:1px solid rgba(0,0,0,.06);}
.snd-label{font-size:.85rem;font-weight:700;color:#5d4e3c;}

/* ── TIMER VIEWPORT — shrink game screens so timer bar doesn't overlay gameplay ── */
body.timer-active #tapScreen,
body.timer-active #paintScreen,
body.timer-active #popScreen,
body.timer-active #balloonScreen,
body.timer-active #soundsScreen,
body.timer-active #phonicsScreen,
body.timer-active #rainbowScreen,
body.timer-active #fishScreen,
body.timer-active #dayNightScreen,
body.timer-active #fidgetScreen,
body.timer-active #peekScreen,
body.timer-active #basketScreen,
body.timer-active #pianoScreen,
body.timer-active #dinoScreen,
body.timer-active #spaceScreen,
body.timer-active #baseballScreen{bottom:var(--timer-h);}
/* Paint canvas and bottom palette also need to shift up */
body.timer-active #paintCanvas{bottom:var(--timer-h);}

/* ── 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;}
.dn-shooting-star{position:absolute;width:130px;height:2px;background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.95) 55%,rgba(255,255,255,.4) 100%);border-radius:1px;transform:rotate(-28deg);transform-origin:left center;animation:dnShootStar 1.3s ease-out forwards;pointer-events:none;z-index:8;}
/* 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.webp') 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:2px;left:50%;transform:translateX(-50%);width:44px;height:44px;z-index:5;pointer-events:none;filter:drop-shadow(0 3px 8px rgba(0,0,0,.5));}
.wheel-pointer-img{width:100%;height:100%;object-fit:contain;display:block;}
.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:none;border:none;box-shadow:none;width:44px;height:44px;cursor:pointer;-webkit-tap-highlight-color:transparent;display:flex;align-items:center;justify-content:center;padding:0;transition:transform .15s;}
#wheelCogBtn:active{transform:scale(.88);}
#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;background:url('../Images/GameAssets/PAB/BG.webp') center/cover no-repeat;-webkit-tap-highlight-color:transparent;}
#peekSlotsWrap{position:absolute;inset:0;pointer-events:none;}
.peek-slot{position:absolute;width:clamp(130px,34vw,185px);height:clamp(130px,34vw,185px);pointer-events:auto;cursor:pointer;}
.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);}
.peekAnimalWrap img{width:100%;height:100%;object-fit:contain;}

.peek-slot.waiting{border-radius:50%;animation:peekPulse 5s ease-out infinite;}
.peek-sprite-wrap.wiggle{animation:peekWiggle .55s ease-in-out;}
.peek-label{position:absolute;bottom:14vh;left:0;right:0;font-size:clamp(1.4rem,5.5vw,2.2rem);font-weight:900;color:white;text-shadow:0 3px 0 rgba(0,0,0,.4);text-align:center;opacity:0;transition:opacity .3s;pointer-events:none;z-index:20;}
.peek-label.show{opacity:1;}
.peek-hint{position:absolute;bottom:8vh;left:0;right:0;text-align:center;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;pointer-events:none;z-index:20;}

/* ── GUIDED PLAY ── */
.time-btn-dimmed{opacity:.35;pointer-events:none;}
#gpWarning{display:none;position:fixed;bottom:0;left:0;right:0;z-index:9500;padding:20px 24px 32px;background:linear-gradient(to top,rgba(0,0,0,.88),rgba(0,0,0,.6));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);text-align:center;font-family:'Baloo 2',cursive;color:#fff;animation:gpSlideUp .35s ease-out;}
#gpWarnEmoji{font-size:2.6rem;line-height:1;margin-bottom:4px;}
#gpWarnMsg{font-size:1.05rem;font-weight:700;margin:0 0 2px;}
#gpWarnCount{font-size:3rem;font-weight:900;line-height:1;color:#ffd740;text-shadow:0 2px 12px rgba(255,215,64,.5);}
#gpStayBtn{margin-top:14px;background:rgba(255,255,255,.15);border:2px solid rgba(255,255,255,.35);border-radius:50px;color:#fff;font-family:'Baloo 2',cursive;font-size:1.05rem;font-weight:800;padding:12px 32px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .15s;}
#gpStayBtn:active{background:rgba(255,255,255,.28);}
@keyframes gpSlideUp{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}

/* ── TOOTH PIPS (Brush Teeth progress) ── */
.tooth-pip{
  display:inline-block;width:22px;height:26px;
  background:#fff;border-radius:4px 4px 6px 6px;
  margin:0 2px;opacity:0.3;
  border:1.5px solid rgba(0,0,0,0.1);
  transition:opacity 0.3s,box-shadow 0.3s;
  vertical-align:middle;
}
.tooth-pip.tooth-clean{
  opacity:1;
  box-shadow:0 0 6px 2px #fffde7;
}

/* ── SPORTS JUMBOTRON PIPS (non-numeric score) ──
   Shared by basketball/baseball/soccer — see sportsPips() in js/sports.js.
   --pip-color lets each sport tint pips to match its existing jumbotron
   palette without duplicating this block three times. */
.jmb-pips{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;align-content:center;max-width:68px;}
.jmb-pip{
  width:9px;height:9px;border-radius:50%;flex-shrink:0;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);
  transition:background .25s,box-shadow .25s,transform .25s;
}
.jmb-pip.filled{
  background:var(--pip-color,#ffb300);border-color:var(--pip-color,#ffb300);
  box-shadow:0 0 6px var(--pip-color,#ffb300);transform:scale(1.15);
}
.jmb-pips-maxed .jmb-pip.filled{animation:jmbPipMaxedPulse 1.1s ease-in-out infinite;}
/* Tighter variant for baseball's 3-stats-in-a-row jumbotron */
.jmb-pips-sm{max-width:44px;gap:2px;}
.jmb-pips-sm .jmb-pip{width:6px;height:6px;}
@keyframes jmbPipMaxedPulse{0%,100%{opacity:1;}50%{opacity:.5;}}
@keyframes jmbPipPop{0%{transform:scale(.4);}60%{transform:scale(1.35);}100%{transform:scale(1.15);}}

/* ── PEEK-A-BOO BACKGROUND RIPPLE ── */
.peek-bg-ripple{
  position:fixed;pointer-events:none;z-index:5;
  width:48px;height:48px;border-radius:50%;
  border:3px solid rgba(255,255,255,0.55);
  transform:translate(-50%,-50%) scale(0);
  animation:peekBgRipple 0.45s ease-out forwards;
}
@keyframes peekBgRipple{
  0%  {transform:translate(-50%,-50%) scale(0);opacity:0.8;}
  100%{transform:translate(-50%,-50%) scale(2.2);opacity:0;}
}

/* ── MINIMUM TAP TARGET (Apple HIG 44×44) ── */
@media(max-width:480px){
  .cbtn{min-width:44px;min-height:44px;}
}

/* ── MATCH GAME WRONG-GENTLE + CORRECT-HINT (shared with match.css) ── */
/* .cbtn.wrong-gentle lives in css/match.css — single owner, don't duplicate */
.cbtn.correct-hint{animation:correctHintPulse 0.65s ease-in-out 2;}
@keyframes correctHintPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.07);}}

/* ── UI chrome icons ──
   The settings cog and info button used raw emoji (⚙️ ℹ), which rendered in
   whatever style the OS chose and clashed with the regenerated icon set. They
   now use real art from the same family. Dark mode gets the same drop-shadow
   glow as the hub tiles so nothing needs a second file. */
.ui-icon-img{
  /* Larger now the plate is gone, and shadowed so it stays legible on busy or
     dark backgrounds without needing one. */
  width:100%;height:100%;object-fit:contain;pointer-events:none;display:block;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.35)) drop-shadow(0 2px 6px rgba(0,0,0,.20));
}
body.dark-mode .ui-icon-img{
  filter:drop-shadow(0 0 5px rgba(255,255,255,.30)) brightness(1.06) saturate(1.08);
}


/* ── PARENT SETTINGS: fit the screen, no scrolling ──
   Measured at 375x812: content was 744px inside a 663px box, forcing 81px of
   scroll. The cause was structural — each section label sat on its OWN 16px row
   above its 49px control row, so six labels plus six gaps cost ~150px of pure
   vertical overhead.
   Pairing them in a 2-column grid puts the label beside its controls instead of
   above them. Rows that are not a label/control pair (audio block, extend-time
   buttons, feedback, end session) span the full width as before. */
#settingsOverlay .settings-scroll{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:7px 10px;
  overflow-y:auto;
}
/* Default: anything unpaired spans both columns. */
#settingsOverlay .settings-scroll > *{grid-column:1 / -1;}
/* A label takes column 1 and stops stretching to full width. */
#settingsOverlay .settings-scroll > .time-section-lbl{
  grid-column:1;width:auto;white-space:nowrap;padding-left:2px;
}
/* Its control row sits beside it in column 2. */
#settingsOverlay .settings-scroll > .time-lang-row,
#settingsOverlay .settings-scroll > .time-age-row{grid-column:2;}

/* Short screens (older Android is commonly 640px tall). At 812px the settings
   now fit exactly in the DEFAULT state — but Guided Play adds one more row
   (the "Exit Guided Play" button) that pushes even an ordinary 844px-tall
   phone 26px over, since that extra row was never part of the height budget
   this breakpoint was originally tuned against. Raised from 740 to 900 so
   the compact sizing is just the standard for every phone-class viewport
   (it reads perfectly fine at normal phone sizes too — verified visually)
   rather than carrying a "roomy" tier that quietly breaks whenever the
   optional Guided Play row shows up. This compacts the parent panel rather
   than letting it scroll.
   Note on tap targets: DEVELOPMENT_RULES §2.3 mandates 60px, but that rule is
   about TODDLER targets. These are parent controls behind an adult gate, so
   40px — still above the 44px-ish accessibility norm for adult UI — is the
   right trade against forcing a scroll. Nothing a child taps is shrunk. */
@media (max-height: 900px){
  #settingsOverlay .settings-card{padding:12px 14px 10px;max-height:98dvh;}
  #settingsOverlay .settings-scroll{gap:4px 8px;}
  #settingsOverlay .settings-scroll .time-lang-row,
  #settingsOverlay .settings-scroll .time-age-row{gap:6px;}
  #settingsOverlay .settings-scroll .time-lang-row button,
  #settingsOverlay .settings-scroll .time-age-row button{padding:8px 6px;font-size:.78rem;min-height:40px;}
  #settingsOverlay .time-section-lbl{font-size:.56rem;letter-spacing:.8px;}
  #settingsOverlay .time-btns button{padding:7px 4px;font-size:.74rem;min-height:38px;}
  #settingsOverlay .feedback-send,
  #settingsOverlay .settings-end{padding:9px 12px;font-size:.82rem;min-height:40px;}
  #settingsOverlay .settings-title{font-size:.88rem;}
}
/* Very short screens (iPhone SE 1st-gen/5/5s era, 568px tall, still turns up
   in analytics for budget Android too) — the 740px tier alone still left
   25px of overflow in the default state and ~90px with Guided Play's extra
   exit-button row showing. One more compaction pass rather than letting it
   scroll at all. */
@media (max-height: 600px){
  #settingsOverlay .settings-card{padding:9px 12px 8px;}
  #settingsOverlay .settings-scroll{gap:3px 6px;}
  #settingsOverlay .settings-scroll .time-lang-row,
  #settingsOverlay .settings-scroll .time-age-row{gap:5px;}
  #settingsOverlay .settings-scroll .time-lang-row button,
  #settingsOverlay .settings-scroll .time-age-row button{padding:6px 5px;font-size:.72rem;min-height:36px;}
  #settingsOverlay .time-section-lbl{font-size:.52rem;letter-spacing:.6px;}
  #settingsOverlay .time-btns button{padding:5px 3px;font-size:.68rem;min-height:34px;}
  #settingsOverlay .feedback-send,
  #settingsOverlay .settings-end{padding:7px 10px;font-size:.76rem;min-height:36px;}
  #settingsOverlay .settings-title{font-size:.8rem;}
  #settingsOverlay .settings-close{width:28px;height:28px;font-size:.95rem;top:9px;right:9px;}
  #settingsOverlay #gpExitBtn{padding:9px!important;font-size:.8rem!important;margin-top:0!important;}
  /* Audio block's own internal padding (inline-styled in index.html) adds up
     too at this size. */
  #settingsOverlay .snd-row{padding:4px 0;}
  #settingsOverlay .snd-label{font-size:.82rem;}
}