/* The game is an image emitted by the tube. These rules only establish its
   physical layer and controls; the fixed 192×144 canvas owns every label. */
.crt__screen[data-runner-ready] {
  isolation: isolate;
}

.crt__screen[data-runner-ready] .crt__picture {
  display: block;
}

.crt__screen[data-runner-ready] .tv-runner__canvas {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  display: block;
  width: auto;
  height: 100%;
  aspect-ratio: 4 / 3;
  max-width: 100%;
  max-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
}

/* The old signal layers remain above the pixels, which lets the runner share
   the screen's real collapse, static and scanlines instead of faking a second
   display. The canvas must still beat the opaque glow below it. */
.crt__screen[data-runner-ready] .crt__glow { z-index: 0; }
.crt__screen[data-runner-ready] .crt__static,
.crt__screen[data-runner-ready] .crt__scanlines { z-index: 2; pointer-events: none; }
.crt__screen[data-runner-ready] .crt__scanlines { opacity: .28; }

.crt__screen[data-runner-ready] .tv-runner__action,
.crt__screen[data-runner-ready] .tv-runner__pause {
  position: absolute;
  z-index: 4;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

/* A whole-glass hit area lets the mechanics recognize a tap without stealing
   vertical scrolling: the controller only prevents a completed tap. */
.crt__screen[data-runner-ready] .tv-runner__action {
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  touch-action: pan-y;
}

.crt__screen[data-runner-ready] .tv-runner__pause {
  top: auto;
  right: 10px;
  bottom: 3px;
  width: 24px;
  height: 24px;
  padding: 5px;
  cursor: pointer;
  opacity: .75;
}

.crt__screen[data-runner-ready] .tv-runner__pause svg {
  display: block;
  width: 14px;
  height: 14px;
  fill: #302f29;
  filter: drop-shadow(0 1px 0 rgba(247, 242, 230, .8));
}

.tv-runner__pause-play { display: none; }
.crt__screen[data-runner-state="paused"] .tv-runner__pause-play { display: block; }
.crt__screen[data-runner-state="paused"] .tv-runner__pause-bars { display: none; }

@media (hover: hover) and (pointer: fine) {
  .crt__screen[data-runner-ready] .tv-runner__pause:hover { opacity: 1; }
}

/* A darkening tube can suspend the game without removing its rendered frame;
   during that interval its controls must not remain a live target. */
.crt__screen[data-runner-ready][data-runner-available="false"] .tv-runner__action,
.crt__screen[data-runner-ready][data-runner-available="false"] .tv-runner__pause {
  visibility: hidden;
  pointer-events: none;
}

.crt__screen[data-runner-ready] .tv-runner__action:focus-visible,
.crt__screen[data-runner-ready] .tv-runner__pause:focus-visible {
  outline: 2px solid #302f29;
  outline-offset: -3px;
}

.crt__screen[data-runner-ready] .tv-runner__pause:focus-visible {
  outline-offset: 1px;
  border-radius: 50%;
}

.tv-runner__status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .crt__screen[data-runner-ready] .tv-runner__canvas {
    /* Rendering stays active for the essential jump; CSS itself has no motion. */
    image-rendering: pixelated;
  }
}