/* ── 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;--pc:rgba(0,0,0,.10);}
.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:4px solid var(--pc);transition:border-color .25s ease;}
.paint-bottom{position:fixed;bottom:0;left:0;right:0;z-index:20;padding:0;background:rgba(255,248,240,.97);backdrop-filter:blur(6px);border-top:4px solid var(--pc);transition:border-color .25s ease;}
.pcols{display:grid;grid-template-columns:repeat(6,1fr);gap:0;}
@media(orientation:landscape){.pcols{grid-template-columns:repeat(12,1fr);}}
.pswatch{aspect-ratio:1;width:100%;border-radius:0;border:none;box-shadow:none;cursor:pointer;transition:transform .15s,opacity .15s;-webkit-tap-highlight-color:transparent;position:relative;}
@media(orientation:landscape){.pswatch{max-width:none;}}
.pswatch::after{content:'';position:absolute;inset:-6px;}
.pswatch.active{opacity:.75;transform:scale(.92);}
.pclr{position:relative;overflow:hidden;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;}
.pclr .hf{position:absolute;top:0;left:0;bottom:0;width:0%;background:#ef5350;border-radius:inherit;pointer-events:none;opacity:.35;}
.pclr span{position:relative;z-index:1;}
.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;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;}
.p-size-group{display:flex;gap:2px;align-items:center;background:rgba(0,0,0,.07);border-radius:50px;padding:5px 9px;flex-shrink:0;}
.p-btn{background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:50%;-webkit-tap-highlight-color:transparent;}
.p-size-btn{width:32px;height:32px;padding:0;transition:background .1s;}
.p-size-btn.active{background:rgba(0,0,0,.15);}
.p-dot{display:block;border-radius:50%;background:#555;pointer-events:none;}
.p-dot-sm{width:8px;height:8px;}.p-dot-md{width:14px;height:14px;}.p-dot-lg{width:22px;height:22px;}
#pEraseBtn{width:38px;height:38px;border:2px solid #ddd;border-radius:50%;background:white;font-size:1.1rem;flex-shrink:0;transition:background .1s,border-color .1s;}
#pEraseBtn.active{background:#fff3e0;border-color:#ffa726;}
#pUndoBtn{width:38px;height:38px;border:2px solid #ddd;border-radius:50%;background:white;font-size:1.1rem;flex-shrink:0;transition:opacity .15s,transform .1s;}
#pUndoBtn:disabled{opacity:.3;cursor:default;}
#pUndoBtn:not(:disabled):active{transform:scale(.88);}

/* ── 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;}
#pitFloaters{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;}
.pit-floater{position:absolute;border-radius:50%;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(88vw,min(88vh,340px));position:relative;z-index:5;}
.pit-grid{display:grid;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 ── */
#dinoScreen{display:none;position:fixed;inset:0;z-index:10;overflow:hidden;background:url('../Images/GameAssets/Dinos/background.webp') center/cover no-repeat;}
#balloonScreen{display:none;position:fixed;inset:0;z-index:10;overflow:hidden;background:url('../Images/GameAssets/Balloons/Background.webp') 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 ── */
/* ── SOUNDS GAME ── */
#soundsScreen{display:none;position:fixed;inset:0;z-index:10;background:linear-gradient(160deg,#0d0d1a,#1a0a2e,#0d1a2e);overflow:hidden;flex-direction:column;}
#soundsGrid{display:flex;flex-direction:column;flex:1;padding:58px 8px 8px;gap:6px;overflow:hidden;min-height:0;}
.snd-section{flex:1;display:flex;flex-direction:column;gap:4px;min-height:0;}
.snd-sec-lbl{font-size:.58rem;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:rgba(255,255,255,.40);padding:0 2px;flex-shrink:0;}
.snd-sec-grid{flex:1;display:grid;gap:6px;min-height:0;}
.snd-sec-grid.cols-4{grid-template-columns:repeat(4,1fr);}
.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;}
/* 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-img{width:clamp(3rem,14vw,5rem);height:clamp(3rem,14vw,5rem);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;}

/* ── 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 ── */
#emotionsScreen{display:none;position:fixed;inset:0;z-index:10;flex-direction:column;align-items:center;justify-content:center;gap:0;overflow:hidden;transition:background .5s ease;}
#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;}
.settings-card{background:white;border-radius:28px;padding:22px 20px 20px;width:min(88vw,390px);display:flex;flex-direction:column;gap:0;position:relative;max-height:90dvh;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 ── */
#settingsCog,#infoBtn{position:fixed;top:max(14px,env(safe-area-inset-top) + 8px);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: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{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;}
.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: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.webp') 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;}

/* ── 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}}