/* Screen-space texture only: no body transform/filter that could move fixed UI. */
.crt-screen {
  --crt-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' viewBox='0 0 192 192'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23grain)' d='M0 0h192v192H0z'/%3E%3C/svg%3E");
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  pointer-events: none;
  user-select: none;
  overflow: hidden;
  contain: layout size style;
}
html[data-crt='on'] .crt-screen { display: block; }
/* A named transition snapshot isolates backdrop sampling. Name only the painted
   glass, not the parent of the optical filters, so they can see the page. */
body > .crt-screen > .crt-glass { view-transition-name: crt-glass; }
.crt-filter-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
/* Keep dialog glass in the same coordinate space before, during and after a
   transform. Otherwise a fixed child jumps back to the viewport on settlement,
   repainting the dimmed background with a second warm wash and vignette. */
dialog:has(> .crt-screen) { contain: layout; }
.crt-screen > span { display: block; position: absolute; inset: 0; pointer-events: none; }
/* Physically bounded focus strips. A full-screen masked backdrop blur can
   soften the whole native dialog in Chromium even where its mask is clear.
   Four narrow sampling boxes cannot reach the reading area, mask or no mask. */
.crt-screen > .crt-edge {
  inset: auto;
  -webkit-backdrop-filter: blur(1.15px);
  backdrop-filter: blur(1.15px);
}
.crt-screen > .crt-edge-top { top: 0; left: 0; right: 0; height: 12px; mask-image: linear-gradient(#000, transparent); }
.crt-screen > .crt-edge-right { top: 12px; bottom: 12px; right: 0; width: 12px; mask-image: linear-gradient(to left, #000, transparent); }
.crt-screen > .crt-edge-bottom { bottom: 0; left: 0; right: 0; height: 12px; mask-image: linear-gradient(to top, #000, transparent); }
.crt-screen > .crt-edge-left { top: 12px; bottom: 12px; left: 0; width: 12px; mask-image: linear-gradient(to right, #000, transparent); }
@media (max-width: 600px) {
  .crt-screen > .crt-edge { -webkit-backdrop-filter: blur(.8px); backdrop-filter: blur(.8px); }
}
/* A slow camera-style refresh roll, not a literal 50/60 Hz screen flash.
   The feathered band enters and leaves entirely outside the clipped screen. */
.crt-screen::after {
  content: '';
  position: absolute;
  top: -24%;
  left: 0;
  right: 0;
  height: 24%;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgb(255 225 185 / 0) 0%, rgb(255 225 185 / .004) 12%,
    rgb(255 225 185 / .006) 26%, rgb(255 225 185 / .013) 40%,
    rgb(255 225 185 / .018) 50%, rgb(255 225 185 / .013) 60%,
    rgb(255 225 185 / .006) 74%, rgb(255 225 185 / .004) 88%,
    rgb(255 225 185 / 0) 100%);
  animation: crt-refresh-roll 8s linear infinite;
}
/* Refract only the pixels under the travelling band. Unsupported SVG backdrop
   filters keep the existing glow; no duplicated page or full-screen warping. */
@supports ((backdrop-filter: url("#crt-ripple")) or (-webkit-backdrop-filter: url("#crt-ripple"))) {
  .crt-screen::after {
    -webkit-backdrop-filter: url("#crt-roll");
    backdrop-filter: url("#crt-roll");
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 35% 65%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 35% 65%, transparent);
  }
  @media (max-width: 600px) {
    .crt-screen::after {
      -webkit-backdrop-filter: url("#crt-roll-compact");
      backdrop-filter: url("#crt-roll-compact");
    }
  }
}
@media (prefers-contrast: more), (prefers-reduced-transparency: reduce) {
  .crt-screen > .crt-edge, .crt-screen::after { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.crt-raster {
  background:
    repeating-linear-gradient(0deg, transparent 0 2px, rgb(20 10 0 / .17) 2px 3px),
    repeating-linear-gradient(90deg, rgb(255 130 65 / .035) 0 1px, rgb(220 240 125 / .022) 1px 2px, rgb(100 155 255 / .018) 2px 3px);
}
.crt-screen > .crt-grain {
  inset: -6px;
  opacity: .075;
  filter: sepia(.65);
  background-image: var(--crt-noise);
  animation: crt-noise 640ms steps(1, end) infinite;
}
.crt-glass {
  background:
    linear-gradient(rgb(255 188 105 / .04), rgb(255 188 105 / .04)),
    radial-gradient(ellipse at 50% 46%,
      rgb(12 5 0 / 0) 0%, rgb(12 5 0 / .001) 20%,
      rgb(12 5 0 / .007) 40%, rgb(12 5 0 / .025) 55%,
      rgb(12 5 0 / .058) 68%, rgb(12 5 0 / .10) 78%,
      rgb(12 5 0 / .148) 86%, rgb(12 5 0 / .202) 93%,
      rgb(12 5 0 / .27) 100%);
}
/* Fine, stationary dithering sits above the glass, so it can soften colour
   bands even when motion is reduced. The warm wash stays spatially uniform. */
.crt-glass::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--crt-noise);
  opacity: .025;
  animation: none;
}
/* A faint, slow luminance flutter, not a full-screen flash or strobe. */
.crt-raster { animation: crt-flutter 4.8s linear infinite; }
html[data-crt='on'] body {
  text-shadow: .5px 0 rgb(255 160 85 / .26), -.35px 0 rgb(100 195 235 / .16);
}
html[data-crt-motion='paused'] .crt-screen > span,
html[data-crt-motion='paused'] .crt-screen::after { animation-play-state: paused; }
@keyframes crt-refresh-roll {
  from { transform: translateY(0); }
  to { transform: translateY(520%); }
}
@keyframes crt-noise {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-3px, 2px); }
  40% { transform: translate(2px, -3px); }
  60% { transform: translate(-2px, -1px); }
  80% { transform: translate(3px, 3px); }
}
@keyframes crt-flutter {
  0%, 100% { opacity: .92; }
  17% { opacity: .78; }
  23% { opacity: .96; }
  48% { opacity: .84; }
  53% { opacity: 1; }
  76% { opacity: .86; }
}
::view-transition-old(crt-glass) { display: none; }
::view-transition-new(crt-glass) { animation: none; mix-blend-mode: normal; }
@media (prefers-reduced-motion: reduce) {
  .crt-screen > span { animation: none !important; }
  .crt-screen::after { display: none; animation: none !important; }
}
@media (forced-colors: active) {
  .crt-screen { display: none !important; }
  html[data-crt='on'] body { text-shadow: none; }
}
@media print {
  .crt-screen { display: none !important; }
  html[data-crt='on'] body { text-shadow: none; }
}