.crt-set {
  position: relative;
  background: linear-gradient(160deg, var(--color-bezel-edge), var(--color-bezel) 40%, var(--color-bezel-edge));
  border-radius: var(--radius-set);
  padding: var(--space-md);
  box-shadow: var(--shadow-set);
}

.crt-set::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-set);
  background: radial-gradient(120% 100% at 50% 0%, oklch(100% 0 0 / 0.06), transparent 60%);
  pointer-events: none;
}

.crt-screen {
  position: relative;
  border-radius: var(--radius-screen);
  overflow: hidden;
  background: var(--color-bg-inset);
  box-shadow: inset 0 0 0 2px oklch(0% 0 0 / 0.5), inset 0 30px 60px oklch(0% 0 0 / 0.55);
}

.crt-screen__scanlines {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    oklch(0% 0 0 / 0.18) 0px,
    oklch(0% 0 0 / 0.18) 1px,
    transparent 2px,
    transparent 3px
  );
  mix-blend-mode: multiply;
  opacity: 0.5;
}

.crt-screen__vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(120% 100% at 50% 45%, transparent 55%, oklch(0% 0 0 / 0.55) 100%);
}

.crt-screen__flicker {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: oklch(100% 0 0 / 0.02);
  animation: crt-flicker 6s steps(60) infinite;
}

@keyframes crt-flicker {
  0%, 92%, 100% { opacity: 0; }
  93% { opacity: 0.35; }
  94% { opacity: 0.05; }
  96% { opacity: 0.22; }
  97% { opacity: 0; }
}

.crt-osd {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  z-index: 3;
  font-family: var(--font-display);
  font-size: var(--text-osd);
  line-height: 1;
  color: var(--color-amber);
  text-shadow: var(--glow-amber);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}

.crt-osd.is-visible {
  animation: crt-osd-flash 2.6s var(--ease-out-expo) forwards;
}

@keyframes crt-osd-flash {
  0% { opacity: 0; transform: translateY(-6px); }
  8% { opacity: 1; transform: translateY(0); }
  75% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(0); }
}

.crt-noise {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  transition: opacity var(--duration-slow) var(--ease-out-expo);
}

.crt-noise.is-active {
  opacity: 0.85;
}

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

  .crt-osd.is-visible {
    animation: none;
    opacity: 1;
  }
}