/* =========================================================
   GLOBAL RGB SCREEN FILTER
   ========================================================= */

/* Filter page content, but never filter the SVG definitions or scanline overlay */
html.global-screen-filter-red body > *:not(#globalScreenFilterSVG):not(#globalScreenOverlay) {
  filter: url("#globalRedOnlyFilter");
}

html.global-screen-filter-green body > *:not(#globalScreenFilterSVG):not(#globalScreenOverlay) {
  filter: url("#globalGreenOnlyFilter");
}

html.global-screen-filter-blue body > *:not(#globalScreenFilterSVG):not(#globalScreenOverlay) {
  filter: url("#globalBlueOnlyFilter");
}

/* Real overlay layer, created by filter.js. This sits above the page. */
#globalScreenOverlay {
  display: none;
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2147483000;
}

/* Turn overlay on */
html.global-screen-filter-on #globalScreenOverlay {
  display: block;
}

/* Dark scanlines that show over red/green/blue images */
html.global-screen-filter-on #globalScreenOverlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.34) 0px,
      rgba(0, 0, 0, 0.34) 1px,
      transparent 1px,
      transparent 4px
    );
  opacity: 0.55;
}

/* Vignette / screen glow */
html.global-screen-filter-on #globalScreenOverlay::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow:
    inset 0 0 80px rgba(0,0,0,0.65),
    inset 0 0 150px rgba(0,0,0,0.8);
}

/* Subtle color glow per channel */
html.global-screen-filter-red #globalScreenOverlay::after {
  background: radial-gradient(
    ellipse at center,
    rgba(255,0,0,0.06),
    rgba(0,0,0,0.22)
  );
}

html.global-screen-filter-green #globalScreenOverlay::after {
  background: radial-gradient(
    ellipse at center,
    rgba(0,255,0,0.06),
    rgba(0,0,0,0.22)
  );
}

html.global-screen-filter-blue #globalScreenOverlay::after {
  background: radial-gradient(
    ellipse at center,
    rgba(0,0,255,0.08),
    rgba(0,0,0,0.22)
  );
}

/* Optional: pages with white backgrounds can opt into matching channel backgrounds */
html.global-screen-filter-red body.filter-light-bg {
  background: rgb(255, 0, 0) !important;
  color: #000 !important;
}

html.global-screen-filter-green body.filter-light-bg {
  background: rgb(0, 255, 0) !important;
  color: #000 !important;
}

html.global-screen-filter-blue body.filter-light-bg {
  background: rgb(0, 0, 255) !important;
  color: #000 !important;
}