/* CRT overlay: see public/js/crt.js. Layers never take clicks. */
.crt { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; overflow: hidden; }
.crt i { position: absolute; inset: 0; display: block; }

.crt-scanlines {
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, calc(var(--scan) * 0.75)) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}

.crt-phosphor {
  background: repeating-linear-gradient(to right, rgba(255, 40, 40, 0.9) 0 1px, rgba(40, 255, 90, 0.9) 1px 2px, rgba(60, 90, 255, 0.9) 2px 3px);
  opacity: calc(var(--phosphor) * 0.22);
  mix-blend-mode: overlay;
}

.crt-flicker {
  background: rgba(255, 250, 235, 1);
  opacity: 0;
  mix-blend-mode: soft-light;
  animation: crtFlicker 0.18s steps(1) infinite;
}
@keyframes crtFlicker {
  0% { opacity: calc(var(--flicker) * 0.1); }
  25% { opacity: calc(var(--flicker) * 0.02); }
  50% { opacity: calc(var(--flicker) * 0.14); }
  75% { opacity: calc(var(--flicker) * 0.05); }
}

.crt-vignette {
  background: radial-gradient(ellipse at center, transparent 58%, rgba(0, 0, 0, calc(var(--vignette) * 3.2)) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .crt-flicker { animation: none; }
}