/* Flat Out Fucked - retro first-person presentation.
   The scene renders to 320x200 and is blitted to a 1600x1200 buffer
   (5x horizontal, 6x vertical => 4:3 with non-square pixels, exactly as a
   1993 VGA framebuffer displayed on a 4:3 CRT). This stylesheet only ever
   downscales that buffer by an INTEGER divisor, so no pixel row or column
   is ever resampled. */

:root {
  --ink: #0a0a0c;
  --steel: #17181c;
  --edge: #2b2d33;
  --hazard: #c8a232;
  --alert: #b03a2e;
  --text: #b9bcc4;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--ink);
  color: var(--text);
  font-family: "Lucida Console", "DejaVu Sans Mono", "Courier New", monospace;
}

/* Full-viewport letterbox. The frame keeps its 4:3 ratio at all times, so the
   complete game image is always visible and centred. */
#stage {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

#frame {
  position: relative;
  line-height: 0;
  box-shadow: 0 0 0 2px var(--edge), 0 0 48px rgba(0, 0, 0, 0.9);
}

/* There is deliberately no #hud rule: the game has no HUD canvas. The WebGL
   canvas is the only gameplay surface, and the overlay above it carries menus
   rather than game state. */

#view {
  display: block;
  /* The canvas backing store is 1600x1200; JS sets the CSS size to an integer
     multiple of 1/that so the browser never interpolates between pixels. */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #000;
}

/* Crisp scanline + bezel treatment over the nearest-neighbour upscale. */
#frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.18) 3px,
    rgba(0, 0, 0, 0.18) 4px
  );
}

/* Text overlays (menus, briefing, fatal errors) sit above the canvas and
   accept input, while the canvas itself keeps the pointer-lock target. */
#overlay {
  position: absolute;
  inset: 0;
  line-height: 1.35;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(10px, 1.6vw, 18px);
  letter-spacing: 0.04em;
  text-align: center;
}

#overlay:empty {
  display: none;
}

#overlay > * {
  max-width: 78%;
}

.screen {
  width: 100%;
  padding: 1.6em 2em;
  background: rgba(8, 9, 11, 0.93);
  border: 1px solid var(--edge);
  text-transform: uppercase;
}

.screen h1 {
  margin: 0 0 0.5em;
  font-size: 2.1em;
  letter-spacing: 0.16em;
  color: var(--hazard);
  text-shadow: 0 2px 0 #000;
}

.screen h2 {
  margin: 0 0 0.7em;
  font-size: 1.15em;
  letter-spacing: 0.12em;
  color: var(--text);
}

.screen p {
  margin: 0.5em 0;
  color: #8d919b;
  text-transform: none;
}

.screen .hint {
  margin-top: 1.3em;
  font-size: 0.9em;
  color: var(--alert);
  letter-spacing: 0.1em;
}

.screen ul {
  margin: 0.6em auto;
  padding: 0;
  list-style: none;
  color: #8d919b;
  text-transform: none;
}

.screen li {
  margin: 0.28em 0;
}

/* Fatal / no-WebGL path. Shown instead of a blank canvas. */
.fatal,
#overlay .fatal {
  padding: 1.6em 2em;
  border: 1px solid var(--alert);
  background: rgba(20, 8, 8, 0.95);
  color: #e8c9c4;
  text-transform: none;
}

.fatal strong {
  display: block;
  margin-bottom: 0.6em;
  color: var(--alert);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}