@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400 900; font-display: swap; src: url(fonts/playfair-display.woff2) format("woff2"); }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 400 900; font-display: swap; src: url(fonts/playfair-display-italic.woff2) format("woff2"); }
@font-face { font-family: "Special Elite"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/special-elite.woff2) format("woff2"); }
:root {
  --bg: #0b0b0d;
  --wall: #18171a;
  --panel: #141416;
  --panel-2: #1e1d21;
  --ink: #e8e2d4;
  --muted: #8d887d;
  --line: #2e2c30;
  --amber: #e2b052;
  --amber-soft: rgba(226, 176, 82, .16);
  --red: #c4483e;
  --green: #7fae6e;
  --paper: #ece4cf;
  --paper-ink: #2a251e;
  --paper-line: #cfc3a6;
  --pencil: #3f5a9a;
  --wood: #2a1d14;
  --wood-hi: #4a3424;
  --type: "Special Elite", "Courier New", monospace;
  --display: "Playfair Display", Georgia, serif;
  font-family: Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--ink); overflow: hidden; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2 { margin: 0; }

.app { height: 100vh; height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }

/* ---------- top bar ---------- */
.top { display: flex; align-items: center; gap: 16px; padding: 8px 16px; border-bottom: 1px solid var(--line); background: #0e0e10; z-index: 3; }
.brand { display: flex; align-items: baseline; gap: 10px; }
.brand h1 { font-family: var(--display); font-weight: 900; font-size: 1.35rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.case-label { font-family: var(--type); color: var(--muted); font-size: .8rem; }
.meters { display: flex; gap: 18px; margin-left: auto; font-family: var(--type); font-size: .8rem; }
.meter { display: flex; align-items: center; gap: 8px; }
.meter-label { color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.meter-count { font-variant-numeric: tabular-nums; }
.pips { display: flex; gap: 3px; }
.pip { width: 8px; height: 8px; border-radius: 50%; border: 1px solid #4a4640; }
.pip.used { background: var(--amber); border-color: var(--amber); box-shadow: 0 0 6px var(--amber); }
nav { display: flex; gap: 6px; }
.icon-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel-2); font-size: .9rem; }
.icon-btn:hover { border-color: var(--amber); }

/* ---------- stage (the booth) ---------- */
.stage { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; background: var(--wall); }
.scene { position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 45% 70% at 50% 0%, rgba(226,176,82,.14), transparent 70%),
    linear-gradient(#1b1a1d, #111013); }
.blinds { position: absolute; inset: -20%; transform: rotate(-12deg);
  background: repeating-linear-gradient(180deg, rgba(226,176,82,.07) 0 14px, transparent 14px 34px);
  -webkit-mask-image: radial-gradient(ellipse 35% 45% at 78% 40%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 35% 45% at 78% 40%, #000 30%, transparent 75%); pointer-events: none; }
.window { position: absolute; left: 15%; top: 10%; width: min(15%, 140px); aspect-ratio: 3 / 4; border: 4px solid #232126; border-radius: 2px; padding: 0; z-index: 1;
  background: linear-gradient(#24313c, #0d1116); box-shadow: inset 0 0 30px #000; overflow: hidden; transition: box-shadow .2s, border-color .2s; }
.window::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, transparent 48%, #232126 48% 52%, transparent 52%), linear-gradient(transparent 48%, #232126 48% 52%, transparent 52%); }
.flash { position: absolute; inset: 0; z-index: 1; background: #dfe8ff; opacity: 0; }
.room-flash { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: radial-gradient(ellipse at 22% 25%, rgba(200,215,255,.35), transparent 60%); opacity: 0; mix-blend-mode: screen; }
.scene.lightning .flash { animation: flash 1.1s linear; }
.scene.lightning .room-flash { animation: flash 1.1s linear; }
@keyframes flash { 0% { opacity: 0; } 4% { opacity: .9; } 10% { opacity: .1; } 16% { opacity: .7; } 30% { opacity: 0; } 100% { opacity: 0; } }

/* Sergeant Doyle, sitting in the room on the far side of the window */
.officer { position: absolute; left: 1%; bottom: 0; height: 74%; aspect-ratio: 120 / 200; padding: 0; border: 0; background: none; z-index: 1; }
.officer svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 10px rgba(0,0,0,.8)); transition: filter .2s; }
.officer:hover svg, .officer:focus-visible svg { filter: drop-shadow(0 0 10px rgba(226,176,82,.35)); }
.officer:focus-visible { outline: none; }
.officer-tag { position: absolute; left: 50%; top: -4%; transform: translateX(-50%); white-space: nowrap; font-family: var(--type); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); opacity: .8; }
.officer:hover .officer-tag { color: var(--amber); }
.officer .eyes { animation: blink 6s infinite; transform-origin: center 52px; }
.officer .pose.mid, .officer .pose.up { opacity: 0; }
.officer .ember { animation: ember 3s ease-in-out infinite; }
.officer.dragging .pose.rest { animation: pose-rest 5s steps(1, end) both; }
.officer.dragging .pose.mid { animation: pose-mid 5s steps(1, end) both; }
.officer.dragging .pose.up { animation: pose-up 5s steps(1, end) both; }
@keyframes pose-rest { 0% { opacity: 1; } 10% { opacity: 0; } 62% { opacity: 0; } 70% { opacity: 1; } 100% { opacity: 1; } }
@keyframes pose-mid { 0% { opacity: 0; } 10% { opacity: 1; } 18% { opacity: 0; } 54% { opacity: 1; } 62% { opacity: 0; } 100% { opacity: 0; } }
@keyframes pose-up { 0% { opacity: 0; } 18% { opacity: 1; } 54% { opacity: 0; } 100% { opacity: 0; } }
.officer .ember.hot { animation: none; }
.officer.dragging .ember.hot { animation: hot 5s linear both; }
@keyframes hot { 0%, 18% { r: 2; fill: #ff8a3a; } 26%, 48% { r: 3.2; fill: #ffd27a; filter: drop-shadow(0 0 4px #ff9a3a); } 54%, 100% { r: 2; fill: #ff8a3a; } }
.exhale { position: absolute; left: 53%; top: 28%; width: 0; height: 0; }
.exhale span { position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 50%; background: rgba(205,210,215,.3); filter: blur(5px); opacity: 0; }
.officer.dragging .exhale span { animation: exhale 3s ease-out 3.2s both; }
.officer.dragging .exhale span:nth-child(2) { animation-delay: 3.4s; }
.officer.dragging .exhale span:nth-child(3) { animation-delay: 3.6s; }
@keyframes exhale { 0% { transform: translate(0, 0) scale(.4); opacity: 0; } 10% { opacity: .75; } 60% { transform: translate(26px, -30px) scale(2.2); opacity: .35; } 100% { transform: translate(40px, -70px) scale(3.4); opacity: 0; } }
.idle-smoke { position: absolute; left: 58.5%; top: 52%; width: 0; height: 0; }
.idle-smoke span { position: absolute; left: -3px; top: -10px; width: 6px; height: 18px; border-radius: 50%; background: rgba(215,210,200,.18); filter: blur(3px); opacity: 0; animation: smoke 6s ease-out infinite; }
.idle-smoke span:nth-child(2) { animation-delay: 3s; }
.officer.dragging .idle-smoke { opacity: 0; }

/* Rain: seamless tiles scrolled by exactly whole tile heights, so the loop never jumps. */
.rain { position: absolute; inset: -10%; z-index: 1; transform: skewX(-10deg); }
/* Two layers, each slid down by whole tiles with transform (cheap for the GPU). */
.rain::before, .rain::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; will-change: transform; animation: .8s linear infinite; }
.rain::before { top: -240px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='120'%3E%3Cg stroke='%23bcd0e2' stroke-opacity='.4' stroke-width='1'%3E%3Cpath d='M8 6v26M29 66v30M19 100v14'/%3E%3C/g%3E%3C/svg%3E"); background-size: 40px 120px; animation-name: rain-near; }
.rain::after { top: -180px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='180'%3E%3Cg stroke='%23bcd0e2' stroke-opacity='.2' stroke-width='1'%3E%3Cpath d='M14 30v44M44 120v40'/%3E%3C/g%3E%3C/svg%3E"); background-size: 60px 180px; animation-name: rain-far; }
@keyframes rain-near { to { transform: translateY(240px); } }
@keyframes rain-far { to { transform: translateY(180px); } }
.poster { position: absolute; left: calc(15% + min(15%, 140px) + 3%); top: 12%; width: min(10%, 96px); background: #d9cba4; color: #2a1d10; padding: 6px 5px 7px; text-align: center; font-family: var(--type); transform: rotate(3deg); box-shadow: 2px 4px 10px rgba(0,0,0,.6); filter: sepia(.4) brightness(.62); line-height: 1.05; }
.poster::before { content: ""; position: absolute; top: 3px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #6a2a22; }
.poster b { display: block; font-family: var(--display); font-weight: 900; font-size: clamp(.6rem, 1.3vw, 1rem); letter-spacing: .08em; margin-top: 4px; }
.poster .mug { width: 70%; margin: 4px auto; aspect-ratio: 1; background: #2a1d10; border-radius: 50% 50% 10% 10%; -webkit-mask: radial-gradient(circle at 50% 36%, #000 26%, transparent 27%), radial-gradient(ellipse 60% 40% at 50% 100%, #000 99%, transparent 100%); mask: radial-gradient(circle at 50% 36%, #000 26%, transparent 27%), radial-gradient(ellipse 60% 40% at 50% 100%, #000 99%, transparent 100%); }
.poster .alias { font-size: clamp(.45rem, .8vw, .62rem); display: block; }
.poster .reward { font-size: clamp(.45rem, .8vw, .62rem); display: block; margin-top: 3px; border-top: 1px solid #2a1d10; padding-top: 2px; }

/* ashtray + cigar smoke */
.ashtray { position: absolute; left: 22%; bottom: 2%; width: min(14%, 130px); z-index: 2; }
.ashtray svg { width: 100%; display: block; filter: drop-shadow(0 4px 6px rgba(0,0,0,.7)); }
.ashtray .ember { animation: ember 2.4s ease-in-out infinite; }
/* The glow stays put and only the brightness breathes: animating the filter repainted every frame. */
.ember { filter: drop-shadow(0 0 4px #ff8a3a); }
@keyframes ember { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
.smoke { position: absolute; left: 31%; top: 30%; width: 0; height: 0; }
.smoke span { position: absolute; left: -5px; top: -14px; width: 10px; height: 26px; border-radius: 50%; background: rgba(215,210,200,.22); filter: blur(4px); opacity: 0; animation: smoke 6s ease-out infinite; }
.smoke span:nth-child(2) { animation-delay: 1s; }
.smoke span:nth-child(3) { animation-delay: 2s; }
.smoke span:nth-child(4) { animation-delay: 3s; }
.smoke span:nth-child(5) { animation-delay: 4s; }
.smoke span:nth-child(6) { animation-delay: 5s; }
@keyframes smoke {
  0% { transform: translate(0, 0) scale(.4, .6) rotate(0); opacity: 0; }
  10% { opacity: .8; }
  35% { transform: translate(-6px, -45px) scale(.9, 1.2) rotate(-12deg); }
  65% { transform: translate(7px, -95px) scale(1.6, 1.8) rotate(10deg); opacity: .4; }
  100% { transform: translate(-3px, -150px) scale(2.6, 2.4) rotate(-6deg); opacity: 0; } }

/* desk bell + stop-motion hand */
.ringer { position: absolute; right: 4%; bottom: 2%; width: min(16%, 150px); aspect-ratio: 150 / 110; z-index: 2; padding: 0; border: 0; background: none; cursor: pointer; }
.ringer .hand, .ringer .ding { pointer-events: none; }
.ringer:hover .deskbell, .ringer:focus-visible .deskbell { filter: drop-shadow(0 0 10px rgba(226,176,82,.6)); }
.ringer:focus-visible { outline: none; }
.deskbell { position: absolute; left: 6%; bottom: 0; width: 46%; filter: drop-shadow(0 4px 6px rgba(0,0,0,.7)); }
.hand { position: absolute; left: 4%; bottom: 33%; width: 100%; opacity: 0; transform: translate(150%, -60%); }
.ding { position: absolute; left: 0; top: 0; font-family: var(--type); color: var(--amber); font-size: .9rem; opacity: 0; transform: rotate(-12deg); }
.ringer.ringing .hand { animation: press 1.1s steps(1, end) both; }
.ringer.ringing .plunger { animation: plunge 1.1s steps(1, end) both; }
.ringer.ringing .ding { animation: ding 1.1s steps(1, end) both; }
@keyframes press {
  0% { opacity: 1; transform: translate(150%, -60%); }
  12% { transform: translate(95%, -70%) rotate(-4deg); }
  24% { transform: translate(45%, -55%) rotate(-2deg); }
  36% { transform: translate(8%, -28%) rotate(-1deg); }
  46% { transform: translate(0, 0); }
  60% { transform: translate(4%, -26%) rotate(-2deg); }
  72% { transform: translate(50%, -50%) rotate(-4deg); }
  84% { transform: translate(110%, -64%); }
  96% { opacity: 1; transform: translate(150%, -60%); }
  100% { opacity: 0; transform: translate(150%, -60%); } }
@keyframes plunge { 0%, 100% { transform: none; } 46% { transform: translateY(4px); } 60% { transform: none; } }
@keyframes ding { 0%, 100% { opacity: 0; } 46% { opacity: 1; transform: translate(-10%, -30%) rotate(-12deg); } 60% { opacity: .8; transform: translate(-20%, -55%) rotate(-8deg); } 72% { opacity: 0; } }
.lamp { position: absolute; left: 50%; top: 0; width: 0; height: 100%; transform-origin: top center; animation: sway 7s ease-in-out infinite; pointer-events: none; z-index: 2; }
.lamp::before { content: ""; position: absolute; left: -1px; top: 0; width: 2px; height: 8%; background: #333; }
.shade { position: absolute; left: -36px; top: 8%; width: 72px; height: 26px; background: linear-gradient(#2c2a2e, #121114); clip-path: polygon(25% 0, 75% 0, 100% 100%, 0 100%); }
.shade::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: -4px; height: 8px; border-radius: 50%; background: #ffe6a8; box-shadow: 0 0 20px 6px rgba(255,214,140,.6); }
.cone { position: absolute; left: -45vw; width: 90vw; top: calc(8% + 26px); height: 100%; background: linear-gradient(rgba(255,214,140,.22), rgba(255,214,140,.03) 80%);
  clip-path: polygon(46% 0, 54% 0, 80% 100%, 20% 100%); filter: blur(6px); mix-blend-mode: screen; }
@keyframes sway { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }

.chair { position: absolute; left: 50%; bottom: 0; width: min(36%, 260px); height: 58%; transform: translateX(-50%);
  background: linear-gradient(#1a1816, #0c0b0a); border-radius: 18px 18px 0 0; box-shadow: inset 0 2px 0 #2a2622; }
.seat, .chair, .ashtray, .poster, .blinds { pointer-events: none; }
.seat { position: absolute; left: 50%; bottom: 0; height: 82%; aspect-ratio: 200 / 220; transform: translateX(-50%); z-index: 1; }
.seat svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 18px rgba(0,0,0,.8)); }
.seat.enter { animation: enter .7s cubic-bezier(.2,.8,.2,1) both; }
.seat.leave { animation: leave .45s ease-in both; }
@keyframes enter { from { transform: translate(120%, 6%) ; opacity: 0; } 70% { transform: translate(-50%, 4%); opacity: 1; } to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes leave { to { transform: translate(-220%, 4%); opacity: 0; } }
.seat .eyes { animation: blink 5s infinite; transform-origin: center 96px; }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
.seat.guilty svg { filter: drop-shadow(0 0 22px rgba(196,72,62,.55)); }

.talk { position: absolute; z-index: 3; left: calc(50% + min(16vw, 150px)); top: 12%; max-width: min(42%, 380px); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.bubble { position: relative; background: var(--paper); color: var(--paper-ink);
  font-family: var(--type); font-size: .92rem; line-height: 1.35; padding: 10px 14px; border-radius: 4px; box-shadow: 0 6px 24px rgba(0,0,0,.6); }
.bubble::before { content: ""; position: absolute; left: -10px; top: 18px; border: 6px solid transparent; border-right: 10px solid var(--paper); border-left: 0; }
.bubble .asked { display: block; font-size: .75rem; color: #6d6455; margin-bottom: 4px; font-style: italic; }
.bubble .tag { margin-left: 6px; }
.enough-note { position: absolute; z-index: 4; right: 3%; bottom: 34%; display: flex; flex-direction: column; align-items: center; font-family: var(--type); color: #e0574b; border: 3px double #e0574b; padding: 4px 12px 5px; transform: rotate(-7deg); background: rgba(20,6,5,.55); text-transform: uppercase; letter-spacing: .14em; animation: enough-in .5s cubic-bezier(.3,1.6,.5,1) both, enough-glow 2.4s ease-in-out .5s infinite; }
.enough-note b { font-family: var(--display); font-weight: 900; font-size: 1rem; }
.enough-note span { font-size: .62rem; letter-spacing: .2em; }
.enough-note[hidden] { display: none; }
@keyframes enough-in { from { transform: rotate(-7deg) scale(2.2); opacity: 0; } to { transform: rotate(-7deg) scale(1); opacity: 1; } }
@keyframes enough-glow { 0%, 100% { box-shadow: 0 0 0 rgba(224,87,75,0); } 50% { box-shadow: 0 0 18px rgba(224,87,75,.45); } }
.empty-hint { position: absolute; left: 50%; top: 42%; transform: translateX(-50%); z-index: 2; font-family: var(--type); color: var(--muted); text-align: center; font-size: .95rem; width: 80%; }

/* ---------- desk ---------- */
.desk { position: relative; z-index: 2; padding: 10px 16px 12px; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  background: linear-gradient(var(--wood-hi), var(--wood) 14%, #1a120c); border-top: 2px solid #5a4030; box-shadow: 0 -10px 24px rgba(0,0,0,.6); min-height: 64px; }
.plaque { font-family: var(--display); background: linear-gradient(#c9a35a, #8c6b2f); color: #1d150a; padding: 4px 12px; border-radius: 2px; box-shadow: 0 2px 0 #3b2a14, inset 0 1px 0 #f0d79a; text-align: center; line-height: 1.15; white-space: nowrap; }
.plaque b { display: block; font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; }
.plaque span { font-size: .7rem; font-style: italic; }
.questions { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.qcard { font-family: var(--type); font-size: .8rem; text-align: left; background: var(--paper); color: var(--paper-ink); border: 0; border-radius: 2px; padding: 6px 10px;
  box-shadow: 0 2px 0 rgba(0,0,0,.4); transform: rotate(var(--tilt, 0deg)); transition: transform .12s, box-shadow .12s; max-width: 100%; }
.qcard:hover:not([disabled]) { transform: translateY(-2px) rotate(0); box-shadow: 0 6px 12px rgba(0,0,0,.5); }
.qcard[disabled] { opacity: .45; cursor: not-allowed; }
.qcard small { display: block; color: #7a705f; font-size: .68rem; }
.desk-msg { font-family: var(--type); color: var(--muted); font-size: .85rem; }
.desk-actions { display: flex; gap: 6px; align-items: center; }
.btn { font-family: var(--type); padding: 7px 12px; border-radius: 2px; border: 1px solid var(--line); background: var(--panel-2); font-size: .82rem; }
.btn.primary { background: var(--amber); color: #1a1408; border-color: var(--amber); }
.btn.stamp { color: var(--red); border: 2px solid var(--red); background: transparent; text-transform: uppercase; letter-spacing: .1em; transform: rotate(-3deg); font-weight: 700; }
.btn.stamp.solid { background: var(--red); color: #160807; }

/* ---------- dock ---------- */
.dock { display: grid; grid-template-columns: 1fr 1.35fr 1fr; height: clamp(210px, 36vh, 330px); border-top: 1px solid var(--line); background: var(--panel); z-index: 2; }
.dock-tabs { display: none; }
.panel { min-height: 0; min-width: 0; padding: 10px 14px; border-right: 1px solid var(--line); display: flex; flex-direction: column; overflow: hidden; }
.panel:last-child { border-right: 0; }
.panel h2 { font-family: var(--type); font-weight: 400; font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--amber); margin-bottom: 6px; }
.case-file { font-family: var(--type); font-size: .78rem; line-height: 1.4; overflow-y: auto; min-height: 0; padding-right: 4px; }
.case-file p { margin: 0 0 6px; }
.case-file strong { color: var(--amber); font-weight: 400; }
.case-file ul { margin: 0 0 6px; padding-left: 16px; }
.case-file li { margin: 2px 0; }
.tag { display: inline-block; padding: 0 6px; border-radius: 2px; font-size: .72rem; border: 1px solid; font-family: var(--type); }
.tag.honest { border-color: #5d8a52; color: #7fae6e; }
.tag.liar { border-color: #a8483f; color: #d0665c; }
.tag.evasive { border-color: #8a7740; color: #c9a85a; }
.bubble .tag.honest { color: #3c6a30; } .bubble .tag.liar { color: #9a2e24; } .bubble .tag.evasive { color: #7a5f1a; }

.notes { padding: 8px 10px; }
.note-tabs { display: flex; gap: 4px; margin-bottom: 6px; }
.note-tabs button { font-family: var(--type); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--line); background: transparent; color: var(--muted); padding: 3px 10px; border-radius: 2px; }
.note-tabs button.on { color: var(--paper-ink); background: var(--paper); border-color: var(--paper); }
.notebook { flex: 1; min-height: 0; background: var(--paper); color: var(--paper-ink); border-radius: 2px; padding: 6px;
  background-image: repeating-linear-gradient(transparent 0 19px, rgba(63,90,154,.12) 19px 20px); overflow: auto; }
.notebook table { border-collapse: collapse; width: 100%; height: 100%; table-layout: fixed; font-family: var(--type); font-size: .72rem; }
.notebook th, .notebook td { border: 1px solid var(--paper-line); text-align: center; padding: 0; }
.notebook th { padding: 2px; font-weight: 400; font-size: .64rem; line-height: 1.1; hyphens: auto; -webkit-hyphens: auto; }
.notebook th.row-head { text-align: left; padding-left: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 22%; }
.notebook th.crime { color: #8a2d2d; }
.notebook th .short { display: none; }
.notebook .group { border-left: 2px solid var(--paper-ink); }
.notebook td button { width: 100%; height: 100%; min-height: 22px; border: 0; background: transparent; font-size: .85rem; color: var(--pencil); font-family: var(--type); padding: 0; }
.notebook td button.fact { color: var(--paper-ink); background: rgba(120,100,60,.14); cursor: default; }
.notebook td button.fact.no { color: #a39578; }
.notebook .claim { font-size: .6rem; vertical-align: super; }
.log { list-style: none; margin: 0; padding: 0 4px 0 0; overflow-y: auto; flex: 1; min-height: 0; font-family: var(--type); font-size: .76rem; }
.log li { padding: 5px 0; border-bottom: 1px dashed var(--line); }
.log .q { color: var(--muted); }
.log .num { color: var(--amber); margin-right: 4px; }
.log .empty { color: var(--muted); border: 0; }

.suspects { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; min-height: 0; flex: 1; }
.suspect { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 3px; border: 1px solid transparent; }
.suspect.in { border-color: rgba(226,176,82,.4); background: var(--amber-soft); }
.suspect .face { font-size: 1.2rem; filter: grayscale(1) sepia(.35) contrast(1.1); text-align: center; }
.suspect .who { min-width: 0; line-height: 1.15; }
.suspect .name { font-family: var(--display); font-weight: 700; font-size: .95rem; }
.suspect .role { color: var(--muted); font-size: .72rem; font-style: italic; }
.qchips { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; }
.qchip { font-family: var(--type); font-size: .64rem; padding: 0 4px; border: 1px solid #3c3a40; border-radius: 2px; color: var(--ink); white-space: nowrap; }
.qchip .lbl { display: none; }
.qchip.asked { opacity: .35; text-decoration: line-through; }
.qchip.locked { color: var(--muted); border-style: dashed; }
.qchip.gone { display: none; }
.suspect .who { cursor: pointer; }
.suspect .who:hover .name { color: var(--amber); }
.suspect .bonds { display: block; color: var(--muted); font-size: .66rem; font-family: var(--type); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suspect.cleared .name { text-decoration: line-through; text-decoration-color: var(--red); }
.suspect .stampmark { font-family: var(--type); color: var(--red); font-size: .62rem; border: 1px solid var(--red); padding: 0 4px; transform: rotate(-6deg); display: inline-block; margin-left: 4px; }
.bell { width: 38px; height: 34px; border-radius: 4px; border: 1px solid var(--line); background: var(--panel-2); font-size: 1.1rem; line-height: 1; }
.bell:hover:not([disabled]) { border-color: var(--amber); }
.bell.ring { animation: ring .5s; }
.bell[disabled] { opacity: .35; cursor: default; }
@keyframes ring { 20% { transform: rotate(-18deg); } 40% { transform: rotate(14deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(4deg); } }

/* ---------- atmosphere overlays ---------- */
.grain { position: fixed; inset: -50%; pointer-events: none; z-index: 40; opacity: .09; animation: grain .9s steps(4) infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes grain { 0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } }
.vignette { position: fixed; inset: 0; pointer-events: none; z-index: 39; background: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(0,0,0,.55)); }
@media (prefers-reduced-motion: reduce) { .grain, .rain::before, .rain::after, .lamp, .seat .eyes, .smoke span, .officer .pose, .flash, .room-flash { animation: none !important; } .seat.enter, .seat.leave { animation-duration: .01s; } }

/* ---------- modal ---------- */
.sheet { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 50; }
.sheet[hidden] { display: none; }
.sheet-card { position: relative; background: var(--paper); color: var(--paper-ink); border-radius: 2px; padding: 22px; width: 100%; max-width: 500px; max-height: 92vh; overflow-y: auto; font-family: var(--type); font-size: .9rem; box-shadow: 0 20px 60px rgba(0,0,0,.8); }
.sheet-card h3 { font-family: var(--display); font-size: 1.4rem; margin: 0 0 8px; }
.sheet-card ul { padding-left: 18px; }
.sheet-card .btn { background: #d9cfb5; color: var(--paper-ink); border-color: #b9ab88; }
.sheet-card .btn.primary { background: var(--paper-ink); color: var(--paper); border-color: var(--paper-ink); }
.close { position: absolute; top: 6px; right: 10px; background: none; border: 0; font-size: 1.6rem; color: #6d6455; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.muted { color: #6d6455; }
.result-tier { font-family: var(--display); font-size: 2rem; margin: 4px 0; }
.share-preview { white-space: pre-wrap; background: #f6f0e0; border: 1px dashed #b9ab88; padding: 10px; font-size: .85rem; }
.solution { margin-top: 12px; }
.solution table { border-collapse: collapse; width: 100%; }
.solution td, .solution th { border-bottom: 1px solid #cfc3a6; padding: 4px; text-align: left; }
.toggle { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0; }
.toggle input { margin-top: 4px; }

/* ---------- phones ---------- */
@media (max-width: 760px) {
  .top { gap: 8px; padding: 6px 10px; flex-wrap: wrap; }
  .brand h1 { font-size: 1.05rem; }
  .meters { order: 3; width: 100%; margin: 0; justify-content: space-between; font-size: .72rem; }
  nav { margin-left: auto; }
  .icon-btn { width: 28px; height: 28px; font-size: .8rem; }
  .pip { width: 7px; height: 7px; }
  .window { width: 22%; left: 3%; }
  .talk { left: 32%; right: 3%; top: auto; bottom: 3%; max-width: none; flex-direction: column-reverse; gap: 4px; }
  .bubble { font-size: .78rem; padding: 7px 9px; }
  .rule-line { font-size: .6rem; }
  .coach { left: 2%; right: 2%; top: 2%; max-width: none; font-size: .74rem; }
  .bubble::before { display: none; }
  .seat { left: 56%; height: 80%; }
  .chair { left: 56%; width: 44%; }
  .desk { grid-template-columns: 1fr auto; padding: 8px 10px; gap: 6px 8px; }
  .plaque { grid-column: 1; justify-self: start; }
  .desk-actions { grid-column: 2; grid-row: 1; }
  .questions { grid-column: 1 / -1; }
  .qcard { font-size: .74rem; padding: 5px 8px; }
  .dock { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); height: 40vh; height: 40dvh; }
  .dock-tabs { display: flex; border-bottom: 1px solid var(--line); }
  .dock-tabs button { flex: 1; background: transparent; border: 0; padding: 8px 0; font-family: var(--type); font-size: .78rem; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; border-bottom: 2px solid transparent; }
  .dock-tabs button.on { color: var(--amber); border-bottom-color: var(--amber); }
  .panel { border-right: 0; display: none; padding: 8px 10px; }
  .panel.on { display: flex; }
  .panel h2 { display: none; }
  .suspect { padding: 2px 4px; }
  .suspect .bonds { display: none; }
  .qchip .lbl { display: none; }
  .poster .alias { display: none; }
  .window { width: 20%; left: auto; right: 3%; top: 5%; }
  .officer { left: 0; right: auto; height: 52%; }
  .officer-tag { font-size: .5rem; top: -9%; left: 4px; transform: none; }
  .poster { left: 21%; right: auto; top: 6%; width: 12%; padding: 4px 3px; }
  .ashtray { width: 15%; left: 16%; }
  .ringer { width: 26%; right: 2%; }
  .bell { width: 34px; height: 30px; font-size: 1rem; }
  .notebook th.row-head { width: 20%; }
  @keyframes enter { from { transform: translate(140%, 6%); opacity: 0; } 70% { transform: translate(-50%, 4%); opacity: 1; } to { transform: translate(-50%, 0); opacity: 1; } }
}
@media (max-height: 640px) and (min-width: 761px) {
  .dock { height: 40vh; }
  .desk { padding: 6px 12px; }
}
.infolist { padding-left: 18px; }
.infolist li { margin: 6px 0; }
.infolist li.asked { opacity: .55; }
.infolist li.gone { opacity: .45; text-decoration: line-through; }

/* rules reminder under the speech bubble */
.rule-line { font-family: var(--type); font-size: .7rem; color: #b9b2a3; font-style: italic; background: rgba(0,0,0,.45); padding: 3px 8px; border-left: 2px solid var(--amber); transition: opacity .4s; }
.rule-line.fade { opacity: 0; }

/* casual mode: clashing testimony */
.log li.clash { border-left: 3px solid var(--red); padding-left: 6px; }
.log .clash-note { display: block; color: #e0857b; font-size: .7rem; margin-top: 2px; }
.note-tabs .badge { color: var(--red); margin-left: 4px; }

/* tutorial coach */
.coach { position: absolute; z-index: 5; left: 3%; top: 4%; max-width: min(38%, 360px); background: #1d2228; color: var(--ink); border: 1px solid #4a5868; border-radius: 4px; padding: 10px 12px; font-family: var(--type); font-size: .82rem; line-height: 1.4; box-shadow: 0 8px 24px rgba(0,0,0,.6); }
.coach b { color: var(--amber); font-weight: 400; }
.coach .row { margin-top: 8px; }
.coach .btn { font-size: .74rem; padding: 4px 10px; }
.pulse { animation: pulse 1.3s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(226,176,82,.0); } 50% { box-shadow: 0 0 0 4px rgba(226,176,82,.55); } }
@media (max-width: 760px) {
  .coach { left: 2%; right: 2%; top: 2%; max-width: none; font-size: .7rem; padding: 7px 9px; line-height: 1.3; }
  .coach .row { margin-top: 4px; }
}

/* ---------- headline: the one question that matters ---------- */
.headline { flex: 1; text-align: center; font-family: var(--display); font-weight: 700; font-size: clamp(1rem, 1.7vw, 1.45rem); letter-spacing: .03em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.headline em { font-style: italic; color: var(--amber); }
.headline.live { animation: headline 3.2s ease-in-out infinite; }
/* Opacity only: animating the glow itself forced a page layout every frame. */
.headline.live { text-shadow: 0 0 12px rgba(226,176,82,.35); }
@keyframes headline { 0%, 100% { opacity: .72; } 50% { opacity: 1; } }
.meters { margin-left: 0; }

/* Standard / Casual */
.mode { display: flex; gap: 2px; font-family: var(--type); font-size: .74rem; border: 1px solid var(--line); border-radius: 3px; padding: 2px; background: #121114; }
.mode label { display: flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 2px; cursor: pointer; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.mode input { appearance: none; -webkit-appearance: none; width: 10px; height: 10px; margin: 0; border-radius: 50%; border: 1px solid #6a655c; display: inline-block; }
.mode input:checked { background: var(--amber); border-color: var(--amber); box-shadow: 0 0 6px var(--amber); }
.mode label:has(input:checked) { color: var(--ink); background: #222026; }
.mode input:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* Doyle pipes up from the window */
.doyle-says { position: absolute; z-index: 6; left: 2%; top: 3%; max-width: min(34%, 320px); background: #1d2228; color: var(--ink); border: 1px solid #4a5868; border-left: 3px solid var(--amber); border-radius: 3px; padding: 8px 11px; font-family: var(--type); font-size: .8rem; line-height: 1.35; box-shadow: 0 8px 24px rgba(0,0,0,.6); }
.doyle-says b { color: var(--amber); font-weight: 400; }
.doyle-says.pop { animation: pop .35s ease-out both; }
@keyframes pop { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }
.doyle-says[hidden] { display: none; }

/* the guilty moment */
.guilty-stamp { position: absolute; z-index: 5; left: 50%; top: 40%; transform: translate(-50%, -50%) rotate(-12deg); font-family: var(--display); font-weight: 900; font-size: clamp(2.2rem, 6vw, 4.6rem); letter-spacing: .14em; text-transform: uppercase; color: rgba(204,52,40,.92); border: 6px double rgba(204,52,40,.92); padding: 0 .35em; pointer-events: none; mix-blend-mode: screen; text-shadow: 0 0 20px rgba(204,52,40,.4); }
.guilty-stamp[hidden] { display: none; }
.guilty-stamp.slam { animation: slam .45s cubic-bezier(.2,1.4,.4,1) .5s both; }
@keyframes slam { from { transform: translate(-50%, -50%) rotate(-12deg) scale(3); opacity: 0; } to { transform: translate(-50%, -50%) rotate(-12deg) scale(1); opacity: 1; } }
.seat.slump svg { animation: slump 1.2s ease-in .2s both; transform-origin: 50% 100%; }
@keyframes slump { to { transform: translateY(5%) rotate(-4deg) scaleY(.95); filter: drop-shadow(0 0 22px rgba(196,72,62,.55)) brightness(.8); } }
.scene.flicker .cone, .scene.flicker .shade::after { animation: lamp-flicker 1.4s steps(1, end) both; }
@keyframes lamp-flicker { 0% { opacity: 1; } 8% { opacity: .2; } 14% { opacity: 1; } 22% { opacity: .1; } 30% { opacity: .9; } 38% { opacity: .3; } 46%, 100% { opacity: 1; } }

/* ---------- noir case-file dock ---------- */
.dock { background: linear-gradient(#1c140e, #120c08); gap: 8px; padding: 8px; border-top: 2px solid #3a2a1c; }
.panel { position: relative; border: 0; border-radius: 2px; color: var(--paper-ink); box-shadow: 0 6px 16px rgba(0,0,0,.55), inset 0 0 40px rgba(120,90,40,.18);
  background: linear-gradient(175deg, #e3d6b4, #d4c49c); padding: 12px 14px 10px; }
.panel::before { content: ""; position: absolute; top: 0; left: 14px; width: 90px; height: 6px; background: #c9b78a; border-radius: 0 0 3px 3px; opacity: .9; }
.panel h2 { font-family: var(--display); font-weight: 900; font-size: .85rem; letter-spacing: .2em; color: #7d2a20; border-bottom: 1px solid rgba(42,37,30,.25); padding-bottom: 3px; }
.case-file { font-size: .76rem; }
.case-file strong { color: #7d2a20; font-weight: 700; }
.tag.honest { border-color: #3c6a30; color: #2f5a25; } .tag.liar { border-color: #9a2e24; color: #8a251c; } .tag.evasive { border-color: #7a5f1a; color: #6a5014; }
.bubble .tag.honest, .bubble .tag.liar, .bubble .tag.evasive { background: transparent; }
.notes { background: linear-gradient(175deg, #cdbd92, #bfae80); }
.note-tabs button { border-color: rgba(42,37,30,.3); color: #5a4f3c; }
.note-tabs button.on { background: #f3ecda; color: var(--paper-ink); border-color: #f3ecda; }
.notebook { box-shadow: 0 2px 6px rgba(0,0,0,.25); background-color: #f3ecda; }
.log { background: #f3ecda; padding: 4px 8px; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.log li { border-bottom-color: rgba(42,37,30,.2); }
.log .q, .log .empty { color: #6d6455; }
.log .num { color: #7d2a20; }
.log .clash-note { color: #9a2e24; }
.notes.enough::after { content: "Enough evidence"; position: absolute; right: 16px; top: 8px; font-family: var(--display); font-weight: 900; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: #a8281c; border: 2px solid #a8281c; padding: 1px 6px; transform: rotate(-5deg); background: rgba(243,236,218,.8); pointer-events: none; }
.suspect.in { border-color: rgba(125,42,32,.45); background: rgba(125,42,32,.1); }
.suspect .face { filter: grayscale(1) sepia(.5) contrast(1.2) brightness(.8); }
.suspect .role { color: #6d6455; }
.suspect .who:hover .name { color: #7d2a20; }
.qchip { border-color: rgba(42,37,30,.35); color: var(--paper-ink); background: rgba(255,255,255,.25); }
.qchip.locked { color: #7a705f; }
.suspect .stampmark { color: #a8281c; border-color: #a8281c; }
.suspect.cleared .name { text-decoration-color: #a8281c; }
.bell { background: linear-gradient(#3a2a1a, #24180e); border-color: #5a4030; }
.bell:hover:not([disabled]) { border-color: #c9a35a; }

@media (min-width: 761px) {
  .dock { height: clamp(220px, 38vh, 340px); padding: 6px 8px; }
  .panel { padding: 9px 12px 6px; }
  .panel h2 { margin-bottom: 4px; }
  .suspects { gap: 1px; }
  .suspect { padding: 2px 6px; }
  .bell { height: 30px; }
}

/* booth: a touch more sepia and shadow */
.scene { filter: sepia(.18) contrast(1.05); }
.vignette { background: radial-gradient(ellipse at 50% 40%, transparent 50%, rgba(0,0,0,.65)); }
.top { background: linear-gradient(#0e0d0f, #0a0a0b); border-bottom: 1px solid #2a2420; }

/* result screen */
.result-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.mode-stamp { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; color: #2a251e; border: 2px solid #2a251e; padding: 1px 8px; transform: rotate(-4deg); }
.mode-stamp.casual { color: #3f5a9a; border-color: #3f5a9a; }
.file-no { font-size: .78rem; color: #6d6455; }
.par-route { background: #f6f0e0; border-left: 3px solid #7d2a20; padding: 8px 10px; margin: 8px 0; font-size: .82rem; }
.par-route ol { margin: 6px 0 0; padding-left: 20px; }
.stats { display: flex; justify-content: space-between; gap: 6px; margin: 10px 0; text-align: center; }
.stats div { flex: 1; border: 1px solid #cfc3a6; padding: 4px 0; }
.stats b { display: block; font-family: var(--display); font-size: 1.2rem; }
.stats span { font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; color: #6d6455; }
.toggle.slider { align-items: center; }
.toggle.slider input { flex: 1; margin: 0; accent-color: #2a251e; }

@media (max-width: 1180px) and (min-width: 761px) {
  .top { flex-wrap: wrap; row-gap: 4px; }
  .headline { order: 5; flex-basis: 100%; }
}
@media (max-width: 760px) {
  .headline { order: 2; flex-basis: 100%; font-size: 1rem; }
  .mode { order: 4; font-size: .62rem; padding: 1px; }
  .mode label { padding: 2px 5px; gap: 4px; }
  .mode input { width: 8px; height: 8px; }
  .meters { order: 3; width: auto; flex: 1; gap: 10px; justify-content: flex-start; }
  .meter-label { display: none; }
  .dock { padding: 6px; gap: 0; }
  .panel { padding: 8px 10px; }
  .panel::before { display: none; }
  .enough-note { right: 2%; bottom: auto; top: 25%; padding: 2px 6px; z-index: 7; }
  .enough-note b { font-size: .72rem; }
  .enough-note span { font-size: .5rem; }
  .doyle-says { left: 2%; right: 27%; max-width: none; font-size: .7rem; padding: 5px 8px; }
  .meter:last-child .meter-label { display: inline; }
  .dock { padding: 4px 6px 6px; }
  .panel { padding: 6px 8px; }
  .suspects { gap: 0; }
  .suspect { padding: 1px 4px; }
  .qchips { margin-top: 1px; }
}
@media (prefers-reduced-motion: reduce) { .headline.live, .enough-note, .guilty-stamp.slam, .seat.slump svg, .scene.flicker .cone { animation: none !important; } }
@media (max-width: 400px) {
  .pips { display: none; }
  .meter:first-child .meter-label { display: inline; }
}

/* ---------- audit fixes ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* notepad headers: full names when they fit, short ones when any would collide */
.notebook th { overflow: hidden; hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; font-size: .7rem; }
.notebook th .short { display: none; }
.notebook table.abbr th .long { display: none; }
.notebook table.abbr th .short { display: inline; }
/* readable small text */
.qchip { font-size: .72rem; }
.officer-tag { font-size: .7rem; opacity: 1; color: #b9b2a3; text-shadow: 0 1px 3px #000; }
.rule-line { font-size: .74rem; }
.stats span { font-size: .68rem; }
.next-case { margin: 8px 0 0; font-size: .8rem; }
/* case file: a fade and arrow when there's more below */
.case-file { position: relative; }
.panel.story { position: relative; }
.panel.story:has(.case-file.more)::after { content: "more ↓"; position: absolute; left: 0; right: 0; bottom: 0; height: 34px; padding: 14px 14px 0; text-align: right; font-family: var(--type); font-size: .7rem; color: #7d2a20; background: linear-gradient(rgba(212,196,156,0), #d4c49c 70%); pointer-events: none; }
.case-file .bonds { background: rgba(125,42,32,.07); border-left: 2px solid #7d2a20; padding: 2px 6px; }
@media (max-width: 760px) {
  .rule-line { display: none; }
  .officer-tag { font-size: .6rem; }
  .qchip { font-size: .68rem; }
}
@media (max-width: 360px) {
  .meter-label, .meter:first-child .meter-label, .meter:last-child .meter-label { display: none; }
  .meter:first-child .meter-count::before { content: "Q "; color: var(--muted); }
  .meter:last-child .meter-count::before { content: "Charges "; color: var(--muted); }
  .meters { gap: 8px; }
  .mode label { padding: 2px 4px; letter-spacing: .04em; }
  .notebook th { padding: 1px; font-size: .62rem; letter-spacing: -.02em; }
  .notebook th.row-head { width: 18%; }
}
/* short phones: give the booth more room and keep the bubble small so the suspect shows */
@media (max-width: 760px) and (max-height: 700px) {
  .dock { height: 35vh; height: 35dvh; }
  .bubble { font-size: .72rem; padding: 5px 8px; }
  .bubble .asked { display: none; }
  .talk { left: 44%; }
  .qcard { padding: 4px 7px; font-size: .7rem; }
  .qcard small { display: none; }
  .desk { padding: 6px 10px; }
  .plaque { padding: 2px 10px; }
  .plaque b { font-size: .85rem; }
}

/* the desk bell's call list */
.call-list { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 6px; }
.call-list button { width: 100%; display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; text-align: left; padding: 8px 10px; background: #f6f0e0; border: 1px solid #cfc3a6; border-radius: 2px; font-family: var(--type); color: var(--paper-ink); }
.call-list button:hover:not([disabled]) { border-color: #7d2a20; background: #fffaf0; }
.call-list button[disabled] { opacity: .5; cursor: default; }
.call-list .face { font-size: 1.2rem; filter: grayscale(1) sepia(.5); text-align: center; }
.call-list .nm { font-family: var(--display); font-weight: 700; font-size: 1rem; }
.call-list .rl { color: #6d6455; font-style: italic; font-size: .8rem; }
.call-list .st { font-size: .72rem; color: #7d2a20; }
.questions { justify-content: center; }

/* ---------- evidence on the desk ---------- */
.desk { grid-template-columns: auto 1fr auto auto; }
.evidence { display: flex; gap: 6px; align-items: center; }
.evidence[hidden] { display: none; }
.ev-tag { display: flex; align-items: center; gap: 5px; padding: 4px 9px 4px 6px; background: #d9cba4; color: var(--paper-ink); border: 0; border-radius: 2px 10px 10px 2px; font-family: var(--type); font-size: .74rem; box-shadow: 0 2px 0 rgba(0,0,0,.4); position: relative; transform: rotate(-2deg); }
.ev-tag:nth-child(2) { transform: rotate(2deg); }
.ev-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--wood); margin-right: 2px; }
.ev-tag:hover { background: #eadfbe; }
.ev-tag .ev-emoji { filter: sepia(.4); }
.ev-tag.done { opacity: .7; }
.ev-tag.done .ev-lbl::after { content: " ✓"; color: #3c6a30; }

.ev-view { position: fixed; inset: 0; z-index: 48; background: rgba(5,5,7,.72); display: flex; align-items: center; justify-content: center; padding: 10px; }
.ev-view[hidden] { display: none; }
.ev-panel { position: relative; width: min(520px, 100%); max-height: 100%; overflow: auto; background: var(--paper); color: var(--paper-ink); border-radius: 2px; padding: 14px 16px 12px; font-family: var(--type); box-shadow: 0 16px 50px rgba(0,0,0,.8); }
.ev-panel h3 { font-family: var(--display); margin: 0 0 6px; font-size: 1.15rem; }
.ev-stage { position: relative; height: 170px; display: flex; align-items: center; justify-content: center; perspective: 700px; background: radial-gradient(ellipse at center, #efe6cf, #d6c79f); border: 1px solid #cfc3a6; overflow: hidden; }
.ev-note { min-height: 2.6em; margin: 8px 0 6px; font-size: .86rem; }
.ev-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.ev-tools .btn { flex: 1; min-width: 110px; }
.ev-cost { font-size: .72rem; margin: 6px 0 0; }
.ev-card { position: relative; width: 210px; height: 140px; transform-style: preserve-3d; transition: transform .6s; }
.ev-card .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: 4px; }
.ev-card .back { transform: rotateY(180deg); background: #b9a77c; box-shadow: inset 0 0 20px rgba(0,0,0,.3); }
.ev-card.personal .front { background: #c8b78d; box-shadow: inset 0 0 20px rgba(0,0,0,.25); }
.ev-card.flipped { transform: rotateY(180deg); }
.ev-card .obj { font-size: 3.6rem; filter: sepia(.5) drop-shadow(0 4px 4px rgba(0,0,0,.4)); }
.ev-card .obj.dim { font-size: 2rem; opacity: .35; }
.ev-card .cap { font-size: .72rem; color: #5a4f3c; }
.ev-card .engr { font-size: .9rem; text-align: center; color: #3a2c18; text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.ev-card .engr b { font-family: var(--display); font-size: 1.3rem; }
.ev-card.stub .front { background: #e8d9a8; border: 2px dashed #8a6b2f; font-size: .72rem; color: #4a3820; }
.ev-card.stub .big { font-family: var(--display); font-weight: 900; font-size: 1.15rem; }
.ev-card.stub .serial { font-size: .6rem; letter-spacing: .2em; }
.ev-card .verdict { position: absolute; transform: rotate(-12deg); font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: .12em; font-size: 1.3rem; border: 3px double; padding: 0 8px; background: rgba(232,217,168,.7); }
.ev-card .verdict.ok { color: #2f5a25; } .ev-card .verdict.bad { color: #a8281c; }
.ev-card.photo .front { background: #f4efe2; padding: 8px 8px 22px; box-shadow: 0 4px 10px rgba(0,0,0,.35); }
.ev-card .snap { position: relative; width: 100%; flex: 1; background: linear-gradient(#6a665e, #3a3833); filter: blur(.6px) sepia(.4); overflow: hidden; }
.ev-card .sil { position: absolute; left: 50%; bottom: -10%; width: 34%; height: 80%; transform: translateX(-50%); background: #1b1a18; border-radius: 50% 50% 10% 10% / 40% 40% 10% 10%; }
.ev-card .sil::before { content: ""; position: absolute; left: 50%; top: -38%; width: 60%; aspect-ratio: 1; transform: translateX(-50%); background: #1b1a18; border-radius: 50%; }
.ev-card .who-tag { position: absolute; left: 6px; bottom: 6px; background: rgba(244,239,226,.9); color: #2a251e; font-size: .78rem; padding: 0 6px; filter: none; }
.ev-card.spin { animation: ev-spin .9s ease-in-out; }
.ev-card.zoom { animation: ev-zoom 1s ease-in-out; }
.ev-card.test { animation: ev-test 1.1s ease-in-out; }
@keyframes ev-spin { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }
@keyframes ev-zoom { 0%, 100% { transform: scale(1); } 45%, 60% { transform: scale(1.7); } }
@keyframes ev-test { 0%, 100% { filter: none; } 30% { filter: hue-rotate(90deg) saturate(2.4) brightness(1.1); } 60% { filter: hue-rotate(200deg) saturate(1.8); } }
.lens { position: absolute; width: 110px; height: 110px; border-radius: 50%; border: 5px solid #3a2c18; box-shadow: 0 0 0 3px #c9a35a, inset 0 0 30px rgba(255,255,255,.4); opacity: 0; pointer-events: none; }
.lens.on { animation: lens 1s ease-in-out; }
@keyframes lens { 0% { opacity: 0; transform: translate(-60px, 30px) scale(.6); } 40%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(50px, -20px); } }
.reveal { background: #f6f0e0; border-left: 3px solid #2a251e; padding: 8px 10px; margin: 8px 0; font-size: .82rem; }
.reveal p { margin: 4px 0; }
.reveal ul { margin: 4px 0; padding-left: 18px; }
.linkish { background: none; border: 0; padding: 0; color: #7d2a20; text-decoration: underline; font: inherit; }

/* name and profession above the seated suspect */
.seat-label { position: absolute; z-index: 2; left: 50%; top: 25%; transform: translateX(-50%); text-align: center; font-family: var(--type); color: var(--ink); background: rgba(10,9,8,.55); border: 1px solid rgba(226,176,82,.35); padding: 2px 10px 3px; line-height: 1.15; pointer-events: none; white-space: nowrap; }
.seat-label[hidden] { display: none; }
.seat-label b { display: block; font-family: var(--display); font-weight: 900; letter-spacing: .14em; text-transform: uppercase; font-size: .9rem; color: var(--amber); }
.seat-label span { font-size: .7rem; font-style: italic; color: #cfc6b4; }

/* small pop-up menus */
.popover { position: fixed; z-index: 45; width: max-content; max-width: min(320px, calc(100vw - 16px)); background: var(--paper); color: var(--paper-ink); border-radius: 3px; padding: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.7); font-family: var(--type); display: flex; flex-direction: column; gap: 4px; }
.popover[hidden] { display: none; }
.pop-title { font-family: var(--display); font-weight: 700; font-size: .95rem; padding: 0 4px 4px; border-bottom: 1px solid #cfc3a6; }
.popover > button { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: center; text-align: left; background: #f6f0e0; border: 1px solid #cfc3a6; border-radius: 2px; padding: 6px 8px; font-family: var(--type); color: var(--paper-ink); font-size: .85rem; }
.popover > button:hover:not([disabled]), .popover > button:focus-visible { border-color: #7d2a20; background: #fffaf0; outline: none; }
.popover > button[disabled] { opacity: .5; cursor: default; }
.popover .face { filter: grayscale(1) sepia(.5); text-align: center; }
.popover .nm { font-family: var(--display); font-weight: 700; }
.popover .st { font-size: .7rem; color: #7d2a20; }
.pop-qs { list-style: none; margin: 0; padding: 0 4px; font-size: .8rem; }
.pop-qs li { margin: 4px 0; }
.pop-qs li.asked { opacity: .55; } .pop-qs li.gone { opacity: .45; text-decoration: line-through; }
.pop-qs i, .pop-qs small { color: #6d6455; }
.pop-qs small { display: block; font-size: .7rem; }
.popover > .pop-ring { display: block; text-align: center; background: var(--paper-ink); color: var(--paper); border-color: var(--paper-ink); }
.popover > .pop-ring:hover { background: #3a332a; color: var(--paper); }
.pop-msg { margin: 2px 4px; font-size: .82rem; }

/* archive */
.archive { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 4px; }
.archive a { display: grid; grid-template-columns: 48px 1fr auto; gap: 8px; padding: 6px 8px; background: #f6f0e0; border: 1px solid #cfc3a6; color: var(--paper-ink); text-decoration: none; font-size: .84rem; }
.archive a:hover { border-color: #7d2a20; }
.archive a.here { border-color: #2a251e; border-width: 2px; }
.archive .no { font-family: var(--display); font-weight: 900; }
.archive .day { color: #6d6455; }

@media (max-width: 760px) {
  .desk { grid-template-columns: 1fr auto auto; }
  .evidence { grid-column: 2; grid-row: 1; }
  .desk-actions { grid-column: 3; }
  .ev-tag .ev-lbl { display: none; }
  .ev-tag { padding: 4px 7px 4px 5px; font-size: .9rem; }
  .seat-label { left: 56%; top: 20%; padding: 1px 7px 2px; }
  .seat-label b { font-size: .74rem; }
  .seat-label span { font-size: .62rem; }
  .ev-stage { height: 130px; }
  .ev-card { width: 180px; height: 116px; }
  .ev-card .obj { font-size: 2.8rem; }
  .ev-panel { padding: 10px 12px; }
  .ev-panel h3 { font-size: 1rem; }
  .ev-note { font-size: .78rem; margin: 6px 0 4px; }
  .ev-tools .btn { min-width: 0; padding: 6px 6px; font-size: .74rem; }
}
@media (min-width: 761px) {
  .plaque { grid-column: 1; } .questions { grid-column: 2; } .evidence { grid-column: 3; } .desk-actions { grid-column: 4; }
}
.ev-tools .btn { background: #d9cfb5; color: var(--paper-ink); border-color: #b9ab88; }
.ev-tools .btn:hover { background: var(--paper-ink); color: var(--paper); }
@media (max-width: 760px) {
  .case-label { font-size: .7rem; white-space: nowrap; }
  nav { gap: 4px; }
  #btn-sound { display: none; }
}
@media (max-width: 400px) {
  .cl-word, .cl-arch { display: none; }
  .brand { gap: 6px; }
  .case-label { font-size: .64rem; }
}

.ev-cost-chip { margin-left: 3px; padding: 0 5px; border-radius: 8px; background: #a8281c; color: #f4ead2; font-size: .62rem; font-weight: 700; letter-spacing: .04em; line-height: 1.5; }
.ev-tag.paid:not(.done) { box-shadow: 0 2px 0 rgba(0,0,0,.4), inset 0 0 0 1px #8a6b2f; }
.ev-pay { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 2px 0 8px; padding: 8px 10px; border: 2px dashed #a8281c; background: rgba(168,40,28,.07); }
.ev-pay .btn { flex: 1 1 auto; background: #a8281c; color: #f4ead2; border-color: #7d1d14; font-weight: 700; }
.ev-pay .btn:hover:not([disabled]) { background: #7d1d14; color: #fff; }
.ev-pay .btn[disabled] { opacity: .5; cursor: not-allowed; }
.ev-left { font-size: .78rem; font-weight: 700; color: #a8281c; white-space: nowrap; }
.ev-tools.locked { opacity: .4; filter: grayscale(1); pointer-events: none; }
.ev-tools.locked .btn { display: inline-flex; justify-content: center; align-items: center; }

/* Phones held sideways: the booth needs portrait height, so ask for it. */
.rotate-note { display: none; }
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .app, .sheet, .popover, .ev-view { visibility: hidden; }
  .rotate-note { display: flex; position: fixed; inset: 0; z-index: 100; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; background: #0b0b0d; color: #e9dfc8; font-family: var(--type); }
  .rotate-note b { font-family: var(--display); font-size: 1.5rem; color: #e2b052; }
  .rotate-note span { max-width: 32em; opacity: .8; }
  .rotate-phone { width: 34px; height: 56px; border: 3px solid #e2b052; border-radius: 7px; animation: rotate-phone 2.4s ease-in-out infinite; opacity: 1 !important; }
}
@keyframes rotate-phone { 0%, 25% { transform: rotate(90deg); } 55%, 100% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) { .rotate-phone { animation: none; } }

/* ---------- small phones (second audit) ---------- */
@media (max-width: 760px) {
  /* The seat name label already names whoever is in the chair. */
  .plaque { display: none !important; }
  .bubble { max-width: 100%; overflow-wrap: anywhere; }
}
@media (max-width: 400px) {
  /* Keep the speech bubble clear of the desk bell. */
  .ringer { width: 21%; right: 1%; }
  .talk { left: 30%; right: 23%; }
  .btn.stamp { padding: 5px 8px; letter-spacing: .06em; font-size: .74rem; }
  .desk-actions .btn { padding: 5px 8px; font-size: .74rem; }
  .desk { padding-left: 8px; padding-right: 8px; }
}
@media (max-width: 760px) and (max-height: 700px) {
  /* One line per suspect, so all five fit without scrolling. */
  .suspects { gap: 2px; }
  .suspect { grid-template-columns: 22px 1fr auto; gap: 6px; padding: 1px 4px; }
  .suspect .role { display: none; }
  .suspect .who { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
  .suspect .name { font-size: .88rem; white-space: nowrap; }
  .suspect .qchips { margin: 0; flex-wrap: nowrap; overflow: hidden; min-width: 0; }
  .suspect .face { font-size: 1rem; }
  .bell { height: 28px; }
  .dock-tabs button { padding: 6px 0; }
  .notebook td button { min-height: 17px; font-size: .78rem; }
  .notebook { padding: 4px; }
}
@media (max-width: 760px) and (max-height: 600px) {
  .bell { height: 24px; width: 32px; font-size: .85rem; }
  .suspects { gap: 1px; }
  .suspect .name { font-size: .82rem; }
  .notebook td button { min-height: 15px; }
  .note-tabs button { padding-top: 1px; padding-bottom: 1px; }
  .qchip { font-size: .62rem; }
}

/* notepad: when even the short column names don't fit */
.notebook table.tight th { font-size: .56rem; letter-spacing: -.03em; padding: 1px 0; }
.notebook table.tight th.row-head { width: 17%; }
/* phones: the empty-chair hint sits clear of Sgt. Doyle's label */
@media (max-width: 760px) {
  .empty-hint { left: 62%; width: 60%; top: 56%; font-size: .82rem; }
}
@media (max-width: 360px) {
  .cl-day { display: none; }
}