/* =====================================================================
   OUR TAPES — the den, the TV, the VCR. (VISUAL)
   css/art.css (ART) owns the collection, spines, cases and tapes.
   This file owns ids + the room / cabinet / CRT / VCR / bench classes.
   ===================================================================== */

/* ---------- animatable light tokens (room.js drifts these) ---------- */
@property --tree-light { syntax: '<color>'; inherits: true; initial-value: #ff9a4a; }
@property --lamp-light { syntax: '<color>'; inherits: true; initial-value: #ffb46b; }
@property --fire-light { syntax: '<color>'; inherits: true; initial-value: rgba(255, 122, 40, .5); }

:root {
  /* light (shared with ART) */
  --tree-light: #ff9a4a;
  --lamp-light: #ffb46b;          /* ~2700K incandescent */
  --fire-light: rgba(255, 122, 40, .5);
  --bulb-red: #ff3b2e;
  --bulb-green: #22d36a;
  --bulb-blue: #3b6bff;
  --bulb-amber: #ffb22e;
  --bulb-orange: #ff6a1a;
  /* wood-grain laminate (shared with ART) */
  --wood-1: #7a4a2a;
  --wood-2: #5c361e;
  --wood-3: #a06c40;
  --wood-dark: #24140a;
  --wood-tex: url('../assets/room/wood.svg');

  --ink: #f3e7d3;
  --vfd: #6dffd6;

  /* layout */
  --side: clamp(16px, 10vw, 170px);
  /* the cabinet sits a little left of centre when it has to, so the window and the hearth on the right wall keep a
     full strip of wall (--gut-r); with room to spare it is centred */
  --side-l: clamp(16px, 8vw, 170px);
  --side-r: clamp(16px, calc(36vw - 290px), 300px);
  --den-w: min(1160px, calc(100vw - var(--side-l) - var(--side-r)));
  --den-l: min(calc((100vw - var(--den-w)) / 2), calc(100vw - var(--den-w) - var(--side-r)));
  --gut-r: calc(100vw - var(--den-l) - var(--den-w));
  --top: clamp(64px, 12dvh, 120px);
  --table-h: 58px;
  --tvw: clamp(340px, min(44vw, calc((100dvh - var(--top) - var(--table-h) - 160px) * 1.2)), 600px);
  --av-h: 44dvh;                  /* app.js overwrites this (px) from a ResizeObserver on .av */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; background: #120c08; }
body {
  margin: 0; min-height: 100dvh; color: var(--ink);
  font-family: Archivo, system-ui, sans-serif;
  background: #120c08;
  overflow-x: clip;
  -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none;
}
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 2px solid #ffd27a; outline-offset: 2px; }

/* =====================================================================
   THE ROOM (fixed decor behind everything)
   ===================================================================== */
.room, .tree-layer, .room-light { position: fixed; inset: 0; pointer-events: none; }
.room { z-index: 0; overflow: hidden; contain: strict; }
.room * , .tree-layer *, .room-light * { pointer-events: none; }

/* wallpaper: hunter-green stripe with a small sprig, darkened for night, warmed by the lamp */
.wall {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 34% 38% at 78% 4%, color-mix(in srgb, var(--lamp-light) 34%, transparent), transparent 70%),
    radial-gradient(ellipse 30% 55% at 6% 52%, color-mix(in srgb, var(--tree-light) 24%, transparent), transparent 75%),
    linear-gradient(180deg, rgba(8,5,3,.55), rgba(8,5,3,.15) 30%, rgba(8,5,3,.35)),
    url('../assets/room/wallpaper.svg') 0 0 / 52px 72px,
    #26382c;
  filter: saturate(.85);
}
/* oak paneling below a chair rail */
.wainscot {
  position: absolute; left: 0; right: 0; bottom: calc(var(--table-h) + 38px); height: 34dvh;
  background:
    linear-gradient(180deg, rgba(0,0,0,.35), transparent 14%, transparent 80%, rgba(0,0,0,.4)),
    repeating-linear-gradient(90deg, rgba(0,0,0,.55) 0 2px, rgba(255,220,170,.06) 2px 3px, transparent 3px 70px),
    var(--wood-tex) 0 0 / 420px 210px,
    linear-gradient(90deg, #4e2e18, #5f3a20 40%, #4b2c17);
  background-blend-mode: normal, normal, multiply, normal;
  filter: brightness(.62);
}
.rail { position: absolute; left: 0; right: 0; top: -9px; height: 12px;
  background: linear-gradient(180deg, #8a5a33, #6a4124 45%, #3a2112);
  box-shadow: 0 3px 6px rgba(0,0,0,.5); }

/* shag carpet */
.carpet {
  position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--table-h) + 40px);
  background:
    linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.2) 30%, rgba(0,0,0,.45)),
    url('../assets/room/shag.svg') 0 0 / 150px 150px,
    #6b4630;
  filter: brightness(.7) saturate(.9);
}

