:root{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;color:#fff;background:#101a39}*{box-sizing:border-box}body{margin:0;min-height:100svh;background:radial-gradient(ellipse at top,#354b83,#172548 65%,#10182f);display:grid;place-items:center;padding:15px}.app{width:min(1120px,100%)}header{display:flex;align-items:center;gap:16px;justify-content:space-between;margin-bottom:13px}.brand{display:flex;align-items:center;gap:10px}.star{font-size:38px;color:#ffe28b;filter:drop-shadow(0 3px #be8755)}.brand strong{display:block;font-size:clamp(15px,2.6vw,23px);font-weight:1000;letter-spacing:.11em}.brand small{font-size:11px;letter-spacing:.36em;color:#b8d3fa}.hud{display:flex;gap:clamp(12px,3vw,34px);margin-left:auto}.hud div{display:grid;gap:2px;text-align:center}.hud small{color:#b4c5e9;font-size:10px;letter-spacing:.16em;font-weight:800}.hud b{font-size:18px;white-space:nowrap}#mute{border:1px solid #ffffff35;background:#ffffff19;color:#fff;border-radius:12px;font-size:22px;width:43px;height:43px;cursor:pointer}.stage{position:relative;overflow:hidden;border:3px solid #ffffff63;border-radius:23px;box-shadow:0 25px 70px #050b22aa;aspect-ratio:16/9;background:#76cce7}canvas{display:block;width:100%;height:100%;image-rendering:pixelated;touch-action:none}.screen{position:absolute;inset:0;display:grid;place-items:center;padding:20px;background:#14284d75;backdrop-filter:blur(3px)}.screen[hidden]{display:none}.panel{text-align:center;max-width:440px;width:100%;border-radius:24px;background:linear-gradient(155deg,#273e71f5,#172c58f5);border:1px solid #d8e6ff55;box-shadow:0 18px 55px #0b143e88;padding:clamp(20px,4vw,36px)}.badge{font-size:11px;font-weight:900;letter-spacing:.12em;color:#ffde8d}.panel h1{font-size:clamp(34px,5vw,58px);line-height:1.04;letter-spacing:-.05em;margin:15px 0;color:#fff;text-shadow:0 5px #122653}.panel p{font-size:15px;line-height:1.5;color:#d3e2ff;margin:0 0 25px}.panel button{display:block;width:100%;padding:16px 20px;background:linear-gradient(#ffdf8e,#ffae6b);border:0;border-radius:14px;color:#352d45;font-weight:950;font-size:16px;box-shadow:0 6px #b77757;cursor:pointer}.panel button:active{transform:translateY(3px);box-shadow:0 3px #b77757}.panel small{display:block;margin-top:19px;color:#bbd0ee;font-size:11px}.toast{position:absolute;top:18%;left:50%;transform:translateX(-50%);pointer-events:none;color:#fff;font-size:clamp(16px,3vw,28px);font-weight:1000;text-shadow:0 3px #315180,0 0 15px #294474;opacity:0;transition:opacity .2s;white-space:nowrap}.toast.show{opacity:1}.mobile-controls{display:flex;justify-content:space-between;align-items:center;margin:12px 0 0;gap:18px;touch-action:none;user-select:none}.move-controls{display:flex;gap:12px}.mobile-controls button{width:clamp(66px,13vw,88px);height:clamp(58px,9vw,72px);background:#d2e5ff20;border:2px solid #b3d5ff6b;border-radius:19px;color:white;font-size:23px;font-weight:900;touch-action:none;user-select:none;cursor:pointer;-webkit-tap-highlight-color:transparent}.mobile-controls button:active,.mobile-controls button.pressed{background:#9dd8ff65;transform:scale(.96)}.mobile-controls .jump{width:clamp(115px,22vw,160px);background:linear-gradient(135deg,#ffcb7e,#f19b81);border-color:#ffe6b4;color:#352b43;font-size:16px;box-shadow:0 5px #a96564}.jump span{margin-left:6px}footer{display:flex;justify-content:space-between;gap:10px;color:#9db4df;font-size:11px;padding:13px 3px}@media(min-width:950px) and (pointer:fine){.mobile-controls{opacity:.65}.mobile-controls:hover{opacity:1}}@media(max-width:600px){body{padding:8px;align-items:start}.brand .star{font-size:25px}.brand strong{font-size:13px}.brand small{font-size:8px}.hud{gap:8px}.hud small{font-size:8px}.hud b{font-size:12px}#mute{width:32px;height:32px;font-size:17px}header{gap:8px;margin-bottom:8px}.stage{border-radius:12px;border-width:2px}.panel{padding:14px}.panel h1{font-size:29px;margin:7px 0}.panel p{font-size:11px;margin-bottom:11px}.badge{font-size:8px}.panel button{padding:10px;font-size:12px}.panel small{margin-top:9px;font-size:8px}footer{font-size:9px}}@media(max-width:390px){.hud div:first-child{display:none}}button:focus-visible{outline:3px solid #fff;outline-offset:3px}
.mobile-controls .run{margin-left:auto;background:#a6e4c533;border-color:#a6e4c5;color:#e0ffe9;font-size:15px;width:clamp(66px,13vw,88px)}@media(max-width:600px){.mobile-controls{gap:8px}.move-controls{gap:8px}.mobile-controls .run{margin-left:auto}}

/* Sprint stays enabled after tapping RUN. */
.mobile-controls .run[aria-pressed="true"]{background:#a6e4c5;color:#173b36;border-color:#e2fff0;box-shadow:0 0 0 3px #a6e4c533,inset 0 2px 5px #ffffff66}

/* Energetic original mecha-anime presentation */
:root{background:#101b3d}body{background:radial-gradient(ellipse at 70% 0%,#395aa1,#1b2453 55%,#111b3c)}.brand strong{font-style:italic;letter-spacing:.065em;text-shadow:2px 3px #ef755f}.brand .star{color:#ffe17b}.stage{border-color:#f4bd79;box-shadow:0 0 0 3px #223e72,0 24px 75px #050b22aa}.panel{background:linear-gradient(155deg,#283b7bf5,#182957f7);border:2px solid #ffd58a}.panel h1{font-style:italic;text-transform:uppercase;text-shadow:3px 5px #ed725e}.panel button{background:linear-gradient(110deg,#ffe27a,#f68c62)}

/* Finished-game UI polish */
.panel{box-shadow:0 22px 70px #090e35cc,inset 0 1px #fff4c0aa}.stage{isolation:isolate}.mobile-controls button{transition:background .12s,transform .12s;box-shadow:0 4px 0 #0d183b88}.mobile-controls button:active{transform:translateY(3px)}
