/* Design tokens. Every colour in the site comes from here so the phosphor
   knob can repaint the whole thing by swapping four variables. */
:root {
  color-scheme: dark;

  --phos: #cfe8d0;          /* foreground phosphor */
  --phos-dim: #8fae92;
  --phos-hot: #ffffff;
  --glow: 0 0 6px rgba(120, 255, 150, 0.35);

  --bg: #07100a;
  --bg-2: #0d1a12;
  --panel: #111c14;
  --ink: #d8f2dc;
  --ink-dim: #7f9b85;
  --rule: #2b4432;

  --hot: #ff2f6d;           /* the one loud accent: links, alerts, nudges */
  --hot-2: #ffd447;
  --cold: #59d3ff;

  /* Win9x chrome */
  --face: #c0c0c0;
  --face-ink: #000;
  --face-lit: #fff;
  --face-shadow: #808080;
  --face-dark: #000;
  --title-a: #000080;
  --title-b: #1084d0;
  --title-off-a: #808080;
  --title-off-b: #b5b5b5;

  --ui: 'Tahoma', 'MS Sans Serif', 'Segoe UI', Verdana, sans-serif;
  --mono: 'Lucida Console', 'Consolas', 'Courier New', monospace;

  --px: 2px; /* nominal pixel; scales the chrome as one unit */

  /* Typography is quantised to the scanline pitch.
     ------------------------------------------------------------------
     A 4px scanline pitch under an 18px line-height puts every other row
     of text out of phase with the grid, and the eye reads that as blur
     even though nothing is blurred. Snapping the leading to a whole
     number of scanlines means the lines fall in the SAME place on every
     row of type, which is what a real tube does and what makes the
     effect stop looking like an overlay.

     js/crt/crt.js sets --crt-scan-size; these two derive from it and are
     clamped so an extreme pitch cannot wreck the layout. */
  --crt-scan-size: 4px;
  --line-ui: clamp(15px, calc(var(--crt-scan-size) * 4), 20px);
  --line-prose: clamp(18px, calc(var(--crt-scan-size) * 5), 26px);
}

:root[data-phosphor='amber'] {
  --phos: #ffc457; --phos-dim: #b8863a; --phos-hot: #fff2d0;
  --glow: 0 0 6px rgba(255, 180, 60, 0.4);
  --bg: #120c02; --bg-2: #1b1204; --panel: #1d1405;
  --ink: #ffd894; --ink-dim: #a37f43; --rule: #4a3413;
}

:root[data-phosphor='p1'] {
  --phos: #7dff9f; --phos-dim: #3f8f56; --phos-hot: #dfffe8;
  --glow: 0 0 7px rgba(80, 255, 130, 0.5);
  --bg: #020a04; --bg-2: #04130a; --panel: #06180c;
  --ink: #9dffb8; --ink-dim: #4c8f60; --rule: #16401f;
}

:root[data-phosphor='colour'] {
  --phos: #e6e6f0; --phos-dim: #9a9ab0; --phos-hot: #fff;
  --glow: 0 0 5px rgba(160, 200, 255, 0.28);
  --bg: #0a0a12; --bg-2: #12121e; --panel: #171726;
  --ink: #e6e6f0; --ink-dim: #9090a8; --rule: #2e2e44;
}

* { box-sizing: border-box; }

/* A display rule on a component beats the hidden attribute, which is how a
   start menu ends up permanently open. Settle it once, here. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--ink);
  font: 12px/var(--line-ui) var(--ui);
  overflow: hidden; /* the desktop scrolls its panes, not itself */
  /* Digits that do not shuffle width are worth a lot on a page covered in
     hit counters, scores and rarity figures. */
  font-variant-numeric: tabular-nums;
}

a { color: var(--cold); }
a:visited { color: #b98cff; }
a:hover { color: var(--hot-2); }

::selection { background: var(--hot); color: #fff; }

/* Scrollbars, the beige kind. */
* { scrollbar-width: thin; scrollbar-color: var(--face-shadow) var(--bg-2); }
*::-webkit-scrollbar { width: 16px; height: 16px; }
*::-webkit-scrollbar-track { background: #d4d0c8; }
*::-webkit-scrollbar-thumb {
  background: var(--face);
  border: 1px solid var(--face-dark);
  box-shadow: inset 1px 1px 0 var(--face-lit), inset -1px -1px 0 var(--face-shadow);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}