/*
  Kadabra Games media-room polish pass
  One visual language: dark walnut, charcoal Bakelite, oxidized brass,
  aged ivory plastic, amber indicators, real hardware depth.
*/

:root {
  --studio-walnut-0: #0c0705;
  --studio-walnut-1: #1a0d08;
  --studio-walnut-2: #32180e;
  --studio-walnut-3: #5a301a;
  --studio-walnut-4: #7c4a29;
  --studio-bakelite-0: #050505;
  --studio-bakelite-1: #0d0d0c;
  --studio-bakelite-2: #1b1a18;
  --studio-bakelite-3: #2b2925;
  --studio-brass-0: #59451f;
  --studio-brass-1: #a17b32;
  --studio-brass-2: #d4ae55;
  --studio-brass-3: #f0d37e;
  --studio-ivory-0: #625e51;
  --studio-ivory-1: #97917f;
  --studio-ivory-2: #c8c0aa;
  --studio-ivory-3: #e0d7bd;
  --studio-amber: #f0b94f;
  --studio-green: #8ccf86;
  --studio-red: #c04c35;
  --studio-shadow: rgba(0, 0, 0, .74);
  --studio-edge: rgba(244, 213, 139, .22);
  --studio-label: #d7c49a;
  --studio-muted: #8d8068;
  --studio-ui: "Arial Narrow", "Roboto Condensed", "Franklin Gothic Medium", Arial, sans-serif;
  --studio-mono: "Courier New", Courier, monospace;
}

/* ---------- Room, lighting, and focus layers ---------- */
html {
  background: #050302;
  scrollbar-color: #67502a #090604;
}

body {
  background:
    radial-gradient(ellipse at 49% 15%, rgba(207, 138, 59, .14), transparent 35%),
    radial-gradient(ellipse at 18% 59%, rgba(109, 63, 27, .09), transparent 32%),
    radial-gradient(ellipse at 86% 54%, rgba(48, 80, 68, .07), transparent 29%),
    linear-gradient(180deg, #080504 0 62%, #050302 62% 100%);
  text-rendering: optimizeLegibility;
}

body::before {
  background:
    linear-gradient(90deg, rgba(0,0,0,.7), transparent 7% 93%, rgba(0,0,0,.72)),
    repeating-linear-gradient(90deg, transparent 0 109px, rgba(0,0,0,.58) 110px 113px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 5px),
    linear-gradient(90deg, #100805, #28130a 48%, #100805);
  box-shadow:
    inset 0 -45px 90px rgba(0,0,0,.9),
    inset 0 1px rgba(201,142,76,.09);
}

body::after {
  background:
    repeating-linear-gradient(88deg, rgba(255,255,255,.018) 0 1px, transparent 1px 7px),
    radial-gradient(ellipse at center top, rgba(89,54,31,.34), transparent 67%),
    linear-gradient(#100b08, #050403 75%);
}

/* This is the exact fix for the lower-page translucent rectangle.
   In PC focus mode, the room shade is a full-screen vignette, not the floor pseudo-element. */
body.pc-focus-mode::after {
  inset: 0 !important;
  z-index: 2050 !important;
  background:
    radial-gradient(ellipse at 50% 47%, rgba(13,9,7,.2) 0 24%, rgba(4,3,2,.76) 71%, rgba(0,0,0,.94) 100%) !important;
  transform: none !important;
  transform-origin: center !important;
  backdrop-filter: blur(2px) saturate(.72);
}

body.pc-focus-mode::before {
  filter: brightness(.48) saturate(.7);
}

.archive-shell {
  position: relative;
  isolation: isolate;
}

.archive-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 23% 30%, rgba(243,191,112,.035), transparent 17%),
    radial-gradient(circle at 76% 37%, rgba(243,191,112,.028), transparent 15%),
    linear-gradient(90deg, rgba(0,0,0,.45), transparent 10% 90%, rgba(0,0,0,.47));
}

.room-atmosphere {
  mix-blend-mode: screen;
  opacity: .72;
}

/* ---------- Header and global controls ---------- */
.site-header {
  min-height: 58px;
  padding: 8px 13px;
  border: 1px solid rgba(191,150,67,.32);
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(33,27,21,.96), rgba(9,8,7,.96)),
    repeating-linear-gradient(90deg, transparent 0 30px, rgba(255,255,255,.01) 31px);
  box-shadow:
    inset 0 1px rgba(255,255,255,.05),
    inset 0 -1px rgba(0,0,0,.9),
    0 11px 30px rgba(0,0,0,.45);
}

