/*
  Kadabra Games room expansion
  Three working machines: KADABRA 95, the main VCR television, and PORTAVISION 9.
*/

:root {
  --archive-max: 1880px;
  --pc-beige: #bdb7a4;
  --pc-light: #e1dccb;
  --pc-shadow: #5d594f;
  --win-blue: #000080;
  --win-teal: #147f7c;
  --win-grey: #c0c0c0;
  --side-brown: #493024;
  --side-cream: #b8a98a;
}

body {
  --room-light-level: 1;
  transition: background-color .45s ease, filter .35s ease;
}

body.room-light-off {
  --room-light-level: .58;
}

body.room-light-off::before { filter: brightness(.56) saturate(.78); }
body.room-light-off .archive-shell { filter: brightness(.72); }
body.room-light-off .crt-screen,
body.room-light-off .side-crt-screen,
body.room-light-off .pc-screen { filter: brightness(1.24); }
body.room-anomaly::before { animation: room-power-flicker .18s steps(2,end) 9; }
body.room-anomaly .archive-shell { animation: room-shudder .12s steps(2,end) 8; }

@keyframes room-power-flicker {
  0%, 38%, 72%, 100% { filter: brightness(.72); }
  18%, 54%, 84% { filter: brightness(.18); }
}
@keyframes room-shudder {
  0%,100% { transform: translate(0); }
  35% { transform: translate(-2px, 1px); }
  70% { transform: translate(2px, -1px); }
}

.archive-shell { width: min(var(--archive-max), calc(100% - 22px)); }

.expanded-room {
  display: grid;
  grid-template-columns: minmax(270px, .72fr) minmax(600px, 1.65fr) minmax(275px, .76fr);
  align-items: end;
  gap: clamp(14px, 1.7vw, 30px);
  min-height: calc(100vh - 145px);
  padding: 48px 4px 22px;
}

.expanded-room > * { min-width: 0; }
.console-column { width: 100%; }
.tv-set { width: min(100%, 920px); }
.right-room-column {
  display: grid;
  align-self: end;
  gap: 16px;
  min-width: 0;
}
.right-room-column .tape-library { width: 100%; }
.right-room-column .library-header h2 { font-size: clamp(14px, 1.15vw, 19px); }
.right-room-column .tape-title { font-size: clamp(8px, .72vw, 11px); }

