html, body {
  margin: 0; padding: 0; height: 100%;
  background: #000; overflow: hidden;
  font-family: Menlo, Consolas, monospace;
}
#wrap {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
#game {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  cursor: none;
  background: #000;
}
/* the mission title on the story cards, drawn at the screen's full resolution over the game */
/* fine text drawn at the screen's real resolution over the game (e.g. the BIOS self-test) */
#hd { position: absolute; inset: 0; pointer-events: none; image-rendering: pixelated; }
#hdtitle { position: absolute; display: none; pointer-events: none; image-rendering: auto; }

/* CRT overlay: one dark line per game pixel row (row height set from JS),
   plus tube vignette and a faint phosphor flicker. */
#scanlines {
  pointer-events: none;
  position: absolute; inset: 0;
  --row: 4px;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0) 62%, rgba(0,0,0,.38) 100%),
    repeating-linear-gradient(to bottom,
      rgba(255,255,255,.035) 0, rgba(255,255,255,.035) calc(var(--row) * .45),
      rgba(0,0,0,.42) calc(var(--row) * .55), rgba(0,0,0,.42) var(--row));
  animation: crt-flicker 0.12s steps(2) infinite;
}
#scanlines::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(to right, rgba(255,0,0,.03) 0 1px, rgba(0,255,0,.02) 1px 2px, rgba(0,0,255,.03) 2px 3px);
}
@keyframes crt-flicker { 0% { opacity: .96; } 100% { opacity: 1; } }
#scanlines.off { display: none; }

/* ---------- debug panel ---------- */
#debug {
  position: fixed; top: 8px; right: 8px; width: 230px;
  max-height: calc(100vh - 16px); overflow-y: auto;
  background: rgba(10, 12, 18, .92); color: #cfe;
  border: 1px solid #3a5; font-size: 11px; padding: 8px;
  z-index: 10; box-shadow: 0 0 0 1px #000;
}
#debug.hidden { display: none; }
#debug h3 { margin: 6px 0 4px; font-size: 11px; color: #7f7; letter-spacing: 1px; }
#debug label { display: block; margin: 2px 0; cursor: pointer; }
#debug select, #debug button {
  font: inherit; background: #1a2230; color: #dfe; border: 1px solid #3a5a4a;
  padding: 2px 4px; margin: 2px 2px 2px 0;
}
#debug button:hover { background: #26334a; }
#debug .row { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
#debug .hint { color: #789; font-size: 10px; }