@font-face {
  font-family: 'VCROSDMono';
  src: url('../assets/fonts/VCROSDMono.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Global post-blur for full-screen softness. Tune manually (0px disables). */
  --screen-global-blur: 0.6px;

  --color-bg: #010302;
  --color-green: #4cff7a;
  --color-green-dim: #4cff7a99;
  --color-green-soft: #7dffb0;
  --color-green-glow-1: #4cff7a;
  --color-green-glow-2: #4cff7a88;
  --color-green-glow-3: #4cff7a44;
  --color-green-glow-reticle: #4cff7a33;
  --color-risk-low: #ffd400;
  --color-risk-medium: #c85a00;
  --color-risk-medium-glow: #c85a0099;
  --color-risk-high: #ff3333;
  --color-risk-high-glow: #ff333399;

  --hud-top: 20px;
  --hud-left: 20px;
  --hud-right: 20px;
  --panel-width: 260px;
  --panel-font-size: clamp(11px, 1.8vw, 14px);
  --panel-line-height: 2;
  --panel-row-gap: 12px;
  --panel-label-min-width: 80px;
  --panel-label-letter-spacing: 1px;
  --panel-value-shadow: 0 0 6px var(--color-green), 0 0 14px var(--color-green-glow-2), 0 0 28px var(--color-green-glow-3);
  --hud-blink-duration: 0.7s;

  --crt-grid-step: 24px;
  --crt-grid-major-step: 96px;
  --crt-grid-line: rgb(76 255 122 / 12%);
  --crt-grid-major-line: rgb(76 255 122 / 22%);
  --crt-noise-a: rgb(210 255 220 / 18%);
  --crt-noise-b: rgb(255 235 200 / 10.5%);
  --crt-noise-c: rgb(180 220 255 / 10.5%);
}

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

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--color-bg);
  font-family: 'VCROSDMono', 'Courier New', monospace;
  filter: blur(var(--screen-global-blur));
  transform: translateZ(0);
}

/* CRT glass + technical grid + scanlines */
#crt {
  position: fixed;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  border-radius: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 19% 23%, var(--crt-noise-a) 0 0.9px, transparent 1.1px),
    radial-gradient(circle at 73% 41%, var(--crt-noise-b) 0 0.9px, transparent 1.1px),
    radial-gradient(circle at 54% 79%, var(--crt-noise-c) 0 0.9px, transparent 1.1px);
  background-size: 3px 3px, 4px 4px, 5px 5px;
  animation: crtNoise 0.16s steps(2) infinite;
  box-shadow:
    inset 0 0 1px rgb(76 255 122 / 45%),
    inset 0 0 22px rgb(76 255 122 / 10%),
    inset 0 0 120px rgb(0 0 0 / 34%),
    inset 0 0 280px rgb(0 0 0 / 56%);
}

#crt::before {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 calc(var(--crt-grid-step) - 1px),
      var(--crt-grid-line) calc(var(--crt-grid-step) - 1px) var(--crt-grid-step)
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 calc(var(--crt-grid-step) - 1px),
      var(--crt-grid-line) calc(var(--crt-grid-step) - 1px) var(--crt-grid-step)
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0 calc(var(--crt-grid-major-step) - 1px),
      var(--crt-grid-major-line) calc(var(--crt-grid-major-step) - 1px) var(--crt-grid-major-step)
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 calc(var(--crt-grid-major-step) - 1px),
      var(--crt-grid-major-line) calc(var(--crt-grid-major-step) - 1px) var(--crt-grid-major-step)
    );
  opacity: 0.42;
  pointer-events: none;
  transform: scale(1.02, 1.01);
  transform-origin: center center;
}

#crt::after {
  content: ' ';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(ellipse at center, rgb(76 255 122 / 8%) 0%, rgb(76 255 122 / 0%) 62%),
    radial-gradient(ellipse at center, rgb(0 0 0 / 0%) 48%, rgb(0 0 0 / 58%) 100%),
    linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
    linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  background-size: 100% 100%, 100% 100%, 100% 4px, 3px 100%;
  pointer-events: none;
  opacity: 0.3;
  transform: scale(1.02, 1.01);
  transform-origin: center center;
}

