:root{
  --blue:#3b82f6; --deep:#1e3a8a; --yellow:#facc15; --green:#22c55e;
  --pink:#fb7185; --ink:#16324f; --paper:#fff; --cream:#fff9e8;
  --shadow:0 18px 40px rgba(30,58,138,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif;background:linear-gradient(#dff4ff,#fff7dc);color:var(--ink);min-height:100vh}
button{font:inherit}
button:focus-visible{outline:4px solid #1113;outline-offset:3px}
.topbar{position:sticky;top:0;z-index:40;display:flex;justify-content:space-between;align-items:center;padding:12px clamp(16px,4vw,48px);background:#ffffffea;backdrop-filter:blur(14px);border-bottom:1px solid #dce9f7}
.brand{display:flex;align-items:center;gap:10px;background:none;border:0;color:var(--ink);cursor:pointer;text-align:left}
.brand-badge{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:linear-gradient(135deg,var(--blue),#8b5cf6);color:#fff;font-size:24px;font-weight:900;box-shadow:0 8px 16px #3b82f64d}
.brand strong,.brand small{display:block}.brand strong{font-size:19px}.brand small{font-size:12px;opacity:.7}
.top-actions{display:flex;gap:8px}
.icon-btn,.cart-btn{border:0;border-radius:14px;padding:11px 14px;background:#eef6ff;cursor:pointer;font-weight:800}
.cart-btn{background:#fff3c4}
main{padding:0 clamp(16px,4vw,54px) 110px;max-width:1400px;margin:auto}
.screen{display:none;animation:screenIn .35s ease}.screen.active{display:block}
@keyframes screenIn{from{opacity:0;transform:translateY(10px)}}
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center;padding:50px 0 30px}
.eyebrow{display:inline-block;padding:8px 12px;border-radius:999px;background:#fff0a6;color:#7c5600;font-weight:900;font-size:13px;text-transform:uppercase;letter-spacing:.08em}
h1{font-size:clamp(42px,7vw,82px);line-height:.98;margin:18px 0 20px;letter-spacing:-.045em}
h2{font-size:clamp(30px,4vw,50px);margin:8px 0}
.hero-copy p{font-size:clamp(17px,2vw,22px);line-height:1.55;max-width:700px}
.hero-actions,.map-actions,.modal-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.primary-btn,.secondary-btn{border:0;border-radius:18px;padding:15px 22px;font-weight:900;cursor:pointer;transition:.2s transform,.2s box-shadow}
.primary-btn{background:linear-gradient(180deg,#4f9cff,#2f6ee8);color:#fff;box-shadow:0 8px 0 #1f4fb4,0 14px 24px #3b82f64d}
.primary-btn:hover{transform:translateY(-2px)}.primary-btn:active{transform:translateY(5px);box-shadow:0 3px 0 #1f4fb4}
.secondary-btn{background:#fff;color:var(--ink);box-shadow:0 8px 0 #d9e5f1,0 14px 22px #33415520}
.wide{width:100%}.save-note{margin-top:20px;font-weight:800;opacity:.68}
.hero-scene{min-height:500px;position:relative;overflow:hidden;border:8px solid #fff;border-radius:38px;background:linear-gradient(#7dd3fc 0 62%,#91dd72 62%);box-shadow:var(--shadow)}
.cloud{position:absolute;font-size:72px;filter:drop-shadow(0 8px 0 #ffffff66);animation:cloudFloat 9s linear infinite}.c1{top:40px;left:-30px}.c2{top:130px;right:20px;animation-delay:-4s}.sun{position:absolute;right:36px;top:34px;font-size:78px;animation:spin 14s linear infinite}
.hill{position:absolute;border-radius:50% 50% 0 0;background:#4dbb63;bottom:70px}.hill1{width:420px;height:190px;left:-90px}.hill2{width:450px;height:230px;right:-120px;background:#69cc72}.ground{position:absolute;left:0;right:0;bottom:0;height:95px;background:#8b5e34}
.hero-character{position:absolute;bottom:64px;left:14%;font-size:90px;animation:heroRun 4s ease-in-out infinite;filter:drop-shadow(0 12px 5px #0002)}.hero-character .hat{font-size:36px;position:absolute;top:-15px;left:38px}.hero-character .face{display:none}
.hero-star{position:absolute;font-size:46px;animation:bob 1.8s ease-in-out infinite}.s1{left:42%;top:25%}.s2{left:62%;top:45%;animation-delay:.4s}.s3{right:12%;bottom:24%;animation-delay:.8s}
@keyframes heroRun{0%,100%{transform:translateX(0) rotate(-2deg)}50%{transform:translateX(180px) translateY(-22px) rotate(4deg)}}
@keyframes cloudFloat{50%{transform:translateX(45px)}}@keyframes bob{50%{transform:translateY(-16px) rotate(8deg)}}@keyframes spin{to{transform:rotate(360deg)}}
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:20px 0 40px}
.feature-grid article{background:#fff;border-radius:24px;padding:24px;box-shadow:var(--shadow)}.feature-grid span{font-size:42px}.feature-grid h3{font-size:21px;margin:10px 0 6px}.feature-grid p{margin:0;line-height:1.5;opacity:.76}
.screen-heading{display:flex;justify-content:space-between;align-items:end;padding:38px 0 18px}
.player-stats{display:flex;gap:10px}.player-stats span{background:#fff;padding:12px 16px;border-radius:16px;font-size:20px;box-shadow:var(--shadow)}
.world-map{position:relative;min-height:650px;border:8px solid #fff;border-radius:36px;overflow:hidden;background:linear-gradient(#7dd3fc 0 38%,#a7e676 38% 100%);box-shadow:var(--shadow)}
.map-path{position:absolute;left:13%;right:13%;top:52%;height:36px;background:#f2cf7e;border:6px solid #c89842;border-radius:999px;transform:rotate(-8deg)}
.level-nodes{position:absolute;inset:0}
.level-node{position:absolute;width:72px;height:72px;border-radius:50%;border:6px solid #fff;background:linear-gradient(#60a5fa,#2563eb);color:white;font-size:26px;font-weight:1000;display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 0 #1849a9,0 14px 18px #0002;transition:.25s}
.level-node:hover{transform:translateY(-6px) scale(1.06)}.level-node.locked{filter:grayscale(.8);opacity:.65;cursor:not-allowed;background:#94a3b8;box-shadow:0 8px 0 #64748b}
.level-node.completed{background:linear-gradient(#facc15,#f59e0b);box-shadow:0 8px 0 #b96b00}.node-stars{position:absolute;top:74px;white-space:nowrap;font-size:18px;filter:none}
.map-avatar{position:absolute;font-size:58px;z-index:5;transition:1s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 10px 4px #0003)}
.map-decor{position:absolute;font-size:70px}.d1{left:4%;top:12%}.d2{right:4%;top:20%}.d3{right:8%;bottom:7%;font-size:110px}.d4{left:40%;top:5%;font-size:100px}.d5{left:8%;bottom:10%}.d6{left:58%;bottom:12%}
.game-shell{max-width:980px;margin:30px auto}.game-hud{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.level-label,.hud-score{background:#fff;border-radius:16px;padding:12px 16px;font-weight:900;box-shadow:var(--shadow)}
.game-world{height:310px;position:relative;overflow:hidden;border:8px solid #fff;border-radius:32px;background:linear-gradient(#78d4ff 0 68%,#81d061 68%);box-shadow:var(--shadow)}
.floating-cloud{position:absolute;font-size:64px;animation:cloudFloat 8s ease-in-out infinite}.fc1{left:10%;top:22px}.fc2{right:15%;top:70px;animation-delay:-3s}
.platform{position:absolute;height:24px;border-radius:20px;background:#8b5e34;border-top:8px solid #66bb4d}.p1{left:4%;right:62%;bottom:48px}.p2{left:38%;right:34%;bottom:92px}.p3{left:72%;right:4%;bottom:48px}
.runner{position:absolute;left:7%;bottom:70px;font-size:66px;transition:.7s cubic-bezier(.22,.85,.25,1.25);filter:drop-shadow(0 9px 3px #0002)}.runner.jump{animation:jump .65s ease}.goal-friend{position:absolute;right:8%;bottom:72px;font-size:58px;animation:bob 1.5s ease-in-out infinite}
@keyframes jump{50%{transform:translateY(-90px) rotate(8deg)}}
.spark{position:absolute;font-size:32px;animation:spark 800ms ease forwards}@keyframes spark{to{transform:translate(var(--x),var(--y)) scale(.2) rotate(180deg);opacity:0}}
.question-card{margin-top:18px;background:#fff;border-radius:28px;padding:26px;box-shadow:var(--shadow)}.question-top{display:flex;justify-content:space-between;align-items:center;font-weight:900}.skill-tag{background:#e0f2fe;padding:8px 12px;border-radius:999px;color:#075985}
.question-card h2{text-align:center;font-size:clamp(34px,6vw,64px);margin:18px 0}.visual-prompt{text-align:center;font-size:46px;min-height:10px;line-height:1.4}
.answers{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}.answer-btn{border:0;border-radius:20px;padding:20px;font-size:clamp(26px,5vw,42px);font-weight:1000;background:#eef6ff;color:var(--ink);cursor:pointer;box-shadow:0 7px 0 #b8d4ed;transition:.15s}.answer-btn:hover{transform:translateY(-3px)}.answer-btn.correct{background:#bbf7d0;box-shadow:0 7px 0 #4ade80}.answer-btn.wrong{background:#fecdd3;box-shadow:0 7px 0 #fb7185;animation:shake .35s}@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.feedback{text-align:center;font-size:20px;font-weight:900;min-height:28px}
.store-card{display:grid;grid-template-columns:.7fr 1.3fr;gap:34px;align-items:center;background:#fff;margin:46px auto;max-width:940px;border-radius:34px;padding:34px;box-shadow:var(--shadow)}.store-art{min-height:360px;display:grid;place-items:center;font-size:150px;border-radius:28px;background:linear-gradient(135deg,#dbeafe,#fef3c7)}.store-card li{margin:10px 0}.price{font-size:44px;font-weight:1000;margin:20px 0}
.drawer{position:fixed;inset:0;background:#0f172a77;z-index:80;display:none;justify-content:flex-end}.drawer.open{display:flex}.drawer-panel{width:min(430px,100%);height:100%;background:#fff;padding:22px;animation:drawerIn .25s ease}@keyframes drawerIn{from{transform:translateX(100%)}}.drawer-head{display:flex;justify-content:space-between;align-items:center}.cart-item{display:flex;justify-content:space-between;gap:12px;padding:18px 0;border-bottom:1px solid #e2e8f0}.cart-total{display:flex;justify-content:space-between;font-size:22px;padding:20px 0}.checkout-note{text-align:center;font-size:13px;opacity:.6}
.modal{position:fixed;inset:0;background:#10213b99;z-index:90;display:none;place-items:center;padding:16px}.modal.open{display:grid}.modal-card{background:#fff;max-width:520px;width:100%;border-radius:34px;padding:34px;text-align:center;box-shadow:var(--shadow);animation:pop .3s cubic-bezier(.2,.9,.2,1.2)}@keyframes pop{from{transform:scale(.75);opacity:0}}.modal-icon{font-size:82px}.modal-stars{font-size:48px;letter-spacing:6px;margin:18px 0}
.bottom-nav{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:50;display:flex;gap:7px;background:#ffffffee;padding:8px;border-radius:22px;box-shadow:var(--shadow);backdrop-filter:blur(12px)}.bottom-nav button{border:0;background:transparent;border-radius:16px;padding:9px 18px;cursor:pointer;font-size:22px}.bottom-nav span{display:block;font-size:11px;font-weight:900}
@media(max-width:900px){.hero{grid-template-columns:1fr}.hero-scene{min-height:380px}.feature-grid{grid-template-columns:repeat(2,1fr)}.store-card{grid-template-columns:1fr}.world-map{min-height:580px}}
@media(max-width:600px){main{padding-inline:12px}.topbar{padding:10px 12px}.brand small{display:none}.hero{padding-top:28px}.hero-scene{min-height:320px}.hero-character{font-size:68px}.feature-grid{grid-template-columns:1fr}.screen-heading{align-items:flex-start;gap:12px}.world-map{min-height:520px}.level-node{width:58px;height:58px;font-size:21px}.node-stars{top:59px;font-size:14px}.answers{grid-template-columns:1fr}.answer-btn{padding:14px}.game-world{height:245px}.question-card{padding:18px}.bottom-nav{bottom:8px}.bottom-nav button{padding:8px 13px}}