.site-header::before,
.site-header::after {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(#9a7740, #312513 60%, #8d6c37);
  opacity: .55;
}
.site-header::before { left: 4px; }
.site-header::after { right: 4px; }

.archive-brand img {
  width: 38px;
  height: 38px;
  padding: 4px;
  border: 1px solid rgba(220,177,84,.5);
  border-radius: 8px;
  background: radial-gradient(circle at 34% 25%, #29231b, #080706 76%);
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 2px 4px #000;
}

.archive-brand strong {
  color: #e3d9c6;
  font-size: 14px;
  letter-spacing: .15em;
  text-shadow: 0 1px #000;
}

.archive-brand em {
  color: #aa9670;
  letter-spacing: .2em;
}

.utility-nav a,
.utility-button {
  position: relative;
  min-height: 32px;
  padding: 7px 11px;
  border: 1px solid #44371e;
  border-radius: 4px;
  background: linear-gradient(#211e19, #0c0b09 68%, #070706);
  color: #a89b82;
  box-shadow: inset 0 1px rgba(255,255,255,.055), 0 2px 3px rgba(0,0,0,.55);
  text-shadow: 0 1px #000;
}

.utility-nav a:hover,
.utility-button:hover,
.utility-button[aria-pressed="true"] {
  border-color: #9b7733;
  background: linear-gradient(#2b251b, #12100d 70%);
  color: #ead9b1;
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 0 11px rgba(224,184,76,.12);
}

.utility-button:active,
.utility-nav a:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px #000;
}

:focus-visible {
  outline: 2px solid #f3cf72;
  outline-offset: 3px;
}

/* ---------- Unified machine staging ---------- */
.expanded-room {
  padding-top: 56px;
  perspective: 1700px;
}

.computer-station,
.tv-set,
.side-tv-set,
.tape-library,
.room-gadget-shelf,
.room-signal-console {
  --hardware-highlight: rgba(255,255,255,.08);
}

.console-column::after,
.computer-station::after,
.side-tv-station::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -12px;
  height: 22px;
  z-index: -1;
  border-radius: 50%;
  background: rgba(0,0,0,.62);
  filter: blur(11px);
  pointer-events: none;
}

/* ---------- Main KCV television ---------- */
.tv-set {
  filter: drop-shadow(0 33px 32px rgba(0,0,0,.75));
}

.tv-cabinet {
  border: 2px solid #160b06;
  border-radius: 18px 18px 13px 13px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.055), transparent 3% 95%, rgba(0,0,0,.25)),
    repeating-linear-gradient(2deg, rgba(255,255,255,.016) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(92deg, #291208 0 7px, #3d1d0e 8px 13px, #1c0d07 14px 21px),
    linear-gradient(115deg, #5c2e17, #251108 67%, #160b07);
  box-shadow:
    inset 4px 4px 0 rgba(130,74,36,.42),
    inset -7px -8px 17px rgba(0,0,0,.72),
    inset 0 0 0 3px rgba(5,3,2,.48),
    0 4px 0 #090503,
    0 22px 42px rgba(0,0,0,.48);
}

.tv-cabinet::before {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: 0;
  border: 1px solid rgba(191,125,63,.18);
  border-radius: 12px;
  pointer-events: none;
}

.main-tv-top-badge {
  top: 8px;
  padding: 3px 15px;
  border: 1px solid #271a0d;
  border-radius: 2px;
  background: linear-gradient(#c3a56d, #6f512c 55%, #4f371e);
  color: #1a1209;
  box-shadow: inset 0 1px rgba(255,255,255,.38), 0 2px 4px rgba(0,0,0,.7);
  font-size: 7px;
  letter-spacing: .18em;
}

.tv-face {
  position: relative;
  z-index: 1;
}

.screen-bezel {
  border: 2px solid #070605;
  background:
    linear-gradient(135deg, #292824 0 7%, #0a0a09 31% 72%, #34322d),
    #0b0a09;
  box-shadow:
    inset 8px 8px 14px #000,
    inset -4px -4px 9px rgba(105,96,79,.2),
    0 1px rgba(255,255,255,.12),
    0 0 0 2px #21180f;
}

.crt-screen {
  border-color: #030403;
  background: #010302;
  box-shadow:
    inset 0 0 48px 16px #000,
    inset 0 0 0 2px rgba(91,111,91,.14),
    0 0 0 1px #5b5447,
    0 0 18px rgba(104,151,112,.07);
}

.crt-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 95;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 48% 46%, transparent 42%, rgba(0,0,0,.23) 72%, rgba(0,0,0,.67) 100%),
    linear-gradient(117deg, rgba(255,255,255,.07), transparent 17% 76%, rgba(255,255,255,.015));
  mix-blend-mode: screen;
}

.tv-control-panel {
  border-left: 1px solid rgba(0,0,0,.72);
  background:
    radial-gradient(circle at 55% 5%, rgba(255,255,255,.05), transparent 22%),
    repeating-linear-gradient(90deg, transparent 0 5px, rgba(255,255,255,.012) 6px),
    linear-gradient(105deg, #22211f, #0b0b0a 72%);
  box-shadow: inset 2px 0 rgba(255,255,255,.035), inset 7px 0 13px rgba(0,0,0,.35);
}

.tv-maker,
.side-tv-maker {
  color: #ad925e;
  text-shadow: 0 1px #000;
  letter-spacing: .13em;
}

.tv-maker span,
.side-tv-maker span {
  color: #756a55;
}

.tv-knob,
.channel-knob,
.side-knob {
  border-color: #050505;
  background:
    conic-gradient(from 16deg, #10100f, #4b4841, #111 28%, #5e5a50 48%, #151514 72%, #3c3933, #10100f),
    radial-gradient(circle, #383631, #0d0d0c 72%);
  box-shadow:
    inset 0 0 0 2px #131312,
    inset 0 0 8px rgba(255,255,255,.05),
    0 2px 1px #000,
    0 4px 8px rgba(0,0,0,.55);
}

.tv-knob:hover,
.channel-knob:hover,
.side-knob:hover {
  filter: brightness(1.18);
}

.tv-knob:active,
.channel-knob:active,
.side-knob:active {
  transform: translateY(1px) rotate(.5deg);
  box-shadow: inset 0 2px 5px #000;
}

.main-tv-service-controls {
  gap: 4px;
  padding: 5px;
  border: 1px solid #050505;
  border-radius: 3px;
  background: linear-gradient(#0b0b0a, #191816);
  box-shadow: inset 0 1px 3px #000, 0 1px rgba(255,255,255,.04);
}

.main-tv-service-controls button,
.side-tv-button-row button {
  border: 1px solid #050505;
  border-radius: 2px;
  background: linear-gradient(#31302d, #151514 62%, #0c0c0b);
  color: #9c927f;
  box-shadow: inset 0 1px rgba(255,255,255,.09), 0 2px 2px #000;
  text-shadow: 0 1px #000;
}

.main-tv-service-controls button:hover,
.side-tv-button-row button:hover {
  border-color: #6f5929;
  color: #e2c77f;
  background: linear-gradient(#39352c, #191712 68%);
}

.main-tv-service-controls button:active,
.side-tv-button-row button:active,
.side-tv-button-row button[aria-pressed="true"] {
  transform: translateY(1px);
  background: #0a0908;
  color: #f3c95f;
  box-shadow: inset 0 2px 4px #000;
}

.main-volume-readout,
.side-tv-label-strip,
.vcr-display,
.intercom-display {
  font-family: var(--studio-mono);
}

.main-volume-readout {
  border: 1px solid #080807;
  background: #050b06;
  color: #789471;
  box-shadow: inset 0 0 7px #000;
  text-shadow: 0 0 4px rgba(121,170,113,.5);
}

.speaker-grille,
.side-speaker,
.intercom-grille {
  background-color: #11110f;
  background-image:
    radial-gradient(circle, #050504 0 39%, transparent 43%),
    linear-gradient(135deg, rgba(255,255,255,.035), transparent 55%);
  background-size: 5px 5px, 100% 100%;
  box-shadow: inset 0 1px 6px #000, 0 1px rgba(255,255,255,.025);
}

.power-light,
.side-power-light,
.pc-power-led {
  border: 1px solid #050505;
}

body[data-tv-state="on"] .power-light,
.side-tv-set[data-side-power="on"] .side-power-light,
.computer-station[data-pc-power="on"] .pc-power-led {
  background: #bf4c2c;
  box-shadow: 0 0 6px rgba(230,87,42,.85), inset 0 1px rgba(255,255,255,.35);
}

/* ---------- VCR ---------- */
.vcr-unit {
  border: 2px solid #050505;
  border-radius: 7px 7px 4px 4px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 5% 91%, rgba(0,0,0,.35)),
    repeating-linear-gradient(90deg, transparent 0 27px, rgba(255,255,255,.009) 28px),
    linear-gradient(110deg, #292826, #10100f 61%, #070707);
  box-shadow:
    inset 0 1px rgba(255,255,255,.11),
    inset 0 -8px 12px rgba(0,0,0,.52),
    0 3px 0 #030303,
    0 16px 26px rgba(0,0,0,.62);
}

.vcr-unit::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(255,255,255,.025);
  pointer-events: none;
}

.vcr-brand {
  color: #b79a62;
  text-shadow: 0 1px #000;
}

.vcr-slot-bay {
  border-color: #020202;
  background: linear-gradient(#050505, #171716 47%, #050505 54%);
  box-shadow: inset 0 4px 8px #000, 0 1px rgba(255,255,255,.045);
}

.vcr-slot {
  border-color: #020202;
  background: linear-gradient(#080808, #020202 53%, #111 55%);
}

.vcr-slot.is-ready,
.vcr-slot.is-drag-over {
  border-color: #b28a3d;
  box-shadow: inset 0 0 10px rgba(240,185,79,.18), 0 0 12px rgba(240,185,79,.13);
}

.slot-label {
  color: #736b5e;
  letter-spacing: .16em;
}

.vcr-display {
  border-color: #020302;
  background:
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,.018) 2px 3px),
    #020803;
  color: #779b72;
  box-shadow: inset 0 0 11px #000, 0 1px rgba(255,255,255,.04);
  text-shadow: 0 0 5px rgba(104,167,101,.55);
}

.vcr-buttons {
  padding: 3px;
  border: 1px solid #060606;
  background: #0c0c0b;
  box-shadow: inset 0 1px 3px #000;
}

.vcr-button {
  border-color: #070707;
  background: linear-gradient(#333230, #171716 63%, #0b0b0a);
  color: #aaa194;
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 2px #000;
}

.vcr-button:hover:not(:disabled) {
  border-color: #6c5528;
  color: #f1d181;
  background: linear-gradient(#413a2c, #1b1813 68%);
}

.vcr-button.is-active,
.vcr-button:active:not(:disabled) {
  background: #090908;
  color: #efbc52;
  box-shadow: inset 0 3px 5px #000;
}

.instruction-plaque {
  border: 1px solid #473719;
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), transparent),
    #0c0a07;
  color: #756b5c;
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 3px 9px rgba(0,0,0,.44);
  letter-spacing: .15em;
}

/* ---------- KADABRA 95 hardware ---------- */
.computer-station {
  filter: drop-shadow(0 28px 28px rgba(0,0,0,.72));
}

.pc-monitor-ridge {
  border-color: #4a4030;
  background:
    repeating-linear-gradient(90deg, transparent 0 8px, rgba(68,59,45,.45) 9px 10px),
    linear-gradient(#c5bca3, #77705e);
  box-shadow: inset 0 1px rgba(255,255,255,.35), 0 2px 5px #000;
}

.pc-monitor-shell,
.pc-tower,
.pc-keyboard,
.pc-mouse {
  background-color: #a39a82;
  background-image:
    radial-gradient(circle at 18% 8%, rgba(255,255,255,.23), transparent 18%),
    repeating-linear-gradient(96deg, transparent 0 26px, rgba(55,48,36,.028) 27px 28px),
    linear-gradient(135deg, #ded5bb, #a69d84 57%, #746d5d);
  border-color: #514b3d;
  box-shadow:
    inset 2px 2px rgba(255,255,255,.5),
    inset -5px -6px 11px rgba(47,42,32,.3),
    0 7px 17px rgba(0,0,0,.42);
}

.pc-monitor-shell {
  border-radius: 25px 25px 13px 13px;
  box-shadow:
    inset 2px 2px rgba(255,255,255,.55),
    inset -6px -8px 15px rgba(48,43,33,.29),
    0 0 0 3px #756e5d,
    0 11px 24px rgba(0,0,0,.47);
}

.pc-monitor-shell::before,
.pc-tower::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(67,59,43,.14);
  border-radius: inherit;
  pointer-events: none;
}

.pc-screen-bezel {
  background: linear-gradient(135deg, #3b3b37, #101110 67%, #4a473f);
  box-shadow: inset 6px 6px 11px #080808, 1px 1px rgba(255,255,255,.33), 0 0 0 1px #756e5e;
}

.pc-screen {
  box-shadow:
    inset 0 0 39px 12px #000,
    0 0 0 1px #666b61,
    0 0 12px rgba(72,98,112,.09);
}

.pc-monitor-brand,
.machine-caption,
.pc-tower-logo {
  color: #5f5746;
  text-shadow: 0 1px rgba(255,255,255,.25);
}

.pc-monitor-controls {
  position: relative;
  margin-top: 2px;
  border-top: 1px solid rgba(77,68,52,.18);
}

.pc-round-button,
.pc-tower-switch {
  border-color: #4a4336;
  background: radial-gradient(circle at 34% 29%, #ded5ba, #928a74 64%, #514c40);
  box-shadow: inset 1px 1px rgba(255,255,255,.55), 0 2px 3px rgba(0,0,0,.42);
}

.pc-small-button,
.pc-drive {
  border-color: #554f41;
  background: linear-gradient(#c9c0a8, #8e8672 72%, #746c5c);
  color: #494337;
  box-shadow: inset 0 1px rgba(255,255,255,.45), 0 2px 2px rgba(0,0,0,.29);
}

.pc-small-button:hover,
.pc-drive:hover,
.pc-round-button:hover,
.pc-tower-switch:hover,
.corgi-sticker:hover {
  filter: brightness(1.12) saturate(1.05);
}

.pc-small-button:active,
.pc-drive:active,
.pc-round-button:active,
.pc-tower-switch:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(45,39,29,.65);
}

.pc-keyboard {
  padding: 6px 8px 10px;
  border-radius: 6px 6px 11px 11px;
}

.pc-key-row {
  gap: 2px;
  margin: 2px 0;
}

.pc-key-row button {
  min-width: 13px;
  height: 12px;
  border-color: #665e4c;
  background: linear-gradient(#e2dac0, #aba28b 72%);
  color: #4b463a;
  box-shadow: inset 0 1px rgba(255,255,255,.55), 0 1px #514a3d;
}

.pc-key-row button:hover,
.pc-key-row button:focus-visible {
  background: linear-gradient(#f0e8cf, #bcb29a);
  color: #1f1c17;
}

.pc-number-row button:last-child,
.pc-key-row button[data-pc-key="Enter"] {
  min-width: 20px;
  color: #3b3327;
  background: linear-gradient(#d9cba7, #9c8e6e);
}

.pc-mouse {
  border-radius: 52% 52% 45% 45%;
}

.corgi-sticker {
  border: 1px solid rgba(65,39,19,.38);
  background: #bf8a54;
  box-shadow: 0 1px rgba(255,255,255,.2), 0 2px 4px rgba(0,0,0,.28);
}

/* The operating system stays recognizably mid-90s, but receives a crisper CRT presentation. */
.pc-desktop {
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.013) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 74% 23%, rgba(255,255,255,.06), transparent 31%);
}

.pc-icon {
  border-radius: 1px;
}

.pc-icon:hover,
.pc-icon:focus-visible,
.pc-icon.is-selected {
  border-color: rgba(255,255,255,.8);
  background: rgba(0,0,112,.58);
}

.pc-icon-art {
  border-color: #171717;
  background: linear-gradient(135deg, #ffffe7, #8a9aaa);
  box-shadow: inset 1px 1px #fff, 1px 1px #111;
}

.win95-window {
  box-shadow: 3px 3px 0 rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.15);
}

.win95-titlebar {
  background: linear-gradient(90deg, #666, #8a8a8a);
}

.win95-window.is-active .win95-titlebar {
  background: linear-gradient(90deg, #000080, #2457a5);
}

.win95-button,
.pc-app-button,
.signal-keypad button {
  border: 2px solid;
  border-color: #fff #343434 #343434 #fff;
  background: #c0c0c0;
  color: #000;
  box-shadow: none;
}

.win95-button:active,
.pc-app-button:active,
.signal-keypad button:active {
  border-color: #343434 #fff #fff #343434;
  padding-top: 1px;
}

.computer-station.is-expanded {
  border: 1px solid rgba(203,165,87,.2);
  border-radius: 13px;
  background:
    radial-gradient(ellipse at center, rgba(77,52,27,.11), transparent 67%),
    rgba(7,5,4,.24);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.55);
}

/* ---------- Signal Trace: explicit, physical, and hard to miss ---------- */
.signal-decoder {
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 9px;
  border: 2px inset #ececec;
  background:
    linear-gradient(rgba(0,0,0,.035) 1px, transparent 1px),
    #bdbdbd;
  background-size: 100% 4px;
  color: #111;
}

.signal-decoder-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 8px;
  border: 1px solid #151515;
  background: linear-gradient(#383838, #161616);
  color: #e3d2a5;
  font: 700 10px/1 var(--studio-mono);
  letter-spacing: .08em;
  box-shadow: inset 0 1px rgba(255,255,255,.1);
}

.signal-decoder-header b {
  color: #9fe197;
  text-shadow: 0 0 5px rgba(107,218,98,.45);
}

.signal-meter-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.signal-meter {
  display: grid;
  grid-template-columns: 8px 1fr;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 4px 6px;
  border: 1px solid #777;
  background: #a5a5a5;
  color: #494949;
  font: 700 8px/1 var(--studio-ui);
}

.signal-meter i {
  width: 7px;
  height: 7px;
  border: 1px solid #333;
  border-radius: 50%;
  background: #3a231e;
  box-shadow: inset 0 0 2px #000;
}

.signal-meter.is-live {
  color: #111;
  background: #c7c7c7;
}

.signal-meter.is-live i {
  background: #65bd55;
  box-shadow: 0 0 5px #68c85a, inset 0 1px rgba(255,255,255,.5);
}

.signal-route-ledger {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}

.signal-route-cell {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 5px;
  border: 1px solid #444;
  background: #181b18;
  color: #5d695c;
  text-align: center;
  box-shadow: inset 0 0 7px #000;
}

.signal-route-cell small {
  overflow: hidden;
  color: #777e72;
  font: 700 6px/1 var(--studio-ui);
  letter-spacing: .05em;
  text-overflow: ellipsis;
}

.signal-route-cell b {
  font: 900 19px/1 var(--studio-mono);
}

.signal-route-cell.is-known {
  border-color: #51704f;
  color: #a9dfa1;
  text-shadow: 0 0 6px rgba(128,224,120,.52);
}

.signal-guidance {
  min-height: 38px;
  padding: 7px 8px;
  border: 1px inset #fff;
  background: #ffffe1;
  color: #171717;
  font: 700 9px/1.35 Arial, sans-serif;
}

.signal-code-label {
  display: grid;
  grid-template-columns: minmax(115px, auto) 1fr;
  align-items: center;
  gap: 8px;
  color: #111;
  font: 700 9px/1 Arial, sans-serif;
}

.signal-code-label input {
  width: 100%;
  min-width: 0;
  padding: 7px 8px;
  border: 2px inset #fff;
  background: #fff;
  color: #000;
  font: 900 16px/1 var(--studio-mono);
  letter-spacing: .11em;
  text-align: center;
}

.signal-code-label input:focus {
  outline: 1px dotted #000080;
  outline-offset: -4px;
}

.signal-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  width: min(100%, 230px);
  margin: 0 auto;
}

.signal-keypad button {
  min-height: 28px;
  font: 700 10px/1 Arial, sans-serif;
}

.signal-action-row,
.signal-tune-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
}

.signal-action-row .win95-button,
.signal-tune-row .win95-button {
  min-height: 25px;
  padding: 4px 9px;
}

.signal-scan-button {
  min-width: 86px;
  font-weight: 900;
}

/* ---------- Portable KCV television ---------- */
.side-tv-set {
  filter: drop-shadow(0 20px 22px rgba(0,0,0,.67));
}

.side-tv-handle {
  border-color: #17100b;
  background: linear-gradient(#59402a, #24170f 70%);
  box-shadow: inset 0 1px rgba(255,255,255,.1), 0 3px 6px #000;
}

.side-tv-cabinet {
  border: 2px solid #130a06;
  border-radius: 15px 15px 11px 11px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.05), transparent 5% 94%, rgba(0,0,0,.27)),
    repeating-linear-gradient(4deg, rgba(255,255,255,.015) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(92deg, #28140b 0 6px, #452413 7px 12px, #1c0e08 13px 20px),
    #351b0f;
  box-shadow:
    inset 3px 3px rgba(132,77,38,.35),
    inset -5px -7px 13px rgba(0,0,0,.62),
    0 3px 0 #090504,
    0 17px 26px rgba(0,0,0,.5);
}

.side-tv-cabinet::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(190,128,68,.17);
  border-radius: 9px;
  pointer-events: none;
}

.side-screen-bezel {
  background: linear-gradient(135deg, #2d2c28, #090908 71%, #3a3831);
  box-shadow: inset 6px 6px 10px #000, 1px 1px rgba(255,255,255,.11), 0 0 0 1px #1d150f;
}

.side-crt-screen {
  box-shadow: inset 0 0 30px 10px #000, 0 0 0 1px #5c584e;
}

.side-control-panel {
  background: linear-gradient(105deg, #24231f, #0b0b0a 76%);
  box-shadow: inset 2px 0 rgba(255,255,255,.035), inset 5px 0 9px rgba(0,0,0,.44);
}

.side-tv-button-row {
  padding: 5px;
  border: 1px solid #0c0907;
  border-radius: 3px;
  background: linear-gradient(#21170f, #0d0907);
  box-shadow: inset 0 1px rgba(255,255,255,.03), 0 3px 8px rgba(0,0,0,.38);
}

.side-tv-label-strip {
  border: 1px solid #18110b;
  border-radius: 2px;
  background: linear-gradient(#b59c70, #6f5b3b);
  color: #1c140d;
  box-shadow: inset 0 1px rgba(255,255,255,.25), 0 2px 4px rgba(0,0,0,.4);
  text-shadow: 0 1px rgba(255,255,255,.13);
}

.side-tv-osd,
.screen-osd,
.main-control-osd {
  text-shadow: 0 0 6px currentColor, 1px 1px #000;
}

/* Mystery channel card. */
.call-route-card {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 15%;
  z-index: 3;
  display: grid;
  gap: 4px;
  padding: 9px;
  border: 1px solid rgba(235,237,215,.65);
  background: rgba(10,15,12,.83);
  color: #e8ebd6;
  text-align: center;
  box-shadow: 0 5px 18px rgba(0,0,0,.55), inset 0 0 13px rgba(115,151,110,.09);
}

.call-route-card small {
  font: 700 6px/1 var(--studio-mono);
  letter-spacing: .15em;
}

.call-route-card strong {
  color: #f4e7b5;
  font: 900 14px/1.15 var(--studio-ui);
  letter-spacing: .08em;
}

.call-route-card span {
  color: #a9b29c;
  font: 700 6px/1.25 var(--studio-mono);
}

.call-route-card.is-ready {
  border-color: #e5b850;
  box-shadow: 0 0 13px rgba(229,184,80,.22), inset 0 0 14px rgba(229,184,80,.08);
  animation: route-card-ready 1.1s steps(2, end) infinite;
}

@keyframes route-card-ready {
  50% { filter: brightness(1.17); }
}

/* ---------- Room gadgets ---------- */
.room-gadget-shelf {
  position: relative;
  padding: 11px 9px 9px;
  border: 1px solid #1b0f08;
  border-radius: 6px 6px 3px 3px;
  background:
    repeating-linear-gradient(92deg, #2b160c 0 8px, #452411 9px 15px, #211007 16px 23px),
    #2c160b;
  box-shadow:
    inset 0 1px rgba(255,255,255,.055),
    inset 0 -4px 7px rgba(0,0,0,.52),
    0 8px 14px rgba(0,0,0,.43);
}

.room-gadget-shelf::before {
  content: "ROOM CONTROLS";
  position: absolute;
  left: 9px;
  top: 3px;
  color: rgba(209,177,112,.42);
  font: 700 5px/1 var(--studio-mono);
  letter-spacing: .13em;
}

.desk-lamp,
.room-clock,
.room-intercom {
  transition: filter .15s ease, transform .15s ease, box-shadow .2s ease;
}

.desk-lamp:hover,
.room-clock:hover,
.room-intercom:hover {
  filter: brightness(1.13);
}

.desk-lamp:active,
.room-clock:active,
.room-intercom:active {
  transform: translateY(1px);
}

.lamp-shade {
  border-color: #1a1108;
  background: linear-gradient(135deg, #a4722e, #4f2e12 67%, #241309);
  box-shadow: inset 0 1px rgba(255,255,255,.13), 0 4px 8px rgba(0,0,0,.43);
}

.desk-lamp[aria-pressed="true"] .lamp-shade {
  background: linear-gradient(135deg, #d5a153, #72461d 68%, #2f180b);
  box-shadow: inset 0 1px rgba(255,255,255,.22), 0 0 16px rgba(236,174,83,.26), 0 4px 8px rgba(0,0,0,.45);
}

.clock-face {
  border-color: #221407;
  background:
    radial-gradient(circle at 48% 45%, rgba(255,255,255,.4), transparent 12%),
    repeating-conic-gradient(from -1deg, #4d3b24 0 1deg, transparent 1deg 30deg),
    radial-gradient(circle, #d5c6a1 0 61%, #9a8151 62% 68%, #38210f 69% 100%);
  box-shadow: inset 0 0 8px rgba(36,22,10,.55), 0 4px 8px rgba(0,0,0,.45);
}

.room-clock.is-synchronized .clock-face {
  box-shadow: inset 0 0 8px rgba(36,22,10,.55), 0 0 11px rgba(240,185,79,.5), 0 4px 8px rgba(0,0,0,.45);
}

.room-clock.is-synchronized em {
  color: #f1c866;
  text-shadow: 0 0 6px rgba(240,185,79,.42);
}

.room-intercom {
  position: relative;
  border-color: #18110d;
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), transparent 18%),
    linear-gradient(#8f8069, #5d5141 66%, #3d352b);
  box-shadow: inset 1px 1px rgba(255,255,255,.21), inset -3px -3px 6px rgba(0,0,0,.28), 0 4px 8px rgba(0,0,0,.48);
}

.room-intercom small {
  display: block;
  min-width: 72px;
  margin-top: 3px;
  padding: 3px 4px;
  border: 1px solid #201b14;
  background: #111611;
  color: #75816f;
  font: 700 5px/1.15 var(--studio-mono);
  text-align: center;
  text-shadow: 0 0 4px rgba(103,150,99,.38);
}

.room-intercom.is-open small {
  color: #b5e2aa;
  box-shadow: inset 0 0 6px #000, 0 0 7px rgba(104,203,95,.22);
}

.room-intercom.is-open {
  border-color: #657c53;
}

.room-intercom.is-denied {
  animation: intercom-denied .11s steps(2, end) 5;
}

@keyframes intercom-denied {
  50% { transform: translateX(2px); filter: brightness(.8) sepia(.25); }
}

/* ---------- Physical service-route console ---------- */
.room-signal-console {
  position: relative;
  display: grid;
  gap: 7px;
  padding: 9px;
  border: 2px solid #19120b;
  border-radius: 5px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.07), transparent 16%),
    repeating-linear-gradient(90deg, transparent 0 15px, rgba(255,255,255,.012) 16px),
    linear-gradient(#514839, #29241d 70%, #17130f);
  box-shadow: inset 1px 1px rgba(255,255,255,.13), inset -4px -5px 8px rgba(0,0,0,.37), 0 8px 14px rgba(0,0,0,.48);
}

.room-signal-console::before,
.room-signal-console::after {
  content: "";
  position: absolute;
  top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #a5a095, #36332e 55%, #111);
  box-shadow: 0 0 0 1px #17130f;
}
.room-signal-console::before { left: 7px; }
.room-signal-console::after { right: 7px; }

.signal-console-heading {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 0 10px;
  color: #bca779;
  font: 700 6px/1 var(--studio-mono);
  letter-spacing: .13em;
}

.signal-console-heading b {
  color: #d7c69f;
}

.room-route-display {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border: 1px solid #050705;
  border-radius: 2px;
  background:
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,.018) 2px 3px),
    #071008;
  color: #384738;
  box-shadow: inset 0 0 10px #000;
  text-align: center;
}

.room-route-display span {
  font: 900 17px/1 var(--studio-mono);
  letter-spacing: .07em;
}

.room-route-display i {
  color: #3c4638;
  font-style: normal;
}

.room-route-display span.is-known {
  color: #a7d49e;
  text-shadow: 0 0 7px rgba(114,206,105,.6);
}

.room-signal-console p {
  min-height: 22px;
  margin: 0;
  color: #c1b28f;
  font: 700 6px/1.35 var(--studio-mono);
  letter-spacing: .04em;
  text-align: center;
}

#room-signal-open {
  min-height: 30px;
  border: 1px solid #0d0c0a;
  border-radius: 2px;
  background: linear-gradient(#332f28, #171512 70%, #0d0c0a);
  color: #b8aa8b;
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 2px 3px #000;
  font: 800 7px/1 var(--studio-ui);
  letter-spacing: .12em;
  cursor: pointer;
}

#room-signal-open:hover,
#room-signal-open:focus-visible {
  border-color: #8c6c30;
  color: #f2d37e;
  background: linear-gradient(#453a27, #1d1810 70%);
}

#room-signal-open:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px #000;
}

.room-signal-console.is-active {
  border-color: #5f573e;
}

.room-signal-console.is-complete {
  border-color: #65835c;
  box-shadow: inset 1px 1px rgba(255,255,255,.13), inset -4px -5px 8px rgba(0,0,0,.37), 0 0 15px rgba(104,186,94,.14), 0 8px 14px rgba(0,0,0,.48);
}

/* ---------- VHS library and physical tapes ---------- */
.tape-library {
  border: 2px solid #160b06;
  border-radius: 6px 6px 2px 2px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.04), transparent 5% 95%, rgba(0,0,0,.21)),
    repeating-linear-gradient(91deg, #28130a 0 7px, #3c1e0f 8px 14px, #1d0e08 15px 22px),
    #2b150b;
  box-shadow: inset 2px 2px rgba(131,74,36,.26), inset -5px -7px 10px rgba(0,0,0,.55), 0 12px 20px rgba(0,0,0,.52);
}

.library-header {
  border: 1px solid #181008;
  border-radius: 2px;
  background: linear-gradient(#bd9d62, #74522d 62%, #49331e);
  color: #21160d;
  box-shadow: inset 0 1px rgba(255,255,255,.31), 0 3px 5px rgba(0,0,0,.42);
  text-shadow: 0 1px rgba(255,255,255,.11);
}

.shelf {
  background: linear-gradient(#6d381b, #2a140a 64%, #140a06);
  box-shadow: inset 0 1px rgba(255,255,255,.09), 0 4px 6px rgba(0,0,0,.58);
}

.vhs-tape,
.held-tape,
.ejected-tape {
  border-color: #080808;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), transparent 7% 90%, rgba(0,0,0,.34)),
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(255,255,255,.014) 19px),
    linear-gradient(#252525, #0e0e0e 56%, #1d1d1d);
  box-shadow: inset 0 1px rgba(255,255,255,.08), inset 0 -3px 4px rgba(0,0,0,.42), 0 4px 6px rgba(0,0,0,.5);
}

.vhs-tape:hover,
.vhs-tape:focus-visible,
.held-tape:hover,
.ejected-tape:hover {
  filter: brightness(1.12);
  box-shadow: inset 0 1px rgba(255,255,255,.11), 0 0 0 1px rgba(226,185,84,.55), 0 6px 11px rgba(0,0,0,.58);
}

.tape-title {
  color: #17120d;
  text-shadow: 0 1px rgba(255,255,255,.18);
}

.library-instruction {
  color: #85755d;
  letter-spacing: .08em;
}

/* ---------- Program content inside main CRT ---------- */
.game-program {
  color: #dbe6cd;
}

.program-topline,
.program-status {
  border-color: rgba(155,192,143,.25);
  background: rgba(7,14,9,.74);
}

.program-title {
  color: #f1e9d5;
  text-shadow: 2px 0 rgba(179,74,59,.23), -2px 0 rgba(64,134,145,.19), 0 0 8px rgba(217,232,194,.12);
}

.program-copy,
.program-caption,
.program-tagline {
  color: #b7c5ab;
}

.program-hero,
.program-gallery button {
  border-color: rgba(158,190,143,.27);
  box-shadow: 0 4px 14px rgba(0,0,0,.37);
}

.program-action,
.program-actions button {
  border-color: rgba(218,186,92,.42);
  background: rgba(9,14,10,.82);
  color: #d8c988;
}

/* ---------- Dialogs and footer ---------- */
.archive-dialog {
  border: 2px solid #1a0e07;
  border-radius: 7px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.045), transparent 14%),
    repeating-linear-gradient(92deg, #2e170c 0 8px, #40200f 9px 15px, #1c0d07 16px 23px);
  color: #ded1ba;
  box-shadow: inset 2px 2px rgba(144,84,40,.23), inset -7px -8px 13px rgba(0,0,0,.57), 0 35px 80px #000;
}

.archive-dialog form {
  margin: 8px;
  border: 1px solid rgba(207,166,79,.21);
  border-radius: 4px;
  background: rgba(8,7,6,.86);
}

.archive-dialog h2 {
  color: #eadbb9;
}

.dialog-close,
.dialog-action,
.download-grid a {
  border: 1px solid #57431f;
  border-radius: 3px;
  background: linear-gradient(#29241b, #0d0b08 70%);
  color: #d5bd7a;
  box-shadow: inset 0 1px rgba(255,255,255,.05), 0 2px 3px #000;
}

.dialog-close:hover,
.dialog-action:hover,
.download-grid a:hover {
  border-color: #ad873d;
  color: #fff0b5;
}

.archive-footer {
  border-top-color: rgba(181,140,60,.22);
  color: #716653;
}

.archive-footer a {
  color: #897a61;
}

.archive-footer a:hover {
  color: #e0bd6b;
}

/* ---------- Responsive polish ---------- */
@media (max-width: 1470px) {
  .expanded-room {
    grid-template-columns: minmax(245px,.72fr) minmax(540px,1.5fr) minmax(250px,.74fr);
  }
}

@media (max-width: 1220px) {
  .expanded-room {
    grid-template-columns: minmax(260px,.8fr) minmax(520px,1.45fr);
  }

  .right-room-column {
    grid-column: 1 / -1;
    grid-template-columns: minmax(250px,.7fr) minmax(235px,.7fr) minmax(270px,.9fr);
    align-items: end;
  }

  .side-tv-station,
  .room-gadget-shelf,
  .room-signal-console,
  .tape-library {
    min-width: 0;
  }
}

@media (max-width: 900px) {
  .archive-shell {
    width: min(100% - 14px, 760px);
  }

  .site-header {
    align-items: flex-start;
  }

  .expanded-room {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 26px;
    padding-top: 45px;
  }

  .console-column { order: 1; }
  .computer-station { order: 2; max-width: 520px; }
  .right-room-column {
    order: 3;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .right-room-column .side-tv-station {
    grid-column: 1 / -1;
    width: min(100%, 430px);
    margin: 0 auto;
  }

  .right-room-column .tape-library {
    grid-column: 1 / -1;
  }

  .signal-code-label {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .site-header {
    gap: 9px;
    padding: 8px;
  }

  .archive-brand strong { font-size: 12px; }
  .archive-brand em { font-size: 8px; }
  .utility-nav { gap: 5px; }
  .utility-nav a,
  .utility-button { min-height: 30px; padding: 6px 8px; font-size: 8px; }

  .right-room-column {
    grid-template-columns: 1fr;
  }

  .right-room-column > * {
    grid-column: 1 !important;
  }

  .room-route-display span {
    font-size: 15px;
  }

  .computer-station.is-expanded {
    width: calc(100vw - 8px);
    max-height: calc(100vh - 8px);
    padding: 7px;
  }

  .computer-station.is-expanded .pc-desk {
    grid-template-columns: 88px 1fr;
  }

  .computer-station.is-expanded .pc-desktop-icons {
    grid-template-columns: repeat(4, minmax(48px, 1fr));
  }

  .computer-station.is-expanded .pc-icon {
    width: auto;
  }

  .signal-meter-row {
    grid-template-columns: 1fr;
  }

  .signal-decoder {
    padding: 6px;
  }

  .signal-decoder-header {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 390px) {
  .archive-brand img { width: 32px; height: 32px; }
  .archive-brand strong { font-size: 10px; }
  .archive-brand em { letter-spacing: .12em; }

  .utility-nav a,
  .utility-button { font-size: 7px; }

  .computer-station.is-expanded .pc-desk {
    grid-template-columns: 70px 1fr;
    gap: 4px;
  }

  .pc-key-row button {
    min-width: 10px;
    padding: 0 1px;
  }

  .room-route-display {
    gap: 2px;
    padding: 5px 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .call-route-card.is-ready,
  .room-intercom.is-denied {
    animation: none !important;
  }
}