/* Alibi TV: a fixed 1920x1080 stage scaled to the screen, like a console game. All units are stage pixels. */
body.tv { background: #000; overflow: hidden; }
#viewport { position: fixed; inset: 0; background: #000; overflow: hidden; }
#game {
  position: absolute; left: 50%; top: 50%;
  width: 1920px; height: 1080px;
  transform: translate(-50%, -50%) scale(var(--s, 1));
  overflow: hidden;
  background: #05090a;
  font-variation-settings: 'opsz' 28;
}
#game .label { font-size: 15px; letter-spacing: 0.32em; }

/* ---------- world layers ---------- */
.backdrop { position: absolute; inset: -60px; transition: transform 3.2s cubic-bezier(0.4, 0, 0.2, 1), filter 2.4s ease; transform-origin: 70% 55%; }
/* The lake house paintings (art.js scene()): lights-off underneath, lights-on above it as .windows,
   so the blackout switches them. A very slow push-in keeps the still painting alive. */
.backdrop .scene-art { animation: pushIn 60s ease-in-out infinite alternate; transform-origin: 70% 55%; }
@keyframes pushIn { from { transform: scale(1); } to { transform: scale(1.04); } }
.backdrop .windows { transition: opacity 0.15s; }
#game.blackout .windows { opacity: 0; }

#game.cam-title .backdrop { transform: none; filter: none; }
#game.cam-house .backdrop { transform: scale(1.9) translate(-140px, -40px); filter: blur(5px) brightness(0.55); }
#game.cam-dim .backdrop { transform: scale(1.25); filter: blur(12px) brightness(0.32) saturate(0.8); }
#game.cam-dark .backdrop { transform: scale(1.4); filter: blur(16px) brightness(0.18); }

#rain { position: absolute; inset: 0; width: 1920px; height: 1080px; pointer-events: none; mix-blend-mode: screen; }
#scene { position: absolute; inset: 0; }
.vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.7) 100%); }
.grain {
  position: absolute; inset: -100px; pointer-events: none; opacity: 0.07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.6s steps(6) infinite;
}
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-40px, 30px); } 40% { transform: translate(30px, -50px); } 60% { transform: translate(-60px, -20px); } 80% { transform: translate(50px, 40px); } 100% { transform: translate(0, 0); } }
#flash { position: absolute; inset: 0; pointer-events: none; background: #dfe9ff; opacity: 0; mix-blend-mode: screen; z-index: 40; }
#flash.strike { animation: strike 1.1s ease-out; }
#flash.strike-big { animation: strikeBig 1.6s ease-out; }
@keyframes strike { 0% { opacity: 0; } 4% { opacity: 0.32; } 9% { opacity: 0.04; } 14% { opacity: 0.22; } 30% { opacity: 0; } }
@keyframes strikeBig { 0% { opacity: 0; } 3% { opacity: 0.75; } 8% { opacity: 0.1; } 12% { opacity: 0.6; } 40% { opacity: 0; } }

/* ---------- shared game UI ---------- */
.scene { position: absolute; inset: 0; animation: sceneIn 0.8s ease both; }
@keyframes sceneIn { from { opacity: 0; } to { opacity: 1; } }

.gbtn {
  position: relative;
  display: inline-flex; align-items: center; gap: 18px;
  height: 78px; padding: 0 36px;
  border: 0; cursor: pointer;
  color: var(--candle);
  background: linear-gradient(180deg, rgba(24, 36, 40, 0.92), rgba(10, 16, 18, 0.95));
  font: 600 21px var(--body); letter-spacing: 0.18em; text-transform: uppercase;
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  transition: filter 0.2s, transform 0.12s;
}
.gbtn::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(var(--brass), var(--brass)) top left / 34px 2px no-repeat,
              linear-gradient(var(--brass), var(--brass)) top left / 2px 34px no-repeat,
              linear-gradient(var(--brass), var(--brass)) bottom right / 34px 2px no-repeat,
              linear-gradient(var(--brass), var(--brass)) bottom right / 2px 34px no-repeat;
  box-shadow: inset 0 0 0 1px rgba(226, 184, 119, 0.28);
}
.gbtn.primary { color: #15110b; background: linear-gradient(180deg, #f6ead2, #d8c6a2); }
.gbtn.primary::before { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5); background: none; }
.gbtn:hover:not(:disabled), .gbtn:focus-visible { filter: brightness(1.15) drop-shadow(0 0 18px rgba(226, 184, 119, 0.35)); outline: none; }
.gbtn:active:not(:disabled) { transform: translateY(2px); }
.gbtn:disabled { opacity: 0.32; cursor: default; }
.gbtn kbd {
  font: 700 13px var(--body); letter-spacing: 0.08em;
  padding: 5px 9px 4px; border: 1.5px solid currentColor; border-radius: 5px; opacity: 0.6;
}
.gbtn.big { height: 92px; font-size: 24px; padding: 0 46px; }

