:root{--ink:#eaf7ff;--muted:#7890a4;--cyan:#36e4ff;--pink:#ff4f9a;--panel:#101d2b;--line:rgba(144,191,215,.16)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#07111c;color:var(--ink)}body{font-family:'Courier New',monospace;display:flex;justify-content:center;background:radial-gradient(circle at 50% -10%,#183249 0,#07111c 48%,#040a11 100%)}
.shell{width:min(100%,1080px);padding:32px 28px 24px}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.brand{display:flex;gap:14px;align-items:center}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border:1px solid #2b7388;color:var(--cyan);font-size:24px;transform:rotate(45deg);box-shadow:0 0 22px #25c8e233}.brand-mark::first-letter{transform:rotate(-45deg)}.eyebrow,.stat-label{font-size:10px;letter-spacing:.22em;color:var(--cyan);margin:0 0 4px}.brand h1{font:800 30px/1 Impact,'Arial Narrow',sans-serif;letter-spacing:.11em;margin:0}.brand h1 span{color:var(--pink)}.stats{display:flex;gap:28px;text-align:right}.stats>div{min-width:70px}.stat-label{display:block;color:var(--muted);font-size:9px}.stats strong{font-size:17px;letter-spacing:.06em}.game-card{background:linear-gradient(145deg,#101f2e,#0b1724);border:1px solid var(--line);border-radius:12px;padding:10px;box-shadow:0 20px 70px #0008}.canvas-wrap{position:relative;border-radius:8px;overflow:hidden;background:#08111b}.canvas-wrap canvas{display:block;width:100%;height:auto;aspect-ratio:16/9}.status-pill{position:absolute;top:18px;left:20px;display:flex;gap:8px;align-items:center;color:#b8d1df;font-size:10px;letter-spacing:.15em;background:#081722c9;border:1px solid #315064;padding:8px 12px;border-radius:20px;backdrop-filter:blur(6px)}.status-dot{width:7px;height:7px;background:var(--cyan);border-radius:50%;box-shadow:0 0 10px var(--cyan)}.overlay{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(90deg,#06111acc,#06111a66,#06111acc);transition:opacity .25s}.overlay.hidden{opacity:0;pointer-events:none}.overlay-panel{text-align:center;margin-top:15px}.overlay-kicker{color:var(--pink);font-size:10px;letter-spacing:.28em}.overlay h2{font:800 clamp(36px,6vw,66px)/.95 Impact,'Arial Narrow',sans-serif;letter-spacing:.02em;margin:12px 0 10px;text-shadow:0 0 30px #2dc9ee55}.overlay p{color:#a7bdcb;font-size:12px;margin:0 0 22px}.primary-btn,.ghost-btn,.steer-btn{font:700 11px 'Courier New',monospace;letter-spacing:.12em;border:0;cursor:pointer}.primary-btn{background:var(--cyan);color:#06111a;padding:14px 22px;border-radius:4px;box-shadow:0 0 24px #36e4ff44;transition:transform .15s,background .15s}.primary-btn:hover{background:#8af3ff;transform:translateY(-2px)}.primary-btn span{margin-right:8px}.overlay .hint{font-size:9px;color:#6d8999;margin-top:16px}.overlay .hint span{color:var(--pink);margin:0 7px}.controls-row{display:flex;justify-content:space-between;align-items:center;padding:13px 6px 2px}.control-help{display:flex;align-items:center;gap:7px;color:#72889a;font-size:9px;letter-spacing:.12em}.keycap{color:#b9ced9;border:1px solid #3a5263;border-radius:3px;padding:4px 7px;font-size:11px}.divider{width:1px;height:17px;background:#29404f;margin:0 5px}.actions{display:flex;gap:8px}.ghost-btn{color:#9db2c0;background:transparent;border:1px solid #304858;border-radius:4px;padding:8px 11px}.ghost-btn:not(:disabled):hover{color:var(--cyan);border-color:var(--cyan)}.ghost-btn:disabled{opacity:.38;cursor:not-allowed}.mobile-controls{display:none}footer{display:flex;justify-content:space-between;color:#4e6878;font-size:9px;letter-spacing:.14em;margin:16px 5px 0}footer i{color:var(--pink);font-style:normal;margin:0 5px}
@media(max-width:640px){.shell{padding:20px 12px}.topbar{align-items:flex-start}.stats{gap:10px}.stats>div{min-width:52px}.stats strong{font-size:13px}.brand h1{font-size:25px}.brand-mark{width:34px;height:34px;font-size:18px}.controls-row{padding-top:11px}.control-help{display:none}.actions{width:100%;justify-content:flex-end}.mobile-controls{display:flex;justify-content:center;align-items:center;gap:28px;margin-top:16px}.steer-btn{width:64px;height:46px;border:1px solid #315064;background:#122537;color:var(--cyan);border-radius:7px;font-size:25px;touch-action:none}.steer-btn:active{background:#21445a;transform:scale(.96)}.touch-caption{color:#557384;font-size:9px;letter-spacing:.17em}footer{font-size:8px;flex-direction:column;gap:8px;text-align:center;margin-top:20px}.status-pill{top:10px;left:10px;font-size:8px;padding:6px 9px}}
button:focus-visible{outline:2px solid var(--pink);outline-offset:3px}