:root { color-scheme: dark; font-family: "Trebuchet MS", system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #122235; }
body { display: grid; place-items: center; touch-action: none; }
.game-shell { position: relative; width: min(100vw, calc(100vh * 1.6)); }
canvas { display: block; width: 100%; height: auto; max-height: 100vh; outline: 0; box-shadow: 0 1rem 4rem #07111dcc; }
.touch-controls { position: absolute; inset: auto 2.5% 2.5%; display: none; justify-content: space-between; pointer-events: none; }
.touch-controls button { width: 5rem; height: 4rem; border: 2px solid #fff8; border-radius: 1.2rem; background: #122235a8; color: white; font: 800 1rem inherit; pointer-events: auto; user-select: none; -webkit-user-select: none; }
.touch-controls button[data-control="boost"] { width: 6.3rem; color: #ffcd37; }
@media (hover: none), (pointer: coarse) { .touch-controls { display: flex; } }