@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#0a1425;--panel:#111f35;--line:#273a57;--muted:#8b9db7;--text:#f4f7fc;--blue:#68d1ff;--gold:#ffd05c}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse at 50% -20%,#203e68 0,transparent 45%),var(--bg);color:var(--text);font-family:Manrope,system-ui,sans-serif}.app{max-width:1500px;margin:auto;padding:0 30px}.top{height:82px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #273a5770}.brand{display:flex;gap:11px;align-items:center;color:#fff;text-decoration:none;font-size:15px;font-weight:900;letter-spacing:1.2px}.brand-icon{width:40px;height:40px;border-radius:12px;background:linear-gradient(145deg,#ffe27e,#ffad35);display:grid;place-items:center;color:#17233a;font-size:23px;box-shadow:0 7px 22px #ffc64a25}.brand small{display:block;font:9px 'DM Mono',monospace;color:#90a5c2;letter-spacing:1.5px;margin-top:4px}.top-right{display:flex;gap:10px;align-items:center}.pill,.tool{border:1px solid var(--line);background:#101e33;color:#a9bad1;border-radius:9px;padding:10px 12px;font:9px 'DM Mono',monospace;letter-spacing:.7px}.pill i,.game-controls i{display:inline-block;width:6px;height:6px;background:#5fe0b2;border-radius:50%;margin-right:7px}.tool{cursor:pointer;color:#e4edf9}
.hero{display:grid;grid-template-columns:1fr 1fr;gap:25px;align-items:center;padding:48px 0 42px}.hero-copy{padding:12px 0}.kicker{font:10px 'DM Mono',monospace;letter-spacing:2px;color:#68d1ff}.hero h1{font-size:clamp(38px,5vw,67px);line-height:.98;letter-spacing:-2.7px;margin:18px 0}.hero h1 span,.how h2 span{color:var(--gold)}.hero-copy>p{font-size:13px;line-height:1.9;color:#9aacc6;max-width:480px}.hero-actions{display:flex;gap:10px;margin-top:25px;flex-wrap:wrap}.primary,.secondary{border:0;border-radius:9px;padding:14px 17px;font:900 10px Manrope,sans-serif;letter-spacing:.8px;cursor:pointer}.primary{color:#1a263c;background:linear-gradient(180deg,#ffe17a,#ffbd3c);box-shadow:0 4px 0 #c68d24}.primary:active{transform:translateY(2px);box-shadow:0 2px 0 #c68d24}.secondary{color:#d9e8fa;background:#122540;border:1px solid #2a4567}.hero-foot{display:flex;gap:17px;margin-top:24px;font:8px 'DM Mono',monospace;color:#6f86a7;letter-spacing:.6px;flex-wrap:wrap}
.hero-art{height:330px;position:relative;overflow:hidden;border:1px solid #3a6484;border-radius:18px;background:linear-gradient(#55baff 0%,#a4e8ff 70%,#b7f1ff 100%);box-shadow:0 22px 60px #0002}.sun{position:absolute;right:15%;top:35px;width:65px;height:65px;border-radius:50%;background:#fff0a4;box-shadow:0 0 0 15px #fff0a433,0 0 60px #fff2a480}.cloud{position:absolute;background:#fff9;width:105px;height:24px;border-radius:25px}.cloud:before,.cloud:after{content:'';position:absolute;background:inherit;border-radius:50%;width:39px;height:35px;top:-15px;left:20px}.cloud:after{width:30px;height:28px;left:53px;top:-8px}.cloud1{top:56px;left:11%}.cloud2{top:100px;right:10%;transform:scale(.7)}.hill{position:absolute;bottom:40px;width:300px;height:160px;border-radius:50% 50% 0 0;background:#54cb78}.hill1{left:-70px}.hill2{right:-65px;bottom:35px;background:#36b864;width:350px;height:190px}.hero-ground{position:absolute;bottom:0;height:49px;width:100%;background:repeating-linear-gradient(90deg,#92532e 0 31px,#a96135 31px 34px);border-top:10px solid #48bd50}.hero-ground:after{content:'';position:absolute;inset:10px 0 0;background:repeating-linear-gradient(0deg,transparent 0 20px,#6f3d2b 20px 23px)}.brick{position:absolute;z-index:2;top:112px;width:43px;height:43px;display:grid;place-items:center;background:#f2ad45;border:4px solid #b96930;color:#fff4ae;font-size:27px;font-weight:900;box-shadow:inset 0 0 0 2px #ffd16a}.b1{left:38%}.b2{left:calc(38% + 45px);top:67px}.pipe{position:absolute;bottom:40px;right:18%;width:67px;height:93px;background:linear-gradient(90deg,#118c4b,#35d76a 30%,#128c4b);border:4px solid #117b43;border-bottom:0;z-index:3}.pipe div{position:absolute;top:-13px;left:-8px;width:75px;height:19px;background:linear-gradient(90deg,#18a952,#50e77a 35%,#139449);border:4px solid #117b43}.mascot{position:absolute;bottom:48px;left:24%;width:52px;height:75px;z-index:4;filter:drop-shadow(0 4px 2px #163e3740)}.mascot .cap{position:absolute;top:2px;left:5px;width:42px;height:16px;border-radius:12px 12px 4px 4px;background:#ff8046;border-bottom:4px solid #d64b39}.mascot .face{position:absolute;top:15px;left:9px;width:34px;height:27px;border-radius:8px 8px 13px 13px;background:#f5bd8a}.mascot .face i,.mascot .face b{position:absolute;top:7px;left:8px;width:4px;height:7px;background:#26324a;border-radius:2px}.mascot .face b{left:23px}.mascot .face em{position:absolute;bottom:4px;left:12px;width:12px;height:3px;background:#a84b40}.mascot .body{position:absolute;top:40px;left:7px;width:38px;height:25px;border-radius:8px;background:#347df0;border-bottom:6px solid #2351ac}.mascot .shoe{position:absolute;bottom:0;left:4px;width:45px;height:10px;background:#513b39;border-radius:5px}.coin{position:absolute;z-index:4;color:#ffba28;border:3px solid #fff08a;border-radius:50%;width:28px;height:35px;text-align:center;line-height:29px;font-weight:900;background:#ffc632;box-shadow:0 0 20px #ffd05c88}.coin1{top:125px;left:53%}.coin2{top:165px;right:31%}
.game-section,.world-section{padding-top:26px;scroll-margin-top:20px}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.section-heading h2,.how h2{font-size:25px;letter-spacing:-.7px;margin:7px 0}.section-heading p{font-size:11px;color:var(--muted);margin:5px 0}.current-stage{text-align:right}.current-stage span{display:block;font:9px 'DM Mono',monospace;color:var(--blue);letter-spacing:1px;margin-bottom:5px}.current-stage strong{font-size:12px}.hud{display:flex;justify-content:space-around;gap:8px;padding:15px;border:1px solid var(--line);border-bottom:0;border-radius:12px 12px 0 0;background:#101e33}.hud>div{min-width:0;text-align:center}.hud small{display:block;font:9px 'DM Mono',monospace;color:#7f94b4;letter-spacing:1px;margin-bottom:6px}.hud strong{font:700 14px 'DM Mono',monospace}.game-frame{position:relative;overflow:hidden;background:#63c7ff;border:1px solid var(--line)}canvas{display:block;width:100%;height:auto;aspect-ratio:16/7.4;image-rendering:pixelated;touch-action:none}.overlay{position:absolute;inset:0;display:grid;place-items:center;background:#07152b70;backdrop-filter:blur(2px);transition:opacity .2s}.overlay.hidden{opacity:0;pointer-events:none}.overlay-card{width:min(410px,90%);padding:25px 28px;background:#0c1d35ed;border:1px solid #73cfff60;border-radius:16px;box-shadow:0 20px 65px #04102475}.overlay-card h2{font-size:31px;line-height:1.03;margin:12px 0;letter-spacing:-1px}.overlay-card p{font-size:11px;color:#a8bdd6;line-height:1.8}.overlay-card>small{display:block;font:8px 'DM Mono',monospace;color:#829ab9;margin-top:17px;line-height:1.7}.overlay-card .primary{margin-top:8px}.compact{text-align:center;width:min(330px,90%)}.compact .primary,.compact .secondary{margin:8px 4px 0}.touch{display:none;position:absolute;bottom:12px;left:12px;right:12px;justify-content:space-between;pointer-events:none}.touch>div{display:flex;gap:8px}.touch button{pointer-events:auto;width:50px;height:50px;border-radius:50%;border:1px solid #ffffff90;background:#102946c9;color:#fff;font-size:20px;touch-action:none}.touch .jump{height:62px;width:65px;background:#247cf0;font-size:12px;font-weight:900}.toast{position:absolute;top:15px;left:50%;transform:translate(-50%,-8px);opacity:0;transition:.2s;background:#0a1b30ed;border:1px solid #527493;color:white;border-radius:8px;padding:9px 13px;font:10px 'DM Mono',monospace;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}.game-controls{height:46px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;background:#101e33;border:1px solid var(--line);border-top:0;border-radius:0 0 12px 12px;color:#8298b6;font:9px 'DM Mono',monospace}.game-controls>span{display:flex;align-items:center;gap:5px}.game-controls button{border:1px solid #2a4262;background:#142742;color:#b5c7df;border-radius:6px;padding:7px 9px;font:9px 'DM Mono',monospace;cursor:pointer}.game-controls>div{display:flex;gap:6px}
.world-count{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:#101e33}.world-count strong{font-size:29px;color:var(--gold)}.world-count span{font:8px 'DM Mono',monospace;color:#90a6c4;line-height:1.6}.world-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.world-card{padding:0;overflow:hidden;text-align:left;background:#101e33;border:1px solid #293d5b;border-radius:12px;color:white;cursor:pointer;transition:transform .15s,border-color .15s}.world-card:hover{transform:translateY(-3px);border-color:#6dcfff}.world-card.selected{border-color:#ffd05c;box-shadow:0 0 0 1px #ffd05c30}.world-art{height:105px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:37px;text-shadow:0 5px 12px #0003}.world-art:before,.world-art:after{content:'';position:absolute;width:160px;height:90px;bottom:-48px;border-radius:50%;background:#ffffff22}.world-art:after{left:38%;bottom:-60px;background:#06152b25}.world-art span{z-index:2}.world-card:nth-child(1) .world-art{background:linear-gradient(#50bfff,#b4efff 60%,#58ce78 61%,#218b4a)}.world-card:nth-child(2) .world-art{background:linear-gradient(#5a9ee7,#d0f1ff 60%,#9a5e3a 61%,#55382e)}.world-card:nth-child(3) .world-art{background:linear-gradient(#f29b72,#f9d1a1 55%,#a74635 56%,#4b1f2b)}.world-card:nth-child(4) .world-art{background:linear-gradient(#65c6ed,#effbff 60%,#c6f2ff 61%,#5eacd2)}.world-card:nth-child(5) .world-art{background:linear-gradient(#7f91e2,#d9d8ff 60%,#6665b7 61%,#343875)}.world-card:nth-child(6) .world-art{background:linear-gradient(#f4bd61,#fff0b0 58%,#cc8950 59%,#77432d)}.world-card:nth-child(7) .world-art{background:linear-gradient(#5e8bd2,#b4d9ff 60%,#7b8eab 61%,#364968)}.world-card:nth-child(8) .world-art{background:linear-gradient(#5e74a9,#e6c7ff 60%,#ba7186 61%,#5a2949)}.world-info{padding:12px}.world-info small{font:9px 'DM Mono',monospace;color:#7fcfff}.world-info strong{display:block;font-size:13px;margin:5px 0}.world-info p{font-size:10px;color:#8da2c0;margin:0 0 10px}.stages{display:flex;gap:5px}.stages button{flex:1;border:1px solid #2b4160;background:#172a46;color:#c7d7ec;border-radius:5px;padding:6px 0;font:9px 'DM Mono',monospace;cursor:pointer}.stages button:hover,.stages button.current{background:#ffd05c;color:#172238;border-color:#ffd05c}
.how{display:grid;grid-template-columns:.8fr 1.2fr;gap:30px;padding:55px 0 40px}.how h2{font-size:35px;line-height:1.1}.how-items{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.how-items article{border:1px solid var(--line);border-radius:12px;padding:15px;background:#101e33}.how-items article>b{display:block;font:11px 'DM Mono',monospace;color:var(--gold);margin-bottom:25px}.how-items strong{font-size:12px}.how-items p{font-size:10px;line-height:1.7;color:#8ea2bf}footer{padding:20px 0 25px;border-top:1px solid #253955;color:#637b9c;font:9px 'DM Mono',monospace;letter-spacing:1px}footer span{color:#355473;margin:0 7px}.foot-right{float:right}
@media(max-width:900px){.app{padding:0 16px}.hero{gap:16px}.hero-art{height:280px}.world-grid{grid-template-columns:repeat(2,1fr)}.how{grid-template-columns:1fr}.how-items{gap:8px}}
@media(max-width:600px){.app{padding:0 9px}.top{height:68px}.brand{font-size:12px}.brand-icon{width:33px;height:33px}.pill{display:none}.tool{font-size:8px;padding:8px}.hero{grid-template-columns:1fr;padding:28px 0}.hero h1{font-size:42px}.hero-art{height:235px;grid-row:1}.hero-copy{grid-row:2}.hero-copy>p{font-size:12px}.hero-foot{font-size:7px;gap:9px}.section-heading h2{font-size:21px}.hud{padding:11px 4px;gap:3px}.hud small{font-size:7px;letter-spacing:0}.hud strong{font-size:10px}.current-stage{max-width:130px}.current-stage strong{font-size:10px}.current-stage span{font-size:8px}.game-frame canvas{aspect-ratio:4/3}.overlay-card{padding:18px;width:92%}.overlay-card h2{font-size:25px}.overlay-card p{font-size:10px;margin:8px 0}.overlay-card>small{font-size:7px;margin-top:10px}.touch{display:flex}.game-controls{padding:0 6px;font-size:8px}.game-controls button{font-size:8px;padding:6px}.game-controls>div{gap:3px}.world-grid{gap:8px}.world-art{height:82px}.world-info{padding:9px}.world-info strong{font-size:12px}.world-info p{font-size:9px}.stages button{font-size:8px}.how{padding-top:35px}.how-items{grid-template-columns:1fr}.how-items article>b{margin-bottom:10px}.foot-right{display:none}footer{font-size:8px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto;transition:none!important}}