/* ===================================================================
   TEZ & GRUM'S QUESTS OF QUERY — ENGAGEMENT BUILD
   Hands-on interactions • answer-specific reactions • fail-safe play
   • parent discussion prompts • anticipation/joy/trust polish
   -------------------------------------------------------------------
   SWAP ART: search "LOGO IMAGE" (1 spot) and "CHARACTER ART" (3 spots).
   =================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Baloo+2:wght@600;700;800&display=swap');
:root{--badge-frame:url("assets/badge_frame.png");
  --deep:#0a1030;--mid:#16245c;--violet:#7b3ff2;--cyan:#27e0ff;--green:#5BE021;--green-d:#3da512;
  --sun:#ffc83d;--coral:#ff5d73;--paper:#fdfbff;--ink:#1a1a3a;--ink-soft:#5a5a82;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none;}
input,textarea,[contenteditable="true"]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default;}
html,body{height:100%;}
body{font-family:'Baloo 2',system-ui,sans-serif;color:#fff;min-height:100vh;overflow-x:hidden;
  background:
    radial-gradient(ellipse at 22% 10%,rgba(60,40,100,.28) 0%,transparent 40%),
    radial-gradient(ellipse at 80% 80%,rgba(45,30,75,.3) 0%,transparent 45%),
    radial-gradient(ellipse at 60% 45%,rgba(35,35,45,.4) 0%,transparent 55%),
    linear-gradient(160deg,#050507,#0a0810 50%,#060508);
  background-attachment:fixed;
  -webkit-tap-highlight-color:transparent;}
/* faint starfield — subtle on the black */
.galaxy-stars{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%,rgba(255,255,255,.8),transparent),
    radial-gradient(1px 1px at 28% 42%,rgba(255,255,255,.5),transparent),
    radial-gradient(1.5px 1.5px at 45% 12%,rgba(255,255,255,.7),transparent),
    radial-gradient(1px 1px at 62% 30%,rgba(200,190,230,.6),transparent),
    radial-gradient(1.5px 1.5px at 78% 55%,rgba(255,255,255,.7),transparent),
    radial-gradient(1px 1px at 88% 18%,rgba(255,255,255,.5),transparent),
    radial-gradient(1px 1px at 18% 68%,rgba(255,255,255,.6),transparent),
    radial-gradient(1.5px 1.5px at 52% 78%,rgba(255,255,255,.7),transparent),
    radial-gradient(1px 1px at 72% 88%,rgba(200,180,230,.6),transparent),
    radial-gradient(1.5px 1.5px at 92% 72%,rgba(255,255,255,.6),transparent),
    radial-gradient(1px 1px at 8% 88%,rgba(255,255,255,.5),transparent),
    radial-gradient(1px 1px at 38% 58%,rgba(200,190,230,.5),transparent);
  animation:starTwinkle 5s ease-in-out infinite;}
@keyframes starTwinkle{0%,100%{opacity:.4;}50%{opacity:.75;}}
/* periodic shooting stars across the backdrop */
.shooting-star{position:absolute;width:120px;height:2px;border-radius:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95));
  filter:drop-shadow(0 0 4px rgba(160,200,255,.8));transform-origin:right center;opacity:0;}
.shooting-star::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:5px;height:5px;border-radius:50%;
  background:#fff;box-shadow:0 0 8px 2px rgba(180,210,255,.9);}
@keyframes shootStar{0%{opacity:0;transform:rotate(var(--rot)) translateX(0) scaleX(.4);}
  10%{opacity:1;}
  85%{opacity:1;}
  100%{opacity:0;transform:rotate(var(--rot)) translateX(var(--len)) scaleX(1);}}