@keyframes crtNoise {
  0% {
    background-position: 0 0, 0 0, 0 0;
  }
  25% {
    background-position: 13px -9px, -11px 8px, 7px 5px;
  }
  50% {
    background-position: -6px 14px, 9px -4px, -12px 10px;
  }
  75% {
    background-position: 8px 6px, -4px -12px, 13px -8px;
  }
  100% {
    background-position: 0 0, 0 0, 0 0;
  }
}

/* Subtle phosphor blur on the WebGL canvas */
canvas {
  filter: blur(0.5px);
}

/* Shared panel style — no container box, clean floating text */
.panel {
  position: fixed;
  z-index: 20;
  pointer-events: none;
  animation: flicker 4s infinite;
  font-size: var(--panel-font-size);
  line-height: var(--panel-line-height);
}

/* HUD left */
#hud {
  top: var(--hud-top);
  left: var(--hud-left);
  display: none;
  color: var(--color-green);
  width: var(--panel-width);
}

/* Target panel right */
#target-panel {
  top: var(--hud-top);
  right: var(--hud-right);
  display: none;
  width: var(--panel-width);
  animation: none;
}

/* Shared row/label/value */
.prow {
  display: flex;
  gap: var(--panel-row-gap);
}

.plbl {
  color: var(--color-green-dim);
  min-width: var(--panel-label-min-width);
  letter-spacing: var(--panel-label-letter-spacing);
}

.pval {
  color: var(--color-green-soft);
  text-shadow: var(--panel-value-shadow);
}

.pval.pending {
  position: relative;
  color: transparent;
  text-shadow: none;
}

.pval.pending::before {
  content: '';
  display: inline-block;
  width: 31px;
  height: 10px;
  vertical-align: middle;
  background:
    linear-gradient(var(--color-green-soft) 0 0) 0 100% / 4px 36% no-repeat,
    linear-gradient(var(--color-green-soft) 0 0) 9px 100% / 4px 62% no-repeat,
    linear-gradient(var(--color-green-soft) 0 0) 18px 100% / 4px 86% no-repeat,
    linear-gradient(var(--color-green-soft) 0 0) 27px 100% / 4px 58% no-repeat;
  filter: drop-shadow(0 0 5px var(--color-green-glow-2));
  animation: pendingWave 1s steps(1, end) infinite;
}

/* Keep top-left HUD rows stable across widths. */
#hud .plbl {
  flex: 0 0 var(--panel-label-min-width);
}

#hud .pval {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.scanning {
  animation: scanBlink var(--hud-blink-duration) step-end infinite;
}

@keyframes scanBlink {
  50% {
    opacity: 0.15;
  }
}

@keyframes pendingWave {
  0%,
  100% {
    background-size: 4px 36%, 4px 62%, 4px 86%, 4px 58%;
  }
  25% {
    background-size: 4px 72%, 4px 36%, 4px 62%, 4px 86%;
  }
  50% {
    background-size: 4px 58%, 4px 86%, 4px 36%, 4px 62%;
  }
  75% {
    background-size: 4px 86%, 4px 58%, 4px 72%, 4px 36%;
  }
}

.cur {
  display: inline-block;
  width: 8px;
  height: 1em;
  background: var(--color-green);
  vertical-align: text-bottom;
  animation: blink 0.55s step-end infinite;
}

.risk-low {
  color: var(--color-risk-low);
  text-shadow: 0 0 8px var(--color-risk-low);
}

.risk-medium {
  color: var(--color-risk-medium);
  text-shadow: 0 0 8px var(--color-risk-medium-glow);
}

