@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Noto+Sans+SC:wght@500;700;900&display=swap');

:root { --ink:#18234d; --purple:#6d4de3; --pink:#ff6e92; --yellow:#ffd85a; --mint:#63e6ca; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; display:grid; place-items:center; color:var(--ink); background:radial-gradient(circle at 15% 15%,#e9ddff 0 7%,transparent 23%),radial-gradient(circle at 80% 80%,#c9f7f0 0 8%,transparent 27%),#f7f2ff; font-family:"Fredoka","Noto Sans SC",sans-serif; overflow:hidden; }
body::before { content:""; position:fixed; inset:0; opacity:.35; pointer-events:none; background-image:radial-gradient(#8c76db 1.5px,transparent 1.5px); background-size:34px 34px; }
.game-shell { width:min(1180px,96vw); position:relative; z-index:1; }
.topbar { height:76px; padding:0 18px 10px; display:flex; align-items:center; justify-content:space-between; }
.brand { font-size:24px; font-weight:900; letter-spacing:1px; }.brand span{display:inline-grid;place-items:center;width:44px;height:44px;background:white;border-radius:15px;box-shadow:0 6px 0 #d9cef7;transform:rotate(-5deg);margin-right:8px}
.hud { display:flex; align-items:center; gap:12px; }.level-pill,.score-pill{background:white;border:3px solid #ded4fa;border-radius:22px;padding:8px 15px;box-shadow:0 5px 0 #cfc3ef}.level-pill b{color:var(--purple)}
.health{display:flex;align-items:center;gap:9px;font-weight:700}.health-track{width:140px;height:18px;border:3px solid white;background:#cfc7e9;border-radius:20px;overflow:hidden;box-shadow:0 3px 0 #b7acd9}.health-track i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#ff668c,#ffbd62);border-radius:20px;transition:width .2s}
.canvas-wrap { position:relative; overflow:hidden; border:6px solid white; border-radius:32px; box-shadow:0 18px 50px #5d499c42,0 8px 0 #d7cdf1; background:#251b5b; aspect-ratio:16/10; }
canvas { display:block; width:100%; height:100%; touch-action:none; }
.screen { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; opacity:0; pointer-events:none; transition:.35s; color:white; background:linear-gradient(135deg,#30206fdc,#7035a9c9); backdrop-filter:blur(5px); }
.screen.active { opacity:1; pointer-events:auto; }.screen h1{font-size:clamp(52px,8vw,92px);line-height:.85;margin:7px 0 20px;text-shadow:0 7px 0 #3f287e}.screen h1 em{color:var(--yellow);font-style:normal}.eyebrow{margin:0;text-transform:uppercase;letter-spacing:4px;color:#bff8ec;font-weight:700}.intro{font-size:18px;max-width:500px;line-height:1.7;margin:0 20px 24px;color:#eee9ff}
.hero-planet{position:absolute;right:8%;top:12%;font-size:88px;animation:float 3s ease-in-out infinite}.hero-planet i{position:absolute;inset:15px;border:3px dashed #fff8;border-radius:50%;animation:spin 9s linear infinite}.primary-btn{font:800 19px inherit;color:#352267;background:var(--yellow);border:0;border-radius:18px;padding:15px 24px 15px 30px;box-shadow:0 7px 0 #d79d38;cursor:pointer;transition:.15s}.primary-btn:hover{transform:translateY(-3px);box-shadow:0 10px 0 #d79d38}.primary-btn:active{transform:translateY(5px);box-shadow:0 2px 0 #d79d38}.primary-btn span{margin-left:22px;font-size:25px}.controls-hint{margin-top:22px;color:#d9d0ff;font-size:13px}kbd{background:#ffffff20;border:1px solid #ffffff55;border-bottom-width:3px;padding:3px 7px;border-radius:7px}
.ghost-btn{font:700 15px inherit;color:#fff;background:transparent;border:2px solid #ffffff66;border-radius:14px;padding:10px 22px;margin-top:10px;cursor:pointer;transition:.15s}.ghost-btn:hover{background:#ffffff22}
.level-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;max-width:560px;margin:8px 18px 18px;padding:14px;background:#ffffff14;border:2px solid #ffffff33;border-radius:18px;max-height:55vh;overflow-y:auto}.level-btn{font:700 13px inherit;color:#fff;background:#ffffff18;border:2px solid #ffffff33;border-radius:10px;padding:10px 4px;cursor:pointer;transition:.15s;display:flex;flex-direction:column;align-items:center;gap:3px;line-height:1.2}.level-btn:hover{background:#ffffff2a;transform:translateY(-2px)}.level-btn .num{font-size:18px;font-weight:900;color:var(--yellow)}.level-btn .name{font-size:10px;color:#d9d0ff;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.level-btn.boss{background:#ad3a55aa;border-color:#ffd85a}.level-btn.boss .num{color:#fff;text-shadow:0 0 8px #ffd85a}
@media(max-width:760px){.level-grid{grid-template-columns:repeat(4,1fr);max-width:96vw}.level-btn .name{font-size:9px}}
.message-card{background:#fff;color:var(--ink);border-radius:30px;padding:32px 52px;box-shadow:0 12px 0 #b8a8e6;min-width:320px}.message-icon{font-size:64px}.message-card p{color:#6c6590;margin:5px}.message-card h2{font-size:42px;margin:3px;color:var(--purple)}
.settings{display:flex;flex-direction:column;gap:12px;margin:0 0 22px;padding:18px 22px;background:#ffffff14;border:2px solid #ffffff33;border-radius:18px;backdrop-filter:blur(4px)}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:14px}.setting-label{color:#e6dcff;font-weight:700;letter-spacing:1px;font-size:14px;text-transform:uppercase}.seg{display:inline-flex;background:#ffffff18;border:2px solid #ffffff33;border-radius:14px;padding:3px;gap:3px}.seg-btn{background:transparent;border:0;color:#e6dcff;font:700 14px inherit;padding:7px 14px;border-radius:11px;cursor:pointer;transition:.15s}.seg-btn:hover{background:#ffffff22}.seg-btn.active{background:var(--yellow);color:#352267;box-shadow:0 3px 0 #d79d38}.toggles{display:flex;gap:8px}.toggle{background:#ffffff18;border:2px solid #ffffff33;color:#e6dcff;font:700 13px inherit;padding:7px 12px;border-radius:12px;cursor:pointer;transition:.15s}.toggle:hover{background:#ffffff26}.toggle.on{background:#63e6ca;color:#1a3454;border-color:#1a3454;box-shadow:0 3px 0 #2c8a78}
#endScreen h2{font-size:56px;margin:8px}#endScreen>p:not(.eyebrow){margin:0;color:#d8d0ff}#finalScore{font-size:72px;color:var(--yellow);margin:0 0 18px;text-shadow:0 5px 0 #4a2b87}.end-stars{font-size:50px;margin-bottom:16px}
footer{height:44px;padding:12px 22px 0;display:flex;justify-content:space-between;color:#6b6090;font-size:14px}
.touch-controls{display:none;position:absolute;inset:auto 16px 16px;justify-content:space-between;pointer-events:none}.touch-controls button{pointer-events:auto;user-select:none;-webkit-user-select:none;border:2px solid #fff8;background:#302373aa;color:white;font:700 16px inherit;box-shadow:0 4px 0 #17113f;border-radius:13px}.dpad{display:grid;grid-template:repeat(2,44px)/repeat(3,44px);gap:5px}.dpad button:nth-child(1){grid-column:2}.dpad button:nth-child(2){grid-row:2;grid-column:1}.dpad button:nth-child(3){grid-row:2;grid-column:2}.dpad button:nth-child(4){grid-row:2;grid-column:3}.fire-btn{width:74px;height:74px!important;border-radius:50%!important;background:#f45f87cc!important;align-self:flex-end}
@keyframes float{50%{transform:translateY(-14px) rotate(5deg)}}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:760px){.game-shell{width:100vw}.topbar{height:62px}.brand{font-size:0}.brand span{width:40px;height:40px}.level-pill{display:none}.score-pill{padding:6px 10px}.health span{display:none}.health-track{width:90px}.canvas-wrap{border-width:3px;border-radius:18px;aspect-ratio:auto;height:calc(100vh - 98px)}footer{height:36px;padding-top:8px}.controls-hint{display:none}.hero-planet{font-size:54px}.touch-controls{display:flex}.screen h1{font-size:56px}.intro{font-size:15px}.message-card{padding:24px 32px;min-width:280px}}