/* ═══════════════════════════════════════════════
   WOPR CRT Terminal Design System
   Every page on this site uses these styles.
   The CRT is the UI. There is no other UI.
   Aesthetic: 1983 Joshua terminal — cyan phosphor, low-res, chunky.
   ═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=VT323&display=swap');

/* Reset */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* Base — WarGames-authentic: cyan phosphor (film Joshua terminal), sparse military */
:root {
  /* JOSHUA TERMINAL — the text you read */
  --phosphor: #44ccff;
  --phosphor-dim: #1a7799;
  --phosphor-bright: #88eeff;
  --phosphor-glow: rgba(68, 204, 255, 0.5);
  --phosphor-glow-strong: rgba(68, 204, 255, 0.25);
  --phosphor-bg: rgba(68, 204, 255, 0.08);

  /* NORAD TACTICAL — maps and war displays */
  --tac-blue: #3388ff;
  --tac-red: #ff3333;
  --tac-green: #33cc66;
  --tac-white: #ccddee;
  --tac-yellow: #ffcc44;
  --tac-burst: #ffffff;

  /* HOSTILE / DANGER — for gameplay */
  --red: #ff4444;
  --red-dim: #aa2222;
  --red-glow: rgba(255, 68, 68, 0.4);
  --yellow: #ffcc00;
  --yellow-glow: rgba(255, 204, 0, 0.3);
  --amber: #ff9900;

  /* BACKGROUNDS & FRAMES — blue-black, not pure black */
  --bg: #060810;
  --bg-deep: #000003;
  --border: #1a3344;
  --border-bright: #1a5a6a;
  --scanline: rgba(0, 12, 24, 0.22);

  /* FONT — Plex Mono for legibility at size; VT323 keeps retro fallback. */
  --font-terminal: 'IBM Plex Mono', 'VT323', 'Courier New', 'Lucida Console', Monaco, monospace;
}

body {
  background: var(--bg-deep);
  color: var(--phosphor);
  font-family: var(--font-terminal);
  font-size: clamp(15px, 1.12vw + 11px, 19px);
  font-weight: 500;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.035em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 2vw, 24px);
}

/* ── CRT Frame ───────────────────────────────
   Boxy 1983 cabinet: minimal radius, deep bezel shadow. */

.crt-frame {
  background: var(--bg);
  border-radius: 4px;
  border: 2px solid var(--border);
  overflow: hidden;
  position: relative;
  width: 100%;
  max-width: min(1240px, 96vw);
  height: min(82vh, 920px);
  display: flex;
  flex-direction: column;
  box-shadow:
    inset 0 0 120px rgba(0, 20, 40, 0.5),
    inset 0 0 0 1px rgba(0, 40, 80, 0.2),
    0 0 40px rgba(0, 30, 60, 0.2),
    0 8px 24px rgba(0, 0, 0, 0.6);
}

/* Scanlines — clearly visible CRT artifact */
.crt-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 1px,
    var(--scanline) 1px,
    var(--scanline) 3px
  );
  pointer-events: none;
  z-index: 10;
}

/* Subtle flicker — phosphor persistence */
.crt-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 11;
  animation: flicker 0.2s infinite;
}

.crt-screen {
  padding: clamp(20px, 2.5vw, 32px) clamp(22px, 3vw, 40px);
  position: relative;
  z-index: 5;
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* Lighter bloom so glyphs stay sharp at larger sizes */
  text-shadow:
    0 0 1px rgba(68, 204, 255, 0.35),
    0 0 8px var(--phosphor-glow-strong);
  /* Vignette — darker at edges like a real tube */
  box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.32);
}

.crt-screen.has-terminal-input {
  padding-bottom: clamp(16px, 2vh, 24px);
}

/* ── Text Classes ────────────────────────────
   Phosphor intensity: dim = no glow, bright = strong bloom. */

