/* Static CRT screen effect — scanlines, vignette, phosphor slot mask. No
   animation so it costs nothing to keep on screen.

   Two variants:
   - .crt-overlay  fixed full-viewport overlay (game pages, arcade index)
   - .crt-screen   scopes the effect to a positioned element (the home arcade
                   button). Wrap visible content in a child element so it
                   stacks above the ::after layer — see .crt-screen > * below. */

.crt-overlay,
.crt-screen::after {
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.55) 100%),
    repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.04) 0,
      rgba(255, 255, 255, 0.04) 2px,
      rgba(0, 0, 0, 0.35) 2px,
      rgba(0, 0, 0, 0.35) 3px
    );
}

.crt-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

/* :where() drops the fallback position to zero specificity so a host that
   already sets position: fixed/absolute (e.g. .arcade-launcher) keeps it. */
:where(.crt-screen) {
  position: relative;
}

.crt-screen {
  overflow: hidden;
}

.crt-screen::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Child elements inside a .crt-screen need to stack above the ::after layer. */
.crt-screen > * {
  position: relative;
  z-index: 1;
}