/* Convoy Wars — CRT/phosphor terminal aesthetic, same family as Deep Into The Void.
   Mobile-first: single-column by default, DOM controls throughout (no canvas-hit-testing —
   canvas is reserved for flavor/map display only, per the design doc). Detection for the
   touch control layer is `@media (pointer: coarse)` (input capability), NOT a viewport-width
   breakpoint — DITV deliberately chose that so a narrow desktop window keeps keyboard-only
   clarity (R-5 of the design doc). */

:root {
  --phosphor: #33ff66;
  --phosphor-dim: #1c9e40;
  --phosphor-bright: #aaffcc;
  --bg: #06100a;
  --bg-panel: #0b1f13;
  --danger: #ff5555;
  --warning: #ffcc33;
  --touch-target-min: 44px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--phosphor);
  font-family: 'Courier New', 'Consolas', monospace;
  font-size: 16px;
  line-height: 1.4;
  min-height: 100vh;
}

.crt-shell {
  max-width: 720px;
  margin: 0 auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.crt-panel {
  background: var(--bg-panel);
  border: 1px solid var(--phosphor-dim);
  border-radius: 4px;
  padding: 14px;
}

.crt-title {
  color: var(--phosphor-bright);
  text-shadow: 0 0 6px var(--phosphor);
  font-size: 1.3em;
  margin: 0 0 8px 0;
  letter-spacing: 1px;
}

.crt-subtitle {
  color: var(--phosphor-dim);
  font-size: 0.9em;
  margin: 0 0 12px 0;
}

/* Every tappable control — buttons, links styled as buttons, list items — is a full-width,
   stacked, single-column block at phone width (One's §2 rule: one-thumb reachable). */
.crt-button, button.crt-button, a.crt-button {
  display: block;
  width: 100%;
  min-height: var(--touch-target-min);
  padding: 10px 14px;
  margin: 6px 0;
  background: transparent;
  border: 1px solid var(--phosphor);
  color: var(--phosphor);
  font-family: inherit;
  font-size: 1em;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  border-radius: 3px;
}

.crt-button:active, .crt-button:focus-visible {
  background: var(--phosphor-dim);
  color: var(--bg);
  outline: none;
}

/* A distinctly-styled panel/message for moments that shouldn't blend into routine narration
   (abandoned-vehicle finds, "you can deliver here") — same phosphor family, just louder. */
.crt-panel--highlight {
  border: 2px solid var(--warning);
  box-shadow: 0 0 10px rgba(255, 204, 51, 0.3);
}

.crt-button--danger { border-color: var(--danger); color: var(--danger); }
.crt-button--warning { border-color: var(--warning); color: var(--warning); }
.crt-button--primary { border-color: var(--phosphor-bright); color: var(--phosphor-bright); }

/* The DITV soft-lock fix, applied from the first screen: every overlay gets ONE unconditional
   close control, always visible, touch-target sized. No overlay is reachable without it. */
.crt-close {
  display: block;
  width: 100%;
  min-height: var(--touch-target-min);
  margin-top: 10px;
  padding: 10px;
  background: var(--bg-panel);
  border: 2px solid var(--phosphor-bright);
  color: var(--phosphor-bright);
  font-family: inherit;
  font-size: 1em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border-radius: 3px;
}

/* Full-screen overlay (e.g. the "M" full-map). Always paired with a .crt-close inside it — see
   the soft-lock-fix rule above; a hidden overlay with no visible close control is a dead end. */
.crt-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 16, 10, 0.96);
  z-index: 10;
  overflow-y: auto;
  padding: 12px;
}

.crt-overlay.hidden { display: none; }

.crt-stat-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px dotted var(--phosphor-dim);
}

.crt-stat-row:last-child { border-bottom: none; }

.crt-list { list-style: none; margin: 0; padding: 0; }
.crt-list li { padding: 4px 0; border-bottom: 1px dotted var(--phosphor-dim); }
.crt-list li:last-child { border-bottom: none; }

/* Faction territory legend (2026-08-16) — a horizontal color-swatch key under the map, not the
   usual vertical crt-list layout, since it's read as one glanceable row, not a list of records. */