.dim       { color: var(--phosphor-dim); text-shadow: 0 0 1px rgba(26, 119, 153, 0.25); font-weight: 400; }
.bright    {
  color: var(--phosphor-bright);
  font-weight: 600;
  text-shadow:
    0 0 2px var(--phosphor-glow-strong),
    0 0 14px var(--phosphor-glow),
    0 0 22px var(--phosphor-glow-strong);
}
.red       { color: var(--red); text-shadow: 0 0 6px var(--red-glow), 0 0 12px rgba(255, 68, 68, 0.2); }
.yellow    { color: var(--yellow); text-shadow: 0 0 6px var(--yellow-glow); }
.amber     { color: var(--amber); }
.muted     { color: #0a4050; text-shadow: none; }

/* Optional: theme toggle — default is film-accurate cyan (.theme-cyan implicit) */
body.theme-green {
  --phosphor: #33ff66;
  --phosphor-dim: #1a9933;
  --phosphor-bright: #66ff88;
  --phosphor-glow: rgba(51, 255, 102, 0.35);
  --phosphor-bg: rgba(51, 255, 102, 0.06);
  --border: #1a4433;
  --scanline: rgba(0, 30, 15, 0.15);
}

/* ── Cursor — solid block (1983 terminal style) ── */

.cursor {
  display: inline-block;
  width: 0.6em;
  min-width: 10px;
  height: 1.15em;
  min-height: 18px;
  background: var(--phosphor);
  box-shadow:
    0 0 6px var(--phosphor-glow-strong),
    0 0 14px var(--phosphor-glow);
  animation: blink 0.9s step-end infinite;
  vertical-align: text-bottom;
  margin-left: 2px;
}

/* ── Interactive Elements ──────────────────── */

.menu-item {
  cursor: pointer;
  padding: 2px 4px;
  transition: all 0.1s;
  display: inline-block;
}
.menu-item:hover {
  color: var(--phosphor-bright);
  text-shadow: 0 0 10px var(--phosphor-glow);
  background: var(--phosphor-bg);
}

/* Action button — used in games */
.action-btn {
  cursor: pointer;
  display: block;
  padding: 6px 12px;
  border: 1px solid var(--border);
  margin: 3px 0;
  font-family: var(--font-terminal);
  font-size: 1em;
  color: var(--phosphor);
  background: transparent;
  text-align: left;
  width: 100%;
  transition: all 0.1s;
  line-height: 1.45;
}
.action-btn:hover {
  background: var(--phosphor-bg);
  border-color: var(--phosphor);
}
.action-btn.disabled {
  opacity: 0.2;
  pointer-events: none;
}
.action-btn .label {
  font-size: 1em;
  display: block;
}
.action-btn .trade {
  font-size: 0.85em;
  color: var(--phosphor-dim);
  display: block;
}

/* Fire / attack buttons */
.action-btn.fire {
  border-color: var(--yellow);
}
.action-btn.fire:hover {
  background: rgba(255, 204, 0, 0.06);
  border-color: var(--yellow);
}
.action-btn.fire .label {
  color: var(--yellow);
}

/* Inline action (smaller, for menu choices) */
.inline-action {
  cursor: pointer;
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid var(--border);
  margin: 2px 4px 2px 0;
  font-family: var(--font-terminal);
  font-size: 0.95em;
  color: var(--phosphor);
  background: transparent;
  transition: all 0.1s;
}
.inline-action:hover {
  background: var(--phosphor-bg);
  border-color: var(--phosphor);
  color: var(--phosphor-bright);
}

/* ── Unified Terminal Input ───────────────────
   Same phosphor look as screen; no modern glass. */

.terminal-input-dock {
  flex-shrink: 0;
  z-index: 12;
  padding: 8px 18px 10px 18px;
  background: var(--bg-deep);
  border-top: 1px solid var(--border);
  box-shadow: inset 0 4px 20px rgba(0, 0, 0, 0.4);
}

.terminal-input {
  display: flex;
  align-items: center;
  gap: 8px;
}

.terminal-prompt {
  color: var(--phosphor-bright);
  font-size: 1em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 400;
  text-shadow: 0 0 6px var(--phosphor-glow);
}

.terminal-input-field {
  flex: 1;
  min-width: 0;
  font-family: var(--font-terminal);
  font-size: 1em;
  color: var(--phosphor);
  background: transparent;
  border: none;
  outline: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  -webkit-font-smoothing: antialiased;
}

.terminal-input-field::placeholder {
  color: var(--phosphor-dim);
}

/* ── Status Bar ────────────────────────────── */

.status-bar {
  display: inline-block;
  height: 8px;
  vertical-align: middle;
}

/* ── Divider ───────────────────────────────── */

.divider {
  border-top: 1px solid var(--border);
  padding-top: 6px;
  margin-top: 8px;
}

/* ── Radar / ASCII Art ─────────────────────── */

pre.scope {
  color: var(--phosphor);
  font-size: clamp(11px, 0.85em + 1px, 14px);
  line-height: 1.25;
  margin: 8px 0;
  letter-spacing: 0.04em;
  font-weight: 500;
}

/* ── DEFCON Bar ────────────────────────────── */

.defcon-bar {
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 8px 0;
  font-size: 0.9em;
  letter-spacing: 0.06em;
}
.defcon-level {
  padding: 2px 10px;
  border: 1px solid var(--border);
  color: var(--phosphor-dim);
}
.defcon-level.active {
  border-color: var(--red);
  color: var(--red);
  background: rgba(255, 0, 0, 0.08);
}
.defcon-level.active.safe {
  border-color: var(--phosphor);
  color: var(--phosphor);
  background: var(--phosphor-bg);
}

/* ── Grid Layouts ──────────────────────────── */

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
  margin: 8px 0;
  font-size: 0.95em;
}

