/*
 * Effects belong to the live iframe screen only. Both layers are inert;
 * the screen, windows, and pointer coordinate system are never transformed.
 * All phosphor / scanline treatments are static, including in reduced motion.
 */
html[data-screen-effect="crt"] .screen,
html[data-screen-effect="soft"] .screen {
  --screen-glass-glow: rgba(255, 255, 235, .24);
}
html[data-screen-effect="crt"] .screen {
  text-shadow: -.22px 0 rgba(91, 242, 175, .34), .22px 0 rgba(238, 110, 188, .24), 0 0 2.5px rgba(91, 184, 132, .28);
}
html[data-screen-effect="crt"] .screen::before,
html[data-screen-effect="crt"] .screen::after,
html[data-screen-effect="soft"] .screen::before,
html[data-screen-effect="soft"] .screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10000;
  display: block;
  border-radius: inherit;
  pointer-events: none;
  user-select: none;
}
/* Fine horizontal phosphor rows and a restrained RGB aperture grille. */
html[data-screen-effect="crt"] .screen::before {
  background:
    repeating-linear-gradient(to bottom, transparent 0 2px, rgba(22, 45, 35, .13) 2px 3px),
    repeating-linear-gradient(to right, rgba(255, 108, 83, .025) 0 1px, rgba(102, 235, 163, .026) 1px 2px, rgba(109, 137, 255, .026) 2px 3px);
}
/* The vignette, curved highlight, and inner rim suggest gently bowed glass. */
html[data-screen-effect="crt"] .screen::after {
  z-index: 10001;
  background:
    radial-gradient(ellipse at 50% 48%, transparent 48%, rgba(22, 34, 27, .055) 76%, rgba(17, 27, 21, .23) 100%),
    radial-gradient(ellipse 100% 68% at 50% -8%, var(--screen-glass-glow) 0, rgba(255, 255, 235, .055) 38%, transparent 64%),
    linear-gradient(118deg, rgba(255, 255, 245, .11), transparent 26%, transparent 78%, rgba(230, 247, 231, .025));
  box-shadow:
    inset 0 0 30px 7px rgba(23, 42, 33, .14),
    inset 0 0 2px 1px rgba(255, 255, 239, .28);
}
html[data-screen-effect="soft"] .screen {
  text-shadow: 0 0 1.5px rgba(183, 123, 62, .1);
}
html[data-screen-effect="soft"] .screen::before {
  background: rgba(255, 223, 165, .085);
}
html[data-screen-effect="soft"] .screen::after {
  z-index: 10001;
  background:
    radial-gradient(ellipse at 50% 43%, transparent 58%, rgba(166, 119, 65, .085) 100%),
    radial-gradient(ellipse at 38% 0, rgba(255, 249, 220, .13), transparent 75%);
  box-shadow: inset 0 0 24px rgba(198, 158, 96, .055);
}
/* Preserve the rounded CRT aperture's corner controls even with a clean effect. */
@media (min-width: 701px) {
  html[data-computer-model="retro"] .menu-bar,
  html[data-screen-effect="crt"] .menu-bar {
    padding-left: 28px;
    padding-right: 28px;
  }
}
@media (max-width: 700px) {
  html[data-computer-model="retro"] .menu-bar,
  html[data-screen-effect="crt"] .menu-bar {
    padding-left: 14px;
    padding-right: 14px;
  }
}
body.reduce-motion .screen::before,
body.reduce-motion .screen::after {
  animation: none !important;
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .screen::before, .screen::after {
    animation: none !important;
    transition: none !important;
  }
}