#sceneFX{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.fx{position:absolute;border-radius:50%;}
.grid-floor{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:repeating-linear-gradient(90deg,transparent 0 38px,rgba(123,63,242,.08) 38px 39px),repeating-linear-gradient(0deg,transparent 0 38px,rgba(120,120,140,.05) 38px 39px);
  -webkit-mask-image:linear-gradient(transparent 58%,#000 100%);mask-image:linear-gradient(transparent 58%,#000 100%);opacity:.5;}
@keyframes drift{0%{transform:translate(0,0);}50%{transform:translate(14px,-18px);}100%{transform:translate(0,0);}}
@keyframes twinkle{0%,100%{opacity:.3;}50%{opacity:1;}}
@keyframes rise{0%{transform:translateY(0);opacity:0;}10%{opacity:1;}100%{transform:translateY(-110vh) translateX(30px);opacity:0;}}
@keyframes sail{from{transform:translateX(-20vw);}to{transform:translateX(120vw);}}
@keyframes spin{to{transform:rotate(360deg);}}
/* floating asteroids (chest scene) — outer drifts, inner tumbles */
.asteroid{will-change:transform;}
.ast-rock{position:relative;overflow:hidden;
  background:radial-gradient(circle at 34% 28%,#9a9486,#6a6253 52%,#3b3730 100%);
  box-shadow:inset -3px -3px 7px rgba(0,0,0,.55),inset 2px 2px 5px rgba(255,255,255,.13),0 2px 10px rgba(0,0,0,.45);}
.ast-rock .crater{position:absolute;border-radius:50%;background:rgba(0,0,0,.26);
  box-shadow:inset 1px 1px 2px rgba(0,0,0,.45),0 0 1px rgba(255,255,255,.08);}
@keyframes astCrossR{0%{transform:translate(-16vw,0);}50%{transform:translate(50vw,-16px);}100%{transform:translate(116vw,0);}}
@keyframes astCrossL{0%{transform:translate(116vw,0);}50%{transform:translate(50vw,-16px);}100%{transform:translate(-16vw,0);}}
@keyframes astSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
.wrap{position:relative;z-index:3;max-width:760px;margin:0 auto;padding:14px 18px 60px;}

/* ===== BOTTOM NAV ===== */
body{padding-bottom:74px;}
body.no-scroll{overflow:hidden;touch-action:none;overscroll-behavior:none;position:fixed;top:0;left:0;right:0;bottom:0;width:100%;}
#bottomNav{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;background:rgba(10,16,40,.92);
  backdrop-filter:blur(10px);border-top:2px solid rgba(255,255,255,.12);padding:6px 6px max(6px,env(safe-area-inset-bottom));}
.nav-tab{flex:1;background:none;border:none;color:#9aa6d6;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:8px 4px;cursor:pointer;border-radius:14px;transition:.15s;font-family:'Fredoka',sans-serif;}
.nav-tab .nav-ic{font-size:1.5rem;line-height:1;transition:transform .15s;display:flex;align-items:center;justify-content:center;height:30px;}
.nav-tab .nav-ic .badge-ic{width:30px;height:30px;vertical-align:middle;filter:none;}
.nav-tab .nav-ic .nav-ic-svg{width:27px;height:27px;display:block;color:inherit;}
.nav-tab .nav-lbl{font-size:.7rem;font-weight:600;}
.nav-tab.active{color:#fff;background:rgba(91,224,33,.16);}
.nav-tab.active .nav-ic{transform:scale(1.2);}
.nav-tab:active .nav-ic{transform:scale(.9);}

/* tab screens fill height so content centers nicely with no awkward scroll */
.tabscreen{min-height:calc(100vh - 150px);}

/* ===== HOME WELCOME ===== */
.home-welcome{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:auto;text-align:center;padding-bottom:20px;}
.home-hero-img{width:min(92vw,440px);height:auto;border-radius:22px;margin:10px auto 4px;display:block;
  box-shadow:0 10px 30px rgba(0,0,0,.55),0 0 0 2px rgba(123,63,242,.4),0 0 28px rgba(123,63,242,.3);}
.welcome-line{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.15rem;color:#dfe5ff;margin:2px 0 14px;}
.welcome-actions{display:flex;flex-direction:column;gap:10px;width:100%;max-width:320px;}
.welcome-btn{font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.02rem;border-radius:16px;padding:12px;cursor:pointer;
  background:rgba(255,255,255,.1);color:#fff;border:2px solid rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;gap:9px;transition:.14s;}
.welcome-btn span{font-size:1.2rem;}
.welcome-btn:active{transform:translateY(4px);}
.welcome-btn.primary{background:linear-gradient(160deg,#6ee82c,var(--green));color:#13340f;border-color:#8df048;box-shadow:0 6px 0 var(--green-d),0 8px 18px rgba(91,224,33,.35);}
.welcome-btn.primary:active{transform:translateY(4px);box-shadow:0 2px 0 var(--green-d);}
/* Play Games — vibrant cyan */
.welcome-btn.games{background:linear-gradient(160deg,#5cebff,var(--cyan));color:#063047;border-color:#9af0ff;
  box-shadow:0 6px 0 #16a8c4,0 8px 18px rgba(39,224,255,.35);}
.welcome-btn.games:active{box-shadow:0 2px 0 #16a8c4;}
/* My Badges — indigo (pairs with the badge frame) */
.welcome-btn.badges{background:linear-gradient(160deg,#8a7bff,#5f4bd6);color:#fff;border-color:#b4a8ff;
  box-shadow:0 6px 0 #4733ad,0 8px 18px rgba(120,90,240,.4);}
.welcome-btn.badges:active{box-shadow:0 2px 0 #4733ad;}

.topbar{display:flex;align-items:center;justify-content:space-between;min-height:54px;margin-bottom:4px;}
.coinbar{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.16);padding:7px 13px;border-radius:30px;font-weight:700;backdrop-filter:blur(4px);font-size:.92rem;}
.coinbar .star{color:var(--sun);font-size:1.05rem;}
.badge-ic{display:inline-block;width:1.45em;height:1.45em;background:var(--badge-frame) center/contain no-repeat;vertical-align:-0.42em;flex:none;filter:drop-shadow(0 1px 3px rgba(0,0,0,.4));}
.coinbar .badge-ic{width:1.35em;height:1.35em;vertical-align:middle;}
/* ---- stars currency ---- */
.starbar{margin-left:8px;gap:5px;padding:7px 12px;}
.starbar .star{color:#ffd23f;font-size:1.05rem;filter:drop-shadow(0 0 5px rgba(255,210,63,.6));}
.starbar.pulse{animation:starPulse .5s ease;}
@keyframes starPulse{0%{transform:scale(1);}40%{transform:scale(1.22);}100%{transform:scale(1);}}
.star-pop{position:fixed;top:64px;left:50%;transform:translateX(-50%);z-index:9997;font-family:'Fredoka',sans-serif;font-weight:800;font-size:1.4rem;color:#ffd23f;text-shadow:0 2px 8px rgba(0,0,0,.5),0 0 12px rgba(255,210,63,.7);pointer-events:none;animation:starPop 1.3s ease forwards;}
@keyframes starPop{0%{opacity:0;transform:translate(-50%,10px) scale(.6);}25%{opacity:1;transform:translate(-50%,-6px) scale(1.1);}70%{opacity:1;transform:translate(-50%,-18px) scale(1);}100%{opacity:0;transform:translate(-50%,-46px) scale(.9);}}
/* ---- read-aloud speaker button ---- */
.tts-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;margin-left:6px;vertical-align:middle;border:none;border-radius:50%;background:rgba(39,224,255,.18);color:#fff;font-size:.95rem;cursor:pointer;transition:transform .1s,background .15s;-webkit-tap-highlight-color:transparent;}
.tts-btn:active{transform:scale(.9);background:rgba(39,224,255,.4);}
/* ---- quest-win celebration ---- */
.win-cheer{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:6px;}
.win-cheer .wc-face{width:62px;height:62px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,.5);box-shadow:0 6px 16px rgba(0,0,0,.4);}
.win-cheer .wc-tez{animation:wcBobA 1.1s ease-in-out infinite;}
.win-cheer .wc-grum{animation:wcBobB 1.1s ease-in-out infinite;}
@keyframes wcBobA{0%,100%{transform:translateY(0) rotate(-4deg);}50%{transform:translateY(-8px) rotate(-4deg);}}
@keyframes wcBobB{0%,100%{transform:translateY(-8px) rotate(4deg);}50%{transform:translateY(0) rotate(4deg);}}
.win-stars{font-family:'Fredoka',sans-serif;font-weight:800;font-size:1.15rem;color:#ffd23f;text-shadow:0 0 10px rgba(255,210,63,.5);margin:2px 0 8px;animation:starPulse .6s ease 1;}
/* ---- locker ---- */
.locker-balance{text-align:center;color:#cdd6f5;font-size:.95rem;margin:4px 12px 14px;line-height:1.4;}
.locker-preview{display:flex;justify-content:center;gap:24px;margin-bottom:16px;padding-top:32px;overflow:visible;}
.locker-preview .lp-char{position:relative;width:96px;height:110px;display:flex;align-items:flex-end;justify-content:center;}
.locker-preview .lp-char img{max-width:100%;max-height:100%;object-fit:contain;}
.locker-preview .lp-hat{position:absolute;top:0;left:50%;width:2.95rem;height:2.95rem;margin-left:-1.475rem;filter:drop-shadow(0 3px 5px rgba(0,0,0,.5));}
#lpHatTez{width:26px;height:26px;margin-left:-9px;top:-11px;}
#lpHatTez .hat-svg{width:26px;height:26px;}
#lpHatGrum{width:31px;height:31px;margin-left:-15px;top:-12px;}
#lpHatGrum .hat-svg{width:31px;height:31px;}
#screen-home .duo .char{position:relative;}
.char-acc{position:absolute;top:0;left:0;z-index:4;pointer-events:none;}
.char-bob{position:relative;display:block;}
.char-acc .acc-svg{display:block;width:100%;height:auto;filter:drop-shadow(0 2px 3px rgba(0,0,0,.45));}
.lc-acc .acc-svg{width:2.4rem;height:auto;}
.lc-swatch{display:inline-flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;border-radius:12px;font-size:1.25rem;box-shadow:inset 0 -3px 6px rgba(0,0,0,.3);}
#screen-home .home-hat{position:absolute;top:6px;left:50%;width:2.7rem;height:2.7rem;margin-left:-1.35rem;z-index:5;filter:drop-shadow(0 3px 5px rgba(0,0,0,.5));pointer-events:none;}
#screen-home .char-tez .home-hat{animation:bobA 3s ease-in-out infinite;width:62px;height:62px;top:3px;margin-left:-23px;}
#screen-home .char-tez .home-hat .hat-svg{width:48px;height:48px;}
#screen-home .char-grum .home-hat{animation:bobB 3.4s ease-in-out infinite;width:68px;height:68px;top:-2px;margin-left:calc(-34px + 13.5px);}
#screen-home .char-grum .home-hat .hat-svg{width:52px;height:52px;}
.locker-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 4px 16px;}
.locker-card{background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.14);border-radius:16px;padding:12px 6px 10px;display:flex;flex-direction:column;align-items:center;gap:6px;}
.locker-card.equipped{border-color:var(--green);background:rgba(91,224,33,.14);box-shadow:0 0 14px rgba(91,224,33,.25);}
.locker-card .lc-emoji{font-size:2.2rem;line-height:1;height:38px;display:flex;align-items:center;}
.locker-card .lc-emoji.lc-none{opacity:.5;font-size:1.6rem;}
.locker-card .lc-name{font-size:.72rem;font-weight:700;color:#dde6ff;text-align:center;min-height:2em;display:flex;align-items:center;}
.lc-btn{width:100%;border:none;border-radius:10px;padding:7px 4px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:.78rem;cursor:pointer;color:#0a1027;background:#ffd23f;transition:transform .1s;-webkit-tap-highlight-color:transparent;}
.lc-btn.buy{position:relative;display:block;text-align:center;}
.lc-btn.buy .lc-cost{display:block;text-align:center;font-size:.92rem;}
.lc-btn.buy .lc-star{position:absolute;right:9px;top:50%;transform:translateY(-50%);color:#15205a;font-size:.95rem;line-height:1;}
.lc-btn.wear{background:#27e0ff;}
.lc-btn.is-equipped{background:rgba(91,224,33,.3);color:#bfffd0;cursor:default;}
.lc-btn:active{transform:scale(.95);}
.lc-btn.shake{animation:lcShake .4s;background:#ff6b6b;color:#fff;}
@keyframes lcShake{0%,100%{transform:translateX(0);}25%{transform:translateX(-4px);}75%{transform:translateX(4px);}}
.hat-svg{width:1em;height:1em;display:block;}
.locker-preview .lp-hat .hat-svg{width:2.95rem;height:2.95rem;}
#screen-home .home-hat .hat-svg{width:2.7rem;height:2.7rem;}
.logo-mark{width:64px;height:64px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 3px 8px rgba(0,0,0,.45));}
.logo-mark img{width:100%;height:100%;object-fit:contain;}
.brand-logo{width:min(74vw,300px);height:auto;display:block;margin:0 auto 6px;filter:drop-shadow(0 6px 18px rgba(39,224,255,.3));}
.logo-css{width:70px;height:70px;display:flex;align-items:center;justify-content:center;background:#0c1330;
  clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);box-shadow:0 0 0 3px var(--cyan),0 0 0 6px var(--green);}
.logo-css b{font-family:'Fredoka',sans-serif;font-weight:700;font-size:.72rem;line-height:.9;text-align:center;color:#eaf6ff;letter-spacing:.5px;text-shadow:0 1px 0 #1b3a6b;}

.screen{display:none;}
.screen.active{display:block;animation:enter .5s cubic-bezier(.2,.9,.3,1.3);}
@keyframes enter{from{opacity:0;transform:translateY(20px) scale(.97);}to{opacity:1;transform:none;}}

/* HOME */
.hero{text-align:center;margin:2px 0 8px;}
.hero h1{font-family:'Fredoka',sans-serif;font-weight:700;line-height:.95;font-size:clamp(2rem,8.5vw,3.1rem);color:var(--green);
  -webkit-text-stroke:1px #14361a;letter-spacing:1px;paint-order:stroke fill;
  text-shadow:-2px -2px 0 #14361a,2px -2px 0 #14361a,-2px 2px 0 #14361a,2px 2px 0 #14361a,0 5px 0 var(--green-d),0 7px 14px rgba(0,0,0,.4);}
.duo{display:flex;justify-content:center;align-items:flex-end;gap:14px;margin:4px 0 8px;min-height:230px;}
/* intro video overlay */
#introOverlay{position:fixed;inset:0;z-index:9999;background:radial-gradient(circle at 50% 38%,#0c1640 0%,#070a1f 60%,#04030a 100%);display:none;align-items:center;justify-content:center;overflow:hidden;}
#gamesVideoOverlay{position:fixed;inset:0;z-index:9998;background:#000;display:none;align-items:center;justify-content:center;overflow:hidden;}
#gamesVideoOverlay.show{display:flex;}
#gamesVideo{width:100%;height:100%;object-fit:contain;background:#000;}
#gamesVidSkip{position:absolute;bottom:max(28px,env(safe-area-inset-bottom));right:20px;z-index:5;font-family:'Fredoka',sans-serif;font-weight:700;font-size:1rem;color:#fff;background:rgba(255,255,255,.16);border:1.5px solid rgba(255,255,255,.3);border-radius:30px;padding:10px 22px;cursor:pointer;backdrop-filter:blur(6px);transition:transform .1s;}
#gamesVidSkip:active{transform:scale(.95);}
#introOverlay.show{display:flex;}
#introVideo{width:100%;height:100%;object-fit:contain;background:#000;}
/* animated intro */
#introAnim{position:absolute;inset:0;overflow:hidden;}
#introAnim::before{content:"";position:absolute;inset:0;background-image:radial-gradient(1.5px 1.5px at 20% 30%,#fff,transparent),radial-gradient(1.5px 1.5px at 70% 20%,#cfe8ff,transparent),radial-gradient(1px 1px at 40% 70%,#fff,transparent),radial-gradient(1.5px 1.5px at 85% 65%,#fff,transparent),radial-gradient(1px 1px at 60% 50%,#bfe0ff,transparent),radial-gradient(1px 1px at 10% 80%,#fff,transparent);background-repeat:repeat;background-size:auto;opacity:0;animation:iaStars 1.2s ease forwards;}
@keyframes iaStars{to{opacity:1;}}
.ia-planets{position:absolute;inset:0;}
.ia-pl{position:absolute;border-radius:50%;opacity:0;animation:iaPlIn .9s ease forwards;}
.ia-pl1{width:90px;height:90px;top:14%;left:-50px;background:radial-gradient(circle at 32% 30%,#ff9d6e,#c4502d 70%,#7a2f18);animation-delay:.2s;}
.ia-pl2{width:54px;height:54px;top:64%;right:-30px;left:auto;background:radial-gradient(circle at 35% 30%,#9fd0ff,#3f7fd6 70%,#244a86);animation-delay:.5s;}
.ia-pl3{width:38px;height:38px;top:24%;right:14%;left:auto;background:radial-gradient(circle at 35% 30%,#ffe7a8,#e9c25f 70%,#b48f2f);animation-delay:.8s;}
@keyframes iaPlIn{0%{opacity:0;transform:scale(.4);}60%{opacity:1;transform:scale(1.08);}100%{opacity:1;transform:scale(1);}}
.ia-chars{position:absolute;top:50%;left:50%;transform:translate(-50%,-58%);display:flex;align-items:flex-end;gap:8px;z-index:2;}
.ia-char{height:180px;width:auto;opacity:0;}
.ia-tez{animation:iaTezIn .8s cubic-bezier(.18,.9,.3,1.3) .35s forwards,iaBob 2.6s ease-in-out 1.3s infinite;}
.ia-grum{height:162px;animation:iaGrumIn .8s cubic-bezier(.18,.9,.3,1.3) .6s forwards,iaBob 2.6s ease-in-out 1.6s infinite;}
@keyframes iaTezIn{0%{opacity:0;transform:translateX(-120px) rotate(-12deg);}100%{opacity:1;transform:translateX(0) rotate(0);}}
@keyframes iaGrumIn{0%{opacity:0;transform:translateX(120px) rotate(12deg);}100%{opacity:1;transform:translateX(0) rotate(0);}}
@keyframes iaBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}
.ia-logo-wrap{position:absolute;top:50%;left:50%;transform:translate(-50%,72px);z-index:3;opacity:0;animation:iaLogoPop .7s cubic-bezier(.2,.9,.3,1.5) 1.25s forwards;}
.ia-logo{width:min(62vw,260px);height:auto;filter:drop-shadow(0 6px 18px rgba(0,0,0,.6));}
@keyframes iaLogoPop{0%{opacity:0;transform:translate(-50%,72px) scale(.5);}70%{opacity:1;transform:translate(-50%,72px) scale(1.12);}100%{opacity:1;transform:translate(-50%,72px) scale(1);}}
.ia-tagline{position:absolute;top:max(34px,calc(env(safe-area-inset-top,0px) + 26px));left:0;right:0;transform:translateY(0);text-align:center;z-index:3;
  font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.25rem;color:#fff;letter-spacing:.5px;
  text-shadow:0 2px 10px rgba(39,224,255,.6);opacity:0;animation:iaTagIn .6s ease 1.7s forwards;}
@keyframes iaTagIn{0%{opacity:0;transform:translateY(-20px);}100%{opacity:1;transform:translateY(0);}}
#introSkip{position:absolute;bottom:max(28px,env(safe-area-inset-bottom));right:20px;z-index:5;
  font-family:'Fredoka',sans-serif;font-weight:700;font-size:.95rem;color:#fff;
  background:rgba(0,0,0,.4);border:2px solid rgba(255,255,255,.55);border-radius:30px;padding:9px 20px;cursor:pointer;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:.15s;}
#introSkip:active{transform:scale(.95);}
.char{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:36px;}
/* near-black soft backing (blends with the black bg) so stars don't show through transparent hair gaps */
.char::before{content:"";position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);width:85%;height:80%;
  background:radial-gradient(ellipse at 50% 45%,#050507 55%,rgba(5,5,7,0) 75%);z-index:0;pointer-events:none;}
.char img{position:relative;z-index:1;height:200px;width:auto;object-fit:contain;display:block;margin-top:18px;filter:drop-shadow(0 10px 16px rgba(0,0,0,.55));}
.char-tez .char-bob{animation:bobA 3s ease-in-out infinite;}
.char-grum .char-bob{animation:bobB 3.4s ease-in-out infinite;}
.char-grum img{height:178px;}
@keyframes bobA{0%,100%{transform:translateY(0) rotate(-4deg);}50%{transform:translateY(-8px) rotate(-2deg);}}
@keyframes bobB{0%,100%{transform:translateY(0) rotate(4deg);}50%{transform:translateY(-6px) rotate(2deg);}}
/* cloud-wave — a slim cresting wave the character rides, centered under the feet */
/* sleek name tag that bobs in unison with its character */
.char .nametag{position:absolute;bottom:8px;left:50%;z-index:4;pointer-events:none;
  font-family:'Fredoka',sans-serif;font-weight:800;font-size:.82rem;letter-spacing:2px;color:#fff;
  padding:5px 16px;border-radius:30px;line-height:1;white-space:nowrap;
  border:2px solid rgba(255,255,255,.85);
  box-shadow:0 4px 14px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.35);
  text-shadow:0 1px 2px rgba(0,0,0,.4);}
.nt-tez{background:linear-gradient(160deg,#3ddcff,#1aa6cc);box-shadow:0 4px 14px rgba(39,224,255,.45),inset 0 1px 0 rgba(255,255,255,.4);
  animation:tagA 3s ease-in-out infinite;}
.nt-grum{background:linear-gradient(160deg,#6ee82c,#3fae18);box-shadow:0 4px 14px rgba(91,224,33,.45),inset 0 1px 0 rgba(255,255,255,.4);
  margin-left:-8px;animation:tagB 3.4s ease-in-out infinite;}
/* match the character bob (translateY) so tag + character rise together */
@keyframes tagA{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(-8px);}}
@keyframes tagB{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(-6px);}}

.cube-stage{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  min-height:calc(100vh - 250px);margin:0;padding-top:16vh;}
.cube-spacer{flex:1;}
.cube-hint{font-family:'Fredoka',sans-serif;font-weight:600;color:#cdd6ff;letter-spacing:1px;font-size:1.05rem;padding-bottom:12px;}
.cube{width:190px;height:190px;cursor:pointer;position:relative;transform-style:preserve-3d;transform:rotateX(-18deg) rotateY(-22deg);animation:cubeFloat 4s ease-in-out infinite;transition:transform .3s;}
.cube:active{transform:rotateX(-18deg) rotateY(-22deg) scale(.94);}
@keyframes cubeFloat{0%,100%{transform:rotateX(-18deg) rotateY(-22deg) translateY(0);}50%{transform:rotateX(-18deg) rotateY(-22deg) translateY(-12px);}}
.cube .face{position:absolute;width:190px;height:190px;background:#0c1226;border:2px solid #1f2c52;display:flex;align-items:center;justify-content:center;}
.cube .q{font-family:'Fredoka',sans-serif;font-weight:700;font-size:6rem;color:var(--green);text-shadow:0 0 18px rgba(91,224,33,.9),0 0 4px rgba(91,224,33,.9);}
.cube .front{transform:translateZ(95px);}.cube .back{transform:rotateY(180deg) translateZ(95px);}
.cube .right{transform:rotateY(90deg) translateZ(95px);}.cube .left{transform:rotateY(-90deg) translateZ(95px);}
.cube .top{transform:rotateX(90deg) translateZ(95px);background:#0e1530;}.cube .bottom{transform:rotateX(-90deg) translateZ(95px);}
.cube-glow{position:absolute;inset:-30px;border-radius:50%;background:radial-gradient(circle,rgba(91,224,33,.3),transparent 70%);z-index:-1;animation:pulse 3s ease-in-out infinite;}
/* anticipation shimmer */
.cube-shimmer{position:absolute;inset:-50px;border-radius:50%;border:2px solid rgba(39,224,255,.4);animation:shimmer 2.5s ease-out infinite;z-index:-1;}
@keyframes shimmer{0%{transform:scale(.6);opacity:.8;}100%{transform:scale(1.4);opacity:0;}}
@keyframes pulse{0%,100%{opacity:.5;transform:scale(1);}50%{opacity:.9;transform:scale(1.1);}}
.cube.opening{animation:cubeOpen .7s forwards;}
@keyframes cubeOpen{0%{transform:rotateX(-18deg) rotateY(-22deg) scale(1);}40%{transform:rotateX(-18deg) rotateY(60deg) scale(1.1);}100%{transform:rotateX(-18deg) rotateY(160deg) scale(0);opacity:0;}}

.chooser{display:none;animation:enter .5s cubic-bezier(.2,.9,.3,1.3);}
.chooser.show{display:block;}
.section-label{text-align:center;font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.05rem;color:#e4e9ff;letter-spacing:1px;margin:6px 0 20px;}
.query-card{background:var(--paper);color:var(--ink);border-radius:22px;padding:18px 16px;display:flex;align-items:center;gap:14px;margin-bottom:16px;cursor:pointer;border:none;width:100%;text-align:left;position:relative;overflow:hidden;box-shadow:0 7px 0 rgba(0,0,0,.18),0 12px 22px rgba(0,0,0,.25);transition:transform .14s,box-shadow .14s;}
.query-card:active{transform:translateY(5px);box-shadow:0 2px 0 rgba(0,0,0,.18),0 6px 12px rgba(0,0,0,.25);}
.query-card:focus-visible{outline:4px solid var(--cyan);outline-offset:3px;}
.qc-portal{flex:0 0 56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.7rem;position:relative;}
.qc-portal::before{content:"";position:absolute;inset:-3px;border-radius:50%;background:conic-gradient(from 0deg,transparent,var(--portal-c,#6a5cff),transparent 60%);animation:spin 4s linear infinite;opacity:.8;}
.qc-portal span{position:relative;z-index:2;background:#fff;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.qc-body{flex:1;display:flex;flex-direction:column;gap:5px;}
.qc-kicker{font-size:.64rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;}
.qc-title{font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.28rem;line-height:1.18;}
.qc-meta{font-size:.76rem;color:var(--ink-soft);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.qc-go{flex:0 0 auto;background:var(--green);color:#13340f;font-weight:800;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:1.15rem;box-shadow:0 4px 0 var(--green-d);}
.query-card.done .qc-go{background:var(--sun);box-shadow:0 4px 0 #c9941f;}
.badge-flag{position:absolute;top:0;right:0;background:var(--sun);color:#5a3d00;font-size:.58rem;font-weight:800;padding:3px 10px;border-bottom-left-radius:14px;display:none;}
.query-card.done .badge-flag{display:block;}
.shelf{margin-top:24px;text-align:center;}
.shelf-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:12px;}
.mini-badge{width:66px;height:66px;display:flex;align-items:center;justify-content:center;font-size:1.45rem;background:rgba(255,255,255,.05);border:2px dashed rgba(255,255,255,.22);border-radius:16px;color:rgba(255,255,255,.35);transition:.3s;}
.mini-badge.earned{width:72px;height:72px;position:relative;display:flex;align-items:center;justify-content:center;background:var(--badge-frame) center/contain no-repeat;border:none;border-radius:0;color:#fff;line-height:1;font-size:2rem;text-shadow:0 0 8px rgba(150,215,255,.55),0 0 3px rgba(255,255,255,.6),0 2px 3px rgba(0,0,0,.55);filter:saturate(1.25) drop-shadow(0 3px 8px rgba(60,180,255,.3));}.mini-badge.earned::before{content:"";position:absolute;left:50%;top:50.5%;width:46%;height:46%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.14) 0%,rgba(220,235,255,.05) 42%,rgba(220,235,255,0) 72%);z-index:0;pointer-events:none;}

/* CHEST */
.quest-top{display:flex;align-items:center;gap:12px;margin-bottom:6px;}
.back-btn{background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.2);color:#fff;width:42px;height:42px;border-radius:14px;font-size:1.2rem;cursor:pointer;flex:0 0 auto;}
.back-btn:active{transform:scale(.92);}
.quest-mini-title{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.05rem;opacity:.85;}
.chest-query-name{font-size:1.6rem;font-weight:700;opacity:1;line-height:1.15;}
/* chest screen: back button floats left, title centered (1 line preferred, wraps to 2 for long titles) */
.chest-top{position:relative;justify-content:center;min-height:48px;}
.chest-top .back-btn{position:absolute;left:0;top:50%;transform:translateY(-50%);}
.chest-top .chest-query-name{text-align:center;max-width:calc(100% - 110px);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.chest-stage{text-align:center;padding:10px 0;}
.chest-3d{width:190px;height:148px;margin:46px auto 34px;position:relative;cursor:pointer;perspective:620px;transform-style:preserve-3d;
  transform:scale(1.5) rotateX(7deg);transform-origin:center center;}
/* dark interior revealed when lid opens */
.chest-interior{position:absolute;bottom:0;left:6px;right:6px;height:84px;border-radius:8px 8px 14px 14px;
  background:linear-gradient(180deg,#1a1208,#0a0604);box-shadow:inset 0 6px 14px rgba(0,0,0,.7);z-index:0;
  border:2px solid #0e2a63;}
.chest-base{position:absolute;bottom:0;left:0;right:0;height:88px;border-radius:10px 10px 16px 16px;
  background:linear-gradient(105deg,#1a4099 0%,#2563d6 45%,#1a4099 55%,#102a63 100%);
  border:3px solid #0e2a63;z-index:2;
  box-shadow:inset 0 -10px 18px rgba(0,0,0,.4),inset 8px 0 14px rgba(0,0,0,.25),inset -8px 0 14px rgba(0,0,0,.25),0 10px 22px rgba(0,0,0,.45);}
/* horizontal gold band across the base */
.chest-base::before{content:"";position:absolute;left:-3px;right:-3px;top:26px;height:16px;
  background:linear-gradient(180deg,#ffe07a,#e0a417 55%,#b67d0c);border-top:2px solid #fff3c4;border-bottom:2px solid #8a5d08;box-shadow:0 2px 5px rgba(0,0,0,.3);}
/* gold lock plate */
.chest-base::after{content:"";position:absolute;left:50%;top:22px;transform:translateX(-50%);width:30px;height:36px;border-radius:7px;
  background:linear-gradient(160deg,#ffe07a,#d99a14);border:2px solid #8a5d08;z-index:3;
  box-shadow:inset 0 2px 3px rgba(255,255,255,.5),0 3px 6px rgba(0,0,0,.35);}
/* the lid — sits on top of the base, hinges at its BACK edge */
.chest-lid{position:absolute;top:-4px;left:0;right:0;height:70px;transform-origin:50% calc(100% - 3px);transform-style:preserve-3d;
  border-radius:60px 60px 8px 8px;z-index:4;}
/* front face (green top) */
.chest-lid .lid-front{position:absolute;inset:0;border-radius:60px 60px 8px 8px;
  background:linear-gradient(170deg,#7bf03a 0%,#5cd420 45%,#3da512 100%);border:3px solid #2c7d0c;
  box-shadow:inset 0 8px 16px rgba(255,255,255,.35),inset 0 -6px 12px rgba(0,0,0,.2),0 4px 10px rgba(0,0,0,.3);
  -webkit-backface-visibility:hidden;backface-visibility:hidden;}
.chest-lid .lid-front::after{content:"";position:absolute;left:-3px;right:-3px;bottom:6px;height:14px;
  background:linear-gradient(180deg,#ffe07a,#e0a417);border-top:2px solid #fff3c4;border-bottom:2px solid #8a5d08;}
.chest-lid .rivet{position:absolute;width:14px;height:14px;border-radius:50%;z-index:2;
  background:radial-gradient(circle at 35% 30%,#aef76e,#5cd420);box-shadow:inset 0 -2px 3px rgba(0,0,0,.3),0 1px 2px rgba(0,0,0,.3);top:32px;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;}
.chest-lid .r1{left:22px;}.chest-lid .r2{left:50%;transform:translateX(-50%);}.chest-lid .r3{right:22px;}
/* the lid's underside — sits on the opposite face, shows when open */
.lid-back{position:absolute;inset:0;border-radius:60px 60px 8px 8px;transform:rotateY(180deg);
  background:linear-gradient(170deg,#3da512 0%,#2c7d0c 50%,#1f5c08 100%);border:3px solid #1f5c08;
  box-shadow:inset 0 0 20px rgba(0,0,0,.5),inset 0 6px 10px rgba(0,0,0,.35);
  -webkit-backface-visibility:hidden;backface-visibility:hidden;}
.lid-back::before{content:"";position:absolute;inset:10px 16px;border-radius:40px 40px 6px 6px;
  border:2px solid rgba(0,0,0,.28);background:linear-gradient(170deg,rgba(255,255,255,.06),transparent);}
/* HINGE: pin bar + knuckles at the lid/base junction */
.chest-hinge{position:absolute;top:60px;left:10px;right:10px;height:10px;z-index:3;pointer-events:none;}
.chest-hinge .hinge-pin{position:absolute;left:14px;right:14px;top:3px;height:4px;border-radius:3px;
  background:linear-gradient(180deg,#f6d873,#b67d0c);box-shadow:0 1px 2px rgba(0,0,0,.5),inset 0 1px 1px rgba(255,255,255,.6);}
.chest-hinge .knuckle{position:absolute;top:0;width:16px;height:10px;border-radius:5px;
  background:linear-gradient(180deg,#ffe07a 20%,#d99a14 60%,#8a5d08);border:1px solid #8a5d08;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.55),0 2px 3px rgba(0,0,0,.45);}
.chest-hinge .k1{left:34px;}.chest-hinge .k2{right:34px;}
.lid-edge{position:absolute;left:2px;right:2px;bottom:-5px;height:7px;border-radius:2px;
  background:linear-gradient(180deg,#2c7d0c,#1a4a06);transform:rotateX(-90deg);transform-origin:top center;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.15);}
/* 3D lid opening — hinges back on its bottom edge, stays attached to the chest */
.chest-3d.open .chest-lid{animation:lidOpen3D .9s cubic-bezier(.3,.7,.4,1.3) forwards;}
@keyframes lidOpen3D{0%{transform:rotateX(0deg);}55%{transform:rotateX(-128deg);}75%{transform:rotateX(-104deg);}100%{transform:rotateX(-112deg);}}
.chest-light{position:absolute;top:34px;left:50%;transform:translateX(-50%);width:120px;height:60px;border-radius:50%;background:radial-gradient(circle,rgba(255,234,150,.95),rgba(255,200,80,.3) 50%,transparent 72%);opacity:0;z-index:1;}
.chest-3d.open .chest-light{animation:glow .8s .4s forwards;}
@keyframes glow{to{opacity:1;}}
.chest-shimmer{position:absolute;inset:-20px;border-radius:50%;border:2px solid rgba(255,200,61,.5);animation:shimmer 2.5s ease-out infinite;}
.chest-3d.open .chest-shimmer{display:none;}
.chest-title{font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.7rem;margin:40px 0 6px;color:#7CE635;text-shadow:0 2px 0 #2c7d0c;letter-spacing:.2px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
.chest-sub{color:#e4e9ff;font-weight:700;font-size:1.05rem;max-width:380px;margin:0 auto;}
.chest-items{list-style:none;max-width:420px;margin:24px auto 0;text-align:left;display:flex;flex-direction:column;gap:9px;}
.chest-items li{background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.15);border-radius:14px;padding:11px 14px;font-weight:600;display:flex;gap:10px;align-items:flex-start;opacity:0;transform:translateY(10px);}
.chest-items li.in{animation:fadeUp .4s forwards;}
@keyframes fadeUp{to{opacity:1;transform:none;}}
.chest-items .dot{color:var(--green);font-size:1.1rem;}

/* ===== GEAR TOOLS (collectible, reappear in quest) ===== */
.gear-grid{display:flex;flex-direction:column;gap:8px;max-width:440px;margin:12px auto 0;}
.gear-card{display:flex;align-items:center;gap:12px;background:linear-gradient(160deg,#2a3568,#1a2350);
  border:2px solid rgba(255,255,255,.18);border-top-color:rgba(255,255,255,.35);
  border-radius:16px;padding:10px 13px;text-align:left;cursor:pointer;
  box-shadow:0 5px 0 #0e1430,0 9px 16px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.15);
  transition:transform .1s,box-shadow .1s;opacity:0;transform:translateY(10px);}
.gear-card.in{animation:gearIn .45s cubic-bezier(.2,.9,.3,1.5) forwards;}
@keyframes gearIn{from{opacity:0;transform:translateY(18px) scale(.92);}to{opacity:1;transform:translateY(0) scale(1);}}
.gear-card:active{transform:translateY(4px);box-shadow:0 1px 0 #0e1430,0 4px 8px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.15);}
.gear-card.grabbed{border-color:var(--green);border-top-color:#8df048;box-shadow:0 5px 0 #2c7d0c,0 9px 18px rgba(91,224,33,.3),inset 0 1px 0 rgba(255,255,255,.2);}
.gear-icon{flex:0 0 44px;height:44px;border-radius:12px;background:linear-gradient(160deg,#3a4680,#1a2350);
  display:flex;align-items:center;justify-content:center;font-size:1.7rem;position:relative;transition:.2s;
  box-shadow:inset 0 2px 3px rgba(255,255,255,.25),inset 0 -4px 7px rgba(0,0,0,.4),0 3px 6px rgba(0,0,0,.3);}
.gear-card.grabbed .gear-icon{background:linear-gradient(160deg,#3da512,#2c7d0c);animation:gearPop .4s;}
@keyframes gearPop{0%{transform:scale(1);}50%{transform:scale(1.25) rotate(-8deg);}100%{transform:scale(1);}}
.gear-info{flex:1;display:flex;flex-direction:column;gap:3px;}
.gear-name{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1rem;color:#fff;line-height:1.2;display:block;}
.gear-desc{font-size:.78rem;color:#b9c2e8;font-weight:600;line-height:1.3;display:block;}
.gear-check{flex:0 0 auto;font-size:1.3rem;color:rgba(255,255,255,.3);transition:.2s;}
.gear-card.grabbed .gear-check{color:var(--green);}
.gear-tip{text-align:center;font-size:.82rem;color:#cdd6ff;font-weight:600;margin-top:6px;min-height:20px;}

/* equipped tool badge that appears in quest stages */
.equipped-tool{display:inline-flex;align-items:center;gap:7px;background:rgba(91,224,33,.16);border:2px solid var(--green);
  border-radius:30px;padding:5px 14px 5px 6px;margin:0 auto 12px;font-family:'Fredoka',sans-serif;font-weight:600;font-size:.82rem;color:#1d5210;}
.equipped-tool .et-ic{width:30px;height:30px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:1.1rem;}
.tool-banner{display:flex;justify-content:center;margin-bottom:4px;}
.begin-btn{margin:16px auto 0;display:none;font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.1rem;background:var(--green);color:#13340f;border:none;border-radius:18px;padding:14px 34px;cursor:pointer;box-shadow:0 6px 0 var(--green-d);}
.begin-btn.in{display:block;animation:fadeUp .4s forwards;opacity:1;transform:none;}
.begin-btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--green-d);}

/* QUEST */
.path{display:flex;align-items:center;justify-content:center;margin:10px 0 12px;flex-wrap:wrap;gap:2px;}
.path-node{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.75rem;color:rgba(255,255,255,.6);flex:0 0 auto;transition:.4s;border:2px solid transparent;}
.path-node.on{background:var(--cyan);color:#06243a;border-color:#fff;box-shadow:0 0 14px rgba(39,224,255,.8);transform:scale(1.15);}
.path-node.done{background:var(--green);color:#14361a;}
.path-node.flag.done{background:var(--sun);}
.path-link{height:4px;width:26px;background:rgba(255,255,255,.16);flex:0 0 auto;transition:.4s;}
.path-link.done{background:var(--green);}
.stage{animation:stageIn .55s cubic-bezier(.2,.9,.3,1.4);}
@keyframes stageIn{from{opacity:0;transform:translateY(26px) scale(.96);}to{opacity:1;transform:none;}}
.stage-guide{display:flex;align-items:flex-end;gap:10px;justify-content:center;margin-bottom:6px;}
.guide-av{width:74px;height:74px;border-radius:18px;display:flex;align-items:flex-end;justify-content:center;font-size:2.3rem;color:#fff;box-shadow:0 8px 18px rgba(0,0,0,.3);border:3px solid rgba(255,255,255,.25);flex:0 0 auto;overflow:hidden;}
.guide-av img{width:100%;height:100%;object-fit:contain;border-radius:19px;}
.guide-av.has-char img{width:150%;height:auto;max-height:none;object-fit:cover;object-position:top center;border-radius:0;align-self:flex-start;margin-top:-2px;}
.guide-av.face{border-radius:50%;align-items:center;border-color:rgba(255,255,255,.45);}
.guide-av.face img{width:100%;height:100%;max-height:none;object-fit:cover;object-position:center;border-radius:50%;align-self:center;margin-top:0;}
.av-tez{background:linear-gradient(160deg,#2f8bff,#1b54c9);}
.av-grum{background:linear-gradient(160deg,#39b6ff,#2a78d6);}
.react-think{animation:think 1.6s ease-in-out infinite;}
@keyframes think{0%,100%{transform:rotate(-3deg);}50%{transform:rotate(3deg) translateY(-3px);}}
.react-cheer{animation:cheer .5s ease-in-out infinite;}
@keyframes cheer{0%,100%{transform:translateY(0) rotate(0);}25%{transform:translateY(-12px) rotate(-8deg);}75%{transform:translateY(-12px) rotate(8deg);}}
.react-wobble{animation:wobble .4s ease;}
@keyframes wobble{0%,100%{transform:translateX(0);}20%{transform:translateX(-6px) rotate(-5deg);}60%{transform:translateX(6px) rotate(5deg);}}
.speech{background:#eef1ff;color:var(--ink);border-radius:18px;border-bottom-left-radius:4px;padding:13px 16px;font-weight:700;font-size:1.05rem;line-height:1.35;max-width:330px;}
.speech .who{font-size:.64rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--violet);display:block;margin-bottom:2px;}
/* speaker color-coding: Tez = light blue, Grum = green */
.speech.speech-tez{background:linear-gradient(160deg,#dff6ff,#c5ecff);border:2px solid var(--cyan);}
.speech.speech-tez .who{color:#0c7fa3;}
.speech.speech-grum{background:linear-gradient(160deg,#e6fbdd,#d2f5c4);border:2px solid var(--green);}
.speech.speech-grum .who{color:#2c7d0c;}
.query-hero{background:linear-gradient(165deg,#6ee82c,#5BE021 55%,#46b815);color:#0f2e08;border-radius:26px;padding:18px 18px;text-align:center;margin-top:4px;
  box-shadow:0 14px 34px rgba(0,0,0,.34),inset 0 2px 0 rgba(255,255,255,.4);border:3px solid #3da512;}
.query-kicker{font-size:.7rem;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#1d5210;}
.query-text{font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.5rem;line-height:1.15;margin:8px 0 2px;color:#0f2e08;
  text-shadow:0 1px 0 rgba(255,255,255,.35);}
.opts{display:flex;flex-direction:column;gap:9px;margin-top:14px;}
.opt{background:#f3f4ff;border:3px solid #e2e4f7;border-radius:16px;padding:12px 14px;font-size:1.04rem;font-weight:700;color:var(--ink);text-align:left;cursor:pointer;transition:.12s;font-family:inherit;display:flex;align-items:center;gap:13px;}
.opt .key{flex:0 0 34px;height:34px;border-radius:10px;background:#fff;border:2px solid #d7daf0;display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--violet);}
.opt:active{transform:scale(.985);}
.opt:focus-visible{outline:4px solid var(--cyan);outline-offset:2px;}
.opt.correct{background:#fff;border-color:#1d5210;color:#1d5210;animation:rightPulse .5s;box-shadow:0 0 0 3px rgba(255,255,255,.5);}
@keyframes rightPulse{0%{transform:scale(1);}40%{transform:scale(1.04);}100%{transform:scale(1);}}
.opt.correct .key{background:var(--green);color:#14361a;border-color:var(--green);}
.opt.wrong{background:#fff4e0;border-color:var(--sun);color:#7a5400;animation:tip .45s;}
@keyframes tip{0%,100%{transform:rotate(0);}30%{transform:rotate(-2deg);}70%{transform:rotate(2deg);}}
.opt.wrong .key{background:var(--sun);color:#5a3d00;border-color:var(--sun);}
.opt.lock{pointer-events:none;opacity:.55;}
.opt.lock.correct,.opt.lock.wrong{opacity:1;}
.feedback{margin-top:14px;border-radius:14px;padding:12px 15px;font-weight:700;font-size:.98rem;display:none;text-align:left;}
.feedback.good{display:block;background:#e3fbe0;color:#1d5210;border:2px solid #b6e9ac;animation:fadeUp .4s forwards;opacity:1;transform:none;}
.feedback.try{display:block;background:#fff2d6;color:#7a5400;border:2px solid #f0d28a;animation:fadeUp .4s forwards;opacity:1;transform:none;}
.next-btn{margin-top:16px;width:100%;font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.1rem;background:var(--green);color:#13340f;border:none;border-radius:18px;padding:15px;cursor:pointer;box-shadow:0 6px 0 var(--green-d);display:none;box-sizing:border-box;min-height:54px;}
.quest-btn-row{display:flex;gap:10px;align-items:stretch;margin-top:14px;}
.quest-btn-row .next-btn{margin-top:0;flex:1;}
.prev-btn{font-family:'Fredoka',sans-serif;font-weight:700;font-size:1rem;background:rgba(255,255,255,.85);color:#3a3a52;border:none;border-radius:18px;padding:15px 20px;cursor:pointer;flex:0 0 auto;box-sizing:border-box;min-height:54px;box-shadow:0 6px 0 #c3c6dc;}
.prev-btn:active{transform:translateY(2px);}
.next-btn.show{display:block;}
.next-btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--green-d);}

/* ===== INTERACTIVE LAB (minds-on) ===== */
.lab{margin-top:18px;}
.lab-instr{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.05rem;color:var(--ink);margin-bottom:14px;text-align:center;}
/* drag buckets (planets) */
.bucket-row{display:flex;gap:12px;margin-bottom:16px;}
.bucket{flex:1;min-height:128px;border-radius:20px;border:3px dashed #cfd3ef;padding:12px 10px;text-align:center;transition:.15s;display:flex;flex-direction:column;}
.bucket[data-type="rocky"]{border-color:#d9a98a;background:linear-gradient(165deg,#fbf1ea,#f4e2d6);}
.bucket[data-type="gas"]{border-color:#a9c4e0;background:linear-gradient(165deg,#eef5fc,#dcebf8);}
.bucket.over{border-style:solid;border-color:var(--green);background:#edfbe9;transform:scale(1.03);box-shadow:0 6px 18px rgba(91,224,33,.25);}
.bucket-label{font-family:'Fredoka',sans-serif;font-weight:700;font-size:.98rem;color:#3a3f6a;margin-bottom:8px;}
.bucket-drop{flex:1;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;}
.tray{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;padding:16px 12px;background:radial-gradient(circle at 50% 0%,#10173a,#0a1027);border:1px solid rgba(120,150,220,.25);border-radius:18px;min-height:90px;align-items:center;box-shadow:inset 0 2px 12px rgba(0,0,0,.4);}
/* ===== realistic draggable planets (rock sorter) ===== */
.planet{width:60px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:grab;touch-action:none;user-select:none;transition:transform .1s;}
.planet .pl-body{width:54px;height:54px;border-radius:50%;position:relative;overflow:hidden;z-index:1;
  box-shadow:0 5px 12px rgba(0,0,0,.4),inset -6px -7px 14px rgba(0,0,0,.55),inset 5px 5px 12px rgba(255,255,255,.18);}
.planet .pl-name{font-size:.62rem;font-weight:800;color:#dde6ff;letter-spacing:.2px;text-shadow:0 1px 2px rgba(0,0,0,.5);}
.bucket .planet .pl-name{color:#3a3f6a;text-shadow:none;}
.planet.dragging{opacity:.5;transform:scale(1.1);}
.planet.placed{width:46px;}
.planet.placed .pl-body{width:40px;height:40px;}
.planet.placed .pl-name{font-size:.55rem;}
/* Mars — rusty red with darker mottling */
.pl-mars .pl-body{background:radial-gradient(circle at 36% 30%,#e9683a,#c1440e 55%,#7d2906 100%);}
.pl-mars .pl-body::after{content:"";position:absolute;inset:0;background:
  radial-gradient(circle at 64% 60%,rgba(90,30,8,.55),transparent 30%),
  radial-gradient(circle at 30% 70%,rgba(120,45,12,.5),transparent 28%);}
/* Earth — blue oceans, green land, cloud sheen */
.pl-earth .pl-body{background:radial-gradient(circle at 36% 30%,#5aa9e6,#2e7dd1 50%,#13407a 100%);}
.pl-earth .pl-body::after{content:"";position:absolute;inset:0;background:
  radial-gradient(circle at 60% 45%,rgba(76,160,80,.9),transparent 22%),
  radial-gradient(circle at 35% 68%,rgba(76,160,80,.8),transparent 20%),
  radial-gradient(circle at 70% 72%,rgba(120,190,120,.7),transparent 16%);}
/* Jupiter — banded gas giant with great red spot */
.pl-jupiter .pl-body{background:
  linear-gradient(0deg,#c99a6b 0 12%,#e6c79c 12% 24%,#cf9d6e 24% 38%,#f0d8b4 38% 50%,#c08a5a 50% 62%,#e8caa0 62% 76%,#cf9d6e 76% 88%,#dbb789 88% 100%);}
.pl-jupiter .pl-body::after{content:"";position:absolute;top:54%;left:24%;width:16px;height:11px;border-radius:50%;
  background:radial-gradient(circle,#c0432a,#8c2f1c);box-shadow:0 0 4px rgba(0,0,0,.3);}
/* Saturn — pale gold banded body + rings that wrap around it */
.pl-saturn .pl-body{background:
  linear-gradient(0deg,#d9b878 0 18%,#f0dcae 18% 36%,#dcc089 36% 54%,#efdaa8 54% 72%,#d4b074 72% 100%);}
.pl-saturn .pl-body{position:relative;overflow:visible;z-index:auto;isolation:auto;}
.planet.pl-saturn,.order-planet.pl-saturn{isolation:isolate;}
/* ring behind the planet (top half) */
.pl-saturn .pl-body::before{content:"";position:absolute;top:50%;left:50%;width:148%;height:54%;
  transform:translate(-50%,-50%) rotate(-16deg);border-radius:50%;
  border:4px solid rgba(214,186,132,.92);background:transparent;z-index:-1;pointer-events:none;}
/* ring in front of the planet (bottom half) */
.pl-saturn .pl-body::after{content:"";position:absolute;top:50%;left:50%;width:148%;height:54%;
  transform:translate(-50%,-50%) rotate(-16deg);border-radius:50%;
  border:4px solid rgba(235,210,160,1);background:transparent;z-index:2;pointer-events:none;
  clip-path:polygon(0 50%,100% 50%,100% 100%,0 100%);}
/* pressure tap (volcano) */
.volcano-vis{position:relative;height:220px;margin-bottom:12px;display:flex;align-items:flex-end;justify-content:center;}
.volcano-mtn{width:250px;height:158px;clip-path:polygon(44% 0,58% 0,63% 10%,69% 22%,74% 36%,81% 52%,87% 70%,94% 86%,100% 100%,0 100%,7% 84%,14% 68%,20% 52%,27% 36%,33% 21%,39% 9%);position:relative;
  /* layered gradient gives a lit left face and shadowed right face for 3D volume */
  background:
    linear-gradient(105deg,rgba(255,255,255,.14) 0%,transparent 32%),
    linear-gradient(255deg,rgba(0,0,0,.5) 0%,transparent 42%),
    radial-gradient(ellipse at 50% 0%,#86604c,#5a3c2e 42%,#341f15 100%);
  filter:drop-shadow(0 12px 16px rgba(0,0,0,.55));}
/* rocky texture speckles on the cone */
.volcano-mtn::before{content:"";position:absolute;inset:0;opacity:.45;pointer-events:none;
  background-image:radial-gradient(3px 3px at 30% 60%,rgba(0,0,0,.45),transparent),radial-gradient(2px 2px at 60% 75%,rgba(0,0,0,.4),transparent),radial-gradient(2px 2px at 45% 50%,rgba(255,210,150,.4),transparent),radial-gradient(3px 3px at 72% 55%,rgba(0,0,0,.35),transparent),radial-gradient(2px 2px at 25% 80%,rgba(255,210,150,.3),transparent),radial-gradient(2px 2px at 55% 88%,rgba(0,0,0,.3),transparent);}
/* darker rocky ridges down the sides for chunky relief */
.volcano-mtn::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:linear-gradient(90deg,transparent 38%,rgba(0,0,0,.25) 50%,transparent 62%);}
/* glowing crater rim at the top */
.volcano-crater{position:absolute;top:-9px;left:50%;transform:translateX(-50%);width:72px;height:24px;
  background:radial-gradient(ellipse at 50% 40%,#ff9a3d,#ff5d2e 45%,#a83410 70%,#2a1810 100%);border-radius:50%;
  box-shadow:0 0 22px rgba(255,122,46,.8),inset 0 -4px 8px rgba(0,0,0,.6),inset 0 3px 5px rgba(255,200,120,.7);z-index:2;}
.lava-fill{position:absolute;bottom:0;left:0;right:0;width:100%;
  background:linear-gradient(0deg,#ff3d00,#ff7a2e 50%,#ffd24d);height:0;transition:height .12s ease-out;
  box-shadow:0 0 16px rgba(255,122,46,.6);
  animation:lavaBubble 0.6s ease-in-out infinite alternate;}
@keyframes lavaBubble{from{filter:brightness(1);}to{filter:brightness(1.18);}}
.lava-erupt{position:absolute;top:0;left:50%;transform:translateX(-50%);width:60px;height:0;background:linear-gradient(0deg,#ff5d2e,#ffd24d,transparent);border-radius:50% 50% 0 0;}
/* lava streams flowing down the volcano sides */
.lava-stream{position:absolute;top:8px;width:12px;height:0;z-index:3;
  background:linear-gradient(180deg,#ffe07a,#ff8a3a 40%,#ff4a12 80%,#c22f05);
  box-shadow:0 0 10px rgba(255,130,50,.9);filter:blur(.3px);
  border-radius:45% 55% 40% 60%/8px 8px 14px 14px;}
.lava-stream.left{left:41%;transform:rotate(15deg) skewX(-6deg);transform-origin:top;}
.lava-stream.right{right:41%;transform:rotate(-15deg) skewX(6deg);transform-origin:top;}
.lava-stream.flow{animation:lavaFlow 1.5s cubic-bezier(.5,0,.6,1) forwards,lavaShimmer .5s ease-in-out .8s infinite alternate;}
@keyframes lavaFlow{0%{height:0;}100%{height:126px;}}
@keyframes lavaShimmer{from{filter:brightness(1) blur(.3px);}to{filter:brightness(1.25) blur(.3px);}}
.lava-pool-l,.lava-pool-r{position:absolute;bottom:-3px;width:0;height:12px;border-radius:50%;z-index:4;
  background:radial-gradient(ellipse at 50% 30%,#ffce5a,#ff7a2e 55%,#d23a08);box-shadow:0 0 14px rgba(255,130,50,.8);}
.lava-pool-l{left:16%;}.lava-pool-r{right:16%;}
.lava-pool-l.flow,.lava-pool-r.flow{animation:poolGrow 1.2s ease-out 1.1s forwards;}
@keyframes poolGrow{from{width:0;opacity:0;}to{width:64px;opacity:1;}}
/* glowing crater when erupting */
.crater-glow{position:absolute;top:-12px;left:50%;transform:translateX(-50%);width:70px;height:30px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,210,77,.95),rgba(255,93,46,.4),transparent 70%);opacity:0;z-index:4;}
.crater-glow.on{animation:craterGlow 1.6s ease-out forwards;}
@keyframes craterGlow{0%{opacity:0;transform:translateX(-50%) scale(.4);}30%{opacity:1;transform:translateX(-50%) scale(1.3);}100%{opacity:.7;transform:translateX(-50%) scale(1);}}

/* ===== STAR BLOCKS (Block Blast) ===== */
.blocks-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;overscroll-behavior:none;}
.blocks-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;background:rgba(10,16,40,.7);
  width:min(92vw,380px);aspect-ratio:1;
  border:3px solid rgba(39,224,255,.35);border-radius:14px;padding:6px;touch-action:none;
  box-shadow:0 0 22px rgba(39,224,255,.2),inset 0 0 24px rgba(0,0,0,.4);}
.bcell{aspect-ratio:1;border-radius:6px;background:rgba(255,255,255,.05);box-shadow:inset 0 1px 2px rgba(0,0,0,.3);transition:background .12s;}
.bcell.filled{box-shadow:inset 0 2px 3px rgba(255,255,255,.3),inset 0 -3px 5px rgba(0,0,0,.3);}
.bcell.hint{background:rgba(255,255,255,.22)!important;}
.bcell.clearing{animation:cellClear .4s forwards;}
@keyframes cellClear{0%{transform:scale(1);filter:brightness(1);}40%{transform:scale(1.15);filter:brightness(2);}100%{transform:scale(0);opacity:0;}}
.blocks-tray{display:flex;justify-content:space-around;align-items:center;gap:10px;width:100%;max-width:380px;min-height:90px;
  background:rgba(255,255,255,.05);border:2px solid rgba(255,255,255,.12);border-radius:18px;padding:10px;}
.tray-slot{display:flex;align-items:center;justify-content:center;min-width:78px;min-height:70px;}
.tray-piece{display:grid;gap:2px;cursor:grab;touch-action:none;transition:transform .12s;}
.tray-piece.used{opacity:.18;pointer-events:none;}
.tray-piece:active{cursor:grabbing;}
.pcell{width:16px;height:16px;border-radius:4px;box-shadow:inset 0 1px 2px rgba(255,255,255,.3),inset 0 -2px 3px rgba(0,0,0,.3);}
.drag-ghost{position:fixed;display:grid;gap:3px;z-index:200;pointer-events:none;opacity:.92;}
.drag-ghost .pcell{width:var(--gc,34px);height:var(--gc,34px);border-radius:6px;}
.pressure-meter{height:22px;background:#eef1ff;border-radius:12px;overflow:hidden;margin-bottom:12px;border:2px solid #d7daf0;}
.pressure-bar{height:100%;width:0;background:linear-gradient(90deg,#ffd24d,#ff5d2e,#ff3d00);transition:width .12s;border-radius:10px;}
.tap-btn{width:100%;font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.2rem;background:var(--coral);color:#fff;border:none;border-radius:18px;padding:18px;cursor:pointer;box-shadow:0 6px 0 #c93a4d;user-select:none;}
.tap-btn:active{transform:translateY(4px);box-shadow:0 2px 0 #c93a4d;}
/* speed slider (gravity) */
.sky-vis{position:relative;height:170px;background:linear-gradient(180deg,#bfe3ff,#e9f6ff);border-radius:16px;overflow:hidden;margin-bottom:12px;border:2px solid #cfe6f5;}
.ground{position:absolute;bottom:0;left:0;right:0;height:34px;background:linear-gradient(180deg,#7cc96a,#5aa84a);}
.earth-curve{position:absolute;bottom:-120px;left:50%;transform:translateX(-50%);width:300px;height:300px;border-radius:50%;background:radial-gradient(circle at 50% 30%,#7cc96a,#4a8a3c);display:none;}
.thrown-ball{position:absolute;width:34px;height:34px;font-size:30px;line-height:34px;text-align:center;left:11%;top:calc(50% - 17px);filter:drop-shadow(0 0 6px rgba(255,255,255,.7));z-index:6;}
/* ===== BLACK HOLE GRAVITY LAB ===== */
.bh-vis{position:relative;height:200px;border-radius:16px;overflow:hidden;margin-bottom:12px;border:2px solid #2a1a4a;
  background:radial-gradient(circle at 50% 50%,#1a1030,#0a0618 70%);}
.bh-stars{position:absolute;inset:0;background-image:radial-gradient(1px 1px at 15% 25%,#fff,transparent),radial-gradient(1px 1px at 70% 15%,#fff,transparent),radial-gradient(1px 1px at 85% 60%,#fff,transparent),radial-gradient(1px 1px at 25% 70%,#fff,transparent),radial-gradient(1px 1px at 55% 80%,#fff,transparent),radial-gradient(1px 1px at 40% 40%,rgba(200,210,255,.8),transparent);opacity:.7;}
.bh-hole{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:74px;height:74px;z-index:2;}
.bh-disk{position:absolute;inset:-14px;border-radius:50%;background:conic-gradient(from 0deg,#7b3ff2,#ff5d73,#ffc83d,#27e0ff,#7b3ff2);
  filter:blur(5px);opacity:.85;animation:bhSpin 3s linear infinite;}
.bh-core{position:absolute;inset:8px;border-radius:50%;background:radial-gradient(circle at 50% 50%,#000 55%,#1a0d2e 75%,transparent);
  box-shadow:inset 0 0 18px #000,0 0 22px rgba(123,63,242,.6);}
@keyframes bhSpin{to{transform:rotate(360deg);}}
.bh-hole.pulling .bh-disk{animation:bhSpin 0.7s linear infinite;}
.bh-hole.pulling .bh-core{box-shadow:inset 0 0 18px #000,0 0 36px rgba(255,93,115,.8);}
.bh-launch{position:absolute;left:4%;top:62%;transform:translate(-50%,-50%) rotate(-45deg);font-size:24px;z-index:3;filter:drop-shadow(0 0 4px rgba(39,224,255,.6));}
.bh-goal{position:absolute;right:6%;top:50%;transform:translate(50%,-50%);font-size:24px;z-index:3;}
.slider-wrap{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.slider-wrap input[type=range]{flex:1;accent-color:var(--violet);height:8px;}
.slider-label{font-family:'Fredoka',sans-serif;font-weight:600;font-size:.85rem;color:var(--ink-soft);min-width:70px;}
.throw-btn{width:100%;font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.1rem;background:var(--violet);color:#fff;border:none;border-radius:18px;padding:15px;cursor:pointer;box-shadow:0 6px 0 #5a2bc4;}
.throw-btn:active{transform:translateY(4px);box-shadow:0 2px 0 #5a2bc4;}
.lab-done-btn{margin-top:14px;width:100%;font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.1rem;background:var(--green);color:#13340f;border:none;border-radius:18px;padding:15px;cursor:pointer;box-shadow:0 6px 0 var(--green-d);display:none;}
.lab-done-btn.show{display:block;animation:fadeUp .4s forwards;opacity:1;transform:none;}

/* ===== ORDER-BY-SIZE ===== */
.order-slots{display:flex;gap:8px;justify-content:center;margin-bottom:16px;}
.order-slot{flex:1;min-width:0;max-width:84px;height:98px;border-radius:16px;border:3px dashed #cfd3ef;background:#f3f4ff;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:6px 3px 7px;transition:.15s;position:relative;}
.order-slot.over{border-color:var(--green);background:#edfbe9;}
.order-slot .slot-rank{position:static;width:100%;text-align:center;font-size:.58rem;font-weight:800;color:var(--ink-soft);flex:0 0 auto;margin-bottom:1px;}
.order-tray{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:16px 12px;background:radial-gradient(circle at 50% 0%,#10173a,#0a1027);border:1px solid rgba(120,150,220,.25);border-radius:16px;min-height:90px;align-items:center;box-shadow:inset 0 2px 12px rgba(0,0,0,.4);}
.order-planet{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:62px;cursor:grab;touch-action:none;user-select:none;transition:transform .1s;}
.order-planet .opl-body{border-radius:50%;position:relative;overflow:hidden;z-index:1;flex:0 0 auto;
  box-shadow:0 5px 12px rgba(0,0,0,.4),inset -6px -7px 14px rgba(0,0,0,.55),inset 5px 5px 12px rgba(255,255,255,.18);}
.order-planet .opl-name{font-size:.58rem;font-weight:800;white-space:nowrap;color:#dde6ff;letter-spacing:.2px;text-shadow:0 1px 2px rgba(0,0,0,.5);}
.order-slot .order-planet{margin-top:0;flex:1 1 auto;justify-content:center;}
.order-slot .order-planet .opl-name{color:#3a3f6a;text-shadow:none;}
.order-planet.dragging{opacity:.5;transform:scale(1.1);}
/* planet surfaces reused for order activity */
.pl-jupiter .opl-body{background:linear-gradient(0deg,#c99a6b 0 12%,#e6c79c 12% 24%,#cf9d6e 24% 38%,#f0d8b4 38% 50%,#c08a5a 50% 62%,#e8caa0 62% 76%,#cf9d6e 76% 88%,#dbb789 88% 100%);}
.pl-saturn .opl-body{background:linear-gradient(0deg,#d9b878 0 18%,#f0dcae 18% 36%,#dcc089 36% 54%,#efdaa8 54% 72%,#d4b074 72% 100%);}
.pl-neptune .opl-body{background:radial-gradient(circle at 36% 30%,#5b8ff0,#2a5fd0 52%,#16357e 100%);}
.pl-neptune .opl-body::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 60% 62%,rgba(20,40,110,.6),transparent 26%),radial-gradient(circle at 32% 40%,rgba(150,185,255,.4),transparent 22%);}
.pl-venus .opl-body{background:radial-gradient(circle at 36% 30%,#f4d9a0,#caa052 55%,#9c7330 100%);}
.pl-venus .opl-body::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 58% 55%,rgba(150,110,40,.45),transparent 30%),radial-gradient(circle at 35% 68%,rgba(210,175,110,.5),transparent 26%);}
/* Saturn rings for order activity (wrap around body) */
.order-planet.pl-saturn .opl-body{position:relative;overflow:visible;z-index:auto;}
.order-planet.pl-saturn .opl-body::before{content:"";position:absolute;top:50%;left:50%;width:148%;height:54%;transform:translate(-50%,-50%) rotate(-16deg);border-radius:50%;border:4px solid rgba(214,186,132,.92);z-index:-1;pointer-events:none;}
.order-planet.pl-saturn .opl-body::after{content:"";position:absolute;top:50%;left:50%;width:148%;height:54%;transform:translate(-50%,-50%) rotate(-16deg);border-radius:50%;border:4px solid rgba(235,210,160,1);z-index:2;pointer-events:none;clip-path:polygon(0 50%,100% 50%,100% 100%,0 100%);}
.order-planet.placed{cursor:default;}

/* ===== SEQUENCE ===== */
.seq-list{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;}
.seq-step{display:flex;align-items:center;gap:12px;background:#f3f4ff;border:3px solid #e2e4f7;border-radius:16px;padding:14px;
  font-weight:700;color:var(--ink);cursor:pointer;transition:.14s;font-size:1rem;}
.seq-step .seq-num{flex:0 0 32px;height:32px;border-radius:50%;background:#fff;border:2px solid #d7daf0;display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--violet);}
.seq-step.picked{background:#edfbe9;border-color:var(--green);}
.seq-step.picked .seq-num{background:var(--green);color:#14361a;border-color:var(--green);}
.seq-step.wrong-seq{background:#fff4e0;border-color:var(--sun);animation:shake .4s;}
@keyframes shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-6px);}75%{transform:translateX(6px);}}

/* ===== TAP-TO-FIND ===== */
.find-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:14px;}
.find-item{aspect-ratio:1;border-radius:18px;background:#f3f4ff;border:3px solid #e2e4f7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;transition:.14s;font-weight:700;}
.find-item .fi-emoji{font-size:2rem;}
.find-item .fi-label{font-size:.7rem;color:var(--ink-soft);}
.find-item:active{transform:scale(.95);}
.find-item.correct-find{background:#177a3e;border-color:#0d5b2b;animation:rightPulse .4s;}
.find-item.correct-find .fi-label{color:#eaffee;}
.find-item.correct-find .fi-emoji{filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));}
.find-item.wrong-find{background:#ffe7ea;border-color:var(--coral);animation:shake .4s;}
.find-item.done{pointer-events:none;}
.lab-done-btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--green-d);}

/* ===== DISCOVERY stage (tap to reveal) ===== */
.discovery{background:linear-gradient(160deg,#eef6ff,#e6eeff);border-radius:20px;padding:22px;text-align:center;margin-top:16px;}
.disc-emoji{font-size:3.4rem;margin-bottom:8px;animation:bobB 3s ease-in-out infinite;}
.disc-fact{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.18rem;color:var(--ink);line-height:1.25;margin-bottom:6px;}
.disc-reveal{background:#fff;border:2px dashed var(--cyan);border-radius:16px;padding:14px;margin-top:14px;font-weight:600;color:var(--ink-soft);
  display:none;animation:fadeUp .5s forwards;opacity:1;}
.disc-reveal.show{display:block;}
.disc-tap-btn{margin-top:14px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.05rem;background:var(--cyan);color:#06243a;
  border:none;border-radius:16px;padding:13px 28px;cursor:pointer;box-shadow:0 5px 0 #16a8c4;}
.disc-tap-btn:active{transform:translateY(3px);box-shadow:0 2px 0 #16a8c4;}

/* ===== TOOL "COME TO LIFE" EFFECTS ===== */
.tool-fx{position:fixed;inset:0;z-index:90;pointer-events:none;display:flex;align-items:center;justify-content:center;overflow:hidden;}

/* TELESCOPE — lens iris zoom with rushing stars */
.tfx-telescope{background:radial-gradient(circle at 50% 50%,transparent 0,transparent 30%,#06091e 62%);}
/* ===== TELESCOPE: black space, zoom in, orbit around the planet ===== */
.tfx-scope-orbit{background:#000;}
.ts-space{position:absolute;inset:0;overflow:hidden;background:radial-gradient(circle at 50% 50%,#0a1230,#000 75%);}
.ts-stars{position:absolute;inset:0;background-image:radial-gradient(1px 1px at 12% 18%,#fff,transparent),radial-gradient(1px 1px at 68% 12%,#fff,transparent),radial-gradient(1px 1px at 82% 32%,#fff,transparent),radial-gradient(1px 1px at 28% 40%,#fff,transparent),radial-gradient(1px 1px at 48% 22%,rgba(200,210,255,.8),transparent),radial-gradient(1px 1px at 75% 55%,#fff,transparent),radial-gradient(1px 1px at 18% 72%,#fff,transparent),radial-gradient(1px 1px at 88% 78%,#fff,transparent),radial-gradient(1px 1px at 35% 88%,#fff,transparent);opacity:.85;animation:tsStarsDrift 6s linear infinite;}
@keyframes tsStarsDrift{from{transform:translateX(0);}to{transform:translateX(-12px);}}
/* orbit container spins; the planet rides its edge, so the view circles around it */
.ts-orbit{position:absolute;top:50%;left:50%;width:150px;height:150px;transform:translate(-50%,-50%) scale(.5);
  animation:tsZoomIn 1.8s ease-in forwards;}
.ts-planet{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:6.5rem;
  filter:drop-shadow(0 0 22px rgba(120,180,255,.6));}
/* high-quality rotating planets (Earth & Saturn) seen through the telescope */
.ts-globe-svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:150px;height:150px;filter:drop-shadow(0 0 26px rgba(90,160,255,.5));}
.ts-saturn-svg{width:190px;height:150px;filter:drop-shadow(0 0 24px rgba(220,190,120,.45));}
.ts-spin{animation:tsSpinX 9s linear infinite;}
.ts-spin-c{animation:tsSpinX 15s linear infinite;}
@keyframes tsSpinX{from{transform:translateX(-150px);}to{transform:translateX(0);}}
.ts-spin-sat{animation:tsSatSpin 7s linear infinite;}
.ts-emoji-spin{animation:tsEmojiSpin 14s linear infinite;}
@keyframes tsEmojiSpin{from{transform:translate(-50%,-50%) perspective(520px) rotateY(0deg);}to{transform:translate(-50%,-50%) perspective(520px) rotateY(360deg);}}
@keyframes tsSatSpin{from{transform:translateX(-80px);}to{transform:translateX(0);}}
.ts-label{transition:opacity .6s ease;}
.ts-label.fade{opacity:0;}
/* zoom: planet grows from far/small to large as we "zoom in" */
@keyframes tsZoomIn{0%{transform:translate(-50%,-50%) scale(.25);opacity:.3;}60%{opacity:1;}100%{transform:translate(-50%,-50%) scale(1.25);opacity:1;}}
/* once zoomed, the orbit container slowly rotates, sweeping the view around the planet */
@keyframes tsOrbitSpin{from{transform:translate(-50%,-50%) scale(1.25) rotate(0deg);}to{transform:translate(-50%,-50%) scale(1.25) rotate(360deg);}}
/* keep the planet itself upright while the container spins (counter-rotate) */
@keyframes tsPlanetSteady{from{transform:translate(-50%,-50%) rotate(0deg);}to{transform:translate(-50%,-50%) rotate(-360deg);}}
/* telescope reticle: crosshair + focus ring overlaid on the view */
.ts-reticle{position:absolute;top:50%;left:50%;width:74vmin;height:74vmin;transform:translate(-50%,-50%);pointer-events:none;z-index:4;}
.ts-ring{position:absolute;inset:0;border-radius:50%;border:3px solid rgba(39,224,255,.55);box-shadow:inset 0 0 40px rgba(39,224,255,.25);}
.ts-ring::after{content:"";position:absolute;inset:8px;border-radius:50%;border:1px dashed rgba(39,224,255,.4);}
.ts-cross{position:absolute;top:50%;left:50%;background:rgba(39,224,255,.4);}
.ts-cross.h{width:74vmin;height:2px;transform:translate(-50%,-50%);}
.ts-cross.v{height:74vmin;width:2px;transform:translate(-50%,-50%);}
/* dark eyepiece vignette around the circular view */
.ts-vignette{position:absolute;top:50%;left:50%;width:74vmin;height:74vmin;transform:translate(-50%,-50%);border-radius:50%;
  box-shadow:0 0 0 2000px #000;z-index:3;pointer-events:none;}
.ts-label{position:absolute;bottom:14%;left:0;right:0;text-align:center;z-index:5;color:#fff;font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.5rem;letter-spacing:1px;text-shadow:0 2px 8px rgba(0,0,0,.9);}
.tfx-lens{position:absolute;width:74vmin;height:74vmin;border-radius:50%;border:6px solid rgba(39,224,255,.8);
  box-shadow:0 0 0 2000px rgba(6,9,30,.92),inset 0 0 60px rgba(39,224,255,.5);animation:lensZoom 1.8s ease-in forwards;}
.tfx-lens::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px dashed rgba(39,224,255,.4);}
.tfx-cross{position:absolute;background:rgba(39,224,255,.4);}
.tfx-cross.h{width:74vmin;height:2px;}.tfx-cross.v{height:74vmin;width:2px;}
@keyframes lensZoom{0%{transform:scale(1.6);opacity:0;}25%{opacity:1;}100%{transform:scale(.55);opacity:1;}}
.tfx-star{position:absolute;width:3px;height:3px;background:#fff;border-radius:50%;animation:starRush 1.4s ease-in forwards;}
@keyframes starRush{0%{transform:translate(0,0) scale(1);opacity:0;}20%{opacity:1;}100%{transform:translate(var(--sx),var(--sy)) scale(3);opacity:0;}}
.tfx-planet-reveal{position:absolute;font-size:7rem;opacity:0;animation:planetReveal 1.2s .7s ease-out forwards;}
@keyframes planetReveal{0%{opacity:0;transform:scale(.2);}60%{opacity:1;transform:scale(1.15);}100%{opacity:1;transform:scale(1);}}

/* MAGMA VIAL — a real vial full of magma that empties out its mouth, pools, then spins into a fire ring */
.tfx-vial{background:#000;animation:vialBlackout 4.8s ease-in-out forwards;}
@keyframes vialBlackout{0%{background:rgba(0,0,0,0);}9%{background:rgba(0,0,0,1);}88%{background:rgba(0,0,0,1);}100%{background:rgba(0,0,0,0);}}
/* rig anchors the tilted vial near top-center; mouth points down-center */
.tfx-vial-rig{position:absolute;top:9%;left:46%;transform:translate(-50%,0) rotate(135deg);z-index:6;
  animation:vialPourIn .5s ease-out,vialOut .4s ease-in 2.55s forwards;}
@keyframes vialOut{to{transform:translate(-50%,-16px) rotate(128deg) scale(.85);opacity:0;}}
@keyframes vialPourIn{0%{transform:translate(-50%,0) rotate(80deg) scale(.7);opacity:0;}
  70%{transform:translate(-50%,0) rotate(139deg) scale(1.02);opacity:1;}
  100%{transform:translate(-50%,0) rotate(135deg) scale(1);opacity:1;}}
/* the glass test-tube body */
.tfx-vial-glass{position:relative;width:44px;height:120px;border-radius:8px 8px 22px 22px;
  border:3px solid rgba(220,235,255,.85);border-top:none;
  background:linear-gradient(100deg,rgba(255,255,255,.18),rgba(180,210,255,.06));
  box-shadow:0 0 14px rgba(180,210,255,.4),inset 0 0 12px rgba(255,255,255,.15);overflow:hidden;}
/* the magma INSIDE the vial — starts full, drains to empty */
.tfx-vial-fill{position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(180deg,#ffe07a,#ff7a2e 50%,#ff3d00);box-shadow:0 0 12px #ff7a2e;
  height:100%;animation:vialDrain 3.6s ease-in forwards;}
@keyframes vialDrain{0%{height:100%;}
  12%{height:100%;}                /* pause before it starts pouring */
  70%{height:0;}                   /* fully emptied */
  100%{height:0;}}
/* the glowing mouth/lip where magma exits (at the bottom of the tilted tube) */
.tfx-vial-lip{position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);width:20px;height:8px;border-radius:50%;
  background:radial-gradient(circle,#ffe07a,#ff5d2e);box-shadow:0 0 12px #ff7a2e;}
/* magma stream falls straight down from the vial mouth area to the pool */
.tfx-stream-v{position:absolute;top:22%;left:50%;transform:translateX(-50%);width:10px;border-radius:6px 6px 10px 10px;z-index:5;
  background:linear-gradient(180deg,#fff3c0,#ffce5a 22%,#ff8a3a 55%,#ff4a12);
  box-shadow:0 0 18px rgba(255,138,58,.9),0 0 34px rgba(255,90,30,.45);filter:blur(.4px);
  height:0;animation:streamFlow 3.6s cubic-bezier(.4,0,.4,1) forwards,streamSway 1.1s ease-in-out infinite alternate;transform-origin:top center;}
@keyframes streamSway{from{margin-left:-2px;}to{margin-left:2px;}}
@keyframes streamFlow{0%{height:0;opacity:0;}
  14%{opacity:1;}
  32%{height:32vh;opacity:1;}
  66%{height:32vh;opacity:1;}
  76%{height:32vh;opacity:.5;}
  86%{height:0;opacity:0;}
  100%{height:0;opacity:0;}}
/* the pool gathers at the bottom-center */
.tfx-pool{position:absolute;top:54%;left:50%;transform:translate(-50%,-50%) scale(0);
  width:128px;height:96px;border-radius:50%;z-index:3;
  background:radial-gradient(ellipse at 50% 38%,#fff0b8,#ffce5a 26%,#ff8a3a 52%,#ff4a12 76%,#8f2c0c);
  box-shadow:0 0 34px rgba(255,122,46,.75),0 0 70px rgba(255,90,30,.35),inset 0 -10px 24px rgba(120,30,0,.6),inset 0 6px 18px rgba(255,236,160,.65);
  animation:poolForm 3.6s cubic-bezier(.35,0,.3,1) forwards,poolBreathe 1.3s ease-in-out 1.2s infinite alternate;}
@keyframes poolForm{0%{transform:translate(-50%,-50%) scale(0);opacity:0;}
  33%{transform:translate(-50%,-50%) scale(0);opacity:0;}
  42%{transform:translate(-50%,-50%) scale(.35);opacity:.85;}
  62%{transform:translate(-50%,-50%) scale(1);opacity:1;}
  84%{transform:translate(-50%,-50%) scale(1.06);opacity:1;filter:blur(0);}
  100%{transform:translate(-50%,-50%) scale(1.24);opacity:0;filter:blur(6px);}}
@keyframes poolBreathe{from{box-shadow:0 0 30px rgba(255,122,46,.7),0 0 60px rgba(255,90,30,.3),inset 0 -10px 24px rgba(120,30,0,.6),inset 0 6px 18px rgba(255,236,160,.6);}
  to{box-shadow:0 0 44px rgba(255,140,60,.95),0 0 90px rgba(255,100,36,.5),inset 0 -10px 24px rgba(120,30,0,.6),inset 0 8px 22px rgba(255,240,180,.8);}}
.tfx-bub{position:absolute;left:50%;top:54%;width:10px;height:10px;border-radius:50%;z-index:4;
  background:radial-gradient(circle at 36% 32%,#fff0b8,#ff9a46 70%);box-shadow:0 0 10px rgba(255,150,60,.9);
  opacity:0;animation:bubUp 1.2s ease-out infinite;}
@keyframes bubUp{0%{opacity:0;transform:translate(var(--bx),0) scale(.4);}
  25%{opacity:.95;}
  100%{opacity:0;transform:translate(var(--bx),-34px) scale(1);}}
.tfx-heat{position:absolute;top:54%;left:50%;transform:translate(-50%,-50%);width:50vmin;height:50vmin;
  background:radial-gradient(circle,rgba(255,122,46,.3),transparent 65%);
  animation:heatShim 3.6s ease-in-out forwards;filter:blur(10px);z-index:2;}
@keyframes heatShim{0%{opacity:0;}40%{opacity:1;}100%{opacity:.4;}}
/* RING OF FIRE — blooms from the pool at center, then spins */
.tfx-firering{position:absolute;left:50%;top:54%;width:0;height:0;z-index:5;animation:ringSpin 4s linear infinite;}
@keyframes ringSpin{from{transform:rotate(0);}to{transform:rotate(360deg);}}
.tfx-flame{position:absolute;font-size:2.2rem;transform:translate(-50%,-50%) scale(0);
  filter:drop-shadow(0 0 8px #ff7a2e);animation:flameRing 1.2s ease-out forwards;}
@keyframes flameRing{
  0%{transform:translate(-50%,-50%) scale(0);opacity:0;}
  50%{transform:translate(calc(-50% + var(--fx)),calc(-50% + var(--fy))) scale(1.2);opacity:1;}
  100%{transform:translate(calc(-50% + var(--fx)),calc(-50% + var(--fy))) scale(1);opacity:1;}}

/* GRAVITY — particles yanked down/center */
.tfx-gravity{background:rgba(6,9,30,.7);}
/* ===== MOON vs EARTH JUMP (split screen, black bg) ===== */
.tfx-moonjump{background:#000;}
.mj-split{position:absolute;inset:0;display:flex;}
.mj-side{position:relative;flex:1;overflow:hidden;}
.mj-moon{background:linear-gradient(180deg,#0a0a0f,#15151c);}
.mj-earth{background:linear-gradient(180deg,#04040a,#0a0a14);}
.mj-divider{width:3px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.4),transparent);z-index:5;}
.mj-stars{position:absolute;inset:0;background-image:radial-gradient(1px 1px at 20% 25%,#fff,transparent),radial-gradient(1px 1px at 65% 15%,#fff,transparent),radial-gradient(1px 1px at 80% 45%,#fff,transparent),radial-gradient(1px 1px at 35% 60%,#fff,transparent),radial-gradient(1px 1px at 50% 35%,rgba(200,210,255,.8),transparent);opacity:.8;}
.mj-sky{position:absolute;inset:0;background-image:radial-gradient(1px 1px at 25% 20%,rgba(255,255,255,.6),transparent),radial-gradient(1px 1px at 70% 30%,rgba(255,255,255,.5),transparent);opacity:.5;}
.mj-label{position:absolute;top:18px;left:0;right:0;text-align:center;z-index:4;color:#fff;font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.7rem;line-height:1.15;text-shadow:0 3px 8px rgba(0,0,0,.9);}
.mj-label span{font-size:1.05rem;font-weight:600;opacity:.9;}
/* ground surfaces */
.mj-ground{position:absolute;left:0;right:0;bottom:0;height:46px;z-index:2;}
.mj-moon-ground{background:linear-gradient(180deg,#5a5a66,#3a3a44);border-top:3px solid #6e6e7a;
  box-shadow:inset 0 6px 12px rgba(0,0,0,.4);border-radius:50% 50% 0 0/14px 14px 0 0;}
.mj-earth-ground{background:linear-gradient(180deg,#3a8a3c,#256026);border-top:3px solid #4aa84c;
  box-shadow:inset 0 6px 12px rgba(0,0,0,.4);border-radius:50% 50% 0 0/14px 14px 0 0;}
/* jumpers sit on the ground and bounce */
.mj-jumper{position:absolute;left:50%;bottom:40px;transform:translateX(-50%);z-index:3;font-size:3rem;will-change:transform;}
.mj-char{display:inline-block;}
.mj-jumper .mj-face{width:60px;height:60px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 5px 14px rgba(0,0,0,.55);}
/* Moon: VERY high, slow, floaty jump (soars most of the screen) */
.mj-tez{animation:moonJump 2.8s ease-in-out infinite;}
@keyframes moonJump{
  0%{transform:translateX(-50%) translateY(0);}
  9%{transform:translateX(-50%) translateY(0) scaleY(.82);}        /* deep crouch */
  50%{transform:translateX(-50%) translateY(-58vh) scaleY(1.08);}  /* soars way up, hangs */
  91%{transform:translateX(-50%) translateY(0) scaleY(.88);}
  100%{transform:translateX(-50%) translateY(0);}}
/* Earth: low, quick hop */
.mj-grum{animation:earthJump 2.8s ease-in-out infinite;}
@keyframes earthJump{
  0%{transform:translateX(-50%) translateY(0);}
  8%{transform:translateX(-50%) translateY(0) scaleY(.85);}
  20%{transform:translateX(-50%) translateY(-34px) scaleY(1.05);}  /* small hop, fast */
  34%{transform:translateX(-50%) translateY(0) scaleY(.9);}
  44%{transform:translateX(-50%) translateY(0);}
  100%{transform:translateX(-50%) translateY(0);}}
/* ===== ASTRONAUT ORBITING EARTH (black screen, Earth centered) ===== */
.tfx-fall{background:#000;}
.af-scene{position:absolute;inset:0;overflow:hidden;background:radial-gradient(circle at 50% 50%,#0a1430,#04040a 75%);}
.af-stars{position:absolute;inset:0;background-image:radial-gradient(1px 1px at 18% 20%,#fff,transparent),radial-gradient(1px 1px at 62% 12%,#fff,transparent),radial-gradient(1px 1px at 82% 30%,#fff,transparent),radial-gradient(1px 1px at 30% 38%,#fff,transparent),radial-gradient(1px 1px at 48% 22%,rgba(200,210,255,.8),transparent),radial-gradient(1px 1px at 72% 45%,#fff,transparent),radial-gradient(1px 1px at 15% 75%,#fff,transparent),radial-gradient(1px 1px at 85% 80%,#fff,transparent);opacity:.8;}
.af-label{position:absolute;top:18px;left:0;right:0;text-align:center;z-index:5;color:#fff;font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.7rem;line-height:1.15;text-shadow:0 3px 8px rgba(0,0,0,.9);letter-spacing:.5px;padding:0 16px;}
/* Earth in the CENTER of the screen */
.af-earth{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:150px;height:150px;
  border-radius:50%;box-shadow:0 0 55px rgba(60,140,255,.55);z-index:2;}
.af-earth svg{display:block;width:100%;height:100%;}
.af-earth-emoji{display:none;}
/* faint dashed orbit path ring around Earth */
.af-orbit-ring{position:absolute;top:50%;left:50%;width:280px;height:280px;transform:translate(-50%,-50%);
  border:2px dashed rgba(160,200,255,.35);border-radius:50%;z-index:1;}
/* the orbit container spins; the astronaut rides its edge, so it circles Earth */
.af-orbit{position:absolute;top:50%;left:50%;width:280px;height:280px;transform:translate(-50%,-50%);z-index:3;
  animation:afOrbitSpin 3.2s linear infinite;}
.af-astro{position:absolute;top:-4px;left:50%;transform:translate(-50%,-50%);font-size:2.8rem;
  filter:drop-shadow(0 0 8px rgba(120,180,255,.7));}
.af-slot{position:absolute;left:50%;width:50px;height:50px;margin-left:-25px;margin-top:-25px;}
.af-slot-top{top:0;}
.af-slot-bot{top:100%;}
.af-slot .af-face{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2.5px solid #fff;box-shadow:0 0 12px rgba(120,180,255,.85);animation:afFaceUpright 3.2s linear infinite;}
@keyframes afFaceUpright{from{transform:rotate(0deg);}to{transform:rotate(-360deg);}}
@keyframes afOrbitSpin{from{transform:translate(-50%,-50%) rotate(0deg);}to{transform:translate(-50%,-50%) rotate(360deg);}}
/* counter-spin the astronaut so he stays upright while circling (optional gentle tumble) */
.af-astro{animation:afAstroTumble 3.2s linear infinite;}
@keyframes afAstroTumble{from{transform:translate(-50%,-50%) rotate(0deg);}to{transform:translate(-50%,-50%) rotate(-360deg);}}
.tfx-grav-dot{position:absolute;border-radius:50%;animation:gravPull 1.6s cubic-bezier(.5,0,.9,1) forwards;}
@keyframes gravPull{0%{transform:translate(0,0) scale(1);opacity:1;}100%{transform:translate(var(--gx),var(--gy)) scale(.2);opacity:0;}}
.tfx-grav-core{position:absolute;left:50%;bottom:14%;transform:translateX(-50%);font-size:5rem;
  animation:gravCore 1.6s ease-out forwards;}
@keyframes gravCore{0%{transform:translateX(-50%) scale(.4);opacity:0;}40%{opacity:1;}70%{transform:translateX(-50%) scale(1.2);}100%{transform:translateX(-50%) scale(1);opacity:1;}}

/* ===== RECAP stage ===== */
.recap{background:linear-gradient(160deg,#fff6df,#ffeecb);border-radius:20px;padding:20px;margin-top:16px;color:#6b4e00;}
.recap h3{font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.15rem;text-align:center;margin-bottom:12px;color:#8a5a00;}
.recap ul{list-style:none;display:flex;flex-direction:column;gap:8px;}
.recap li{background:rgba(255,255,255,.6);border-radius:12px;padding:10px 13px;font-weight:600;display:flex;gap:9px;align-items:flex-start;}
.recap li .ck{color:var(--green-d);font-weight:800;}

/* ===== CHAMPION CHALLENGE card on home ===== */
.champion-card{background:linear-gradient(135deg,#3a2a6b,#6a3ff2);border:3px solid var(--sun);border-radius:22px;padding:18px;
  margin-top:8px;text-align:center;position:relative;overflow:hidden;}
.champion-card.locked{filter:grayscale(.5);opacity:.7;}
.champion-card h3{font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.2rem;color:var(--sun);text-shadow:0 2px 0 #a8730e;}
.champion-card p{font-weight:600;font-size:.86rem;color:#e7ddff;margin-top:4px;}
.champion-trophy{font-size:2.6rem;margin-bottom:4px;display:block;}
.champion-btn{margin-top:12px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.02rem;background:var(--sun);color:#5a3d00;
  border:none;border-radius:16px;padding:12px 26px;cursor:pointer;box-shadow:0 5px 0 #c9941f;}
.champion-btn:disabled{background:#9b9bb5;box-shadow:0 5px 0 #6f6f8a;cursor:not-allowed;color:#3a3a52;}
.champion-btn:not(:disabled):active{transform:translateY(3px);box-shadow:0 2px 0 #c9941f;}
.champ-progress{font-size:.78rem;font-weight:700;color:#e7ddff;margin-top:8px;}

/* ===== GAMES card ===== */
.games-card{display:flex;align-items:center;gap:13px;width:100%;background:linear-gradient(135deg,#1a6b5a,#27c2a0);
  border:3px solid var(--cyan);border-radius:22px;padding:16px;cursor:pointer;text-align:left;
  box-shadow:0 7px 0 #12463b,0 12px 22px rgba(0,0,0,.3);transition:transform .12s,box-shadow .12s;}
.games-card:active{transform:translateY(5px);box-shadow:0 2px 0 #12463b,0 6px 12px rgba(0,0,0,.3);}
.games-emoji{font-size:2.2rem;}
.games-info{flex:1;}
.games-title{font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.2rem;color:#fff;display:block;}
.games-sub{font-size:.82rem;color:#d4fff5;font-weight:600;display:block;margin-top:2px;}
.games-go{flex:0 0 auto;background:var(--cyan);color:#06243a;font-weight:800;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;box-shadow:0 4px 0 #16a8c4;}

/* ===== GAMES menu ===== */
.game-tile{display:flex;align-items:center;gap:14px;height:84px;
  background:linear-gradient(135deg,rgba(20,30,68,.95),rgba(12,18,46,.95));
  color:#fff;border:2px solid rgba(255,255,255,.85);border-radius:18px;padding:0 16px;width:100%;cursor:pointer;text-align:left;margin-bottom:14px;
  position:relative;overflow:hidden;
  box-shadow:0 0 0 1px rgba(39,224,255,.15),0 8px 20px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.15);
  transition:transform .12s,box-shadow .12s,border-color .12s;}
/* faint cosmic grid texture inside each tile */
.game-tile::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:radial-gradient(1px 1px at 18% 30%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 70% 60%,rgba(255,255,255,.4),transparent),radial-gradient(1px 1px at 45% 80%,rgba(39,224,255,.5),transparent),radial-gradient(1px 1px at 88% 25%,rgba(91,224,33,.5),transparent);}
.game-tile:active{transform:translateY(4px) scale(.99);box-shadow:0 0 0 1px rgba(39,224,255,.3),0 4px 10px rgba(0,0,0,.45);border-color:var(--cyan);}
.game-tile .gt-emoji{flex:0 0 54px;height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.85rem;
  background:linear-gradient(160deg,rgba(60,80,140,.5),rgba(10,14,32,.95));position:relative;z-index:1;overflow:hidden;
  border:2px solid rgba(255,255,255,.7);
  box-shadow:inset 0 2px 4px rgba(255,255,255,.35),inset 0 -6px 12px rgba(0,0,0,.5),0 4px 10px rgba(0,0,0,.45),0 0 12px rgba(39,224,255,.25);}
/* glossy top highlight sweep across the well */
.game-tile .gt-emoji::before{content:"";position:absolute;top:0;left:0;right:0;height:48%;
  background:linear-gradient(180deg,rgba(255,255,255,.28),transparent);border-radius:14px 14px 50% 50%/14px 14px 22px 22px;pointer-events:none;}
/* soft inner glow pooled at the bottom */
.game-tile .gt-emoji::after{content:"";position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);width:70%;height:20px;
  background:radial-gradient(ellipse,rgba(39,224,255,.5),transparent 70%);filter:blur(4px);pointer-events:none;}
.game-tile .gt-svg{width:38px;height:38px;position:relative;z-index:2;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));}
.game-tile .gt-body{flex:1;min-width:0;position:relative;z-index:1;padding-right:26px;}
.game-tile .gt-title{font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.14rem;color:#fff;letter-spacing:.3px;
  text-shadow:0 0 8px rgba(39,224,255,.4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.game-tile .gt-sub{font-size:.78rem;color:#aeb9e8;font-weight:600;margin-top:2px;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.game-tile .gt-best{position:absolute;top:0;right:0;font-size:.68rem;color:var(--green);font-weight:800;text-shadow:0 0 6px rgba(91,224,33,.5);
  background:rgba(91,224,33,.14);border-radius:7px;padding:2px 7px;z-index:1;}
.game-tile.soon{opacity:.55;}
/* per-game accent edge (left border glow) */
#tileCatch{border-left:4px solid var(--cyan);}
#tileMemory{border-left:4px solid var(--violet);}
#tileBlitz{border-left:4px solid var(--sun);}
#tileWhack{border-left:4px solid var(--coral);}
#tileTetris{border-left:4px solid var(--green);}
#tileBlocks{border-left:4px solid #ff9a3d;}

/* ===== LOCKED GAME TILES ===== */
.game-tile.locked{position:relative;opacity:.62;}
.game-tile.locked .gt-emoji{filter:grayscale(.7);}
.game-tile.locked .gt-best{display:none;}
.game-tile.locked .gt-sub{-webkit-line-clamp:2;}
.game-tile.locked::after{content:"🔒";position:absolute;top:14px;right:16px;font-size:1.2rem;opacity:.9;z-index:1;
  filter:drop-shadow(0 0 4px rgba(123,63,242,.6));}
.game-tile.shake-lock{animation:shakeLock .42s;}
/* lock toast popup (only shows when a locked game is tapped) */
.lock-toast{position:fixed;left:50%;bottom:88px;transform:translateX(-50%) translateY(20px);z-index:120;
  background:linear-gradient(135deg,#2a2350,#1a1040);color:#fff;font-family:'Fredoka',sans-serif;font-weight:600;font-size:.92rem;
  padding:13px 20px;border-radius:16px;border:2px solid var(--violet);box-shadow:0 10px 28px rgba(0,0,0,.5),0 0 16px rgba(123,63,242,.4);
  max-width:84vw;text-align:center;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;}
.lock-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.unlock-banner{background:linear-gradient(135deg,var(--cyan),var(--green));color:#06243a;font-family:'Fredoka',sans-serif;font-weight:700;
  border-radius:16px;padding:12px 16px;margin:0 0 14px;font-size:1rem;box-shadow:0 6px 16px rgba(39,224,255,.35);animation:unlockPop .5s cubic-bezier(.2,.9,.3,1.5);}

/* ===== STORY MODE ===== */
.story-stage{display:flex;flex-direction:column;gap:0;}
.story-scene{position:relative;width:100%;height:46vh;max-height:420px;border-radius:22px 22px 0 0;overflow:hidden;
  background:linear-gradient(180deg,#0a1030,#1a2a6b);}
.story-scene.fx-shake{animation:scShake .5s;}
@keyframes scShake{0%,100%{transform:translateX(0);}20%{transform:translateX(-8px);}40%{transform:translateX(8px);}60%{transform:translateX(-6px);}80%{transform:translateX(6px);}}
.story-scene.fx-zoom{animation:scZoom 1s ease-out;}
@keyframes scZoom{0%{transform:scale(1);}50%{transform:scale(1.12);}100%{transform:scale(1);}}
/* stars */
.sc-stars{position:absolute;inset:0;background-image:radial-gradient(2px 2px at 20% 30%,#fff,transparent),radial-gradient(2px 2px at 60% 20%,#fff,transparent),radial-gradient(1px 1px at 80% 50%,#fff,transparent),radial-gradient(2px 2px at 35% 70%,#fff,transparent),radial-gradient(1px 1px at 75% 80%,#fff,transparent),radial-gradient(2px 2px at 50% 45%,#fff,transparent);animation:twinkle 3s ease-in-out infinite;}
@keyframes twinkle{0%,100%{opacity:.6;}50%{opacity:1;}}
/* rocket launch */
.sc-rocket{position:absolute;left:50%;bottom:14%;transform:translateX(-50%);font-size:3.4rem;animation:rocketFly 3s ease-in-out infinite;}
@keyframes rocketFly{0%,100%{transform:translateX(-50%) translateY(0) rotate(-8deg);}50%{transform:translateX(-50%) translateY(-16px) rotate(-8deg);}}
.sc-ground{position:absolute;left:0;right:0;bottom:0;height:18%;background:linear-gradient(180deg,#2a3568,#16245c);border-radius:50% 50% 0 0/40% 40% 0 0;}
/* planets floating in space */
.sc-planet{position:absolute;animation:floaty 4s ease-in-out infinite;}
.sc-p1{font-size:3rem;top:18%;left:18%;animation-delay:0s;}
.sc-p2{font-size:2.4rem;top:30%;right:16%;animation-delay:.8s;}
.sc-p3{font-size:1.8rem;bottom:24%;left:30%;animation-delay:1.5s;}
@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}
/* big planet surface */
.sc-bigplanet{position:absolute;top:-30%;left:50%;transform:translateX(-50%);font-size:11rem;opacity:.85;animation:slowSpin 20s linear infinite;}
@keyframes slowSpin{from{transform:translateX(-50%) rotate(0);}to{transform:translateX(-50%) rotate(360deg);}}
.sc-surface{position:absolute;left:0;right:0;bottom:0;height:24%;background:linear-gradient(180deg,#3d2c6b,#1a1040);border-radius:50% 50% 0 0/30% 30% 0 0;}
.sc-volcano{position:absolute;left:50%;bottom:18%;transform:translateX(-50%);font-size:5rem;animation:floaty 5s ease-in-out infinite;}
/* characters in scene */
.story-chars{position:absolute;left:0;right:0;bottom:8%;display:flex;justify-content:center;gap:30px;z-index:3;}
.story-char{font-size:3rem;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));transition:transform .2s;}
.story-char.talking{animation:charTalk .5s ease-in-out;}
@keyframes charTalk{0%,100%{transform:translateY(0) scale(1);}30%{transform:translateY(-12px) scale(1.12);}}
/* caption box */
.story-caption{background:linear-gradient(165deg,#6ee82c,#5BE021 55%,#46b815);color:#0f2e08;border-radius:0 0 22px 22px;padding:18px 18px 16px;min-height:120px;
  display:flex;flex-direction:column;box-shadow:0 14px 30px rgba(0,0,0,.3),inset 0 2px 0 rgba(255,255,255,.35);border:3px solid #3da512;border-top:none;}
/* Tez speaks = light blue caption */
.story-caption.cap-tez{background:linear-gradient(165deg,#5cebff,#27e0ff 55%,#16a8c4);border-color:#16a8c4;color:#063047;}
.story-caption.cap-tez .story-who{color:#063047;}
.story-caption.cap-tez .story-text{color:#063047;}
.story-caption.cap-tez .story-tap{color:#063047;}
/* Grum speaks = green caption (default) */
.story-caption.cap-grum{background:linear-gradient(165deg,#6ee82c,#5BE021 55%,#46b815);border-color:#3da512;}
.story-who{font-family:'Fredoka',sans-serif;font-weight:700;color:#1d5210;font-size:.9rem;margin-bottom:4px;}
.story-text{font-family:'Nunito',sans-serif;font-weight:700;font-size:1.15rem;line-height:1.35;flex:1;color:#0f2e08;text-shadow:0 1px 0 rgba(255,255,255,.25);}
.story-tap{align-self:flex-end;margin-top:10px;background:none;border:none;color:#1d5210;font-family:'Fredoka',sans-serif;
  font-weight:700;font-size:.9rem;cursor:pointer;opacity:.85;animation:tapPulse 1.5s ease-in-out infinite;}
@keyframes tapPulse{0%,100%{opacity:.5;}50%{opacity:1;}}
.story-stage .quest-btn-row{margin-top:14px;}
@keyframes unlockPop{0%{transform:scale(.8);opacity:0;}60%{transform:scale(1.06);}100%{transform:scale(1);opacity:1;}}
@keyframes shakeLock{0%,100%{transform:translateX(0);}20%{transform:translateX(-7px);}40%{transform:translateX(7px);}60%{transform:translateX(-5px);}80%{transform:translateX(5px);}}
.game-tile.soon .gt-emoji{filter:grayscale(1);}

/* ===== CATCH GAME ===== */
.catch-hud{display:flex;justify-content:space-between;align-items:center;margin:6px 0 10px;font-family:'Fredoka',sans-serif;font-weight:700;}
.catch-hud .hud-pill{background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.18);border-radius:30px;padding:7px 15px;font-size:1rem;}
.catch-lives{color:var(--coral);letter-spacing:2px;}
#catchField{position:relative;width:100%;height:calc(100vh - 320px);min-height:360px;border-radius:22px;overflow:hidden;touch-action:none;
  background:linear-gradient(180deg,#0c1640,#16245c);border:3px solid rgba(255,255,255,.15);touch-action:none;cursor:pointer;}
.catcher{position:absolute;top:0;left:0;width:46px;height:66px;display:flex;align-items:center;justify-content:center;
  will-change:transform;}
.catcher .rkt-svg{width:42px;height:60px;display:block;filter:drop-shadow(0 3px 5px rgba(0,0,0,.4));}
/* thruster flame under the rocket (sharp-edged, no heavy blur) */
.catcher::after{content:"";position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);width:12px;height:14px;border-radius:0 0 50% 50%;
  background:linear-gradient(180deg,#ffd24d,#ff7a2e);box-shadow:0 0 8px rgba(255,122,46,.7);animation:thrust .3s ease-in-out infinite alternate;}
@keyframes thrust{from{height:9px;opacity:.7;}to{height:16px;opacity:1;}}
.catcher img{width:100%;height:100%;object-fit:contain;border-radius:11px;}
.falling{position:absolute;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.9rem;will-change:top;filter:drop-shadow(0 2px 2px rgba(0,0,0,.45));}
.falling.good-item{}
.catch-pop{position:absolute;font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.1rem;pointer-events:none;animation:catchPop .7s forwards;}
@keyframes catchPop{0%{opacity:1;transform:translateY(0) scale(1);}100%{opacity:0;transform:translateY(-40px) scale(1.3);}}
.catch-overlay{position:absolute;inset:0;background:rgba(8,12,38,.88);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;z-index:5;}
.catch-overlay h2{font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.8rem;color:var(--green);text-shadow:0 3px 0 var(--green-d);margin-bottom:6px;}
.catch-overlay p{color:#d7ddff;font-weight:600;margin-bottom:6px;max-width:340px;}
.catch-overlay .go-stars{color:#ffd23f;font-family:'Fredoka',sans-serif;font-weight:800;font-size:1.15rem;text-shadow:0 0 10px rgba(255,210,63,.5);margin:2px 0 10px;}
.catch-overlay .big-score{font-family:'Fredoka',sans-serif;font-weight:700;font-size:3rem;color:var(--sun);margin:8px 0;}
.catch-btn{font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.1rem;background:var(--green);color:#13340f;border:none;border-radius:18px;padding:14px 32px;cursor:pointer;box-shadow:0 6px 0 var(--green-d);margin-top:10px;}
.catch-btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--green-d);}
.catch-target{font-size:.9rem;color:#cdd6ff;font-weight:600;margin-bottom:8px;text-align:center;}

/* ===== MEMORY MATCH ===== */
.mem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;max-width:440px;margin:0 auto;}
.mem-card{aspect-ratio:.82;border-radius:16px;cursor:pointer;position:relative;transform-style:preserve-3d;transition:transform .4s;}
.mem-card.flipped,.mem-card.matched{transform:rotateY(180deg);}
.mem-face{position:absolute;inset:0;border-radius:16px;display:flex;align-items:center;justify-content:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.mem-back{background:linear-gradient(160deg,#2f3a6b,#1a2350);border:3px solid var(--cyan);font-size:1.8rem;color:var(--green);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.2);}
.mem-front{background:var(--paper);border:3px solid var(--green);transform:rotateY(180deg);font-size:2.4rem;}
.mem-card.matched .mem-front{animation:matchPop .5s;border-color:var(--sun);box-shadow:0 0 16px rgba(255,200,61,.6);}
@keyframes matchPop{0%{transform:rotateY(180deg) scale(1);}50%{transform:rotateY(180deg) scale(1.12);}100%{transform:rotateY(180deg) scale(1);}}

/* ===== QUIZ BLITZ ===== */
#blitzArea .query-hero{margin-top:4px;}
.blitz-q{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.35rem;color:#0f2e08;text-align:center;margin-bottom:16px;line-height:1.15;}
.blitz-opts{display:flex;flex-direction:column;gap:11px;}

/* ===== POP-A-QUESTER ===== */
.whack-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:440px;margin:0 auto;}
.whack-hole{aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 35%,#1a2350,#0c1226);
  border:3px solid #2a3568;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;box-shadow:inset 0 6px 12px rgba(0,0,0,.5);}
.whack-pop{font-size:2.4rem;cursor:pointer;transform:translateY(110%);transition:transform .15s;user-select:none;}
.whack-pop.has-char{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:0;}
.whack-char{width:112%;height:112%;object-fit:cover;object-position:center;border-radius:50%;display:block;pointer-events:none;}
.whack-pop.up{transform:translateY(0);animation:whackBob .4s ease-in-out infinite;}
@keyframes whackBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}
.whack-pop.bonked{animation:bonk .3s;}
@keyframes bonk{0%{transform:scale(1);}50%{transform:scale(.7) rotate(-15deg);}100%{transform:translateY(110%);}}

/* ===== COSMIC STACK (Tetris) ===== */
.tetris-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;}
#tetrisCanvas{background:linear-gradient(180deg,#0a1030,#16245c);border:3px solid rgba(39,224,255,.4);border-radius:12px;
  box-shadow:0 0 24px rgba(39,224,255,.25),inset 0 0 30px rgba(0,0,0,.4);touch-action:none;}
.tet-stage{display:flex;align-items:center;justify-content:center;}
.tet-hud{justify-content:center;gap:7px;flex-wrap:nowrap;}
.tet-hud .hud-pill{padding:6px 11px;font-size:.92rem;}
.tet-hud .tet-next-pill{display:flex;align-items:center;gap:7px;padding:4px 11px 4px 12px;}
.tet-next-pill .tnp-label{font-family:'Fredoka',sans-serif;font-size:.58rem;font-weight:800;letter-spacing:1px;color:#9fd0ff;}
.tet-next-pill .tet-next{background:linear-gradient(180deg,#0a1030,#16245c);border:1.5px solid rgba(39,224,255,.35);border-radius:7px;width:30px;height:30px;box-shadow:inset 0 0 8px rgba(0,0,0,.4);}
.tet-tap-hint{font-family:'Fredoka',sans-serif;font-weight:600;font-size:.62rem;line-height:1.2;color:rgba(255,255,255,.45);text-align:center;margin:-6px 0 0;}
.tetris-controls{display:grid;grid-template-columns:1fr 1fr 1fr 1.6fr;gap:8px;width:100%;max-width:348px;padding-bottom:env(safe-area-inset-bottom,0px);}
.tctrl{position:relative;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,rgba(44,60,116,.55),rgba(14,22,50,.7));
  border:1.5px solid rgba(39,224,255,.28);border-radius:16px;padding:13px 0;cursor:pointer;color:#cfeaff;
  box-shadow:0 4px 14px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .08s,box-shadow .15s,background .15s;user-select:none;-webkit-tap-highlight-color:transparent;}
.tctrl .tc-ico{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(39,224,255,.45));}
.tctrl:active{transform:translateY(2px) scale(.97);box-shadow:0 2px 8px rgba(0,0,0,.4);background:linear-gradient(160deg,rgba(39,224,255,.28),rgba(14,22,50,.75));}
.tctrl-rot{color:#a6ecff;border-color:rgba(39,224,255,.5);box-shadow:0 4px 14px rgba(0,0,0,.35),0 0 14px rgba(39,224,255,.18),inset 0 1px 0 rgba(255,255,255,.1);}
.tctrl.wide{gap:5px;font-family:'Fredoka',sans-serif;font-weight:800;font-size:.92rem;letter-spacing:0;color:#fff;
  background:linear-gradient(180deg,#8b5cf6,#6a37ec);border:1.5px solid rgba(186,156,255,.5);border-radius:16px;padding:13px 0;
  box-shadow:0 6px 18px rgba(106,55,236,.5),inset 0 1px 0 rgba(255,255,255,.28);}
.tctrl.wide .tc-ico{width:20px;height:20px;stroke:#fff;filter:none;}
.tctrl.wide:active{transform:translateY(2px);box-shadow:0 3px 10px rgba(106,55,236,.5),inset 0 1px 0 rgba(255,255,255,.28);}
/* character cheer pop-up on line clear */
.tetris-wrap{position:relative;}
.tet-cheer{position:absolute;top:18%;left:50%;transform:translateX(-50%) translateY(20px) scale(.8);
  display:flex;align-items:center;gap:10px;background:var(--paper);color:var(--ink);border-radius:20px;padding:10px 16px 10px 10px;
  box-shadow:0 10px 26px rgba(0,0,0,.45);border:3px solid var(--green);z-index:8;opacity:0;pointer-events:none;}
.tet-cheer.show{animation:cheerPop 1.6s cubic-bezier(.2,.9,.3,1.4) forwards;}
@keyframes cheerPop{0%{opacity:0;transform:translateX(-50%) translateY(20px) scale(.8);}
  15%{opacity:1;transform:translateX(-50%) translateY(0) scale(1);}
  80%{opacity:1;transform:translateX(-50%) translateY(0) scale(1);}
  100%{opacity:0;transform:translateX(-50%) translateY(-14px) scale(.95);}}
.tet-cheer .tc-av{width:48px;height:48px;border-radius:13px;display:flex;align-items:flex-end;justify-content:center;font-size:1.7rem;flex:0 0 auto;overflow:hidden;}
.tet-cheer .tc-av.has-char img{width:150%;height:auto;object-fit:cover;object-position:top center;align-self:flex-start;}
.tet-cheer .tc-av img{width:100%;height:100%;object-fit:contain;border-radius:10px;}
.tet-cheer .tc-av.face{border-radius:50%;align-items:center;border:2px solid rgba(255,255,255,.4);}
.tet-cheer .tc-av.face img{width:100%;height:100%;object-fit:cover;border-radius:50%;align-self:center;}
.tet-cheer .tc-av.tez{background:linear-gradient(160deg,#2f8bff,#1b54c9);}
.tet-cheer .tc-av.grum{background:linear-gradient(160deg,#39b6ff,#2a78d6);}
.tet-cheer .tc-txt{font-family:'Fredoka',sans-serif;font-weight:600;font-size:.98rem;line-height:1.15;max-width:170px;}
.tet-cheer .tc-txt .tc-who{font-size:.62rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--violet);display:block;}

/* ===== SHOWDOWN (Quester vs Grum) ===== */
.score-board{display:flex;gap:12px;justify-content:center;margin:8px 0 14px;}
.score-pill{flex:1;max-width:150px;background:var(--paper);border-radius:16px;padding:10px;text-align:center;box-shadow:0 6px 16px rgba(0,0,0,.25);}
.score-pill .sp-who{font-family:'Fredoka',sans-serif;font-weight:700;font-size:.84rem;color:var(--ink-soft);display:flex;align-items:center;justify-content:center;gap:5px;}
.score-pill .sp-num{font-family:'Fredoka',sans-serif;font-weight:700;font-size:2rem;color:var(--ink);line-height:1;}
.score-pill.you{border:3px solid var(--green);}
.score-pill.them{border:3px solid var(--violet);}
.score-pill .bump{animation:scoreBump .4s;}
@keyframes scoreBump{0%{transform:scale(1);}50%{transform:scale(1.35);}100%{transform:scale(1);}}
.vs-tag{align-self:center;font-family:'Fredoka',sans-serif;font-weight:700;color:var(--sun);font-size:1.1rem;}
.grum-answer{margin-top:12px;background:#efe9ff;border-radius:14px;padding:11px 14px;font-weight:600;color:var(--ink);font-size:.95rem;
  display:none;animation:fadeUp .4s forwards;opacity:1;}
.grum-answer.show{display:block;}
.grum-answer .ga-who{font-size:.64rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--violet);display:block;margin-bottom:2px;}
.champ-badge-big{filter:drop-shadow(0 0 12px rgba(255,210,77,.6)) drop-shadow(0 14px 30px rgba(0,0,0,.45))!important;}

/* timer bar */
.timer-wrap{height:12px;background:rgba(255,255,255,.15);border-radius:8px;overflow:hidden;margin:0 0 14px;border:1.5px solid rgba(255,255,255,.2);}
.timer-bar{height:100%;width:100%;background:linear-gradient(90deg,#5BE021,#ffc83d,#ff5d73);border-radius:8px;transition:width .25s linear;}
.timer-bar.low{animation:timerPulse .5s ease-in-out infinite;}
@keyframes timerPulse{0%,100%{opacity:1;}50%{opacity:.5;}}

/* battle pick options */
.pick-opt{background:var(--paper);color:var(--ink);border:3px solid #e2e4f7;border-radius:18px;padding:15px;font-family:'Fredoka',sans-serif;
  font-weight:600;font-size:1.05rem;cursor:pointer;display:flex;align-items:center;gap:12px;transition:.14s;text-align:left;width:100%;}
.pick-opt .pick-emoji{font-size:1.6rem;}
.pick-opt.sel{border-color:var(--green);background:#edfbe9;box-shadow:0 5px 0 var(--green-d);}
.pick-opt:active{transform:scale(.99);}
.pick-sub{font-size:.74rem;color:var(--ink-soft);font-weight:600;}

/* WIN */
.win{text-align:center;padding:14px 6px;}
.badge-big{width:214px;height:214px;margin:6px auto 26px;background:var(--badge-frame) center/contain no-repeat;display:flex;align-items:center;justify-content:center;position:relative;filter:drop-shadow(0 14px 30px rgba(0,0,0,.5));animation:badgePop .8s cubic-bezier(.2,.9,.3,1.6);}
@keyframes badgePop{0%{transform:scale(0) rotate(-40deg);}60%{transform:scale(1.15) rotate(8deg);}100%{transform:scale(1);}}
.badge-big::before{content:"";position:absolute;left:50%;top:50.5%;width:46%;height:46%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.16) 0%,rgba(220,235,255,.06) 42%,rgba(220,235,255,0) 72%);filter:blur(2px);z-index:0;pointer-events:none;}.badge-big .b-emoji{position:relative;z-index:1;font-size:3.7rem;line-height:1;transform:translateY(-3%);filter:saturate(1.25) drop-shadow(0 0 12px rgba(150,215,255,.5)) drop-shadow(0 0 4px rgba(255,255,255,.55)) drop-shadow(0 3px 5px rgba(0,0,0,.6));}
.badge-big .b-label{position:absolute;top:calc(100% - 10px);left:50%;transform:translateX(-50%);font-family:'Fredoka',sans-serif;font-weight:700;color:#eaffff;font-size:.8rem;letter-spacing:.4px;white-space:nowrap;line-height:1;background:rgba(8,18,38,.9);padding:4px 14px;border-radius:999px;border:1px solid rgba(120,220,255,.45);box-shadow:0 4px 12px rgba(0,0,0,.4);}
.ray{display:none;}
.win h2{font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.9rem;margin:16px 0 4px;color:var(--green);text-shadow:0 3px 0 var(--green-d);}
.win p{color:#d7ddff;font-weight:600;font-size:1.02rem;max-width:420px;margin:0 auto;}
.parent-card{background:linear-gradient(160deg,#efe9ff,#e2f0ff);color:var(--ink);border-radius:22px;padding:18px;margin:18px auto 0;max-width:460px;text-align:left;box-shadow:0 10px 24px rgba(0,0,0,.3);border:2px solid #d4c9f5;}
.parent-card h3{font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.02rem;color:var(--violet);display:flex;gap:8px;align-items:center;margin-bottom:8px;}
.parent-card p{color:var(--ink-soft);font-weight:600;font-size:.95rem;margin:0;}
.home-activity{background:var(--paper);color:var(--ink);border-radius:22px;padding:18px;margin:14px auto 0;max-width:460px;text-align:left;box-shadow:0 10px 24px rgba(0,0,0,.3);}
.home-activity h3{font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.02rem;color:var(--green-d);display:flex;gap:8px;align-items:center;margin-bottom:8px;}
.home-activity p{color:var(--ink-soft);font-weight:600;font-size:.95rem;margin:0;}
.win-actions{display:flex;flex-direction:column;gap:11px;margin-top:20px;max-width:420px;margin-left:auto;margin-right:auto;}
.btn-primary,.btn-ghost{font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.08rem;border-radius:18px;padding:15px;cursor:pointer;border:none;}
.btn-primary{background:var(--green);color:#13340f;box-shadow:0 6px 0 var(--green-d);}
.btn-primary:active{transform:translateY(4px);box-shadow:0 2px 0 var(--green-d);}
.btn-ghost{background:rgba(255,255,255,.1);color:#fff;border:2px solid rgba(255,255,255,.25);}
.confetti{position:fixed;top:-12px;width:11px;height:16px;z-index:120;pointer-events:none;border-radius:2px;animation:fall linear forwards;}
@keyframes fall{to{transform:translateY(108vh) rotate(720deg);opacity:.9;}}
.foot{text-align:center;color:rgba(255,255,255,.4);font-size:.72rem;margin-top:30px;font-weight:600;letter-spacing:.5px;}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}
/* reduced-motion: the intro fades content in via animation; with motion off, keep it visible (not black) */
@media (prefers-reduced-motion:reduce){
  #introAnim::before,#introAnim .ia-pl,#introAnim .ia-char,#introAnim .ia-logo-wrap,#introAnim .ia-tagline{opacity:1!important;}
}
.streak-toast{position:fixed;top:-90px;left:50%;transform:translateX(-50%);z-index:9998;display:flex;align-items:center;gap:11px;
  background:linear-gradient(160deg,#2a1f5e,#181140);border:2px solid #ffd23f;border-radius:18px;padding:10px 18px;
  box-shadow:0 12px 30px rgba(0,0,0,.55),0 0 18px rgba(255,210,63,.3);transition:top .45s cubic-bezier(.2,.8,.3,1.3);max-width:300px;}
.streak-toast.show{top:max(14px,env(safe-area-inset-top,0px));}
.streak-toast .st-fire{font-size:1.9rem;animation:cheer 1s ease-in-out infinite;}
.streak-toast .st-txt{display:flex;flex-direction:column;line-height:1.2;}
.streak-toast .st-txt b{font-family:'Fredoka',sans-serif;color:#fff;font-size:1.05rem;}
.streak-toast .st-txt span{color:#ffd23f;font-weight:700;font-size:.85rem;}
.locker-card .glow-swatch{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 12px rgba(255,255,255,.25),inset 0 -2px 4px rgba(0,0,0,.3);}
.locker-card .glow-swatch.glow-none{background:rgba(255,255,255,.08);font-size:1.2rem;opacity:.55;box-shadow:none;}
/* ROLLERCOASTER LAB */
.rc-vis{position:relative;width:100%;max-width:360px;margin:0 auto 6px;background:linear-gradient(180deg,#0e1c3f,#152a55);border-radius:16px;border:2px solid rgba(120,190,255,.25);overflow:hidden;}
.rc-svg{display:block;width:100%;height:auto;}
/* TARGET GAME */
.tgt-arena{position:relative;width:100%;height:250px;border-radius:16px;overflow:hidden;
  background:radial-gradient(ellipse at 30% 20%,#1b2c5c,#0b1330 70%);border:2px solid rgba(120,190,255,.25);touch-action:manipulation;}
.tgt-count{position:absolute;top:8px;right:10px;z-index:5;background:rgba(0,0,0,.4);color:#ffd23f;
  font-family:'Fredoka',sans-serif;font-weight:800;font-size:1rem;padding:4px 12px;border-radius:12px;border:1.5px solid rgba(255,210,63,.5);}
.tgt-item{position:absolute;z-index:3;background:none;border:none;font-size:2.3rem;line-height:1;cursor:pointer;padding:8px;
  transform:scale(0) rotate(var(--tr,0deg));animation:tgtPop .22s cubic-bezier(.2,.8,.3,1.35) forwards;filter:drop-shadow(0 3px 8px rgba(0,0,0,.5));}
@keyframes tgtPop{to{transform:scale(1) rotate(var(--tr,0deg));}}
.tgt-item.hit{animation:tgtHit .24s ease-out forwards;}
@keyframes tgtHit{to{transform:scale(1.6) rotate(var(--tr,0deg));opacity:0;}}
.tgt-item.miss{animation:tgtMiss .26s ease-in forwards;}
@keyframes tgtMiss{to{transform:scale(0) rotate(var(--tr,0deg));opacity:0;}}
.tgt-burst{position:absolute;z-index:4;font-size:1.8rem;pointer-events:none;animation:tgtBurst .5s ease-out forwards;}
@keyframes tgtBurst{0%{transform:scale(.4);opacity:1;}100%{transform:scale(1.8);opacity:0;}}
/* TARGET SCENES */
.tgt-scene{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
.tgt-scene .ts-ground{position:absolute;left:0;right:0;bottom:0;height:44px;background:linear-gradient(180deg,#2c9c62,#186b41);}
.tgt-scene .ts-ground.night{background:linear-gradient(180deg,#1d3a2c,#10241b);}
.arena-volcano{background:linear-gradient(180deg,#2a1030,#4a1622 70%) !important;}
.ts-sky-glow{position:absolute;left:-10%;top:6%;width:60%;height:60%;background:radial-gradient(circle,rgba(255,110,40,.32),transparent 65%);}
.ts-mini-volcano{position:absolute;left:4%;bottom:34px;width:120px;height:86px;
  clip-path:polygon(42% 0,58% 0,66% 18%,76% 40%,88% 68%,100% 100%,0 100%,10% 70%,22% 42%,34% 18%);
  background:linear-gradient(105deg,rgba(255,255,255,.12),transparent 34%),radial-gradient(ellipse at 50% 0%,#7a5544,#4c3226 45%,#241610);}
.ts-mini-crater{position:absolute;top:-4px;left:50%;transform:translateX(-50%);width:36px;height:12px;border-radius:50%;
  background:radial-gradient(ellipse,#ffce5a,#ff5d2e 60%,#7a2408);box-shadow:0 0 16px rgba(255,120,40,.95);animation:lavaBubble .7s ease-in-out infinite alternate;}
.ts-mini-smoke{position:absolute;top:-30px;left:50%;width:26px;height:26px;border-radius:50%;filter:blur(5px);
  background:radial-gradient(circle,rgba(180,180,190,.75),rgba(90,90,100,0) 75%);animation:tsSmoke 2.6s ease-out infinite;}
.ts-mini-smoke.s2{animation-delay:1.3s;width:20px;height:20px;}
@keyframes tsSmoke{0%{transform:translate(-50%,0) scale(.5);opacity:0;}25%{opacity:.85;}100%{transform:translate(calc(-50% + 14px),-52px) scale(1.7);opacity:0;}}
.ts-village{position:absolute;right:6%;bottom:36px;font-size:1.9rem;display:flex;gap:2px;filter:drop-shadow(0 3px 5px rgba(0,0,0,.5));}
.ts-prop{position:absolute;filter:drop-shadow(0 3px 5px rgba(0,0,0,.5));}
.ts-earth-arc{position:absolute;left:50%;bottom:-130px;transform:translateX(-50%);width:200%;height:190px;border-radius:50%;
  background:radial-gradient(ellipse at 50% 0%,#3f8fe0,#1c5aa8 40%,#0c2f60 75%);box-shadow:0 -6px 34px rgba(70,150,255,.5);}
.ts-sat{top:14%;right:8%;font-size:1.7rem;animation:bobA 4s ease-in-out infinite;}
.ts-moon2{top:8%;left:7%;font-size:1.5rem;opacity:.9;}
.ts-tent{bottom:34px;left:8%;font-size:2rem;}
.ts-scope{bottom:36px;right:10%;font-size:1.9rem;}
.ts-tree{bottom:36px;left:32%;font-size:1.7rem;}
/* WHITE COMET (space catch) */
.falling.comet-fall{transform:rotate(48deg);}
.comet-head{position:absolute;left:50%;top:58%;width:16px;height:16px;border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle at 40% 36%,#ffffff,#dfeaff 60%,#9fc0ff);box-shadow:0 0 12px rgba(230,240,255,.95),0 0 26px rgba(180,210,255,.6);}
.comet-tail{position:absolute;left:50%;top:58%;width:9px;height:40px;transform:translate(-50%,-100%);border-radius:50% 50% 40% 40%;
  background:linear-gradient(0deg,rgba(255,255,255,.95),rgba(200,225,255,.5) 55%,rgba(180,210,255,0));filter:blur(.6px);}
.falling.junk-small{font-size:1.35rem;}
/* comet-tap target: all-white comet that streaks in like a shooting star */
.tgt-item.tgt-comet{width:44px;height:54px;padding:0;background:none;transform:translate(0,0) rotate(-48deg);animation:cometShoot 2.4s linear forwards;filter:drop-shadow(0 0 6px rgba(200,225,255,.7));}
@keyframes cometShoot{0%{transform:translate(0,0) rotate(-48deg);opacity:0;}12%{opacity:1;}80%{opacity:1;}100%{transform:translate(-300px,270px) rotate(-48deg);opacity:0;}}
/* HEAT DISCOVERY */
.ht-scene{position:relative;width:100%;height:100%;}
.ht-rock{position:absolute;left:38%;top:52%;transform:translate(-50%,-50%);width:110px;height:86px;
  border-radius:44% 56% 52% 48%/58% 46% 54% 42%;
  background:radial-gradient(circle at 36% 30%,#7a3a20,#432012 55%,#1e0d07);
  box-shadow:0 0 28px rgba(255,90,20,.7),inset 0 -10px 22px rgba(255,80,20,.5);animation:htPulse 1s ease-in-out infinite alternate;}
@keyframes htPulse{from{box-shadow:0 0 22px rgba(255,90,20,.55),inset 0 -10px 20px rgba(255,80,20,.45);}
  to{box-shadow:0 0 44px rgba(255,120,40,.95),inset 0 -12px 26px rgba(255,120,40,.75);}}
.ht-crack{position:absolute;background:linear-gradient(90deg,#ffce5a,#ff5d2e);border-radius:3px;filter:blur(.4px);animation:htGlow .8s ease-in-out infinite alternate;}
.ht-crack.c1{left:22%;top:38%;width:56%;height:5px;transform:rotate(14deg);}
.ht-crack.c2{left:30%;top:62%;width:40%;height:4px;transform:rotate(-10deg);}
@keyframes htGlow{from{opacity:.65;}to{opacity:1;}}
.ht-shimmer{position:absolute;left:30%;top:16%;width:38px;height:60px;border-radius:50%;filter:blur(9px);
  background:linear-gradient(180deg,rgba(255,160,80,.0),rgba(255,160,80,.4));animation:htRise 1.6s ease-out infinite;}
.ht-shimmer.s2{left:44%;animation-delay:.8s;}
@keyframes htRise{0%{transform:translateY(16px) scaleX(1);opacity:0;}30%{opacity:.8;}100%{transform:translateY(-34px) scaleX(1.5);opacity:0;}}
.ht-thermo{position:absolute;right:16%;top:20%;width:22px;height:56%;border-radius:12px;background:#f3f4ff;border:3px solid #cfd4f0;overflow:hidden;}
.ht-merc{position:absolute;bottom:0;left:0;right:0;height:12%;background:linear-gradient(180deg,#ff8a3a,#ff2d2d);animation:htMerc 3.4s cubic-bezier(.4,0,.6,1) forwards;}
@keyframes htMerc{to{height:96%;}}
.ht-temp{position:absolute;right:9%;top:8%;font-family:'Fredoka',sans-serif;font-weight:800;color:#ffd23f;font-size:1.3rem;text-shadow:0 0 12px rgba(255,150,50,.7);}
.ht-temp.max{animation:cheer .5s ease-in-out 3;color:#ff5d3a;}
/* custom targets */
.tgt-lavarock .lr-body{display:block;width:38px;height:32px;border-radius:46% 54% 50% 50%/58% 44% 56% 42%;position:relative;
  background:radial-gradient(circle at 34% 28%,#b0402a,#7c2312 55%,#3c0f06);
  box-shadow:0 0 14px rgba(255,80,20,.85),inset 0 -6px 12px rgba(255,90,30,.55);}
.tgt-lavarock .lr-vein{position:absolute;background:linear-gradient(90deg,#ffce5a,#ff5d2e);border-radius:2px;filter:blur(.3px);}
.tgt-lavarock .lr-vein.v1{left:18%;top:40%;width:60%;height:3.5px;transform:rotate(12deg);}
.tgt-lavarock .lr-vein.v2{left:28%;top:64%;width:42%;height:3px;transform:rotate(-9deg);}
.tgt-star{filter:drop-shadow(0 0 8px rgba(255,240,180,.9));}
.tgt-star .st-star{position:relative;z-index:2;font-size:2rem;display:block;}
.tgt-star .st-tail{position:absolute;left:50%;top:52%;width:8px;height:44px;transform:translate(-50%,-100%) rotate(38deg);transform-origin:50% 100%;
  border-radius:50% 50% 40% 40%;background:linear-gradient(0deg,rgba(255,244,200,.95),rgba(255,240,190,.4) 55%,rgba(255,240,190,0));filter:blur(.6px);}
/* INSTALL HINT */
.install-hint{position:fixed;left:50%;bottom:-140px;transform:translateX(-50%);z-index:9997;display:flex;align-items:center;gap:10px;
  width:min(92vw,380px);background:linear-gradient(160deg,#22315f,#141d3f);border:2px solid #59d1ff;border-radius:18px;padding:12px 12px;
  box-shadow:0 14px 34px rgba(0,0,0,.6),0 0 18px rgba(89,209,255,.25);transition:bottom .45s cubic-bezier(.2,.8,.3,1.15);}
.install-hint.show{bottom:calc(84px + env(safe-area-inset-bottom,0px));}
.install-hint .ih-icon{font-size:1.8rem;}
.install-hint .ih-txt{display:flex;flex-direction:column;line-height:1.25;flex:1;}
.install-hint .ih-txt b{font-family:'Fredoka',sans-serif;color:#fff;font-size:.98rem;}
.install-hint .ih-txt span{color:#bcd2f5;font-size:.8rem;}
.install-hint .ih-share{display:inline-block;background:#2f4f8f;border-radius:5px;padding:0 5px;color:#dff0ff;}
.install-hint .ih-btn{font-family:'Fredoka',sans-serif;font-weight:800;background:linear-gradient(180deg,#37d3ff,#1ba7e8);color:#062038;border:none;border-radius:12px;padding:9px 14px;font-size:.92rem;}
.install-hint .ih-x{background:none;border:none;color:#8fa4cf;font-size:1rem;padding:4px 6px;}
/* PROFILE PICKER */
.profile-chip{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(4px);padding:0;overflow:hidden;margin-left:auto;}
.profile-chip .pc-av{width:34px;height:34px;border-radius:50%;object-fit:cover;}
.profile-chip .pa-star{font-size:1.3rem;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#2c3a6e,#151d3f);}
#readBtn{margin-left:0 !important;}
.profile-overlay{position:fixed;inset:0;z-index:9995;display:none;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 34%,#0e1a48 0%,#080b22 58%,#04030a 100%);}
.profile-overlay.show{display:flex;}
.prof-panel{position:relative;width:min(92vw,400px);max-height:88vh;overflow:auto;text-align:center;padding:22px 18px calc(22px + env(safe-area-inset-bottom,0px));}
.prof-logo{width:104px;filter:drop-shadow(0 8px 22px rgba(40,180,255,.35));margin-bottom:6px;}
.prof-title{font-family:'Fredoka',sans-serif;color:#fff;font-size:1.5rem;margin:4px 0 16px;text-shadow:0 2px 12px rgba(90,180,255,.35);}
.prof-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.prof-card{background:linear-gradient(165deg,#1d2a55,#131b3d);border:2px solid rgba(120,190,255,.22);border-radius:20px;
  padding:16px 10px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;
  box-shadow:0 8px 22px rgba(0,0,0,.4);transition:transform .12s;}
.prof-card:active{transform:scale(.96);}
.prof-card.active{border-color:#59ff9d;box-shadow:0 0 0 2px rgba(89,255,157,.35),0 8px 22px rgba(0,0,0,.4);}
.prof-av-wrap{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 34% 30%,#2c3a6e,#141b3c);border:3px solid #fff;box-shadow:0 5px 14px rgba(0,0,0,.5);overflow:hidden;}
.prof-av{width:58px;height:58px;border-radius:50%;object-fit:cover;}
.prof-av.pa-star{font-size:2rem;display:flex;align-items:center;justify-content:center;background:none;border:none;}
.prof-name{font-family:'Fredoka',sans-serif;font-weight:700;color:#fff;font-size:1.02rem;}
.prof-stars{color:#ffd23f;font-weight:800;font-size:.85rem;}
.prof-add{border-style:dashed;justify-content:center;min-height:132px;}
.prof-plus{font-size:2.2rem;color:#59d1ff;line-height:1;}
.prof-create{margin-top:18px;background:linear-gradient(165deg,#1d2a55,#131b3d);border:2px solid rgba(120,190,255,.28);border-radius:20px;padding:16px;}
.prof-create h3{font-family:'Fredoka',sans-serif;color:#fff;margin:0 0 12px;font-size:1.15rem;}
.prof-av-pick{display:flex;justify-content:center;gap:12px;margin-bottom:14px;}
.pav{background:none;border:3px solid transparent;border-radius:50%;padding:2px;cursor:pointer;}
.pav .prof-av{width:52px;height:52px;}
.pav .prof-av.pa-star{width:52px;height:52px;font-size:1.7rem;background:radial-gradient(circle at 34% 30%,#2c3a6e,#141b3c);border-radius:50%;}
.pav.sel{border-color:#59ff9d;box-shadow:0 0 12px rgba(89,255,157,.5);}
.prof-input{width:100%;box-sizing:border-box;font-family:'Fredoka',sans-serif;font-size:1.15rem;text-align:center;color:#fff;
  background:rgba(255,255,255,.08);border:2px solid rgba(120,190,255,.35);border-radius:14px;padding:12px;margin-bottom:14px;outline:none;}
.prof-input:focus{border-color:#59d1ff;box-shadow:0 0 12px rgba(89,209,255,.35);}
.prof-go{width:100%;font-family:'Fredoka',sans-serif;font-weight:800;font-size:1.15rem;color:#06301b;
  background:linear-gradient(180deg,#6ee94a,#2fbd2f);border:none;border-radius:16px;padding:14px;
  box-shadow:0 6px 16px rgba(60,200,60,.45),inset 0 1px 0 rgba(255,255,255,.35);}
.prof-close{position:absolute;top:8px;right:8px;background:rgba(255,255,255,.1);border:none;color:#cfe0ff;
  width:36px;height:36px;border-radius:50%;font-size:1rem;}
/* PARENT CORNER */
.pcp-panel{text-align:left;}
.pcp-logo{display:block;margin:0 auto 4px;width:76px;}
.pcp-panel .prof-title{text-align:center;}
.pcp-note{color:#9fb4dd;font-size:.82rem;text-align:center;margin:0 0 14px;line-height:1.4;}
.pcp-card{background:linear-gradient(165deg,#1d2a55,#131b3d);border:2px solid rgba(120,190,255,.22);border-radius:18px;padding:14px;margin-bottom:12px;}
.pcp-head{display:flex;align-items:center;gap:10px;color:#fff;font-family:'Fredoka',sans-serif;font-size:1.05rem;margin-bottom:8px;}
.pcp-av{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2px solid #fff;}
.pcp-av.pa-star{display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 34% 30%,#2c3a6e,#151d3f);}
.pcp-sess{margin-left:auto;color:#8fa4cf;font-size:.78rem;font-family:'Baloo 2',sans-serif;}
.pcp-stats{display:flex;gap:12px;flex-wrap:wrap;color:#dfe8ff;font-weight:700;font-size:.88rem;margin-bottom:6px;}
.pcp-best{color:#9fb4dd;font-size:.78rem;margin-bottom:10px;}
.pcp-sub{color:#bcd2f5;font-size:.82rem;line-height:1.45;margin:0 0 8px;}
.pcp-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px;}
.pcp-btn{font-family:'Fredoka',sans-serif;font-weight:700;font-size:.85rem;color:#dff0ff;background:rgba(120,190,255,.16);
  border:1.5px solid rgba(120,190,255,.4);border-radius:12px;padding:9px 13px;}
.pcp-btn.go{background:linear-gradient(180deg,#6ee94a,#2fbd2f);color:#06301b;border:none;}
.pcp-btn.warn{border-color:rgba(255,200,80,.5);color:#ffd27a;background:rgba(255,180,60,.12);}
.pcp-btn.danger{border-color:rgba(255,110,110,.5);color:#ff9d9d;background:rgba(255,80,80,.12);}
.pcp-code{width:100%;box-sizing:border-box;height:64px;background:rgba(0,0,0,.35);border:1.5px solid rgba(120,190,255,.3);
  border-radius:12px;color:#cfe0ff;font-size:.72rem;padding:8px;resize:none;margin-bottom:8px;}
.pcp-msg{color:#59ff9d;font-size:.82rem;min-height:1.1em;margin:0;}
.gate-badge,.fb-emoji{font-size:2.6rem;margin-bottom:4px;}
.fb-emoji{display:inline-block;animation:fbPop .5s ease;}
@keyframes fbPop{0%{transform:scale(.4);opacity:0;}70%{transform:scale(1.14);}100%{transform:scale(1);opacity:1;}}
.gate-input{width:130px;text-align:center;font-family:'Fredoka',sans-serif;font-size:1.7rem;font-weight:700;color:#eaf2ff;background:#0e1638;border:2px solid rgba(120,190,255,.4);border-radius:14px;padding:8px 0;margin:8px auto 4px;display:block;-moz-appearance:textfield;}
.gate-input:focus{outline:none;border-color:#6ee94a;}
.shake{animation:gateShake .4s;}
@keyframes gateShake{0%,100%{transform:translateX(0);}20%,60%{transform:translateX(-7px);}40%,80%{transform:translateX(7px);}}
.fb-faces{display:flex;justify-content:center;margin-bottom:6px;}
.fb-faces img{width:56px;height:56px;border-radius:50%;border:3px solid #131b3d;box-shadow:0 2px 8px rgba(0,0,0,.4);}
.fb-faces img:last-child{margin-left:-16px;}
.fb-choices{display:flex;flex-direction:column;gap:10px;margin:14px 0 4px;}
.fb-choice{display:flex;align-items:center;gap:12px;text-align:left;padding:14px 16px;border-radius:16px;border:2px solid rgba(120,190,255,.28);background:linear-gradient(165deg,#1d2a55,#131b3d);color:#eaf2ff;font-family:'Baloo 2',sans-serif;font-size:1.05rem;font-weight:700;cursor:pointer;transition:transform .12s,border-color .12s;}
.fb-choice span{font-size:1.7rem;}
.fb-choice:active{transform:scale(.98);}
.fb-choice.love:hover{border-color:#6ee94a;}
.fb-choice.meh:hover{border-color:#7cc0ff;}
.fb-actions{display:flex;flex-direction:column;gap:10px;margin:12px 0 4px;}
.fb-later{background:none;border:none;color:#8ea3cc;font-size:.9rem;font-family:'Baloo 2',sans-serif;padding:8px;cursor:pointer;}
.fb-later:hover{color:#bcd2f5;}
.prof-parent{position:relative;margin-top:16px;width:100%;overflow:hidden;background:rgba(255,255,255,.06);
  border:1.5px dashed rgba(160,180,220,.35);border-radius:14px;padding:11px;color:#9fb4dd;
  font-family:'Fredoka',sans-serif;font-size:.85rem;}
.prof-parent .pp-fill{position:absolute;inset:0;width:0;background:rgba(89,209,255,.25);}
.prof-parent.holding .pp-fill{animation:ppFill 2.5s linear forwards;}
@keyframes ppFill{from{width:0;}to{width:100%;}}
.prof-parent .pp-label{position:relative;}
.pcp-packrow{display:flex;justify-content:space-between;align-items:center;gap:8px;color:#dfe8ff;font-size:.88rem;margin-bottom:8px;font-family:'Fredoka',sans-serif;}
/* FREEMIUM */
.query-card.locked{opacity:.86;}
.query-card.locked .qc-portal{filter:grayscale(.55) brightness(.8);}
.query-card .qc-lock{position:absolute;top:10px;left:10px;font-size:1.1rem;z-index:3;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));}
.query-card.locked .qc-go{background:rgba(255,255,255,.12);}
.pass-panel{text-align:center;}
.pass-lock{font-size:2.6rem;margin:-4px 0 2px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5));}
.pass-sub{color:#cdddf7;font-size:.95rem;line-height:1.5;margin:2px 6px 14px;}
.pass-sub b{color:#fff;}
.pass-perks{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.pass-perks span{background:rgba(120,190,255,.14);border:1.5px solid rgba(120,190,255,.35);border-radius:12px;
  padding:8px 10px;color:#e8f2ff;font-family:'Fredoka',sans-serif;font-weight:700;font-size:.82rem;}
.pcp-pass .pcp-sess{color:#59ff9d;}
/* GALAXY HOP */
.hop-arena{position:relative;width:100%;max-width:430px;height:min(74vh,640px);margin:8px auto 0;border-radius:18px;overflow:hidden;
  background:linear-gradient(180deg,#0a1130,#111d44);border:2px solid rgba(120,190,255,.22);touch-action:none;}
.hop-lane{position:absolute;left:0;right:0;box-sizing:border-box;}
.hop-lane.safe{background:linear-gradient(180deg,rgba(46,160,90,.22),rgba(30,120,60,.28));border-top:1px solid rgba(120,255,170,.14);}
.hop-lane.start{background:linear-gradient(180deg,rgba(60,90,180,.25),rgba(40,60,140,.3));}
.hop-lane.hazard{background:linear-gradient(180deg,rgba(90,40,120,.28),rgba(50,20,80,.32));}
.hop-ob{position:absolute;top:50%;transform:translateY(-50%);font-size:1.9rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));}
.hop-player{position:absolute;font-size:2.1rem;z-index:5;transition:top .13s cubic-bezier(.3,1.4,.5,1),left .11s ease;filter:drop-shadow(0 3px 5px rgba(0,0,0,.5));}
.hop-player.hop-hit{animation:hopHit .5s ease;}
@keyframes hopHit{0%{transform:scale(1)}40%{transform:scale(1.5) rotate(20deg)}100%{transform:scale(1)}}
.hop-hint{text-align:center;color:#9fb4dd;font-size:.82rem;margin-top:8px;font-family:'Baloo 2',sans-serif;}
.hop-pad{display:flex;gap:10px;justify-content:center;align-items:stretch;margin-top:10px;}
.hop-btn{font-family:'Baloo 2',sans-serif;font-size:1.6rem;font-weight:800;color:#eaf2ff;background:linear-gradient(180deg,#2a3f7a,#1b2c5c);border:2px solid rgba(120,190,255,.42);border-radius:16px;padding:12px 22px;min-width:70px;box-shadow:0 3px 0 rgba(0,0,0,.35);cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;}
.hop-btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.35);}
.hop-btn-up{font-size:1.15rem;padding:12px 24px;background:linear-gradient(180deg,#2f8a4a,#1e6a37);border-color:rgba(120,255,170,.42);}
/* STAR SLICE */
.slice-arena{position:relative;width:100%;max-width:390px;height:min(64vh,520px);margin:8px auto 0;border-radius:18px;overflow:hidden;
  background:radial-gradient(ellipse at 50% 30%,#152a5c,#0a1130 75%);border:2px solid rgba(120,190,255,.22);touch-action:none;}
#sliceTrail{position:absolute;inset:0;z-index:6;pointer-events:none;}
.slice-obj{position:absolute;font-size:2.4rem;z-index:4;will-change:transform,top,left;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5));}
.slice-obj.sliced{animation:sliceCut .25s ease forwards;}
@keyframes sliceCut{to{transform:scale(1.6);opacity:0;}}
.slice-obj.boom{animation:sliceBoom .25s ease forwards;}
@keyframes sliceBoom{to{transform:scale(1.8);opacity:0;}}
.slice-burst{position:absolute;z-index:5;font-size:1.8rem;pointer-events:none;transform:translate(-50%,-50%);animation:sliceBurst .5s ease-out forwards;}
@keyframes sliceBurst{0%{transform:translate(-50%,-50%) scale(.5);opacity:1;}100%{transform:translate(-50%,-50%) scale(1.8);opacity:0;}}
/* ACHIEVEMENTS */
.ach-list{display:flex;flex-direction:column;gap:10px;}
.ach-row{display:flex;align-items:center;gap:12px;background:linear-gradient(165deg,#1a2547,#131b3a);border:1.5px solid rgba(120,190,255,.18);border-radius:16px;padding:11px 13px;}
.ach-row.done{border-color:rgba(89,255,157,.45);box-shadow:0 0 0 1px rgba(89,255,157,.2);}
.ach-em{font-size:1.7rem;flex:0 0 auto;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4));}
.ach-row:not(.done) .ach-em{filter:grayscale(.6) brightness(.85);}
.ach-mid{flex:1;min-width:0;}
.ach-name{display:block;font-family:'Fredoka',sans-serif;font-weight:700;color:#fff;font-size:.98rem;}
.ach-desc{display:block;color:#9fb4dd;font-size:.76rem;margin:1px 0 6px;}
.ach-bar{display:block;height:7px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden;}
.ach-fill{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#37d3ff,#59ff9d);transition:width .5s;}
.ach-num{flex:0 0 auto;font-family:'Fredoka',sans-serif;font-weight:800;color:#cfe0ff;font-size:.82rem;}
.ach-toast{position:fixed;left:50%;top:-120px;transform:translateX(-50%);z-index:9998;display:flex;align-items:center;gap:11px;
  width:min(92vw,360px);background:linear-gradient(160deg,#1d3a2c,#12261c);border:2px solid #59ff9d;border-radius:16px;padding:12px 14px;
  box-shadow:0 12px 30px rgba(0,0,0,.5),0 0 18px rgba(89,255,157,.3);transition:top .5s cubic-bezier(.2,.9,.3,1.2);}
.ach-toast.show{top:calc(12px + env(safe-area-inset-top,0px));}
.ach-toast .at-em{font-size:1.9rem;}
.ach-toast .at-tx{display:flex;flex-direction:column;line-height:1.3;}
.ach-toast .at-tx b{color:#fff;font-family:'Fredoka',sans-serif;font-size:.95rem;}
.ach-toast .at-tx span{color:#bfe8d0;font-size:.8rem;}
/* ASTEROIDS (shared: Asteroid Escape + Star Slice) */
.ast{display:block;position:relative;
  background:radial-gradient(circle at 64% 62%,rgba(0,0,0,.30) 0 11%,transparent 13%),
             radial-gradient(circle at 36% 38%,rgba(0,0,0,.24) 0 8%,transparent 10%),
             radial-gradient(circle at 32% 28%,#9a8a76,#5a4c3e 55%,#2c241c);
  box-shadow:inset -4px -5px 10px rgba(0,0,0,.55),inset 3px 4px 8px rgba(255,240,220,.16),0 3px 8px rgba(0,0,0,.45);
  animation:astSpin linear infinite;}
@keyframes astSpin{to{transform:rotate(360deg);}}
.slice-obj.bad-ast{font-size:0;}
/* cyan sliceable star — distinct from the gold ⭐ reward stars kids collect */
.slice-star{display:block;width:42px;height:42px;margin:auto;
  background:linear-gradient(160deg,#c9f6ff,#39d6ff 50%,#1f83e6);
  clip-path:polygon(50% 2%,61% 35%,96% 35%,68% 57%,79% 92%,50% 71%,21% 92%,32% 57%,4% 35%,39% 35%);
  filter:drop-shadow(0 0 7px rgba(89,220,255,.95));}
/* Asteroid Escape — finish-line spaceship + goal lane */
.hop-lane.goal{background:linear-gradient(180deg,rgba(89,255,157,.30),rgba(46,180,110,.28));border-top:2px solid rgba(120,255,190,.5);}
.hop-goal-ship{position:absolute;left:50%;top:50%;font-size:2rem;z-index:3;filter:drop-shadow(0 0 8px rgba(123,232,255,.85));animation:shipBob 1.4s ease-in-out infinite;}
@keyframes shipBob{0%,100%{transform:translate(-50%,-58%);}50%{transform:translate(-50%,-42%);}}
.hop-player.hop-win{animation:hopWin .6s ease;}
@keyframes hopWin{0%{transform:scale(1);}45%{transform:scale(1.4) rotate(-12deg);}100%{transform:scale(1);}}
/* shared game-over / level-complete overlay (was unstyled — buttons weren't tappable) */
.game-over-ov{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:18px;
  background:rgba(8,12,38,.86);border-radius:18px;animation:goFade .2s ease;}
@keyframes goFade{from{opacity:0;}to{opacity:1;}}
.go-card{background:linear-gradient(165deg,#1c2a54,#111a38);border:2px solid rgba(120,190,255,.35);border-radius:20px;
  padding:22px 20px;text-align:center;max-width:300px;width:100%;box-shadow:0 18px 44px rgba(0,0,0,.55);}
.go-card h2{font-family:'Fredoka',sans-serif;color:#fff;font-size:1.35rem;margin:0 0 4px;}
.go-score{font-family:'Fredoka',sans-serif;font-weight:800;color:#7be8ff;font-size:1.45rem;margin:2px 0 4px;}
.go-stars{color:#ffd23f;font-family:'Fredoka',sans-serif;font-weight:800;font-size:1.05rem;margin:2px 0 6px;text-shadow:0 0 10px rgba(255,210,63,.5);}
.go-btns{display:flex;flex-direction:column;gap:10px;margin-top:14px;}
.go-btn{font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.02rem;border:none;border-radius:14px;padding:13px;cursor:pointer;
  background:rgba(255,255,255,.13);color:#fff;box-shadow:0 5px 0 rgba(0,0,0,.3);transition:transform .08s,box-shadow .08s;-webkit-tap-highlight-color:transparent;}
.go-btn:active{transform:translateY(2px);box-shadow:0 3px 0 rgba(0,0,0,.3);}
.go-btn.primary{background:linear-gradient(180deg,#37d3ff,#1f8fd6);color:#04121f;box-shadow:0 5px 0 #14608f;}
.go-btn.primary:active{box-shadow:0 3px 0 #14608f;}

/* ===== Locker tier badges + gated card states ===== */
.locker-card{position:relative;}
.locker-card.locked{opacity:.74;}
.locker-card .lc-tag{position:absolute;top:6px;left:6px;font-size:9px;font-weight:800;letter-spacing:.04em;padding:2px 7px;border-radius:999px;color:#0a0820;z-index:2;box-shadow:0 2px 5px rgba(0,0,0,.35);}
.lc-tag-pass{background:linear-gradient(90deg,#ffd23f,#ff9d2f);}
.lc-tag-champion{background:linear-gradient(90deg,#8fd0ff,#a06bff);color:#fff;}
.lc-tag-allfree{background:#5be021;}
.lc-btn.pass{background:linear-gradient(90deg,#ffb020,#ff7a2f);color:#1a1330;font-weight:800;}
.lc-btn.is-locked{background:#2a2740;color:#9c96c0;font-size:10.5px;cursor:default;}
.lc-btn.claim{background:linear-gradient(90deg,#5be021,#2fae5a);color:#08210f;font-weight:800;}

/* ===== Parent gate purchase code ===== */
.gate-code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:34px;font-weight:800;letter-spacing:.26em;color:#ffe27a;background:rgba(0,0,0,.28);border:1px solid #4b3ea0;border-radius:12px;padding:10px 8px 10px 18px;margin:8px auto 12px;display:inline-block;}
.gate-link{background:none;border:none;color:#8fd0ff;font-size:13px;margin-top:10px;cursor:pointer;text-decoration:underline;padding:4px;}

/* ===== Quester cheer pop-up (games) ===== */
.qcheer{position:fixed;left:50%;bottom:92px;transform:translateX(-50%) translateY(18px);display:flex;align-items:center;gap:10px;background:rgba(20,16,48,.94);border:2px solid #4b3ea0;border-radius:999px;padding:6px 18px 6px 6px;z-index:400;opacity:0;pointer-events:none;transition:opacity .25s ease, transform .25s ease;box-shadow:0 10px 26px rgba(0,0,0,.5);max-width:88vw;}
.qcheer.show{opacity:1;transform:translateX(-50%) translateY(0);}
.qcheer-face{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid #ffe27a;flex:0 0 auto;}
.qcheer-bubble{color:#fff;font-weight:700;font-size:15px;line-height:1.15;padding-right:4px;}

/* ===== Daily quest card (Home) ===== */
.dq-card{display:flex;align-items:center;gap:10px;margin:4px auto 22px;position:relative;z-index:6;max-width:340px;width:92%;background:linear-gradient(90deg,#241b5e,#1a1440);border:2px solid #ffd23f;border-radius:16px;padding:8px 14px;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.4);}
.dq-card .dq-emoji{font-size:26px;}
.dq-card .dq-txt{display:flex;flex-direction:column;text-align:left;flex:1;min-width:0;}
.dq-card .dq-txt b{color:#ffe27a;font-size:12px;letter-spacing:.05em;text-transform:uppercase;}
.dq-card .dq-txt span{color:#fff;font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dq-card .dq-cta{background:#ffd23f;color:#1a1330;font-weight:800;font-size:13px;border-radius:999px;padding:4px 12px;flex:0 0 auto;}
.dq-card.done{border-color:#3fae5a;opacity:.85;}
.dq-card.done .dq-cta{background:#3fae5a;color:#fff;}

/* ===== Prominent Home profile card ===== */
.home-profile{display:flex;align-items:center;gap:12px;width:92%;max-width:400px;margin:2px auto 10px;
  background:linear-gradient(100deg,#241b5e,#191340);border:2px solid #5b4bd0;border-radius:18px;
  padding:9px 14px;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.4);text-align:left;}
.home-profile .hp-av{width:52px;height:52px;border-radius:50%;object-fit:cover;border:2.5px solid #ffe27a;flex:0 0 auto;box-shadow:0 2px 8px rgba(0,0,0,.4);}
.home-profile .hp-av.pa-star{display:flex;align-items:center;justify-content:center;font-size:1.7rem;background:radial-gradient(circle at 34% 30%,#2c3a6e,#141b3c);}
.home-profile .hp-mid{flex:1;min-width:0;}
.home-profile .hp-hi{font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.15rem;color:#fff;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.home-profile .hp-stats{display:flex;gap:12px;align-items:center;margin-top:3px;color:#cfe0ff;font-weight:700;font-size:.92rem;}
.home-profile .hp-stats .hp-badge{width:1.15em;height:1.15em;background:var(--badge-frame) center/contain no-repeat;display:inline-block;margin-right:-6px;vertical-align:-0.2em;}
.home-profile .hp-switch{flex:0 0 auto;color:#ffd23f;font-weight:800;font-size:.82rem;background:rgba(255,210,63,.14);border:1px solid rgba(255,210,63,.4);border-radius:999px;padding:5px 11px;}

/* ===== Profile bar promoted into the top row ===== */
.topbar .home-profile, .home-profile{flex:1;min-width:0;margin:0;max-width:none;width:auto;padding:6px 12px;gap:10px;border-radius:16px;box-shadow:0 4px 12px rgba(0,0,0,.35);}
.home-profile .hp-av{width:40px;height:40px;}
.home-profile .hp-hi{font-size:1rem;}
.home-profile .hp-stats{font-size:.82rem;gap:10px;margin-top:1px;}
.home-profile .hp-switch{font-size:.72rem;padding:4px 9px;}

/* ===== Today's Quest floating pop-up (5s, on Home tap) ===== */
.dq-pop{position:fixed;top:64px;left:50%;transform:translateX(-50%) translateY(-14px);z-index:350;
  display:flex;align-items:center;gap:10px;width:92%;max-width:360px;
  background:linear-gradient(90deg,#241b5e,#1a1440);border:2px solid #ffd23f;border-radius:16px;padding:8px 14px;
  box-shadow:0 12px 30px rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease;cursor:pointer;text-align:left;}
.dq-pop.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto;}
.dq-pop .dq-emoji{font-size:24px;flex:0 0 auto;}
.dq-pop .dq-txt{display:flex;flex-direction:column;flex:1;min-width:0;}
.dq-pop .dq-txt b{color:#ffe27a;font-size:11px;letter-spacing:.05em;text-transform:uppercase;}
.dq-pop .dq-txt span{color:#fff;font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dq-pop .dq-cta{background:#ffd23f;color:#1a1330;font-weight:800;font-size:12.5px;border-radius:999px;padding:4px 11px;flex:0 0 auto;}
.dq-pop.done{border-color:#3fae5a;}
.dq-pop.done .dq-cta{background:#3fae5a;color:#fff;}

/* ===== Profile bar: compact, uncluttered top row ===== */
.topbar{gap:8px;}
.topbar .home-profile, .home-profile{flex:1;min-width:0;margin:0;max-width:none;width:auto;padding:5px 10px;gap:9px;border-radius:15px;box-shadow:0 3px 10px rgba(0,0,0,.32);}
.home-profile .hp-av{width:38px;height:38px;border-width:2px;}
.home-profile .hp-mid{overflow:hidden;}
.home-profile .hp-hi{font-size:.98rem;}
.home-profile .hp-stats{font-size:.8rem;gap:9px;margin-top:1px;white-space:nowrap;}
.home-profile::after{content:"\203A";color:#ffd23f;font-weight:800;font-size:1.35rem;line-height:1;flex:0 0 auto;margin-left:2px;opacity:.85;}