/**
 * hud.css — Fighter HUD.
 *
 * Thin phosphor line art on black. Every instrument is repurposed: the heading
 * tape is the clock, each child gets a buffer tape, the altitude tape is
 * T-minus, and the pitch ladder shows whether the most-at-risk child is ahead
 * of or behind schedule.
 *
 * Ported from frontend/lab/05-hud.html. The lab page put a drop-shadow glow on
 * the root SVG, which re-rasterises every frame; its own notes flagged that as
 * a Fire Stick risk, so the glow here is a static stroke treatment instead.
 */

#screen-hud {
  --hud: #3dfab0;
  --hud-dim: rgba(61, 250, 176, .35);
  --hud-warn: #eab308;
  --hud-danger: #ff3b3b;
  --hud-mono: 'Share Tech Mono', monospace;

  position: relative;
  overflow: hidden;
  background: #000;
}

#screen-hud svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* One stroke weight everywhere, unaffected by the viewBox scale. */
#screen-hud .ln {
  fill: none;
  stroke: var(--hud);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
#screen-hud .ln.dim { stroke: var(--hud-dim); }
#screen-hud .ln.warn { stroke: var(--hud-warn); }
#screen-hud .ln.danger { stroke: var(--hud-danger); }

#screen-hud text {
  fill: var(--hud);
  font-family: var(--hud-mono);
  letter-spacing: 0.08em;
}
#screen-hud text.dim { fill: var(--hud-dim); }
#screen-hud text.warn { fill: var(--hud-warn); }
#screen-hud text.danger { fill: var(--hud-danger); }
#screen-hud text.lg { font-size: 44px; }
#screen-hud text.md { font-size: 30px; }
#screen-hud text.sm { font-size: 22px; }
#screen-hud text.xs { font-size: 17px; }

/* Caution panel, only when something needs saying. */
#screen-hud .caution { opacity: 0; transition: opacity .4s ease; }
#screen-hud .caution.on { opacity: 1; }
#screen-hud .caution.blink { animation: hud-blink 1s steps(2) infinite; }
@keyframes hud-blink { 50% { opacity: .25; } }

/* Scanlines and vignette, cheap because they never repaint. */
#screen-hud .scan,
#screen-hud .vig {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#screen-hud .scan {
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 3px, rgba(0, 0, 0, .28) 3px 4px);
}
#screen-hud .vig {
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .75) 100%);
}

@media (prefers-reduced-motion: reduce) {
  #screen-hud .caution.blink { animation: none; }
}