/* Main television: more physical detail, working input and picture controls. */
.main-tv-top-badge {
  position: absolute;
  z-index: 4;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 72%;
  padding: 2px 12px 3px;
  border: 1px solid rgba(5,3,2,.7);
  border-radius: 2px;
  background: linear-gradient(#9c825e,#5b452e);
  box-shadow: inset 0 1px rgba(255,255,255,.25), 0 1px 2px #000;
  color: #21180f;
  font: 800 7px/1.2 var(--ui);
  letter-spacing: .15em;
  text-align: center;
  text-shadow: 0 1px rgba(255,255,255,.15);
  white-space: nowrap;
}
.main-tv-screw,
.side-tv-screw {
  position: absolute;
  z-index: 5;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #9b9487 0 14%, #393630 25% 55%, #111 58% 100%);
  box-shadow: 0 0 0 1px #130c08, inset 0 0 0 1px rgba(255,255,255,.08);
}
.main-tv-screw::after,
.side-tv-screw::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 4px;
  height: 1px;
  background: #0b0a09;
  transform: rotate(-18deg);
}
.main-screw-a { left: 13px; top: 16px; }
.main-screw-b { right: 13px; top: 16px; }
.main-screw-c { left: 13px; bottom: 13px; }
.main-screw-d { right: 13px; bottom: 13px; }
.main-tv-feet {
  display: flex;
  justify-content: space-between;
  width: 84%;
  height: 13px;
  margin: -2px auto 0;
  padding: 0 8%;
}
.main-tv-feet i {
  width: 78px;
  height: 12px;
  border: 1px solid #0b0806;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(#241811,#090706);
  box-shadow: 0 6px 9px rgba(0,0,0,.55);
}
.tv-cabinet {
  background:
    linear-gradient(90deg, rgba(255,255,255,.025), transparent 3% 97%, rgba(0,0,0,.2)),
    repeating-linear-gradient(91deg, transparent 0 18px, rgba(255,224,185,.028) 19px, transparent 20px 42px),
    repeating-linear-gradient(4deg, rgba(255,255,255,.018) 0 1px, rgba(0,0,0,.034) 1px 4px),
    linear-gradient(108deg, #160b07, #6b341a 22%, #32170d 50%, #5c2a15 74%, #170b07);
}
.tv-control-panel {
  background:
    repeating-radial-gradient(circle at 50% 80%, #080808 0 1px, transparent 1.4px 5px),
    linear-gradient(120deg,#211f1b,#0b0b0a 72%);
  box-shadow: inset 1px 1px rgba(255,255,255,.06), inset -2px -2px rgba(0,0,0,.65), 0 0 0 1px #070707;
}
.main-input-knob { cursor: pointer; }
.main-input-knob small {
  display: block;
  position: absolute;
  left: 50%;
  bottom: -15px;
  transform: translateX(-50%);
  color: #9d8d70;
  font: 700 6px/1 var(--mono);
  letter-spacing: .08em;
  white-space: nowrap;
}
.main-tv-service-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 17px 2px 4px;
}
.main-tv-service-controls button {
  min-width: 0;
  min-height: 23px;
  padding: 4px 1px;
  border: 1px solid #050505;
  border-radius: 2px;
  background: linear-gradient(#3d3a35,#141311);
  box-shadow: inset 0 1px rgba(255,255,255,.09), 0 1px #000;
  color: #aa9f8b;
  font: 700 6px/1 var(--ui);
  letter-spacing: .04em;
  cursor: pointer;
}
.main-tv-service-controls button:hover,.main-tv-service-controls button:focus-visible { color:#e1d3b5; background:linear-gradient(#4a4640,#1a1816); outline:1px solid rgba(224,205,166,.45); outline-offset:1px; }
.main-tv-service-controls button:active { transform: translateY(1px); box-shadow: inset 0 1px 4px #000; }
.main-volume-readout {
  min-height:9px; margin:0 2px 4px; color:#7e745f; font:700 5px/1 var(--mono); letter-spacing:.08em; text-align:center;
}
.main-control-osd {
  position:absolute; z-index:9; left:7%; top:6%; padding:3px 5px; border:1px solid rgba(199,228,183,.18);
  background:rgba(0,8,2,.58); color:rgba(224,244,211,.9); font:700 clamp(8px,1.7cqw,13px)/1 var(--mono);
  letter-spacing:.06em; text-shadow:0 0 6px rgba(213,255,197,.36); opacity:0; pointer-events:none;
  transform:translateY(-2px); transition:opacity .12s ease,transform .12s ease;
}
.main-control-osd[hidden] { display:none; }
.main-control-osd.is-visible { opacity:1; transform:translateY(0); }
.main-input-overlay {
  position: absolute;
  inset: 4.5% 5.3%;
  z-index: 6;
  overflow: hidden;
  border-radius: 7% / 5%;
  background: #020302;
  color: #dceccb;
  font-family: var(--mono);
}
.main-input-overlay[hidden] { display: none; }
.main-input-overlay .main-input-card {
  display: grid;
  place-content: center;
  min-height: 100%;
  padding: 8%;
  text-align: center;
  background:
    repeating-linear-gradient(0deg, transparent 0 4px, rgba(255,255,255,.025) 4px 5px),
    radial-gradient(circle at 50% 45%, rgba(82,115,73,.15), transparent 55%),
    #020402;
}
.main-input-card strong { font-size: clamp(16px, 5cqw, 44px); letter-spacing: .12em; }
.main-input-card span { margin-top: 8px; color: #9eae91; font-size: clamp(8px,1.8cqw,13px); }
.main-input-overlay.antenna-mode .main-input-card { animation: antenna-jitter .18s steps(2,end) infinite; }
.main-input-overlay.transmission-mode .main-input-card {
  background: radial-gradient(circle, rgba(80,110,72,.22), transparent 58%), #000;
  animation: transmission-pulse 1.8s ease-in-out infinite;
}
@keyframes antenna-jitter { 50% { transform: translateX(1px); filter: contrast(1.5); } }
@keyframes transmission-pulse { 50% { filter: brightness(1.35); } }
body[data-main-picture="warm"] .crt-screen { filter: sepia(.18) saturate(.88) brightness(.98); }
body[data-main-picture="cool"] .crt-screen { filter: hue-rotate(14deg) saturate(.8) brightness(.92); }
body[data-main-picture="soft"] .crt-screen { filter: contrast(.86) brightness(1.1) blur(.25px); }
body.main-hold-slip .crt-screen { animation: main-hold-slip .2s steps(2,end) 8; }
@keyframes main-hold-slip { 50% { transform: translateY(8px) scaleY(.97); } }

/* KADABRA 95 family computer. */
.computer-station {
  position: relative;
  align-self: end;
  width: 100%;
  max-width: 350px;
  margin: 0 auto;
  filter: drop-shadow(0 24px 24px rgba(0,0,0,.68));
}
.pc-monitor { position: relative; z-index: 2; }
.pc-monitor-ridge {
  position: absolute;
  z-index: 0;
  left: 16%; right: 16%; top: -15px;
  height: 20px;
  display: flex;
  justify-content: space-around;
  padding: 5px 12px;
  border-radius: 15px 15px 0 0;
  background: linear-gradient(#a9a38f,#696558);
  border: 1px solid #4c493f;
}
.pc-monitor-ridge i { width: 2px; background: #4c493f; box-shadow: 4px 0 #7f7a69; }
.pc-monitor-shell {
  position: relative;
  padding: 18px 17px 12px;
  border: 2px solid #555248;
  border-radius: 24px 24px 15px 15px;
  background:
    radial-gradient(circle at 20% 8%, rgba(255,255,255,.25), transparent 18%),
    repeating-linear-gradient(95deg, transparent 0 21px, rgba(80,74,61,.028) 22px 23px),
    linear-gradient(135deg,#e1dccb,#b8b19e 58%,#8f8979);
  box-shadow: inset 2px 2px rgba(255,255,255,.58), inset -5px -7px 13px rgba(58,55,48,.28), 0 0 0 3px #827d6e;
}
.pc-monitor-shell::after {
  content: "";
  position: absolute;
  inset: 7px;
  pointer-events: none;
  border: 1px solid rgba(68,64,54,.18);
  border-radius: 18px 18px 10px 10px;
}
.pc-screen-bezel {
  position: relative;
  padding: 13px;
  border: 2px solid #4f4d47;
  border-radius: 21px / 17px;
  background: linear-gradient(135deg,#323330,#111 68%,#46453f);
  box-shadow: inset 5px 5px 9px #090909, 1px 1px rgba(255,255,255,.4);
}
.pc-screen {
  position: relative;
  isolation: isolate;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 2px solid #070a08;
  border-radius: 9% / 7%;
  background: #020402;
  box-shadow: inset 0 0 32px 9px #000, 0 0 0 1px #656961;
  color: #000;
  font: 11px/1.25 Arial, sans-serif;
  cursor: default;
}
.pc-glass {
  position: absolute; inset: 0; z-index: 90; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(115deg, rgba(255,255,255,.11), transparent 19% 68%, rgba(255,255,255,.025));
  box-shadow: inset 14px 0 23px rgba(0,0,0,.42), inset -14px 0 23px rgba(0,0,0,.5), inset 0 10px 18px rgba(0,0,0,.22), inset 0 -13px 22px rgba(0,0,0,.48);
}
.pc-scanlines {
  position: absolute; inset: 0; z-index: 80; pointer-events: none; opacity: .22;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.25) 2px 3px);
  mix-blend-mode: multiply;
}
.pc-off-label {
  position: absolute; inset: 0; display: grid; place-content: center; gap: 3px; text-align: center;
  color: rgba(150,180,155,.08); letter-spacing: .14em;
}
.pc-off-label span { font: 900 25px/1 var(--ui); }
.pc-off-label small { font: 700 7px/1 var(--mono); }
.pc-screen[data-pc-state="booting"] { background: #050505; color: #d8d8d8; }
.pc-screen[data-pc-state="on"] { background: var(--win-teal); }
.pc-screen[data-pc-state="off"] .pc-off-label { display: grid; }
.pc-screen[data-pc-state="booting"] .pc-off-label,
.pc-screen[data-pc-state="on"] .pc-off-label { display: none; }
.pc-boot {
  position: absolute; inset: 0; z-index: 10; padding: 7% 6%; overflow: hidden;
  background: #030303; color: #c9c9c9; font: 8px/1.45 "Courier New", monospace; white-space: pre-wrap;
}
.pc-boot[hidden] { display: none; }
.pc-desktop { position: absolute; inset: 0; overflow: hidden; background: var(--win-teal); }
.pc-desktop[hidden] { display: none; }
.pc-wallpaper-mark {
  position: absolute; right: 3%; bottom: 12%; opacity: .08;
  color: #fff; font: 900 140px/1 Georgia,serif; transform: rotate(-8deg);
}
.pc-desktop-icons {
  position: absolute; inset: 5px 5px 23px;
  display: grid; align-content: start; grid-template-columns: repeat(3, 58px); gap: 6px 3px;
  z-index: 2;
}
.pc-icon {
  width: 58px; min-height: 48px; padding: 1px; border: 1px solid transparent; background: transparent;
  color: #fff; font: 8px/1.08 Arial,sans-serif; text-shadow: 1px 1px #000; cursor: default;
}
.pc-icon:hover, .pc-icon:focus-visible, .pc-icon.is-selected { border-color: rgba(255,255,255,.72); background: rgba(0,0,128,.45); }
.pc-icon-art {
  display: grid; place-content: center; width: 27px; height: 27px; margin: 0 auto 2px;
  border: 1px solid #111; background: linear-gradient(135deg,#f6f6dc,#8e9ca8); color: #000080;
  box-shadow: inset 1px 1px #fff, 1px 1px #222; font: 900 17px/1 serif; text-shadow: none;
}
.pc-icon-label { display: block; overflow: hidden; text-align: center; }
.pc-taskbar {
  position: absolute; z-index: 60; left: 0; right: 0; bottom: 0; height: 22px;
  display: flex; align-items: center; gap: 2px; padding: 2px;
  border-top: 1px solid #fff; background: var(--win-grey); box-shadow: inset 0 1px #e9e9e9;
}
.pc-start-button, .pc-task-button, .pc-tray {
  height: 18px; min-width: 0; border: 1px solid; border-color: #fff #333 #333 #fff;
  background: var(--win-grey); color: #000; font: 700 8px/1 Arial,sans-serif; cursor: default;
  box-shadow: inset 1px 1px #dfdfdf;
}
.pc-start-button { flex: 0 0 47px; padding: 1px 3px; text-align: left; }
.pc-start-button b { color: #174c88; }
.pc-start-button[aria-expanded="true"], .pc-task-button.is-active { border-color: #333 #fff #fff #333; box-shadow: inset 1px 1px #777; }
.pc-task-buttons { display: flex; flex: 1 1 auto; gap: 2px; min-width: 0; overflow: hidden; }
.pc-task-button { flex: 1 1 62px; max-width: 92px; padding: 1px 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.pc-tray { flex: 0 0 auto; display: flex; align-items: center; gap: 3px; padding: 1px 4px; border-color: #777 #fff #fff #777; font-weight: 400; }
.pc-speaker-icon { font-size: 7px; }
.pc-start-menu {
  position: absolute; z-index: 70; left: 2px; bottom: 21px; width: 142px; min-height: 176px;
  display: grid; grid-template-columns: 22px 1fr; border: 1px solid; border-color: #fff #222 #222 #fff;
  background: var(--win-grey); box-shadow: 2px 2px 0 rgba(0,0,0,.45);
}
.pc-start-menu[hidden] { display: none; }
.pc-start-rail {
  display: flex; align-items: center; justify-content: flex-start; gap: 3px; padding: 4px 2px;
  writing-mode: vertical-rl; transform: rotate(180deg); background: #777; color: #d8d8d8; letter-spacing: .08em;
}
.pc-start-rail b { color: #fff; font-size: 12px; }
.pc-start-rail span { font-weight: 400; }
.pc-start-items { display: grid; align-content: start; padding: 2px; }
.pc-start-items button {
  display: grid; grid-template-columns: 22px 1fr; align-items: center; min-height: 23px; padding: 2px 3px;
  border: 0; background: transparent; color: #000; font: 8px/1 Arial,sans-serif; text-align: left; cursor: default;
}
.pc-start-items button:hover, .pc-start-items button:focus-visible { background: #000080; color: #fff; outline: 0; }
.pc-start-items button span { font-size: 14px; text-align: center; }
.pc-start-items hr { width: 100%; margin: 2px 0; border: 0; border-top: 1px solid #777; border-bottom: 1px solid #fff; }
.pc-window-layer { position: absolute; inset: 0 0 22px; z-index: 10; pointer-events: none; }
.win95-window {
  position:absolute; display:flex; flex-direction:column; width:min(86%,246px); min-width:150px; min-height:90px; max-height:calc(100% - 22px);
  border:2px solid; border-color:#fff #222 #222 #fff; background:var(--win-grey); color:#000;
  box-shadow:2px 2px 0 rgba(0,0,0,.52); pointer-events:auto; font:8px/1.25 Arial,sans-serif;
}
.win95-window.is-maximized { inset: 0 !important; width: 100% !important; height: calc(100% - 0px) !important; transform: none !important; }
.win95-window.is-minimized { display: none; }
.win95-titlebar {
  height: 16px; display: flex; align-items: center; gap: 3px; padding: 2px;
  background: #777; color: #d7d7d7; cursor: move; user-select: none;
}
.win95-window.is-active .win95-titlebar { background: var(--win-blue); color: #fff; }
.win95-titlebar strong { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 8px; }
.win95-titlebar i { font-style: normal; font-size: 9px; }
.win95-title-controls { display: flex; gap: 1px; }
.win95-title-controls button {
  width: 14px; height: 12px; padding: 0; border: 1px solid; border-color: #fff #222 #222 #fff;
  background: var(--win-grey); color: #000; font: 900 8px/8px Arial,sans-serif; cursor: default;
}
.win95-title-controls button:active { border-color: #222 #fff #fff #222; }
.win95-menubar { display:flex; gap:1px; height:17px; padding:1px 3px; border-bottom:1px solid #888; background:var(--win-grey); }
.win95-menubar button {
  min-width:0; height:14px; padding:1px 5px; border:1px solid transparent; background:transparent; color:#000;
  font:8px/1 Arial,sans-serif; text-align:left; cursor:default;
}
.win95-menubar button::first-letter { text-decoration:underline; }
.win95-menubar button:hover,.win95-menubar button:focus-visible { border-color:#fff #777 #777 #fff; outline:0; }
.win95-menubar button[aria-expanded="true"] { border-color:#333 #fff #fff #333; background:#d2d2d2; }
.win95-menu-popup {
  position:absolute; z-index:120; top:33px; min-width:104px; padding:2px; border:1px solid; border-color:#fff #222 #222 #fff;
  background:var(--win-grey); box-shadow:2px 2px 0 rgba(0,0,0,.55);
}
.win95-menu-popup button {
  display:block; width:100%; min-height:20px; padding:3px 18px 3px 18px; border:0; background:transparent; color:#000;
  font:8px/1 Arial,sans-serif; text-align:left; white-space:nowrap; cursor:default;
}
.win95-menu-popup button:hover,.win95-menu-popup button:focus-visible { background:#000080; color:#fff; outline:0; }
.win95-menu-popup button + button { border-top:1px solid rgba(90,90,90,.25); }
.win95-body {
  flex:1 1 auto; min-height:0; max-height:165px; overflow:auto; margin:2px; padding:5px;
  border:1px solid; border-color:#777 #fff #fff #777; background:#fff; color:#000;
}
.is-maximized .win95-body { max-height: calc(100% - 38px); }
.win95-statusbar { min-height: 14px; margin: 2px; padding: 2px 4px; border: 1px solid; border-color: #777 #fff #fff #777; overflow: hidden; white-space: nowrap; }
.win95-button, .pc-app-button {
  min-height: 20px; padding: 3px 8px; border: 1px solid; border-color: #fff #222 #222 #fff;
  background: var(--win-grey); color: #000; font: 8px Arial,sans-serif; cursor: default;
}
.win95-button:active, .pc-app-button:active { border-color: #222 #fff #fff #222; }
.win95-button:disabled { color: #777; text-shadow: 1px 1px #fff; }
.pc-screen button:active,.pc-monitor-controls button:active,.pc-drive:active,.pc-tower-switch:active,.corgi-sticker:active { transform:translateY(1px); }
.pc-folder-item:focus-visible,.pc-mail-list button:focus-visible,.pc-file-list button:focus-visible { outline:1px dotted #000; outline-offset:-1px; }
.pc-control-options button.is-selected,.pc-paint-tools button.is-selected { border-color:#222 #fff #fff #222; box-shadow:inset 0 0 0 2px #fff,0 0 0 1px #000; }

.pc-folder-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.pc-folder-item { display: grid; justify-items: center; gap: 2px; border: 1px solid transparent; background: transparent; color: #000; font-size: 7px; cursor: default; }
.pc-folder-item:hover { border: 1px dotted #000; }
.pc-folder-item b { display: grid; place-content: center; width: 27px; height: 21px; background: #f2dd65; border: 1px solid #6d5e13; color: #5d4b0a; font-size: 12px; }
.pc-file-list { width: 100%; border-collapse: collapse; font-size: 7px; }
.pc-file-list th, .pc-file-list td { padding: 3px 4px; border-bottom: 1px solid #ddd; text-align: left; }
.pc-file-list button { border: 0; background: transparent; padding: 0; color: #000080; text-decoration: underline; font: inherit; cursor: pointer; }
.pc-mail-layout { display: grid; grid-template-columns: 40% 1fr; min-height: 122px; }
.pc-mail-list { border-right: 1px solid #888; background: #e8e8e8; }
.pc-mail-list button { display: block; width: 100%; padding: 4px; border: 0; border-bottom: 1px solid #bbb; background: transparent; text-align: left; font: 7px/1.2 Arial,sans-serif; }
.pc-mail-list button:hover { background: #000080; color: #fff; }
.pc-mail-reader { padding: 5px; white-space: pre-wrap; }
.pc-notepad { display:grid; height:130px; }
.pc-notepad textarea { width:100%; height:100%; resize: none; border: 0; outline: 0; font: 8px/1.35 "Courier New",monospace; }
.pc-terminal { min-height: 132px; background: #000; color: #c8c8c8; font: 8px/1.35 "Courier New",monospace; }
.pc-terminal-output { height: 104px; overflow: auto; white-space: pre-wrap; }
.pc-terminal-line { display: flex; gap: 3px; }
.pc-terminal-line input { flex: 1; min-width: 0; border: 0; background: #000; color: #fff; outline: 0; font: inherit; }
.signal-panel { display: grid; gap: 6px; }
.signal-meter-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; }
.signal-meter { padding: 5px 3px; border: 1px solid #777; background: #aaa; text-align: center; }
.signal-meter i { display: block; width: 8px; height: 8px; margin: 0 auto 3px; border-radius: 50%; background: #4b1c12; box-shadow: inset 0 0 3px #000; }
.signal-meter.is-live i { background: #57d24c; box-shadow: 0 0 6px #6aff5e; }
.signal-code-row { display: flex; gap: 4px; }
.signal-code-row input { flex: 1; min-width: 0; border: 1px inset #fff; font: 900 10px "Courier New",monospace; letter-spacing: .12em; }
.case-progress { height: 10px; border: 1px inset #fff; background: #777; }
.case-progress i { display: block; height: 100%; width: var(--case-progress,0%); background: #000080; }
.pc-message-box { padding: 6px; border: 1px solid #777; background: #efefef; white-space: pre-wrap; }
.pc-bbs { background: #000; color: #6eff6e; padding: 6px; min-height: 125px; font: 8px/1.35 "Courier New",monospace; white-space: pre-wrap; }
.pc-game-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; }
.pc-game-grid button { aspect-ratio: 1; border: 2px outset #eee; background: #aaa; font: 900 11px Arial; }
.pc-game-grid button.is-lit { background: #fff16f; box-shadow: inset 0 0 8px #fff; }
.tape-sorter { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; }
.tape-sorter button { min-height: 24px; border: 2px outset #ddd; background: #292929; color: #e4d39c; font: 900 9px var(--mono); }
.tape-sorter button.is-done { visibility: hidden; }
.pc-paint-layout { display: grid; grid-template-columns: 28px 1fr; gap: 4px; }
.pc-paint-tools { display: grid; align-content: start; gap: 3px; }
.pc-paint-tools button { width: 26px; height: 22px; border: 2px outset #ddd; }
.pc-paint-canvas { width: 100%; height: 120px; border: 1px inset #fff; background: #fff; touch-action: none; }
.pc-control-grid { display: grid; gap: 7px; }
.pc-control-options { display: flex; flex-wrap: wrap; gap: 4px; }
.pc-control-options button { width: 36px; height: 24px; border: 2px outset #eee; }
.pc-control-options button[data-wallpaper="teal"] { background:#147f7c; }
.pc-control-options button[data-wallpaper="navy"] { background:#132b60; }
.pc-control-options button[data-wallpaper="plum"] { background:#5c4165; }
.pc-control-options button[data-wallpaper="forest"] { background:#355d43; }
.pc-desktop[data-wallpaper="navy"] { background:#132b60; }
.pc-desktop[data-wallpaper="plum"] { background:#5c4165; }
.pc-desktop[data-wallpaper="forest"] { background:#355d43; }
.pc-run-row { display: flex; align-items: center; gap: 5px; }
.pc-run-row input { flex: 1; min-width: 0; }
.pc-nightline { background: #020702; color: #a9d69c; font: 8px/1.4 "Courier New",monospace; padding: 7px; }
.pc-nightline h3 { color: #d4e9ca; letter-spacing: .1em; }
.pc-door-choices { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }

.pc-monitor-controls {
  display: flex; align-items: center; justify-content: flex-end; gap: 7px;
  min-height: 30px; padding: 5px 10px 0;
}
.pc-round-button {
  position: relative; width: 27px; height: 27px; padding: 0; border: 1px solid #5f5a4e; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,#e1dbc9,#8c8676 64%,#4e4b43); box-shadow: inset 1px 1px #fff, 0 1px 2px #555; cursor: pointer;
}
.pc-round-button i { position:absolute; left:50%; top:4px; width:2px; height:7px; transform:translateX(-50%); background:#3c3932; }
.pc-round-button span { position:absolute; top:29px; left:50%; transform:translateX(-50%); color:#5b574e; font:700 5px/1 Arial; }
.pc-power-led { width: 5px; height: 5px; border-radius: 50%; background:#4e351d; box-shadow: inset 0 0 2px #000; }
.pc-screen[data-pc-state="on"] ~ * .pc-power-led,
.computer-station[data-pc-power="on"] .pc-power-led { background:#6bc655; box-shadow:0 0 5px #6bc655; }
.pc-small-button { min-height:20px; padding:4px 7px; border:1px solid #5a564b; background:linear-gradient(#d5cfbd,#a19b89); color:#514d44; font:700 5px Arial; cursor:pointer; }
.pc-monitor-brand { position:absolute; left:24px; bottom:13px; color:#635f55; font:900 7px Arial; letter-spacing:.08em; }
.pc-monitor-brand span { font-weight:400; font-style:italic; }
.pc-desk { display:grid; grid-template-columns: 76px 1fr; gap:8px; align-items:end; margin:7px 12px 0; }
.pc-tower {
  position:relative; min-height:132px; padding:12px 8px; border:2px solid #59554b; border-radius:8px 8px 4px 4px;
  background:linear-gradient(120deg,#d4cebc,#a49e8c 66%,#7a7569); box-shadow:inset 1px 1px #fff,inset -4px -4px 8px rgba(0,0,0,.22),0 7px 14px rgba(0,0,0,.36);
}
.pc-tower-logo { margin-bottom:14px; color:#464239; font:900 13px Arial; }
.pc-tower-logo span { font-size:7px; vertical-align:super; }
.pc-drive { position:relative; display:block; width:100%; height:16px; margin:7px 0; padding:0; border:1px solid #5d594e; background:linear-gradient(#bdb6a4,#888274); cursor:pointer; }
.pc-drive i { position:absolute; left:5px; right:12px; top:6px; height:2px; background:#3a3833; box-shadow:0 1px #d6d0bf; }
.pc-drive span { position:absolute; right:2px; bottom:1px; color:#5e594e; font:5px Arial; }
.pc-cd-drive.is-open::after { content:""; position:absolute; z-index:3; left:3px; right:3px; top:9px; height:22px; border:1px solid #37342e; background:linear-gradient(#777166,#3b3934); box-shadow:0 5px 7px #000; pointer-events:none; }
.pc-tower-switch { position:absolute; left:10px; bottom:8px; width:18px; height:18px; border:1px solid #59554b; border-radius:50%; background:radial-gradient(circle,#b9b3a2,#777266); }
.pc-tower-switch i { display:block; width:2px; height:6px; margin:3px auto; background:#4a463e; }
.corgi-sticker { position:absolute; right:8px; bottom:8px; display:flex; align-items:center; gap:1px; padding:2px 3px; border:0; border-radius:44% 44% 52% 52%; background:#bf8d58; color:#2b1a0d; transform:rotate(-8deg); opacity:.75; font-size:7px; cursor:pointer; }
.corgi-sticker span { font-size:6px; }
.pc-tower-vents { position:absolute; right:7px; top:55px; width:10px; height:38px; background:repeating-linear-gradient(0deg,#5f5a50 0 1px,transparent 1px 4px); }
.pc-inputs { display:grid; gap:7px; }
.pc-keyboard { padding:5px 7px 8px; border:2px solid #615d52; border-radius:5px 5px 10px 10px; background:linear-gradient(#c8c2b0,#8b8678); transform:perspective(160px) rotateX(11deg); box-shadow:0 7px 10px rgba(0,0,0,.45); }
.pc-key-row { display:flex; justify-content:center; gap:2px; margin:2px 0; }
.pc-key-row button { display:grid; place-content:center; min-width:12px; height:11px; padding:0 2px; border:1px solid #605c52; border-radius:1px; background:linear-gradient(#ddd7c6,#aaa493); color:#555148; font:4px Arial; box-shadow:0 1px #514e46; cursor:pointer; }
.pc-key-row button:hover,.pc-key-row button:focus-visible { color:#25231f; background:linear-gradient(#eee8d7,#bbb5a4); outline:1px solid rgba(255,255,255,.55); }
.pc-key-row button:active,.pc-key-row button.is-pressed { transform:translateY(1px); background:#8f897c; box-shadow:inset 0 1px 2px #514e46; }
.pc-key-row button.space { flex:1; }
.pc-mouse { justify-self:end; position:relative; width:35px; height:25px; margin-right:18px; padding:0; border:1px solid #5c584e; border-radius:50% 50% 44% 44%; background:linear-gradient(#d0c9b7,#8f897c); box-shadow:0 5px 7px rgba(0,0,0,.38); cursor:pointer; }
.pc-mouse i { position:absolute; left:50%; top:1px; width:1px; height:9px; background:#5b574e; }
.pc-mouse span { position:absolute; left:50%; top:8px; width:4px; height:5px; transform:translateX(-50%); border:1px solid #615d53; background:#777267; }
.pc-mouse:hover,.pc-mouse:focus-visible { filter:brightness(1.12); outline:1px solid rgba(255,255,255,.55); }
.pc-mouse:active { transform:translateY(1px); box-shadow:0 3px 5px rgba(0,0,0,.45),inset 0 1px 2px #6f6a60; }
.machine-caption { margin:8px 0 0; color:#746a59; font:700 7px/1 var(--mono); letter-spacing:.11em; text-align:center; }

body.pc-focus-mode { overflow:hidden; }
body.pc-focus-mode::after { z-index:2050; background:rgba(0,0,0,.86); transform:none; backdrop-filter: blur(1px) saturate(.78); }
.computer-station.is-expanded {
  position:fixed; z-index:2200; left:var(--pc-focus-left,12px); top:var(--pc-focus-top,12px); width:min(960px,calc(100vw - 28px));
  max-width:none; max-height:calc(100vh - 20px); transform:none; filter:drop-shadow(0 40px 88px rgba(0,0,0,.92));
  overflow:auto; padding:18px 20px 20px; scrollbar-gutter:stable both-edges;
}
.computer-station.is-expanded .pc-monitor { width:min(820px,100%); margin:0 auto; }
.computer-station.is-expanded .pc-monitor-shell { padding:22px 21px 15px; }
.computer-station.is-expanded .pc-screen-bezel { padding:16px; }
.computer-station.is-expanded .pc-screen { font-size:17px; }
.computer-station.is-expanded .pc-glass {
  background: linear-gradient(112deg, rgba(255,255,255,.085), transparent 20% 71%, rgba(255,255,255,.018));
  box-shadow: inset 8px 0 16px rgba(0,0,0,.24), inset -8px 0 16px rgba(0,0,0,.3), inset 0 8px 14px rgba(0,0,0,.12), inset 0 -10px 18px rgba(0,0,0,.28);
}
.computer-station.is-expanded .pc-scanlines { opacity:.08; background:repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.18) 3px 4px); }
.computer-station.is-expanded .pc-desk { width:min(760px,100%); margin:12px auto 0; grid-template-columns:136px 1fr; }
.computer-station.is-expanded .pc-screen { font-size:15px; }
.computer-station.is-expanded .pc-desktop-icons { inset:10px 10px 30px; grid-template-columns:repeat(5,96px); gap:12px 10px; }
.computer-station.is-expanded .pc-icon { width:92px; min-height:74px; padding:3px; font-size:13px; line-height:1.12; }
.computer-station.is-expanded .pc-icon-art { width:42px; height:42px; margin-bottom:5px; font-size:26px; }
.computer-station.is-expanded .pc-taskbar { height:34px; padding:4px; }
.computer-station.is-expanded .pc-start-button,
.computer-station.is-expanded .pc-task-button,
.computer-station.is-expanded .pc-tray { height:25px; font-size:12px; }
.computer-station.is-expanded .pc-start-button { flex-basis:80px; }
.computer-station.is-expanded .pc-start-menu { bottom:33px; width:240px; min-height:285px; grid-template-columns:36px 1fr; }
.computer-station.is-expanded .pc-start-items button { min-height:35px; font-size:12px; grid-template-columns:35px 1fr; }
.computer-station.is-expanded .win95-window { width:min(80%,600px); min-height:240px; font-size:13px; }
.computer-station.is-expanded .win95-titlebar { height:25px; }
.computer-station.is-expanded .win95-titlebar strong { font-size:12px; }
.computer-station.is-expanded .win95-title-controls button { width:22px; height:19px; font-size:11px; }
.computer-station.is-expanded .win95-menubar { height:25px; font-size:11px; }
.computer-station.is-expanded .win95-menubar button { height:21px; padding:3px 8px; font-size:11px; }
.computer-station.is-expanded .win95-menu-popup { top:50px; min-width:160px; }
.computer-station.is-expanded .win95-menu-popup button { min-height:30px; font-size:11px; }
.computer-station.is-expanded .win95-body { min-height:190px; max-height:380px; font-size:13px; }
.computer-station.is-expanded .is-maximized .win95-body { max-height:calc(100% - 52px); }
.computer-station.is-expanded .win95-button,
.computer-station.is-expanded .pc-app-button { min-height:29px; font-size:12px; }
.computer-station.is-expanded .pc-boot { font-size:14px; line-height:1.5; }
.computer-station.is-expanded .pc-terminal { min-height:300px; font-size:13px; }
.computer-station.is-expanded .pc-terminal-output { height:246px; }
.computer-station.is-expanded .pc-mail-layout { min-height:280px; }
.computer-station.is-expanded .pc-notepad { height:295px; }
.computer-station.is-expanded .pc-notepad textarea { height:272px; font-size:13px; }
.computer-station.is-expanded .pc-bbs { min-height:274px; font-size:13px; }
.computer-station.is-expanded .pc-paint-canvas { height:284px; }

/* Portable television and its physical controls. */
.side-tv-station { width:100%; padding-top:32px; }
.side-tv-set { position:relative; width:100%; filter:drop-shadow(0 20px 20px rgba(0,0,0,.68)); }
.side-tv-handle { position:absolute; z-index:0; left:24%; right:24%; top:-22px; height:27px; border:5px solid #241c17; border-bottom:0; border-radius:17px 17px 0 0; background:#5d4330; box-shadow:inset 0 2px rgba(255,255,255,.1),0 -1px #000; }
.side-tv-handle i { position:absolute; left:14%; right:14%; top:5px; height:5px; border-radius:5px; background:#241a14; }
.side-tv-antenna { position:absolute; z-index:-1; left:50%; top:-55px; width:100px; height:55px; transform:translateX(-50%); }
.side-tv-antenna i { position:absolute; bottom:0; width:3px; height:62px; background:linear-gradient(90deg,#111,#aaa,#222); transform-origin:bottom; }
.side-tv-antenna i:first-child { left:47px; transform:rotate(-37deg); }
.side-tv-antenna i:nth-child(2) { right:47px; transform:rotate(31deg); }
.side-tv-antenna b { position:absolute; left:50%; bottom:-3px; width:38px; height:10px; transform:translateX(-50%); border-radius:50%; background:#181412; }
.side-tv-cabinet {
  position:relative; padding:12px 11px 10px; border:2px solid #17100c; border-radius:22px 22px 13px 13px;
  background:
    repeating-linear-gradient(91deg,transparent 0 15px,rgba(255,255,255,.018) 16px,transparent 17px 34px),
    linear-gradient(118deg,#2c1c14,#72503a 44%,#39271e 76%,#1f1511);
  box-shadow:inset 2px 2px rgba(255,255,255,.12),inset -6px -7px 12px rgba(0,0,0,.38),0 0 0 3px #20150f;
}
.side-tv-screw.screw-a { left:7px; top:7px; }
.side-tv-screw.screw-b { right:7px; top:7px; }
.side-tv-screw.screw-c { left:7px; bottom:7px; }
.side-tv-screw.screw-d { right:7px; bottom:7px; }
.side-tv-face { display:grid; grid-template-columns:minmax(0,1fr) 51px; gap:8px; }
.side-screen-bezel { padding:8px; border:2px solid #080706; border-radius:20px / 15px; background:linear-gradient(135deg,#161514,#393632 53%,#090909); box-shadow:inset 4px 4px 8px #000,1px 1px rgba(255,255,255,.08); }
.side-crt-screen { position:relative; isolation:isolate; aspect-ratio:4/3; overflow:hidden; border:2px solid #010201; border-radius:11% / 8%; background:#010201; box-shadow:inset 0 0 30px 9px #000,0 0 0 1px #252825; }
.side-screen-content { position:absolute; inset:4%; z-index:2; overflow:hidden; border-radius:7%; background:#020402; color:#e5e7d3; font-family:var(--mono); }
.side-screen-off { display:grid; place-content:center; height:100%; gap:2px; color:rgba(192,211,185,.08); text-align:center; letter-spacing:.13em; }
.side-screen-off span { font:900 21px/1 var(--ui); }
.side-screen-off small { font-size:5px; }
#side-static-canvas { position:absolute; inset:0; z-index:4; width:100%; height:100%; opacity:0; pointer-events:none; mix-blend-mode:screen; }
.side-tv-set[data-side-power="on"] #side-static-canvas { opacity:.16; }
.side-scanlines { position:absolute; inset:0; z-index:7; pointer-events:none; opacity:.42; background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.38) 2px 3px); }
.side-tracking-band { position:absolute; z-index:8; left:0; right:0; height:8%; top:-12%; opacity:.34; pointer-events:none; background:linear-gradient(transparent,rgba(240,255,235,.18),rgba(0,0,0,.5),transparent); animation:side-track 8.3s linear infinite; }
.side-screen-glare { position:absolute; inset:0; z-index:9; pointer-events:none; background:linear-gradient(118deg,rgba(255,255,255,.08),transparent 21% 75%,rgba(255,255,255,.02)); box-shadow:inset 13px 0 20px rgba(0,0,0,.55),inset -13px 0 20px rgba(0,0,0,.58),inset 0 -14px 21px rgba(0,0,0,.55); border-radius:inherit; }
.side-tv-osd { position:absolute; z-index:10; top:7%; right:8%; padding:2px 3px; color:#d8e7c7; font:700 7px/1 var(--mono); text-shadow:0 0 4px #fff; opacity:0; transition:opacity .2s; }
.side-tv-set.is-showing-osd .side-tv-osd { opacity:.9; }
@keyframes side-track { to { top:112%; } }
.side-control-panel { position:relative; display:flex; flex-direction:column; align-items:center; padding:7px 3px 5px; border:1px solid #0d0b0a; border-radius:9px; background:linear-gradient(120deg,#2b2925,#0e0e0d); box-shadow:inset 1px 1px rgba(255,255,255,.06); }
.side-tv-maker { margin-bottom:5px; color:#a39375; font:900 5px/1.25 var(--ui); letter-spacing:.1em; text-align:center; }
.side-tv-maker span { font-size:4px; font-weight:500; }
.side-knob { position:relative; width:31px; aspect-ratio:1; margin:1px 0 8px; padding:0; border:1px solid #050505; border-radius:50%; background:radial-gradient(circle at 35% 30%,#77736d,#272623 60%,#080808); box-shadow:inset 1px 1px rgba(255,255,255,.14),0 1px 2px #000; cursor:pointer; }
.side-knob i { position:absolute; left:50%; top:4px; width:2px; height:9px; transform-origin:center 11px; background:#b1a994; box-shadow:0 0 1px #000; }
.side-channel-knob i { transform:translateX(-50%) rotate(var(--channel-rotation,0deg)); }
.side-volume-knob i { transform:translateX(-50%) rotate(var(--volume-rotation,-80deg)); }
.side-power-knob i { transform:translateX(-50%) rotate(var(--power-rotation,-45deg)); }
.side-knob span { position:absolute; left:50%; top:33px; transform:translateX(-50%); color:#887e6e; font:700 4px/1 Arial; letter-spacing:.04em; white-space:nowrap; }
.side-speaker { flex:1 1 auto; width:35px; min-height:35px; margin-top:3px; background:radial-gradient(circle,#050505 0 1px,transparent 1.2px) 0 0/5px 5px; opacity:.74; }
.side-power-light { width:5px; height:5px; margin:4px 0 0; border-radius:50%; background:#411711; box-shadow:inset 0 0 2px #000; }
.side-tv-set[data-side-power="on"] .side-power-light { background:#d34d32; box-shadow:0 0 5px #f44b30; }
.side-tv-button-row { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; margin-top:8px; padding:6px; border:1px solid #1b130f; border-radius:4px; background:#251a14; }
.side-tv-button-row button { min-width:0; min-height:29px; padding:4px 2px; border:1px solid #090706; border-radius:2px; background:linear-gradient(#51463d,#211d19); color:#b7aa94; font:700 6px/1 Arial; cursor:pointer; touch-action:manipulation; box-shadow:inset 0 1px rgba(255,255,255,.08),0 1px #090706; }
.side-tv-button-row button:hover,.side-tv-button-row button:focus-visible { color:#ebddbe; background:linear-gradient(#5c5045,#27221d); outline:1px solid rgba(235,221,190,.42); outline-offset:1px; }
.side-tv-button-row button:active, .side-tv-button-row button[aria-pressed="true"] { transform:translateY(1px); background:#151311; color:#f0ddb7; box-shadow:inset 0 1px 4px #000; }
.side-tv-label-strip { display:flex; justify-content:space-between; align-items:center; gap:5px; min-height:12px; margin:7px 4px 0; color:#a99a80; font:700 6px/1 var(--mono); letter-spacing:.04em; }
.side-tv-label-strip span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.side-tv-label-strip b { flex:0 0 auto; white-space:nowrap; text-align:right; }
.side-tv-set[data-side-audio="playing"] .side-speaker { filter:brightness(1.2); box-shadow:0 0 8px rgba(218,189,133,.12); animation:side-speaker-live 1.6s ease-in-out infinite; }
@keyframes side-speaker-live { 0%,100% { opacity:.72; } 45% { opacity:.9; } 55% { opacity:.78; } }
.side-tv-set[data-side-audio="playing"] .side-tv-label-strip b { color:#d5c29d; }
.side-tv-set[data-side-audio="blocked"] .side-tv-label-strip b,
.side-tv-set[data-side-audio="error"] .side-tv-label-strip b { color:#e2a56e; animation:audio-alert 1.2s steps(2,end) infinite; }
@keyframes audio-alert { 50% { opacity:.48; } }
.side-tv-feet { display:flex; justify-content:space-between; width:78%; margin:0 auto; padding:0 7%; }
.side-tv-feet i { width:36px; height:8px; border-radius:0 0 6px 6px; background:#120e0b; box-shadow:0 4px 6px #000; }
.side-tv-set[data-side-picture="mono"] .side-screen-content { filter:grayscale(1) contrast(1.1); }
.side-tv-set[data-side-picture="warm"] .side-screen-content { filter:sepia(.25) saturate(.85); }
.side-tv-set[data-side-picture="blue"] .side-screen-content { filter:hue-rotate(16deg) saturate(.8); }
.side-tv-set.is-fine-drift .side-screen-content { animation:fine-drift .16s steps(2,end) infinite; }
@keyframes fine-drift { 50% { transform:translateX(1px); filter:contrast(1.3); } }

/* Twenty original channels. */
.side-channel { position:relative; min-height:100%; height:100%; overflow:hidden; background:#080a08; }
.side-channel * { box-sizing:border-box; }
.channel-bug { position:absolute; z-index:8; top:4px; left:5px; padding:1px 3px; background:rgba(0,0,0,.55); color:#eee; font:700 5px/1 var(--mono); letter-spacing:.08em; }
.channel-caption { position:absolute; z-index:8; left:4px; right:4px; bottom:4px; padding:2px 4px; background:rgba(0,0,0,.68); color:#e9e6d5; font:6px/1.2 var(--mono); }
.channel-ticker { position:absolute; z-index:7; left:0; right:0; bottom:0; height:13px; overflow:hidden; background:#101822; color:#e8e2c5; font:6px/13px var(--mono); white-space:nowrap; }
.channel-ticker span { display:inline-block; padding-left:100%; animation:ticker-run 16s linear infinite; }
@keyframes ticker-run { to { transform:translateX(-100%); } }

.ch-late-movie { background:#111; filter:grayscale(1) contrast(1.16); }
.movie-room { position:absolute; inset:0; background:linear-gradient(90deg,transparent 47%,#252525 48% 53%,transparent 54%),linear-gradient(#242424 0 62%,#0c0c0c 63%); }
.movie-window { position:absolute; left:12%; top:18%; width:32%; height:38%; border:4px solid #050505; background:repeating-linear-gradient(90deg,#bebebe 0 8px,#717171 8px 10px); box-shadow:0 0 18px #ddd; }
.movie-figure { position:absolute; right:18%; bottom:14%; width:14%; height:49%; border-radius:48% 48% 12% 12%; background:#050505; animation:movie-figure 7s ease-in-out infinite; }
.movie-figure::before { content:""; position:absolute; left:18%; top:-18%; width:65%; aspect-ratio:1; border-radius:50%; background:#050505; }
@keyframes movie-figure { 50% { transform:translateX(-11px); } }
.movie-title { position:absolute; left:8%; top:9%; color:#eee; font:900 8px/1 Georgia,serif; letter-spacing:.08em; }

.ch-weather { background:linear-gradient(#2b4f6a,#152d3e); }
.weather-map { position:absolute; inset:12% 4% 18%; opacity:.84; background:radial-gradient(ellipse at 25% 50%,transparent 0 18%,#45754f 19% 22%,transparent 23%),radial-gradient(ellipse at 55% 40%,transparent 0 22%,#557c56 23% 26%,transparent 27%),linear-gradient(125deg,transparent 35%,rgba(255,255,255,.48) 36% 38%,transparent 39%); }
.weather-radar { position:absolute; left:30%; top:18%; width:42%; aspect-ratio:1; border:1px solid rgba(255,255,255,.35); border-radius:50%; background:conic-gradient(from 0deg,rgba(73,255,99,.58),transparent 17% 100%); animation:radar-spin 3.6s linear infinite; }
.weather-temp { position:absolute; right:6%; top:8%; color:#fff; font:900 15px/1 Arial; }
@keyframes radar-spin { to { transform:rotate(1turn); } }

.ch-night-calls { background:radial-gradient(circle at 52% 38%,#623b62,#171026 63%); }
.call-host { position:absolute; left:38%; top:18%; width:25%; height:49%; border-radius:50% 50% 18% 18%; background:#18141b; box-shadow:0 0 0 6px #b38989,0 0 22px rgba(255,183,235,.28); }
.call-phone { position:absolute; left:12%; bottom:20%; width:28%; height:19%; border-radius:50%; background:#111; transform:rotate(-18deg); }
.call-question { position:absolute; left:6%; right:6%; top:7%; color:#f4dff2; font:900 7px/1.25 Arial; text-align:center; }

.ch-news { background:linear-gradient(140deg,#0d274c 0 55%,#802a22 56%); }
.news-desk { position:absolute; left:8%; right:8%; bottom:15%; height:24%; background:linear-gradient(#a1a1a1,#313131); transform:skewX(-8deg); }
.news-anchor { position:absolute; left:39%; top:19%; width:24%; height:47%; border-radius:48% 48% 8% 8%; background:#c6aa91; box-shadow:inset 0 -17px #313848; }
.news-anchor::before { content:""; position:absolute; left:17%; top:-11%; width:68%; height:23%; border-radius:50% 50% 30% 30%; background:#3a2b24; }
.news-headline { position:absolute; left:5%; top:6%; color:#fff; font:900 8px Arial; }

.ch-shopping { background:linear-gradient(125deg,#2f1644,#994783); }
.shop-item { position:absolute; left:14%; top:22%; width:39%; aspect-ratio:1; border-radius:12%; background:radial-gradient(circle,#f0c874 0 25%,#713c25 27% 47%,#e8d3a0 49%); box-shadow:0 0 16px #e8b2ef; animation:shop-spin 7s linear infinite; }
.shop-price { position:absolute; right:6%; top:27%; padding:4px; background:#fff; color:#b30a58; font:900 10px Arial; transform:rotate(-4deg); }
.shop-copy { position:absolute; right:5%; bottom:25%; width:40%; color:#fff; font:700 6px/1.2 Arial; text-align:center; }
@keyframes shop-spin { to { transform:rotate(1turn); } }

.ch-kitchen { background:linear-gradient(#6d7b4b,#2f3724); }
.kitchen-counter { position:absolute; left:0; right:0; bottom:13%; height:28%; background:#7a4c28; }
.kitchen-pot { position:absolute; left:35%; bottom:31%; width:32%; height:25%; border-radius:0 0 45% 45%; background:#9e9e98; box-shadow:inset 0 -6px #555; }
.kitchen-steam { position:absolute; left:44%; top:22%; width:4px; height:28%; border-radius:50%; background:rgba(255,255,255,.4); filter:blur(2px); animation:steam 2s ease-in-out infinite; }
.kitchen-steam::after { content:""; position:absolute; left:13px; top:7px; width:4px; height:80%; background:inherit; }
@keyframes steam { 50% { transform:translateY(-6px) rotate(8deg); opacity:.25; } }

.ch-wildlife { background:linear-gradient(#7d91a0 0 51%,#e6e5da 52% 100%); }
.wildlife-trees { position:absolute; inset:15% 0 34%; background:repeating-linear-gradient(81deg,transparent 0 14px,#25322d 15px 17px,transparent 18px 31px); }
.wildlife-deer { position:absolute; left:48%; bottom:22%; width:24%; height:16%; border-radius:60% 40% 35% 45%; background:#5b402f; animation:deer-look 4.2s ease-in-out infinite; }
.wildlife-deer::before { content:""; position:absolute; right:-6%; top:-54%; width:31%; aspect-ratio:.8; border-radius:50%; background:#604531; }
.wildlife-deer::after { content:""; position:absolute; left:13%; top:80%; width:2px; height:24px; background:#493426; box-shadow:17px 0 #493426,32px 0 #493426; }
@keyframes deer-look { 50% { transform:translateX(5px); } }

.ch-platform { background:#081012; }
.platform-wall { position:absolute; inset:0; background:linear-gradient(90deg,transparent 46%,#53645e 47% 51%,transparent 52%),repeating-linear-gradient(0deg,#111 0 18px,#1d2422 19px 20px); }
.platform-train { position:absolute; left:8%; right:8%; bottom:18%; height:37%; background:#79857f; border:2px solid #101412; animation:train-pass 8s ease-in-out infinite; }
.platform-train::before { content:""; position:absolute; left:12%; right:12%; top:18%; height:35%; background:repeating-linear-gradient(90deg,#0a1411 0 17px,#40544b 18px 21px); }
.platform-light { position:absolute; right:15%; top:24%; width:13%; aspect-ratio:1; border-radius:50%; background:#58df88; box-shadow:0 0 20px #58df88; animation:platform-flicker 1.3s steps(2,end) infinite; }
@keyframes train-pass { 50% { transform:translateX(-12px); } }
@keyframes platform-flicker { 45% { opacity:.3; } }

.ch-corgi { background:linear-gradient(#6bc1e0 0 62%,#79b25d 63%); }
.corgi-sun { position:absolute; right:11%; top:12%; width:20%; aspect-ratio:1; border-radius:50%; background:#ffe271; }
.corgi-hero { position:absolute; left:34%; bottom:16%; width:33%; height:33%; border-radius:46% 46% 32% 32%; background:#c78645; animation:corgi-hop 1.8s ease-in-out infinite; }
.corgi-hero::before,.corgi-hero::after { content:""; position:absolute; top:-28%; width:29%; height:42%; background:#9e5c2e; clip-path:polygon(50% 0,100% 100%,0 100%); }
.corgi-hero::before { left:5%; }
.corgi-hero::after { right:5%; }
.corgi-face { position:absolute; inset:34% 20% 15%; border-radius:50%; background:#f1d2a4; }
.corgi-face::before { content:"• ᴥ •"; position:absolute; left:0; right:0; top:22%; color:#21140c; font:900 8px Arial; text-align:center; }
@keyframes corgi-hop { 50% { transform:translateY(-7px) rotate(-2deg); } }

.ch-music { background:radial-gradient(circle,#54235f,#070510 70%); }
.music-bars { position:absolute; left:7%; right:7%; top:17%; bottom:23%; display:flex; align-items:flex-end; justify-content:space-between; gap:2px; }
.music-bars i { flex:1; height:var(--bar,40%); background:linear-gradient(#f5e87d,#d243b6); animation:bar-dance var(--speed,.8s) ease-in-out infinite alternate; animation-delay:var(--delay,0s); }
@keyframes bar-dance { to { height:12%; filter:hue-rotate(70deg); } }
.music-title { position:absolute; left:0; right:0; bottom:8%; color:#fff; font:900 7px Arial; text-align:center; letter-spacing:.12em; }

.ch-teletext { padding:11% 5% 8%; background:#000; color:#fff; font:700 6px/1.3 var(--mono); }
.teletext-head { display:flex; justify-content:space-between; margin-bottom:5px; padding:2px; background:#1736c9; color:#fff; }
.teletext-row { display:grid; grid-template-columns:20px 1fr; gap:4px; margin:2px 0; }
.teletext-row b { color:#e8e35b; }
.teletext-row:nth-child(3n) span { color:#65e56d; }
.teletext-row:nth-child(3n+1) span { color:#e569d6; }

.ch-warning { background:#101417; }
.warning-grid { position:absolute; inset:0; background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 2px,transparent 2px 7px); }
.warning-banner { position:absolute; left:5%; right:5%; top:24%; padding:7px 4px; border:2px solid #e1d45d; background:#6d241c; color:#fff4bb; font:900 9px/1.15 Arial; text-align:center; animation:warning-flash 1.2s steps(2,end) infinite; }
.warning-detail { position:absolute; left:8%; right:8%; bottom:20%; color:#ddd; font:6px/1.3 var(--mono); text-align:center; }
@keyframes warning-flash { 50% { filter:brightness(1.45); } }

.ch-numbers { background:#020402; color:#b8d4b1; }
.numbers-wave { position:absolute; left:5%; right:5%; top:21%; height:28%; background:repeating-linear-gradient(90deg,transparent 0 6px,#6e9e6e 7px 8px,transparent 9px 14px); mask:linear-gradient(135deg,transparent 0 12%,#000 13% 47%,transparent 48% 52%,#000 53% 82%,transparent 83%); animation:numbers-slide 3s linear infinite; }
.numbers-code { position:absolute; left:0; right:0; top:54%; color:#d8edcf; font:900 15px/1 var(--mono); text-align:center; letter-spacing:.18em; text-shadow:0 0 8px #b3ff9c; }
.numbers-sub { position:absolute; left:0; right:0; top:72%; color:#74906d; font:6px var(--mono); text-align:center; }
@keyframes numbers-slide { to { background-position:28px 0; } }

.ch-game-show { background:conic-gradient(from 90deg,#bf382a,#d1ae39,#256199,#bf382a); }
.game-door { position:absolute; top:19%; width:28%; height:56%; border:4px solid #edda9d; background:#3b2419; color:#fff; font:900 19px/2 Arial; text-align:center; box-shadow:0 0 12px #ffe49a; }
.game-door.left { left:12%; }
.game-door.right { right:12%; }
.game-host { position:absolute; left:45%; bottom:13%; width:11%; height:35%; border-radius:50% 50% 8% 8%; background:#202b4d; }

.ch-dead-air { background:#010201; }
.dead-static { position:absolute; inset:0; opacity:.65; background:repeating-radial-gradient(circle at 20% 10%,#fff 0 1px,#111 1px 3px); animation:dead-static .11s steps(2,end) infinite; }
.dead-shape { position:absolute; left:41%; top:26%; width:18%; height:48%; opacity:.12; border-radius:48% 48% 16% 16%; background:#d7f0d0; filter:blur(2px); animation:dead-shape 7s ease-in-out infinite; }
@keyframes dead-static { 50% { transform:translate(2px,-1px); filter:invert(1); } }
@keyframes dead-shape { 50% { opacity:.28; transform:scale(1.08); } }

.ch-security { background:#101312; }
.security-grid { position:absolute; inset:8% 3% 15%; display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.security-cam { position:relative; overflow:hidden; border:1px solid #5b665e; background:linear-gradient(155deg,#15201a,#030504); }
.security-cam::before { content:""; position:absolute; left:50%; top:0; width:2px; height:100%; background:#55635b; }
.security-cam::after { content:attr(data-cam); position:absolute; left:2px; bottom:2px; color:#a6b1a7; font:5px var(--mono); }
.security-sweep { position:absolute; left:0; right:0; height:2px; background:#9ee39e; box-shadow:0 0 5px #9ee39e; animation:security-sweep 3s linear infinite; }
@keyframes security-sweep { to { transform:translateY(75px); } }

.ch-fishing { background:linear-gradient(#111c28 0 47%,#152f3a 48% 100%); }
.fishing-moon { position:absolute; right:13%; top:10%; width:19%; aspect-ratio:1; border-radius:50%; background:#ddd9b0; box-shadow:0 0 12px #ddd9b0; }
.fishing-boat { position:absolute; left:28%; bottom:29%; width:43%; height:10%; border-radius:0 0 50% 50%; background:#16100c; animation:boat-rock 3s ease-in-out infinite; }
.fishing-line { position:absolute; left:48%; top:-50%; width:1px; height:80%; background:#ddd; transform:rotate(-16deg); transform-origin:bottom; }
@keyframes boat-rock { 50% { transform:rotate(2deg) translateY(2px); } }

.ch-computer-club { padding:11% 5% 9%; background:#06140b; color:#68ff76; font:6px/1.35 var(--mono); }
.club-title { margin-bottom:4px; color:#fff; font-weight:900; }
.club-cursor { display:inline-block; width:5px; height:7px; background:#68ff76; animation:cursor-blink 1s steps(2,end) infinite; }
@keyframes cursor-blink { 50% { opacity:0; } }

.ch-vcr-monitor { padding:13% 6%; background:#07100d; color:#b9d3ba; font:7px/1.45 var(--mono); }
.vcr-monitor-title { padding-bottom:4px; border-bottom:1px solid #54705b; color:#f1e4a1; font-weight:900; }
.vcr-monitor-row { display:flex; justify-content:space-between; gap:4px; margin-top:5px; }
.vcr-monitor-row b { color:#fff; }
.vcr-monitor-pulse { height:22px; margin-top:7px; background:repeating-linear-gradient(90deg,transparent 0 4px,#71a875 5px 6px,transparent 7px 11px); animation:numbers-slide 2s linear infinite; }

.ch-calibration { background:#111; }
.cal-bars { position:absolute; inset:0 0 26%; display:grid; grid-template-columns:repeat(7,1fr); }
.cal-bars i:nth-child(1){background:#d9d9d9}.cal-bars i:nth-child(2){background:#dad63e}.cal-bars i:nth-child(3){background:#32c9d2}.cal-bars i:nth-child(4){background:#36c43b}.cal-bars i:nth-child(5){background:#d044c8}.cal-bars i:nth-child(6){background:#d33b35}.cal-bars i:nth-child(7){background:#2940c9}
.cal-bottom { position:absolute; left:0; right:0; bottom:0; height:26%; background:linear-gradient(90deg,#0d1b8a 0 16%,#fff 17% 32%,#4c1261 33% 48%,#050505 49% 66%,#888 67% 83%,#111 84%); }
.cal-code { position:absolute; z-index:3; left:0; right:0; top:38%; padding:3px; background:rgba(0,0,0,.7); color:#fff; font:900 8px var(--mono); text-align:center; }

.channel-guide { height:100%; padding:8% 5% 4%; overflow:auto; background:#090d0c; color:#d8e4d0; font:6px/1.15 var(--mono); }
.channel-guide h3 { margin:0 0 4px; color:#eedc81; font:900 8px var(--mono); }
.channel-guide-grid { display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.channel-guide button { min-height:17px; padding:2px 3px; border:1px solid #435144; background:#111a15; color:#b6c6b3; font:5px/1 var(--mono); text-align:left; }
.channel-guide button:hover,.channel-guide button:focus-visible { background:#30473a; color:#fff; }

/* Physical objects that reward idle clicking without taking over the room. */
.room-gadget-shelf {
  display:grid; grid-template-columns:1fr 1fr 1fr; align-items:end; gap:7px; min-height:71px; padding:7px 9px 4px;
  border:1px solid #1b110c; border-radius:5px; background:linear-gradient(180deg,#3f2111,#1a0d08 72%,#090504); box-shadow:inset 0 1px rgba(255,255,255,.08),0 8px 13px rgba(0,0,0,.38);
}
.desk-lamp,.room-clock,.room-intercom { position:relative; min-width:0; min-height:56px; padding:0; border:0; background:transparent; color:#8d806b; cursor:pointer; }
.desk-lamp em,.room-clock em,.room-intercom em { position:absolute; left:0; right:0; bottom:0; font:700 5px/1 var(--mono); font-style:normal; letter-spacing:.06em; text-align:center; }
.lamp-shade { position:absolute; left:50%; top:2px; width:38px; height:18px; transform:translateX(-50%); clip-path:polygon(18% 0,82% 0,100% 100%,0 100%); background:linear-gradient(#94663e,#352116); border-bottom:2px solid #160c08; }
.lamp-neck { position:absolute; left:50%; top:18px; width:3px; height:25px; transform:translateX(-50%) rotate(8deg); background:#5c5141; box-shadow:1px 0 #1f1a15; }
.lamp-base { position:absolute; left:50%; bottom:10px; width:35px; height:8px; transform:translateX(-50%); border-radius:50%; background:#4d392a; box-shadow:0 3px 4px #000; }
.desk-lamp[aria-pressed="true"] .lamp-shade { background:linear-gradient(#f0b76a,#80502d); box-shadow:0 -3px 19px rgba(255,185,91,.5); }
.clock-face { position:absolute; left:50%; top:2px; width:39px; aspect-ratio:1; transform:translateX(-50%); border:4px solid #4b3222; border-radius:50%; background:radial-gradient(circle,#d8cfb7,#aa9f83); box-shadow:inset 0 0 0 1px #4e4738,0 3px 5px #000; }
.clock-face::before { content:""; position:absolute; inset:3px; border-radius:50%; background:repeating-conic-gradient(#4c4538 0 1deg,transparent 1deg 30deg); opacity:.55; }
.clock-face i { position:absolute; left:50%; bottom:50%; width:1px; transform-origin:bottom; background:#29251f; }
.clock-hour { height:9px; transform:rotate(352deg); }
.clock-minute { height:13px; transform:rotate(282deg); }
.clock-face b { position:absolute; left:50%; top:50%; width:3px; height:3px; transform:translate(-50%,-50%); border-radius:50%; background:#211e19; }
.room-intercom { border:1px solid #4f4639; border-radius:3px; background:linear-gradient(#9a907d,#615b50); box-shadow:inset 1px 1px #d5cebe,0 3px 5px #000; }
.intercom-grille { position:absolute; left:10px; right:10px; top:8px; height:24px; background:radial-gradient(circle,#2f2c27 0 1px,transparent 1.2px) 0 0/5px 5px; }
.room-intercom i { position:absolute; left:50%; bottom:12px; width:11px; height:7px; transform:translateX(-50%); border:1px solid #39342d; border-radius:2px; background:#8b3527; }

/* Responsive room layout. */
@media (max-width: 1470px) {
  .expanded-room { grid-template-columns:minmax(260px,330px) minmax(560px,1fr) minmax(255px,300px); gap:14px; }
  .computer-station { max-width:310px; }
  .pc-monitor-shell { padding:15px 14px 10px; }
  .pc-desk { grid-template-columns:66px 1fr; }
  .right-room-column .tape-title { font-size:8px; }
}

@media (max-width: 1220px) {
  .expanded-room {
    grid-template-columns:minmax(0,1fr) minmax(280px,340px);
    grid-template-areas:"main right" "computer right";
    align-items:start;
    padding-top:50px;
  }
  .console-column { grid-area:main; align-self:end; }
  .right-room-column { grid-area:right; align-self:start; position:sticky; top:12px; }
  .computer-station { grid-area:computer; max-width:470px; justify-self:center; margin-top:24px; }
  .computer-station:not(.is-expanded) .pc-desk { grid-template-columns:92px 1fr; }
  .computer-station:not(.is-expanded) .pc-screen { font-size:12px; }
}

@media (max-width: 900px) {
  .expanded-room {
    grid-template-columns:1fr;
    grid-template-areas:"main" "right" "computer";
    padding-top:45px;
  }
  .right-room-column { position:static; width:min(620px,100%); margin:0 auto; }
  .side-tv-station { width:min(430px,100%); margin:0 auto; }
  .room-gadget-shelf { width:min(430px,100%); margin:0 auto; }
  .right-room-column .tape-library { width:min(900px,100%); }
  .right-room-column .tape-stack { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .right-room-column .tape-title { font-size:10px; }
  .computer-station { width:min(540px,100%); max-width:none; }
  .computer-station:not(.is-expanded) .pc-desktop-icons { grid-template-columns:repeat(4,68px); }
  .computer-station:not(.is-expanded) .pc-icon { width:68px; font-size:9px; }
  .computer-station:not(.is-expanded) .pc-desk { grid-template-columns:105px 1fr; }
}

@media (max-width: 560px) {
  .expanded-room { gap:22px; padding-top:42px; }
  .main-tv-top-badge { font-size:5px; max-width:64%; }
  .main-tv-feet i { width:42px; }
  .main-tv-service-controls { margin-top:13px; }
  .main-tv-service-controls button { min-height:21px; font-size:5px; }
  .side-tv-station { padding-top:36px; }
  .side-tv-face { grid-template-columns:minmax(0,1fr) 47px; }
  .side-tv-button-row { grid-template-columns:repeat(4,1fr); }
  .room-gadget-shelf { min-height:65px; }
  .right-room-column .tape-stack { grid-template-columns:1fr; }
  .computer-station { padding:0 2px; }
  .computer-station:not(.is-expanded) .pc-monitor-shell { padding:13px 11px 9px; }
  .computer-station:not(.is-expanded) .pc-desktop-icons { grid-template-columns:repeat(3,58px); }
  .computer-station:not(.is-expanded) .pc-icon { width:58px; min-height:49px; font-size:8px; }
  .computer-station:not(.is-expanded) .pc-desk { grid-template-columns:78px 1fr; margin-inline:8px; }
  .computer-station.is-expanded { inset:4px; left:0; top:0; width:auto; max-height:none; transform:none; padding:8px; }
  .computer-station.is-expanded .pc-desktop-icons { grid-template-columns:repeat(3,72px); }
  .computer-station.is-expanded .pc-icon { width:70px; }
  .computer-station.is-expanded .pc-desk { grid-template-columns:88px 1fr; }
  .computer-station.is-expanded .win95-window { width:92%; }
}

@media (prefers-reduced-motion: reduce) {
  .side-speaker,.side-tracking-band,.movie-figure,.weather-radar,.wildlife-deer,.platform-train,.platform-light,.corgi-hero,.music-bars i,.numbers-wave,.warning-banner,.dead-static,.dead-shape,.security-sweep,.fishing-boat,.club-cursor { animation:none !important; }
}

/* Audio element is attached for broad browser compatibility but never occupies layout. */
.side-tv-audio-engine[hidden] { display:none !important; }
.side-tv-set[data-side-audio="blocked"] .side-crt-screen { cursor:pointer; }
.side-tv-set[data-side-audio="blocked"] .side-crt-screen::after {
  content:"CLICK SCREEN FOR SOUND"; position:absolute; z-index:14; left:50%; bottom:8%; transform:translateX(-50%);
  padding:3px 5px; border:1px solid rgba(225,235,205,.25); background:rgba(0,5,0,.72); color:#dce7cb;
  font:700 6px/1 var(--mono); letter-spacing:.04em; white-space:nowrap; text-shadow:0 0 4px #fff; pointer-events:none;
}