/* =========================================================
   07 · Stage 4: Arcade de 1992 (#p-arcade)
   Fondo: placa de circuito con chispazos (scene-circuit.svg).
   El tubo CRT tiene tres canales con fotos pixeladas de la máquina.
   ========================================================= */

.stage--circuit { background: #05140c; }

.crt {
  display: grid;
  justify-items: center;
  gap: 26px;
}
.crt__tube {
  position: relative;
  width: min(100%, 400px);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 28px / 34px;
  background: #000;
  box-shadow: 0 0 0 14px #1a1226, 0 0 0 18px var(--ink), 18px 18px 0 18px rgb(0 0 0 / .5);
}
.crt__ch {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
  visibility: hidden;
}
.crt__ch.is-on { visibility: visible; }
html:not(.js) .crt__ch:first-child { visibility: visible; }
.crt__tube::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    repeating-linear-gradient(180deg, rgb(0 0 0 / .28) 0 1px, transparent 1px 3px),
    radial-gradient(90% 80% at 50% 50%, transparent 55%, rgb(0 0 0 / .6));
  pointer-events: none;
}
.crt__static {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    repeating-linear-gradient(0deg, rgb(255 255 255 / .55) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgb(0 0 0 / .6) 0 2px, rgb(255 255 255 / .25) 2px 3px, transparent 3px 5px),
    #55556a;
  opacity: 0;
}
.crt__flash { position: absolute; inset: 0; z-index: 2; background: #f4f7ff; opacity: 0; }
.crt__osd {
  position: absolute;
  top: 18px;
  left: 20px;
  z-index: 4;
  color: var(--lime);
  font: 700 var(--px-2xs)/1 var(--f-pixel);
  text-shadow: 2px 2px 0 var(--ink);
}

/* Selector de canal como los botones de una tele antigua */
.crt__channels { display: flex; gap: 8px; }
.crt__btn {
  min-height: 40px;
  padding: 0 12px;
  border: 3px solid var(--ink);
  background: #1a1226;
  color: var(--text-muted);
  font: 700 var(--px-xs)/1 var(--f-pixel);
  cursor: pointer;
  box-shadow: 0 4px 0 var(--ink);
  transition: transform var(--dur-press) steps(2), background-color var(--dur-hover) steps(2);
}
.crt__btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.crt__btn[aria-pressed="true"] { background: var(--lime); color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .crt__btn[aria-pressed="false"]:hover { color: var(--text); }
}

@media (max-width: 560px) {
  .crt__tube { width: min(100%, 300px); }
}