.panel {
  position: absolute;
  background: linear-gradient(180deg, rgba(10, 17, 19, 0.82), rgba(6, 10, 11, 0.88));
  backdrop-filter: blur(10px);
  clip-path: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px);
}
.panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(var(--brass), var(--brass)) top left / 60px 2px no-repeat,
              linear-gradient(var(--brass), var(--brass)) top left / 2px 60px no-repeat,
              linear-gradient(var(--brass), var(--brass)) bottom right / 60px 2px no-repeat,
              linear-gradient(var(--brass), var(--brass)) bottom right / 2px 60px no-repeat;
  box-shadow: inset 0 0 0 1px rgba(226, 184, 119, 0.16);
}


/* ---------- tap to begin ---------- */
.tap {
  position: absolute; inset: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px;
  background: radial-gradient(60% 60% at 50% 45%, rgba(5, 9, 10, 0.55), rgba(0, 0, 0, 0.92));
  cursor: pointer; transition: opacity 1.2s ease;
}
.tap.gone { opacity: 0; pointer-events: none; }
.tap-logo { width: 760px; height: 285px; font-size: 0; color: transparent; background: url(art/logo-alibi.webp) center / contain no-repeat; filter: drop-shadow(0 0 60px rgba(0, 0, 0, 0.8)); }
.tap-sub { margin-top: -30px; }
.tap-cta { margin-top: 70px; font: 600 22px var(--body); letter-spacing: 0.4em; text-transform: uppercase; animation: breatheTxt 2.6s ease-in-out infinite; }
.tap-note { color: var(--fog); font-size: 18px; margin: 0; }
@keyframes breatheTxt { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
.hud-exhibits { position: absolute; left: 60px; top: 44px; display: flex; gap: 12px; align-items: center; }
.hud-ex {
  width: 54px; height: 64px; position: relative;
  border: 1.5px dashed rgba(226, 184, 119, 0.35);
  display: grid; place-items: end center; padding-bottom: 5px;
  font: 700 14px var(--body); color: rgba(226, 184, 119, 0.5);
  transition: all 0.6s;
}
.hud-ex.on { border: 0; background: #eeeae0; color: #1a1712; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); transform: rotate(-3deg); }
.hud-ex.on:nth-child(2) { transform: rotate(2deg); }
.hud-ex .thumb { position: absolute; left: 5px; right: 5px; top: 5px; height: 40px; overflow: hidden; background: #111; }
.hud-ex .thumb svg { width: 100%; height: 100%; display: block; }
.hud-ex-label { margin-left: 10px; color: var(--fog); font: 600 14px var(--body); letter-spacing: 0.24em; text-transform: uppercase; }
.hud-room { position: absolute; right: 60px; top: 44px; display: flex; align-items: center; gap: 14px; }
.hud-room b { font: 700 30px var(--typed); letter-spacing: 0.2em; color: var(--candle); }
.hud-players { display: flex; gap: 6px; margin-left: 12px; }
.hud-players .frame-bust { width: 34px; border: 1px solid rgba(226, 184, 119, 0.35); }
.hud-sound {
  position: absolute; left: 60px; bottom: 44px; width: 52px; height: 52px; pointer-events: auto;
  border: 1px solid rgba(226, 184, 119, 0.35); background: rgba(6, 10, 11, 0.6); color: var(--fog); cursor: pointer; display: grid; place-items: center;
}
.hud-sound .icon { width: 24px; height: 24px; }

/* ---------- chapter cards ---------- */
#chapter { position: absolute; inset: 0; z-index: 30; pointer-events: none; display: flex; align-items: center; justify-content: center; }
#chapter::before, #chapter::after { content: ""; position: absolute; left: 0; right: 0; height: 150px; background: #000; transform: scaleY(0); animation: bar 3.2s cubic-bezier(0.7, 0, 0.2, 1) both; z-index: 2; }
#chapter::before { top: 0; transform-origin: top; }
#chapter::after { bottom: 0; transform-origin: bottom; }
@keyframes bar { 0% { transform: scaleY(0); } 14%, 86% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
.ch-dim { position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 50%, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.88)); animation: chFade 3.2s ease both; }
@keyframes chFade { 0% { opacity: 0; } 12%, 85% { opacity: 1; } 100% { opacity: 0; } }
.ch-body { position: relative; text-align: center; animation: chFade 3.2s ease both; z-index: 3; }
.ch-kicker { font: 600 20px var(--body); letter-spacing: 0.5em; text-transform: uppercase; color: var(--brass); animation: track 3.2s ease-out both; }
@keyframes track { from { letter-spacing: 0.9em; opacity: 0; } 30% { opacity: 1; } to { letter-spacing: 0.46em; } }
.ch-title { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 168px; line-height: 1.05; margin: 24px 0 30px; text-shadow: 0 0 60px rgba(0, 0, 0, 0.9); }
.ch-rule { width: 520px; height: 1px; margin: 0 auto; background: linear-gradient(90deg, transparent, var(--brass), transparent); animation: rule 3.2s ease both; }
@keyframes rule { from { transform: scaleX(0); } 40% { transform: scaleX(1); } }
#chapter.flicker .ch-title { animation: flickerIn 3.2s ease both; }
@keyframes flickerIn { 0%, 10% { opacity: 0; } 12% { opacity: 1; } 14% { opacity: 0.1; } 17% { opacity: 1; } 22% { opacity: 0.3; } 26%, 85% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- title / lobby ---------- */
.title-block { position: absolute; left: 110px; top: 110px; width: 900px; }
.title-logo { width: 640px; height: 240px; font-size: 0; color: transparent; background: url(art/logo-alibi.webp) left center / contain no-repeat; filter: drop-shadow(0 10px 40px rgba(0, 0, 0, 0.7)); }
.title-sub { margin: 18px 0 0 12px; }
.title-case { margin: 58px 0 0 10px; display: flex; flex-direction: column; gap: 10px; }
.title-case .case-name { font-family: var(--display); font-weight: 400; font-size: 64px; line-height: 1.05; }
.title-case .case-tag { font-family: var(--display); font-style: italic; font-size: 30px; color: var(--fog); }
.title-case .case-meta { margin-top: 14px; color: var(--fog); }

.join-panel { left: 110px; bottom: 90px; width: 760px; height: 300px; padding: 40px 44px; display: flex; gap: 40px; align-items: center; }
.join-qr { width: 220px; height: 220px; background: var(--candle); padding: 14px; flex: none; }
.join-qr svg { width: 100%; height: 100%; display: block; }
.join-info { display: grid; gap: 12px; }
.join-url { font: 600 34px var(--body); color: var(--candle); margin-bottom: 14px; letter-spacing: 0.01em; }
.code-cells { display: flex; gap: 12px; }
.code-cells span {
  width: 76px; height: 94px; display: grid; place-items: center;
  font: 700 58px var(--typed); color: var(--candle);
  background: rgba(0, 0, 0, 0.35); border: 1.5px solid rgba(226, 184, 119, 0.5);
}

.guests-row { position: absolute; right: 110px; bottom: 220px; display: flex; gap: 22px; align-items: flex-end; }
.guest { width: 130px; text-align: center; transition: opacity 0.5s; }
.guest .frame-bust { width: 130px; border: 1.5px solid rgba(226, 184, 119, 0.4); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6); }
.guest.empty .frame-bust { border: 1.5px dashed rgba(226, 184, 119, 0.25); background: rgba(0, 0, 0, 0.35); box-shadow: none; }
.guest.empty .frame-bust .bust { opacity: 0.12; }
.guest-name { margin-top: 14px; font: 600 22px var(--body); color: var(--candle); }
.guest.empty .guest-name { color: rgba(141, 154, 150, 0.6); font-weight: 500; }
.guest.arrive { animation: arrive 0.9s cubic-bezier(0.2, 1, 0.3, 1) both; }
@keyframes arrive { from { opacity: 0; transform: translateY(40px) scale(0.92); } to { opacity: 1; transform: none; } }
.lobby-start { position: absolute; right: 110px; bottom: 90px; display: flex; align-items: center; gap: 30px; }
.lobby-hint { color: var(--fog); font-size: 22px; }

/* ---------- call ---------- */
.device {
  position: absolute; left: 250px; top: 136px; width: 450px; height: 900px;
  border-radius: 74px; padding: 16px;
  background: linear-gradient(145deg, #2a3236, #0b0f11 40%, #1a2024);
  box-shadow: 0 0 0 2px #3a4448, 0 60px 120px rgba(0, 0, 0, 0.75), inset 0 0 0 2px rgba(255, 255, 255, 0.05);
  transform-origin: 50% 70%;
  animation: deviceIn 0.9s cubic-bezier(0.2, 1, 0.3, 1) both;
}
@keyframes deviceIn { from { opacity: 0; transform: translateY(80px) rotate(-4deg); } to { opacity: 1; transform: none; } }
.device.buzz { animation: buzz 0.9s ease-in-out; }
@keyframes buzz { 0%, 100% { transform: rotate(0); } 10%, 30%, 50%, 70% { transform: rotate(-1.6deg) translateX(-3px); } 20%, 40%, 60%, 80% { transform: rotate(1.6deg) translateX(3px); } }
.device-screen { position: relative; width: 100%; height: 100%; border-radius: 60px; overflow: hidden; background: #000; }
.device-island { position: absolute; top: 30px; left: 50%; width: 120px; height: 34px; margin-left: -60px; background: #000; border-radius: 20px; z-index: 5; }
.ds-bg { position: absolute; inset: 0; transition: filter 0.8s, transform 0.8s; }
.ds-bg .bust { width: 100%; height: 100%; }
.device:not(.live) .ds-bg { filter: blur(12px) brightness(0.9) saturate(1.2); transform: scale(1.25); }
.ds-incoming, .ds-live { position: absolute; inset: 0; display: flex; flex-direction: column; color: #fff; font-family: -apple-system, var(--body); transition: opacity 0.5s; }
.device.live .ds-incoming, .device:not(.live) .ds-live { opacity: 0; pointer-events: none; }
.ds-incoming { align-items: center; padding: 110px 36px 70px; text-align: center; }
.ds-kind { font-size: 19px; opacity: 0.75; }
.ds-name { font-size: 40px; font-weight: 600; margin-top: 8px; letter-spacing: -0.01em; }
.ds-actions { margin-top: auto; width: 100%; display: flex; justify-content: space-between; padding: 0 30px; }
.ds-act { display: grid; justify-items: center; gap: 12px; font-size: 17px; }
.ds-act button, .ds-act span.dot {
  width: 86px; height: 86px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; color: #fff;
}
.ds-act .icon { width: 36px; height: 36px; }
.ds-decline span.dot { background: #ff3b30; }
.ds-decline .icon { transform: rotate(135deg); }
.ds-accept button { background: #34c759; animation: pulseGreen 1.6s ease-in-out infinite; }
@keyframes pulseGreen { 0%, 100% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.6); } 50% { box-shadow: 0 0 0 18px rgba(52, 199, 89, 0); } }
.ds-live .ds-top { position: absolute; top: 80px; left: 28px; right: 28px; display: flex; justify-content: space-between; align-items: flex-start; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7); }
.ds-live .ds-who { font-size: 24px; font-weight: 600; }
.ds-live .ds-time { font-size: 17px; opacity: 0.8; margin-top: 4px; font-variant-numeric: tabular-nums; }
.ds-pip { width: 110px; height: 150px; border-radius: 16px; overflow: hidden; background: #0d1416; border: 1px solid rgba(255, 255, 255, 0.15); position: relative; }
.ds-pip .bust { width: 100%; height: 100%; opacity: 0.8; }
.ds-controls { position: absolute; bottom: 44px; left: 0; right: 0; display: flex; justify-content: center; gap: 26px; }
.ds-controls span { width: 72px; height: 72px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); backdrop-filter: blur(10px); display: grid; place-items: center; }
.ds-controls span.end { background: #ff3b30; }
.ds-controls span.end .icon { transform: rotate(135deg); }
.ds-controls .icon { width: 30px; height: 30px; }
.device.talking .ds-bg .bust { animation: talk 0.5s ease-in-out infinite alternate; transform-origin: 50% 90%; }
@keyframes talk { from { transform: rotate(-0.6deg) translateY(0); } to { transform: rotate(0.6deg) translateY(-3px); } }
.ds-scan { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 4px); pointer-events: none; }
/* audio call: portrait in a circle, button grid */
.kind-phone .device.live .ds-bg { filter: blur(26px) brightness(0.35); transform: scale(1.4); }
.ds-audio { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; padding-top: 120px; color: #fff; font-family: -apple-system, var(--body); }
.kind-phone .device.live .ds-audio { display: flex; }
.kind-phone .ds-live .ds-top, .kind-phone .ds-pip { display: none; }
.ds-audio .ds-avatar { width: 180px; height: 180px; border-radius: 50%; overflow: hidden; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6); }
.ds-audio .ds-avatar .bust { width: 100%; height: 100%; }
.ds-audio .ds-who { font-size: 34px; font-weight: 600; margin-top: 26px; }
.ds-audio .ds-time { font-size: 19px; opacity: 0.7; margin-top: 6px; font-variant-numeric: tabular-nums; }
.ds-grid { margin-top: 70px; display: grid; grid-template-columns: repeat(3, 84px); gap: 26px 34px; }
.ds-grid span { width: 84px; height: 84px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); display: grid; place-items: center; }
.ds-grid .icon { width: 30px; height: 30px; }
/* voicemail */
.ds-vm { position: absolute; inset: 0; display: none; flex-direction: column; padding: 100px 30px 0; color: #fff; font-family: -apple-system, var(--body); background: #000; }
.kind-voicemail .ds-vm { display: flex; }
.kind-voicemail .ds-incoming, .kind-voicemail .ds-live, .kind-voicemail .ds-bg { display: none; }
.ds-vm h4 { font-size: 40px; margin: 0 0 24px; font-weight: 700; }
.vm-item { border-top: 1px solid #222; border-bottom: 1px solid #222; padding: 22px 4px; }
.vm-item b { display: block; font-size: 24px; }
.vm-item small { display: block; color: #8e8e93; font-size: 17px; margin-top: 4px; }
.vm-bar { margin: 26px 0 10px; height: 6px; border-radius: 3px; background: #333; overflow: hidden; }
.vm-bar i { display: block; height: 100%; width: 0; background: #fff; transition: width 0.4s linear; }
.vm-times { display: flex; justify-content: space-between; color: #8e8e93; font-size: 15px; font-variant-numeric: tabular-nums; }
.vm-wave { display: flex; gap: 4px; align-items: center; height: 70px; margin: 24px 0; }
.vm-wave i { flex: 1; background: #3a3a3c; border-radius: 2px; transition: background 0.3s; }
.vm-wave i.on { background: #fff; }
.vm-play { align-self: center; margin-top: 18px; width: 92px; height: 92px; border-radius: 50%; background: #fff; color: #000; border: 0; display: grid; place-items: center; cursor: pointer; }
.vm-play .icon { width: 38px; height: 38px; fill: #000; }
.vm-from { margin-top: auto; margin-bottom: 70px; text-align: center; color: #8e8e93; font-size: 16px; }

.dialogue { left: 820px; top: 586px; width: 960px; min-height: 560px; padding: 54px 60px 46px; display: flex; flex-direction: column; transform: translateY(-50%); }
.dialogue.ringing { min-height: 0; }
.dlg-head { display: flex; align-items: center; gap: 22px; margin-bottom: 34px; }
.dlg-head .frame-bust { width: 84px; border: 1.5px solid rgba(226, 184, 119, 0.5); }
.dlg-who { display: grid; gap: 6px; }
.dlg-name { font-family: var(--display); font-size: 40px; line-height: 1; }
.dlg-role { color: var(--fog); font-size: 19px; }
.dlg-wave { margin-left: auto; display: flex; gap: 4px; align-items: center; height: 40px; }
.dlg-wave i { width: 4px; height: 6px; background: var(--brass); border-radius: 2px; }
.dlg-wave.on i { animation: dwave 0.8s ease-in-out infinite; }
.dlg-wave.on i:nth-child(2) { animation-delay: 0.12s; } .dlg-wave.on i:nth-child(3) { animation-delay: 0.24s; } .dlg-wave.on i:nth-child(4) { animation-delay: 0.36s; } .dlg-wave.on i:nth-child(5) { animation-delay: 0.48s; } .dlg-wave.on i:nth-child(6) { animation-delay: 0.6s; }
@keyframes dwave { 0%, 100% { height: 6px; } 50% { height: 36px; } }
.dlg-text { font: 500 42px/1.45 var(--body); color: var(--candle); margin: 0; min-height: 250px; }
.dlg-text .caret { display: inline-block; width: 3px; height: 1em; background: var(--brass); margin-left: 4px; vertical-align: -0.12em; animation: caret 0.9s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.dlg-ring { font-family: var(--display); font-size: 92px; line-height: 1.05; margin: 10px 0 18px; }
.dlg-ring-sub { color: var(--fog); font-size: 26px; margin: 0 0 40px; }
.dlg-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 34px; }
.dlg-progress { display: flex; gap: 8px; }
.dlg-progress i { width: 34px; height: 3px; background: rgba(226, 184, 119, 0.2); transition: background 0.4s; }
.dlg-progress i.on { background: var(--brass); }
.dlg-actions { display: flex; gap: 18px; margin-left: auto; }

/* ---------- evidence desk ---------- */
.desk {
  position: absolute; inset: 0;
  background: url(art/bg-evidence-desk.webp) center / cover;
}
.desk::after { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 80% at 50% 35%, transparent 40%, rgba(0, 0, 0, 0.75)); }
.dust { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.dust i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 226, 168, 0.5); filter: blur(0.5px); animation: mote linear infinite; }
@keyframes mote { from { transform: translate(0, 0); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } to { transform: translate(60px, -120px); opacity: 0; } }
.ev-head { position: absolute; left: 110px; top: 150px; z-index: 3; }
.ev-head .ev-title { font-family: var(--display); font-style: italic; font-size: 96px; line-height: 1; margin: 14px 0 0; text-shadow: 0 6px 40px rgba(0, 0, 0, 0.8); }
.polaroid {
  position: absolute; z-index: 3; width: 560px; padding: 26px 26px 96px; background: #efebe1; margin: 0;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.7), 0 2px 4px rgba(0, 0, 0, 0.4);
}
.polaroid .photo { width: 100%; aspect-ratio: 1; overflow: hidden; background: #111; }
.polaroid .photo svg { width: 100%; height: 100%; display: block; }
.polaroid figcaption { position: absolute; left: 30px; right: 30px; bottom: 22px; font: 500 40px/1 Caveat, cursive; color: #2b2a26; }
.ev-polaroid { left: 200px; top: 350px; width: 470px; transform: rotate(-5deg); }
.ev-doc { position: absolute; z-index: 3; left: 860px; top: 320px; width: 860px; font-size: 25px; transform: rotate(2deg); }
.ev-tag {
  position: absolute; z-index: 4; left: 610px; top: 320px; width: 90px; height: 140px;
  background: linear-gradient(180deg, #e8d8b0, #cdb889); clip-path: polygon(50% 0, 100% 18%, 100% 100%, 0 100%, 0 18%);
  display: grid; place-items: center; padding-top: 30px;
  font: 700 54px var(--typed); color: var(--oxblood-ink); transform: rotate(8deg);
}
.ev-tag::before { content: ""; position: absolute; top: 14px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #2a1c13; }
.drop { animation: drop 0.75s cubic-bezier(0.3, 1.25, 0.5, 1) both; }
@keyframes drop { from { opacity: 0; transform: translateY(-140px) rotate(var(--r, 0deg)) scale(1.12); } to { opacity: 1; transform: rotate(var(--r, 0deg)); } }
.ev-polaroid.drop { --r: -5deg; animation-delay: 0.35s; }
.ev-doc.drop { --r: 2deg; animation-delay: 1.05s; }
.ev-tag.drop { --r: 8deg; animation-delay: 1.6s; }
.shake { animation: shake 0.35s ease; }
@keyframes shake { 20% { transform: translate(6px, -4px); } 40% { transform: translate(-5px, 4px); } 60% { transform: translate(4px, 2px); } 80% { transform: translate(-2px, -2px); } }
.bottom-bar { left: 110px; right: 110px; bottom: 44px; height: 124px; padding: 0 50px; display: flex; align-items: center; gap: 30px; z-index: 5; }
.bottom-bar .bb-text { display: grid; gap: 8px; }
.bottom-bar .bb-line { font-size: 26px; color: var(--candle); }
.bottom-bar .gbtn { margin-left: auto; }

/* ---------- detective board ---------- */
.board-scene { background: radial-gradient(80% 90% at 30% 40%, rgba(20, 32, 36, 0.35), rgba(0, 0, 0, 0.55)); }
.dial { position: absolute; left: 130px; top: 130px; width: 520px; height: 520px; }
.dial svg { width: 100%; height: 100%; overflow: visible; }
.dial-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dial-time { font-family: var(--display); font-size: 150px; line-height: 1; font-variant-numeric: lining-nums tabular-nums; margin: 10px 0; transition: color 0.4s; }
.dial.low .dial-time { color: var(--brass); }
.dial.zero .dial-time { color: var(--oxblood-ink); font-style: italic; font-size: 96px; }
.dial-sub { color: var(--fog); font-size: 18px; letter-spacing: 0.3em; text-transform: uppercase; }
.dial-arc { transition: stroke-dashoffset 0.3s linear, stroke 0.4s; }
.board-prompt { position: absolute; left: 110px; top: 690px; width: 620px; font-family: var(--display); font-style: italic; font-size: 40px; line-height: 1.3; margin: 0; }
.board-controls { position: absolute; left: 110px; bottom: 60px; display: flex; gap: 18px; }
.cork {
  position: absolute; left: 790px; top: 120px; width: 1030px; height: 860px;
  background: url(art/board-cork.webp) center / 100% 100% no-repeat;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.7);
}
.cork-strings { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: visible; }
.cork .polaroid { width: 300px; padding: 14px 14px 56px; }
.cork .polaroid figcaption { font-size: 26px; left: 16px; bottom: 14px; }
.pin { position: absolute; z-index: 4; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff8a7a, #a3202f 60%, #4a0d14); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.6); }
.card-q {
  position: absolute; left: 380px; top: 40px; width: 260px; height: 170px; z-index: 2;
  background: #f2eee3; transform: rotate(-2deg); box-shadow: 0 16px 30px rgba(0, 0, 0, 0.6);
  display: grid; place-items: center; text-align: center;
  background-image: repeating-linear-gradient(180deg, transparent 0 27px, rgba(80, 130, 170, 0.25) 27px 28px);
}
.card-q b { font: 700 92px/1 var(--display); color: var(--oxblood-ink); }
.card-q small { position: absolute; bottom: 14px; font: 500 26px Caveat, cursive; color: #2b2a26; }
.slot-empty { position: absolute; z-index: 1; width: 300px; height: 370px; border: 2px dashed rgba(255, 230, 190, 0.18); display: grid; place-items: center; color: rgba(255, 230, 190, 0.35); font: 500 30px Caveat, cursive; }

/* ---------- hallway gallery ---------- */
.gallery-scene { background: url(art/bg-hallway.webp) center / cover; }
.gallery-head { position: absolute; left: 0; right: 0; top: 70px; text-align: center; z-index: 3; }
.gallery-head h1 { font-family: var(--display); font-weight: 400; font-size: 74px; margin: 16px 0 0; }
.hall { position: absolute; left: 0; right: 0; top: 250px; display: flex; justify-content: center; gap: 46px; z-index: 2; }
.hung { width: 250px; display: flex; flex-direction: column; align-items: center; position: relative; }
.hung .lamp-bar { width: 170px; height: 64px; margin-bottom: -16px; background: url(art/picture-light.webp) center / contain no-repeat; position: relative; z-index: 3; }
.hung .cone {
  position: absolute; top: 6px; left: 50%; width: 420px; height: 460px; margin-left: -210px; pointer-events: none; z-index: 2;
  background: radial-gradient(50% 70% at 50% 0%, rgba(255, 214, 150, 0.32), rgba(255, 214, 150, 0.06) 60%, transparent 75%);
  opacity: 0; transition: opacity 0.6s ease;
}
.hung .gilt {
  margin-top: 22px; padding: 25px 20px; position: relative;
  background: url(art/frame-gilt.webp) center / 100% 100% no-repeat;
  filter: drop-shadow(0 26px 30px rgba(0, 0, 0, 0.7));
}
.hung .gilt .frame-bust { width: 210px; filter: brightness(0.45) saturate(0.7); transition: filter 0.8s ease; }
.hung.lit .cone { opacity: 1; }
.hung.lit .gilt .frame-bust { filter: none; }
.hung .plaque {
  margin-top: 26px; padding: 12px 22px 10px; text-align: center;
  background: linear-gradient(180deg, #d4b27a, #a8834c 60%, #8e6c3c); color: #241a0e;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 8px 18px rgba(0, 0, 0, 0.55);
}
.hung .plaque b { display: block; font: 600 24px var(--display); }
.hung .plaque small { display: block; font: 600 14px var(--body); letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.8; margin-top: 2px; }
.hung .played { margin-top: 14px; color: var(--fog); font-size: 18px; }
.hung .state { margin-top: 8px; font: 600 14px var(--body); letter-spacing: 0.3em; text-transform: uppercase; color: rgba(141, 154, 150, 0.6); }
.hung.lit .state { color: var(--brass); }
.gallery-scene .bottom-bar { z-index: 4; }
.hall { top: 220px; }
.rules { position: absolute; left: 110px; right: 110px; top: 796px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; z-index: 3; }
.rule { display: flex; gap: 18px; align-items: flex-start; }
.rule b { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border: 1.5px solid rgba(226, 184, 119, 0.6); font: 400 26px var(--display); color: var(--brass); }
.rule p { margin: 0; font-size: 21px; line-height: 1.45; color: rgba(236, 228, 212, 0.85); }

/* ---------- lineup ---------- */
.lineup-scene { background: linear-gradient(180deg, #172227, #111a1e); }
.lineup-wall { position: absolute; inset: 0; transition: filter 1s; background: url(art/bg-lineup-wall.webp) center / cover; }
.lineup-wall svg { display: none; }
.lineup-head { position: absolute; left: 0; right: 0; top: 64px; text-align: center; z-index: 4; transition: opacity 0.6s; }
.lineup-head h1 { font-family: var(--display); font-weight: 400; font-size: 76px; margin: 14px 0 0; }
.row { position: absolute; left: 0; right: 0; bottom: 236px; display: flex; justify-content: center; gap: 30px; z-index: 3; }
.suspect { width: 250px; position: relative; display: flex; flex-direction: column; align-items: center; transition: filter 0.8s, opacity 0.8s; }
.suspect .frame-bust { width: 250px; background: transparent; }
.suspect .placard {
  margin-top: -2px; width: 200px; padding: 10px 0 8px; text-align: center;
  background: #0a0d0e; border: 2px solid #c9c4b6; color: #efe9dc;
  font: 700 34px var(--typed); letter-spacing: 0.1em;
}
.suspect .s-name { margin-top: 14px; font: 500 26px var(--display); }
.suspect .s-player { color: var(--fog); font-size: 17px; margin-top: 2px; }
.suspect .s-vote { margin-top: 10px; height: 22px; font: 600 14px var(--body); letter-spacing: 0.3em; text-transform: uppercase; color: rgba(141, 154, 150, 0.6); }
.suspect.voted .s-vote { color: var(--brass); }
.suspect .tally { position: absolute; top: -56px; left: 0; right: 0; text-align: center; font: 700 44px var(--typed); color: var(--candle); letter-spacing: 0.08em; opacity: 0; transition: opacity 0.6s; }
.lineup-scene.revealing .suspect .tally { opacity: 1; }
.lineup-scene.revealing .suspect { filter: brightness(0.3) saturate(0.4); }
.lineup-scene.revealing .suspect.lit { filter: none; }
.lineup-scene.revealing .lineup-wall { filter: brightness(0.35); }
.spot {
  position: absolute; bottom: 0; width: 560px; height: 1080px; margin-left: -280px; z-index: 2; pointer-events: none;
  background: radial-gradient(40% 50% at 50% 58%, rgba(255, 240, 210, 0.32), rgba(255, 240, 210, 0.08) 55%, transparent 72%);
  opacity: 0; transition: left 0.42s cubic-bezier(0.5, 0, 0.5, 1), opacity 0.6s;
}
.spot.on { opacity: 1; }
.suspect .killer-stamp {
  position: absolute; top: 120px; left: 50%; z-index: 5; margin-left: -140px; width: 280px;
  font: 700 54px var(--body); letter-spacing: 0.2em; text-transform: uppercase; text-align: center;
  color: var(--oxblood-ink); border: 6px solid var(--oxblood-ink); padding: 10px 0 6px; background: rgba(241, 237, 227, 0.92);
  transform: rotate(-10deg); opacity: 0;
}
.suspect.caught .killer-stamp { animation: press 0.45s cubic-bezier(0.3, 1.4, 0.5, 1) both; }
@keyframes press { from { opacity: 0; transform: rotate(-10deg) scale(2.4); } to { opacity: 0.94; transform: rotate(-10deg); } }
.lineup-scene .bottom-bar { z-index: 5; }

/* ---------- verdict close-up ---------- */
.verdict-scene { background: url(art/bg-verdict-escaped.webp) center / cover; }
.verdict-scene.win { background-image: url(art/bg-verdict-solved.webp); }
.vd-bust { position: absolute; left: 40px; bottom: 0; width: 780px; height: 975px; animation: vdIn 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes vdIn { from { opacity: 0; transform: translateX(-60px) scale(1.04); } to { opacity: 1; transform: none; } }
.vd-bust .bust { width: 100%; height: 100%; }
.vd-bust { -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%), linear-gradient(0deg, transparent, #000 14%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 16%), linear-gradient(0deg, transparent, #000 14%); mask-composite: intersect; }
.vd-right { position: absolute; left: 860px; top: 100px; width: 950px; }
.vd-title { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 128px; line-height: 1; margin: 18px 0 10px; }
.verdict-scene.win .vd-title { color: var(--solved); }
.verdict-scene.lose .vd-title { color: var(--oxblood-ink); }
.vd-killer { font-size: 28px; color: var(--candle); margin-bottom: 36px; }
.vd-killer b { font-family: var(--display); font-weight: 500; font-size: 36px; }
.vd-confession { position: relative; font-size: 21px; line-height: 1.65; padding: 34px 36px; min-height: 290px; }
.vd-confession p { margin: 0; }
.vd-votes { margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 40px; }
.vd-vote { display: grid; grid-template-columns: 1fr auto; font-size: 20px; color: var(--fog); border-bottom: 1px solid var(--hairline); padding-bottom: 8px; }
.vd-vote b { color: var(--candle); font-weight: 600; }
.vd-vote.right span { color: var(--solved); }
.vd-vote span { color: var(--fog); }
.vd-actions { position: absolute; right: 110px; bottom: 60px; }