/* Kadabra Games room v8 — tactile appliance and phone clarity pass. */

/* Decorative phone pieces must never steal input from the real controls. */
.phone-junction,
.phone-cable,
.phone-nameplate,
.phone-bells,
.phone-line-meter,
.receiver-cradle,
.phone-coil,
.phone-body::before,
.phone-body::after {
  pointer-events: none !important;
}

.phone-station {
  width: min(100%, 370px);
  isolation: isolate;
}

.phone-body {
  min-height: 468px;
  padding: 24px 24px 20px;
  overflow: visible;
  border: 3px solid #130a05;
  border-radius: 18px 18px 12px 12px;
  background:
    radial-gradient(circle at 23% 8%, rgba(255,255,255,.11), transparent 17%),
    repeating-linear-gradient(93deg, transparent 0 19px, rgba(255,255,255,.018) 20px 21px),
    repeating-linear-gradient(2deg, rgba(49,20,8,.08) 0 1px, transparent 1px 5px),
    linear-gradient(135deg,#70401f 0%,#3b1d0e 43%,#1b0d07 75%,#0e0704 100%);
  box-shadow:
    inset 0 0 0 2px rgba(224,174,91,.17),
    inset 12px 0 25px rgba(255,168,72,.045),
    inset -18px -20px 35px rgba(0,0,0,.52),
    0 24px 36px rgba(0,0,0,.72);
}
.phone-body::before {
  content:"";
  position:absolute;
  inset:7px;
  border:1px solid rgba(237,193,111,.12);
  border-radius:12px 12px 8px 8px;
  background:linear-gradient(115deg,rgba(255,255,255,.03),transparent 32% 72%,rgba(0,0,0,.12));
}
.phone-body::after {
  content:"KTC  ·  No. 0313";
  position:absolute;
  left:50%;
  bottom:7px;
  transform:translateX(-50%);
  color:rgba(213,179,111,.38);
  font:700 5px/1 var(--studio-mono,monospace);
  letter-spacing:.18em;
  white-space:nowrap;
}

.phone-nameplate {
  position:relative;
  z-index:1;
  width:78%;
  margin-bottom:17px;
  padding:7px 9px;
  border:1px solid #211607;
  background:
    linear-gradient(180deg,rgba(255,255,255,.34),transparent 25%),
    repeating-linear-gradient(90deg,rgba(40,25,8,.08) 0 1px,transparent 1px 4px),
    linear-gradient(100deg,#dbbd69,#8a682b 58%,#b99648);
  box-shadow:inset 0 0 0 1px rgba(255,245,195,.22),0 3px 5px rgba(0,0,0,.62);
}

.phone-bells {
  top:70px;
  width:164px;
  height:62px;
  opacity:.96;
}
.phone-bells i {
  width:56px;
  height:56px;
  border-width:4px;
  background:
    radial-gradient(circle at 31% 25%,rgba(255,255,255,.42),transparent 11%),
    radial-gradient(circle at 40% 35%,#f1d887,#aa812f 40%,#654a19 66%,#1c1306 70%);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.12),inset 0 -8px 12px rgba(0,0,0,.32),0 6px 9px rgba(0,0,0,.68);
}

.receiver-cradle {
  position:absolute;
  z-index:11;
  left:50%;
  top:112px;
  width:244px;
  height:55px;
  transform:translateX(-50%);
}
.receiver-cradle i {
  position:absolute;
  bottom:0;
  width:37px;
  height:28px;
  border:2px solid #090604;
  border-radius:8px 8px 4px 4px;
  background:linear-gradient(90deg,#1b1612,#5b4631 45%,#17120f);
  box-shadow:inset 0 2px rgba(255,255,255,.06),0 4px 6px rgba(0,0,0,.62);
}
.receiver-cradle i:first-child { left:8px; transform:rotate(-4deg); }
.receiver-cradle i:last-child { right:8px; transform:rotate(4deg); }

.phone-receiver {
  position:relative !important;
  z-index:30 !important;
  display:block;
  width:252px;
  height:64px;
  margin:64px auto 14px;
  padding:0;
  overflow:visible;
  border:3px solid #030302;
  border-radius:31px 31px 21px 21px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.12),transparent 18% 62%,rgba(0,0,0,.42)),
    repeating-linear-gradient(91deg,rgba(255,255,255,.012) 0 2px,transparent 2px 6px),
    linear-gradient(100deg,#38332e,#12100e 54%,#26211d);
  box-shadow:inset 0 2px 1px rgba(255,255,255,.1),inset 0 -8px 12px rgba(0,0,0,.5),0 12px 15px rgba(0,0,0,.75);
  cursor:pointer !important;
  pointer-events:auto !important;
  touch-action:manipulation;
  transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;
}
.phone-receiver:hover,
.phone-receiver:focus-visible {
  filter:brightness(1.18);
  transform:translateY(-4px);
  outline:2px solid rgba(231,197,126,.75);
  outline-offset:4px;
  box-shadow:inset 0 2px 1px rgba(255,255,255,.13),inset 0 -8px 12px rgba(0,0,0,.5),0 18px 22px rgba(0,0,0,.8),0 0 21px rgba(216,172,83,.18);
}
.phone-receiver:active { transform:translateY(-1px); }
.phone-station.is-off-hook .phone-receiver {
  transform:translate(25px,-18px) rotate(-5deg);
  box-shadow:inset 0 2px rgba(255,255,255,.1),0 24px 27px rgba(0,0,0,.8);
}
.receiver-grip {
  position:absolute;
  left:50px;
  right:50px;
  top:17px;
  height:28px;
  border-radius:13px;
  background:linear-gradient(#25211e,#080706 68%,#171411);
  box-shadow:inset 0 2px rgba(255,255,255,.04),inset 0 -4px 6px rgba(0,0,0,.55);
}
.receiver-ear,
.receiver-mouth {
  top:2px;
  width:63px;
  height:54px;
  border-width:3px;
  background:
    repeating-radial-gradient(circle at center,#0c0b0a 0 3px,#24211e 3px 5px,#0c0b0a 5px 8px),
    radial-gradient(circle,#1d1a18,#070606);
  box-shadow:inset 0 2px rgba(255,255,255,.05),0 3px 5px rgba(0,0,0,.52);
}
.receiver-ear { left:-8px; transform:rotate(-7deg); }
.receiver-mouth { right:-8px; transform:rotate(7deg); }
.receiver-ear i,
.receiver-mouth i {
  position:absolute;
  inset:12px;
  border:1px solid #050403;
  border-radius:50%;
  background:radial-gradient(circle,#080707 0 22%,#24201d 24% 35%,#080707 37%);
}
.receiver-action-label {
  position:absolute;
  left:50%;
  bottom:-18px;
  transform:translateX(-50%);
  padding:4px 8px;
  border:1px solid rgba(195,157,81,.42);
  border-radius:2px;
  background:rgba(16,10,6,.92);
  color:#dfc487;
  font:800 6px/1 var(--studio-ui,sans-serif);
  letter-spacing:.13em;
  white-space:nowrap;
  pointer-events:none;
}
.phone-station.is-off-hook .receiver-action-label { content:"REPLACE RECEIVER"; }

.phone-line-meter { z-index:8; top:165px; }
.phone-number-window { position:relative;z-index:5;margin-top:9px; }
.rotary-dial { z-index:6; }
.rotary-dial button { z-index:4; }

.phone-crank {
  right:-59px;
  top:218px;
  width:84px;
  height:92px;
  padding:0;
  overflow:visible;
  border:0;
  background:transparent;
  box-shadow:none;
  cursor:pointer !important;
  pointer-events:auto !important;
  transform-origin:16px 45px;
}
.phone-crank::after { display:none; }
.phone-crank .crank-hub {
  position:absolute;
  left:2px;
  top:34px;
  width:27px;
  height:27px;
  border:3px solid #1d1308;
  border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#e0c477,#8b6526 48%,#3b2912 70%);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.14),0 5px 8px rgba(0,0,0,.7);
}
.phone-crank .crank-arm {
  position:absolute;
  left:23px;
  top:44px;
  width:47px;
  height:8px;
  border:1px solid #211608;
  border-radius:5px;
  transform:rotate(-24deg);
  transform-origin:left center;
  background:linear-gradient(#d0aa56,#5d4118);
  box-shadow:inset 0 1px rgba(255,255,255,.2),0 3px 4px rgba(0,0,0,.62);
}
.phone-crank .crank-grip {
  position:absolute;
  right:0;
  top:18px;
  width:18px;
  height:42px;
  border:2px solid #0b0805;
  border-radius:9px;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 2px,transparent 2px 5px),
    linear-gradient(90deg,#24180e,#694328 50%,#1b120b);
  box-shadow:inset 0 2px rgba(255,255,255,.06),0 5px 7px rgba(0,0,0,.72);
}
.phone-crank b {
  position:absolute;
  right:-6px;
  bottom:-2px;
  width:94px;
  color:#bca36d;
  font:800 6px/1 var(--studio-ui,sans-serif);
  letter-spacing:.11em;
  text-align:center;
  white-space:nowrap;
}
.phone-crank:hover .crank-grip,
.phone-crank:focus-visible .crank-grip { filter:brightness(1.25);outline:2px solid rgba(231,197,126,.6);outline-offset:2px; }
.phone-crank.is-winding { animation:crank-wind-v8 .55s cubic-bezier(.45,.05,.25,1); }
@keyframes crank-wind-v8 { to { transform:rotate(360deg); } }

.phone-controls button {
  min-height:34px;
  font-size:7px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.06),transparent 25%),
    linear-gradient(#49361f,#1a1008);
}
.phone-transcript { min-height:72px;font-size:8px;line-height:1.5; }

/* Close-up phone treatment: large, stable, and obviously operable. */
.device-in-focus[data-focus-kind="phone"] {
  width:min(520px,calc(100vw - 36px)) !important;
  padding:24px 60px 30px !important;
}
.device-in-focus[data-focus-kind="phone"] .phone-body { min-height:520px; }
.device-in-focus[data-focus-kind="phone"] .phone-receiver { width:292px;height:72px;margin-top:68px; }
.device-in-focus[data-focus-kind="phone"] .receiver-cradle { width:282px;top:116px; }
.device-in-focus[data-focus-kind="phone"] .rotary-dial { width:166px;height:166px;--dial-radius:61px; }
.device-in-focus[data-focus-kind="phone"] .phone-number-window span { font-size:17px; }
.device-in-focus[data-focus-kind="phone"] .phone-number-window small { font-size:8px; }
.device-in-focus[data-focus-kind="phone"] .phone-controls button { min-height:40px;font-size:8px; }
.device-in-focus[data-focus-kind="phone"] .phone-transcript { min-height:96px;font-size:10px; }
.device-in-focus[data-focus-kind="phone"] .phone-crank { right:-72px;top:238px;transform:scale(1.18); }

/* Edwardian lamp: colored glass, weighted brass, and less flat geometry. */
.desk-lamp {
  filter:drop-shadow(0 9px 8px rgba(0,0,0,.72));
}
.desk-lamp .lamp-shade {
  background:
    linear-gradient(90deg,rgba(255,255,255,.08),transparent 18% 78%,rgba(0,0,0,.22)),
    repeating-linear-gradient(90deg,#6a2519 0 5px,#8e3825 5px 12px,#5b2018 12px 17px) !important;
  border:3px solid #28140b !important;
  box-shadow:inset 0 -7px 10px rgba(0,0,0,.32),0 5px 7px rgba(0,0,0,.55);
}
.lamp-glass {
  background:
    radial-gradient(circle at 42% 32%,rgba(255,255,255,.72),transparent 13%),
    radial-gradient(circle,#ffd87b,#d9902b 46%,rgba(91,46,8,.52) 72%);
  border:2px solid #896224;
  box-shadow:inset 0 0 7px rgba(255,255,255,.25),0 0 19px rgba(244,177,70,.32);
}
.desk-lamp .lamp-neck,
.desk-lamp .lamp-base {
  background:
    linear-gradient(90deg,#30200e,#b68d43 34%,#d0ae60 49%,#70501d 69%,#26180a) !important;
  box-shadow:inset 0 1px rgba(255,255,255,.16),0 4px 7px rgba(0,0,0,.58);
}

/* Clock: deeper carved case and more visible mechanical layer. */
.room-clock .clock-case {
  background:
    radial-gradient(circle at 25% 10%,rgba(255,255,255,.06),transparent 18%),
    repeating-linear-gradient(92deg,transparent 0 11px,rgba(255,255,255,.012) 12px 13px),
    linear-gradient(135deg,#6c391d,#2d160c 66%,#120905) !important;
  box-shadow:inset 0 0 0 2px rgba(218,161,82,.12),inset 0 -11px 18px rgba(0,0,0,.42),0 8px 12px rgba(0,0,0,.65);
}
.clock-face {
  background:
    radial-gradient(circle at 45% 36%,rgba(255,255,255,.35),transparent 11%),
    radial-gradient(circle,#efe4c4,#bba97a 73%,#6e5630) !important;
  box-shadow:inset 0 0 0 2px rgba(63,44,20,.35),inset 0 0 15px rgba(72,52,25,.3),0 4px 6px rgba(0,0,0,.55) !important;
}

/* Keep computer focus sharp even when older styles are cached. */
.device-in-focus[data-focus-kind="computer"],
.device-in-focus[data-focus-kind="computer"] * {
  filter:none !important;
  text-rendering:geometricPrecision;
  -webkit-font-smoothing:none;
}
.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"] .pc-screen { image-rendering:pixelated; }

@media (max-width:640px) {
  .phone-station { width:min(100%,340px); }
  .phone-body { padding-inline:18px; }
  .phone-receiver { width:222px;height:58px; }
  .receiver-cradle { width:216px; }
  .phone-crank { right:-38px;transform:scale(.86); }
  .device-in-focus[data-focus-kind="phone"] { padding:12px 38px 24px !important; }
  .device-in-focus[data-focus-kind="phone"] .phone-receiver { width:240px;height:62px; }
  .device-in-focus[data-focus-kind="phone"] .receiver-cradle { width:234px; }
}


/* v9 receiver UX: the entire handset is one large, unambiguous control. */
.phone-receiver,
.phone-receiver * {
  -webkit-tap-highlight-color: transparent;
}
.phone-receiver * { pointer-events:none !important; }
.phone-receiver::after {
  content:"";
  position:absolute;
  inset:-14px;
  z-index:50;
  border-radius:38px;
  pointer-events:auto;
}

/* A lifted receiver moves fully off the cradle and stands vertically at the
   left of the instrument. It remains clickable there to hang up. */
.phone-station.is-off-hook .phone-receiver {
  z-index:60 !important;
  transform:translate(-118px,122px) rotate(-90deg) scale(.88) !important;
  filter:brightness(1.08);
  box-shadow:inset 0 2px rgba(255,255,255,.1),0 27px 30px rgba(0,0,0,.86),0 0 0 2px rgba(207,170,92,.18);
}
.phone-station.is-off-hook .receiver-action-label {
  bottom:-25px;
  transform:translateX(-50%) rotate(90deg);
  transform-origin:center;
}
.phone-station.is-off-hook .rotary-dial,
.phone-station.is-off-hook .phone-number-window,
.phone-station.is-off-hook .phone-controls,
.phone-station.is-off-hook .phone-transcript {
  transform:translateX(22px);
}
.device-in-focus[data-focus-kind="phone"].is-off-hook .phone-receiver {
  transform:translate(-190px,152px) rotate(-90deg) scale(.94) !important;
}

/* Game pages inside the CRT are always scrollable, and every image is fitted
   in full rather than silently cropped. */
.game-program { min-height:100%; padding-bottom:18px; }
.program-hero img,
.gallery-thumb img { image-rendering:auto; }

@media (max-width:640px) {
  .phone-station.is-off-hook .phone-receiver {
    transform:translate(-103px,112px) rotate(-90deg) scale(.82) !important;
  }
  .device-in-focus[data-focus-kind="phone"].is-off-hook .phone-receiver {
    transform:translate(-142px,135px) rotate(-90deg) scale(.86) !important;
  }
}


/* Keep captions outside the picture so not even the bottom edge is obscured. */
.program-hero {
  aspect-ratio:auto !important;
  display:grid !important;
  grid-template-rows:auto auto;
}
.program-hero img {
  aspect-ratio:16 / 9;
  height:auto !important;
  min-height:0;
}
.program-caption {
  position:static !important;
  display:block;
  margin:0;
  padding:6px 8px !important;
  border-top:1px solid rgba(203,231,181,.24);
  background:rgba(0,0,0,.82) !important;
}

/* v10 magneto crank: the handle rotates around a fixed hub so winding actually
   reads as winding instead of a small flip. */
.phone-crank {
  right: -72px;
  top: 208px;
  width: 120px;
  height: 118px;
  overflow: visible;
  transform: none !important;
}
.phone-crank .crank-hub {
  left: 10px;
  top: 42px;
  width: 30px;
  height: 30px;
  z-index: 4;
}
.phone-crank .crank-backplate {
  position: absolute;
  left: 2px;
  top: 26px;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  border: 2px solid rgba(50,32,12,.78);
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.18), transparent 18%),
    radial-gradient(circle, rgba(199,155,73,.24), rgba(46,29,10,.02) 62%, rgba(0,0,0,.14) 76%, transparent 77%);
  box-shadow: inset 0 0 0 2px rgba(255,232,187,.08), 0 4px 8px rgba(0,0,0,.38);
}
.phone-crank .crank-rotor {
  position: absolute;
  left: 25px;
  top: 25px;
  width: 64px;
  height: 64px;
  z-index: 3;
  transform-origin: 0 32px;
}
.phone-crank .crank-arm {
  position: absolute;
  left: 0;
  top: 30px;
  width: 48px;
  height: 8px;
  border: 1px solid #211608;
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.2), rgba(0,0,0,.18) 35%, transparent 36%),
    linear-gradient(90deg, #d7b566, #7e5721 56%, #4a3112);
  box-shadow: inset 0 1px rgba(255,255,255,.18), 0 3px 4px rgba(0,0,0,.62);
  transform: rotate(-12deg);
  transform-origin: 0 50%;
}
.phone-crank .crank-grip {
  position: absolute;
  left: 42px;
  top: 10px;
  width: 18px;
  height: 44px;
  border: 2px solid #0b0805;
  border-radius: 10px;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 2px, transparent 2px 5px),
    linear-gradient(90deg, #24180e, #72482b 50%, #1b120b);
  box-shadow: inset 0 2px rgba(255,255,255,.08), 0 5px 7px rgba(0,0,0,.72);
  transform: rotate(18deg);
}
.phone-crank b {
  right: -8px;
  bottom: -8px;
  width: 104px;
}
.phone-crank:hover .crank-backplate,
.phone-crank:focus-visible .crank-backplate,
.phone-crank:hover .crank-grip,
.phone-crank:focus-visible .crank-grip {
  filter: brightness(1.12);
  outline: none;
}
.phone-crank.is-winding { animation: none; }
.phone-crank.is-winding .crank-rotor {
  animation: crank-rotor-spin-v10 .98s cubic-bezier(.38,.06,.22,1);
}
@keyframes crank-rotor-spin-v10 {
  0% { transform: rotate(0deg); }
  18% { transform: rotate(110deg); }
  38% { transform: rotate(215deg); }
  58% { transform: rotate(320deg); }
  78% { transform: rotate(430deg); }
  100% { transform: rotate(520deg); }
}
.device-in-focus[data-focus-kind="phone"] .phone-crank {
  right: -92px;
  top: 236px;
  transform: scale(1.18) !important;
}

/* v10 paper phone book */
.phone-book {
  position: relative;
  width: min(100%, 288px);
  justify-self: end;
  transform: rotate(-2deg);
  filter: drop-shadow(0 14px 18px rgba(0,0,0,.38));
}
.phonebook-cover {
  position: relative;
  display: grid;
  gap: 5px;
  width: 100%;
  min-height: 154px;
  padding: 14px 16px 18px;
  border: 1px solid #5e4320;
  border-radius: 4px 10px 8px 4px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 30%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 3px, rgba(255,255,255,.015) 3px 8px),
    linear-gradient(145deg, #7a5326, #4e3117 62%, #27160b);
  color: #eadab5;
  text-align: left;
  cursor: pointer;
  box-shadow:
    inset 0 0 0 1px rgba(255,245,215,.08),
    inset -18px 0 18px rgba(0,0,0,.14),
    0 10px 12px rgba(0,0,0,.42);
}
.phonebook-cover::before {
  content: "";
  position: absolute;
  inset: 6px 6px 8px 14px;
  border: 1px solid rgba(237,215,166,.26);
  border-radius: 2px 8px 6px 2px;
}
.phonebook-cover::after {
  content: "";
  position: absolute;
  top: 8px;
  right: -8px;
  bottom: 8px;
  width: 10px;
  border-radius: 0 4px 4px 0;
  background:
    repeating-linear-gradient(180deg, #e2d4b5 0 3px, #cbb98d 3px 4px, #efe2c8 4px 7px);
  box-shadow: inset 0 0 0 1px rgba(67,46,19,.25);
}
.phonebook-cover-art {
  width: 52px;
  height: 18px;
  border: 1px solid rgba(239,213,158,.4);
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 35%, rgba(255,255,255,.28), transparent 18%),
    linear-gradient(90deg, rgba(0,0,0,.18), rgba(255,255,255,.06), rgba(0,0,0,.18));
}
.phonebook-cover-kicker {
  color: #f0d89a;
  font: 800 7px/1 var(--studio-mono,sans-serif);
  letter-spacing: .18em;
}
.phonebook-cover strong {
  color: #fff2d3;
  font: 900 18px/1.04 Georgia, serif;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.phonebook-cover small {
  color: #e0ca95;
  font: 700 7px/1.35 var(--studio-mono,sans-serif);
  letter-spacing: .14em;
}
.phonebook-open-tag {
  align-self: end;
  justify-self: start;
  margin-top: 12px;
  padding: 5px 8px;
  border: 1px solid rgba(233,202,127,.36);
  background: rgba(20,11,6,.5);
  color: #f0db9f;
  font: 800 7px/1 var(--studio-ui,sans-serif);
  letter-spacing: .16em;
}
.phonebook-open { display: none; position: relative; width: 100%; }
.phonebook-spine {
  position: absolute;
  left: 12px;
  top: 12px;
  bottom: 12px;
  width: 18px;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(87,57,26,.9), rgba(148,106,56,.34) 52%, rgba(74,47,21,.88));
  box-shadow: inset 0 0 0 1px rgba(255,223,166,.08), 3px 0 7px rgba(0,0,0,.16);
}
.phonebook-pages {
  position: relative;
  min-height: 620px;
  padding: 22px 24px 22px 42px;
  border: 1px solid #9f8560;
  border-radius: 4px 10px 10px 4px;
  background:
    linear-gradient(90deg, rgba(199,187,158,.52), transparent 18px),
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.52), transparent 14%),
    repeating-linear-gradient(180deg, rgba(0,0,0,.02) 0 2px, rgba(255,255,255,.03) 2px 4px),
    linear-gradient(180deg, #f1e3c7, #deceae 78%, #d2c19d);
  color: #352a1d;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.5),
    inset 0 0 34px rgba(116,84,40,.08),
    0 18px 20px rgba(0,0,0,.28);
}
.phonebook-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 14px 16px;
  align-items: end;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(67,47,24,.2);
}
.phonebook-title-block p,
.phonebook-title-block h3,
.phonebook-title-block small { margin: 0; }
.phonebook-title-block p {
  color: #765530;
  font: 800 8px/1 var(--studio-mono,sans-serif);
  letter-spacing: .18em;
}
.phonebook-title-block h3 {
  margin-top: 4px;
  color: #2e2215;
  font: 900 26px/1.02 Georgia, serif;
}
.phonebook-title-block small {
  display: block;
  margin-top: 5px;
  color: #60462a;
  font: 700 10px/1.35 var(--studio-mono,sans-serif);
}
.phonebook-search-row {
  display: grid;
  gap: 6px;
  align-self: center;
}
.phonebook-search-row span {
  color: #6c4c28;
  font: 800 8px/1 var(--studio-mono,sans-serif);
  letter-spacing: .18em;
}
.phonebook-search {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(75,54,30,.36);
  background: rgba(255,250,241,.82);
  color: #291d11;
  font: 16px/1.2 "Courier New", monospace;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}
.phonebook-search::placeholder { color: rgba(63,45,24,.55); }
.phonebook-summary {
  margin-bottom: 8px;
  color: #5d4327;
  font: 700 10px/1.4 var(--studio-mono,sans-serif);
}
.phonebook-list {
  column-count: 2;
  column-gap: 24px;
  max-height: 57vh;
  overflow: auto;
  padding-right: 6px;
}
.phonebook-entry,
.phonebook-empty {
  break-inside: avoid;
}
.phonebook-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  width: 100%;
  margin: 0 0 2px;
  padding: 6px 0;
  border: 0;
  border-bottom: 1px dotted rgba(70,51,29,.28);
  background: transparent;
  color: #2c2115;
  text-align: left;
  cursor: pointer;
}
.phonebook-entry:hover,
.phonebook-entry:focus-visible {
  background: linear-gradient(90deg, rgba(188,149,78,.12), transparent 88%);
  outline: none;
}
.phonebook-name {
  display: inline-flex;
  gap: 8px;
  align-items: baseline;
  font: 700 12px/1.35 Georgia, serif;
}
.phonebook-name i {
  color: #b38835;
  font-style: normal;
  font-size: 11px;
}
.phonebook-number {
  color: #513a21;
  font: 700 11px/1.35 "Courier New", monospace;
  letter-spacing: .06em;
}
.phonebook-empty {
  margin: 12px 0 0;
  color: #5c4227;
  font: 700 11px/1.4 var(--studio-mono,sans-serif);
}
.device-in-focus[data-focus-kind="phonebook"] {
  width: min(920px, calc(100vw - 34px)) !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}
.device-in-focus[data-focus-kind="phonebook"] .phonebook-cover { display: none; }
.device-in-focus[data-focus-kind="phonebook"] .phonebook-open { display: block; }
.device-in-focus[data-focus-kind="phonebook"] .machine-caption { margin-top: 10px; }

@media (max-width: 940px) {
  .phonebook-header { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
  .phone-crank { right: -52px; top: 210px; transform: scale(.92) !important; }
  .device-in-focus[data-focus-kind="phone"] .phone-crank { right: -62px; top: 232px; transform: scale(1.02) !important; }
  .phone-book { width: min(100%, 280px); }
  .phonebook-pages { min-height: 560px; padding: 20px 18px 18px 34px; }
  .phonebook-list { column-count: 1; max-height: 55vh; }
}
@media (max-width: 640px) {
  .phone-book { width: min(100%, 272px); justify-self: center; }
  .phonebook-cover strong { font-size: 16px; }
  .device-in-focus[data-focus-kind="phonebook"] { width: min(100%, calc(100vw - 16px)) !important; }
  .phonebook-pages { min-height: 520px; }
}