.game-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 8px 0;
}

/* ── Tic-tac-toe Board ─────────────────────── */

.ttt-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  font-size: 24px;
  font-weight: bold;
  color: var(--phosphor);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.1s;
}
.ttt-cell:hover { background: var(--phosphor-bg); }
.ttt-cell.taken { cursor: default; }
.ttt-cell.enemy { color: var(--red); }

/* ── Navigation ────────────────────────────── */

.nav-back {
  display: inline-block;
  cursor: pointer;
  font-size: 0.95em;
  color: var(--phosphor-dim);
  margin-bottom: 12px;
  transition: color 0.1s;
}
.nav-back:hover {
  color: var(--phosphor-bright);
}

/* ── Animations ────────────────────────────── */

@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes flicker {
  0%   { opacity: 0.97; }
  5%   { opacity: 0.95; }
  10%  { opacity: 0.98; }
  15%  { opacity: 0.94; }
  20%  { opacity: 0.98; }
  100% { opacity: 0.97; }
}

@keyframes warflash {
  0%   { color: var(--red); text-shadow: 0 0 20px rgba(255, 0, 0, 0.8); }
  100% { color: var(--phosphor); text-shadow: 0 0 6px var(--phosphor-glow); }
}

.flash { animation: warflash 0.3s ease-out; }

/* ── NORAD map container (inside CRT, no breaking illusion) ── */

.norad-map {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 12px 0;
  background: var(--bg-deep);
}
.norad-map svg {
  display: block;
  width: 100%;
  height: auto;
}
.norad-map .trajectory {
  fill: none;
  stroke: var(--tac-blue);
  stroke-width: 1;
  stroke-dasharray: 200;
  animation: trajectory-draw 2s ease-out forwards;
}
.norad-map .burst {
  fill: var(--tac-burst);
  opacity: 0;
  animation: burst-flash 0.5s ease-out forwards;
}

@keyframes trajectory-draw {
  from { stroke-dashoffset: 200; }
  to { stroke-dashoffset: 0; }
}
@keyframes burst-flash {
  0% { opacity: 0; }
  20% { opacity: 1; }
  100% { opacity: 0; }
}

/* ── Responsive ────────────────────────────── */

@media (max-width: 600px) {
  body { padding: 8px; }
  .crt-frame {
    border-radius: 6px;
    height: min(88vh, 100dvh - 16px);
    max-width: 100%;
  }
  .crt-screen {
    padding: 16px 18px;
    font-size: clamp(14px, 3.6vw, 16px);
  }
  .ttt-cell { width: 52px; height: 52px; font-size: 20px; }
  .stats-grid { grid-template-columns: 1fr; }
  pre.scope { font-size: clamp(9px, 2.6vw, 12px); }
}

@media (max-width: 400px) {
  .crt-screen { padding: 12px 14px; }
  .ttt-cell { width: 44px; height: 44px; font-size: 16px; }
}