:root { color-scheme: dark; }
* { box-sizing: border-box; }
body {
  margin: 0; min-width: 320px; min-height: 100vh; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, #122444, #030812 70%); color: #a9d8ff;
  font-family: "Courier New", monospace;
}
.game-shell { width: min(100%, 1320px); padding: 20px; text-align: center; }
header { margin: 0 0 12px; letter-spacing: .18em; }
header span { color: #ffdf70; font-size: clamp(1.2rem, 3vw, 2rem); text-shadow: 3px 3px #e34d5e; }
header small { display: block; margin-top: 5px; color: #66bce5; font-size: .64rem; }
.canvas-frame { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 4px solid #3c8cae; box-shadow: 0 0 0 4px #10233a, 0 18px 45px #000a; background: #07111f; }
canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }
.controls { margin: 14px 0 0; color: #8caec3; font-size: clamp(.58rem, 1.7vw, .78rem); letter-spacing: .06em; }
kbd { border: 1px solid #46758c; border-bottom-width: 3px; padding: 2px 4px; color: #ffdf70; font: inherit; }