:root {
  color-scheme: dark;
  --ivory: #efe3c6;
  --amber: #ffb347;
  font-family: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: #0d0907; color: var(--ivory); }
body { min-height: 100svh; overflow-x: hidden; }

.room { position: fixed; inset: 0; margin: 0; }

.stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, #2a2a1a 0, #15120b 70%, #0b0906 100%);
}


.scene {
  position: absolute;
  left: 0;
  top: 0;
  width: 2700px;
  height: 1500px;
  transform-origin: 0 0;
  visibility: hidden;
}
.scene.ready { visibility: visible; }

.scene > * { position: absolute; left: 0; top: 0; transform-origin: 0 0; }

.scene-img { width: 2700px; height: 1500px; z-index: 2; pointer-events: none; user-select: none; }

.vignette {
  width: 2700px;
  height: 1500px;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(ellipse 75% 80% at 45% 45%, #0000 55%, #0008 100%);
}

/* ---------- TV screen (mapped onto the rendered screen with matrix3d) ---------- */

.screen {
  width: 800px;
  height: 600px;
  overflow: hidden;
  background: #0a0d0c;
  z-index: 1;
  cursor: pointer;
}

.video-wrap {
  position: absolute;
  top: -14%;
  left: 50%;
  height: 128%;
  aspect-ratio: 16 / 9;
  transform: translateX(-50%);
}
.video-wrap.reveal { animation: reveal .42s cubic-bezier(.2, .7, .2, 1); }
@keyframes reveal {
  0% { transform: translateX(-50%) translateY(-12%) scaleY(1.06); filter: brightness(2.4) contrast(.6) saturate(0); }
  35% { transform: translateX(-50%) translateY(4%); filter: brightness(1.4) contrast(1.1) saturate(.6); }
  100% { transform: translateX(-50%); filter: none; }
}

.player, .player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }

.static { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; z-index: 2; pointer-events: none; }
.static.on { opacity: 1; }

.osd { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; opacity: 0; transition: opacity .3s; pointer-events: none; }
.osd.show { opacity: 1; transition: none; }

.glass {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(150deg, #ffffff26 0%, #ffffff0a 25%, #0000 42%),
    radial-gradient(ellipse 70% 68% at 50% 50%, #0000 50%, #000b 100%);
  box-shadow: inset 0 0 70px #000d;
}

/* ---------- Channel display, globe, pin tag ---------- */

.display { width: 240px; height: 110px; z-index: 1; }
.globe-tag { z-index: 4; pointer-events: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.globe { z-index: 1; border-radius: 50%; }

/* ---------- Knobs (invisible hit areas over the rendered knobs) ---------- */

.knob-hit {
  z-index: 5;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: box-shadow .2s;
}
.knob-hit:hover { box-shadow: 0 0 0 4px #ffe2a860, 0 0 30px #ffc46a70; }
.knob-hit:focus-visible { outline: 6px solid var(--amber); outline-offset: 6px; }
.knob-hit.flash { animation: knob-flash .35s ease-out; }
@keyframes knob-flash { 30% { box-shadow: 0 0 0 8px #ffe2a8a0, 0 0 60px #ffb347; } }
#sound[aria-pressed="true"] { box-shadow: 0 0 0 4px #ffb34790, 0 0 28px #ff8a0080; }

/* ---------- Hint line ---------- */


@media (max-width: 700px) {
  }

@media (prefers-reduced-motion: reduce) {
  .video-wrap.reveal, .knob-hit.flash { animation: none; }
}