@font-face { font-family: 'Cinzel'; src: url('fonts/cinzel.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'Special Elite'; src: url('fonts/special-elite.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Atkinson'; src: url('fonts/atkinson-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Atkinson'; src: url('fonts/atkinson-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --night: #07080f; --ink: #0d0f1c; --plum: #2a1733; --ember: #ff8a3d; --candle: #ffd27a;
  --bone: #efe2c0; --paper: #e9dcc0; --paper-ink: #2a2117; --red: #b3122e; --moon: #9fb8ff;
  --text: #f1ead8; --muted: #a79fb8;
  --display: 'Cinzel', 'Times New Roman', serif;
  --type: 'Special Elite', 'Courier New', monospace;
  --body: 'Atkinson', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--night); color: var(--text); font-family: var(--body); overflow: hidden; }
button { font: inherit; cursor: pointer; }
button:focus-visible { outline: 3px solid var(--candle); outline-offset: 3px; }
[hidden] { display: none !important; }

#stage, #still { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#still { object-fit: cover; object-position: 44% 50%; }
body.still-contain #still { object-fit: contain; object-position: 50% 50%; } body.still-tall #still { object-fit: cover; object-position: 50% 50%; } /* the portrait still (10-19) */ /* keeps Nox, the clock and the hook in frame on portrait screens */

