/* =========================================================
   05 · Stage 2: Apps publicadas (#p-apps)
   Monitor con cinco canales: Balloons, Arkanoid y MarioScript
   incrustadas en vivo, y capturas de GymWeb y FairDraw.
   ========================================================= */

.stage--city { background: #0a0820; }

.monitor__tabs { flex-wrap: wrap; }

/* Apps en vivo */
.monitor__panel--live { padding: 0; background: #fff; }
.monitor__frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #fff;
}
.monitor__panel--game,
.monitor__panel--game .monitor__frame { background: #000; }
.monitor__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 16px;
  padding: 20px;
  background: #050310;
  color: var(--text);
  text-align: center;
}
.monitor__fallback[hidden] { display: none; }

/* Capturas */
.monitor__panel:has(.monitor__shot) { padding: 0; background: #050310; }
.monitor__shot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0 0;
}
.monitor__panel--contain .monitor__shot { object-fit: contain; object-position: 50% 50%; }

/* Ruido de cambio de canal */
.monitor__static {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    repeating-linear-gradient(0deg, rgb(255 255 255 / .5) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgb(0 0 0 / .6) 0 2px, rgb(255 255 255 / .2) 2px 3px, transparent 3px 5px),
    #4a4a5a;
  opacity: 0;
  pointer-events: none;
}

.monitor__foot {
  display: flex;
  justify-content: flex-end;
  min-height: 22px;
  margin: 10px 0 0;
}
.monitor__open {
  color: var(--gold);
  font: 700 var(--px-2xs)/1.4 var(--f-pixel);
  text-transform: uppercase;
  text-underline-offset: .3em;
}
.monitor__open[hidden] { display: none; }