* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: #0a0a12; color: #e7e7ef; font-family: monospace; height: 100%; }
body { display: flex; align-items: center; justify-content: center; min-height: 100%; }
#frame { text-align: center; }
h1 { font-size: 28px; letter-spacing: 4px; margin-bottom: 10px; color: #ffd24a; text-shadow: 2px 2px 0 #b03020; }
h1 span { color: #ff5a3a; }
#stage { position: relative; display: inline-block; border: 3px solid #2a2a3a; background: #000; }
canvas#game {
  display: block;
  width: 768px; height: 448px;          /* 2x logical */
  image-rendering: pixelated; image-rendering: crisp-edges;
}
#loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 20px; letter-spacing: 3px; color: #ffd24a; background: #000; }
#help { margin-top: 12px; display: flex; gap: 30px; justify-content: center; font-size: 11px; color: #aab; }
#help .col { text-align: left; display: flex; flex-direction: column; gap: 3px; }
#help b { color: #ffd24a; }
kbd { background: #333; border-radius: 3px; padding: 0 4px; border: 1px solid #555; }
@media (max-width: 820px){ canvas#game{ width: 384px; height: 224px; } }