.crt-faction-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 0.85em;
  margin: 6px 0 10px;
}
.crt-faction-legend li { border-bottom: none; padding: 2px 0; display: flex; align-items: center; gap: 6px; }
.crt-faction-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 4px currentColor;
}

/* Django message tags (settings.py doesn't override MESSAGE_TAGS, so these are the stock
   debug/info/success/warning/error levels) plus .highlight, an extra_tags add-on for moments
   that shouldn't blend into routine narration (delivery-ready on arrival, vehicle added). */
.crt-panel p.success { color: var(--phosphor-bright); }
.crt-panel p.warning { color: var(--warning); }
.crt-panel p.error { color: var(--danger); }
.crt-panel p.highlight {
  border: 1px solid var(--warning);
  background: rgba(255, 204, 51, 0.08);
  padding: 8px;
  border-radius: 3px;
}

.crt-panel p a { color: var(--phosphor-bright); }

.crt-errors {
  color: var(--danger);
  border: 1px solid var(--danger);
  padding: 8px;
  margin-bottom: 10px;
  border-radius: 3px;
}

input[type="text"], input[type="password"], input[type="number"] {
  width: 100%;
  min-height: var(--touch-target-min);
  padding: 8px;
  background: var(--bg);
  border: 1px solid var(--phosphor-dim);
  color: var(--phosphor-bright);
  font-family: inherit;
  font-size: 1em;
  border-radius: 3px;
  margin-bottom: 10px;
}

/* Wider viewports get a little more breathing room, but the control layout stays single-column
   and DOM-driven either way — this is a cosmetic widening, not a different interaction model. */
@media (min-width: 800px) {
  .crt-shell { padding: 24px; }
}

/* Coarse-pointer (touch) devices get slightly larger tap targets — input-capability detection,
   not a screen-size breakpoint, so a narrow desktop window keeps its tighter, keyboard-friendly
   layout (R-5). */
@media (pointer: coarse) {
  :root { --touch-target-min: 48px; }
  .crt-button, .crt-close { font-size: 1.05em; }
}

/* Physical "monitor" bezel (2026-07-28 visual overhaul) — the shared frame that ties the hero
   combat scene, the map, and the travel scene into one visual identity: a dark plastic housing
   around a screen bezel, with a scanline/phosphor-tint/vignette/glow overlay on whatever canvas
   sits inside. One component, many scenes — see game/static/game/js/worldmap.js for the map/
   travel-icon rendering this wraps. */
.crt-monitor {
  background: linear-gradient(155deg, #2b2b30, #17171a 60%);
  border-radius: 14px;
  padding: 14px 14px 20px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -2px 0 rgba(0, 0, 0, 0.4);
}

.crt-monitor-screen-bezel {
  background: #050505;
  border-radius: 6px;
  padding: 8px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.03), inset 0 8px 20px rgba(0, 0, 0, 0.8);
}

.crt-monitor-screen {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  background: #000;
}

.crt-monitor-screen canvas {
  display: block;
  width: 100%;
  height: auto;
}

.crt-monitor-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.crt-monitor-overlay.tint {
  background: radial-gradient(ellipse at 50% 40%, rgba(120, 255, 170, 0.07), rgba(0, 20, 10, 0.35) 100%);
  mix-blend-mode: screen;
}

.crt-monitor-overlay.scanlines {
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0.18) 3px, rgba(0, 0, 0, 0.18) 4px);
  mix-blend-mode: multiply;
}

.crt-monitor-overlay.vignette {
  box-shadow: inset 0 0 70px 24px rgba(0, 0, 0, 0.75);
}

.crt-monitor-overlay.glow {
  inset: -2px;
  box-shadow: inset 0 0 24px 4px rgba(150, 255, 190, 0.12);
  border-radius: 4px;
}

.crt-monitor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 4px 0;
  font-size: 0.64em;
  letter-spacing: 1px;
  color: #7a8a80;
}

.crt-monitor-footer .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--phosphor);
  box-shadow: 0 0 5px 1px var(--phosphor);
  margin-right: 6px;
}