:root{--navy:#08152f;--navy2:#10234b;--ink:#152344;--cream:#fffaf0;--yellow:#ffc93d;--teal:#2dd4bf;--coral:#ff766c;--purple:#8b7cff;--white:#fff;--muted:#6f7892;--shadow:0 24px 70px rgba(4,12,33,.25);--soft:0 10px 30px rgba(19,34,75,.12)}
*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Nunito,system-ui,sans-serif;color:var(--ink);background:radial-gradient(circle at 12% 15%,#263e7c 0,transparent 28%),radial-gradient(circle at 88% 10%,#253b75 0,transparent 24%),linear-gradient(150deg,#07132d,#102453);overflow-x:hidden}.stars{position:fixed;inset:0;pointer-events:none;opacity:.5;background-image:radial-gradient(circle,#fff 1px,transparent 1px),radial-gradient(circle,#ffd96a 1.5px,transparent 1.5px);background-size:46px 46px,83px 83px;background-position:0 0,20px 17px;mask-image:linear-gradient(#000,transparent 80%)}button{font:inherit}.app-shell{position:relative;z-index:1;max-width:1440px;margin:auto;min-height:100vh}.topbar{height:92px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(22px,5vw,72px);color:white}.brand{border:0;background:none;color:#fff;font:700 clamp(22px,3vw,30px) Fredoka;display:flex;align-items:center;gap:10px;cursor:pointer}.brand span span{color:var(--yellow)}.brand-orbit{width:42px;height:42px;border-radius:15px;background:var(--yellow);color:var(--navy);display:grid;place-items:center;box-shadow:0 0 0 5px rgba(255,201,61,.16);transform:rotate(-8deg)}.top-actions{display:flex;gap:12px;align-items:center}.sound-pill,.parent-button{height:46px;border-radius:18px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.09);color:#fff;backdrop-filter:blur(10px)}.sound-pill{width:46px;display:grid;place-items:center}.parent-button{padding:0 18px;font-weight:800;cursor:pointer}.parent-button:hover{background:rgba(255,255,255,.16)}
main{min-height:calc(100vh - 92px)}.home{padding:20px clamp(22px,5vw,72px) 60px}.hero{min-height:480px;display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:20px;color:white}.hero-copy{padding-bottom:30px}.eyebrow{font-size:12px;font-weight:900;letter-spacing:.15em;color:#159d90;margin:0 0 10px}.hero .eyebrow{color:var(--teal)}h1,h2,h3{font-family:Fredoka;margin:0;line-height:1.02}.hero h1{font-size:clamp(52px,7.4vw,104px);max-width:760px;letter-spacing:-.045em}.hero h1 em{font-style:normal;color:var(--yellow);position:relative}.hero-sub{font-size:clamp(17px,2vw,22px);line-height:1.55;max-width:610px;color:#dce5ff;margin:24px 0 30px}.cta{border:0;background:var(--yellow);color:var(--navy);font-weight:900;padding:18px 26px;border-radius:20px;box-shadow:0 8px 0 #d89900,0 15px 30px rgba(0,0,0,.18);cursor:pointer;font-size:18px;transition:.2s}.cta:hover{transform:translateY(-3px)}.cta:active{transform:translateY(5px);box-shadow:0 3px 0 #d89900}.cta.secondary{background:white;box-shadow:0 8px 0 #d5dcee}.hero-visual{height:500px;position:relative;display:grid;place-items:center}.glow{position:absolute;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,#80f5e955,transparent 68%);filter:blur(4px)}.mascot{position:relative;z-index:1;width:min(92%,500px);height:480px;object-fit:contain;filter:drop-shadow(0 32px 30px rgba(0,0,0,.38));animation:float 4s ease-in-out infinite}.float-card{position:absolute;z-index:2;background:rgba(255,255,255,.94);color:var(--ink);padding:13px 17px;border-radius:19px;box-shadow:var(--soft);font-weight:900}.float-card.one{top:72px;right:0;transform:rotate(5deg)}.float-card.two{left:0;bottom:80px;transform:rotate(-5deg)}@keyframes float{50%{transform:translateY(-13px) rotate(1deg)}}
.world-panel{background:var(--cream);border-radius:38px;padding:28px;box-shadow:var(--shadow)}.panel-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:22px}.panel-heading h2{font-size:34px}.panel-heading p{margin:6px 0 0;color:var(--muted)}.worlds{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.world-card{border:0;text-align:left;border-radius:26px;padding:20px;min-height:188px;cursor:pointer;position:relative;overflow:hidden;color:white;box-shadow:inset 0 -4px rgba(0,0,0,.12);transition:.22s}.world-card:hover{transform:translateY(-5px)}.world-card:nth-child(1){background:linear-gradient(145deg,#2bc5b5,#128b91)}.world-card:nth-child(2){background:linear-gradient(145deg,#ff8f70,#e64f66)}.world-card:nth-child(3){background:linear-gradient(145deg,#9285ff,#5d56c9)}.world-card:nth-child(4){background:linear-gradient(145deg,#5878a8,#30456d)}.world-icon{font-size:50px;display:block;margin-bottom:16px}.world-card h3{font-size:22px}.world-card p{font-size:13px;margin:7px 0;color:#ffffffd9}.lock{position:absolute;right:16px;top:16px;background:#ffffff2b;border-radius:50%;width:34px;height:34px;display:grid;place-items:center}.progress-line{height:7px;background:#0002;border-radius:10px;margin-top:15px;overflow:hidden}.progress-line span{display:block;height:100%;background:white;border-radius:inherit}
.game-screen{min-height:calc(100vh - 92px);padding:18px clamp(16px,4vw,60px) 40px}.game-hud{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;color:white;margin-bottom:18px}.back-btn{justify-self:start;background:#ffffff12;border:1px solid #ffffff20;color:white;border-radius:16px;padding:11px 15px;font-weight:800;cursor:pointer}.quest-progress{width:min(350px,38vw)}.quest-track{height:10px;border-radius:20px;background:#ffffff20;overflow:hidden}.quest-track span{display:block;height:100%;background:linear-gradient(90deg,var(--teal),#8af5de);transition:.5s}.quest-label{text-align:center;font-size:12px;font-weight:900;margin-top:6px;color:#cbd7f4}.star-score{justify-self:end;font:700 20px Fredoka;color:var(--yellow)}.game-stage{background:linear-gradient(180deg,#f8f2ff,#e5f7ff);border:8px solid #ffffff26;min-height:650px;border-radius:38px;box-shadow:var(--shadow);overflow:hidden;position:relative;padding:32px}.cloud{position:absolute;background:white;border-radius:50%;opacity:.65}.cloud:after,.cloud:before{content:"";position:absolute;background:inherit;border-radius:50%}.cloud:before{width:70%;height:150%;left:15%;bottom:0}.cloud:after{width:55%;height:120%;right:-20%;bottom:0}.c1{width:110px;height:35px;top:55px;left:8%}.c2{width:90px;height:28px;top:105px;right:11%}.lesson{position:relative;z-index:2;max-width:900px;margin:auto;text-align:center}.pip-mini{width:82px;height:82px;object-fit:contain;position:absolute;left:-15px;top:-8px}.speech{display:inline-block;background:white;border-radius:24px;padding:17px 28px;margin:6px auto 25px;box-shadow:var(--soft);font:700 clamp(20px,3vw,30px) Fredoka}.speech b{color:#685bd3}.objects{min-height:265px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:22px;max-width:710px;margin:auto}.count-object{border:0;background:none;font-size:clamp(56px,8vw,84px);cursor:pointer;filter:drop-shadow(0 10px 8px #1a294133);transition:.2s;position:relative;animation:pop .35s both}.count-object:hover{transform:scale(1.08) rotate(3deg)}.count-object.counted{transform:scale(.87);filter:grayscale(.2) drop-shadow(0 3px 3px #1a294122);opacity:.62}.count-object.counted:after{content:attr(data-count);position:absolute;width:34px;height:34px;background:var(--yellow);color:var(--navy);border:4px solid white;border-radius:50%;right:-3px;top:-3px;font:800 18px Nunito;display:grid;place-items:center}@keyframes pop{from{opacity:0;transform:scale(.5) translateY(20px)}}.answer-area{border-top:2px dashed #b9cce0;margin-top:25px;padding-top:22px}.answer-prompt{font-weight:900;color:#54617d;margin-bottom:12px}.number-options{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}.number-btn{width:72px;height:68px;border:0;border-radius:20px;background:white;color:var(--ink);font:700 30px Fredoka;box-shadow:0 6px 0 #cbd9e6;cursor:pointer}.number-btn:hover{transform:translateY(-2px)}.number-btn.correct{background:var(--teal);color:white;box-shadow:0 6px 0 #169c8d}.number-btn.wrong{animation:shake .35s;background:#ffd8d5}@keyframes shake{25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}.feedback{height:28px;margin-top:15px;font-weight:900;font-size:18px}.feedback.good{color:#098778}.feedback.try{color:#d04e58}
.modal{position:fixed;inset:0;background:#07112bd9;backdrop-filter:blur(12px);z-index:20;display:grid;place-items:center;padding:20px}.hidden{display:none!important}.modal-card{width:min(470px,100%);background:var(--cream);border-radius:32px;padding:34px;text-align:center;box-shadow:var(--shadow);position:relative}.close{position:absolute;right:17px;top:15px;border:0;background:#e9edf5;width:36px;height:36px;border-radius:50%;font-size:24px;cursor:pointer}.gate-icon{font-size:46px}.modal h2{font-size:34px}.modal p{color:var(--muted)}.gate-answers{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:24px 0}.gate-answers button{border:0;background:#e7edf8;border-radius:16px;padding:16px;font-weight:900;font-size:18px;cursor:pointer}.gate-answers button:hover{background:var(--yellow)}.tiny{font-size:12px}.celebrate{position:fixed;inset:0;z-index:30;pointer-events:none;background:radial-gradient(circle at 20% 20%,#ffd43b 0 4px,transparent 5px),radial-gradient(circle at 70% 30%,#2dd4bf 0 5px,transparent 6px),radial-gradient(circle at 45% 70%,#ff766c 0 4px,transparent 5px);background-size:80px 80px;animation:confetti 1s linear}@keyframes confetti{from{background-position:0 -100vh}to{background-position:80px 100vh}}
.dashboard{min-height:calc(100vh - 92px);background:#f5f6fa;border-radius:38px 38px 0 0;padding:32px clamp(20px,5vw,62px) 60px}.dash-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px}.dash-head h1{font-size:42px}.child-select{background:white;border:1px solid #e0e4ed;border-radius:15px;padding:12px 16px;font-weight:800}.dash-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}.dash-card{background:white;border:1px solid #e7e9ef;border-radius:24px;padding:22px;box-shadow:0 8px 25px rgba(24,41,80,.05)}.stat{grid-column:span 3}.stat-icon{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:#fff1bd;font-size:20px}.stat strong{display:block;font:700 31px Fredoka;margin:13px 0 2px}.stat small{color:var(--muted);font-weight:700}.mastery{grid-column:span 7}.recommend{grid-column:span 5;background:linear-gradient(145deg,#132959,#0b1938);color:white}.activity{grid-column:span 7}.journey{grid-column:span 5}.card-title{font:700 21px Fredoka;margin:0 0 18px}.skill-row{display:grid;grid-template-columns:160px 1fr 42px;gap:12px;align-items:center;margin:15px 0;font-size:14px;font-weight:800}.skill-bar{height:10px;background:#edf0f5;border-radius:10px;overflow:hidden}.skill-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),#43b7e8);border-radius:inherit}.tip-badge{display:inline-block;background:#2dd4bf22;color:#5cebd9;border:1px solid #2dd4bf55;padding:6px 10px;border-radius:20px;font-size:11px;font-weight:900}.recommend h3{font-size:25px;margin:14px 0}.recommend p{color:#d5dff6;line-height:1.6}.offline{background:white;color:var(--ink);border-radius:18px;padding:13px;margin-top:15px;font-size:13px;font-weight:800}.session{display:grid;grid-template-columns:52px 1fr auto;gap:13px;align-items:center;padding:13px 0;border-bottom:1px solid #edf0f5}.session:last-child{border:0}.session-icon{width:48px;height:48px;border-radius:15px;background:#e6fbf8;display:grid;place-items:center;font-size:22px}.session p,.session small{margin:0}.session p{font-weight:900}.session small{color:var(--muted)}.session-score{font-weight:900;color:#098778}.journey-map{display:flex;align-items:center;justify-content:space-around;margin:28px 0}.planet{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#e1e6f0;position:relative;font-size:23px}.planet.done{background:var(--teal)}.planet.current{background:var(--yellow);box-shadow:0 0 0 8px #fff0b4}.planet:not(:last-child):after{content:"";position:absolute;width:60px;border-top:3px dashed #d7dce7;left:66px}.privacy-note{margin-top:20px;color:var(--muted);font-size:12px;text-align:center}
@media(max-width:900px){.hero{grid-template-columns:1fr;text-align:center}.hero-copy{padding-top:35px}.hero h1,.hero-sub{margin-left:auto;margin-right:auto}.hero-visual{height:350px}.mascot{height:350px}.worlds{grid-template-columns:repeat(2,1fr)}.stat{grid-column:span 6}.mastery,.recommend,.activity,.journey{grid-column:span 12}}@media(max-width:560px){.topbar{height:76px}.parent-button{font-size:0;padding:0;width:46px}.parent-button span{font-size:18px}.hero{min-height:600px}.hero h1{font-size:50px}.hero-visual{height:300px}.mascot{height:300px}.float-card{font-size:12px}.world-panel{padding:19px;border-radius:27px}.worlds{grid-template-columns:1fr}.panel-heading{display:block}.game-stage{padding:20px 10px;min-height:610px;border-radius:27px}.pip-mini{display:none}.game-hud{grid-template-columns:auto 1fr auto;gap:10px}.quest-progress{width:auto}.back-btn{font-size:0}.back-btn:before{content:"←";font-size:18px}.count-object{font-size:58px}.number-btn{width:58px;height:58px}.dashboard{padding:26px 15px}.dash-head h1{font-size:32px}.dash-head{align-items:flex-start}.stat{grid-column:span 6}.stat strong{font-size:25px}.skill-row{grid-template-columns:105px 1fr 36px}.planet:not(:last-child):after{width:32px;left:59px}}