:root {
  /* Default CRT surface geometry */
  --crt-radius: 12px;
  --crt-curvature-transform: none;

  /* Scanline and aperture defaults (overridable per game) */
  --crt-scanline-color-rgb: 255,255,255;
  --crt-scanline-alpha: 0.12;
  --crt-scanline-spacing: 2px;
  --crt-scanline-thickness: 1px;
  --crt-scanline-opacity: 0.55;
  --crt-scanline-animation: crt-roll 12s linear infinite;

  --crt-aperture-rgb-r: 255,0,0;
  --crt-aperture-rgb-g: 0,255,0;
  --crt-aperture-rgb-b: 0,128,255;
  --crt-aperture-opacity: 0.25;

  /* Vignette, bloom and noise */
  --crt-vignette-gradient: radial-gradient(ellipse at center, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 40%, rgba(0,0,0,0.38) 70%, rgba(0,0,0,0.68) 100%);
  --crt-vignette-opacity: 1;
  --crt-vignette-blend: overlay;
  --crt-noise-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="1"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.06"/></svg>');
  --crt-noise-size: 256px;
  --crt-overlay-filter: none;

  /* Flicker tuning */
  --crt-flicker-low: 0.75;
  --crt-flicker-peak: 0.95;
  --crt-flicker-rest: 0.8;
  --crt-flicker-animation: crt-flicker 1.2s steps(2, end) infinite;

  /* Optional glow helper */
  --crt-glow-shadow: inset 0 0 80px rgba(0,0,0,0.6);
  --crt-glow-blend: screen;
}

/* Wrap CRT content with this to inherit the shared overlays */
.crt-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--crt-radius, 12px);
  transform: var(--crt-curvature-transform, none);
}

.crt-overlay,
.crt-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
}

.crt-glow {
  z-index: 9;
}

.crt-overlay {
  z-index: 10;
}

/* Combined scanline + aperture grille + vignette/noise overlay */
.crt-overlay {
  overflow: hidden;
  mix-blend-mode: var(--crt-vignette-blend, overlay);
  filter: var(--crt-overlay-filter, none);
}

.crt-overlay::before,
.crt-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
}

.crt-overlay::before {
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(var(--crt-scanline-spacing, 2px) - var(--crt-scanline-thickness, 1px)),
      rgba(var(--crt-scanline-color-rgb, 255,255,255), var(--crt-scanline-alpha, 0.12)) calc(var(--crt-scanline-spacing, 2px) - var(--crt-scanline-thickness, 1px)),
      rgba(var(--crt-scanline-color-rgb, 255,255,255), var(--crt-scanline-alpha, 0.12)) var(--crt-scanline-spacing, 2px)
    ),
    repeating-linear-gradient(
      to right,
      rgba(var(--crt-aperture-rgb-r, 255,0,0), var(--crt-aperture-opacity, 0.25)) 0 1px,
      rgba(var(--crt-aperture-rgb-g, 0,255,0), var(--crt-aperture-opacity, 0.25)) 1px 2px,
      rgba(var(--crt-aperture-rgb-b, 0,128,255), var(--crt-aperture-opacity, 0.25)) 2px 3px
    );
  opacity: var(--crt-scanline-opacity, 0.55);
  animation: var(--crt-scanline-animation, crt-roll 12s linear infinite);
}

.crt-overlay::after {
  background:
    var(--crt-vignette-gradient, radial-gradient(ellipse at center, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 40%, rgba(0,0,0,0.38) 70%, rgba(0,0,0,0.68) 100%)),
    var(--crt-noise-image);
  background-size: cover, var(--crt-noise-size, 256px) var(--crt-noise-size, 256px);
  opacity: var(--crt-vignette-opacity, 1);
  animation: var(--crt-flicker-animation, crt-flicker 1.2s steps(2, end) infinite);
}

.crt-glow {
  box-shadow: var(--crt-glow-shadow, inset 0 0 80px rgba(0,0,0,0.6));
  mix-blend-mode: var(--crt-glow-blend, screen);
}

@keyframes crt-roll {
  from { background-position-y: 0, 0; }
  to { background-position-y: var(--crt-scanline-spacing, 2px), 0; }
}

@keyframes crt-flicker {
  0% { opacity: var(--crt-flicker-low, 0.75); }
  50% { opacity: var(--crt-flicker-peak, 0.95); }
  100% { opacity: var(--crt-flicker-rest, 0.8); }
}