/* frosted window, right wall */
.window {
  position: absolute; top: calc(var(--top) * .55 + 6dvh); right: max(18px, calc(var(--gut-r) * .5 - 66px));
  width: 132px; height: min(38dvh, 300px);
}
.win-night, .win-frost, .win-frame, .win-sill-snow { position: absolute; inset: 0; border-radius: 2px; }
.win-night {
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 30% at 30% 18%, rgba(140,170,230,.25), transparent 70%),
    linear-gradient(180deg, #06102a 0%, #0c1c44 55%, #22325a 82%, #3b4a6c 100%);
}
.win-night::after { /* a neighbour's house lights far off */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 26%;
  background:
    radial-gradient(circle 2px at 22% 40%, #ffcf6a, transparent),
    radial-gradient(circle 2px at 29% 42%, #ff5a4a, transparent),
    radial-gradient(circle 2px at 36% 40%, #4a8aff, transparent),
    radial-gradient(circle 2px at 43% 43%, #5fe08a, transparent),
    linear-gradient(180deg, transparent 50%, #d9e2f2 52%, #aebad2);
  opacity: .8;
}
.snow { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.win-sill-snow { top: auto; height: 10px; bottom: 0;
  background: radial-gradient(ellipse 50% 100% at 50% 100%, #eef3fb, #c8d4e8 60%, transparent 62%) 0 0 / 34px 10px repeat-x; }
.win-frost {
  background:
    radial-gradient(ellipse 60% 40% at 0 100%, rgba(235,242,255,.55), transparent 70%),
    radial-gradient(ellipse 55% 36% at 100% 100%, rgba(235,242,255,.5), transparent 70%),
    radial-gradient(ellipse 40% 26% at 0 0, rgba(235,242,255,.32), transparent 70%),
    radial-gradient(ellipse 40% 26% at 100% 0, rgba(235,242,255,.28), transparent 70%);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 35%, #000 75%);
          mask: radial-gradient(circle at 50% 50%, transparent 35%, #000 75%);
  filter: blur(.4px);
}
.win-frame { box-shadow: 0 0 0 7px #e9dcc4, 0 0 0 9px #b9a888, 0 6px 18px 8px rgba(0,0,0,.5), inset 0 0 12px rgba(0,0,0,.6);
  filter: brightness(.55); }
.mull { position: absolute; background: #e9dcc4; box-shadow: 0 0 2px rgba(0,0,0,.6); }
.mull.v { left: 50%; top: 0; bottom: 0; width: 5px; margin-left: -2.5px; }
.mull.h { top: 50%; left: 0; right: 0; height: 5px; margin-top: -2.5px; }
.win-sill { position: absolute; left: -16px; right: -16px; bottom: -16px; height: 11px; border-radius: 2px;
  background: linear-gradient(180deg, #efe2c8, #b8a482); filter: brightness(.5); box-shadow: 0 6px 8px rgba(0,0,0,.5); }
.curtain { position: absolute; top: -26px; bottom: -40px; width: 46px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.45), transparent 18%, rgba(255,255,255,.08) 30%, rgba(0,0,0,.35) 45%, transparent 60%, rgba(255,255,255,.07) 72%, rgba(0,0,0,.45)),
    linear-gradient(180deg, #6e1e24, #5a171c);
  filter: brightness(.62);
  box-shadow: 0 8px 18px rgba(0,0,0,.5); }
.curtain.l { left: -38px; border-radius: 0 0 40% 6px; clip-path: polygon(0 0, 100% 0, 62% 60%, 100% 100%, 0 100%); }
.curtain.r { right: -38px; border-radius: 0 0 6px 40%; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 38% 60%); }
.valance { position: absolute; top: -34px; left: -48px; right: -48px; height: 26px; border-radius: 3px 3px 40% 40% / 3px 3px 12px 12px;
  background: linear-gradient(180deg, #7e252b, #5a171c); filter: brightness(.6); box-shadow: 0 6px 10px rgba(0,0,0,.5); }
/* the fireplace under the window: brick surround, a low fire, the mantel with the stockings */
.hearth { position: absolute; right: max(0px, calc(var(--gut-r) * .5 - 92px)); width: 180px;
  top: calc(var(--top) * .55 + 6dvh + min(38dvh, 300px) + 40px); bottom: calc(var(--table-h) + 34px);
  background:
    linear-gradient(180deg, rgba(0,0,0,.35), transparent 30%, rgba(0,0,0,.5)),
    repeating-linear-gradient(180deg, transparent 0 13px, rgba(20,8,4,.85) 13px 15px),
    repeating-linear-gradient(90deg, transparent 0 28px, rgba(20,8,4,.85) 28px 30px) 0 0 / 60px 30px,
    linear-gradient(90deg, #5a2416, #6e2c1a 40%, #4e1f12);
  filter: brightness(.6); box-shadow: 0 0 30px rgba(0,0,0,.6); }
.hearth::after { /* the fire's light on the bricks */
  content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 55% at 50% 100%, var(--fire-light), transparent 70%); mix-blend-mode: screen; }
.hearth .mantel { position: absolute; left: -14px; right: -14px; top: -4px; height: 16px; border-radius: 2px; z-index: 2;
  background: linear-gradient(180deg, #a06c40, #6a4124 50%, #3a2112); box-shadow: 0 6px 10px rgba(0,0,0,.6); filter: brightness(1.2); }
.hearth .firebox { position: absolute; left: 20%; right: 20%; bottom: 0; height: min(52%, 150px); border-radius: 46% 46% 0 0 / 34% 34% 0 0; overflow: hidden;
  background: radial-gradient(ellipse 80% 70% at 50% 100%, #3a1206, #120503 70%); box-shadow: inset 0 8px 18px #000; }
.hearth .logs { position: absolute; left: 14%; right: 14%; bottom: 6%; height: 14%; border-radius: 40%;
  background: linear-gradient(180deg, #3b2414, #1a0d06); box-shadow: 0 -2px 6px rgba(255,120,30,.6); }
.hearth .flame { position: absolute; bottom: 12%; width: 26%; height: 46%; border-radius: 50% 50% 40% 40% / 70% 70% 30% 30%; mix-blend-mode: screen;
  background: radial-gradient(ellipse 50% 60% at 50% 80%, #fff1b0, #ffb347 30%, #ff6a1a 55%, transparent 75%); transform-origin: 50% 100%;
  animation: flame 1.7s ease-in-out infinite alternate; filter: blur(1px); }
.hearth .flame.f1 { left: 22%; }
.hearth .flame.f2 { left: 40%; height: 58%; animation-duration: 1.3s; animation-delay: -.5s; }
.hearth .flame.f3 { left: 56%; height: 40%; animation-duration: 2.1s; animation-delay: -1.1s; }
@keyframes flame { 0% { transform: scale(1, 1) skewX(-3deg); opacity: .85; } 50% { transform: scale(.92, 1.12) skewX(3deg); opacity: 1; } 100% { transform: scale(1.06, .9) skewX(-1deg); opacity: .8; } }
/* stockings hung from the mantel */
.stockings { position: absolute; left: -4px; right: -4px; top: 8px; z-index: 1; display: flex; justify-content: space-around; }
.stocking { width: 38px; height: 66px; filter: brightness(.72) drop-shadow(0 6px 5px rgba(0,0,0,.55)); transform-origin: 50% 0; }
.stocking.s1 { transform: rotate(-3deg); }
.stocking.s2 { transform: rotate(2deg) translateY(4px); }
.stocking.s3 { transform: rotate(-1deg) translateY(1px); }

/* the fire is just off-frame right: a warm flicker on that side */
.fireglow { position: absolute; right: -30vw; bottom: -20dvh; width: 70vw; height: 90dvh;
  background: radial-gradient(closest-side, var(--fire-light), transparent); mix-blend-mode: screen; opacity: .55; }

/* presents under the tree (left corner) */
.presents { position: absolute; left: max(-30px, calc(var(--side) * .5 - 150px)); bottom: calc(var(--table-h) + 4px); width: 250px; height: 90px; filter: brightness(.82); }
.gift { position: absolute; bottom: 0; display: block; border-radius: 2px; box-shadow: 0 6px 10px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.25); }
.gift::before, .gift::after { content: ''; position: absolute; }
.gift::before { left: 50%; top: 0; bottom: 0; width: 7px; margin-left: -3.5px; background: var(--rib); box-shadow: 0 0 2px rgba(0,0,0,.3); }
.gift::after { top: 40%; left: 0; right: 0; height: 6px; background: var(--rib); }
.gift b { position: absolute; left: 50%; top: -9px; width: 22px; height: 12px; margin-left: -11px; border-radius: 50%;
  background: radial-gradient(ellipse at 30% 50%, var(--rib) 0 40%, transparent 42%), radial-gradient(ellipse at 70% 50%, var(--rib) 0 40%, transparent 42%); }
.g1 { left: 20px; width: 70px; height: 52px; --rib: #e9c45a;
  background: repeating-linear-gradient(0deg, transparent 0 9px, rgba(20,60,30,.6) 9px 13px), repeating-linear-gradient(90deg, #a3161c 0 9px, rgba(20,60,30,.55) 9px 13px, #a3161c 13px 22px); }  /* plaid */
.g2 { left: 84px; width: 46px; height: 34px; --rib: #c9202a;
  background: linear-gradient(115deg, #d8dde6, #8c96a8 30%, #f4f7fb 46%, #7a8496 70%, #c4cbd8); }               /* silver foil */
.g3 { left: 124px; width: 62px; height: 44px; --rib: #f1ead8;
  background: radial-gradient(circle 3px, #f1ead8 60%, transparent 70%) 0 0 / 14px 14px, #1b4f2d; }            /* green polka */
.g4 { left: 0; width: 34px; height: 26px; --rib: #3b6bff;
  background: linear-gradient(115deg, #ffd58a, #c8851c 35%, #ffe7a8 50%, #b06e12 75%); }                       /* gold foil */
.g5 { left: 182px; width: 40px; height: 22px; --rib: #ffcf6a; background: #2a3f8a; transform: rotate(-4deg); }

.floor-stack { display: none; }

/* ---------- the tree ---------- */
.tree-layer { z-index: 1; }
.tree-svg { position: absolute; left: max(-110px, calc(var(--side) * .5 - 170px)); bottom: calc(var(--table-h) + 10px);
  height: min(78dvh, 660px); width: auto; aspect-ratio: 320 / 560; overflow: visible; }
.tree-glow { position: absolute; left: calc(var(--side) * .5 - 260px); bottom: 0; width: 560px; height: 90dvh;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--tree-light) 30%, transparent), transparent);
  mix-blend-mode: screen; opacity: .7; }
.tree-svg .halos { mix-blend-mode: screen; }
.tree-svg .halo { animation: breathe var(--t, 9s) ease-in-out var(--d, 0s) infinite; transform-box: fill-box; transform-origin: center; }
.tree-svg .halo.flick { animation: breathe var(--t, 9s) ease-in-out var(--d, 0s) infinite, flick 5.3s steps(1) infinite; }
.tree-svg .bulb .hot { animation: hot var(--t, 9s) ease-in-out var(--d, 0s) infinite; }
.tree-svg .tinsel { opacity: .35; animation: tinsel 6s ease-in-out infinite; }
.tree-svg .tinsel.t1 { animation-delay: -2s; }
.tree-svg .tinsel.t2 { animation-delay: -4s; }
.tree-svg .star-glow { animation: breathe 11s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes breathe { 0%, 100% { opacity: .78; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes hot { 0%, 100% { opacity: .4; } 50% { opacity: .7; } }
@keyframes tinsel { 0%, 100% { opacity: .22; } 40% { opacity: .62; stroke: #fff4dc; } 60% { opacity: .4; } }
@keyframes flick { 0%, 61%, 63%, 100% { opacity: 1; } 62% { opacity: .45; } 88% { opacity: .7; } 89% { opacity: 1; } }

/* ---------- light overlays in front (tint the cabinet + cases) ---------- */
.room-light { z-index: 3; }
.room-light i { position: absolute; display: block; }
.wash-tree { left: -20vw; top: 10dvh; width: 70vw; height: 110dvh;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--tree-light) 55%, transparent), transparent); mix-blend-mode: soft-light; opacity: .8; }
.wash-fire { right: -28vw; bottom: -30dvh; width: 70vw; height: 100dvh;
  background: radial-gradient(closest-side, var(--fire-light), transparent); mix-blend-mode: soft-light; }
.wash-lamp { right: 4vw; top: -24dvh; width: 50vw; height: 70dvh;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--lamp-light) 60%, transparent), transparent); mix-blend-mode: soft-light; opacity: .8; }
.vignette { inset: 0; background: radial-gradient(ellipse 75% 70% at 46% 46%, transparent 55%, rgba(4,2,1,.55) 100%); }

/* =====================================================================
   CONTROLS: two little wall switches, top right
   ===================================================================== */
.switches { position: fixed; z-index: 70; top: calc(10px + var(--sat)); right: calc(14px + var(--sar)); display: flex; gap: 8px; }
.switch {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 600 8.5px/1 Archivo; letter-spacing: .14em; color: rgba(243, 231, 211, .55); text-transform: uppercase; white-space: nowrap;
  min-width: 44px;
}
.switch::before { /* ivory plate + toggle lever (up = on) */
  content: ''; width: 26px; height: 38px; border-radius: 4px;
  background:
    radial-gradient(circle 1.4px at 50% 8%, #9c9280 60%, transparent 70%),
    radial-gradient(circle 1.4px at 50% 92%, #9c9280 60%, transparent 70%),
    linear-gradient(180deg, transparent 30%, #3a332a 30% 70%, transparent 70%) 50% 50% / 8px 100% no-repeat,
    linear-gradient(180deg, #f3ead8 0 30%, #cfc3aa 30% 47%, #efe5d0 47% 100%) 50% 50% / 8px 40% no-repeat,
    linear-gradient(160deg, #f1e8d6, #d8ccb2);
  box-shadow: 0 2px 4px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(0,0,0,.2);
  filter: brightness(.82);
  transition: background-position .08s;
}
.switch[aria-pressed="true"]::before {
  background:
    radial-gradient(circle 1.4px at 50% 8%, #9c9280 60%, transparent 70%),
    radial-gradient(circle 1.4px at 50% 92%, #9c9280 60%, transparent 70%),
    linear-gradient(180deg, transparent 30%, #3a332a 30% 70%, transparent 70%) 50% 50% / 8px 100% no-repeat,
    linear-gradient(0deg, #f3ead8 0 30%, #cfc3aa 30% 47%, #efe5d0 47% 100%) 50% 50% / 8px 40% no-repeat,
    linear-gradient(160deg, #f1e8d6, #d8ccb2);
}
.switch[aria-pressed="true"] { color: rgba(243, 231, 211, .32); }

/* =====================================================================
   THE ENTERTAINMENT CENTER
   ===================================================================== */
.den { position: relative; z-index: 2; width: var(--den-w); margin: 0 0 0 var(--den-l); padding-top: var(--top); }
.unit {
  position: relative; display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "crown crown" "av shelves" "plinth plinth";
  grid-template-rows: auto minmax(0, 1fr) auto;
  column-gap: 14px;
  height: calc(100dvh - var(--top) - var(--table-h));
  min-height: 540px;
  padding: 0 14px;
  border-radius: 4px 4px 0 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.32), transparent 3%, transparent 97%, rgba(0,0,0,.35)),
    var(--wood-tex) 0 0 / 520px 260px,
    linear-gradient(180deg, var(--wood-1), var(--wood-2));
  background-blend-mode: normal, multiply, normal;
  box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 30px 60px rgba(0,0,0,.6), 30px 0 60px rgba(0,0,0,.25), -30px 0 60px rgba(0,0,0,.25);
}
.unit::after { /* the warm wash from the lamp on top + the tree to the left */
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--lamp-light) 16%, transparent), transparent 22%),
    linear-gradient(90deg, color-mix(in srgb, var(--tree-light) 18%, transparent), transparent 30%);
  mix-blend-mode: screen;
}
.crown { grid-area: crown; position: relative; height: 30px; margin: 0 -26px 12px;
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(255,230,190,.28) 0 2px, transparent 2px 9px, rgba(0,0,0,.35) 9px 11px, transparent 11px 22px, rgba(0,0,0,.5) 22px),
    var(--wood-tex) 0 0 / 520px 260px,
    linear-gradient(180deg, var(--wood-3), var(--wood-1));
  background-blend-mode: normal, multiply, normal;
  box-shadow: 0 8px 14px rgba(0,0,0,.55), 0 -1px 0 color-mix(in srgb, var(--lamp-light) 50%, transparent);
  z-index: 3;
}
.garland { position: absolute; left: -8px; right: -8px; top: 12px; height: 44px; z-index: 2;
  background: url('../assets/room/garland.svg') 0 0 / 300px 44px repeat-x;
  filter: brightness(.9) drop-shadow(0 4px 4px rgba(0,0,0,.5)); }
.garland::after { content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle 9px, rgba(255,210,140,.18), transparent) 0 0 / 60px 44px; mix-blend-mode: screen; animation: breathe 9s ease-in-out infinite; }

/* table lamp standing on top of the unit */
.lamp { position: absolute; right: 9%; bottom: 100%; width: 92px; height: calc(var(--top) * .9); max-height: 110px; min-height: 58px; }
.lamp i { position: absolute; left: 50%; display: block; }
.lamp .shade { top: 0; width: 92px; height: 52%; margin-left: -46px;
  clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%);
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.08) 0 3px, transparent 3px 7px),
    linear-gradient(180deg, #fff1d0, #ffd89a 60%, #f0b868);
  box-shadow: 0 0 30px 8px var(--lamp-light);
  filter: drop-shadow(0 0 16px color-mix(in srgb, var(--lamp-light) 80%, transparent)); }
.lamp .neck { top: 52%; width: 6px; height: 16%; margin-left: -3px; background: linear-gradient(90deg, #7a5a24, #e6c46a, #7a5a24); }
.lamp .base { bottom: 0; width: 44px; height: 34%; margin-left: -22px; border-radius: 45% 45% 10% 10% / 60% 60% 10% 10%;
  background: radial-gradient(ellipse at 35% 30%, #f6dca0, #b48a3a 45%, #5a4014); box-shadow: 0 3px 4px rgba(0,0,0,.6); }
.lamp::before { /* the pool of light it throws on the wall */
  content: ''; position: absolute; left: 50%; top: -120%; width: 420px; height: 300%; margin-left: -210px;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, color-mix(in srgb, var(--lamp-light) 32%, transparent), transparent 70%);
  mix-blend-mode: screen; pointer-events: none; }

.av { grid-area: av; display: flex; flex-direction: column; gap: 12px; min-height: 0; position: relative; z-index: 2; }
.cubby { position: relative; padding: 12px; border-radius: 2px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0, color-mix(in srgb, var(--lamp-light) 10%, transparent), transparent),
    linear-gradient(180deg, #120a05, #1d1109 70%, #24150b);
  box-shadow: inset 0 10px 18px rgba(0,0,0,.85), inset 0 0 0 1px rgba(0,0,0,.6), 0 1px 0 rgba(255,220,170,.12); }
.cubby::after { /* shelf lip */
  content: ''; position: absolute; left: -2px; right: -2px; bottom: -6px; height: 8px; border-radius: 1px;
  background: linear-gradient(180deg, var(--wood-3), var(--wood-2)); box-shadow: 0 2px 3px rgba(0,0,0,.5); }
.tv-cubby { flex: 0 0 auto; }
.vcr-cubby { flex: 1 1 auto; display: flex; align-items: flex-end; justify-content: center; padding-top: 14px; }
/* bottom cubby: the home-recorded tapes, lying flat */
.stash-cubby { flex: 0 0 auto; display: none; align-items: flex-end; padding: 10px 16px 8px; }
@media (min-width: 821px) and (min-height: 830px) { .stash-cubby { display: flex; } }
.stash { display: grid; grid-template-rows: auto auto; grid-auto-flow: column; column-gap: 14px; align-items: end; }
.t120 { position: relative; display: block; width: clamp(130px, calc(var(--tvw) * .36), 210px); aspect-ratio: 7.4 / 1.05; border-radius: 2px; margin-top: -1px;
  background: linear-gradient(180deg, #2a2a2c, #111 55%, #070707);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 2px 3px rgba(0,0,0,.6); }
.t120:nth-child(2) { margin-left: 8px; }
.t120:nth-child(4) { margin-left: -6px; }
.t120.tilt { transform: rotate(-1.4deg); }
.t120::after { content: attr(data-l); position: absolute; left: 13%; right: 13%; top: 20%; bottom: 20%; border-radius: 1px;
  background: linear-gradient(180deg, #f2ead8, #ddd2bc); color: #1d2a6b; font: 400 clamp(7px, calc(var(--tvw) * .016), 10px)/1 'Permanent Marker';
  display: flex; align-items: center; padding: 0 5px; white-space: nowrap; overflow: hidden; filter: brightness(.85); }
.t120.blank::after { color: #8a8070; font: 800 6px Archivo; letter-spacing: .14em; }
.t120:nth-child(2)::after { color: #b8121a; }

.shelves { grid-area: shelves; min-height: 0; position: relative; z-index: 1; display: flex; }
.collection-slot { flex: 1; min-width: 0; min-height: 0; position: relative; border-radius: 2px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.5), transparent 6%, transparent 94%, rgba(0,0,0,.5)),
    var(--wood-tex) 0 0 / 520px 260px,
    linear-gradient(180deg, #2a180c, #1a0e06);
  background-blend-mode: normal, multiply, normal;
  box-shadow: inset 0 12px 20px rgba(0,0,0,.8), inset 0 0 0 1px rgba(0,0,0,.6); }
#collection { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--wood-3) transparent; padding: 6px 8px 12px; }
#collection::-webkit-scrollbar { width: 8px; }
#collection::-webkit-scrollbar-thumb { background: var(--wood-1); border-radius: 4px; }
.plinth { grid-area: plinth; height: 14px; margin: 10px -14px 0;
  background: linear-gradient(180deg, var(--wood-2), var(--wood-dark)); box-shadow: inset 0 2px 0 rgba(255,220,170,.1); }

/* =====================================================================
   TV (black early-90s set; keep every hook)
   ===================================================================== */
.tv { container-type: inline-size; width: var(--tvw); max-width: 100%; margin: 0 auto; position: relative; z-index: 2; }
.tv-body {
  position: relative; display: flex; gap: 2.6cqw; padding: 3.2cqw; border-radius: 2.2cqw;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--lamp-light) 22%, transparent), transparent 5%),
    linear-gradient(90deg, color-mix(in srgb, var(--tree-light) 14%, transparent), transparent 12%),
    linear-gradient(180deg, #2c2b2a, #1a1919 50%, #121111);
  box-shadow: 0 2.4cqw 3.2cqw rgba(0,0,0,.7), inset 0 0 0 .25cqw rgba(0,0,0,.6), inset 0 .3cqw .2cqw rgba(255,240,220,.12), inset .3cqw 0 .3cqw rgba(255,255,255,.04);
}
.bezel { flex: 0 0 76cqw; padding: 2.4cqw; border-radius: 2cqw;
  background: linear-gradient(160deg, #2e2d2c, #121212 55%, #1e1d1c);
  box-shadow: inset 0 0 0 .25cqw #3a3938, inset 0 .6cqw 1.2cqw rgba(0,0,0,.85), 0 .1cqw 0 rgba(255,255,255,.06); }
.screen { position: relative; aspect-ratio: 4 / 3; border-radius: 9% / 11%; overflow: hidden; background: #050605;
  box-shadow: 0 0 0 .4cqw #050505, 0 0 2cqw rgba(0,0,0,.9); isolation: isolate; transition: box-shadow .6s; }
.screen > * { position: absolute; inset: 0; }
.yt-wrap { opacity: 0; transition: opacity .35s; background: #000; overflow: hidden; }
/* 16:9 cropped to 4:3, then overscanned ~8% like a real set so YouTube's corner bugs and title strip sit under the bezel */
.yt-wrap iframe, .yt-wrap #yt { position: absolute; top: -6.5%; left: -25%; width: 150% !important; height: 113% !important; border: 0; pointer-events: none;
  filter: saturate(1.25) contrast(1.1) brightness(1.06) blur(.35px); }
.blue { background: #1a2fd6; opacity: 0; transition: opacity .12s;
  background-image: radial-gradient(ellipse at center, #2c46f2, #1424b8 80%); }
#static { width: 100%; height: 100%; opacity: 0; transition: opacity .25s; image-rendering: auto; }
.bands { opacity: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg, transparent 0 18%, rgba(255,255,255,.55) 19%, rgba(200,200,255,.25) 21%, transparent 23%, transparent 52%, rgba(255,255,255,.35) 53%, transparent 55%);
  background-size: 100% 220%; mix-blend-mode: screen; }
.osd { pointer-events: none; font-family: VT323, monospace; color: #fff; font-size: 7.4cqw; line-height: 1; z-index: 4;
  text-shadow: .35cqw .35cqw 0 rgba(0,0,0,.55), 0 0 .6cqw rgba(255,255,255,.4); }
.osd span { position: absolute; white-space: nowrap; }
.osd-tl { left: 8%; top: 9%; }
.osd-tr { right: 8%; top: 9%; }
.osd-bc { left: 0; right: 0; bottom: 11%; text-align: center; font-size: 5.6cqw; }
.osd-bc:has(.osd-skip) { bottom: 4.5%; }
/* above the camcorder date stamp (bottom 15%..~30%), never on it */
.osd-bc:has(.osd-sound) { top: 22%; bottom: auto; }
.osd-sound { font-size: 4.6cqw; letter-spacing: .06em; }
.osd-skip { font-size: 3.4cqw; letter-spacing: .12em; opacity: .78; animation: osdskip 1.6s steps(2, jump-none) infinite; }
@keyframes osdskip { 50% { opacity: .45; } }
.glass { pointer-events: auto; cursor: default; z-index: 4; }

/* the tube: scanlines, aperture grille, vignette, convex highlight, room reflections */
.crt { pointer-events: none; z-index: 5; border-radius: inherit;
  background:
    radial-gradient(ellipse 60% 40% at 28% 14%, rgba(255,255,255,.09), transparent 60%),
    radial-gradient(ellipse 120% 90% at 50% 50%, transparent 58%, rgba(0,0,0,.6) 100%),
    repeating-linear-gradient(180deg, rgba(0,0,0,.26) 0 max(1px, .14cqw), transparent max(1px, .14cqw) max(2.4px, .34cqw)),
    repeating-linear-gradient(90deg, rgba(255,40,40,.05) 0 max(1px, .12cqw), rgba(40,255,80,.05) max(1px, .12cqw) max(2px, .24cqw), rgba(60,90,255,.05) max(2px, .24cqw) max(3px, .36cqw));
  box-shadow: inset 0 0 5cqw rgba(0,0,0,.7), inset 0 0 1.2cqw rgba(0,0,0,.9);
  animation: flicker 4s infinite steps(40); }
.crt::before { /* faint tree bulbs + window still reflected in the glass when the set is on */
  content: ''; position: absolute; inset: 0; border-radius: inherit; mix-blend-mode: screen; opacity: .22;
  background:
    radial-gradient(circle 1.4cqw at 7% 30%, var(--bulb-red), transparent),
    radial-gradient(circle 1.2cqw at 11% 46%, var(--bulb-green), transparent),
    radial-gradient(circle 1.3cqw at 5% 60%, var(--bulb-amber), transparent),
    radial-gradient(circle 1.1cqw at 13% 70%, var(--bulb-blue), transparent),
    radial-gradient(ellipse 7cqw 9cqw at 88% 22%, rgba(150,180,255,.5), transparent);
  filter: blur(.5cqw); }
.crt::after { /* degauss rainbow mottling; only visible while .turning-on */
  content: ''; position: absolute; inset: -10%; opacity: 0;
  background:
    radial-gradient(ellipse 40% 50% at 30% 40%, rgba(255,0,200,.55), transparent 70%),
    radial-gradient(ellipse 45% 40% at 72% 60%, rgba(0,255,140,.5), transparent 70%),
    radial-gradient(ellipse 50% 45% at 55% 25%, rgba(80,120,255,.5), transparent 70%),
    radial-gradient(ellipse 40% 40% at 20% 80%, rgba(255,200,0,.45), transparent 70%);
  mix-blend-mode: screen; }
@keyframes flicker { 0%, 100% { opacity: 1; } 48% { opacity: .96; } 50% { opacity: 1; } 73% { opacity: .97; } }
.powerfx { pointer-events: none; z-index: 6; background: #f4f8ff; opacity: 0; transform-origin: center; }

/* off: dark gray-green glass with the room in it */
.offglass { pointer-events: none; z-index: 7; transition: opacity .25s; border-radius: inherit;
  background:
    radial-gradient(ellipse 34% 22% at 30% 20%, rgba(255,255,255,.12), transparent 70%),                 /* convex highlight */
    linear-gradient(172deg, transparent 14%, rgba(255,255,255,.035) 15% 19%, transparent 20%),            /* soft sweep */
    radial-gradient(circle 1.5cqw at 8% 28%, color-mix(in srgb, var(--bulb-red) 70%, transparent), transparent),
    radial-gradient(circle 1.2cqw at 13% 41%, color-mix(in srgb, var(--bulb-green) 65%, transparent), transparent),
    radial-gradient(circle 1.4cqw at 6% 53%, color-mix(in srgb, var(--bulb-amber) 70%, transparent), transparent),
    radial-gradient(circle 1.2cqw at 15% 59%, color-mix(in srgb, var(--bulb-blue) 70%, transparent), transparent),
    radial-gradient(circle 1.3cqw at 9% 72%, color-mix(in srgb, var(--bulb-orange) 70%, transparent), transparent),
    radial-gradient(circle 1cqw at 17% 80%, color-mix(in srgb, var(--bulb-red) 60%, transparent), transparent),
    radial-gradient(circle 4cqw at 12% 50%, color-mix(in srgb, var(--tree-light) 22%, transparent), transparent),
    radial-gradient(ellipse 7% 20% at 87% 22%, rgba(140,170,230,.10), rgba(140,170,230,.04) 55%, transparent 100%),  /* window, curved and feathered by the glass */
    radial-gradient(ellipse 30% 20% at 80% 6%, color-mix(in srgb, var(--lamp-light) 16%, transparent), transparent),
    radial-gradient(ellipse 120% 100% at 50% 45%, #27312c, #131816 70%, #0a0d0c);
  box-shadow: inset 0 0 4cqw rgba(0,0,0,.75); }
.offglass::before { /* the reflections are soft: the glass is curved and a little dusty */
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px); }
.offglass::after { /* phosphor afterglow dot */
  content: ''; position: absolute; left: 50%; top: 50%; width: 9cqw; height: 9cqw; margin: -4.5cqw 0 0 -4.5cqw; border-radius: 50%;
  background: radial-gradient(circle, rgba(235,245,255,.95), rgba(170,200,255,.35) 30%, transparent 70%); opacity: 0; }

.screen[data-mode="blue"] .blue,
.screen[data-mode="trackblue"] .blue { opacity: 1; }
.screen[data-mode="snow"] #static, .screen[data-mode="track"] #static { opacity: 1; }
.screen[data-mode="video"] .yt-wrap, .screen[data-mode="search"] .yt-wrap, .screen[data-mode="tap"] .yt-wrap { opacity: 1; }
/* REW search: the live player is hidden (YouTube draws its own buffering/pause UI while seeking).
   A soft, jittering still of the film sits under the noise bands instead. */
.spic { opacity: 0; transition: opacity .12s; background: #10131c var(--spic, none) center / cover no-repeat;
  filter: blur(1.6px) saturate(1.3) contrast(1.15) brightness(.85); }
.screen[data-mode="rsearch"] .spic { opacity: 1; animation: spicjit .18s steps(2) infinite; }
/* PAUSE, and REW on a tape with no still (home tapes): the live picture itself, silent at quarter speed, under the bands */
.screen[data-mode="rsearch"][data-live] .yt-wrap { opacity: 1; }
.screen[data-mode="rsearch"][data-live] .spic { opacity: 0; animation: none; }
.screen[data-mode="rsearch"][data-live] #static { opacity: .24; }
.screen[data-mode="rsearch"] #static { opacity: .42; mix-blend-mode: screen; }
.screen[data-mode="rsearch"] .bands { opacity: 1; animation: bands .3s linear infinite reverse; }
@keyframes spicjit { 0% { transform: translate(0, 0) scale(1.04); } 50% { transform: translate(-1.2%, .6%) scale(1.04); } 100% { transform: translate(.8%, -.4%) scale(1.04); } }
.screen[data-mode="video"] #static { opacity: .1; mix-blend-mode: screen; }
.screen[data-mode="search"] #static { opacity: .35; mix-blend-mode: screen; }
.screen[data-mode="search"] .bands { opacity: 1; animation: bands .35s linear infinite; }
.screen[data-mode="tap"] .glass { pointer-events: none; }
.screen[data-mode="track"] .bands { opacity: .8; animation: bands 1.1s linear infinite; }
.screen:not([data-mode="off"]) .offglass { opacity: 0; }
.screen.glitch .yt-wrap { animation: glitch .32s steps(4) 1; }
.screen.glitch #static { opacity: .55 !important; }
@keyframes bands { from { background-position: 0 0; } to { background-position: 0 -220%; } }
@keyframes glitch { 0% { transform: translateX(0) skewX(0); } 25% { transform: translateX(-1.5%) skewX(3deg); filter: hue-rotate(20deg); } 50% { transform: translateX(1%) skewX(-2deg); } 75% { transform: translateY(-1%); } 100% { transform: none; } }

/* power on: the beam opens, then the degauss shimmer settles over ~0.9s */
.screen.turning-on .powerfx { animation: crtOn .6s ease-out forwards; }
.screen.turning-on > .yt-wrap, .screen.turning-on > .blue, .screen.turning-on > #static, .screen.turning-on > .osd { animation: degauss .9s cubic-bezier(.2,.7,.3,1) both; }
.screen.turning-on .crt::after { animation: degaussColor .95s ease-out both; }
.screen.turning-off .powerfx { animation: crtOff .45s ease-in forwards; }
.screen.turning-off .offglass::after { animation: afterglow 1.8s ease-out .38s both; }
@keyframes crtOn { 0% { opacity: 1; transform: scale(.6, .004); } 30% { opacity: 1; transform: scale(1, .012); } 55% { opacity: .9; transform: scale(1, 1); } 100% { opacity: 0; transform: scale(1, 1); } }
@keyframes crtOff { 0% { opacity: 0; transform: scale(1, 1); } 15% { opacity: 1; transform: scale(1, 1); } 55% { opacity: 1; transform: scale(1, .006); } 85% { opacity: 1; transform: scale(.015, .006); } 100% { opacity: 0; transform: scale(0, 0); } }
@keyframes degauss {
  0%   { transform: skewX(4deg) scale(1.03, .98); filter: hue-rotate(70deg) saturate(1.8) drop-shadow(.8cqw 0 rgba(255,0,60,.7)) drop-shadow(-.8cqw 0 rgba(0,220,255,.7)); }
  18%  { transform: skewX(-3deg) scale(.99, 1.02); filter: hue-rotate(-50deg) saturate(1.6) drop-shadow(-.6cqw 0 rgba(255,0,60,.6)) drop-shadow(.6cqw 0 rgba(0,220,255,.6)); }
  36%  { transform: skewX(2deg) scale(1.01, .995); filter: hue-rotate(30deg) saturate(1.35) drop-shadow(.35cqw 0 rgba(255,0,60,.45)) drop-shadow(-.35cqw 0 rgba(0,220,255,.45)); }
  56%  { transform: skewX(-1deg); filter: hue-rotate(-14deg) saturate(1.15) drop-shadow(-.15cqw 0 rgba(255,0,60,.3)) drop-shadow(.15cqw 0 rgba(0,220,255,.3)); }
  78%  { transform: skewX(.4deg); filter: hue-rotate(5deg); }
  100% { transform: none; filter: none; }
}
@keyframes degaussColor { 0% { opacity: .9; transform: rotate(0) scale(1); } 40% { opacity: .5; transform: rotate(25deg) scale(1.1); } 100% { opacity: 0; transform: rotate(50deg) scale(1.2); } }
@keyframes afterglow { 0% { opacity: 1; transform: scale(.7); } 25% { opacity: .75; transform: scale(1); } 100% { opacity: 0; transform: scale(.4); } }

/* powered-on bloom + the blue-ish glass glow that falls on the cabinet in front */
.tv.on .screen { box-shadow: 0 0 0 .4cqw #050505, 0 0 2.6cqw rgba(150,180,255,.32), 0 0 7cqw rgba(120,150,255,.16); }
.tv-glow { position: absolute; z-index: -1; left: -12%; right: -12%; top: 10%; bottom: -46%; pointer-events: none; opacity: 0; transition: opacity .8s;
  background: radial-gradient(ellipse 50% 55% at 40% 38%, rgba(150,175,255,.28), rgba(120,150,255,.08) 55%, transparent 75%); }
.tv.on .tv-glow { opacity: 1; animation: tvglow 5s ease-in-out infinite; }
@keyframes tvglow { 0%, 100% { opacity: .85; } 37% { opacity: 1; } 52% { opacity: .78; } 70% { opacity: .95; } }

.tv-panel { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2.2cqw; padding: 1.4cqw 0;
  background: linear-gradient(180deg, #262524, #161515); border-radius: 1.6cqw; box-shadow: inset 0 0 0 .2cqw #353433; }
.tv-brand { font-family: 'Archivo Black'; font-size: 2.3cqw; letter-spacing: .12em; color: #d9d2c4; text-align: center; line-height: 1.1; }
.tv-brand small { display: block; font-family: Archivo; font-weight: 600; font-size: 1.1cqw; letter-spacing: .14em; color: #9a8f80; }
.grille { width: 70%; flex: 1; border-radius: .8cqw; background: repeating-linear-gradient(180deg, #0c0c0d 0 .55cqw, #2c2c2e .55cqw 1.1cqw); box-shadow: inset 0 0 .6cqw #000; }
.chan { font-family: 'Share Tech Mono'; font-size: 2.6cqw; color: #ff3b2b; background: #160606; padding: .3cqw 1cqw; border-radius: .4cqw; text-shadow: 0 0 .6cqw #ff3b2b; min-width: 6cqw; text-align: center; }
.chan.dim { color: #3a1010; text-shadow: none; }
.knobs { display: flex; gap: 1.4cqw; }
.knobs i { width: 4.4cqw; height: 4.4cqw; border-radius: 50%; background: conic-gradient(#8a8a8e, #4a4a4e, #9a9a9e, #4a4a4e, #8a8a8e); box-shadow: 0 .3cqw .5cqw rgba(0,0,0,.7), inset 0 0 0 .4cqw #2a2a2c; }
.tv-power { display: flex; flex-direction: column; align-items: center; gap: .5cqw; border: 0; background: none; cursor: pointer; font-size: 1.15cqw; letter-spacing: .1em; color: #a99d8c; padding: .6cqw; touch-action: manipulation; }
.tv-power::before { content: ''; width: 8cqw; height: 3.4cqw; border-radius: .6cqw; background: linear-gradient(#4a4a4e, #262628); box-shadow: 0 .35cqw 0 #0d0d0e, inset 0 .15cqw 0 rgba(255,255,255,.2); transition: transform .06s, box-shadow .06s; }
.tv-power:active::before, .tv-power.down::before { transform: translateY(.3cqw); box-shadow: 0 .05cqw 0 #0d0d0e; }
.tv-power .led { order: -1; width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: #3a0d0d; }
.tv.on .tv-power .led { background: #ff3b2b; box-shadow: 0 0 1cqw #ff3b2b; }

/* =====================================================================
   VCR (brushed black/silver, cyan-green VFD)
   ===================================================================== */
.vcr { container-type: inline-size; width: min(100%, calc(var(--tvw) * .96)); position: relative; }
.vcr-top { height: 2.2cqw; border-radius: .8cqw .8cqw 0 0;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--tree-light) 35%, transparent), transparent 30%, transparent 70%, color-mix(in srgb, var(--lamp-light) 40%, transparent)),
    linear-gradient(180deg, rgba(255,240,220,.3), transparent 40%),
    linear-gradient(180deg, #4a4a4e, #2c2c30);
  box-shadow: inset 0 .12cqw 0 color-mix(in srgb, var(--lamp-light) 60%, transparent); }
.vcr-face { display: grid; grid-template-columns: 44cqw 27cqw 1fr; grid-template-areas: "slot vfd btns"; align-items: center; gap: 2.2cqw;
  padding: 2.2cqw 2.8cqw 2.6cqw; border-radius: 0 0 .8cqw .8cqw;
  background:
    url('../assets/room/brushed.svg') 0 0 / 100% 100%,
    linear-gradient(180deg, transparent 0 1.2cqw, rgba(200,205,215,.16) 1.2cqw 1.5cqw, transparent 1.5cqw),
    linear-gradient(180deg, #333337 0, #232326 8%, #19191c 92%, #0d0d0e);
  background-blend-mode: overlay, normal, normal;
  box-shadow: 0 1.4cqw 2cqw rgba(0,0,0,.65), inset 0 .15cqw 0 rgba(255,255,255,.16), inset 0 -.2cqw 0 rgba(0,0,0,.6); }
.vcr-slotarea { grid-area: slot; }
.vcr-brand { font-family: 'Archivo Black'; font-size: 2.2cqw; letter-spacing: .14em; color: #d8d1c2; margin-bottom: 1.4cqw; }
.vcr-brand span { font-family: Archivo; font-weight: 600; font-size: 1.05cqw; letter-spacing: .12em; color: #8f877a; margin-left: .8cqw; vertical-align: middle; }
.slot { position: relative; width: 100%; aspect-ratio: 7.4 / 1; perspective: 300px; }
.slot-mouth { position: absolute; inset: 0; border-radius: .5cqw;
  /* a real hole: the tape path's floor catches a little light at the lip, then everything falls away into the deck */
  background:
    radial-gradient(40% 70% at 50% 100%, rgba(120,128,140,.16), transparent 70%),
    linear-gradient(180deg, #000 0, #030304 45%, #0b0b0d 72%, #19191c 90%, #2a2a2e 97%, #0e0e10),
    #000;
  box-shadow: 0 0 0 .3cqw #121214, 0 0 0 .5cqw #4a4a4e, 0 .62cqw 0 -.1cqw rgba(255,255,255,.07),
    inset 0 .6cqw .9cqw #000, inset 1.2cqw 0 1cqw -.6cqw rgba(0,0,0,.85), inset -1.2cqw 0 1cqw -.6cqw rgba(0,0,0,.85);
  transition: box-shadow .2s; }
/* the guide rails just inside the mouth, and the faint green of the deck's own LED somewhere deep inside */
.slot-mouth::before { content: ''; position: absolute; left: 3%; right: 3%; bottom: 14%; height: 12%; border-radius: .2cqw;
  background: linear-gradient(90deg, transparent 0 4%, rgba(160,165,175,.22) 4% 7%, transparent 7% 93%, rgba(160,165,175,.22) 93% 96%, transparent 96%); }
.slot-mouth::after { content: ''; position: absolute; left: 70%; top: 22%; width: 1.2%; height: 16%; border-radius: 50%;
  background: rgba(90,255,170,.5); filter: blur(.25cqw); opacity: 0; transition: opacity .4s; }
.flap.open ~ .slot-mouth::after, .slot:has(.flap.open) .slot-mouth::after { opacity: .7; }
.slot.glow .slot-mouth { box-shadow: 0 0 0 .3cqw #121214, 0 0 0 .5cqw #9fd0ff, 0 0 2.4cqw rgba(140,200,255,.55), inset 0 .6cqw .9cqw #000, inset 1.2cqw 0 1cqw -.6cqw rgba(0,0,0,.85), inset -1.2cqw 0 1cqw -.6cqw rgba(0,0,0,.85); }
.flap { position: absolute; inset: .35cqw; border-radius: .3cqw; transform-origin: 50% 0; transition: transform .16s cubic-bezier(.3,1.4,.5,1), filter .16s; z-index: 2;
  background: linear-gradient(180deg, #34343a, #1c1c20 70%, #26262a); box-shadow: inset 0 .15cqw 0 rgba(255,255,255,.12), inset 0 -.2cqw .3cqw rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center; }
.flap span { font-family: 'Archivo Black'; font-size: 1.3cqw; letter-spacing: .4em; color: #5e5e64; }
.flap.peek { transform: rotateX(28deg); filter: brightness(.8); }
.flap.open { transform: rotateX(74deg); filter: brightness(.34); }
/* the door's own underside as it swings in: a sprung steel plate with a lit front edge */
.flap::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.14), transparent 22%), repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px);
  opacity: 0; transition: opacity .16s; }
.flap.peek::after, .flap.open::after { opacity: 1; }
.slot-tape { position: absolute; left: 1%; right: 1%; top: 0; bottom: 0; z-index: 3; transform-origin: 50% 20%; touch-action: none;
  transition: transform .2s ease-out, filter .2s, opacity .2s; }
.slot-tape.gone { display: none; }
.slot-tape.protrude { transform: translateY(42%) scale(1.22); }
.slot-tape.half { transform: translateY(12%) scale(1.06); }
.slot-tape.in { transform: translateY(-6%) scale(.86); filter: brightness(.1); opacity: 0; transition: transform .7s cubic-bezier(.55,0,.85,.4), filter .6s, opacity .3s .45s; }
.slot-tape.out { transform: translateY(36%) scale(1.16); transition: transform .5s cubic-bezier(.2,1.25,.4,1), filter .4s; cursor: grab; }

.vfd { grid-area: vfd; height: 11cqw; border-radius: .8cqw; padding: 1cqw 1.4cqw; background: radial-gradient(ellipse at center, #0b1f1a, #040b09 80%);
  box-shadow: inset 0 0 0 .25cqw #050505, inset 0 0 1.4cqw rgba(0,0,0,.9), 0 0 0 .2cqw #3a3a3e; color: var(--vfd); font-family: 'Share Tech Mono';
  display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.vfd::after { /* smoked filter glass */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(170deg, rgba(255,255,255,.07), transparent 40%), repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px); }
.vfd-row { display: flex; gap: 1cqw; font-size: 1.2cqw; letter-spacing: .06em; align-items: center; }
.vfd-row i { font-style: normal; opacity: .13; transition: opacity .1s; }
.vfd-row i.on { opacity: 1; text-shadow: 0 0 .6cqw var(--vfd); }
.vfd-row .cass { width: 3.2cqw; height: 1.5cqw; border: .2cqw solid currentColor; border-radius: .2cqw; margin-left: auto; position: relative; }
.vfd-row .cass::before, .vfd-row .cass::after { content: ''; position: absolute; top: .3cqw; width: .5cqw; height: .5cqw; border-radius: 50%; background: currentColor; }
.vfd-row .cass::before { left: .5cqw; } .vfd-row .cass::after { right: .5cqw; }
.vfd-row .cass.on { box-shadow: 0 0 .6cqw var(--vfd); }
.vfd-main { display: flex; align-items: baseline; gap: 1.2cqw; font-size: 4.9cqw; line-height: 1; text-shadow: 0 0 .5cqw var(--vfd), 0 0 1.6cqw rgba(109,255,214,.45); position: relative; }
.vfd-mode { font-size: 2.8cqw; min-width: 3.4cqw; }
.vfd-text { margin-left: auto; letter-spacing: .04em; position: relative; }
.vfd-main::after { /* unlit segment ghosts behind the digits */
  content: '8:88:88'; position: absolute; right: 0; bottom: 0; letter-spacing: .04em; color: var(--vfd); opacity: .07; text-shadow: none; pointer-events: none; }
.vfd .blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.vfd.off { color: #0d2a22; }
.vfd.off .vfd-main, .vfd.off .vfd-row i.on { text-shadow: none; opacity: .5; }
.vfd.off .vfd-main::after { opacity: .04; }

.vbtns { grid-area: btns; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4cqw 1.2cqw; }
.vb { border: 0; padding: 0; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: .5cqw; touch-action: manipulation; }
.vb .sym { width: 100%; height: 3.8cqw; display: flex; align-items: center; justify-content: center; font-size: 1.6cqw; color: #cfc8ba; letter-spacing: -.2em;
  border-radius: .5cqw; background: linear-gradient(180deg, #6a6a70, #3a3a3e 50%, #2a2a2e); box-shadow: 0 .45cqw 0 #0a0a0b, 0 .6cqw .8cqw rgba(0,0,0,.6), inset 0 .15cqw 0 rgba(255,255,255,.3);
  transition: transform .05s, box-shadow .05s, filter .05s; }
.vb .lbl { font-size: 1.05cqw; letter-spacing: .12em; color: #8f877a; font-weight: 600; }
.vb.down .sym, .vb:active .sym { transform: translateY(.4cqw); box-shadow: 0 .05cqw 0 #0a0a0b, inset 0 .15cqw .3cqw rgba(0,0,0,.45); filter: brightness(.92); }
.vb.play .sym { color: #ffffff; background: linear-gradient(180deg, #8a8a90, #4a4a50 50%, #34343a); }
.vb.pulse .sym { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 .45cqw 0 #0a0a0b, 0 0 2cqw rgba(120,255,214,.7), inset 0 .15cqw 0 rgba(255,255,255,.25); } }
.pled { width: 1cqw; height: 1cqw; border-radius: 50%; background: #3a1d06; }
.vcr.on .pled { background: #ffb02e; box-shadow: 0 0 .8cqw #ffb02e; }

/* =====================================================================
   THE BENCH: coffee-table edge in front + a TV tray for the case in hand
   ===================================================================== */
.bench { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; height: 0; pointer-events: none; }
.bench .table { position: absolute; left: 8vw; right: 8vw; bottom: 0; height: var(--table-h); pointer-events: none; }
.table-top { position: absolute; inset: 0; border-radius: 10px 10px 0 0;
  background:
    linear-gradient(180deg, rgba(255,225,180,.32) 0 1px, transparent 1px 16px, rgba(0,0,0,.55) 16px 18px, transparent 18px),
    linear-gradient(90deg, color-mix(in srgb, var(--tree-light) 22%, transparent), transparent 35%, transparent 70%, var(--fire-light)),
    var(--wood-tex) 0 0 / 600px 300px,
    linear-gradient(180deg, var(--wood-3), var(--wood-1) 16px, var(--wood-2) 18px, var(--wood-dark));
  background-blend-mode: normal, soft-light, multiply, normal;
  box-shadow: 0 -10px 24px rgba(0,0,0,.55); }
.tvguide { position: absolute; left: 12%; bottom: 30px; width: 74px; height: 22px; transform: rotate(-6deg) skewX(-24deg); border-radius: 1px;
  background: linear-gradient(90deg, #ece4d4, #d8ceb8); box-shadow: 0 3px 4px rgba(0,0,0,.6); padding: 2px 3px; overflow: hidden; }
.tvguide b { display: inline-block; background: #d61f26; color: #fff; font: 900 6px/1 'Archivo Black'; padding: 2px 3px 1px; letter-spacing: .04em; }
.tvguide small { display: block; font: 600 3.4px/1.2 Archivo; color: #3a3226; margin-top: 2px; letter-spacing: .04em; }
.remote { position: absolute; left: 22%; bottom: 28px; width: 70px; height: 15px; transform: rotate(9deg) skewX(-30deg); border-radius: 4px;
  background: linear-gradient(180deg, #333, #121212); box-shadow: 0 3px 4px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.12);
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; padding: 4px 6px 4px 18px; }
.remote::before { content: ''; position: absolute; left: 4px; top: 4px; width: 7px; height: 7px; border-radius: 50%; background: #b8231e; }
.remote i { background: #6a6a6a; border-radius: 1px; }

.lap {
  position: absolute; pointer-events: auto;
  --lapw: min(600px, calc(var(--den-w) - var(--tvw) - 70px));
  right: calc(var(--gut-r) + 30px); bottom: 12px;
  width: var(--lapw);
  padding: 10px 14px 12px; border-radius: 12px;
  background:
    radial-gradient(ellipse 70% 60% at 50% 30%, color-mix(in srgb, var(--lamp-light) 12%, transparent), transparent),
    var(--wood-tex) 0 0 / 400px 200px,
    linear-gradient(180deg, #6e4428, #4f301a);
  background-blend-mode: normal, multiply, normal;
  box-shadow: 0 18px 34px rgba(0,0,0,.6), inset 0 0 0 3px rgba(0,0,0,.25), inset 0 2px 0 rgba(255,220,180,.25);
  transition: transform .38s cubic-bezier(.2,.9,.3,1), box-shadow .3s, background-color .3s;
}
.bench:not(.open) .lap { bottom: 6px; padding-top: 8px; padding-bottom: 8px; background: rgba(26,16,9,.78); box-shadow: 0 8px 18px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,220,180,.12); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.case-holder, #holder {
  /* the box in your hands: big and upright, but never wider (with the tape sliding out) than the tray */
  --ch: max(200px, min(60dvh, calc((var(--lapw, 520px) - 28px) / 1.12), 560px));
  position: relative; width: 100%; height: 0; perspective: 1400px;
  display: flex; align-items: center; justify-content: center;
  transition: height .38s cubic-bezier(.2,.9,.3,1);
}
#bench.open #holder { height: calc(var(--ch) + 14px); }
.hand-row { display: flex; align-items: center; gap: 10px; min-height: 30px; }
.hint { flex: 1; min-width: 0; margin: 0; font-size: 14px; line-height: 1.3; opacity: .9; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.hand-btns { display: flex; gap: 8px; flex: 0 0 auto; }
.hbtn { background: #1d1410e6; border: 1px solid #8a6a4a; color: #ffdfae; border-radius: 6px; padding: 8px 11px; font: 800 11px Archivo; letter-spacing: .08em; cursor: pointer; white-space: nowrap; touch-action: manipulation; min-height: 34px; }
.hbtn:active { transform: translateY(1px); background: #2a1c14; }
#flip[hidden], #putback[hidden] { display: none; }

body.holding .shelves { filter: brightness(.82); transition: filter .3s; }
/* desktop: the box is held big and close in front of the bookcase, which drops out of focus behind it; the TV and
   the VCR stay put and lit (see dockLap in app.js) */
.tv { transform-origin: 0 50%; }
body.dock-tv #bench.open .lap { left: var(--dock-l); right: auto; bottom: var(--dock-b); width: var(--dock-w); height: var(--dock-h); --lapw: var(--dock-w);
  display: flex; flex-direction: column; justify-content: flex-start; padding: 10px 0; border-radius: 0;
  background: none; box-shadow: none; }
body.dock-tv .lap { transition: opacity .25s; }
body.dock-tv #bench.open #holder { --ch: var(--dock-ch); height: calc(var(--ch) + 6px); flex: 0 0 auto; transition: none; }
/* the hands: a soft contact shadow under the box and a pool of lamp light on it */
body.dock-tv #bench.open #holder::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 50%; width: calc(var(--ch) * 1.5); height: calc(var(--ch) * 1.25);
  transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--lamp-light) 26%, transparent), color-mix(in srgb, var(--lamp-light) 8%, transparent) 60%, transparent);
  animation: hold-in .5s var(--ease-light, ease-out) both; }
body.dock-tv #bench.open #holder::after { content: ''; position: absolute; z-index: -1; left: 50%; bottom: calc(var(--ch) * -0.04); width: calc(var(--ch) * .62); height: calc(var(--ch) * .09);
  transform: translateX(-50%); border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(0,0,0,.6), transparent);
  animation: hold-in .5s .25s ease-out both; }
@keyframes hold-in { from { opacity: 0; } }
body.dock-tv #bench.open .hand-row { flex: 0 0 auto; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
body.dock-tv #bench.open .hint { flex: 1 1 100%; text-align: center; font-size: 14px; text-shadow: 0 1px 3px #000, 0 0 12px rgba(0,0,0,.8); }
body.dock-tv #bench.open .hand-btns { flex: 1 1 100%; justify-content: center; }
/* the room behind the box: the bookcase goes soft and dark, the rest of the den dims a little */
body.dock-tv .shelves, body.dock-tv .room, body.dock-tv .tree-layer { transition: filter .45s cubic-bezier(.2,.7,.3,1); }
body.dock-tv.holding .shelves { filter: blur(3px) brightness(.42) saturate(.8); }
body.dock-tv.holding .room, body.dock-tv.holding .tree-layer { filter: brightness(.68); }
body.dock-tv .bench::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .45s cubic-bezier(.2,.7,.3,1);
  background: radial-gradient(ellipse 34vw 46vh at var(--dock-cx, 70vw) var(--dock-cy, 50vh), transparent 40%, rgba(4,2,1,.32) 100%); }
body.dock-tv.holding .bench::before { opacity: 1; }
body.dragging, body.dragging * { cursor: grabbing !important; }

/* the tape while it is being carried */
.free { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; will-change: transform;
  filter: drop-shadow(0 16px 14px rgba(0,0,0,.5)); }

/* the hint tray hides itself when there's nothing to say */
.bench:not(.open) .lap:has(.hint:empty) { opacity: 0; pointer-events: none; transform: translateY(8px); }
.lap { transition: transform .38s cubic-bezier(.2,.9,.3,1), box-shadow .3s, background-color .3s, opacity .25s; }

/* =====================================================================
   NARROW DESKTOP / TABLET (821–1100)
   ===================================================================== */
@media (max-width: 1100px) and (min-width: 821px) {
  :root { --side: 16px; --side-l: 16px; --side-r: 16px; --tvw: clamp(320px, min(50vw, calc((100dvh - var(--top) - var(--table-h) - 160px) * 1.2)), 560px); }
  .window, .hearth { display: none; }
  .tree-svg { left: -150px; }
}

/* =====================================================================
   PHONE (≤ 820px): sticky TV+VCR, shelves scroll beneath, bottom sheet
   ===================================================================== */
@media (max-width: 820px) and (orientation: portrait), (max-width: 820px) and (min-height: 501px) {
  :root { --side: 16px; --den-w: calc(100vw - 32px - var(--sal) - var(--sar)); --top: 0px; --table-h: 0px; }
  html { scroll-padding-top: calc(var(--av-h, 0px) + 8px); }   /* a spine scrolled into view never lands under the sticky TV */
  .wainscot, .window, .hearth, .presents, .bench .table, .wash-lamp, .lamp, .stash-cubby { display: none; }
  :root { --ptv: min(calc(100vw - 104px), max(200px, calc((44dvh - 34px - var(--sat) - .345 * (100vw - 32px)) / .646))); --tvreg: calc(var(--sat) + 12px + .646 * var(--ptv)); --tvl: calc(100vw - 16px - var(--sar) - var(--ptv)); }
  .carpet { height: 60px; }
  .den { width: auto; margin: 0; padding: 0 calc(16px + var(--sar)) 0 calc(16px + var(--sal)); }
  .unit { display: block; height: auto; min-height: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; }
  .unit::after { display: none; }
  .crown { display: none; }

  .av { position: sticky; top: 0; z-index: 20; gap: 0; max-height: 44dvh;
    margin: 0 calc(-16px - var(--sar)) 0 calc(-16px - var(--sal)); padding: calc(8px + var(--sat)) calc(16px + var(--sar)) 0 calc(16px + var(--sal));
    background:
      linear-gradient(180deg, rgba(8,5,3,.5), rgba(8,5,3,.1) 60%),
      radial-gradient(ellipse 50% 70% at 0 60%, color-mix(in srgb, var(--tree-light) 26%, transparent), transparent),
      url('../assets/room/wallpaper.svg') 0 0 / 46px 64px,
      #26382c;
    box-shadow: 0 10px 18px rgba(0,0,0,.6); }
  .tv-cubby { padding: 0 0 0 40px; background: none; box-shadow: none; display: flex; justify-content: flex-end; }
  .tv-cubby::after { display: none; }
  .tv { width: var(--ptv); margin: 0 0 0 auto; }
  .vcr-cubby { margin: 0 calc(-16px - var(--sar)) 0 calc(-16px - var(--sal)); padding: 8px calc(16px + var(--sar)) 8px calc(16px + var(--sal)); border-radius: 0; z-index: 3;
    background:
      linear-gradient(180deg, rgba(255,225,180,.28) 0 1px, rgba(0,0,0,.4) 1px 3px, transparent 3px),
      var(--wood-tex) 0 0 / 400px 200px,
      linear-gradient(180deg, var(--wood-1), var(--wood-2));
    background-blend-mode: normal, multiply, normal;
    box-shadow: inset 0 -4px 8px rgba(0,0,0,.45); }
  .vcr-cubby::before { /* garland draped along the cabinet top */
    content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 30px; z-index: 4;
    background: url('../assets/room/garland.svg') 0 0 / 210px 31px repeat-x; filter: drop-shadow(0 3px 3px rgba(0,0,0,.5)); pointer-events: none; }
  .vcr-cubby::after { display: none; }
  .vcr { width: 100%; margin-top: 10px; }
  .vcr-face { grid-template-columns: 1fr 34cqw; grid-template-areas: "slot vfd" "btns btns"; row-gap: 2.4cqw; column-gap: 3cqw; padding: 2.6cqw 3cqw 3cqw; }
  .vcr-brand { font-size: 2.8cqw; margin-bottom: 1.6cqw; }
  .vcr-brand span { display: none; }
  .vfd { height: 12cqw; padding: 1.2cqw 1.8cqw; }
  .vfd-row { font-size: 1.8cqw; }
  .vfd-main { font-size: 6cqw; }
  .vfd-mode { font-size: 3.4cqw; }
  .vfd-row .cass { width: 4.4cqw; height: 2.1cqw; }
  .vbtns { grid-template-columns: repeat(6, 1fr); gap: 2cqw; }
  .vb .sym { height: 8.6cqw; min-height: 30px; font-size: 3.2cqw; border-radius: 1cqw; }
  .vb .lbl { font-size: 2.1cqw; }
  .pled { width: 2cqw; height: 2cqw; }

  .shelves { display: block; margin: 0 calc(-16px - var(--sar)) 0 calc(-16px - var(--sal)); padding: 0 calc(10px + var(--sar)) 0 calc(10px + var(--sal));
    background:
      var(--wood-tex) 0 0 / 400px 200px,
      linear-gradient(180deg, var(--wood-2), var(--wood-1));
    background-blend-mode: multiply, normal; }
  .collection-slot { border-radius: 0; }
  #collection { position: relative; inset: auto; overflow: visible; padding: 10px 4px 16px; min-height: 60dvh; }
  .plinth { display: none; }

  /* the tree peeks in beside the TV, cropped at the cabinet top */
  .tree-layer { z-index: 25; clip-path: inset(0 calc(100vw - var(--tvl) - 8px) calc(100% - var(--tvreg)) 0); --trh: max(300px, calc(var(--tvreg) * 2)); }
  .tree-glow { left: calc(var(--tvl) * .45 - 170px); bottom: auto; top: -6dvh; width: 340px; height: 56dvh; }
  .tree-svg { bottom: auto; top: calc(var(--sat) + 50px); height: var(--trh);
    left: calc(var(--tvl) * .45 - var(--trh) * .2855); }

  .switches { top: calc(8px + var(--sat)); left: calc(4px + var(--sal)); right: auto; flex-direction: row; gap: 0; z-index: 70; }
  .switch { min-width: 40px; font-size: 7px; gap: 2px; }
  .switch::before { width: 18px; height: 27px; }

  /* bottom sheet: never taller than the space under the sticky TV+VCR */
  .lap { left: 0; right: 0; bottom: 0; width: auto; border-radius: 16px 16px 0 0;
    padding: 8px calc(14px + var(--sar)) calc(8px + var(--sab)) calc(14px + var(--sal));
    max-height: calc(100dvh - var(--av-h) - 8px); overflow: hidden; }
  .lap::before { content: ''; display: block; width: 38px; height: 4px; border-radius: 2px; margin: 0 auto 6px; background: rgba(255,230,200,.3); }
  .bench:not(.open) .lap { background: rgba(22,14,8,.9); }
  .bench:not(.open) .lap::before { display: none; }
  #holder { --ch: clamp(120px, calc(100dvh - var(--av-h) - 8px - 104px - var(--sab)), 270px); }
  #bench.open #holder { height: calc(var(--ch) + 8px); }
  .hint { font-size: 13px; }
  .hbtn { padding: 8px 10px; font-size: 10.5px; }
  body.bench-open .den { padding-bottom: calc(100dvh - var(--av-h)); }
  .den { padding-bottom: calc(56px + var(--sab)); }
  .room-light .wash-fire { opacity: .6; }
}
@media (max-width: 380px) {
  .hand-row { gap: 6px; }
  .hbtn { padding: 7px 8px; font-size: 10px; letter-spacing: .05em; }
}
/* the narrowest phones held upright (Galaxy Fold 320): the hint gets a little more room under the box, so a
   two-sentence hint ends above the bottom edge instead of under it */
@media (max-width: 340px) and (orientation: portrait) {
  #holder { --ch: clamp(120px, calc(100dvh - var(--av-h) - 8px - 122px - var(--sab)), 270px); }
  .hint { font-size: 12px; line-height: 1.22; }
  .hbtn { padding: 7px 7px; letter-spacing: .03em; }
}

/* =====================================================================
   SHORT LANDSCAPE (a phone on its side): TV + VCR stacked in a fixed
   column on the left, always on screen; the collection scrolls on the
   right; the box in your hands opens over the collection, never over
   the VCR slot.
   ===================================================================== */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --avw: min(50vw, 480px); --side: 16px; --top: 0px; --table-h: 0px;
    --tvw: min(calc(var(--avw) - 28px - var(--sal)), calc((100dvh - 46px) / .95)); }
  .wainscot, .window, .hearth, .bench .table, .wash-lamp, .lamp, .stash-cubby, .crown, .plinth, .presents { display: none; }
  .den { width: auto; margin: 0; padding: 0; }
  .unit { display: block; height: auto; min-height: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; }
  .unit::after { display: none; }
  .av { position: fixed; z-index: 20; left: 0; top: 0; bottom: 0; width: calc(var(--avw) + var(--sal));
    padding: 8px 10px calc(8px + var(--sab)) calc(10px + var(--sal)); gap: 8px; justify-content: center; align-items: stretch;
    background:
      linear-gradient(90deg, transparent 92%, rgba(0,0,0,.45)),
      var(--wood-tex) 0 0 / 400px 200px,
      linear-gradient(180deg, var(--wood-1), var(--wood-2));
    background-blend-mode: normal, multiply, normal;
    box-shadow: 6px 0 18px rgba(0,0,0,.55); }
  .av::before { /* garland along the top of the cabinet */
    content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 30px; z-index: 4; pointer-events: none;
    background: url('../assets/room/garland.svg') 0 0 / 210px 31px repeat-x; filter: drop-shadow(0 3px 3px rgba(0,0,0,.5)); }
  .tv-cubby, .vcr-cubby { padding: 6px; }
  .vcr-cubby { flex: 0 0 auto; padding-top: 6px; }
  .tv { width: var(--tvw); }
  .vcr { width: var(--tvw); margin: 0 auto; }
  .vcr-face { grid-template-columns: 1fr 34cqw; grid-template-areas: "slot vfd" "btns btns"; row-gap: 2.2cqw; column-gap: 3cqw; padding: 2.4cqw 3cqw 2.8cqw; }
  .vcr-brand { font-size: 2.8cqw; margin-bottom: 1.4cqw; }
  .vcr-brand span { display: none; }
  .vfd { height: 12cqw; padding: 1.2cqw 1.8cqw; }
  .vfd-row { font-size: 1.8cqw; } .vfd-main { font-size: 6cqw; } .vfd-mode { font-size: 3.4cqw; }
  .vfd-row .cass { width: 4.4cqw; height: 2.1cqw; }
  .vbtns { grid-template-columns: repeat(6, 1fr); gap: 2cqw; }
  .vb .sym { height: 8cqw; min-height: 28px; font-size: 3.2cqw; border-radius: 1cqw; }
  .vb .lbl { font-size: 2.1cqw; }
  .pled { width: 2cqw; height: 2cqw; }

  .shelves { display: block; margin-left: calc(var(--avw) + var(--sal)); padding: 0 calc(8px + var(--sar)) 0 8px; }
  .collection-slot { background: none; box-shadow: none; }
  #collection { --shelf-h: clamp(118px, 34dvh, 150px); position: relative; inset: auto; overflow: visible; padding: 6px 2px calc(64px + var(--sab)); }

  .tree-layer { display: none; }
  .switches { top: calc(6px + var(--sat)); right: calc(8px + var(--sar)); }
  .switch { min-width: 40px; font-size: 7px; gap: 2px; }
  .switch::before { width: 18px; height: 27px; }

  .lap { left: auto; right: 0; bottom: 0; width: calc(100vw - var(--avw) - var(--sal)); border-radius: 14px 0 0 0;
    padding: 6px calc(12px + var(--sar)) calc(6px + var(--sab)) 12px; max-height: 100dvh; }
  .bench:not(.open) .lap { bottom: 0; }
  #holder { --lapw: calc(100vw - var(--avw) - var(--sal) - var(--sar)); --ch: max(150px, min(calc(100dvh - 64px - var(--sab)), calc((var(--lapw) - 30px) / 1.12))); }
  #bench.open #holder { height: calc(var(--ch) + 6px); }
  .hand-row { min-height: 28px; }
  .hint { font-size: 12.5px; }
  .hbtn { padding: 6px 9px; font-size: 10px; min-height: 30px; }
}

/* =====================================================================
   REDUCED MOTION: still flakes, steady bulbs, a fade instead of degauss
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hearth .flame, .crt, .tree-svg .halo, .tree-svg .halo.flick, .tree-svg .bulb .hot, .tree-svg .tinsel, .tree-svg .star-glow, .garland::after, .tv.on .tv-glow { animation: none !important; }
  .screen.turning-on > .yt-wrap, .screen.turning-on > .blue, .screen.turning-on > #static, .screen.turning-on > .osd, .screen.turning-on .crt::after { animation: none !important; }
  .screen.turning-on .powerfx { animation: fadeOn .5s ease-out forwards; }
  .screen.turning-off .powerfx { animation: fadeOff .4s ease-in forwards; }
  .screen.turning-off .offglass::after { animation: none; }
  .tv, .lap, #holder, .flap, .slot-tape, .slot-tape.in, .slot-tape.out { transition-duration: .01ms !important; }
  .screen.glitch .yt-wrap { animation: none; }
  .screen[data-mode="rsearch"] .spic { animation: none; }
  @keyframes fadeOn { 0% { opacity: .6; } 100% { opacity: 0; } }
  @keyframes fadeOff { 0% { opacity: 0; } 40% { opacity: .5; } 100% { opacity: 0; } }
}
/* the tape sliding out of the box would chop the hint line under it: fade it while pulling */
.hint { transition: opacity .18s; }
body:has(.bx-pulling) .hint { opacity: 0; }
/* the hearth fire, fuller: a glowing ember bed and a broad back flame behind the three tongues, so it reads as a
   fire in the grate rather than three candle flames (desktop den; review r1 polish) */
.hearth .firebox { background: radial-gradient(ellipse 80% 70% at 50% 100%, #6a2008, #2a0a04 55%, #120503 80%); }
.hearth .firebox::before { content: ''; position: absolute; left: 6%; right: 6%; bottom: 0; height: 38%; border-radius: 50% 50% 0 0;
  background: radial-gradient(ellipse 60% 70% at 50% 100%, rgba(255,190,90,.95), rgba(255,110,30,.7) 40%, rgba(160,40,10,.25) 70%, transparent 80%);
  mix-blend-mode: screen; filter: blur(3px); animation: emberbed 3.4s ease-in-out infinite alternate; }
.hearth .firebox::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: 10%; height: 70%; border-radius: 50% 50% 40% 40% / 75% 75% 25% 25%;
  background: radial-gradient(ellipse 50% 62% at 50% 85%, rgba(255,230,150,.85), rgba(255,150,50,.65) 35%, rgba(255,80,20,.35) 60%, transparent 76%);
  mix-blend-mode: screen; filter: blur(4px); transform-origin: 50% 100%; animation: flame 2.6s ease-in-out infinite alternate; }
.hearth .logs { z-index: 1; }
.hearth .flame { z-index: 2; width: 34%; height: 60%; filter: blur(1.5px) brightness(1.15); }
.hearth .flame.f1 { left: 14%; }
.hearth .flame.f2 { left: 33%; height: 78%; }
.hearth .flame.f3 { left: 52%; height: 56%; }
@keyframes emberbed { 0% { opacity: .75; } 40% { opacity: 1; } 70% { opacity: .82; } 100% { opacity: .95; } }
@media (prefers-reduced-motion: reduce) { .hearth .firebox::before, .hearth .firebox::after { animation: none !important; } }
html.cin-dark:not(.cin-fire) .hearth .firebox::before, html.cin-dark:not(.cin-fire) .hearth .firebox::after { opacity: .3; animation-play-state: paused; }
/* more fire: brighter tongues with a hot core, and two small licks off the logs so the grate isn't three neat candles */
.hearth .flame { filter: blur(1.2px) brightness(1.55) saturate(1.2);
  background: radial-gradient(ellipse 34% 52% at 50% 82%, #fffbe0, #ffd36b 28%, #ff8a1f 52%, rgba(255,70,10,.6) 66%, transparent 78%);
  border-radius: 50% 50% 38% 38% / 82% 82% 18% 18%; }
.hearth .flame.f1 { animation-name: flame, flick2; animation-duration: 1.7s, .37s; animation-iteration-count: infinite; animation-direction: alternate; }
.hearth .flame.f3 { animation-name: flame, flick2; animation-duration: 2.1s, .43s; animation-iteration-count: infinite; animation-direction: alternate; }
.hearth .firebox::after { opacity: 1; filter: blur(5px) brightness(1.3); }
.hearth .logs::before, .hearth .logs::after { content: ''; position: absolute; bottom: 60%; width: 18%; height: 260%; border-radius: 50% 50% 38% 38% / 85% 85% 15% 15%;
  background: radial-gradient(ellipse 34% 50% at 50% 84%, #fff3c0, #ffb347 34%, #ff5a14 60%, transparent 78%); mix-blend-mode: screen;
  filter: blur(1px) brightness(1.4); transform-origin: 50% 100%; animation: flame 1.1s ease-in-out infinite alternate; }
.hearth .logs::before { left: 2%; transform: rotate(-10deg); animation-delay: -.3s; }
.hearth .logs::after { right: 4%; height: 200%; transform: rotate(9deg); animation-duration: 1.45s; animation-delay: -.8s; }
@keyframes flick2 { 0% { opacity: .82; } 100% { opacity: 1; } }
html.cin-dark:not(.cin-fire) .hearth .logs::before, html.cin-dark:not(.cin-fire) .hearth .logs::after { opacity: .3; }
@media (prefers-reduced-motion: reduce) { .hearth .logs::before, .hearth .logs::after { animation: none !important; } }
/* the hearth used to be dimmed as a whole (filter: brightness(.6)), which also dimmed the fire to candle level.
   Dim the bricks, mantel and stockings themselves instead, so the fire glows at full strength. */
.hearth { filter: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.35), transparent 30%, rgba(0,0,0,.5)),
    repeating-linear-gradient(180deg, transparent 0 13px, rgba(12,5,2,.9) 13px 15px),
    repeating-linear-gradient(90deg, transparent 0 28px, rgba(12,5,2,.9) 28px 30px) 0 0 / 60px 30px,
    linear-gradient(90deg, #36160d, #421a10 40%, #2f130b); }
.hearth::after { opacity: .8; }
.hearth .mantel { filter: brightness(.72); }
.hearth .stocking { filter: brightness(.48) drop-shadow(0 6px 5px rgba(0,0,0,.55)); }
.hearth .firebox { box-shadow: inset 0 8px 18px #000, 0 0 26px rgba(255,120,40,.18); }

/* F.FWD's shuttle (the still under the bands, past the first second): forward glyph, bands rolling forward */
.screen[data-mode="rsearch"][data-sdir="fwd"] > .scr-card::before, .screen[data-mode="rsearch"][data-sdir="fwd"] > .scr-card::after { clip-path: polygon(0 0, 50% 50%, 50% 0, 100% 50%, 50% 100%, 50% 50%, 0 100%); }
.screen[data-mode="rsearch"][data-sdir="fwd"] .bands { animation-direction: normal; }