:root {
  --bg: #000000;
  --amber: #ffb000;
  --dim: #5a3d00;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* The one face, served from here rather than a CDN. Google splits VT323 into
   subsets that only fetch on first use, so a glyph outside Latin-1 rendered in a
   fallback until its subset landed -- and never, offline. block-display swaps in
   the real face as soon as it loads instead of painting a wrong one first. */
@font-face {
  font-family: "Station Grid";
  src: url("assets/fonts/station-grid.woff2") format("woff2");
  font-display: block;
}

html,
body {
  height: 100%;
  background: var(--bg);
  color: var(--amber);
  font-family: "Station Grid", "Courier New", monospace;
}

#stage {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none; /* taps drive movement; suppress scroll/zoom gestures */
}

/* Match by element, not #game: the CRT filter swaps in its own canvas that
   carries no id, and it must scale on phones too.

   The canvas is a fixed 800x600 buffer; this grows it to fill whichever axis
   runs out first. Left at its intrinsic size it sits as a small bright island
   in a black field on a desktop monitor, which argues against a game about
   being inside the screen. 128vh is 96vh at the 4:3 buffer ratio, so the two
   terms of the min() are the same box measured off different axes, and
   `height: auto` keeps the ratio without restating it. */
#stage canvas {
  background: #000;
  image-rendering: pixelated;
  width: min(100vw, 128vh);
  height: auto;
}