/* Lane E — RAVEN HUD overlay.
   The vector HUD itself is drawn on a 2D canvas (src/ui/hud.js); this file owns the
   full-screen CRT layers and guarantees nothing here ever eats a pointer event.
   NOTE: Lane F's post chain already applies vignette / aberration / grain, so these
   layers are deliberately faint — they add scanlines and a damage response only. */

.hud,
.hud * {
  pointer-events: none !important;
  user-select: none;
}

.hud {
  position: absolute;
  inset: 0;
  z-index: 10;
  overflow: hidden;
  font-family: 'Bahnschrift', 'DIN Alternate', 'Arial Narrow', 'Roboto Condensed', 'Segoe UI', system-ui, sans-serif;
  text-transform: uppercase;
  contain: strict;
}

.hud-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hud-layer {
  position: absolute;
  inset: 0;
  will-change: opacity;
}

/* CRT scanlines — 1px dark line every 3px. Black at low alpha == multiply. */
.hud-scan {
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.16) 0px,
    rgba(0, 0, 0, 0.16) 1px,
    rgba(0, 0, 0, 0) 1px,
    rgba(0, 0, 0, 0) 3px
  );
  opacity: 0.6;
}

/* Very fine vertical aperture grille, almost subliminal. */
.hud-grille {
  background-image: repeating-linear-gradient(
    to right,
    rgba(0, 0, 0, 0.10) 0px,
    rgba(0, 0, 0, 0.10) 1px,
    rgba(0, 0, 0, 0) 1px,
    rgba(0, 0, 0, 0) 4px
  );
  opacity: 0.22;
}

/* Corner darkening. Kept light because post already vignettes. */
.hud-vignette {
  background: radial-gradient(
    ellipse 82% 74% at 50% 50%,
    rgba(0, 0, 0, 0) 46%,
    rgba(2, 5, 8, 0.30) 82%,
    rgba(2, 5, 8, 0.55) 100%
  );
}

/* Chromatic fringe: two offset gradients that only bite at the extreme edges. */
.hud-chroma-a,
.hud-chroma-b {
  mix-blend-mode: screen;
}
.hud-chroma-a {
  background: radial-gradient(
    ellipse 76% 70% at 49.6% 50%,
    rgba(0, 0, 0, 0) 62%,
    rgba(40, 120, 255, 0.055) 100%
  );
}
.hud-chroma-b {
  background: radial-gradient(
    ellipse 76% 70% at 50.4% 50%,
    rgba(0, 0, 0, 0) 62%,
    rgba(255, 60, 30, 0.05) 100%
  );
}

/* Damage feedback lives at the four CORNERS only, never as a screen wash —
   ART_DIRECTION §4 keeps the frame low-contrast grey so the AP bar's colour
   ramp and the corner pulse read as the actual damage signal. Each corner is
   its own tight radial so nothing bleeds across the sky or the open concrete
   in the centre two-thirds of the frame. */
.hud-damage {
  background:
    radial-gradient(circle 300px at 0% 0%,   rgba(255, 60, 34, 0.55) 0%, rgba(255, 60, 34, 0) 72%),
    radial-gradient(circle 300px at 100% 0%, rgba(255, 60, 34, 0.55) 0%, rgba(255, 60, 34, 0) 72%),
    radial-gradient(circle 300px at 0% 100%, rgba(255, 60, 34, 0.55) 0%, rgba(255, 60, 34, 0) 72%),
    radial-gradient(circle 300px at 100% 100%, rgba(255, 60, 34, 0.55) 0%, rgba(255, 60, 34, 0) 72%);
  opacity: 0;
}

/* White-hot flash confined to the frame's outer edge when AP is taken —
   a thin bracket-pulse, not a wash across the sky/concrete. */
.hud-hit {
  background: radial-gradient(
    ellipse 96% 92% at 50% 50%,
    rgba(255, 255, 255, 0) 82%,
    rgba(255, 214, 190, 0.22) 96%,
    rgba(255, 190, 160, 0.40) 100%
  );
  opacity: 0;
}

/* Boot sweep: a single horizontal wipe when the HUD comes up. */
.hud-boot {
  background: linear-gradient(
    to bottom,
    rgba(150, 235, 255, 0) 0%,
    rgba(150, 235, 255, 0.10) 46%,
    rgba(190, 245, 255, 0.30) 50%,
    rgba(150, 235, 255, 0.10) 54%,
    rgba(150, 235, 255, 0) 100%
  );
  opacity: 0;
}

/* ---- volume toast (keyboard-driven, fades out) ------------------------- */
.raven-vol {
  position: fixed; left: 50%; bottom: 12%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  padding: 7px 14px; pointer-events: none;
  background: rgba(6, 12, 18, 0.72);
  border: 1px solid rgba(140, 220, 255, 0.28);
  color: #8fe6ff; font-size: 11px; letter-spacing: 0.18em;
  font-family: 'Rajdhani', 'Roboto Condensed', system-ui, sans-serif;
  opacity: 0; transition: opacity .25s ease; z-index: 40;
}
.raven-vol.show { opacity: 1; }
.raven-vol i { display: block; width: 150px; height: 4px; background: rgba(20, 44, 60, 0.9); }
.raven-vol b { display: block; height: 100%; background: linear-gradient(90deg, #39d0ff, #8ff4ff); }
.raven-vol-num { min-width: 46px; text-align: right; }