/* ---------- loader ---------- */
.screen { position: fixed; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; z-index: 20;
  background: radial-gradient(ellipse at 50% 40%, #1a1430 0%, var(--night) 70%); }
/* ---- title scene (engine/title.js; art: build/art/exterior.py) ---- */
#loader { justify-content: space-between; padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom)); overflow: hidden; background: #070a1e; }
#loader .scene { position: absolute; inset: 0; overflow: clip; z-index: 0; } /* clip: a hidden box can still be scrolled sideways */
#sky { position: absolute; inset: 0; width: 100%; height: 100%; }
#frame { position: absolute; left: 50%; top: 50%; width: max(100vw, calc(100dvh * 16 / 9)); aspect-ratio: 16 / 9;
  transform: translate(calc(-50% + var(--px, 0px)), calc(-50% + var(--py, 0px))) scale(var(--z, 1)); transition: transform .6s ease-out; }
@media (orientation: portrait) { #frame { width: max(100vw, calc(100dvh * 9 / 16)); aspect-ratio: 9 / 16; } }
#frame picture, #frame img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#frame .lit { -webkit-mask-image: linear-gradient(transparent, transparent); mask-image: linear-gradient(transparent, transparent); }
#frame .front { transform: translateX(var(--fx, 0px)); transition: transform .6s ease-out; }
/* living light: the lit house breathes, and each window flickers on its own loop (opacity only: compositor work) */
#frame .lit { animation: breathe 6s ease-in-out infinite alternate; will-change: opacity; }
@keyframes breathe { from { opacity: .86; } to { opacity: 1; } }
.wglows { position: absolute; inset: 0; pointer-events: none; }
.wglows i { position: absolute; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; mix-blend-mode: screen; will-change: opacity;
  background: radial-gradient(circle, rgba(255,190,110,.55) 0%, rgba(255,150,60,.18) 40%, transparent 70%); animation: flicker var(--d, 4s) ease-in-out var(--dl, 0s) infinite; }
@keyframes flicker { 0%, 100% { opacity: .55; } 18% { opacity: .9; } 22% { opacity: .62; } 47% { opacity: 1; } 63% { opacity: .7; } 80% { opacity: .92; } }
/* text that sits on the picture gets a dark pill so it reads against windows and fence */
#loader .progress, #loader .namelabel { background: rgba(7,9,22,.78); padding: 4px 14px; border-radius: 999px; box-shadow: 0 0 0 1px rgba(255,210,122,.14); }
#loader .namelabel { color: #e9e1ff; }
.doorglow { position: absolute; left: var(--door-x); top: var(--door-y); width: 9%; aspect-ratio: 1; transform: translate(-50%, -55%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,190,110,.75) 0%, rgba(255,140,50,.25) 35%, transparent 70%); mix-blend-mode: screen; opacity: 0; transition: opacity 1.2s; }
#loader.ready .doorglow { opacity: .55; animation: doorbreath 3.2s ease-in-out infinite; }
@keyframes doorbreath { 50% { opacity: .8; } }
.fog { position: absolute; left: -50%; width: 200%; pointer-events: none; background: radial-gradient(ellipse at 25% 50%, rgba(150,165,220,.16), transparent 55%), radial-gradient(ellipse at 70% 60%, rgba(150,165,220,.12), transparent 50%); }
.fog-back { bottom: 18%; height: 22%; animation: drift 46s linear infinite; }
.fog-front { bottom: -4%; height: 26%; animation: drift 30s linear infinite reverse; opacity: .9; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(25%); } }
.shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(5,6,16,.55), transparent 26%, transparent 58%, rgba(5,6,12,.85) 100%); }
.flash { position: absolute; inset: 0; background: #d6deff; opacity: 0; pointer-events: none; mix-blend-mode: screen; }
.flash.go { animation: flash 1.1s ease-out; }
@keyframes flash { 0% { opacity: 0; } 10% { opacity: .16; } 20% { opacity: .03; } 30% { opacity: .1; } 100% { opacity: 0; } }
.t-head, .t-ui { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.t-head { margin-top: 2vh; }
.t-ui { margin-bottom: 1vh; width: 100%; }
.t-row, .t-name, .t-go { display: flex; flex-direction: column; align-items: center; gap: 8px; }
#loader .hook { margin-top: 4px; background: rgba(8,10,24,.78); backdrop-filter: blur(3px); }
@media (max-width: 899px), (orientation: portrait) { /* phones: compact, so the house stays in view */
  #loader .hook { padding: 8px 12px; gap: 10px; } #loader .hook img { width: 44px; height: 44px; } #loader .hook p { font-size: 13.5px; line-height: 1.4; }
  #loader .namelabel { margin-top: 2px; } #loader .btn-primary { margin-top: 2px; }
}
@media (min-width: 900px) and (orientation: landscape) { /* wide screens: one row along the bottom, over the fence */
  .t-row { flex-direction: row; align-items: flex-end; justify-content: center; gap: 22px; }
  #loader .hook { max-width: 400px; margin: 0; } .t-name { gap: 6px; } #loader .namelabel { margin-top: 0; } #loader .btn-primary { margin-top: 0; }
  .t-go { gap: 0; } #loader .linkbtn { min-height: 32px; }
  #loader .t-ui #progress { order: 2; margin: 6px 0 0; font-size: 14px; } #loader .t-ui .t-row { order: 1; } #loader #loadnote { order: 3; }
}
@media (orientation: landscape) and (max-height: 560px) { /* a phone held sideways: the stacked phone layout pushed Take the case off the bottom (10-19 audit) */
  #loader { padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .t-head { margin-top: 0; gap: 2px; } #loader .title { font-size: clamp(24px, 10vh, 56px); } #loader .subtitle { font-size: 11px; letter-spacing: .24em; background: rgba(8,10,24,.62); padding: 2px 12px; border-radius: 999px; } /* it crossed the moon and its letters vanished there (10-19 audit) */
  .t-row { flex-direction: row; align-items: flex-end; justify-content: center; gap: 12px; }
  #loader .hook { max-width: 300px; margin: 0; padding: 6px 10px; gap: 8px; } #loader .hook img { width: 34px; height: 34px; } #loader .hook p { font-size: 12px; line-height: 1.35; }
  .t-name { gap: 4px; } #loader .namelabel { margin-top: 0; font-size: 12px; } #loader .btn-primary { margin-top: 0; white-space: nowrap; padding-left: 16px; padding-right: 16px; } #loader .t-name input { width: min(260px, 32vw); } .t-go { gap: 0; } #loader .linkbtn { min-height: 28px; }
  #loader .t-ui { gap: 4px; margin-bottom: 0; } #loader .t-ui #progress { order: 2; margin: 2px 0 0; font-size: 12px; } #loader .t-ui .t-row { order: 1; } #loader #loadnote { order: 3; }
}
@media (orientation: portrait) { #loader .progress { font-size: 13px; } }
#loader .title { margin: 0; font-size: clamp(28px, 7.4vw, 84px); letter-spacing: .1em; color: #f3d9a0; line-height: 1.05; white-space: nowrap;
  filter: drop-shadow(0 2px 0 rgba(40,20,10,.9)) drop-shadow(0 0 22px rgba(255,150,60,.35)); text-shadow: none; }
/* gold on each letter: a gradient clipped to the parent's text is dropped once the letters animate separately */
#loader .title span { background: linear-gradient(#fff6dc 10%, #f0c977 48%, #b77d34 70%, #f5d896 92%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
#loader .title span { display: inline-block; opacity: 0; transform: translateY(14px); filter: blur(6px); animation: letter .9s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(.35s + var(--i) * 70ms); }
@keyframes letter { to { opacity: 1; transform: none; filter: none; } }
#loader .subtitle { color: #c9c3e6; font-size: clamp(14px, 1.9vw, 20px); letter-spacing: .3em; text-transform: uppercase; opacity: 0; animation: letter 1.2s 1.4s ease forwards; text-shadow: 0 1px 8px #000; }
#loader .progress { margin-top: 0; text-shadow: 0 1px 6px #000; }
/* the way in: the camera pushes through the front door */
#loader.enter #frame { transform-origin: var(--door-x) var(--door-y); --z: 3.4; transition: transform 1.3s cubic-bezier(.55,0,.85,.35); }
#loader.enter .doorglow { opacity: 1; animation: none; }
#loader.enter .t-head, #loader.enter .t-ui { opacity: 0; transition: opacity .35s; }
.screen.on { display: flex; }
.screen.fade { animation: fadeout .9s ease forwards; }
@keyframes fadeout { to { opacity: 0; visibility: hidden; } }
.title { font-family: var(--display); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: clamp(30px, 6vw, 58px); margin: 8px 0 0; color: var(--bone); text-shadow: 0 0 24px rgba(255,138,61,.25); }
.subtitle { font-family: var(--type); color: var(--muted); margin: 0; letter-spacing: .08em; }
.progress { font-family: var(--type); color: var(--candle); min-height: 1.4em; margin-top: 18px; }
.fine { font-size: 13px; color: var(--muted); max-width: 46ch; }
.btn-primary { margin-top: 8px; padding: 14px 30px; min-height: 52px; border: 1px solid var(--ember); background: linear-gradient(#2a1520, #170c14); color: var(--bone);
  font-family: var(--display); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255,138,61,.15), 0 0 28px rgba(255,138,61,.18); }
.btn-primary:hover { background: linear-gradient(#3a1d2a, #1f0f1a); }

/* ---------- HUD ---------- */
#hud { position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-start; padding: 14px 16px; z-index: 10; pointer-events: none;
  background: linear-gradient(rgba(5,6,12,.75), rgba(5,6,12,0)); }
#hud > * { pointer-events: auto; }
.case { display: flex; flex-direction: column; gap: 2px; font-family: var(--type); }
.case-no { font-size: 12px; letter-spacing: .2em; color: var(--muted); }
.clock { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: .08em; color: var(--candle); }
.room { font-size: 14px; color: var(--bone); }
.tools { display: flex; gap: 8px; }
.tool { min-height: 48px; min-width: 48px; padding: 0 14px; border-radius: 3px; border: 1px solid rgba(239,226,192,.25); background: rgba(13,15,28,.72); color: var(--bone); font-family: var(--type); letter-spacing: .06em; }
.tool b { color: var(--ember); font-weight: 400; margin-left: 6px; }
.tool[aria-pressed="true"] { border-color: var(--candle); }

/* ---------- title card (decorative: the same facts stay in the HUD) ---------- */
#titlecard { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; z-index: 9; opacity: 0; }
#titlecard.show { animation: card 4.2s ease forwards; }
@keyframes card { 0% { opacity: 0; letter-spacing: .1em; } 20% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; letter-spacing: .32em; } }
.t-time { font-family: var(--type); color: var(--candle); letter-spacing: .3em; font-size: 15px; }
.t-room { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(22px, 6vw, 64px); letter-spacing: .2em; text-align: center; padding: 0 16px; color: var(--bone); text-shadow: 0 4px 30px rgba(0,0,0,.8); }

/* ---------- hotspots ---------- */
#hotspots { position: fixed; inset: 0; pointer-events: none; z-index: 8; }
.hs { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--candle); background: rgba(255,210,122,.12);
  box-shadow: 0 0 18px rgba(255,138,61,.55); display: grid; place-items: center; color: var(--bone); padding: 0; }
.hs::before { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 1px solid rgba(255,210,122,.6); animation: pulse 2.2s ease-out infinite; }
@keyframes pulse { from { transform: scale(.7); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.hs span { position: absolute; top: 54px; left: 50%; transform: translateX(calc(-50% + var(--lx, 0px))); white-space: nowrap; font-family: var(--type); font-size: 13px; background: rgba(13,15,28,.85); padding: 3px 8px; border-radius: 2px; letter-spacing: .05em; }
.hs.seen { border-color: var(--muted); box-shadow: none; }
.hs.seen::before { display: none; }

/* ---------- dialogue (case-file card) ---------- */
#dialogue { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(760px, calc(100vw - 32px)); z-index: 12;
  background: var(--paper); color: var(--paper-ink); border-radius: 3px; padding: 18px 22px 14px; box-shadow: 0 18px 50px rgba(0,0,0,.6);
  background-image: linear-gradient(transparent 0 30px, rgba(42,33,23,.07) 30px 31px); background-size: 100% 31px; }
#dialogue::before { content: ''; position: absolute; top: -10px; left: 26px; width: 74px; height: 20px; background: rgba(233,220,192,.75); transform: rotate(-3deg); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.speaker { font-family: var(--type); font-size: 13px; letter-spacing: .24em; color: var(--red); margin-bottom: 6px; }
.line { font-size: clamp(17px, 2.2vw, 20px); line-height: 1.5; margin: 0; min-height: 3em; }
.d-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.next { white-space: nowrap; flex: none; min-height: 48px; padding: 0 18px; border: 0; background: var(--paper-ink); color: var(--paper); font-family: var(--type); letter-spacing: .1em; border-radius: 2px; margin-left: auto; }
.d-foot { gap: 10px; } .chip { min-width: 0; font-family: var(--type); font-size: 12px; letter-spacing: .14em; color: var(--paper); background: var(--red); padding: 5px 10px; transform: rotate(-2deg); }

#back { position: fixed; left: 16px; bottom: 16px; z-index: 11; }

@media (max-width: 640px) {
  .clock { font-size: 18px; }
  .tool { padding: 0 10px; }
  #btn-board { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  #loader .title span, #loader .subtitle { animation: none; opacity: 1; transform: none; filter: none; }
  .fog, #loader.ready .doorglow, #frame .lit, .wglows i { animation: none; }
  .hs::before { animation: none; }
  #titlecard.show { animation: none; opacity: 0; }
}

/* ================= game flow (rooms, panels, board, ending) ================= */
#fader { position: fixed; inset: 0; background: #05060c; opacity: 0; pointer-events: none; z-index: 15; transition: opacity .6s ease; }
#fader.on { opacity: 1; }
.hook { display: flex; gap: 12px; align-items: center; max-width: 440px; margin-top: 14px; text-align: left; background: rgba(13,15,28,.6); border: 1px solid rgba(255,210,122,.35); border-radius: 4px; padding: 10px 14px; }
.hook img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid var(--candle); } .hook p { margin: 0; line-height: 1.45; font-size: 15px; } .hook b { color: var(--candle); font-family: var(--type); letter-spacing: .08em; }
.namelabel { font-family: var(--type); color: var(--muted); margin-top: 18px; letter-spacing: .06em; }
.namein { width: min(320px, 80vw); min-height: 52px; padding: 0 16px; font: 700 20px var(--body); text-align: center; color: var(--ink); background: var(--paper); border: 0; border-radius: 3px; }
.namein:focus { outline: 3px solid var(--candle); outline-offset: 3px; }
.linkbtn { background: none; border: 0; color: var(--muted); text-decoration: underline; min-height: 44px; font-family: var(--type); }
.nextroom { position: fixed; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 11; }
.hs.lock::after { content: '\1F512'; position: absolute; font-size: 16px; top: -8px; right: -8px; }
.hs.cleared { border-color: var(--muted); box-shadow: none; opacity: .55; }
.hs.cleared::before { display: none; }

.overlay { position: fixed; inset: 0; z-index: 14; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(5,6,12,.62); backdrop-filter: blur(2px); overflow-y: auto; }
.overlay[hidden] { display: none !important; }
/* wide screens: the puzzle card docks right so the room's live object stays in view on the left */
#panel.dock { justify-content: flex-end; padding-right: 20px; backdrop-filter: none;
  background: linear-gradient(90deg, rgba(5,6,12,0) 0%, rgba(5,6,12,0) 38%, rgba(5,6,12,.55) 62%, rgba(5,6,12,.78) 100%); }
