/* CRT overlay: scanlines + vignette + slow flicker + faint RGB fringe.
   Covers canvas AND DOM HUD so the whole game shares one look.
   Toggled via body.no-crt (fx.scanlines setting). */

#crt {
  position: absolute;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  border-radius: 6px;
  background:
    /* scanlines */
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.22) 0px,
      rgba(0, 0, 0, 0.22) 1px,
      transparent 1px,
      transparent 3px
    ),
    /* faint vertical RGB mask */
    repeating-linear-gradient(
      90deg,
      rgba(255, 0, 60, 0.028) 0px,
      rgba(0, 255, 120, 0.022) 1px,
      rgba(0, 80, 255, 0.028) 2px,
      transparent 3px
    ),
    /* vignette */
    radial-gradient(
      ellipse 105% 100% at 50% 50%,
      transparent 58%,
      rgba(0, 0, 0, 0.16) 82%,
      rgba(0, 0, 0, 0.42) 100%
    );
  animation: crt-flicker 4s steps(1, end) infinite;
}

/* phosphor glow bloom at the corners */
#crt::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 140% 120% at 50% -20%, rgba(120, 200, 255, 0.045) 0%, transparent 55%);
}

@keyframes crt-flicker {
  0%   { opacity: 1; }
  11%  { opacity: 0.96; }
  12%  { opacity: 1; }
  37%  { opacity: 0.98; }
  38%  { opacity: 1; }
  61%  { opacity: 0.95; }
  62%  { opacity: 1; }
  84%  { opacity: 0.97; }
  85%  { opacity: 1; }
}

body.no-crt #crt { display: none; }

/* reduce flicker for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  #crt { animation: none; }
}