/* Dark Room retro look, shared by every page: VT323 pixel font, square corners, CRT scanlines/vignette/flicker,
   dotted pixel grid, window panels with title bars, blocky offset shadows and pixel buttons. */
@font-face { font-family: "DRVT"; src: url("/assets/fonts/VT323-Regular.ttf") format("truetype"); font-display: swap; }

html { background: #000; color-scheme: dark; }
body {
  margin: 0; color: #fff;
  background-color: #000; background-image: radial-gradient(#161616 1px, transparent 1px); background-size: 16px 16px;
  -webkit-font-smoothing: none; -moz-osx-font-smoothing: auto;
}
/* One font everywhere, and no rounded corners. Inline styles on the pages still set sizes and colours. */
*, *::before, *::after { box-sizing: border-box; font-family: DRVT, VT323, ui-monospace, monospace !important; border-radius: 0 !important; font-weight: 400 !important; }
/* Pages written for Barlow/Oxanium sizes: scale VT323 so small text stays readable (VT323's x-height is 0.40). */
.r-adj { font-size-adjust: 0.5; }
.r-adj .r-btn, .r-adj .r-btn2 { font-size: 18px !important; font-size-adjust: none; }
::selection { background: #ff2a3d; color: #000; }
a:focus-visible, button:focus-visible, [role=option]:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px dashed #ff2a3d !important; outline-offset: 3px; }
img { image-rendering: pixelated; }

/* CRT: scanlines, faint flicker, dark vignette. Fixed, never clickable. */
body::before, body::after, html::after { content: ""; position: fixed; inset: 0; pointer-events: none; }
body::before { z-index: 2147483000; background: repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 3px); }
html::after { z-index: 2147482998; background: #fff; animation: drFlicker 4s steps(4) infinite; }
body::after { z-index: 2147482999; background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.55) 100%); }
@media (prefers-reduced-motion: reduce) { html::after { animation: none; opacity: 0.03; } }

@keyframes drScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes drPulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes drBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes drFlicker { 0%, 100% { opacity: .04; } 50% { opacity: .08; } 52% { opacity: .02; } 54% { opacity: .07; } }
@keyframes drType { from { width: 0; } to { width: 100%; } }
@keyframes drBar { from { width: 0; } to { width: 100%; } }

/* Windows: 2px borders and a blocky offset shadow; .r-win-hot is the red primary window. */
.r-win { border: 2px solid #2a2a2a !important; background: #050505 !important; box-shadow: 6px 6px 0 #1a1a1a !important; }
.r-win-hot { border: 2px solid #fff !important; background: #000 !important; box-shadow: 8px 8px 0 #ff2a3d !important; }
.r-hover:hover { border-color: #ff2a3d !important; box-shadow: 6px 6px 0 #ff2a3d !important; }
/* Title bar across the top of a window: "WATCHLIST.EXE". Put it first inside a .r-win with padding P via --p. */
.r-tb { display: flex !important; justify-content: space-between; align-items: center; gap: 10px; margin: calc(-1 * var(--p, 20px)) calc(-1 * var(--p, 20px)) 0; padding: 8px 12px; background: #1a1a1a; color: #fff !important; font-size: 18px !important; letter-spacing: 0.04em !important; text-transform: uppercase; font-size-adjust: none; }
.r-tb-hot { background: #ff2a3d !important; color: #000 !important; }
.r-tb .r-dots { display: flex; gap: 4px; }
.r-tb .r-dots i { width: 12px; height: 12px; border: 2px solid currentColor; display: block; }
.r-tb .r-dots i + i { background: currentColor; }

/* Buttons. Primary: red fill, white offset shadow that presses in. Secondary: black with a white 2px border. */
.r-btn { background: #ff2a3d !important; color: #000 !important; border: 2px solid #ff2a3d !important; box-shadow: 6px 6px 0 #fff !important; text-transform: uppercase; letter-spacing: 0.04em !important; transition: transform 80ms steps(2), box-shadow 80ms steps(2) !important; cursor: pointer; }
.r-btn:hover { transform: translate(2px, 2px); box-shadow: 4px 4px 0 #fff !important; color: #000 !important; }
.r-btn:active { transform: translate(6px, 6px); box-shadow: 0 0 0 #fff !important; }
.r-btn2 { background: #000 !important; color: #fff !important; border: 2px solid #fff !important; box-shadow: 6px 6px 0 #333 !important; text-transform: uppercase; letter-spacing: 0.04em !important; transition: transform 80ms steps(2) !important; cursor: pointer; }
.r-btn2:hover { background: #fff !important; color: #000 !important; }
.r-btn2:active { transform: translate(6px, 6px); box-shadow: 0 0 0 #333 !important; }
/* Small chips/toggles keep their colours but get pixel borders. */
.r-adj button, .r-adj input, .r-adj textarea, .r-adj select { border-width: 2px !important; }
.r-adj input, .r-adj textarea, .r-adj select { background-color: #000 !important; }

/* Section label + checkerboard divider strip. */
.r-stage { color: #ff2a3d; font-size: 18px; letter-spacing: 0.04em; font-size-adjust: none; }
.r-stage::after { content: " ▸"; }
.r-checker { height: 12px; opacity: 0.85; background-image: linear-gradient(45deg, #ff2a3d 25%, transparent 25%, transparent 75%, #ff2a3d 75%), linear-gradient(45deg, #ff2a3d 25%, transparent 25%, transparent 75%, #ff2a3d 75%); background-size: 12px 12px; background-position: 0 0, 6px 6px; }
.r-h { text-shadow: 2px 2px 0 #3a0a10; letter-spacing: 0.04em !important; text-transform: uppercase; }
.r-cursor::after { content: "_"; animation: drBlink 1s steps(1) infinite; }