:root{
  --ink:#19324d;
  --blue:#238cd6;
  --blue-dark:#1266b3;
  --yellow:#ffd84f;
  --orange:#ff9f36;
  --pink:#ff78b8;
  --white:#fff;
  --shadow:0 18px 45px rgba(35,82,126,.22);
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;font-family:"Trebuchet MS","Segoe UI",sans-serif;background:#72c7f4;color:var(--ink);-webkit-tap-highlight-color:transparent}
button{font:inherit}
.app{position:relative;width:100%;height:100%;min-height:560px;overflow:hidden;isolation:isolate}
.world{position:absolute;inset:0;background:url('../assets/images/clean_screen.png') center/cover no-repeat;z-index:-2}
.world::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.08));pointer-events:none}
.topbar{position:absolute;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:max(14px,env(safe-area-inset-top)) 20px 10px}
.brand-mini{font-weight:1000;letter-spacing:.12em;color:white;text-shadow:0 2px 8px rgba(0,80,130,.35);font-size:clamp(.72rem,1.4vw,.95rem)}
.icon-button,.language-button,.speech-button{border:2px solid rgba(255,255,255,.75);background:rgba(255,255,255,.78);backdrop-filter:blur(10px);box-shadow:0 6px 16px rgba(38,96,140,.18);color:var(--ink);cursor:pointer}
.icon-button{width:48px;height:48px;border-radius:50%;font-size:1.6rem;font-weight:900}
.topbar-actions{display:flex;align-items:center;gap:10px}.language-button{min-width:76px;height:48px;border-radius:999px;display:flex;gap:7px;align-items:center;justify-content:center;font-weight:1000}.speech-button{min-width:92px;height:48px;border-radius:999px;display:flex;gap:7px;align-items:center;justify-content:center;font-weight:1000}.speech-button span:first-child{font-size:1.2rem}.speech-button span:last-child{font-size:.72rem;letter-spacing:.06em}
.language-button span:first-child{font-size:1.35rem}.hidden{visibility:hidden;pointer-events:none}
.screen{position:absolute;inset:0;padding:78px 20px 54px;display:none;align-items:center;justify-content:center}.screen.active{display:flex;animation:screenIn .35s ease both}
@keyframes screenIn{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
.glass-card{background:rgba(255,255,255,.82);border:3px solid rgba(255,255,255,.95);box-shadow:var(--shadow);backdrop-filter:blur(14px)}
.hero-card{position:relative;width:min(560px,88vw);padding:clamp(26px,5vw,52px);border-radius:38px;text-align:center;margin-top:-4vh}
.eyebrow{margin:0 0 10px;font-size:.72rem;letter-spacing:.22em;font-weight:1000;color:#467293}
h1{margin:0;font-size:clamp(3.1rem,10vw,6.6rem);line-height:.75;letter-spacing:-.07em;color:#176fb6;text-shadow:0 5px 0 rgba(255,255,255,.9)}
h1 span{color:#ff8a3c;font-size:.72em;letter-spacing:.02em}
.tagline{margin:24px 0 28px;font-weight:900;font-size:clamp(1rem,2.5vw,1.35rem);color:#416782}
.primary-button{border:0;border-radius:999px;padding:16px 30px;min-width:210px;background:linear-gradient(180deg,#ffd960,#ffad3d);color:#623a00;box-shadow:0 8px 0 #df7727,0 14px 28px rgba(130,67,17,.25);font-size:1.2rem;font-weight:1000;letter-spacing:.05em;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:14px;transition:.14s transform,.14s box-shadow}
.primary-button:hover{transform:translateY(-2px)}.primary-button:active{transform:translateY(6px);box-shadow:0 2px 0 #df7727,0 8px 16px rgba(130,67,17,.2)}
.character{position:absolute;pointer-events:none;filter:drop-shadow(0 18px 16px rgba(34,76,110,.2))}.puffy-start{right:clamp(1vw,7vw,9vw);bottom:clamp(5vh,8vh,10vh);width:clamp(145px,22vw,330px);animation:floaty 3.2s ease-in-out infinite}
@keyframes floaty{50%{transform:translateY(-10px) rotate(1deg)}}
.panel-card{position:relative;width:min(670px,92vw);padding:34px 28px 30px;border-radius:34px;text-align:center}.panel-card h2,.question-card h2,.complete-card h2{margin:0;font-size:clamp(1.7rem,5vw,3rem);color:#176fb6}.panel-card>p{margin:8px 0 22px;color:#52738b;font-weight:800}.guide-byte{position:absolute;width:120px;left:-58px;top:-62px;filter:drop-shadow(0 10px 12px rgba(34,76,110,.2));transform:rotate(-7deg)}
.age-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.age-button{aspect-ratio:1.35;border:3px solid white;border-radius:24px;background:linear-gradient(160deg,#fff,#dff4ff);box-shadow:0 7px 0 #8bc9e8,0 12px 24px rgba(40,105,150,.16);color:#176fb6;font-size:clamp(2rem,7vw,3.6rem);font-weight:1000;cursor:pointer}.age-button:active{transform:translateY(5px);box-shadow:0 2px 0 #8bc9e8}
.game-shell{width:min(920px,95vw);height:min(650px,76vh);display:flex;flex-direction:column;justify-content:center}.progress-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding:0 8px}.round-label{font-weight:1000;color:#244b68;background:rgba(255,255,255,.76);padding:8px 14px;border-radius:999px}.stars{font-size:clamp(1.25rem,3vw,2rem);color:#ffbd22;text-shadow:0 2px white;font-weight:1000;letter-spacing:.08em}.question-card{position:relative;display:flex;align-items:center;justify-content:center;border-radius:28px;padding:16px 28px;text-align:center;min-height:112px}.question-card>div{width:100%;text-align:center}.question-character{position:absolute;left:clamp(18px,4vw,48px);top:50%;transform:translateY(-50%);width:clamp(72px,10vw,116px);height:auto}.helper-text{margin:0 0 2px;font-weight:900;color:#6c86a0}.answer-grid{--answer-columns:4;display:grid;grid-template-columns:repeat(var(--answer-columns),minmax(0,1fr));gap:16px;margin-top:22px;justify-content:center}.answer-button{position:relative;aspect-ratio:1;border:5px solid rgba(255,255,255,.95);border-radius:28px;box-shadow:0 10px 0 rgba(30,85,126,.18),0 15px 30px rgba(30,85,126,.16);cursor:pointer;transition:.15s transform,.15s filter}.answer-button:hover{transform:translateY(-4px) scale(1.02);filter:brightness(1.05)}.answer-button:active{transform:translateY(5px)}.answer-button.correct{animation:correct .65s ease}.answer-button.wrong{animation:wrong .4s ease}@keyframes correct{30%{transform:scale(1.12) rotate(-3deg)}60%{transform:scale(.96) rotate(2deg)}}@keyframes wrong{25%,75%{transform:translateX(-8px)}50%{transform:translateX(8px)}}
.feedback{height:48px;margin-top:14px;text-align:center;font-size:clamp(1.2rem,3vw,1.8rem);font-weight:1000;color:#176fb6;text-shadow:0 2px white}
.complete-card{width:min(560px,90vw);border-radius:36px;padding:34px;text-align:center}.complete-character{width:clamp(140px,25vw,230px);margin-top:-90px;filter:drop-shadow(0 12px 15px rgba(34,76,110,.2));animation:floaty 2.7s ease-in-out infinite}.complete-card p{font-size:1.15rem;color:#52738b;font-weight:800}.complete-stars{font-size:clamp(2.2rem,8vw,4rem);color:#ffc928;letter-spacing:.08em;text-shadow:0 3px white;margin:12px 0 24px}
footer{position:absolute;bottom:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;padding:10px 16px max(10px,env(safe-area-inset-bottom));font-size:.68rem;font-weight:900;letter-spacing:.08em;color:rgba(22,67,98,.65)}
@media(max-width:720px){.puffy-start{opacity:.92;right:-18px;bottom:55px;width:180px}.hero-card{margin-top:-12vh}.guide-byte{width:88px;left:-18px;top:-53px}.answer-grid{grid-template-columns:repeat(min(var(--answer-columns),2),minmax(0,1fr));gap:12px}.game-shell{height:auto}.answer-button{max-height:145px}.question-card{padding-left:92px;padding-right:18px}.question-character{left:16px;width:68px}.screen{padding-left:12px;padding-right:12px}.brand-mini{display:none}}
@media(max-height:650px) and (orientation:landscape){.hero-card{padding:18px 32px;margin-top:0}.tagline{margin:12px 0 16px}.puffy-start{width:170px;bottom:30px}.panel-card{padding:22px}.age-button{aspect-ratio:1.8;font-size:2rem}.game-shell{height:75vh}.question-card{padding:8px 20px}.question-character{width:64px}.answer-grid{margin-top:10px}.answer-button{max-height:125px}.feedback{margin-top:6px}.complete-character{width:130px;margin-top:-60px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}

/* BUILD 0002 */
.mode-panel{position:relative;width:min(760px,92vw);padding:34px 28px 30px;border-radius:34px;text-align:center}
.mode-panel h2{margin:0;font-size:clamp(1.7rem,5vw,3rem);color:#176fb6}.mode-panel>p{margin:8px 0 22px;color:#52738b;font-weight:800}
.mode-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.mode-button{min-height:145px;border:3px solid white;border-radius:28px;background:linear-gradient(160deg,#fff,#e5f7ff);box-shadow:0 8px 0 #8bc9e8,0 14px 28px rgba(40,105,150,.16);color:#176fb6;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.mode-button:active{transform:translateY(6px);box-shadow:0 2px 0 #8bc9e8}.mode-icon{font-size:clamp(2.2rem,7vw,4rem)}.mode-button strong{font-size:clamp(1.15rem,3vw,1.55rem)}.mode-button small{color:#6d8ba0;font-weight:900}
.answer-button{font-size:clamp(2.4rem,8vw,5.2rem);font-weight:1000;color:white;text-shadow:0 3px 4px rgba(20,55,80,.25)}
.answer-button.shape{font-size:clamp(3.2rem,10vw,7rem)}
.count-box{grid-column:1/-1;min-height:92px;border:3px solid rgba(255,255,255,.95);border-radius:25px;background:rgba(255,255,255,.86);display:flex;align-items:center;justify-content:center;flex-wrap:wrap;padding:12px 22px;font-size:clamp(1.65rem,5vw,3.2rem);letter-spacing:.12em;box-shadow:0 8px 24px rgba(30,85,126,.14)}
@media(max-width:520px){.mode-grid{gap:11px}.mode-button{min-height:125px}.count-box{min-height:74px;padding:8px;font-size:1.7rem}.answer-button{font-size:2.7rem}}

/* BUILD 0002 REV C | CACHE 0002-rev-c-20260801T071057Z */

/* BUILD 0003 */
.question-character.is-speaking{
  animation:puffyTalk .24s ease-in-out infinite alternate;
  filter:drop-shadow(0 0 12px rgba(255,216,79,.75));
}
@keyframes puffyTalk{
  from{transform:translateY(-50%) scale(1) rotate(-1deg)}
  to{transform:translateY(-50%) scale(1.06) rotate(1deg)}
}
@media(max-width:520px){
  .speech-button{min-width:48px;width:48px}
  .speech-button span:last-child{display:none}
  .topbar-actions{gap:7px}
}
/* CACHE 0003-20260801T072507Z */