#panel.dock .p-card { width: min(560px, 46vw); padding: 16px 20px; }
/* docked = the 3D room already shows the object, so the panel art shrinks and sits beside its controls (fits 1366x660) */
#panel.dock .p-card h2 { font-size: 22px; margin: 2px 0 4px; } #panel.dock .p-prompt { font-size: 16px; line-height: 1.45; } #panel.dock .p-body { margin: 8px 0 4px; }
#panel.dock .clockwrap, #panel.dock .brewwrap, #panel.dock .boxwrap, #panel.dock .gridwrap { flex-wrap: nowrap; gap: 16px; }
#panel.dock .clockface { width: 190px; } #panel.dock .cauldron { width: 140px; } #panel.dock .isobox { width: 200px; max-height: 240px; } #panel.dock .gridpad { width: min(300px, 32vh); }
#panel.dock .readout { font-size: 18px; margin-bottom: 6px; } #panel.dock .jar { min-width: 84px; min-height: 52px; padding: 4px 8px; }
#panel.dock .keypad { grid-template-columns: repeat(3, 50px); gap: 5px; margin-top: 6px; } #panel.dock .key { min-height: 44px; } #panel.dock .numin { min-height: 44px; font-size: 22px; width: 150px; }
#panel.dock .p-body .fine { font-size: 12px; margin: 6px 0 0; } #panel.dock footer { margin-top: 6px; padding: 8px 0; bottom: -16px; }
.p-card, .board-card, .end-card, .confirm-card { width: min(980px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; background: var(--paper); color: var(--paper-ink); border-radius: 4px;
  padding: 20px 24px; box-shadow: 0 24px 70px rgba(0,0,0,.7); position: relative; }
.p-card header .case-no, .board-card .case-no, .end-card .case-no { color: var(--red); font-family: var(--type); letter-spacing: .22em; font-size: 12px; }
.p-card h2, .board-card h2, .end-card h2 { font-family: var(--display); font-weight: 800; letter-spacing: .06em; margin: 4px 0 6px; font-size: clamp(20px, 3vw, 28px); }
.p-q { display: flex; gap: 12px; align-items: flex-start; position: sticky; top: 0; z-index: 3; background: var(--paper); padding: 4px 0 6px; box-shadow: 0 8px 8px -8px rgba(42,33,23,.35); } /* the question stays on screen while the card scrolls to the feedback (10-19) */
.p-prompt { font-size: clamp(17px, 2.1vw, 20px); line-height: 1.5; margin: 0; flex: 1; }
.p-card .tool, .board-card .tool, .end-card .tool, .confirm-card .tool { color: var(--paper-ink); background: rgba(42,33,23,.08); border-color: rgba(42,33,23,.3); }
.p-body { margin: 14px 0 6px; }
.p-fb { min-height: 24px; font-size: 16px; line-height: 1.5; }
.p-fb .ok { color: #1d6b34; font-weight: 700; }
.p-fb .step1 { background: #fff8e4; border-left: 4px solid var(--ember); padding: 8px 12px; margin: 6px 0; }
.worked { background: #fff8e4; border-left: 4px solid var(--ember); padding: 8px 14px; margin: 6px 0; }
.worked .wq { font-style: italic; margin: 4px 0; } .worked ol { margin: 6px 0; padding-left: 22px; } .worked .wa { font-weight: 700; margin: 4px 0; }
.p-card footer, .board-card footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap;
  position: sticky; bottom: -20px; z-index: 2; background: var(--paper); padding: 10px 0; box-shadow: 0 -10px 14px -10px rgba(42,33,23,.35); }
.keypad .key:nth-child(10) { grid-column: span 2; }
.btn-primary:disabled { opacity: .45; cursor: default; }
.readout { font-family: var(--type); font-size: 20px; letter-spacing: .04em; margin-bottom: 10px; }
.fine { font-size: 13px; color: inherit; opacity: .75; }
.steps { display: flex; flex-direction: column; gap: 8px; }
.steprow { display: flex; align-items: center; gap: 8px; } .steplabel { width: 64px; font-family: var(--type); }
.step { min-width: 48px; min-height: 48px; border-radius: 3px; border: 1px solid rgba(42,33,23,.35); background: #fffaf0; color: var(--paper-ink); font: 700 18px var(--body); }
.step.wide { padding: 0 14px; font-size: 15px; }
.clockwrap, .brewwrap, .boxwrap, .gridwrap { display: flex; gap: 24px; align-items: center; justify-content: center; flex-wrap: wrap; }
.clockface { width: min(300px, 70vw); height: auto; touch-action: none; }
.cf-rim { fill: #3a1f1a; } .cf-face { fill: #f6ecd2; } .cf-tick { stroke: #5a4632; stroke-width: 1.5; } .cf-tick.big { stroke-width: 3.5; }
.cf-num { font: 700 18px var(--display); fill: #2a2117; text-anchor: middle; }
.cf-hand line { stroke: #2b2730; stroke-linecap: round; } .cf-hand.hour line { stroke-width: 8; } .cf-hand.minute line { stroke-width: 5; }
.cf-knob { fill: var(--ember);} .cf-knob.m { fill: #4fbf7a; } .cf-knob { stroke: #2b2730; stroke-width: 2; cursor: grab; } .cf-pin { fill: #d4a64a; }
.cauldron { width: min(260px, 60vw); height: auto; }
.pot { fill: none; stroke: #1c1a22; stroke-width: 10; } .potrim { fill: #2b2733; } .potleg { stroke: #1c1a22; stroke-width: 8; stroke-linecap: round; }
.liquid { fill: #4fd16a; transition: y .35s ease, height .35s ease; }
.jars { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0; } .jars.small { margin-top: 10px; }
.jar { min-width: 96px; min-height: 64px; border-radius: 6px; border: 2px solid #355a3a; background: #eef8ee; color: var(--paper-ink); font: 700 16px var(--body); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 10px; }
.jar-glass { width: 26px; height: 22px; border: 2px solid #355a3a; border-top-width: 4px; border-radius: 3px 3px 8px 8px; background: linear-gradient(transparent 40%, #7fe08e 40%); }
.isobox { width: min(320px, 72vw); height: auto; } .isobox.fitted { max-height: min(170px, 20vh); } @media (max-width: 760px) { .key { min-height: 44px; } } .isobox .grid { stroke: #8a7a62; stroke-width: 1; }
.isobox .face { stroke: #3a2c20; stroke-width: 1.5; cursor: pointer; } .isobox .face.right { fill: #c9a87a; } .isobox .face.left { fill: #a9875c; } .isobox .face.top { fill: #e3c999; }
.isobox .face.on { fill: #ffd27a; } .isobox .layer { stroke: #3a2c20; stroke-width: 1; stroke-dasharray: 4 3; } .isobox .pole { stroke: #b3122e; stroke-width: 5; stroke-linecap: round; }
.isobox .dim { font: 700 15px var(--body); fill: #2a2117; }
.numlabel { display: flex; flex-direction: column; gap: 6px; font-family: var(--type); }
.numin { min-height: 52px; font: 700 26px var(--body); width: 160px; padding: 0 12px; border: 2px solid #3a2c20; border-radius: 3px; background: #fffaf0; }
.keypad { display: grid; grid-template-columns: repeat(3, 56px); gap: 6px; margin-top: 8px; } .key { min-height: 48px; border-radius: 3px; border: 1px solid rgba(42,33,23,.35); background: #fffaf0; font: 700 20px var(--body); color: var(--paper-ink); }
.gridpad { width: min(380px, 82vw); height: auto; touch-action: none; background: #2a2333; border-radius: 4px; cursor: crosshair; }
.gridpad .gl { stroke: rgba(235,230,215,.25); stroke-width: 1; } .gridpad .axis { stroke: rgba(255,240,210,.85); stroke-width: 2.5; }
.gridpad .gn { font: 13px var(--body); fill: #e9dcc0; text-anchor: middle; } .gridpad .gn.y { text-anchor: end; }
.gridpad .gref { fill: none; stroke: #9fb8ff; stroke-width: 3; } .gridpad .gref.mirror { stroke-dasharray: 4 3; } .gridpad .glab { font: 12px var(--type); fill: #cfd8ff; }
.gridpad .gmark { fill: rgba(255,138,61,.85); stroke: #fff; stroke-width: 2; }
.gridside { max-width: 260px; }

/* board */
.board-card { width: min(1100px, 100%); }
.board-card .sub { margin: 0 0 8px; }
.board-body { display: grid; grid-template-columns: 1fr 260px; gap: 16px; }
.suspects { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; align-content: start; }
.suspect { position: relative; display: flex; flex-direction: column; justify-content: flex-start; text-align: left; background: #fffaf0; border: 2px solid rgba(42,33,23,.25); border-radius: 4px; padding: 8px; color: var(--paper-ink); font: inherit; min-height: 48px; }
.suspect:disabled { cursor: default; }
.suspect .portrait { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 3px; background: #2a2333; display: grid; place-items: center; color: #e9dcc0; font: 800 40px var(--display); }
.sname { font: 800 15px var(--display); margin-top: 6px; } .swhat { font-size: 12px; opacity: .7; }
.traits { list-style: none; margin: 6px 0 0; padding: 0; font-size: 13.5px; display: grid; gap: 2px; }
.traits li { display: grid; grid-template-columns: 18px 1fr 16px; align-items: center; } .traits li.no { opacity: .68; } #btn-sound.off { opacity: .7; } #btn-sound.off .ti { text-decoration: line-through; text-decoration-thickness: 2px; } .traits b { text-align: center; }
.suspect.cleared { opacity: .55; } .suspect .stamp { position: absolute; top: 34%; left: 50%; transform: translate(-50%, -50%) rotate(-12deg); border: 3px solid var(--red); color: var(--red); padding: 2px 8px; font: 800 16px var(--display); letter-spacing: .14em; background: rgba(255,250,240,.85); }
.suspect.crossing { border-color: var(--red); background: #fbe3e3; } .suspect.crossing::after { content: '\2715'; position: absolute; top: 4px; right: 8px; color: var(--red); font: 800 26px var(--body); }
.suspect.chosen { border-color: var(--ember); box-shadow: 0 0 0 3px var(--ember); }
.board-card aside { background: rgba(42,33,23,.06); border-radius: 4px; padding: 10px 12px; }
.ev-head { font-family: var(--type); letter-spacing: .18em; color: var(--red); font-size: 12px; margin-bottom: 6px; }
.evidence { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 14px; } .evidence li span { display: block; } .evidence li.new { background: #fff1c8; padding: 4px 6px; border-radius: 3px; }
.board-fb { color: var(--red); font-weight: 700; min-height: 20px; margin: 0; flex: 1; }

/* ending */
.end-card { text-align: center; }
.glasses { font-size: 40px; display: flex; gap: 10px; justify-content: center; margin: 6px 0 10px; }
.glass { filter: grayscale(1); opacity: .35; } .glass.on { filter: none; opacity: 1; animation: pop .5s ease both; }
@keyframes pop { from { transform: scale(.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.stats { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 2px; }
.shelf-head { font-family: var(--type); letter-spacing: .12em; margin-top: 10px; }
.shelf { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 8px 0; }
.file { width: 82px; font-size: 12px; } .file img, .file .sil { width: 82px; height: 82px; border-radius: 4px; object-fit: cover; display: grid; place-items: center; background: #2a2333; color: #6a6077; font: 800 34px var(--display); }
.file:not(.got) { opacity: .55; }
.report { text-align: left; border-top: 1px dashed rgba(42,33,23,.4); margin-top: 14px; padding-top: 10px; }
.report h3 { font-family: var(--display); margin: 0; } .rq { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; font-weight: 700; }
.rq textarea { font: 16px/1.5 var(--body); padding: 8px; border: 2px solid #3a2c20; border-radius: 3px; background: #fffaf0; resize: vertical; }
.wc { font-family: var(--type); font-size: 13px; color: var(--red); } .wc.ok { color: #1d6b34; }
.end-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.confirm { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(5,6,12,.7); padding: 16px; }
.confirm-card { width: min(440px, 100%); text-align: center; }
.toast { position: fixed; left: 50%; top: 80px; transform: translateX(-50%); background: var(--paper); color: var(--paper-ink); padding: 8px 14px; border-radius: 3px; z-index: 40; font-family: var(--type); transition: opacity .5s; }
.toast.out { opacity: 0; }
@media (max-width: 760px) { .board-body { grid-template-columns: 1fr; } .board-body aside { order: -1; } .suspects { grid-template-columns: repeat(2, 1fr); } .p-card, .board-card, .end-card { padding: 16px; } .p-card footer, .board-card footer { bottom: -16px; } }
@media (min-width: 1200px) { .suspects { grid-template-columns: repeat(6, minmax(0, 1fr)); } .suspect .stamp { top: 26%; font-size: 13px; padding: 2px 6px; } } /* every suspect's traits above the footer on a laptop: two rows hid Jack and Gus under it (10-19 audit) */
@media (min-width: 761px) and (max-width: 1199px) { .suspects { grid-template-columns: repeat(3, minmax(0, 1fr)); } .suspect .portrait { aspect-ratio: auto; height: 96px; object-position: 50% 30%; } .suspect .stamp { top: 56px; } } /* tablet: the stamp on the portrait, not over the name; the crop keeps hats and faces (10-19 audit) */
@media (orientation: landscape) and (max-height: 560px) { /* a phone held sideways: all six suspects and their trait rows on one screen (10-19 audit) */
  .board-card { padding: 10px 14px; } .board-card h2 { font-size: 18px; margin: 0 0 4px; } .board-card .sub { font-size: 12.5px; margin: 0 0 6px; }
  .board-body { grid-template-columns: 1fr 190px; gap: 10px; } .board-body aside { order: 0; font-size: 12.5px; padding: 8px 10px; }
  .suspects { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; } .suspect { padding: 5px; }
  .suspect .portrait { aspect-ratio: auto; height: 44px; object-position: 50% 25%; } .suspect .sname { font-size: 12px; margin-top: 3px; } .suspect .swhat { display: none; } .suspect .stamp { top: 22%; font-size: 11px; padding: 1px 4px; border-width: 2px; }
  .board-body aside { contain: size; overflow-y: auto; } .evidence:has(li.new) li:not(.new) span { display: none; } /* the list scrolls inside the suspects' height; older clues show their titles, the new one in full (10-19 audit, B2) */
  .traits { font-size: 11px; gap: 0; } .traits li { grid-template-columns: 14px 1fr 12px; }
  .board-card footer { margin-top: 6px; padding: 4px 0; } .board-card footer .btn-primary { min-height: 40px; padding: 0 18px; font-size: 13px; }
}
@media (max-width: 640px) { .tools { gap: 4px; } .tool { min-width: 44px; padding: 0 8px; } #btn-board b { margin-left: 2px; } }

/* wrong-answer feedback (F2): the panel art acts out the student's number. Stays until the answer changes; no timers. */
.fb-cap { margin: 8px 0 0; padding: 6px 10px; background: #fff1c8; border-left: 4px solid var(--ember); font: 700 15px/1.4 var(--body); max-width: 34ch; }
#panel.dock .fb-cap { font-size: 13.5px; margin-top: 6px; padding: 4px 8px; }
.fbw { fill: rgba(255,138,61,.32); stroke: var(--ember); stroke-width: 2; } .fbw.over { fill: rgba(179,18,46,.38); stroke: var(--red); }
.fbw.gap { fill: none; stroke: var(--red); stroke-width: 2.5; stroke-dasharray: 5 4; }
.fbw-lab { font: 700 15px var(--body); fill: #7a2a10; } .fbw-q { font: 800 22px var(--display); fill: var(--red); }
.pcase { fill: #3a1f1a; } .prod { stroke: #d4a64a; stroke-width: 3; } .pbob { fill: #d4a64a; stroke: #6a4a1a; stroke-width: 2; } .pbob.real { fill: #9fd0ff; stroke: #2a4a6a; }
.plab { font: 700 19px var(--body); fill: #f6ecd2; }
.swing { animation: swing 1.1s ease-in-out infinite alternate; transform-origin: 0 0; } .swing.slow { animation-duration: 1.8s; } .swing.still { animation: none; }
@keyframes swing { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }
.liquid.murky { fill: #6b5a38; }
.foam { fill: #c8ffb4; stroke: #3a8a4a; stroke-width: 1.5; } .speck { fill: #2e2516; }
.drip { fill: none; stroke: #8fe88a; stroke-width: 7; stroke-linecap: round; } .drip.run { stroke-dasharray: 120; stroke-dashoffset: 120; animation: drip 1.2s ease-in forwards; }
@keyframes drip { to { stroke-dashoffset: 0; } }
.rlab { font: 11px var(--type); fill: #2a2117; } .rnum { font: 700 11px var(--body); fill: #10140f; } .rmilk { fill: #e8e4ff; stroke: #4a4470; } .rjuice { fill: #ffad5a; stroke: #7a4a10; }
.isobox.fb-stack .face { fill: #ffd27a; } .stack-n { font: 800 20px var(--display); fill: var(--red); text-anchor: middle; }
.fb-net .nf rect { fill: #d8cdb8; stroke: #3a2c20; stroke-width: 1.5; } .fb-net .nf.on rect { fill: #ffd27a; }
.nf-lab { font: 700 13px var(--body); fill: #2a2117; } .nf-q { font: 800 22px var(--display); fill: #8a7a62; } .net-tag { font: 700 15px var(--body); fill: var(--red); }
.nf.unfold { animation: unfold .45s ease-out both; transform-box: fill-box; transform-origin: center; }
@keyframes unfold { from { transform: scale(.05); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.td-base { fill: #e3c999; stroke: #3a2c20; stroke-width: 1.5; } .td-pole { stroke: #b3122e; stroke-width: 5; stroke-linecap: round; }
.td-edge { stroke: var(--ember); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 9 5; } .td-sq { fill: rgba(179,18,46,.18); stroke: var(--red); stroke-width: 2; }
.td-lab { font: 700 15px var(--body); fill: var(--red); paint-order: stroke; stroke: #f6ecd2; stroke-width: 4px; stroke-linejoin: round; } .td-dim { font: 700 14px var(--body); fill: #2a2117; }
.fb-sq.grow { animation: unfold .5s ease-out both; transform-box: fill-box; transform-origin: center; }
.gridpad .groute { fill: none; stroke: #ffe2a0; stroke-width: 3; stroke-dasharray: 6 5; } .gridpad .gghost { fill: rgba(255,226,160,.9); stroke: #fff; stroke-width: 2; }
.gridpad .gstep { font: 700 13px var(--body); fill: #ffe2a0; paint-order: stroke; stroke: #2a2333; stroke-width: 4px; }
.gridpad .gaxis { stroke: #ff8a3d; stroke-width: 6; stroke-linecap: round; opacity: .85; } .gridpad .garrow { fill: #ffe2a0; } .gridpad .gpivot { fill: #ffe2a0; }
.gridpad .gspoke { stroke: rgba(255,226,160,.7); stroke-width: 2; stroke-dasharray: 4 4; }
@media (prefers-reduced-motion: reduce) { .swing, .drip.run, .nf.unfold, .fb-sq.grow { animation: none; stroke-dashoffset: 0; } }

/* lock reveal in the illustrated mode (F3): the evidence card flips in over the still */
.token2d { position: fixed; left: 50%; top: 38%; z-index: 9; width: 92px; height: 116px; margin: -58px 0 0 -46px; display: grid; place-items: center; pointer-events: none;
  background: #f2e3bf; border: 4px solid #8a5a2a; border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.6); font-size: 48px; animation: tokenflip .7s ease-out both; }
.token2d.still { animation: none; }
@keyframes tokenflip { from { transform: perspective(500px) rotateY(90deg) translateY(30px); opacity: 0; } to { transform: perspective(500px) rotateY(0) translateY(0); opacity: 1; } }

/* hidden bats (F4) */
.bats { font-family: var(--type); font-size: 13px; color: var(--muted); letter-spacing: .06em; }
.bat2d { position: fixed; z-index: 9; /* above hotspot labels, which can cross it on small screens */ width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; background: none; display: grid; place-items: center; cursor: pointer; }
.bat2d svg { filter: drop-shadow(0 0 1px rgba(255,255,255,.25)); } .bat2d.flee { transition: transform .6s ease-in, opacity .6s; transform: translate(60px, -120px) scale(.5); opacity: 0; }
@media (prefers-reduced-motion: reduce) { .bat2d.flee { transition: none; } }
.costumes { display: flex; gap: 12px; align-items: center; justify-content: center; margin: 26px 0 4px; /* room for the hat above the cat */ text-align: left; } .costumes .shelf-head { margin-top: 0; } .costumes .fine { margin: 2px 0 0; }
.cat-pic { position: relative; isolation: isolate; width: 72px; height: 72px; flex: none; } .cat-pic img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: #2a2333; }
.cos { position: absolute; left: 50%; transform: translateX(-50%); pointer-events: none; }
.cos1 { top: -22px; width: 0; height: 0; border-left: 18px solid transparent; border-right: 18px solid transparent; border-bottom: 34px solid #5a2a8a; filter: drop-shadow(0 6px 0 #5a2a8a); }
.cos1::after { content: ''; position: absolute; left: -30px; top: 30px; width: 60px; height: 7px; border-radius: 4px; background: #5a2a8a; }
.cos2 { bottom: -4px; width: 64px; height: 30px; border-radius: 6px 6px 30px 30px; background: #b3122e; z-index: -1; }
.cos3 { top: -16px; width: 52px; height: 38px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ffa04a, #e2650e); box-shadow: inset 0 -4px 0 rgba(0,0,0,.15); }
.cos3::after { content: ''; position: absolute; left: 23px; top: -8px; width: 6px; height: 10px; border-radius: 2px; background: #3a5a1a; }

/* culprit endings in the illustrated mode (F6): the culprit's portrait, moving the way their 3D ending does */
.confess2d { position: fixed; left: 50%; top: 14%; z-index: 9; width: min(200px, 46vw); margin-left: calc(min(200px, 46vw) / -2); pointer-events: none; }
.confess2d img { width: 100%; border-radius: 50%; border: 4px solid var(--candle); box-shadow: 0 16px 40px rgba(0,0,0,.6); display: block; }
.confess2d.c-nox img { animation: c-bow 1.6s ease-in-out .3s both; } .confess2d.c-vesper img { animation: c-shake .5s ease-in-out 3 .4s; filter: drop-shadow(0 0 18px #6dff6a); }
.confess2d.c-howl img { animation: c-droop 1.2s ease-out .3s both; } .confess2d.c-bones img { animation: c-collapse 2s ease-in-out .2s both; }
.confess2d.c-jack img { animation: c-dark 1.4s ease-out .2s both; } .confess2d.c-jack.relit img { animation: c-light 1s ease-out both; }
.confess2d.c-gus img { animation: c-flicker 2s steps(12) .2s both; }
.confess2d.still img { animation: none !important; }
@keyframes c-bow { 50% { transform: translateY(14px) rotate(-6deg); } }
@keyframes c-shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@keyframes c-droop { to { transform: rotate(8deg) translateY(8px); } }
@keyframes c-collapse { 30% { transform: translateY(40px) scaleY(.5); opacity: .5; } 100% { transform: none; opacity: 1; } }
@keyframes c-dark { to { filter: brightness(.25); } } @keyframes c-light { from { filter: brightness(.25); } to { filter: none; } }
@keyframes c-flicker { 0%, 20%, 40%, 60%, 80% { opacity: 1; } 10%, 30%, 50%, 70% { opacity: .35; } 100% { opacity: .9; transform: scale(.85) translateX(30px); } }

.gpu-diag { position: fixed; left: 8px; bottom: 8px; z-index: 50; max-width: calc(100vw - 16px); padding: 6px 10px; border-radius: 4px; background: rgba(0,0,0,.82); color: #b8ffb8; font: 12px/1.4 ui-monospace, monospace; pointer-events: none; }

/* lock card: no top padding on the scroll box itself (the pinned question sits flush at its top edge); the header carries it */
.p-card { padding-top: 0 !important; } .p-card > header { padding-top: 20px; } #panel.dock .p-card > header { padding-top: 16px; } @media (max-width: 760px) { .p-card > header { padding-top: 16px; } }

/* a phone held sideways: the lock card showed half a clock, a cauldron rim, 1 of 12 keypad keys and no box (10-19 audit, B1).
   Compact header, art sized to the screen's height and set beside its controls, so the art, every control and Check fit unscrolled */
@media (orientation: landscape) and (max-height: 560px) {
  #panel { padding: 8px; }
  #panel .p-card { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); padding: 0 16px 10px; }
  #panel .p-card > header { padding-top: 8px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 14px; }
  #panel .p-card h2 { font-size: 18px; margin: 0; } #panel .p-card header .case-no { font-size: 10.5px; order: 2; }
  #panel .p-card .p-q { padding: 2px 0 4px; } #panel .p-card .p-prompt { font-size: 15px; line-height: 1.4; }
  #panel .p-card .p-body { margin: 6px 0 2px; }
  #panel .p-card .clockwrap, #panel .p-card .brewwrap, #panel .p-card .boxwrap, #panel .p-card .gridwrap { flex-wrap: nowrap; gap: 20px; }
  #panel .p-card .clockface, #panel .p-card .cauldron, #panel .p-card .gridpad, #panel .p-card .isobox { width: auto; height: max(120px, min(220px, calc(100dvh - 196px))); max-height: none; }
  #panel .p-card .readout { font-size: 17px; margin-bottom: 6px; } #panel .p-card .p-body .fine { font-size: 12px; margin: 6px 0 0; }
  #panel .p-card .jar { min-width: 84px; min-height: 48px; padding: 4px 8px; } #panel .p-card .jars { margin: 4px 0; } #panel .p-card .step { min-height: 44px; }
  #panel .p-card .numlabel { gap: 4px; font-size: 13px; } #panel .p-card .numin { min-height: 40px; font-size: 20px; width: 140px; }
  #panel .p-card .keypad { grid-template-columns: repeat(6, 44px); gap: 4px; margin-top: 4px; } #panel .p-card .key { min-height: 38px; font-size: 17px; }
  #panel .p-card footer { margin-top: 6px; padding: 6px 0; bottom: -10px; } #panel .p-card footer button { min-height: 40px; }
}
#casecode { white-space: nowrap; }
.p-q .say { margin-left: 6px; font: 600 13px var(--type); } @media (max-width: 899px), (max-height: 560px) { .p-q .say { display: none; } }
/* top bar: words beside the icons where there is room, so Read aloud is not taken for a sound switch (10-19 audit) */
.tool .tl { margin-left: 6px; font-size: 12px; letter-spacing: .08em; } @media (max-width: 1099px), (max-height: 560px) { .tool .tl { display: none; } }
#btn-brief .ti { filter: drop-shadow(0 0 3px rgba(255,226,170,.75)); } /* the black cat was near-invisible on the dark button */
@media (max-width: 760px) { #panel .keypad { grid-template-columns: repeat(6, 44px); gap: 5px; } } /* upright phone: two rows of six, so 0 and delete clear the footer on a long Inspector prompt (10-19 audit) */
.end-card > .fine { margin-left: auto; margin-right: auto; text-align: center; } /* "Catch all six" and the print hint sat in a left-hand box under a centred card (10-19 audit) */
.isobox .pole-lab { fill: #b3122e; paint-order: stroke; stroke: #f6ecd2; stroke-width: 4px; stroke-linejoin: round; } /* the pole's given length on the missing-side problem (10-19) */
.td-dim.td-mine { fill: #b5470f; font-size: 16px; } /* the student's side on the missing-side feedback (10-19) */
#line, .evidence li span { white-space: pre-line; } /* the Inspector guest book lists one name per line (10-19) */
@media (orientation: portrait) { .hs.lab-up span { top: auto; bottom: 54px; } } /* upright phones: the ballroom names alternate above and below so six in a row never overlap; the foyer's Lantern hook name sits above, clear of the clock's (10-19) */
/* the free demo's last card: the three rooms still to come, then where to get the full case (10-19) */
.demo-end p { max-width: 62ch; margin-left: auto; margin-right: auto; }
.demo-rooms { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0; }
.demo-room { margin: 0; background: rgba(42,33,23,.08); border: 1px solid rgba(42,33,23,.25); border-radius: 4px; overflow: hidden; text-align: left; }
.demo-room img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.demo-room figcaption { padding: 6px 8px 8px; display: grid; gap: 2px; font-size: 13px; line-height: 1.3; }
.demo-room b { font-family: var(--display); letter-spacing: .04em; font-size: 13px; }
.demo-end .end-actions a { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 760px) { .demo-rooms { grid-template-columns: repeat(2, 1fr); } }