/*
  Kadabra Games room v5
  Clean hero layout, sharp device close-ups, Edwardian room hardware,
  magneto telephone, calendar, and expanded portable-TV presentation.
*/

:root {
  --v5-brass: #c8a452;
  --v5-brass-hi: #f0d483;
  --v5-brass-dark: #5d451c;
  --v5-walnut: #2c150c;
  --v5-walnut-hi: #6f3b1e;
  --v5-bakelite: #12100e;
  --v5-cream: #d5ccb4;
  --v5-green: #97c391;
}

/* ---------- Clean room hierarchy ---------- */
.room-layout-v4 {
  display: block !important;
  min-height: 0 !important;
  padding: clamp(34px, 4vw, 64px) 4px 32px !important;
}

.hero-zone {
  width: min(1320px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(580px, 1fr) minmax(285px, 350px);
  align-items: end;
  gap: clamp(14px, 2vw, 30px);
}

.hero-zone .console-column {
  width: 100%;
  max-width: 950px;
  justify-self: center;
}

.hero-zone .tape-library {
  width: 100%;
  align-self: end;
  margin: 0;
}

.background-zone {
  position: relative;
  width: min(1420px, 100%);
  margin: clamp(50px, 7vw, 95px) auto 0;
  padding: 26px 18px 18px;
  display: grid;
  grid-template-columns: minmax(270px, 1.05fr) minmax(250px, .86fr) minmax(265px, .92fr) minmax(220px, .68fr);
  align-items: end;
  gap: clamp(16px, 2.2vw, 34px);
  border-top: 1px solid rgba(204, 164, 82, .2);
  background:
    linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.3)),
    radial-gradient(ellipse at center top, rgba(111,59,30,.14), transparent 72%);
}

.background-zone::before {
  content: "OTHER EQUIPMENT — CLICK VIEW TO INSPECT";
  position: absolute;
  left: 18px;
  top: -19px;
  color: rgba(207,180,124,.48);
  font: 700 8px/1 var(--studio-mono, monospace);
  letter-spacing: .18em;
}

.background-bay {
  position: relative;
  min-width: 0;
  display: grid;
  align-content: end;
  justify-items: center;
  opacity: .78;
  transition: opacity .2s ease, translate .2s ease;
}

.background-bay:hover,
.background-bay:focus-within {
  opacity: 1;
  translate: 0 -3px;
}

.computer-bay { align-self: stretch; }
.phone-bay { gap: 14px; }
.side-tv-bay { align-self: end; }
.utility-bay { gap: 12px; }

.background-zone .computer-station {
  width: min(100%, 395px);
  max-width: 395px;
  margin-top: 56px;
}

.background-zone .side-tv-station {
  width: min(100%, 330px);
  padding-top: 34px;
}

.background-zone .phone-station {
  width: min(100%, 305px);
}

