/* Shared CRT look for every Dataslate page.
   Pages need: <canvas id="screen"> as background and the .crt-layer overlays (see home.html). */

:root {
  --bg: #050a06;
  --text: #e8ffe8;
  --text-dim: rgba(232, 255, 232, .88);
  --text-faint: rgba(232, 255, 232, .65);
  --ink: #041006;                       /* dark text on bright (inverted) elements */
  --line: rgba(175, 235, 175, .85);
  --line-dim: rgba(175, 235, 175, .28);
  --glow: rgba(120, 255, 120, .55);
  /* health indication: stable > 75 % · wounded > 25 % · critical · destroyed at 0 % */
  --ok: #86f286;
  --warn: #f5c542;
  --crit: #ff5a4a;
  --dead: #000;
  --text-glow: 0 0 3px rgba(170, 255, 170, .55);
  --font: 'VT323', 'Courier New', monospace;
  /* tint channels, used as rgba(var(--hi-rgb), .14) */
  --hi-rgb: 120, 255, 120;              /* highlights: hover, selection, glow */
  --edge-rgb: 175, 235, 175;            /* faint row separators */
  --panel-rgb: 8, 26, 12;               /* button / panel backgrounds */
  --dialog-bg: #071209;
  /* phosphor background drawn by js/crt.js */
  --screen-0: #1f3f25; --screen-1: #132a19; --screen-2: #060f08;
  --cloud-rgb: 170, 230, 170;
  --grid-rgb: 150, 220, 150;
  --dust-rgb: 210, 255, 210;
}

/* inside the Black Market (Commercium, set by js/commercium.js): light red */
:root[data-theme="black"] {
  --bg: #100505;
  --text: #ffe7e3;
  --text-dim: rgba(255, 231, 227, .88);
  --text-faint: rgba(255, 231, 227, .65);
  --ink: #170404;
  --line: rgba(255, 160, 150, .85);
  --line-dim: rgba(255, 160, 150, .28);
  --glow: rgba(255, 90, 80, .55);
  --text-glow: 0 0 3px rgba(255, 150, 140, .55);
  --hi-rgb: 255, 110, 100;
  --edge-rgb: 255, 175, 165;
  --panel-rgb: 32, 8, 8;
  --dialog-bg: #1b0807;
  --screen-0: #4c1d1d; --screen-1: #2d1111; --screen-2: #130606;
  --cloud-rgb: 245, 150, 140;
  --grid-rgb: 235, 140, 130;
  --dust-rgb: 255, 215, 210;
}

/* the Psykanium is touched by the warp (set by js/shell.js).
   Health colours (--ok / --warn / --crit) stay the same, they carry meaning. */
:root[data-theme="warp"] {
  --bg: #0a0510;
  --text: #f4e9ff;
  --text-dim: rgba(244, 233, 255, .88);
  --text-faint: rgba(244, 233, 255, .65);
  --ink: #0d0416;
  --line: rgba(212, 175, 255, .85);
  --line-dim: rgba(212, 175, 255, .28);
  --glow: rgba(190, 110, 255, .6);
  --text-glow: 0 0 3px rgba(210, 160, 255, .55);
  --hi-rgb: 190, 120, 255;
  --edge-rgb: 212, 175, 255;
  --panel-rgb: 22, 9, 34;
  --dialog-bg: #12081c;
  --screen-0: #34204a; --screen-1: #1f1232; --screen-2: #0b0613;
  --cloud-rgb: 200, 150, 245;
  --grid-rgb: 190, 150, 235;
  --dust-rgb: 236, 214, 255;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); }
body {
  font-family: var(--font); font-size: 20px; color: var(--text);
  user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* phosphor background (drawn by js/crt.js) */
#screen { position: fixed; inset: 0; z-index: 0; display: block; filter: blur(.35px); }

/* CRT overlay layers, above the interface, never catch clicks */
.crt-layer { position: fixed; inset: 0; z-index: 50; pointer-events: none; }

#noise { width: 100%; height: 100%; opacity: .05; mix-blend-mode: overlay; image-rendering: pixelated; }
.scanlines {
  background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,.16) 2px 3px); } /* light enough to keep small text readable */
.interference { opacity: .2;
  background: repeating-linear-gradient(to right, rgba(0,0,0,.35) 0 1px, transparent 1px 3px);
  -webkit-mask-image: linear-gradient(to right, transparent 58%, #000 64%, #000 100%);
          mask-image: linear-gradient(to right, transparent 58%, #000 64%, #000 100%);
  animation: jitter 3.7s steps(1) infinite; }
.rollbar { bottom: auto; top: -20vh; height: 18vh;
  background: linear-gradient(to bottom, transparent, rgba(var(--edge-rgb), .035), transparent);
  animation: roll 7s linear infinite; }
.vignette {
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.55) 85%, rgba(0,0,0,.85) 100%); }
.flicker { background: #000; animation: flicker 5s steps(1) infinite; }

@keyframes roll    { to { transform: translateY(130vh); } }
@keyframes jitter  { 0% { transform: translateX(0) } 40% { transform: translateX(1px) } 70% { transform: translateX(-1px) } }
@keyframes flicker { 0%{opacity:.02} 12%{opacity:.05} 13%{opacity:.01} 47%{opacity:.04} 48%{opacity:.08} 49%{opacity:.02} 80%{opacity:.035} }
@keyframes blink   { 50% { opacity: 0 } }

/* screen effect levels (Machine Spirit → Screen effects) */
[data-crt="low"] .flicker, [data-crt="low"] .rollbar { display: none; }
[data-crt="low"] .interference { animation: none; opacity: .15; }
[data-crt="low"] .scanlines { opacity: .5; }
[data-crt="low"] #noise { opacity: .03; }
[data-crt="off"] .crt-layer:not(.vignette) { display: none; }

@media (prefers-reduced-motion: reduce) {
  .interference { animation: none; }
  .rollbar, .flicker { display: none; }
}