.risk-high {
  color: var(--color-risk-high);
  text-shadow: 0 0 8px var(--color-risk-high-glow);
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

@keyframes flicker {
  0%,
  100% {
    opacity: 1;
  }
  92% {
    opacity: 1;
  }
  93% {
    opacity: 0.82;
  }
  94% {
    opacity: 1;
  }
  96% {
    opacity: 0.75;
  }
  97% {
    opacity: 1;
  }
}

/* Responsive HUD for tablets and small laptops */
@media (max-width: 768px) {
  :root {
    --hud-top: 15px;
    --hud-left: 10px;
    --hud-right: 10px;
    --panel-width: 45%;
    --panel-font-size: clamp(9px, 2.2vw, 12px);
    --panel-line-height: 1.3;
    --panel-row-gap: 6px;
    --panel-label-min-width: 50px;
    --screen-global-blur: 0.15px;
    --crt-grid-step: 28px;
    --crt-grid-major-step: 112px;
    --crt-grid-line: rgb(76 255 122 / 6%);
    --crt-grid-major-line: rgb(76 255 122 / 12%);
    --crt-noise-a: rgb(210 255 220 / 8%);
    --crt-noise-b: rgb(255 235 200 / 5%);
    --crt-noise-c: rgb(180 220 255 / 5%);
  }

  body {
    transform: none;
  }

  canvas {
    filter: none;
  }

  #crt {
    animation: none;
    box-shadow:
      inset 0 0 1px rgb(76 255 122 / 28%),
      inset 0 0 64px rgb(0 0 0 / 28%);
  }

  #crt::before {
    opacity: 0.24;
    transform: none;
  }

  #crt::after {
    opacity: 0.2;
    transform: none;
  }
}

/* Hard fix for Phone Portrait - zero overlap guaranteed */
@media (orientation: portrait) and (max-width: 500px) {
  :root {
    --hud-top: max(8px, env(safe-area-inset-top));
    --hud-left: max(6px, env(safe-area-inset-left));
    --hud-right: max(6px, env(safe-area-inset-right));
    --panel-width: 44vw;
    --panel-font-size: 8.5px;
    --panel-line-height: 1.2;
    --panel-label-min-width: 38px;
    --panel-label-letter-spacing: -0.2px;
    --panel-value-shadow: 0 0 4px var(--color-green);
    --screen-global-blur: 0;
    --crt-grid-step: 32px;
    --crt-grid-major-step: 128px;
    --crt-grid-line: rgb(76 255 122 / 4%);
    --crt-grid-major-line: rgb(76 255 122 / 8%);
    --crt-noise-a: rgb(210 255 220 / 5%);
    --crt-noise-b: rgb(255 235 200 / 3%);
    --crt-noise-c: rgb(180 220 255 / 3%);
  }

  .panel {
    overflow: hidden; /* Prevent text from spilling into center */
  }

  #crt {
    animation: none;
    box-shadow: inset 0 0 40px rgb(0 0 0 / 24%);
  }

  #crt::before {
    opacity: 0.16;
    transform: none;
  }

  #crt::after {
    opacity: 0.14;
    transform: none;
  }

  /* Ensure rows stay compact but left-aligned */
  .prow {
    justify-content: flex-start;
  }
}

/* Target Tracker / Reticle
   NOTE: jitter + stepped pulse are intentional "nervous" artifacts. */
#reticle {
  position: fixed;
  pointer-events: none;
  z-index: 15;
  display: none;
  width: 60px;
  height: 60px;
  transform: translate(-50%, -50%);
  border: 2px solid var(--reticle-color, var(--color-green));
  animation: reticleJitter 0.15s steps(2) infinite;
  box-shadow: 0 0 8px var(--reticle-color, var(--color-green-glow-reticle));
}

@keyframes reticleJitter {
  /* Intentionally imperfect micro-instability (do not smooth). */
  0% { transform: translate(-51%, -49%) rotate(0.1deg); }
  50% { transform: translate(-49%, -51%) rotate(-0.1deg); }
  100% { transform: translate(-50.5%, -50.5%) rotate(0deg); }
}

#reticle::before,
#reticle::after {
  content: '';
  position: absolute;
  inset: -2px;
  border: 2px solid var(--reticle-color, var(--color-green));
  opacity: 0;
}

.reticle-acquiring #reticle::before {
  animation: reticlePulse 0.4s steps(3) infinite; /* Stepped for nervous look */
}

.reticle-acquiring #reticle::after {
  animation: reticlePulse 0.4s steps(3) infinite 0.2s;
}

@keyframes reticlePulse {
  /* Intentionally stepped/aggressive lock-on cadence. */
  0% {
    transform: scale(0.8);
    opacity: 1;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.8;
  }
  51% {
    opacity: 0;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}