.utility-bay-heading {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid rgba(209,173,95,.18);
  background: rgba(7,5,4,.55);
  text-align: center;
}
.utility-bay-heading span,
.utility-bay-heading small { display: block; }
.utility-bay-heading span { color: #bc9b59; font: 800 8px/1.2 var(--studio-ui); letter-spacing: .13em; }
.utility-bay-heading small { margin-top: 3px; color: #766851; font: 6px/1.2 var(--studio-mono); }

.utility-bay .room-gadget-shelf,
.utility-bay .room-signal-console {
  width: 100%;
  margin: 0;
  transform: none;
}

/* Main TV remains the visual center. */
.hero-zone .tv-set { width: min(100%, 950px); }
.hero-zone .vcr-unit { width: min(88%, 780px); }
.hero-zone .instruction-plaque { width: min(82%, 720px); }

.main-tv-service-controls {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
#main-focus-button { color: #e9d39c; border-color: rgba(220,185,106,.45); }

.side-tv-button-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
#side-focus-button {
  color: #ead8b0;
  border-color: rgba(217,181,106,.48);
  background: linear-gradient(#4e433a,#211d19);
}

/* ---------- Sharp universal device focus ---------- */
body.device-focus-open {
  overflow: hidden !important;
}

.device-focus-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  overflow: auto;
  padding: 12px;
  background:
    radial-gradient(ellipse at center, rgba(29,19,12,.94), rgba(4,3,2,.985) 72%),
    #040302;
  overscroll-behavior: contain;
}
.device-focus-overlay[hidden] { display: none !important; }
.device-focus-frame {
  width: 100%;
  min-height: calc(100vh - 24px);
  display: grid;
  grid-template-rows: auto 1fr;
  align-items: start;
}
.device-focus-header {
  position: sticky;
  top: 0;
  z-index: 4;
  width: min(1180px, 100%);
  margin: 0 auto 12px;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 9px 7px 13px;
  border: 1px solid #5e4824;
  border-radius: 4px;
  background: linear-gradient(#271c11,#100b07);
  box-shadow: 0 8px 25px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.05);
}
.device-focus-header span { display: flex; align-items: center; gap: 9px; min-width: 0; }
.device-focus-header i { width: 8px; height: 8px; border-radius: 50%; background: #8cb984; box-shadow: 0 0 9px rgba(140,185,132,.5); }
.device-focus-header b { overflow: hidden; color: #d9c69b; font: 800 10px/1 var(--studio-ui); letter-spacing: .14em; text-overflow: ellipsis; white-space: nowrap; }
.device-focus-header button {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid #8c6d32;
  border-radius: 3px;
  background: linear-gradient(#4b3a1d,#21170c);
  color: #f0d996;
  font: 800 8px/1 var(--studio-ui);
  letter-spacing: .1em;
  cursor: pointer;
}
.device-focus-stage {
  width: 100%;
  min-height: calc(100vh - 88px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8px 4px 24px;
}
.device-focus-placeholder { visibility: hidden; pointer-events: none; }

.device-in-focus {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  margin: auto 0 !important;
  max-width: calc(100vw - 36px) !important;
  max-height: none !important;
  transform: none !important;
  translate: none !important;
  filter: none !important;
  opacity: 1 !important;
  isolation: isolate;
}
.device-in-focus * {
  text-rendering: geometricPrecision;
}
.device-in-focus[data-focus-kind="computer"] {
  width: min(940px, calc(100vw - 36px)) !important;
  padding: 0 12px 20px !important;
}
.device-in-focus[data-focus-kind="computer"] .pc-monitor {
  width: min(840px, 100%) !important;
  margin: 0 auto !important;
  filter: none !important;
}
.device-in-focus[data-focus-kind="computer"] .pc-monitor-shell {
  padding: 24px 23px 16px !important;
  box-shadow: inset 2px 2px rgba(255,255,255,.58), inset -5px -7px 13px rgba(58,55,48,.28), 0 0 0 3px #827d6e, 0 25px 55px rgba(0,0,0,.65) !important;
}
.device-in-focus[data-focus-kind="computer"] .pc-screen-bezel { padding: 17px !important; }
.device-in-focus[data-focus-kind="computer"] .pc-screen {
  font-size: 17px !important;
  image-rendering: auto !important;
  filter: none !important;
  -webkit-font-smoothing: none;
  font-smooth: never;
}
.device-in-focus[data-focus-kind="computer"] .pc-glass {
  opacity: .25 !important;
  background: linear-gradient(112deg, rgba(255,255,255,.055), transparent 20% 78%, rgba(255,255,255,.012)) !important;
  box-shadow: inset 5px 0 11px rgba(0,0,0,.17), inset -5px 0 11px rgba(0,0,0,.2), inset 0 -7px 12px rgba(0,0,0,.17) !important;
}
.device-in-focus[data-focus-kind="computer"] .pc-scanlines {
  opacity: .045 !important;
  background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(0,0,0,.16) 4px 5px) !important;
}
.device-in-focus[data-focus-kind="computer"] .pc-desktop-icons {
  inset: 12px 12px 34px !important;
  grid-template-columns: repeat(6, 102px) !important;
  gap: 12px 8px !important;
}
.device-in-focus[data-focus-kind="computer"] .pc-icon {
  width: 98px !important;
  min-height: 78px !important;
  padding: 4px !important;
  font-size: 14px !important;
  line-height: 1.13 !important;
}
.device-in-focus[data-focus-kind="computer"] .pc-icon-art {
  width: 44px !important;
  height: 44px !important;
  margin-bottom: 5px !important;
  font-size: 27px !important;
}
.device-in-focus[data-focus-kind="computer"] .pc-taskbar { height: 36px !important; padding: 4px !important; }
.device-in-focus[data-focus-kind="computer"] .pc-start-button,
.device-in-focus[data-focus-kind="computer"] .pc-task-button,
.device-in-focus[data-focus-kind="computer"] .pc-tray { height: 27px !important; font-size: 13px !important; }
.device-in-focus[data-focus-kind="computer"] .pc-window-layer { bottom: 36px !important; }
.device-in-focus[data-focus-kind="computer"] .win95-window { font-size: 13px !important; }
.device-in-focus[data-focus-kind="computer"] .win95-body { font-size: 13px !important; }
.device-in-focus[data-focus-kind="computer"] .pc-desk {
  width: min(790px, 100%) !important;
  margin: 13px auto 0 !important;
  grid-template-columns: 140px 1fr !important;
}

.device-in-focus[data-focus-kind="main-tv"] {
  width: min(1160px, calc(100vw - 36px)) !important;
}
.device-in-focus[data-focus-kind="main-tv"] .tv-set { width: min(100%, 1080px) !important; }
.device-in-focus[data-focus-kind="main-tv"] .vcr-unit { width: min(89%, 900px) !important; }
.device-in-focus[data-focus-kind="main-tv"] .screen-content { font-size: 16px; }

.device-in-focus[data-focus-kind="side-tv"] {
  width: min(820px, calc(100vw - 36px)) !important;
  padding-top: 72px !important;
}
.device-in-focus[data-focus-kind="side-tv"] .side-tv-set { width: 100% !important; filter: none !important; }
.device-in-focus[data-focus-kind="side-tv"] .side-tv-face { grid-template-columns: minmax(0,1fr) 118px !important; gap: 14px !important; }
.device-in-focus[data-focus-kind="side-tv"] .side-control-panel { padding: 14px 8px !important; }
.device-in-focus[data-focus-kind="side-tv"] .side-tv-button-row button { min-height: 37px !important; font-size: 10px !important; }
.device-in-focus[data-focus-kind="side-tv"] .side-screen-content { font-size: 14px; }
.device-in-focus[data-focus-kind="side-tv"] .channel-guide-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }

.device-in-focus[data-focus-kind="phone"] {
  width: min(700px, calc(100vw - 36px)) !important;
}
.device-in-focus[data-focus-kind="phone"] .phone-body { min-height: 630px; }
.device-in-focus[data-focus-kind="phone"] .phone-transcript { min-height: 86px; font-size: 15px; }
.device-in-focus[data-focus-kind="phone"] .phone-number-window span { font-size: 22px; }

.device-in-focus[data-focus-kind="clock"],
.device-in-focus[data-focus-kind="lamp"],
.device-in-focus[data-focus-kind="calendar"] {
  width: min(520px, calc(100vw - 36px)) !important;
  min-height: 520px;
}

/* Disable the old transform-based PC focus completely. */
body.pc-focus-mode::before,
body.pc-focus-mode::after { filter: none !important; backdrop-filter: none !important; }
.computer-station.is-expanded { position: relative !important; inset: auto !important; width: auto !important; max-width: none !important; max-height: none !important; padding: 0 !important; transform: none !important; overflow: visible !important; filter: none !important; }

/* ---------- Clean, realistic cassette spines ---------- */
.tape-stack { gap: 7px !important; padding: 6px 3px !important; }
.vhs-tape {
  --shift: 0px !important;
  --tilt: 0deg !important;
  width: 100% !important;
  height: 58px !important;
  margin: 0 !important;
  border-radius: 3px !important;
  transform: none !important;
  overflow: hidden;
  box-shadow: inset 0 1px rgba(255,255,255,.09), inset 0 -2px 2px rgba(0,0,0,.7), 0 4px 6px rgba(0,0,0,.72) !important;
}
.vhs-tape:hover,
.vhs-tape:focus-visible {
  transform: translateX(-7px) translateY(-1px) !important;
}
/* The old generic child rule overrode absolute positioning and created the black bars in the screenshot. */
.vhs-tape > .tape-window,
.vhs-tape > .tape-edge {
  position: absolute !important;
}
.vhs-tape > .tape-window {
  left: 50% !important;
  bottom: 5px !important;
  width: 84px !important;
  height: 10px !important;
  transform: translateX(-50%) !important;
}
.vhs-tape > .tape-edge-left { left: 10px !important; right: auto !important; bottom: 8px !important; }
.vhs-tape > .tape-edge-right { right: 10px !important; left: auto !important; bottom: 8px !important; }
.vhs-tape .tape-meta { padding-bottom: 12px !important; }
.vhs-tape .tape-code { font-size: 5.8px !important; letter-spacing: .14em !important; }
.vhs-tape .tape-reel { width: 8px !important; height: 8px !important; margin-top: -4px !important; }
.vhs-tape .tape-index,
.vhs-tape .tape-format { z-index: 3; }

/* ---------- Internet note and current-date 1996 calendar ---------- */
.internet-sticky-note {
  position: absolute;
  z-index: 7;
  top: 0;
  left: 50%;
  width: 190px;
  min-height: 122px;
  padding: 15px 16px 12px;
  border: 0;
  background:
    linear-gradient(100deg, transparent 0 96%, rgba(0,0,0,.08) 96%),
    #d8c277;
  box-shadow: 0 8px 12px rgba(0,0,0,.42), inset 0 -12px 18px rgba(107,76,20,.1);
  color: #47371f;
  text-align: left;
  rotate: -2deg;
  translate: -50% 0;
  cursor: pointer;
}
.internet-sticky-note::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -7px;
  width: 74px;
  height: 16px;
  translate: -50% 0;
  background: rgba(207,188,135,.72);
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.internet-sticky-note strong,
.internet-sticky-note span,
.internet-sticky-note em { display: block; }
.internet-sticky-note strong { margin-bottom: 8px; font: 900 13px/1.05 "Comic Sans MS", cursive; }
.internet-sticky-note span { font: 700 9px/1.45 "Comic Sans MS", cursive; }
.internet-sticky-note em { margin-top: 7px; font: 700 7px/1.2 "Comic Sans MS", cursive; }
.internet-sticky-note:hover { rotate: -1deg; filter: brightness(1.08); }

.wall-calendar {
  position: relative;
  width: 150px;
  min-height: 186px;
  padding: 0 8px 10px;
  border: 1px solid #311c0e;
  background: #e4dbc2;
  box-shadow: 0 10px 18px rgba(0,0,0,.48), inset 0 0 0 2px rgba(255,255,255,.35);
  color: #2b2014;
  cursor: pointer;
}
.calendar-hanger { position: absolute; left: 50%; top: -12px; width: 34px; height: 18px; translate: -50% 0; border: 3px solid #5b4724; border-bottom: 0; border-radius: 15px 15px 0 0; }
.calendar-art { display: grid; place-content: end center; height: 48px; margin: 0 -8px 7px; padding-bottom: 5px; background: linear-gradient(#242d31,#71684d); color: #f2e0a6; overflow: hidden; }
.calendar-art::before { content:""; position:absolute; left:18px; top:20px; width:48px; height:25px; background:linear-gradient(150deg,transparent 48%,#a98a50 49% 58%,transparent 59%),linear-gradient(30deg,transparent 45%,#6b7a6a 46% 62%,transparent 63%); opacity:.7; }
.calendar-art b { position: relative; font: 700 6px/1 var(--studio-ui); letter-spacing:.13em; }
.calendar-month { display:block; color:#9d2e25; font:900 13px/1 var(--studio-ui); letter-spacing:.1em; }
.calendar-day { display:block; margin:3px 0 0; font:900 62px/.9 Georgia,serif; }
.calendar-year { display:block; margin-top:3px; font:900 15px/1 var(--studio-mono); }
.wall-calendar small { display:block; margin-top:5px; color:#6d5e45; font:700 7px/1 var(--studio-ui); letter-spacing:.15em; }

/* ---------- Edwardian-inspired telephone ---------- */
.phone-station { position: relative; color: #dbc58e; }
.phone-junction {
  position: absolute;
  z-index: 0;
  right: -10px;
  top: 28px;
  width: 62px;
  height: 104px;
  padding: 8px 6px;
  border: 2px solid #2a180c;
  border-radius: 4px;
  background: linear-gradient(135deg,#7c552f,#2f1c10);
  box-shadow: inset 0 0 0 2px rgba(218,174,90,.16), 0 8px 15px rgba(0,0,0,.55);
}
.phone-junction b,
.phone-junction span { display:block; text-align:center; font:700 5px/1.2 var(--studio-mono); }
.phone-junction i { display:inline-block; width:8px; height:8px; margin:12px 3px 5px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#d7c189,#5c4826 58%,#17100a 60%); }
.phone-cable { position:absolute; z-index:0; left:22px; right:-8px; top:113px; height:5px; border-radius:50%; background:repeating-linear-gradient(90deg,#17110d 0 4px,#4c3725 4px 7px); rotate:-4deg; }
.phone-body {
  position: relative;
  z-index: 1;
  min-height: 420px;
  padding: 25px 26px 18px;
  border: 2px solid #170b05;
  border-radius: 16px 16px 11px 11px;
  background:
    radial-gradient(circle at 22% 9%, rgba(255,255,255,.09), transparent 17%),
    repeating-linear-gradient(92deg, transparent 0 23px, rgba(255,255,255,.018) 24px 25px),
    linear-gradient(135deg,#5d2f18,#25130b 66%,#130a06);
  box-shadow: inset 0 0 0 4px rgba(199,137,69,.1), inset 0 -12px 30px rgba(0,0,0,.45), 0 20px 27px rgba(0,0,0,.62);
}
.phone-nameplate {
  width: 72%;
  margin: 0 auto 13px;
  padding: 5px 7px;
  border: 1px solid #2e210e;
  border-radius: 2px;
  background: linear-gradient(#d0b25e,#715320);
  box-shadow: inset 0 1px rgba(255,255,255,.38), 0 2px 3px #000;
  color: #2b1b0c;
  font: 900 8px/1.15 var(--studio-ui);
  letter-spacing: .1em;
  text-align: center;
}
.phone-nameplate small { display:block; margin-top:3px; font:700 5px/1 var(--studio-mono); letter-spacing:.12em; }
.phone-bells { position:absolute; left:50%; top:64px; width:148px; height:58px; translate:-50% 0; }
.phone-bells i { position:absolute; top:0; width:52px; height:52px; border:3px solid #35270f; border-radius:50%; background:radial-gradient(circle at 35% 28%,#e7cd76,#8f6d26 43%,#4d3914 67%,#1b1408 70%); box-shadow:inset 0 0 0 2px rgba(255,255,255,.12),0 4px 7px #000; }
.phone-bells i:first-child { left:3px; }
.phone-bells i:nth-child(2) { right:3px; }
.phone-bells b { position:absolute; left:50%; top:10px; width:12px; height:37px; translate:-50% 0; border-radius:6px; background:linear-gradient(90deg,#3d2d17,#c59d4c,#3d2d17); }
.phone-station.is-ringing .phone-bells { animation: phone-bells .13s steps(2,end) infinite; }
@keyframes phone-bells { 50% { translate:calc(-50% + 2px) 0; rotate:1deg; } }
.phone-receiver {
  position:relative;
  z-index:4;
  display:block;
  width:222px;
  height:49px;
  margin:62px auto 10px;
  padding:0;
  border:2px solid #050403;
  border-radius:24px 24px 18px 18px;
  background:linear-gradient(#322c26,#0b0a09 62%,#191715);
  box-shadow:inset 0 2px rgba(255,255,255,.08),0 8px 10px rgba(0,0,0,.65);
  cursor:pointer;
}
.phone-receiver > i { position:absolute; left:35px; right:35px; top:14px; height:17px; border-radius:8px; background:linear-gradient(#1a1816,#080707); }
.receiver-ear,.receiver-mouth { position:absolute; top:3px; width:51px; height:40px; border:2px solid #050403; border-radius:48%; background:radial-gradient(circle,#171513 0 28%,#292622 30% 52%,#090807 54%); }
.receiver-ear { left:-5px; rotate:-7deg; }
.receiver-mouth { right:-5px; rotate:7deg; }
.phone-station.is-off-hook .phone-receiver { translate:0 -12px; rotate:-2deg; box-shadow:inset 0 2px rgba(255,255,255,.08),0 17px 18px rgba(0,0,0,.72); }
.phone-line-meter { position:absolute; right:25px; top:135px; width:52px; height:31px; border:2px solid #2b1d0c; border-radius:28px 28px 4px 4px; background:radial-gradient(circle at 50% 90%,#ded5ad,#877b55 80%); overflow:hidden; }
.phone-line-meter i { position:absolute; left:50%; bottom:3px; width:2px; height:19px; transform-origin:bottom; rotate:-38deg; background:#8a241d; transition:rotate .25s ease; }
.phone-line-meter span { position:absolute; left:0; right:0; bottom:2px; text-align:center; color:#3f3422; font:700 4px/1 var(--studio-ui); letter-spacing:.15em; }
.phone-number-window { width:80%; min-height:46px; margin:0 auto 9px; padding:7px 8px; border:2px solid #15100a; border-radius:3px; background:#08140d; box-shadow:inset 0 0 12px #000,0 1px rgba(255,255,255,.08); color:#a8c891; text-align:center; }
.phone-number-window span,.phone-number-window small { display:block; }
.phone-number-window span { font:900 13px/1.1 var(--studio-mono); letter-spacing:.1em; }
.phone-number-window small { margin-top:5px; color:#71856a; font:700 6px/1 var(--studio-mono); letter-spacing:.1em; }
.rotary-dial { position:relative; width:142px; height:142px; margin:7px auto 11px; border:4px solid #070605; border-radius:50%; background:radial-gradient(circle,#201c18 0 24%,#a99a79 25% 32%,#171411 33% 66%,#6f6045 67% 69%,#0c0a08 70%); box-shadow:inset 0 0 0 2px #655b49,0 8px 12px rgba(0,0,0,.6); }
.rotary-dial.is-turning { animation: dial-turn .48s cubic-bezier(.4,0,.2,1); }
@keyframes dial-turn { 45% { rotate:72deg; } 100% { rotate:0deg; } }
.rotary-dial button { --angle:calc(var(--dial-i) * 36deg - 90deg); position:absolute; left:50%; top:50%; width:23px; height:23px; margin:-11.5px; padding:0; translate:calc(cos(var(--angle)) * 51px) calc(sin(var(--angle)) * 51px); border:1px solid #19140d; border-radius:50%; background:radial-gradient(circle,#e1d8bd 0 54%,#6a5e47 57% 66%,#12100e 69%); color:#241b10; font:900 9px/1 var(--studio-ui); cursor:pointer; }
.rotary-dial button:hover { filter:brightness(1.18); }
.dial-center { position:absolute; left:50%; top:50%; display:grid; place-content:center; width:45px; height:45px; translate:-50% -50%; border:2px solid #6b5426; border-radius:50%; background:radial-gradient(circle,#d2b35b,#6e511f 68%,#1a1208 71%); color:#2c1c0a; font:900 20px/1 Georgia,serif; }
.dial-stop { position:absolute; right:5px; bottom:20px; width:15px; height:31px; border-radius:4px; background:linear-gradient(90deg,#3a2b17,#bc9447,#3a2b17); rotate:24deg; }
.phone-crank { position:absolute; right:-28px; top:194px; width:55px; height:23px; padding:0; border:2px solid #16100a; border-radius:12px; background:linear-gradient(#b3914a,#4c391a); box-shadow:0 5px 8px #000; cursor:pointer; }
.phone-crank i { position:absolute; left:4px; top:50%; width:33px; height:5px; translate:0 -50%; border-radius:3px; background:#17120b; }
.phone-crank::after { content:""; position:absolute; right:-10px; top:50%; width:17px; height:17px; translate:0 -50%; border-radius:50%; background:radial-gradient(circle at 35% 30%,#c6a55d,#4a3519); }
.phone-crank span { position:absolute; right:6px; top:28px; color:#967f53; font:700 5px/1 var(--studio-ui); letter-spacing:.1em; }
.phone-crank.is-winding { animation: crank-wind .42s linear; }
@keyframes crank-wind { to { rotate:360deg; } }
.phone-controls { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; }
.phone-controls button { min-height:28px; padding:4px; border:1px solid #6e5426; border-radius:2px; background:linear-gradient(#3b2d19,#181008); color:#dbc68f; font:800 6px/1 var(--studio-ui); letter-spacing:.07em; cursor:pointer; }
.phone-controls button:active { translate:0 1px; }
.phone-transcript { min-height:54px; margin-top:9px; padding:8px; overflow:auto; border:1px solid rgba(202,163,80,.25); background:rgba(5,4,3,.72); color:#a99a79; font:7px/1.4 var(--studio-mono); white-space:pre-wrap; }
.phone-coil { width:76%; height:11px; margin:10px auto 0; background:repeating-radial-gradient(ellipse at center,#0a0908 0 2px,#43382d 3px 4px,#0a0908 5px 7px); opacity:.8; }

/* ---------- Edwardian service lamp and clock ---------- */
.room-gadget-shelf { min-height: 112px !important; }
.desk-lamp,.room-clock { min-height:94px !important; overflow:visible !important; }
.desk-lamp { width:76px !important; }
.lamp-finial { position:absolute; left:50%; top:-5px; width:8px; height:11px; translate:-50% 0; border-radius:50% 50% 20% 20%; background:linear-gradient(90deg,#4c3518,#c09749,#4c3518); }
.desk-lamp .lamp-shade { top:5px !important; width:58px !important; height:30px !important; background:linear-gradient(90deg,#5b2417,#a85435 48%,#4b1d14) !important; border:2px solid #2c170d !important; clip-path:polygon(15% 0,85% 0,100% 100%,0 100%) !important; }
.lamp-glass { position:absolute; left:50%; bottom:-8px; width:22px; height:18px; translate:-50% 0; border:1px solid #9f7a37; border-radius:45% 45% 20% 20%; background:radial-gradient(circle,#ffd978,#d98d29 45%,rgba(89,46,10,.35) 70%); box-shadow:0 0 14px rgba(244,177,70,.28); }
body.room-light-off .lamp-glass { background:#43382d; box-shadow:none; }
.desk-lamp .lamp-neck { top:34px !important; height:38px !important; width:5px !important; background:linear-gradient(90deg,#3d2c14,#b08a43,#3d2c14) !important; }
.desk-lamp .lamp-base { width:53px !important; height:12px !important; bottom:12px !important; border:1px solid #27170b; background:radial-gradient(ellipse,#a77b38,#3e2914 70%) !important; }
.lamp-chain { position:absolute; left:63%; top:34px; width:1px; height:35px; background:#a98b4e; }
.lamp-chain i { position:absolute; left:50%; bottom:-5px; width:6px; height:8px; translate:-50% 0; border-radius:50%; background:#6d5229; }
.room-clock { width:92px !important; }
.clock-crown { position:absolute; left:50%; top:-8px; width:44px; height:19px; translate:-50% 0; border-radius:50% 50% 0 0; background:linear-gradient(#6d3b20,#24130a); box-shadow:inset 0 0 0 2px rgba(207,156,77,.12); }
.clock-case { position:absolute; inset:3px 7px 12px; border:2px solid #1e0e06; border-radius:44% 44% 12px 12px; background:linear-gradient(135deg,#6a351b,#231109); box-shadow:inset 0 0 0 3px rgba(199,141,68,.1),0 5px 8px #000; }
.room-clock .clock-face { top:8px !important; width:51px !important; border:4px solid #70502a !important; background:radial-gradient(circle,#e6ddc4,#a89b78) !important; }
.clock-face small { position:absolute; color:#33291b; font:700 5px/1 Georgia,serif; }
.clock-face small:nth-of-type(1){left:7px;top:22px}.clock-face small:nth-of-type(2){left:23px;bottom:3px}.clock-face small:nth-of-type(3){right:6px;top:22px}.clock-face small:nth-of-type(4){left:21px;top:2px}
.clock-gear-window { position:absolute; left:50%; bottom:15px; width:50px; height:25px; translate:-50% 0; border:1px solid #725227; border-radius:3px; background:#0c0906; overflow:hidden; }
.clock-gear-window i { position:absolute; width:18px; height:18px; border:3px dotted #b1843e; border-radius:50%; animation:gear-spin 8s linear infinite; }
.clock-gear-window i:first-child{left:3px;top:3px}.clock-gear-window i:nth-child(2){left:18px;top:5px;animation-direction:reverse}.clock-gear-window i:nth-child(3){right:2px;top:2px}
@keyframes gear-spin { to { rotate:360deg; } }
.clock-pendulum { position:absolute; left:50%; bottom:-14px; width:2px; height:29px; translate:-50% 0; background:#a78340; transform-origin:top; animation:pendulum 1.5s ease-in-out infinite alternate; }
.clock-pendulum i { position:absolute; left:50%; bottom:-5px; width:13px; height:13px; translate:-50% 0; border-radius:50%; background:radial-gradient(circle,#cfac5f,#5e421e); }
@keyframes pendulum { from { rotate:-10deg; } to { rotate:10deg; } }

/* ---------- Extra TV channel visual system ---------- */
.channel-guide { height:100%; overflow:auto; }
.channel-guide-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px; }
.channel-guide button { min-height:23px; }
.ch-extended {
  --channel-a:#263f48;
  --channel-b:#0b1114;
  --channel-accent:#d6bb72;
  padding:12% 7% 10%;
  background:
    repeating-linear-gradient(0deg,transparent 0 8px,rgba(255,255,255,.025) 9px 10px),
    linear-gradient(135deg,var(--channel-a),var(--channel-b));
  color:#eee4cb;
  font-family:var(--studio-mono);
}
.extended-card { position:relative; z-index:2; height:100%; display:grid; align-content:center; gap:6px; padding:10px; border:1px solid rgba(255,255,255,.22); background:rgba(0,0,0,.28); box-shadow:inset 0 0 18px rgba(0,0,0,.42); }
.extended-card small { color:var(--channel-accent); font:700 5px/1 var(--studio-mono); letter-spacing:.2em; }
.extended-card h3 { margin:0; color:#fff7df; font:900 clamp(9px,2.4vw,18px)/1 var(--studio-ui); letter-spacing:.08em; text-transform:uppercase; }
.extended-card p { margin:0; color:#d3c7ad; font:7px/1.45 var(--studio-mono); white-space:pre-line; }
.extended-number { position:absolute; right:5%; bottom:11%; color:var(--channel-accent); font:900 22px/1 Georgia,serif; opacity:.35; }
.extended-meter { height:13px; margin-top:3px; background:repeating-linear-gradient(90deg,var(--channel-accent) 0 2px,transparent 2px 7px); opacity:.55; animation:ext-meter 5s linear infinite; }
@keyframes ext-meter { to { background-position:70px 0; } }

/* Footer spacing after larger room. */
.archive-footer { margin-top:32px; }

@media (max-width: 1180px) {
  .hero-zone { grid-template-columns:minmax(520px,1fr) minmax(265px,320px); }
  .background-zone { grid-template-columns:repeat(2,minmax(260px,1fr)); }
  .utility-bay { grid-column:span 2; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:end; }
  .utility-bay-heading { grid-column:1/-1; }
}

@media (max-width: 870px) {
  .hero-zone { grid-template-columns:1fr; }
  .hero-zone .tape-library { width:min(620px,100%); justify-self:center; }
  .background-zone { grid-template-columns:1fr; width:min(620px,100%); }
  .utility-bay { grid-column:auto; grid-template-columns:1fr; }
  .utility-bay-heading { grid-column:auto; }
  .background-zone .computer-station,
  .background-zone .side-tv-station,
  .background-zone .phone-station { width:min(480px,100%); max-width:480px; }
  .internet-sticky-note { top:-3px; }
}

@media (max-width: 620px) {
  .room-layout-v4 { padding-top:38px !important; }
  .background-zone { padding-inline:4px; }
  .device-focus-overlay { padding:4px; }
  .device-focus-frame { min-height:calc(100vh - 8px); }
  .device-focus-header { margin-bottom:5px; }
  .device-focus-header b { font-size:8px; }
  .device-focus-stage { min-height:calc(100vh - 62px); padding-bottom:12px; }
  .device-in-focus[data-focus-kind="computer"] { width:100% !important; padding:0 2px 12px !important; }
  .device-in-focus[data-focus-kind="computer"] .pc-monitor-shell { padding:13px 11px 9px !important; }
  .device-in-focus[data-focus-kind="computer"] .pc-screen-bezel { padding:8px !important; }
  .device-in-focus[data-focus-kind="computer"] .pc-screen { font-size:12px !important; }
  .device-in-focus[data-focus-kind="computer"] .pc-desktop-icons { grid-template-columns:repeat(3,74px) !important; gap:7px 4px !important; }
  .device-in-focus[data-focus-kind="computer"] .pc-icon { width:72px !important; min-height:59px !important; font-size:9px !important; }
  .device-in-focus[data-focus-kind="computer"] .pc-icon-art { width:31px !important; height:31px !important; font-size:20px !important; }
  .device-in-focus[data-focus-kind="computer"] .pc-desk { grid-template-columns:88px 1fr !important; }
  .device-in-focus[data-focus-kind="side-tv"] { padding-top:48px !important; }
  .device-in-focus[data-focus-kind="side-tv"] .side-tv-face { grid-template-columns:minmax(0,1fr) 67px !important; gap:7px !important; }
  .device-in-focus[data-focus-kind="side-tv"] .channel-guide-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .phone-body { padding-inline:16px; }
  .phone-receiver { width:195px; }
  .rotary-dial { width:132px; height:132px; }
  .rotary-dial button { translate:calc(cos(var(--angle)) * 47px) calc(sin(var(--angle)) * 47px); }
  .phone-controls { grid-template-columns:repeat(2,1fr); }
  .wall-calendar { width:140px; }
  .vhs-tape .tape-code { font-size:5px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .phone-bells,.phone-crank,.rotary-dial,.clock-gear-window i,.clock-pendulum,.extended-meter { animation:none !important; }
}


/* ---------- v6 interaction, compatibility, and focus corrections ---------- */
.calendar-art { position: relative; }

/* Browser-safe rotary layout: no CSS trigonometry required. */
.rotary-dial { --dial-radius: 51px; }
.rotary-dial button { translate: none !important; }
.rotary-dial button:nth-of-type(1) { transform: rotate(-90deg) translateX(var(--dial-radius)) rotate(90deg); }
.rotary-dial button:nth-of-type(2) { transform: rotate(-54deg) translateX(var(--dial-radius)) rotate(54deg); }
.rotary-dial button:nth-of-type(3) { transform: rotate(-18deg) translateX(var(--dial-radius)) rotate(18deg); }
.rotary-dial button:nth-of-type(4) { transform: rotate(18deg) translateX(var(--dial-radius)) rotate(-18deg); }
.rotary-dial button:nth-of-type(5) { transform: rotate(54deg) translateX(var(--dial-radius)) rotate(-54deg); }
.rotary-dial button:nth-of-type(6) { transform: rotate(90deg) translateX(var(--dial-radius)) rotate(-90deg); }
.rotary-dial button:nth-of-type(7) { transform: rotate(126deg) translateX(var(--dial-radius)) rotate(-126deg); }
.rotary-dial button:nth-of-type(8) { transform: rotate(162deg) translateX(var(--dial-radius)) rotate(-162deg); }
.rotary-dial button:nth-of-type(9) { transform: rotate(198deg) translateX(var(--dial-radius)) rotate(-198deg); }
.rotary-dial button:nth-of-type(10) { transform: rotate(234deg) translateX(var(--dial-radius)) rotate(-234deg); }

/* In close-up, legibility beats simulated monitor haze. */
.device-in-focus[data-focus-kind="computer"] .pc-glass,
.device-in-focus[data-focus-kind="computer"] .pc-scanlines {
  display: none !important;
}
.device-in-focus[data-focus-kind="computer"],
.device-in-focus[data-focus-kind="computer"] *,
.device-in-focus[data-focus-kind="side-tv"],
.device-in-focus[data-focus-kind="side-tv"] * {
  text-rendering: auto !important;
}
.device-in-focus[data-focus-kind="computer"] .pc-screen,
.device-in-focus[data-focus-kind="computer"] .pc-screen * {
  filter: none !important;
  text-shadow: none;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}
.device-in-focus[data-focus-kind="computer"] .pc-icon {
  text-shadow: 1px 1px 0 #000 !important;
}

/* Small physical VIEW controls keep the utility shelf optional. */
.utility-inspect-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  width: 100%;
}
.utility-inspect-row button {
  min-height: 26px;
  padding: 5px 6px;
  border: 1px solid #5f4a29;
  border-radius: 2px;
  background: linear-gradient(#32271c, #15100c);
  color: #bda977;
  box-shadow: inset 0 1px rgba(255,255,255,.05), 0 2px 4px rgba(0,0,0,.45);
  font: 800 6px/1 var(--studio-ui);
  letter-spacing: .1em;
  cursor: pointer;
}
.utility-inspect-row button:hover,
.utility-inspect-row button:focus-visible,
.utility-inspect-row button[aria-pressed="true"] {
  color: #f1d98f;
  border-color: #b08b45;
  background: linear-gradient(#4a3824, #21170f);
}

.device-in-focus[data-focus-kind="service"] {
  width: min(780px, calc(100vw - 36px)) !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  padding: 28px !important;
  border: 1px solid #5e4528;
  background: linear-gradient(135deg, rgba(67,39,23,.96), rgba(12,8,6,.98));
  box-shadow: inset 0 0 0 4px rgba(10,6,4,.55), 0 30px 65px rgba(0,0,0,.72);
}
.device-in-focus[data-focus-kind="service"] .room-gadget-shelf {
  min-height: 230px !important;
  padding: 30px !important;
  justify-content: space-around !important;
}
.device-in-focus[data-focus-kind="service"] .utility-inspect-row {
  max-width: 520px;
  margin: 0 auto;
}
.device-in-focus[data-focus-kind="service"] .room-signal-console {
  width: min(620px, 100%);
  margin: 0 auto;
}

.device-in-focus[data-focus-kind="lamp"] {
  width: min(430px, calc(100vw - 36px)) !important;
  min-height: 500px !important;
  display: grid !important;
  place-items: center !important;
  padding: 45px !important;
  background: radial-gradient(circle, rgba(112,68,29,.25), transparent 65%);
}
.device-in-focus[data-focus-kind="lamp"].desk-lamp {
  width: 228px !important;
  min-height: 360px !important;
}
.device-in-focus[data-focus-kind="lamp"] .lamp-finial { width: 24px; height: 33px; top: -15px; }
.device-in-focus[data-focus-kind="lamp"] .lamp-shade { top: 15px !important; width: 174px !important; height: 90px !important; }
.device-in-focus[data-focus-kind="lamp"] .lamp-glass { width: 66px; height: 54px; bottom: -24px; }
.device-in-focus[data-focus-kind="lamp"] .lamp-neck { top: 102px !important; width: 15px !important; height: 114px !important; }
.device-in-focus[data-focus-kind="lamp"] .lamp-base { width: 159px !important; height: 36px !important; bottom: 36px !important; }
.device-in-focus[data-focus-kind="lamp"] .lamp-chain { left: 66%; top: 102px; height: 105px; }
.device-in-focus[data-focus-kind="lamp"] em { font-size: 11px !important; }

.device-in-focus[data-focus-kind="clock"] {
  width: min(430px, calc(100vw - 36px)) !important;
  min-height: 560px !important;
  display: grid !important;
  place-items: center !important;
  padding: 45px !important;
}
.device-in-focus[data-focus-kind="clock"].room-clock {
  width: 276px !important;
  min-height: 420px !important;
}
.device-in-focus[data-focus-kind="clock"] .clock-crown { width: 132px; height: 57px; top: -24px; }
.device-in-focus[data-focus-kind="clock"] .clock-case { inset: 9px 21px 36px; border-width: 6px; }
.device-in-focus[data-focus-kind="clock"] .clock-face { top: 24px !important; width: 153px !important; border-width: 12px !important; }
.device-in-focus[data-focus-kind="clock"] .clock-gear-window { bottom: 54px; width: 150px; height: 75px; border-width: 3px; }
.device-in-focus[data-focus-kind="clock"] .clock-gear-window i { width: 54px; height: 54px; border-width: 7px; }
.device-in-focus[data-focus-kind="clock"] .clock-gear-window i:first-child{left:9px;top:9px}
.device-in-focus[data-focus-kind="clock"] .clock-gear-window i:nth-child(2){left:54px;top:15px}
.device-in-focus[data-focus-kind="clock"] .clock-gear-window i:nth-child(3){right:6px;top:6px}
.device-in-focus[data-focus-kind="clock"] .clock-pendulum { bottom: -42px; width: 6px; height: 87px; }
.device-in-focus[data-focus-kind="clock"] .clock-pendulum i { width: 39px; height: 39px; bottom: -15px; }
.device-in-focus[data-focus-kind="clock"] em { font-size: 14px !important; }

@media (max-width: 620px) {
  .rotary-dial { --dial-radius: 47px; }
  .utility-inspect-row { grid-template-columns: 1fr; }
  .device-in-focus[data-focus-kind="lamp"],
  .device-in-focus[data-focus-kind="clock"] { min-height: 430px !important; padding: 24px !important; }
}

@media (max-width: 620px) {
  .phone-crank { right: -8px !important; }
  .phone-crank::after { right: -8px !important; }
}