/* Picture stations. The cabinet, controls and pause UI never enter this signal path. */
.crt-filter-defs { position: absolute; overflow: hidden; pointer-events: none; }
#dial-crt .dial-grip { transform: rotate(var(--picture-angle, 34deg)); }
.screen-signal,
.screen-content {
  position: absolute;
  inset: 0;
  isolation: isolate;
}

.analog-layer,
.analog-layer > span {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.analog-layer {
  display: none;
  z-index: 6;
  overflow: hidden;
  border-radius: inherit;
}

.analog-grain,
.analog-tracking {
  display: none;
}

/* 0: a clean source. 1 retains the original scanlines and glass treatment. */
.television[data-crt="0"] .crt-layer {
  display: none;
}

.television:is([data-crt="2"], [data-crt="3"], [data-crt="4"]) .analog-layer {
  display: block;
}

/* 2 / Sunroom: warm phosphor, soft highlight spill, slightly deeper corners. */
.television[data-crt="2"] .screen-signal {
  filter: url(#crt-bloom) brightness(1.045) contrast(1.065) saturate(1.12) sepia(.075);
}

.television[data-crt="2"] .analog-layer {
  background:
    radial-gradient(ellipse at 48% 42%, #ffda9c08, transparent 66%),
    radial-gradient(ellipse at center, transparent 44%, #2810032e 100%);
}

/* 3 / Afterimage: a cool, breathing picture with a very faint delayed signal. */
.television[data-crt="3"] .screen-signal {
  filter: url(#crt-ghost);
}

/* Keep URL filters off the animated element: they make interpolation discrete. */
.television[data-crt="3"] .screen-content {
  filter: brightness(1.035) contrast(1.045) saturate(.94) hue-rotate(-5deg);
  animation: crt-signal-drift 24s ease-in-out infinite;
}

.television[data-crt="3"] .analog-layer {
  background:
    linear-gradient(112deg, #aacbff0c, transparent 46%, #82e9d609),
    radial-gradient(ellipse at 51% 46%, transparent 39%, #111e352b 100%);
}

@keyframes crt-signal-drift {
  0%, 100% {
    filter: brightness(1.035) contrast(1.045) saturate(.94) hue-rotate(-5deg);
  }
  31% {
    filter: brightness(1.07) contrast(1.025) saturate(1.015) hue-rotate(2deg);
  }
  67% {
    filter: brightness(1.025) contrast(1.075) saturate(.88) hue-rotate(-12deg);
  }
}

/* 4 / Late Tape: softened chroma, a gentle horizontal weave, tracking and snow. */
.television[data-crt="4"] .screen-signal {
  filter: url(#crt-tape) brightness(1.035) contrast(1.055) saturate(.77) sepia(.045);
  transform: scaleX(1.003);
  animation: crt-tape-weave 14s ease-in-out infinite;
}

.television[data-crt="4"] .analog-layer {
  background:
    linear-gradient(0deg, #e4d9c912, transparent 7%, transparent 95%, #25252416),
    radial-gradient(ellipse at center, transparent 43%, #100f1d38);
}

.television[data-crt="4"] .analog-grain {
  display: block;
  opacity: .095;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='144' height='144'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch' seed='17'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' d='M0 0h144v144H0z'/%3E%3C/svg%3E");
  background-size: 144px 144px;
  animation: crt-tape-grain 1s steps(1, end) infinite;
}

.television[data-crt="4"] .analog-tracking {
  display: block;
  top: -18%;
  bottom: auto;
  height: 16%;
  opacity: .2;
  background: linear-gradient(0deg,
    transparent 0%, #00000010 28%, #eee5cf32 43%,
    #f5edda52 47%, #14131d24 50%, #f5edda18 54%, transparent 100%);
  animation: crt-tape-tracking 8.5s linear -2.7s infinite;
}

@keyframes crt-tape-weave {
  0%, 100% { transform: scaleX(1.003) translateX(0); }
  16% { transform: scaleX(1.003) translateX(-.055%); }
  34% { transform: scaleX(1.003) translateX(.04%); }
  53% { transform: scaleX(1.003) translateX(-.025%); }
  76% { transform: scaleX(1.003) translateX(.06%); }
  89% { transform: scaleX(1.003) translateX(-.035%); }
}

/* A small, cached noise tile changes position four times per second. */
@keyframes crt-tape-grain {
  0%, 100% { background-position: 0 0; }
  25% { background-position: 43px -29px; }
  50% { background-position: -31px 67px; }
  75% { background-position: 79px 31px; }
}

@keyframes crt-tape-tracking {
  from { transform: translateY(0); }
  to { transform: translateY(850%); }
}

/* Freeze the current picture treatment while the game is suspended. */
.television.signal-paused .screen-signal,
.television.signal-paused .screen-content,
.television.signal-paused .analog-layer > span {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .television[data-crt] .screen-signal,
  .television[data-crt] .screen-content,
  .television[data-crt] .analog-layer > span {
    animation: none;
    transform: none;
  }

  .television[data-crt="4"] .analog-tracking {
    top: 72%;
    opacity: .12;
  }
}

@media (forced-colors: active) {
  .television[data-crt] .screen-signal,
  .television[data-crt] .screen-content {
    filter: none;
    animation: none;
    transform: none;
  }

  .television[data-crt] .crt-layer,
  .television[data-crt] .analog-layer {
    display: none;
  }
}