/* Alibi (design.md): night ink, brass, case-file paper and wax seals. Things you can
   hold, not boxes: clues are polaroids and typed slips, the map is drawn on paper, a lock is a
   lock, the accusation is sealed in wax. Type: Big Shoulders Display for names and buttons,
   Special Elite for typed case notes, Newsreader for reading, the phone's own font for small
   controls; Noto Serif SC carries the Chinese in all of them.
   Order: base, buttons and controls, pictures, pages; the shelf and record; players, case file and
   round card; the house (HUD, cards, locks); sheets; notebook, board and map; sharing; the lineup;
   the end; online rooms; moments; then phone sideways, tablets and computers. */
:root {
  --night: #0d1015;
  --night2: #0a0c10;
  --panel: #151a21;
  --panel2: #1c222b;
  --rule: #2a313b;
  --text: #ebe5d8;
  --text2: #a69e8e;
  --text3: #70695d;
  --brass: #c9a24a;
  --brass-hi: #e8c97d;
  --brass-lo: #8a6a2c;
  --brass-dim: rgba(201, 162, 74, .38);
  --wax: #a3291f;
  --wax-hi: #cf4a3c;
  --moon: #93acdf;
  --paper: #efe4cb;
  --paper2: #e2d3b2;
  --photo: #f4efe3;
  --ink: #2a2117;
  --ink2: #6b5a40;
  --ink-blue: #1f3f72;
  --ok: #8fc07a;
  --bad: #e0705f;
  --brass-grad: linear-gradient(#f0d48e, #c99c44 58%, #b5872f);
  --wax-grad: radial-gradient(circle at 34% 30%, #d9604f, #a3291f 55%, #6e150f);
  --f-display: 'Big Shoulders Display', 'Arial Narrow', 'Noto Serif SC', 'Songti SC', sans-serif;
  --f-type: 'Special Elite', 'Courier New', 'Noto Serif SC', 'Songti SC', monospace;
  --f-body: 'Newsreader', Georgia, 'Noto Serif SC', 'Songti SC', serif;
  --f-ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', system-ui, sans-serif;
  --f-zh: 'Noto Serif SC', 'Songti SC', 'STSong', serif;
  --fs: 1; /* reading text grows with Settings > Bigger text */
  --side: 20px;
  --st: env(safe-area-inset-top, 0px);
  --sb: env(safe-area-inset-bottom, 0px);
  --sl: env(safe-area-inset-left, 0px);
  --sr: env(safe-area-inset-right, 0px);
  --mini-w: 136px; /* the house's little map, top right (js/fp.js) */
  color-scheme: dark;
}
html.text-lg { --fs: 1.18; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; background: var(--night); overscroll-behavior-y: none; overflow-x: clip; } /* no pull-to-refresh mid-game */
body { color: var(--text); font: 15px/1.45 var(--f-ui); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
#app { max-width: 560px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
::selection { background: var(--brass); color: var(--ink); }
/* no scrollbars anywhere (user, 2026-10-21): everything still scrolls by touch, wheel and keys */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { display: none; width: 0; height: 0; }

h1, h2, h3, h4 { margin: 0; font-family: var(--f-display); font-weight: 800; text-transform: uppercase; letter-spacing: .01em; line-height: .95; text-wrap: balance; color: var(--text); }
h1 { font-size: 34px; font-weight: 900; }
h2 { font-size: 26px; }
h3 { font-size: 20px; }
h4 { font-size: 17px; }
:lang(zh) :is(h1, h2, h3, h4) { line-height: 1.2; letter-spacing: .04em; }
p { margin: 0; }
b { font-weight: 650; }
.large-title { font-size: 40px; line-height: .9; margin: 6px 0 8px; }
.subtitle { font: calc(16px * var(--fs))/1.45 var(--f-body); color: var(--text2); }
.eyebrow { font: 700 12px/1.25 var(--f-display); letter-spacing: .18em; text-transform: uppercase; color: var(--brass); margin: 0; }
.muted { color: var(--text2); font-size: 14px; }
.center { text-align: center; }
.good { color: var(--ok); }
.bad { color: var(--bad); }
.section-title { font-size: 20px; margin: 26px 0 12px; display: flex; align-items: baseline; gap: 10px; }
.section-title small, .tabpage h3 small { font: 600 13px var(--f-ui); color: var(--text3); letter-spacing: 0; text-transform: none; }
.empty { margin: 0; font: italic calc(15px * var(--fs))/1.45 var(--f-body); color: var(--text2); padding: 16px 14px; border: 1px dashed var(--rule); border-radius: 10px; text-align: center; }
.note-line { text-align: center; font: italic calc(16px * var(--fs))/1.45 var(--f-body); margin: 12px 0; }
.ico { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }
.tok-art { width: 84%; height: 84%; display: block; }
.emblem { display: block; }
.desk-only { display: none; }

/* ---------- buttons: brass plates, ghost frames, a wax seal to accuse ---------- */
.btn {
  appearance: none; border: 0; border-radius: 12px; min-height: 50px; padding: 0 20px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; text-align: center;
  font: 800 18px/1.05 var(--f-display); letter-spacing: .07em; text-transform: uppercase; color: var(--text);
  background: rgba(20, 24, 31, .72); box-shadow: inset 0 0 0 1.5px var(--brass-dim), 0 3px 0 rgba(0, 0, 0, .55);
  transition: transform .08s, box-shadow .08s, filter .15s;
}
:lang(zh) .btn { letter-spacing: .08em; font-weight: 900; }
.btn .ico { width: 20px; height: 20px; }
.btn:active:not(:disabled) { transform: translateY(2px); }
.btn:disabled { opacity: .4; cursor: default; }
.btn.primary { color: #20180b; background: var(--brass-grad); box-shadow: inset 0 1px 0 rgba(255, 250, 230, .7), inset 0 -2px 0 rgba(90, 60, 10, .35), 0 4px 0 #6d4f1c, 0 10px 22px rgba(0, 0, 0, .45); }
.btn.primary:active:not(:disabled) { box-shadow: inset 0 1px 0 rgba(255, 250, 230, .6), 0 2px 0 #6d4f1c, 0 6px 14px rgba(0, 0, 0, .4); }
.btn.primary:disabled { box-shadow: inset 0 1px 0 rgba(255, 250, 230, .5); }
.btn.ghost { min-height: 46px; font-size: 16px; }
.btn.wax { color: #fbe9dc; background: radial-gradient(120% 140% at 30% 20%, #d4594a, #a3291f 55%, #6e150f); box-shadow: inset 0 1px 0 rgba(255, 200, 180, .45), 0 4px 0 #4a0e09, 0 10px 22px rgba(0, 0, 0, .45); }
.btn.dark { color: var(--ink); background: var(--paper); box-shadow: 0 3px 0 #8d7c58; }
.btn.link { min-height: 40px; background: none; box-shadow: none; padding: 0 10px; font: 600 14.5px var(--f-ui); letter-spacing: 0; text-transform: none; color: var(--text2); text-decoration: underline; text-decoration-color: var(--brass-dim); text-underline-offset: 3px; }
.btn.danger { color: var(--bad); }
.btn.sm { min-height: 36px; padding: 0 12px; font-size: 14px; border-radius: 10px; white-space: nowrap; }
.btn.sm .ico { width: 16px; height: 16px; }
.btn.wide { width: 100%; }
.row { display: flex; gap: 10px; margin-top: 14px; }
.row .btn { flex: 1; min-width: 0; }
.icon-btn { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 0; padding: 0; cursor: pointer; display: grid; place-items: center; color: var(--brass-hi); background: rgba(12, 15, 20, .6); box-shadow: inset 0 0 0 1.5px var(--brass-dim); }
.icon-btn .ico { width: 22px; height: 22px; }
.icon-btn:disabled { opacity: .3; cursor: default; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: 3px; }

/* ---------- small controls ---------- */
label { display: block; font: 700 11px/1.3 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--brass); }
input { display: block; width: 100%; border: 0; padding: 2px 0 0; background: transparent; color: var(--text); font: 18px var(--f-body); outline: none; }
input::placeholder { color: var(--text3); }
.group { background: var(--panel); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--rule); overflow: hidden; }
.field { display: flex; gap: 12px; align-items: center; padding: 12px 14px; }
.field + .field { border-top: 1px solid var(--rule); }
.field > div { flex: 1; min-width: 0; }
.field .tool { color: var(--brass-hi); }
.field .tool .ico { width: 22px; height: 22px; }
.field.empty { opacity: .6; }
.av, .tok { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: #1b1712; box-shadow: inset 0 0 0 1.5px var(--brass-dim); }
.av.xl { width: 104px; height: 104px; box-shadow: 0 0 0 2px var(--brass), 0 0 0 7px rgba(201, 162, 74, .12), 0 12px 30px rgba(0, 0, 0, .5); }
.av.sm, .tok { width: 26px; height: 26px; }
.av.ghost { color: var(--text3); }
.av.ghost .ico { width: 55%; height: 55%; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; border-radius: 12px; background: var(--night2); box-shadow: inset 0 0 0 1px var(--rule); }
.seg button { border: 0; background: none; color: var(--text2); min-height: 40px; padding: 0 6px; border-radius: 9px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 800 14px/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.seg button .ico { width: 18px; height: 18px; }
.seg button.on { background: var(--panel2); color: var(--brass-hi); box-shadow: inset 0 0 0 1.5px var(--brass-dim); }
.seg.mode { margin: 0 0 14px; }
.seg.mode button { min-height: 50px; font-size: 16px; }
.seg3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: var(--night2); border-radius: 12px; padding: 4px; box-shadow: inset 0 0 0 1px var(--rule); }
.seg3 button { border: 0; background: none; color: var(--text2); border-radius: 9px; padding: 8px 4px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; font-family: var(--f-ui); }
.seg3 b { font: 800 17px var(--f-display); color: var(--text); }
.seg3 small { font-size: 11px; }
.seg3 button.on { background: var(--panel2); box-shadow: inset 0 0 0 1.5px var(--brass); }
.seg3 button.on b { color: var(--brass-hi); }
.settings { background: var(--panel); border-radius: 14px; padding: 2px 14px; box-shadow: inset 0 0 0 1px var(--rule); }
.set-row { padding: 12px 0; display: grid; gap: 10px; }
.set-row + .set-row { border-top: 1px solid var(--rule); }
.set-name { font: 650 15px var(--f-ui); }
.stepper-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.stepper-row .set-name { display: grid; gap: 2px; }
.stepper-row .set-name small, .set-reset { font: 500 12px var(--f-ui); color: var(--text2); }
.set-reset { justify-self: start; background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; text-align: left; }
.stepper { display: flex; align-items: center; background: var(--night2); border-radius: 12px; padding: 4px; box-shadow: inset 0 0 0 1px var(--rule); flex: none; }
.stepper b { min-width: 78px; text-align: center; font: 800 18px var(--f-display); letter-spacing: .03em; color: var(--brass-hi); font-variant-numeric: tabular-nums; }
.stepper .step { width: 40px; height: 40px; border: 0; border-radius: 9px; background: var(--panel2); color: var(--text); cursor: pointer; display: grid; place-items: center; padding: 0; }
.stepper .step .ico { width: 18px; height: 18px; }
.stepper .step:disabled { opacity: .3; cursor: default; }
.stepper.sm b { min-width: 48px; font-size: 16px; }
.stepper.sm .step { width: 32px; height: 32px; }
.list { list-style: none; padding: 0; margin: 0; }
.list li { display: flex; gap: 14px; align-items: center; padding: 12px 0; }
.list li + li { border-top: 1px solid var(--rule); }
.list .ic { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; color: var(--brass-hi); background: var(--panel2); box-shadow: inset 0 0 0 1px var(--brass-dim); }
.list .ic .ico { width: 20px; height: 20px; }
.list .tx { flex: 1; min-width: 0; }
.list .tx b { display: block; font: 800 17px/1.1 var(--f-display); letter-spacing: .04em; text-transform: uppercase; }
.list .tx small { display: block; color: var(--text2); font: calc(15px * var(--fs))/1.4 var(--f-body); margin-top: 2px; }
.list.tight li { padding: 8px 0; }
.list.tight .ic { width: 32px; height: 32px; }
.list.tight .tx b { font: 800 18px var(--f-display); color: var(--brass-hi); }
.list.tight .tx small { font: 13px var(--f-ui); }

/* ---------- pictures: suspects' faces and evidence polaroids (js/studio.js) ---------- */
.face { display: inline-grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: radial-gradient(circle at 50% 38%, #4a5262, #1d2027 72%); box-shadow: 0 0 0 1.5px var(--brass-dim); color: var(--text3); }
.face.sm { width: 40px; height: 40px; }
.face.md { width: 52px; height: 52px; }
.face.lg { width: 96px; height: 96px; }
.face.ph, .face.lu { width: 100%; height: auto; aspect-ratio: 1; border-radius: 0; box-shadow: none; }
.face.lu { background: none; }
.face.none .ico { width: 50%; height: 50%; }
.pol { position: relative; display: block; margin: 0; background: var(--photo); padding: 8px 8px 30px; box-shadow: 0 8px 18px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(0, 0, 0, .06); transform: rotate(var(--r, 0deg)); }
.pol .ph { display: grid; place-items: center; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: #22262d; color: rgba(255, 255, 255, .3); }
.pol .ph.face-ph, .pol .face.ph { background: radial-gradient(circle at 50% 40%, #4a5262, #1d2027 75%); }
.pol .ph .ico { width: 40%; height: 40%; }
.pol figcaption { position: absolute; left: 6px; right: 6px; bottom: 5px; font: 13px/1.6 var(--f-type); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.pol.sm { width: 92px; flex: none; padding: 5px 5px 20px; }
.pol.sm figcaption { bottom: 2px; font-size: 11px; }
.pol.xs { width: 56px; flex: none; padding: 3px 3px 6px; }
.thumb { width: 40px; height: 40px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 4px; background: #22262d; box-shadow: 0 0 0 2px var(--photo); color: rgba(255, 255, 255, .35); }
.thumb .ph { display: grid; place-items: center; width: 100%; height: 100%; object-fit: cover; }
.thumb .ph.face-ph { background: radial-gradient(circle at 50% 40%, #4a5262, #1d2027 75%); }
.thumb .ico { width: 60%; height: 60%; }
.thumb.tok { background: #1b1712; box-shadow: inset 0 0 0 1.5px var(--brass-dim); border-radius: 50%; }
.stamp { position: absolute; z-index: 2; font: 20px/1 var(--f-type); letter-spacing: .12em; color: var(--wax-hi); border: 3px solid currentColor; border-radius: 6px; padding: 5px 10px 3px; transform: rotate(var(--sr2, -10deg)); text-transform: uppercase; white-space: nowrap; pointer-events: none; text-shadow: 0 0 1px rgba(207, 74, 60, .6); }
:lang(zh) .stamp { letter-spacing: .3em; font-family: var(--f-zh); font-weight: 900; }
.seal { width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fbe9dc; background: var(--wax-grad); box-shadow: 0 0 0 3px rgba(163, 41, 31, .5), 0 3px 6px rgba(0, 0, 0, .5), inset 0 0 0 4px rgba(255, 255, 255, .08); }
.seal .ico { width: 22px; height: 22px; }
.seal.brass { color: #2a1c08; background: radial-gradient(circle at 35% 30%, #f3d991, #b98c35 60%, #7a5a1e); box-shadow: 0 0 0 3px rgba(201, 162, 74, .4), 0 3px 6px rgba(0, 0, 0, .5), inset 0 0 0 2px rgba(255, 245, 210, .5); }
.seal.off { background: none; box-shadow: inset 0 0 0 2px var(--rule); color: var(--text3); }
.medal { position: relative; display: inline-grid; place-items: center; width: 44px; height: 50px; flex: none; }
.medal svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.medal .rib { fill: var(--wax); }
.medal .disc { fill: var(--brass); }
.medal .rim { fill: none; stroke: rgba(255, 245, 210, .55); stroke-width: 1.4; }
.medal > .ico { position: absolute; left: 50%; top: 62%; width: 17px; height: 17px; transform: translate(-50%, -50%); color: #2a1c08; }

/* ---------- page shells ---------- */
.page { padding: 0 var(--side) calc(28px + var(--sb)); display: flex; flex-direction: column; flex: 1; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: calc(10px + var(--st)) max(var(--side), var(--sr)) 6px max(var(--side), var(--sl)); }
.topbar .end { display: flex; gap: 8px; margin-left: auto; }
.page > .topbar { padding-left: 0; padding-right: 0; padding-bottom: 10px; }
.sticky-cta { position: sticky; bottom: 0; z-index: 3; display: grid; gap: 10px; margin-top: auto; padding: 20px 0 calc(14px + var(--sb)); background: linear-gradient(rgba(13, 16, 21, 0), var(--night) 32%); }
.sticky-cta.row-cta { grid-template-columns: 1fr 1fr; }
.sticky-cta > p { margin: 0; }
.cols, .col-main, .col-side { display: contents; }
.center-page { flex: 1; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; padding: 60px var(--side) calc(24px + var(--sb)); position: relative; }
.center-page > .topbar { position: absolute; top: 0; left: 0; right: 0; }
.center-page h1 { font-size: 38px; }
.center-page .btn.wide { max-width: 380px; }
.handoff .av.xl { margin-bottom: 6px; }

/* =====================================================================================
   THE SHELF: the case posters you swipe through, your rank, Play (js/shelf.js)
   ===================================================================================== */
.shelf { --pw: min(64vw, 290px, calc((100dvh - 420px) * .705)); position: relative; flex: 1; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; overflow: hidden; padding-bottom: calc(70px + var(--sb)); isolation: isolate; }
.sh-bg { position: absolute; inset: -40px -40px auto; height: 72%; z-index: -1; filter: blur(16px) brightness(.5) saturate(.8); }
.sh-bg .banner { width: 100%; height: 100%; display: block; }
.shelf::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(11, 14, 19, .15), var(--night) 66%); pointer-events: none; }
.sh-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: calc(12px + var(--st)) max(18px, var(--sr)) 0 max(18px, var(--sl)); }
.rank { display: flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border: 0; border-radius: 30px; cursor: pointer; color: var(--text); background: rgba(12, 15, 20, .66); box-shadow: inset 0 0 0 1.5px rgba(201, 162, 74, .35); text-align: left; }
.badge { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #f3d991, #b98c35 60%, #7a5a1e); color: #2a1c08; box-shadow: inset 0 0 0 2px rgba(255, 245, 210, .5); }
.badge .ico { width: 22px; height: 22px; }
.rk-tx b { display: block; font: 800 16px/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; }
.xp { display: block; width: 84px; height: 5px; margin-top: 6px; border-radius: 3px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.xp i { display: block; height: 100%; background: linear-gradient(90deg, #b98c35, #f0d48e); }
.sh-logo { margin: 14px 0 0; text-align: center; font: 900 26px/.9 var(--f-display); letter-spacing: .16em; color: var(--paper); }
.sh-logo small { display: block; font: 600 12px var(--f-zh); letter-spacing: .5em; color: var(--brass); margin-top: 7px; text-transform: none; }
:lang(zh) .sh-logo { font-family: var(--f-zh); letter-spacing: .3em; }
:lang(zh) .sh-logo small { font: 700 11px var(--f-display); letter-spacing: .24em; text-transform: uppercase; }
.sh-stage { position: relative; margin-top: 14px; }
.sh-track { display: flex; align-items: center; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 10px calc(50% - var(--pw) / 2) 14px; }
.sh-item { flex: none; width: var(--pw); padding: 0; border: 0; background: none; cursor: pointer; scroll-snap-align: center; transform: scale(.84); opacity: .5; filter: saturate(.7); transition: transform .3s cubic-bezier(.2, .9, .3, 1), opacity .3s, filter .3s; }
.sh-item.on { transform: none; opacity: 1; filter: none; }
.sh-step { position: absolute; top: 50%; z-index: 2; margin-top: -24px; width: 48px; height: 48px; border-radius: 50%; border: 0; display: none; place-items: center; cursor: pointer; color: var(--brass-hi); background: rgba(12, 15, 20, .72); box-shadow: inset 0 0 0 1.5px var(--brass-dim); }
.sh-step .ico { width: 24px; height: 24px; }
.sh-step.l { left: 16px; }
.sh-step.r { right: 16px; }
.sh-info { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 0 max(20px, var(--sr)) 0 max(20px, var(--sl)); }
.sh-dots { display: flex; justify-content: center; gap: 9px; }
.sh-dots i { width: 7px; height: 7px; transform: rotate(45deg); background: rgba(255, 255, 255, .18); }
.sh-dots i.on { background: var(--brass-hi); }
.sh-status { display: flex; align-items: center; justify-content: center; gap: 8px; font: 600 14px var(--f-ui); color: var(--text2); }
.live { width: 8px; height: 8px; border-radius: 50%; background: var(--brass-hi); box-shadow: 0 0 10px var(--brass-hi); }
.star-row { display: inline-flex; gap: 2px; }
.star-row i { color: var(--text3); display: inline-flex; }
.star-row i.on { color: var(--brass-hi); }
.star-row .ico { width: 15px; height: 15px; }
.star-row i.on .ico { fill: currentColor; }
.sh-blurb { max-width: 46ch; font: calc(15.5px * var(--fs))/1.45 var(--f-body); color: var(--text2); }
.sh-cta { width: 100%; max-width: 420px; display: grid; gap: 10px; margin-top: 6px; }
.sh-cta .btn.primary { min-height: 58px; font-size: 20px; }
.sh-cta .two { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; }
.sh-cta .two:empty { display: none; }
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; justify-content: center; gap: 36px; padding: 8px 20px var(--sb); height: calc(66px + var(--sb)); background: linear-gradient(rgba(9, 11, 16, 0), #090b10 32%); border-top: 1px solid rgba(255, 255, 255, .05); }
.tabbar button { display: grid; justify-items: center; align-content: start; gap: 4px; width: 84px; padding: 4px 0 0; border: 0; background: none; cursor: pointer; color: var(--text3); font: 700 12px var(--f-display); letter-spacing: .14em; text-transform: uppercase; }
.tabbar button.on { color: var(--brass-hi); }
.tabbar .ico { width: 25px; height: 25px; }

/* a case poster: its scene, its suspects in moonlight, the title. In container units, so it fits any width */
.poster { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4.25; overflow: hidden; border-radius: 3.2cqw; container-type: inline-size; background: linear-gradient(160deg, var(--c0, #1a1f2a), #0a0d13 70%); box-shadow: 0 18px 40px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .06); text-align: left; }
.poster > * { position: absolute; }
.p-art { inset: 0 0 26% 0; }
.p-art .banner, .p-art .emblem { width: 100%; height: 100%; display: block; }
.p-art .emblem { width: 60%; height: 60%; margin: 14% auto 0; position: relative; }
.p-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(10, 13, 19, 0) 40%, #0a0d13 98%); }
.p-crowd { left: -4%; width: 108%; bottom: 23%; height: 48%; object-fit: contain; object-position: 50% 100%; filter: brightness(.5) contrast(1.15) saturate(.75) drop-shadow(-1.2cqw -.6cqw 0 rgba(147, 172, 223, .45)) drop-shadow(0 0 4cqw rgba(0, 0, 0, .7)); }
.p-fog { inset: auto 0 0 0; height: 48%; background: linear-gradient(rgba(10, 13, 19, 0), rgba(10, 13, 19, .9) 42%, #0a0d13 70%); }
.p-no { top: 6cqw; left: 7cqw; font: 4.6cqw var(--f-type); letter-spacing: .14em; color: rgba(239, 228, 203, .85); text-transform: uppercase; }
.p-diff { top: 5cqw; right: 6cqw; font: 800 4.2cqw/1 var(--f-display); letter-spacing: .16em; text-transform: uppercase; padding: 1.6cqw 2.6cqw 1.3cqw; border: .7cqw solid currentColor; border-radius: 1.2cqw; transform: rotate(4deg); background: rgba(10, 13, 19, .4); }
.p-diff.easy { color: #9fcf8a; }
.p-diff.medium { color: var(--brass-hi); }
.p-diff.hard { color: var(--wax-hi); }
.p-t { left: 7cqw; right: 7cqw; bottom: 6.5cqw; display: grid; gap: 1.4cqw; }
.p-t i { font: normal 5.2cqw/1.1 var(--f-type); color: var(--brass-hi); }
.p-t b { font: 900 12.5cqw/.86 var(--f-display); text-transform: uppercase; color: var(--paper); letter-spacing: -.005em; text-shadow: 0 .6cqw 2cqw rgba(0, 0, 0, .6); text-wrap: balance; }
:lang(zh) .p-t b { font: 900 11cqw/1.12 var(--f-zh); letter-spacing: .04em; }
.p-t em { font: normal 700 4.4cqw/1.2 var(--f-display); color: var(--text2); letter-spacing: .1em; text-transform: uppercase; }
.p-seal { right: 6cqw; bottom: 6cqw; width: 16cqw; height: 16cqw; border-radius: 50%; display: grid; place-items: center; color: #fbe9dc; background: var(--wax-grad); box-shadow: 0 0 0 1.2cqw rgba(163, 41, 31, .5); transform: rotate(-12deg); }
.p-seal .ico { width: 8cqw; height: 8cqw; }
.p-ribbon { top: 15cqw; left: 0; padding: 1.6cqw 3.4cqw 1.3cqw 7cqw; background: var(--brass-grad); color: #20180b; font: 800 4.2cqw/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 1cqw 3cqw rgba(0, 0, 0, .5); }
.poster.mini { border-radius: 6px; box-shadow: 0 8px 18px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .06); }

/* ---------- the Detective record ---------- */
.page.record { padding-bottom: calc(96px + var(--sb)); padding-top: calc(16px + var(--st)); }
.rec-cols { display: grid; gap: 0; }
.rk-card { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: 16px; background: linear-gradient(#1c222b, #151a21); box-shadow: inset 0 0 0 1px var(--brass-dim); }
.rk-card .badge { width: 58px; height: 58px; }
.rk-card .badge .ico { width: 32px; height: 32px; }
.rk-card .rk-tx { flex: 1; min-width: 0; }
.rk-card .rk-tx b { font-size: 26px; }
.rk-card .rk-tx small { display: block; margin-top: 4px; color: var(--text2); font-size: 13px; }
.rk-card .xp { width: 100%; height: 7px; margin-top: 8px; }
.h2h { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px 10px; margin-top: 12px; padding: 14px; border-radius: 14px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--rule); }
.h2h .side { display: grid; justify-items: center; gap: 6px; min-width: 0; text-align: center; }
.h2h .side b { font: 800 16px var(--f-display); letter-spacing: .06em; text-transform: uppercase; overflow-wrap: anywhere; }
.h2h .av { width: 44px; height: 44px; }
.h2h .score { font: 900 42px/1 var(--f-display); color: var(--brass-hi); font-variant-numeric: tabular-nums; }
.h2h .score i { font-style: normal; margin: 0 6px; color: var(--text3); }
.h2h .cap { grid-column: 1 / -1; text-align: center; color: var(--text3); font-size: 12px; }
.rec-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 14px 12px; }
.rec-case { display: grid; gap: 6px; justify-items: center; padding: 0; border: 0; background: none; cursor: pointer; min-width: 0; }
.medals { display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 8px; }
.medals > div { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 1px 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--rule); }
.medals .medal { grid-row: span 2; }
.medals b { font: 800 15px/1.05 var(--f-display); letter-spacing: .04em; text-transform: uppercase; }
.medals small { font-size: 12px; line-height: 1.3; color: var(--text2); }
.medals .off { opacity: .5; }
.medals .off .medal { filter: grayscale(1) brightness(.7); }
.star-how { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.star-how li { display: flex; gap: 10px; align-items: center; font: calc(15px * var(--fs)) var(--f-body); }
.star-how .ico { color: var(--brass-hi); fill: currentColor; width: 18px; height: 18px; }

/* =====================================================================================
   PLAYERS, THE CASE FILE, THE ROUND CARD
   ===================================================================================== */
.who-head { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; align-items: center; margin: 4px 0 18px; }
.who-head .poster { width: 92px; }
.who-head .large-title { font-size: 30px; margin: 4px 0; }
.who-head .muted { font: italic calc(15px * var(--fs)) var(--f-body); }
.tool-card { display: flex; gap: 14px; align-items: center; margin-top: 12px; padding: 14px 16px; border-radius: 14px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--rule); }
.tool-card b { display: block; font: 800 18px/1.1 var(--f-display); letter-spacing: .04em; text-transform: uppercase; }
.tool-card small { display: block; color: var(--text2); font: calc(14.5px * var(--fs))/1.4 var(--f-body); margin-top: 3px; }
.tool-ic { width: 46px; height: 46px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--panel2); color: var(--brass-hi); box-shadow: inset 0 0 0 1px var(--brass-dim); }
.tool-ic .ico { width: 24px; height: 24px; }
.tool-ic.two { width: auto; padding: 0 10px; display: flex; gap: 6px; }
.who .settings { margin-top: 16px; }

/* the case file: a manila folder with tonight's telegram, the suspects' polaroids beside it */
.page.casefile { padding-bottom: 0; }
.cf-cols { display: grid; gap: 22px; }
.folder { position: relative; margin-top: 26px; padding: 16px 14px 18px; border-radius: 4px 14px 10px 10px; background: linear-gradient(#cfae72, #bf9b5e); box-shadow: 0 20px 40px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 240, 200, .5); color: var(--ink); }
.folder::before { content: ''; position: absolute; top: -24px; left: 0; width: 176px; height: 28px; border-radius: 8px 12px 0 0; background: #cfae72; }
.ftab { position: absolute; top: -19px; left: 14px; z-index: 1; font: 13px var(--f-type); letter-spacing: .12em; color: #4d3a1c; text-transform: uppercase; white-space: nowrap; }
.tele { position: relative; padding: 16px 18px 18px; background: #f2e8cf; transform: rotate(-1.2deg); box-shadow: 0 4px 10px rgba(60, 40, 10, .35); }
.tele .th { display: flex; gap: 14px; align-items: center; border-bottom: 2px solid var(--ink); padding-bottom: 7px; margin-bottom: 10px; padding-right: 54px; }
.tele .th b { font: 900 22px/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; }
.tele .th small { font: 12px var(--f-type); color: var(--ink2); }
.tele p { font: calc(15.5px * var(--fs))/1.6 var(--f-type); letter-spacing: .02em; text-transform: uppercase; }
.tele .pm { position: absolute; right: -6px; top: -18px; width: 64px; height: 64px; border-radius: 50%; border: 2.5px solid rgba(163, 41, 31, .7); color: rgba(163, 41, 31, .85); background: rgba(242, 232, 207, .6); display: grid; place-items: center; text-align: center; font: 11px/1.2 var(--f-type); letter-spacing: .1em; text-transform: uppercase; transform: rotate(-14deg); }
.cf-victim { display: flex; gap: 8px; align-items: center; margin: 16px 4px 0; font: calc(14.5px * var(--fs))/1.4 var(--f-type); color: #3f2f16; }
.cf-victim .ico { width: 18px; height: 18px; color: #6e150f; }
.cf-side .section-title { margin-top: 4px; }
.pols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; padding: 6px 4px 0; }
.pol.sus { padding: 7px 7px 0; }
.pol.sus::before { content: ''; position: absolute; top: -11px; left: 50%; width: 14px; height: 30px; margin-left: -7px; border-radius: 7px; border: 3px solid #9a9da4; border-bottom-color: transparent; z-index: 1; }
.pol.sus figcaption { position: static; padding: 6px 2px 0; font-size: 15px; white-space: normal; line-height: 1.2; }
.clip-line { padding: 4px 2px 10px; font: calc(13.5px * var(--fs))/1.35 var(--f-body); color: #3a2c18; text-align: center; }
.casefile .sticky-cta { margin-top: 18px; }

/* the round card: the story's picture with the round on it, the event, the people, the time */
.turn-start { display: grid; grid-template-columns: 1fr; align-content: center; justify-items: stretch; gap: 14px; text-align: left; max-width: 560px; margin: 0 auto; width: 100%; }
.ts-art { position: relative; aspect-ratio: 20 / 9; border-radius: 12px; overflow: hidden; background: #0a0d13; box-shadow: inset 0 0 0 1px var(--brass-dim), 0 10px 24px rgba(0, 0, 0, .45); }
.ts-art .banner { position: absolute; inset: 0; width: 100%; height: 100%; }
.ts-art .emblem { position: absolute; inset: 0; margin: auto; width: 40%; height: 60%; }
.ts-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(5, 6, 9, .88)); }
.ts-art-tx { position: absolute; left: 16px; bottom: 12px; right: 16px; z-index: 1; display: flex; flex-direction: column; gap: 2px; }
.ts-art-tx small { font: 13px var(--f-type); color: var(--brass-hi); letter-spacing: .06em; }
.ts-art-tx b { font: 900 42px/.9 var(--f-display); text-transform: uppercase; color: var(--paper); text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
:lang(zh) .ts-art-tx b { font-family: var(--f-zh); }
.ts-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ts-side > * { width: 100%; }
.ts-event { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: var(--paper); color: var(--ink); transform: rotate(-.5deg); box-shadow: 0 6px 16px rgba(0, 0, 0, .45); }
.ts-event p { font: calc(15px * var(--fs))/1.5 var(--f-type); }
.ts-ic { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(42, 33, 23, .4); }
.ts-ic .ico { width: 20px; height: 20px; }
.ts-cast { display: flex; gap: 6px; justify-content: space-between; padding: 0 4px; }
.ts-who { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.ts-who .face.sm { width: 46px; height: 46px; }
.ts-who small { font: 600 11px/1.2 var(--f-ui); color: var(--text2); text-align: center; overflow-wrap: anywhere; }
.ts-time { display: flex; flex-direction: column; align-items: center; padding: 4px 0; }
.ts-time span { font: 900 60px/1 var(--f-display); color: var(--brass-hi); font-variant-numeric: tabular-nums; }
.ts-time small { font: 700 12px var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--text2); margin-top: 4px; }
.ts-gift { padding: 12px 14px; border-radius: 12px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--brass-dim); }
.ts-gift .eyebrow { margin: 0 0 8px; }
.turn-start .rotate { max-width: none; }

/* =====================================================================================
   THE HOUSE: the 3D view fills the screen, a small HUD sits on top (js/fp.js draws the house)
   ===================================================================================== */
.fp { position: fixed; inset: 0; z-index: 0; background: #000; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; overflow: hidden; }
.fp canvas { display: block; width: 100%; height: 100%; }
.fp::after { content: ''; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: rgba(255, 255, 255, .7); pointer-events: none; }
.fp-cover { position: absolute; inset: 0; background: #000; pointer-events: none; opacity: 0; z-index: 3; }
.fp-labels { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.fp-dot { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--brass-hi); box-shadow: 0 0 0 3px rgba(232, 201, 125, .25), 0 0 12px rgba(232, 190, 90, .85); animation: blink 1.6s ease-in-out infinite; }
.fp-dot.person { background: #c8d4f2; box-shadow: 0 0 0 3px rgba(147, 172, 223, .3), 0 0 12px rgba(147, 172, 223, .85); }
@keyframes blink { 50% { opacity: .4; } }
/* the thing you are looking at: a paper tag on a string */
.fp-label { position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer; white-space: nowrap; border: 0; display: flex; align-items: center; gap: 6px; padding: 9px 15px 9px 22px; border-radius: 3px 16px 16px 3px; background: var(--paper); color: var(--ink); font: 700 14px var(--f-ui); box-shadow: 0 6px 18px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(107, 90, 64, .3); }
.fp-label::before { content: ''; position: absolute; left: 8px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #0b0e13; box-shadow: 0 0 0 2px rgba(0, 0, 0, .15); }
.fp-label.pop { animation: tag-in .2s ease-out; }
@keyframes tag-in { from { opacity: 0; transform: translate(-50%, -90%); } }
.fp-label.done { background: rgba(13, 16, 21, .86); color: var(--text); box-shadow: inset 0 0 0 1px var(--brass-dim); }
.fp-label.done::before { background: var(--brass-dim); box-shadow: none; }
.fp-label .mk { width: 16px; height: 16px; color: var(--ink2); }
.fp-label.done .mk { color: var(--ok); }
.fp-label .rv { font-style: normal; display: inline-flex; width: 20px; height: 20px; }
.fp-label .go:empty { display: none; }
.fp-stick { position: absolute; left: 92px; top: calc(100% - 140px - var(--sb)); width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%; border: 2px solid rgba(232, 201, 125, .3); background: rgba(201, 162, 74, .06); pointer-events: none; z-index: 2; }
.fp-stick i { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, rgba(240, 214, 150, .85), rgba(170, 130, 60, .7)); }
.fp-stick.idle { opacity: .5; }
.fp .fp-mini { position: absolute; top: calc(10px + var(--st)); right: max(12px, var(--sr)); width: var(--mini-w); height: 100px; border-radius: 8px; pointer-events: auto; cursor: pointer; z-index: 3; box-shadow: 0 0 0 2px var(--brass-lo), 0 0 0 3.5px #e1c27a, 0 6px 14px rgba(0, 0, 0, .55); }
body.fp-on { overflow: hidden; }
body.fp-on #app { position: fixed; inset: 0; max-width: none; min-height: 0; pointer-events: none; z-index: 2; }
body.fp-on #app button, body.fp-on .modal-bg, body.fp-on .lock-bg, body.fp-on .toast, body.fp-on .fp-float { pointer-events: auto; }
.fp-hud { position: absolute; inset: 0; pointer-events: none; color: var(--text); }
/* the last 30 seconds: the edges of the screen go red */
.edge { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s; box-shadow: inset 0 0 90px 14px rgba(163, 41, 31, .6); }
body.tense .edge { opacity: 1; animation: tense 1s ease-in-out infinite; }
@keyframes tense { 50% { opacity: .55; } }
.hud-l { position: absolute; left: max(16px, var(--sl)); top: calc(14px + var(--st)); display: flex; gap: 12px; align-items: flex-start; }
.hud-col { display: grid; gap: 6px; justify-items: start; padding-top: 2px; }
/* the pocket watch: the time, and a brass ring that runs down */
.watch { position: relative; width: 64px; height: 64px; flex: none; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 40% 35%, #23201a, #0f0d0a 70%); box-shadow: 0 0 0 3px var(--brass-lo), 0 0 0 4.5px #e1c27a, 0 6px 14px rgba(0, 0, 0, .6); }
.watch::before { content: ''; position: absolute; top: -9px; left: 50%; width: 12px; height: 9px; margin-left: -6px; border-radius: 3px 3px 0 0; background: linear-gradient(#e8c97d, #9c7832); }
.watch .ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.watch .ring circle { fill: none; stroke: var(--brass-hi); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--k, 1)); transition: stroke-dashoffset .25s linear; }
.watch b { position: relative; font: 800 18px/1 var(--f-display); color: var(--paper); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.watch.low .ring circle { stroke: var(--wax-hi); }
.watch.low b { color: #ff8a78; animation: pulse .6s ease-in-out infinite alternate; }
@keyframes pulse { to { opacity: .5; } }
.watch.mini { width: 46px; height: 46px; box-shadow: 0 0 0 2px var(--brass-lo), 0 0 0 3px #e1c27a; }
.watch.mini::before { top: -7px; width: 9px; height: 7px; margin-left: -4.5px; }
.watch.mini b { font-size: 14px; }
/* the evidence bag: a slot for each clue this round */
.bag { display: flex; gap: 5px; padding: 5px 7px; border-radius: 9px; background: rgba(12, 15, 20, .66); box-shadow: inset 0 0 0 1.5px rgba(201, 162, 74, .3); }
.bag .slot { width: 26px; height: 33px; border-radius: 3px; border: 1.5px dashed rgba(239, 228, 203, .35); overflow: hidden; }
.bag .slot.on { border: 0; background: var(--photo); padding: 2px 2px 6px; box-shadow: 0 2px 5px rgba(0, 0, 0, .5); animation: pop .35s ease-out; }
.bag .slot .ph { display: grid; place-items: center; width: 100%; height: 100%; object-fit: cover; background: #22262d; color: rgba(255, 255, 255, .4); }
.bag .slot .ph .ico { width: 70%; height: 70%; }
.bag.full { box-shadow: inset 0 0 0 1.5px rgba(232, 201, 125, .7); }
.bag.shake { animation: shake-x .5s; }
@keyframes pop { 50% { transform: scale(1.3); } }
@keyframes shake-x { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.kit { display: flex; gap: 4px; padding: 4px 9px; border-radius: 99px; color: var(--brass-hi); background: rgba(12, 15, 20, .66); }
.kit .ico { width: 19px; height: 19px; }
/* the room's brass plaque, and crime tape on the crime scene */
.hud-place { position: absolute; left: max(16px, var(--sl)); top: calc(92px + var(--st)); display: flex; gap: 8px; align-items: center; }
.plaque { position: relative; padding: 7px 15px 6px; border-radius: 4px; background: linear-gradient(#e2c27a, #a8822f); color: #2a1c08; font: 800 14px/1 var(--f-display); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255, 250, 230, .6), 0 3px 8px rgba(0, 0, 0, .5); }
.plaque::before, .plaque::after { content: ''; position: absolute; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: #6b4d17; }
.plaque::before { left: 5px; }
.plaque::after { right: 5px; }
:lang(zh) .plaque { letter-spacing: .3em; font-family: var(--f-zh); font-weight: 900; }
.tape { padding: 4px 10px 3px; background: repeating-linear-gradient(-45deg, #e2b93b 0 14px, #d3a92c 14px 16px); color: #1a1408; font: 800 11px/1 var(--f-display); letter-spacing: .16em; text-transform: uppercase; transform: rotate(-3deg); white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
/* your newest lead (or, on the first case, a word from the inspector) */
.lead-pill { position: absolute; left: max(16px, var(--sl)); top: calc(128px + var(--st)); max-width: min(260px, 34vw); display: flex; gap: 8px; align-items: flex-start; padding: 8px 12px 9px; border-radius: 10px; background: rgba(12, 15, 20, .74); font: 600 13px/1.3 var(--f-ui); color: var(--text); box-shadow: inset 0 0 0 1px rgba(201, 162, 74, .2); }
.lead-pill small { display: block; font: 800 11px var(--f-display); letter-spacing: .18em; text-transform: uppercase; color: var(--brass); margin-bottom: 2px; }
.lead-pill .ico { width: 18px; height: 18px; color: var(--brass-hi); margin-top: 1px; }
.lead-pill.coach { box-shadow: inset 0 0 0 1.5px var(--brass-dim); animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { box-shadow: inset 0 0 0 1.5px var(--brass-hi), 0 0 18px rgba(232, 201, 125, .25); } }
/* what the other detective just did (online) */
.feed { position: absolute; left: 50%; bottom: calc(16px + var(--sb)); transform: translateX(-50%); display: flex; gap: 8px; align-items: center; max-width: min(420px, 60vw); padding: 5px 14px 5px 5px; border-radius: 22px; background: rgba(12, 15, 20, .8); box-shadow: inset 0 0 0 1px rgba(242, 167, 198, .35); font: 600 13.5px var(--f-ui); animation: toast-in .3s ease-out; }
.feed .tok { width: 28px; height: 28px; }
.hud-r { position: absolute; right: calc(var(--mini-w) + 26px + var(--sr)); top: calc(14px + var(--st)); display: flex; gap: 10px; align-items: flex-start; }
.hud-btn { position: relative; width: 46px; height: 46px; flex: none; border-radius: 50%; border: 0; padding: 0; cursor: pointer; display: grid; place-items: center; color: var(--brass-hi); background: rgba(12, 15, 20, .66); box-shadow: inset 0 0 0 1.5px rgba(201, 162, 74, .42), 0 3px 8px rgba(0, 0, 0, .35); }
.hud-btn .ico { width: 22px; height: 22px; }
.hud-btn em { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--wax-hi); color: #fff; font: 700 12px/20px var(--f-ui); text-align: center; font-style: normal; box-shadow: 0 0 0 2px rgba(12, 15, 20, .9); }
.hud-btn.acc { color: #fbe9dc; background: var(--wax-grad); box-shadow: 0 0 0 2px rgba(163, 41, 31, .5), 0 4px 10px rgba(0, 0, 0, .5); }
.fp-hint span { position: absolute; bottom: calc(205px + var(--sb)); padding: 9px 12px; border-radius: 10px; background: rgba(12, 15, 20, .74); box-shadow: inset 0 0 0 1px var(--brass-dim); font: 600 13px/1.5 var(--f-ui); animation: fade .4s; }
.fp-hint .l { left: max(16px, var(--sl)); }
.fp-hint .r { right: max(16px, var(--sr)); text-align: right; bottom: calc(110px + var(--sb)); }
.fp-hint.gone { opacity: 0; transition: opacity .6s; }
body.fp-on .toast { bottom: auto; top: calc(74px + var(--st)); width: max-content; max-width: min(88vw, 420px); }
body.fp-on.ff-open .toast { top: auto; bottom: calc(18px + var(--sb)); pointer-events: none; }
@keyframes fade { from { opacity: 0; } }
/* the house is played sideways */
.rotate { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px; width: 100%; max-width: 380px; border-radius: 14px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--rule); text-align: center; }
.rotate b { font: 800 20px var(--f-display); letter-spacing: .06em; text-transform: uppercase; }
.rotate small { color: var(--text2); font: calc(14.5px * var(--fs)) var(--f-body); }
.rotate .phone { color: var(--brass-hi); animation: turn 2.2s ease-in-out infinite; }
.rotate .phone .ico { width: 44px; height: 44px; }
.rotate.upright .phone { animation-name: upright; }
@keyframes turn { 0%, 20% { transform: rotate(0); } 50%, 80% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
@keyframes upright { 0%, 20% { transform: rotate(-90deg); } 50%, 80% { transform: rotate(0); } 100% { transform: rotate(-90deg); } }
.rotate.over { position: fixed; inset: 0; z-index: 40; max-width: none; border-radius: 0; justify-content: center; background: rgba(9, 11, 15, .95); box-shadow: none; pointer-events: auto; }

/* ---------- in the house: the card beside a suspect or a found clue (js/inworld.js) ---------- */
.fp-float { position: fixed; left: 0; top: 0; z-index: 15; width: min(320px, 42vw); max-height: calc(100vh - 70px); max-height: calc(100dvh - 70px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 9px; padding: 12px; border-radius: 14px; color: var(--text); background: rgba(16, 19, 25, .95); box-shadow: inset 0 0 0 1px var(--brass-dim), 0 14px 34px rgba(0, 0, 0, .6); animation: fade .18s ease-out; }
.fp-float > small { font-size: 12.5px; color: var(--text2); display: flex; gap: 6px; align-items: center; }
.fp-float > small .ico { width: 15px; height: 15px; }
.fp-float small.ok { color: var(--ok); }
.fp-float small.bad { color: #ff8a78; font: 800 15px var(--f-display); letter-spacing: .06em; }
.ff-head { display: flex; align-items: center; gap: 10px; }
.ff-head b { flex: 1; min-width: 0; font: 800 18px/1.05 var(--f-display); letter-spacing: .05em; text-transform: uppercase; }
.ff-ic { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--brass-hi); background: var(--panel2); box-shadow: inset 0 0 0 1px var(--brass-dim); }
.ff-ic .ico { width: 18px; height: 18px; }
.ff-x { width: 30px; height: 30px; flex: none; border: 0; border-radius: 50%; padding: 0; display: grid; place-items: center; cursor: pointer; color: var(--text2); background: transparent; box-shadow: inset 0 0 0 1px var(--rule); }
.ff-x .ico { width: 16px; height: 16px; }
.fp-float .shown { font-size: 12px; color: var(--text2); }
.fp-float .shown b { color: var(--brass-hi); font-weight: 650; }
.quote { position: relative; margin: 0; padding: 11px 14px 12px; border-radius: 3px 14px 14px 14px; background: var(--paper); color: var(--ink); font: italic calc(15px * var(--fs))/1.45 var(--f-body); box-shadow: 0 4px 12px rgba(0, 0, 0, .4); animation: fade .25s; }
.quote.no { background: #ddd5c6; color: #4a3a2a; }
.quote .stamp { right: 4px; top: -11px; font-size: 13px; padding: 3px 7px 2px; border-width: 2px; --sr2: 8deg; background: rgba(239, 228, 203, .9); animation: stamp-in .3s .25s cubic-bezier(.3, 1.6, .5, 1) both; }
.bio { font: italic calc(14.5px * var(--fs))/1.45 var(--f-body); color: var(--text2); }
.night { list-style: none; margin: 0; padding: 8px 10px; display: grid; gap: 5px; border-radius: 10px; background: rgba(255, 255, 255, .035); }
.night li { display: flex; gap: 8px; align-items: flex-start; font: 600 13px/1.3 var(--f-ui); }
.night li .ico { width: 15px; height: 15px; margin-top: 1px; color: var(--ok); }
.night li.gap { color: var(--text3); font-weight: 500; font-style: italic; }
.night li.gap .ico { color: var(--text3); }
.ff-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.ff-opts button { min-height: 40px; border: 0; border-radius: 10px; padding: 0 14px; cursor: pointer; font: 800 15px var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--text); background: var(--panel2); box-shadow: inset 0 0 0 1px var(--brass-dim); }
.ff-opts button.main { color: #20180b; background: var(--brass-grad); box-shadow: inset 0 1px 0 rgba(255, 250, 230, .6), 0 3px 0 #6d4f1c; }
.ff-lab { font: 800 11.5px var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--brass); }
.ff-picks { display: grid; gap: 6px; }
.ff-picks .pick-clue { padding: 5px 10px 5px 5px; font-size: 13.5px; min-height: 0; }
.ff-picks .thumb { width: 34px; height: 34px; }
/* a clue found: the polaroid drops in, EVIDENCE is stamped on it, the slip says what it is */
.ff-found { position: relative; display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 12px; align-items: start; padding: 4px 2px 2px; }
.ff-found .pol { width: 108px; padding: 6px 6px 24px; }
.ff-found .pol figcaption { font-size: 11.5px; }
.ff-found > .stamp { left: -2px; top: 70px; font-size: 15px; padding: 4px 8px 3px; --sr2: -14deg; background: rgba(244, 239, 227, .25); }
.ff-found .slip { padding: 10px 12px 12px; background: var(--paper); color: var(--ink); transform: rotate(1.5deg); box-shadow: 0 8px 18px rgba(0, 0, 0, .5); }
.ff-found .slip h4 { color: var(--ink); font: 900 18px/1 var(--f-display); margin-bottom: 6px; }
.ff-found .slip p { font: calc(13.5px * var(--fs))/1.45 var(--f-type); white-space: pre-line; }
.ff-found.fresh .pol { animation: drop .42s cubic-bezier(.2, 1.4, .4, 1) both; }
.ff-found.fresh .slip { animation: slide .35s .2s ease-out both; }
.ff-found.fresh > .stamp { animation: stamp-in .22s .38s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes drop { 0% { opacity: 0; transform: translateY(-50px) rotate(-14deg) scale(1.2); } }
@keyframes slide { 0% { opacity: 0; transform: translateX(24px) rotate(6deg); } }
@keyframes stamp-in { 0% { opacity: 0; transform: rotate(var(--sr2, -10deg)) scale(2.4); } }

/* ---------- a lock, close up, on the whole screen (js/lockui.js) ---------- */
.lock-bg { position: fixed; inset: 0; z-index: 20; display: flex; background: radial-gradient(ellipse at 50% 42%, rgba(26, 31, 40, .9), rgba(5, 6, 9, .97) 75%); animation: fade .22s; }
.lock-view { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; }
.lk-bar { display: flex; align-items: center; gap: 12px; padding: calc(10px + var(--st)) max(14px, var(--sr)) 6px max(14px, var(--sl)); }
.lk-title { flex: 1; min-width: 0; text-align: center; font: 800 20px/1.05 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--paper); }
.lk-stage { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center; gap: 22px; padding: 8px max(16px, var(--sr)) calc(18px + var(--sb)) max(16px, var(--sl)); }
.note-pin { position: relative; max-width: 330px; padding: 16px 16px 14px; background: var(--paper); color: var(--ink); transform: rotate(1.6deg); box-shadow: 0 10px 22px rgba(0, 0, 0, .55); }
.note-pin::before { content: ''; position: absolute; top: -7px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--wax-grad); box-shadow: 0 2px 4px rgba(0, 0, 0, .5); }
.note-pin small { display: block; font: 700 11px var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--wax); margin-bottom: 6px; }
.note-pin p { font: calc(15px * var(--fs))/1.5 var(--f-type); white-space: pre-line; overflow-wrap: anywhere; text-spacing-trim: space-all; }
.note-pin em { display: block; margin-top: 10px; font: 600 12px var(--f-ui); font-style: normal; color: var(--ink2); }
.pull { min-height: 54px; padding: 0 28px; border: 0; border-radius: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; color: #20180b; background: var(--brass-grad); font: 800 19px var(--f-display); letter-spacing: .08em; text-transform: uppercase; box-shadow: inset 0 1px 0 rgba(255, 250, 230, .7), 0 4px 0 #6d4f1c, 0 10px 22px rgba(0, 0, 0, .45); }
.pull .ico { width: 22px; height: 22px; }
.pull:active:not(:disabled) { transform: translateY(2px); }
.pull:disabled { opacity: .45; cursor: default; }
/* number wheels in a brass padlock, under a steel shackle */
.padlock-big { display: grid; justify-items: center; gap: 18px; }
.shackle { width: 58%; min-width: 120px; height: 84px; margin-bottom: -40px; border: 16px solid #a9adb5; border-bottom: 0; border-radius: 90px 90px 0 0; box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35); background: none; }
.pad { position: relative; padding: 26px 22px 22px; border-radius: 22px; background: linear-gradient(160deg, #f0d48e, #c99c44 45%, #8a6a2c); box-shadow: inset 0 2px 0 rgba(255, 250, 230, .7), inset 0 -4px 0 rgba(70, 45, 10, .4), 0 18px 34px rgba(0, 0, 0, .6); }
.win { display: flex; gap: 8px; padding: 8px; border-radius: 10px; background: #1a140b; box-shadow: inset 0 3px 8px rgba(0, 0, 0, .85); }
.wheel { display: grid; grid-template-rows: 40px 24px 50px 24px 40px; width: 58px; justify-items: center; align-items: center; border-radius: 6px; overflow: hidden; background: linear-gradient(90deg, #2a2215, #4a3b20 50%, #2a2215); }
.wheel button { width: 100%; height: 100%; border: 0; padding: 0; background: none; color: var(--brass-hi); cursor: pointer; display: grid; place-items: center; }
.wheel button .ico { width: 22px; height: 22px; }
.wheel button:active { background: rgba(232, 201, 125, .12); }
.ico.up { transform: rotate(90deg); }
.ico.down { transform: rotate(-90deg); }
.wheel .dim { font: 700 18px/1 var(--f-display); color: rgba(232, 201, 125, .3); }
.wheel b { width: 100%; text-align: center; font: 900 36px/50px var(--f-display); color: var(--paper); background: linear-gradient(rgba(0, 0, 0, .3), rgba(232, 201, 125, .08) 50%, rgba(0, 0, 0, .3)); border-top: 1px solid var(--brass-dim); border-bottom: 1px solid var(--brass-dim); text-shadow: 0 2px 0 #000; }
/* a dial of drawn pictures (or engraved plates when the choices are words) */
.dial { display: grid; justify-items: center; gap: 22px; }
.disc { position: relative; width: min(290px, 78vw, calc(100dvh - 230px)); min-width: 200px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #3a3022, #15110b 70%); box-shadow: 0 0 0 6px var(--brass-lo), 0 0 0 8px #e1c27a, 0 16px 34px rgba(0, 0, 0, .6), inset 0 0 34px rgba(0, 0, 0, .7); }
.disc::before { content: ''; position: absolute; top: -18px; left: 50%; margin-left: -9px; border: 9px solid transparent; border-top: 14px solid var(--wax-hi); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5)); }
.disc button { position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; margin: -15% 0 0 -15%; border: 0; border-radius: 50%; padding: 0; cursor: pointer; display: grid; place-items: center; align-content: center; gap: 2px; color: var(--paper); background: rgba(239, 228, 203, .07); box-shadow: inset 0 0 0 1px rgba(232, 201, 125, .25); transform: rotate(var(--a)) translateY(-112%) rotate(calc(-1 * var(--a))); transition: background .15s, box-shadow .15s; }
.disc button small { font: 600 10px/1.1 var(--f-ui); color: var(--text2); max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.disc button.on { background: rgba(232, 201, 125, .22); box-shadow: inset 0 0 0 2.5px var(--brass-hi), 0 0 18px rgba(232, 201, 125, .35); }
.disc button.on small { color: var(--brass-hi); }
.disc .hub { position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; margin: -11% 0 0 -11%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f3d991, #b98c35 60%, #7a5a1e); box-shadow: inset 0 0 0 2px rgba(255, 245, 210, .5), 0 4px 10px rgba(0, 0, 0, .5); }
.lk-art { display: grid; place-items: center; color: var(--brass-hi); }
.disc .lk-art .ico { width: 34px; height: 34px; }
.lk-char { font: 900 30px/1 var(--f-zh); color: var(--paper); }
.lk-word { font: 800 15px/1.1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; overflow-wrap: anywhere; text-align: center; }
html:lang(zh) .lk-word { letter-spacing: 0; } /* a Chinese name in brackets after the word: no tracking, or it can stick out by a hair */
.dial.words .disc { width: auto; min-width: 0; max-width: 520px; aspect-ratio: auto; border-radius: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 16px; }
.dial.words .disc::before, .dial.words .hub { display: none; }
.dial.words .disc button { position: static; width: auto; aspect-ratio: auto; margin: 0; transform: none; min-height: 62px; padding: 10px 12px; border-radius: 8px; color: #2a1c08; background: linear-gradient(#e2c27a, #a8822f); box-shadow: inset 0 1px 0 rgba(255, 250, 230, .6), 0 3px 0 #5a4418; }
.dial.words .disc button.on { background: var(--paper); box-shadow: inset 0 0 0 3px var(--wax-hi), 0 3px 0 #5a4418; }
/* a row of things to press in order: books, keys, lamps, valves, tiles... */
.tiles-lock { display: grid; justify-items: center; gap: 18px; width: 100%; max-width: 560px; }
.lk-slots { display: flex; gap: 8px; justify-content: center; }
.lk-slots > span { width: 46px; height: 46px; border-radius: 8px; display: grid; place-items: center; border: 1.5px dashed rgba(239, 228, 203, .3); }
.lk-slots > span.on { border: 0; background: rgba(239, 228, 203, .1); box-shadow: inset 0 0 0 1.5px var(--brass-dim); animation: pop .3s; }
.lk-slots small { display: none; }
.lk-slots .lk-col { width: 26px; height: 26px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.lk-slots .lk-char { font-size: 22px; }
.lk-slots .lk-art .ico { width: 24px; height: 24px; }
.lk-tiles { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: flex-end; }
.lk-tile { min-width: 72px; min-height: 72px; padding: 10px; border: 0; border-radius: 12px; cursor: pointer; display: grid; place-items: center; align-content: center; gap: 6px; color: var(--paper); background: linear-gradient(#2a303b, #1b2029); box-shadow: inset 0 0 0 1.5px var(--brass-dim), 0 4px 0 rgba(0, 0, 0, .55); transition: transform .08s; }
.lk-tile:active { transform: translateY(3px); }
.lk-tile small { font: 600 11.5px/1.1 var(--f-ui); color: var(--text2); }
.lk-tile .lk-art .ico { width: 34px; height: 34px; }
.lk-tile .lk-col { width: 30px; height: 30px; border-radius: 50%; background: var(--c); }
.tiles-lock .btn.link { min-height: 34px; }
/* brass plates with a drawn picture */
.look-plates .lk-tile { background: linear-gradient(#e2c27a, #a8822f); color: #2a1c08; box-shadow: inset 0 1px 0 rgba(255, 250, 230, .6), 0 4px 0 #5a4418; }
.look-plates .lk-tile .lk-art { color: #2a1c08; }
.look-plates .lk-tile small { color: #4d3a1c; }
/* book spines on a shelf */
.look-books .lk-tiles { gap: 4px; padding: 0 12px 8px; border-bottom: 10px solid #5a3d22; box-shadow: 0 6px 0 #3a2614; }
.look-books .lk-tile { width: 50px; min-width: 0; min-height: 0; height: 158px; padding: 10px 0; border-radius: 3px 3px 1px 1px; background: linear-gradient(90deg, rgba(0, 0, 0, .3), rgba(255, 255, 255, .12) 30%, rgba(0, 0, 0, .1) 60%, rgba(0, 0, 0, .35)), var(--c); box-shadow: inset 0 14px 0 -10px rgba(232, 201, 125, .75), inset 0 -14px 0 -10px rgba(232, 201, 125, .75); align-content: center; }
.look-books .lk-tile:nth-child(2n) { height: 144px; }
.look-books .lk-tile:nth-child(3n) { height: 166px; }
.look-books .lk-tile .lk-col { display: none; }
.look-books .lk-tile small { writing-mode: vertical-rl; font: 800 13px var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 250, 235, .92); text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.look-books .lk-tile:active { transform: translateY(-10px); }
/* piano keys */
.look-piano .lk-tiles { gap: 0; padding: 14px 14px 0; border-radius: 10px 10px 0 0; background: linear-gradient(#2b1a10, #160c06); flex-wrap: nowrap; }
.look-piano .lk-tile { width: 46px; min-width: 0; height: 168px; border-radius: 0 0 6px 6px; padding: 0 0 12px; align-content: end; background: linear-gradient(#fffdf6, #e9e1cf); box-shadow: inset 0 0 0 1px #9c8f75, inset 0 -6px 0 #d4c9b0, 0 2px 0 #160c06; }
.look-piano .lk-tile :is(small, .lk-word) { font: 800 15px var(--f-display); color: var(--ink); }
.look-piano .lk-tile:active { transform: none; background: linear-gradient(#efe7d4, #d9cfb8); box-shadow: inset 0 0 0 1px #9c8f75, inset 0 -2px 0 #d4c9b0; }
/* signal lamps */
.look-lamps .lk-tile { border-radius: 50%; width: 88px; height: 88px; background: radial-gradient(circle at 50% 50%, #2a2f38, #12151a); box-shadow: inset 0 0 0 4px #4a4f58, 0 4px 0 rgba(0, 0, 0, .6); }
.look-lamps .lk-tile .lk-col { width: 44px; height: 44px; background: radial-gradient(circle at 38% 32%, #fff, var(--c) 45%, rgba(0, 0, 0, .4)); box-shadow: 0 0 22px var(--c); }
/* boiler valves */
.look-valves .lk-tile { width: 92px; height: 104px; border-radius: 14px; background: linear-gradient(#5b5f66, #33363c); box-shadow: inset 0 0 0 1.5px #7d828a, 0 4px 0 rgba(0, 0, 0, .55); }
.look-valves .lk-tile .lk-col { width: 50px; height: 50px; border-radius: 50%; background: radial-gradient(circle, #33363c 22%, transparent 24%), conic-gradient(from 0deg, var(--c) 0 10%, transparent 0 25%, var(--c) 0 35%, transparent 0 50%, var(--c) 0 60%, transparent 0 75%, var(--c) 0 85%, transparent 0); box-shadow: 0 0 0 6px var(--c), 0 3px 6px rgba(0, 0, 0, .6); }
.look-valves .lk-tile:active .lk-col { transform: rotate(45deg); }
.look-valves .lk-tile small { color: #e6e9ee; }
/* console buttons */
.look-buttons .lk-tile { width: 92px; height: 92px; border-radius: 14px; background: linear-gradient(#3a414c, #232831); box-shadow: inset 0 0 0 1.5px #59616e, 0 4px 0 rgba(0, 0, 0, .6); }
.look-buttons .lk-tile .lk-col { width: 46px; height: 46px; background: radial-gradient(circle at 40% 30%, rgba(255, 255, 255, .6), var(--c) 50%); box-shadow: 0 4px 0 rgba(0, 0, 0, .45), 0 0 14px var(--c); }
.look-buttons .lk-tile:active .lk-col { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .45), 0 0 18px var(--c); }
/* mahjong tiles */
.look-mahjong .lk-tile { width: 68px; height: 92px; border-radius: 8px; padding: 6px; background: linear-gradient(#fffcf1, #efe6cf); box-shadow: inset 0 0 0 1px #c9bd9e, 0 6px 0 #3f7f5f, 0 8px 10px rgba(0, 0, 0, .5); }
.look-mahjong .lk-char { font-size: 36px; color: #1e6b47; }
.look-mahjong .lk-tile:nth-child(2n) .lk-char { color: #a3291f; }
.look-mahjong .lk-tile small { color: var(--ink2); }
/* zodiac medallions */
.look-zodiac .lk-tile { width: 88px; height: 88px; border-radius: 50%; background: radial-gradient(circle at 38% 30%, #8fd1b0, #3f8f6c 60%, #1f5a40); box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .15), 0 4px 0 #14382a; }
.look-zodiac .lk-char { font-size: 32px; color: #f4fff8; text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.look-zodiac .lk-tile small { color: #e6fff3; }

/* =====================================================================================
   SHEETS: the notebook, the map, settings, the menu, confirmations
   ===================================================================================== */
.modal-bg.timeup { z-index: 45; } /* above the turn-your-phone note: 0:00 is shown however the phone is held */
.modal-bg { position: fixed; inset: 0; z-index: 20; display: flex; align-items: flex-end; justify-content: center; background: rgba(5, 6, 9, .62); animation: fade .2s; }
.modal { position: relative; width: 100%; max-width: 560px; max-height: 90vh; max-height: 90dvh; overflow-y: auto; overscroll-behavior: contain; padding: 10px 20px calc(20px + var(--sb)); border-radius: 22px 22px 0 0; background: linear-gradient(180deg, #1a1f27, #12161c 160px); box-shadow: 0 -1px 0 var(--brass-dim), 0 -20px 40px rgba(0, 0, 0, .5); animation: up .28s cubic-bezier(.2, .9, .3, 1); }
.modal::before { content: ''; display: block; width: 40px; height: 5px; border-radius: 9px; background: var(--brass-dim); margin: 0 auto 12px; }
@keyframes up { from { transform: translateY(60px); opacity: 0; } }
@keyframes side { from { transform: translateX(100%); } }
.sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.sheet-head h2 { font-size: 28px; }
.sheet-head .seg { flex: 1; max-width: 340px; }
.book-foot { position: sticky; bottom: calc(-20px - var(--sb)); margin: 18px -20px calc(-20px - var(--sb)); padding: 14px 20px calc(16px + var(--sb)); background: linear-gradient(rgba(18, 22, 28, 0), #12161c 30%); }
/* the small centred cards: confirm, time's up, the inspector's hint */
.modal-bg:is(.endConfirm, .accuseConfirm, .timeup, .hintConfirm, .hint, .leaveConfirm, .result, .talk) { align-items: center; padding: 16px max(16px, var(--sr)) 16px max(16px, var(--sl)); }
.modal-bg:is(.endConfirm, .accuseConfirm, .timeup, .hintConfirm, .hint, .leaveConfirm, .result, .talk) .modal { max-width: 400px; border-radius: 18px; padding: 22px 20px 20px; box-shadow: inset 0 0 0 1px var(--brass-dim), 0 20px 50px rgba(0, 0, 0, .6); animation: card-in .24s cubic-bezier(.2, .9, .3, 1); }
.modal-bg:is(.endConfirm, .accuseConfirm, .timeup, .hintConfirm, .hint, .leaveConfirm, .result, .talk) .modal::before { display: none; }
@keyframes card-in { from { transform: scale(.94); opacity: 0; } }
.confirm { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 4px 0 8px; }
.confirm .seal { width: 66px; height: 66px; margin-bottom: 8px; }
.confirm .seal .ico { width: 30px; height: 30px; }
.confirm h2 { font-size: 30px; }
.confirm p { font: calc(15px * var(--fs))/1.4 var(--f-body); }
/* settings and the pause menu: grouped rows */
.grp { margin-top: 14px; }
.grp > small { display: block; margin: 0 4px 6px; font: 700 12px var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--brass); }
.box { border-radius: 14px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--rule); overflow: hidden; }
.it { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 10px 14px; border: 0; background: none; color: var(--text); font: 600 15.5px var(--f-ui); text-align: left; cursor: pointer; }
label.it { font: 600 15.5px var(--f-ui); letter-spacing: 0; text-transform: none; color: var(--text); }
.it + .it { border-top: 1px solid var(--rule); }
.it > .ico { width: 22px; height: 22px; color: var(--brass); }
.it > span { flex: 1; min-width: 0; }
.it small { display: block; margin-top: 1px; font: 500 12.5px var(--f-ui); color: var(--text2); }
.it.danger { color: var(--bad); }
.it.danger > .ico { color: var(--bad); }
.it .chev { display: inline-flex; color: var(--text3); }
.it .chev .ico { width: 18px; height: 18px; }
button.it:active { background: rgba(255, 255, 255, .04); }
.sw { position: relative; width: 48px; height: 28px; flex: none; border-radius: 99px; background: #2a313b; transition: background .2s; }
.sw::after { content: ''; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--text); box-shadow: 0 2px 4px rgba(0, 0, 0, .4); transition: transform .2s; }
.sw.on { background: var(--brass); }
.sw.on::after { transform: translateX(20px); }
.it input[type='range'] { width: 132px; flex: none; accent-color: var(--brass); }
.segs { display: flex; gap: 3px; padding: 3px; flex: none; border-radius: 10px; background: var(--night2); box-shadow: inset 0 0 0 1px var(--rule); }
.segs button { border: 0; background: none; color: var(--text2); padding: 7px 12px; border-radius: 8px; cursor: pointer; font: 650 14px var(--f-ui); }
.segs button.on { background: var(--panel2); color: var(--brass-hi); box-shadow: inset 0 0 0 1px var(--brass-dim); }
.watch-note { display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px var(--f-ui); color: var(--text2); text-align: right; }
.watch-note .ico { color: var(--brass); }
.howto-list li { align-items: flex-start; }
/* the inspector's hint, on a paper slip */
.hint-card { display: grid; justify-items: center; gap: 10px; text-align: center; }
.hint-ic { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: #2a1c08; background: radial-gradient(circle at 35% 30%, #f3d991, #b98c35 60%, #7a5a1e); box-shadow: 0 0 24px rgba(232, 201, 125, .3); }
.hint-ic .ico { width: 30px; height: 30px; }
.hint-q { font: italic calc(15px * var(--fs))/1.4 var(--f-body); color: var(--text2); }
.hint-a { width: 100%; padding: 14px 16px; background: var(--paper); color: var(--ink); font: calc(16px * var(--fs))/1.5 var(--f-type); transform: rotate(-1deg); box-shadow: 0 8px 18px rgba(0, 0, 0, .45); margin: 4px 0 8px; }

/* =====================================================================================
   THE NOTEBOOK, THE CASE BOARD, THE MAP
   ===================================================================================== */
.tabpage h3 { margin: 22px 0 8px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 20px; }
.nb-head { margin: 6px 0 12px; display: grid; gap: 4px; }
.nb-head h2 { font-size: 30px; }
.nb-head small { color: var(--text2); font-size: 13px; }
/* leads: open questions on lined paper; answered ones are crossed out */
.leads { margin: 6px 2px 18px; padding: 12px 16px 14px; color: var(--ink); background: repeating-linear-gradient(transparent 0 27px, rgba(107, 90, 64, .22) 27px 28px), var(--paper); border-radius: 3px; transform: rotate(-.4deg); box-shadow: 0 8px 18px rgba(0, 0, 0, .45); }
.leads h3 { margin: 0 0 4px; color: var(--ink); }
.leads h3 small { font: 13px var(--f-type); color: var(--wax); }
.lead-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lead-list li { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0; font: calc(14.5px * var(--fs))/1.45 var(--f-type); }
.lead-list li .ico { width: 16px; height: 16px; margin-top: 2px; color: var(--wax); }
.lead-list li.shut { color: var(--ink2); text-decoration: line-through; text-decoration-color: rgba(107, 90, 64, .7); }
.lead-list li.shut .ico { color: #4f7a3a; }
.leads .empty { border-color: rgba(42, 33, 23, .3); color: var(--ink2); }
.group-label { margin: 14px 0 8px; display: flex; align-items: center; gap: 8px; font: 700 12px var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--brass); }
.group-label::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--brass-dim), transparent); }
.group-label small { color: var(--text3); font: 600 12px var(--f-ui); letter-spacing: 0; }
/* a clue on paper: its polaroid, its name, what it says */
.clue { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; align-items: start; margin: 10px 0; padding: 12px 14px 14px; border-radius: 3px; color: var(--ink); background: linear-gradient(var(--paper), var(--paper2)); box-shadow: 0 8px 18px rgba(0, 0, 0, .45); }
.clue .pol { box-shadow: 0 3px 8px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(0, 0, 0, .08); }
.clue-tx { min-width: 0; }
.clue-head { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; }
.clue h4 { color: var(--ink); font: 900 19px/1 var(--f-display); }
.clue .tag { flex: none; font: 700 10px var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--wax); border: 1.5px solid currentColor; border-radius: 3px; padding: 2px 5px; white-space: nowrap; }
.clue p { margin-top: 6px; font: calc(14.5px * var(--fs))/1.5 var(--f-type); color: #3a2f20; overflow-wrap: anywhere; }
.clue.said { background: linear-gradient(#e8e3d4, #dad3c0); }
.clue.said p { font: italic calc(16px * var(--fs))/1.45 var(--f-body); color: #2d3340; }
.clue-actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.modal-bg.clue .modal, .modal-bg.result .modal { background: linear-gradient(180deg, #1a1f27, #12161c); }
/* clue lines and picks: a little photo and the name */
.lines, .pick-list { display: grid; gap: 8px; }
.clue-line, .pick-clue { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 7px 12px 7px 8px; border: 0; border-radius: 8px 14px 14px 8px; cursor: pointer; text-align: left; color: var(--text); background: var(--panel); box-shadow: inset 0 0 0 1px var(--rule); font: 600 15px/1.25 var(--f-ui); }
.clue-line b, .pick-clue b { flex: 1; min-width: 0; font-weight: 600; }
.clue-line .chev { display: inline-flex; color: var(--brass); }
.clue-line .chev .ico { width: 18px; height: 18px; }
.clue-line .by-who { display: inline-flex; gap: 2px; }
.clue-line .by-who .tok-art { width: 24px; height: 24px; }
.clue-line .miss, .truth-clue .miss { font: 700 11px var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--text3); }
.none-line { cursor: default; color: var(--text2); background: transparent; box-shadow: inset 0 0 0 1px var(--rule); }
.none-line .clue-icon { width: 40px; height: 40px; display: grid; place-items: center; }
.pick-clue.sel { background: #1f232b; box-shadow: inset 0 0 0 2px var(--brass); }
.pick-clue .tick { display: inline-flex; color: var(--brass-hi); font-style: normal; }
.pick-clue .tick .ico { width: 20px; height: 20px; }
/* the case board: index cards pinned on cork */
.cork { background-color: #8a6642; }
.board-grid, .btime { background-color: #84603d; background-image: radial-gradient(rgba(0, 0, 0, .2) 1px, transparent 1.6px), radial-gradient(rgba(255, 230, 190, .12) 1px, transparent 1.6px); background-size: 7px 7px, 11px 11px; background-position: 0 0, 3px 4px; box-shadow: inset 0 0 0 6px #4a3420, inset 0 0 20px rgba(0, 0, 0, .55); border-radius: 6px; }
.board-grid { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 18px 14px; }
.bcard { position: relative; padding: 12px 12px 10px; border-radius: 2px; color: var(--ink); background: var(--photo); box-shadow: 0 4px 10px rgba(0, 0, 0, .45); display: grid; gap: 8px; }
.bcard::before { content: ''; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--wax-grad); box-shadow: 0 2px 3px rgba(0, 0, 0, .5); }
.bcard.target { cursor: pointer; outline: 2px dashed rgba(42, 33, 23, .45); outline-offset: -5px; }
.bcard.target.on, .btime.target.on { outline: 3px solid var(--brass); outline-offset: -5px; }
.bcard.m-k { box-shadow: 0 0 0 3px var(--wax-hi), 0 4px 10px rgba(0, 0, 0, .45); }
.bcard.m-c { opacity: .6; }
.bhead { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bhead > div { min-width: 0; }
.bhead b { display: block; font: 900 18px/1.05 var(--f-display); text-transform: uppercase; letter-spacing: .02em; }
.bcard .bhead b { color: var(--ink); }
.bhead .where { display: block; font: 12px var(--f-type); color: var(--ink2); }
.bcard .mark { justify-self: start; border: 1.5px solid var(--ink2); background: none; color: var(--ink2); font: 800 11.5px var(--f-display); letter-spacing: .12em; text-transform: uppercase; padding: 4px 8px 3px; border-radius: 3px; cursor: pointer; }
.bcard.m-s .mark { color: #a0660c; border-color: currentColor; transform: rotate(-3deg); }
.bcard.m-k .mark { color: var(--wax); border-color: currentColor; transform: rotate(-4deg); }
.cchips { display: flex; flex-wrap: wrap; gap: 6px; }
.cchip { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 3px 10px 3px 3px; border: 0; border-radius: 6px; cursor: pointer; text-align: left; color: var(--ink); background: #fffaf0; box-shadow: 0 1px 3px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(42, 33, 23, .12); font: 600 12.5px/1.2 var(--f-ui); overflow-wrap: anywhere; }
.cchip .thumb { width: 28px; height: 28px; box-shadow: none; border-radius: 3px; }
.cchip.on { color: var(--paper); background: var(--ink); }
.tabpage > .cchips { margin-bottom: 4px; }
.none { font: italic 13px var(--f-body); color: rgba(255, 245, 225, .8); }
.bcard .none { color: var(--ink2); }
.btime { padding: 14px; min-height: 56px; }
.btime.target { cursor: pointer; outline: 2px dashed rgba(255, 245, 225, .5); outline-offset: -5px; }
.btime ol { list-style: none; margin: 0; padding: 0; counter-reset: t; display: grid; gap: 8px; }
.btime li { display: flex; align-items: center; gap: 8px; counter-increment: t; }
.btime li::before { content: counter(t); width: 22px; flex: none; text-align: center; font: 900 18px var(--f-display); color: var(--paper); text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.btime .cchip { flex: 1; min-width: 0; }
.arrows { display: flex; gap: 4px; flex: none; }
.arrows button { width: 32px; height: 32px; border: 0; border-radius: 50%; padding: 0; display: grid; place-items: center; cursor: pointer; color: var(--ink); background: var(--photo); box-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.arrows button .ico { width: 16px; height: 16px; }
.arrows button:disabled { opacity: .35; cursor: default; }
.pin-sel { position: sticky; top: -10px; z-index: 2; display: flex; gap: 12px; align-items: center; margin: 6px 0 10px; padding: 10px 12px; border-radius: 12px; background: var(--panel2); box-shadow: inset 0 0 0 1.5px var(--brass), 0 8px 18px rgba(0, 0, 0, .5); }
.pin-sel > div { flex: 1; min-width: 0; }
.pin-sel b { display: block; font: 800 16px var(--f-display); letter-spacing: .04em; text-transform: uppercase; }
.pin-sel small { display: block; max-height: min(26vh, 160px); overflow-y: auto; overscroll-behavior: contain; color: var(--text2); font: calc(12.5px * var(--fs))/1.4 var(--f-type); }
/* the map, drawn on paper */
.paper-map { padding: 12px 14px 16px; border-radius: 3px; color: var(--ink); background: radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .25), transparent 60%), var(--paper); box-shadow: 0 8px 18px rgba(0, 0, 0, .45); }
.map-key { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 6px; font: 600 12.5px var(--f-ui); color: var(--ink2); }
.map-key span { display: inline-flex; align-items: center; gap: 6px; }
.map-key .tok-art { width: 16px; height: 16px; }
.map-key i { display: inline-block; }
.k-door { width: 14px; height: 6px; border-radius: 1px; background: #9c7832; box-shadow: 0 0 0 1px var(--ink); }
.k-door.shut { background: var(--wax); }
.k-tick { width: 11px; height: 6px; border-left: 2px solid #4f7a3a; border-bottom: 2px solid #4f7a3a; transform: rotate(-45deg) translate(1px, -2px); }
.k-crime { width: 14px; height: 11px; border: 1.5px solid var(--ink); background: repeating-linear-gradient(45deg, rgba(163, 41, 31, .35) 0 3px, transparent 3px 6px); }
.floor h4 { margin: 12px 0 4px; color: var(--ink); font: 800 14px var(--f-display); letter-spacing: .14em; }
.floor svg { display: block; overflow: visible; }
.cell rect { fill: rgba(42, 33, 23, .03); stroke: var(--ink); stroke-width: 1.6; }
.cell.hall rect, .cell.stairs rect { fill: rgba(42, 33, 23, .09); stroke-width: 1.1; }
.cell.stairs > rect:first-child { stroke-dasharray: 3 2; }
.cell.me > rect:first-child { fill: rgba(201, 162, 74, .38); stroke: #7a5a1e; stroke-width: 2.6; }
.cell rect.tape { stroke: none; }
.hatch { fill: rgba(163, 41, 31, .25); }
.cell text { fill: var(--ink); font: 700 9px var(--f-ui); text-anchor: middle; dominant-baseline: middle; }
.cell.hall text, .cell.stairs text { fill: var(--ink2); }
.cell text.lead { fill: #7a5a1e; font-size: 7.5px; }
.cell path.tick { fill: none; stroke: #3f7a2a; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
g.door rect { fill: #9c7832; stroke: var(--ink); stroke-width: .9; }
g.door.shut rect { fill: var(--wax); }
g.door.jam rect { fill: #c8bca0; stroke-dasharray: 2 1.5; }
g.door .padlock path { stroke: var(--ink); stroke-width: 1.3; }
g.door .padlock rect { fill: var(--paper); stroke: var(--ink); stroke-width: 1; }
line.door.link { stroke: #9c7832; stroke-width: 1.6; stroke-dasharray: 4 3; }
line.door.link.shut { stroke: var(--wax); }

/* ---------- after a round: show one clue, then talk it over ---------- */
.page.share, .page.discuss { padding-top: 4px; }
.share .large-title, .discuss .large-title { font-size: 34px; }
.share .subtitle { margin-bottom: 8px; }
.chat, .net-chat { display: grid; gap: 8px; }
.say { display: flex; gap: 8px; align-items: flex-start; }
.say p { padding: 8px 12px; border-radius: 4px 14px 14px 14px; background: var(--panel2); font: calc(15px * var(--fs))/1.4 var(--f-body); overflow-wrap: anywhere; }
.say p b { display: block; font: 700 12px var(--f-ui); color: var(--text2); }
.say.mine { flex-direction: row-reverse; }
.say.mine p { background: #2c2619; border-radius: 14px 4px 14px 14px; }
.say-box { display: flex; gap: 8px; align-items: center; margin-top: 14px; }
.say-box input { flex: 1; min-width: 0; padding: 12px 14px; border-radius: 99px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--rule); font: 16px var(--f-ui); }
.say-box .btn { min-height: 44px; padding: 0 16px; border-radius: 99px; font-size: 15px; }
.session { display: grid; gap: 8px; margin: 12px 0; padding: 12px 14px; border-radius: 14px; background: var(--panel); }

/* =====================================================================================
   NAMING THE KILLER: a lineup against the height chart, then the case report sealed in wax
   ===================================================================================== */
.page.final { padding-bottom: calc(24px + var(--sb)); }
.final-bar { position: sticky; top: 0; z-index: 5; display: flex; gap: 8px; align-items: center; margin: 0 calc(-1 * var(--side)); padding: calc(10px + var(--st)) var(--side) 10px; background: linear-gradient(var(--night) 70%, rgba(13, 16, 21, 0)); }
.final-bar .watch { margin-left: auto; margin-top: 6px; }
.final-cols { display: grid; gap: 18px; }
.lineup-wall .large-title { font-size: 38px; margin-top: 0; }
.lineup { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 6px; margin-top: 14px; padding: 16px 10px 0; border-radius: 10px; background: repeating-linear-gradient(to bottom, rgba(239, 228, 203, .13) 0 1px, transparent 1px 22px), linear-gradient(#262c36, #171b22); box-shadow: inset 0 0 0 1px var(--rule), inset 0 -40px 40px -20px rgba(0, 0, 0, .5); }
.lineup.n3 { --n: 3; }
.lineup.n5, .lineup.n6 { --n: 3; }
.lineup .sus { position: relative; display: grid; justify-items: center; align-content: end; padding: 0 0 10px; border: 0; background: none; color: var(--text); cursor: pointer; min-width: 0; transition: opacity .2s; }
.lineup .sus .face.lu { position: relative; z-index: 1; filter: brightness(.82) saturate(.85); transition: filter .2s, transform .2s; }
.lineup .sus .spot { position: absolute; inset: -10px -4px 20px; z-index: 0; background: radial-gradient(ellipse at 50% 35%, rgba(255, 240, 200, .38), transparent 65%); opacity: 0; transition: opacity .25s; }
.lineup .sus .num { position: absolute; top: 2px; left: 2px; z-index: 2; min-width: 22px; padding: 2px 5px 1px; border-radius: 3px; font: 900 14px/1 var(--f-display); color: var(--brass-hi); background: rgba(12, 15, 20, .7); }
.lineup .sus .nm { position: relative; z-index: 2; margin-top: 4px; padding: 3px 6px 2px; border-radius: 3px; font: 800 13px/1.1 var(--f-display); letter-spacing: .05em; text-transform: uppercase; text-align: center; background: rgba(12, 15, 20, .72); overflow-wrap: anywhere; }
.lineup .sus.pick .spot { opacity: 1; }
.lineup .sus.pick .face.lu { filter: brightness(1.08); transform: scale(1.04); }
.lineup .sus.pick .num { background: var(--wax-hi); color: #fff; }
.lineup .sus.pick .nm { color: #20180b; background: var(--brass-grad); }
.lineup .sus.dim { opacity: .5; }
.report { position: relative; padding: 16px 16px 18px; border-radius: 3px; color: var(--ink); background: linear-gradient(var(--paper), var(--paper2)); box-shadow: 0 10px 24px rgba(0, 0, 0, .5); }
.rep-h { display: block; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 2px solid var(--ink); font: 13px var(--f-type); letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); }
.rq0, .rq > p { font: calc(15px * var(--fs))/1.7 var(--f-type); }
.rq0 { margin-bottom: 12px; }
.report .w { display: inline-block; margin-right: 4px; font: 800 13px var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--wax); }
.blank { display: inline-block; min-width: 110px; padding: 0 6px; border-bottom: 1.5px solid var(--ink); font: italic 600 calc(16px * var(--fs))/1.3 var(--f-body); color: var(--ink-blue); }
.blank.empty { color: transparent; }
.bank { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 14px; }
.bank button { padding: 8px 11px; border: 1.5px solid rgba(42, 33, 23, .35); border-radius: 6px; cursor: pointer; color: var(--ink); background: rgba(255, 255, 255, .4); font: 600 13.5px/1.25 var(--f-ui); text-align: left; }
.bank button.on { color: var(--paper); background: var(--ink); border-color: var(--ink); }
/* the seal: hold it down for a second, the ring fills, then it presses (js/moments.js) */
.holdseal { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 16px; padding-top: 16px; border-top: 1.5px dashed rgba(42, 33, 23, .3); }
.seal-btn { position: relative; width: 88px; height: 88px; flex: none; border: 0; padding: 0; border-radius: 50%; cursor: pointer; background: none; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.seal-btn::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; border: 5px solid rgba(42, 33, 23, .14); }
.seal-btn .ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.seal-btn .ring circle { fill: none; stroke: var(--wax-hi); stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--p, 0)); }
.seal-btn .seal { position: absolute; inset: 15px; width: auto; height: auto; transition: transform .15s; }
.seal-btn .seal .ico { width: 28px; height: 28px; }
.seal-btn.holding .seal { transform: scale(.9); }
.seal-btn:disabled { cursor: default; }
.hs-tx { display: grid; gap: 2px; font: 800 22px/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.hs-tx small { font: 500 12.5px/1.3 var(--f-ui); letter-spacing: 0; text-transform: none; color: var(--ink2); }
.holdseal.off { opacity: .6; }
.holdseal.off .seal { filter: grayscale(.6); }

/* =====================================================================================
   THE END: Case Closed in the morning paper, the night replayed, the whole story
   ===================================================================================== */
.page.over { padding-top: 2px; }
.over .seg.five { position: sticky; top: 0; z-index: 4; margin: 0 calc(-1 * var(--side)) 4px; padding: 4px; border-radius: 0; box-shadow: 0 1px 0 var(--rule); }
.over .seg.five button { font-size: 13px; letter-spacing: .08em; padding: 0 2px; }
.res-split { display: grid; gap: 0 32px; }
.res-split > div { min-width: 0; }
.news { position: relative; margin: 14px 2px 18px; padding: 14px 16px 18px; color: #1d1a15; background: radial-gradient(ellipse at 20% 10%, rgba(255, 255, 255, .35), transparent 50%), #ede3cb; transform: rotate(-.6deg); box-shadow: 0 14px 30px rgba(0, 0, 0, .55); animation: paper-in .5s cubic-bezier(.2, .9, .3, 1); }
@keyframes paper-in { from { opacity: 0; transform: rotate(-8deg) scale(.85) translateY(30px); } }
.mast { padding-bottom: 6px; border-bottom: 3px double #1d1a15; text-align: center; font: 36px/1 'UnifrakturMaguntia', var(--f-zh), serif; }
:lang(zh) .mast { font: 900 30px/1.1 var(--f-zh); letter-spacing: .3em; }
.dl { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 10px; padding: 4px 0; border-bottom: 1px solid #1d1a15; font: 11px var(--f-type); letter-spacing: .08em; text-transform: uppercase; }
.hl { margin: 6px 0 12px; text-align: center; font: 900 36px/.9 var(--f-display); color: #15120e; }
:lang(zh) .hl { font: 900 28px/1.2 var(--f-zh); }
.ncols { display: grid; grid-template-columns: 38% minmax(0, 1fr); gap: 12px; }
.nphoto { margin: 0; }
.nphoto img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #8f8a80; filter: grayscale(1) contrast(1.25) brightness(.95); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); }
.nphoto figcaption { margin-top: 4px; font: italic 11.5px/1.3 var(--f-body); }
.nstory p { font: calc(13.5px * var(--fs))/1.45 var(--f-body); hyphens: auto; }
.nstory p + p { margin-top: 6px; }
.nstory .deck { font-weight: 600; font-style: italic; }
.news > .stamp { right: 10px; bottom: 16px; font-size: 22px; --sr2: -10deg; background: rgba(237, 227, 203, .6); mix-blend-mode: multiply; animation: stamp-in .3s .55s cubic-bezier(.3, 1.6, .5, 1) both; }
.news > .stamp.miss { color: #3d5a8a; }
.seals { display: flex; justify-content: center; gap: 12px; margin: 8px 0 14px; flex-wrap: wrap; }
.sq { display: grid; justify-items: center; gap: 5px; }
.sq small { font: 700 11px var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--text2); }
.sq.ok .seal { animation: pop .4s both; }
.sq:nth-child(2) .seal { animation-delay: .1s; }
.sq:nth-child(3) .seal { animation-delay: .2s; }
.sq:nth-child(4) .seal { animation-delay: .3s; }
.sq:nth-child(5) .seal { animation-delay: .4s; }
.stars { display: flex; justify-content: center; gap: 16px; margin: 6px 0 8px; }
.star { display: grid; justify-items: center; gap: 4px; max-width: 98px; text-align: center; color: var(--text3); }
.star .ico { width: 34px; height: 34px; }
.star.on { color: var(--brass-hi); }
.star.on .ico { fill: currentColor; filter: drop-shadow(0 0 8px rgba(232, 201, 125, .45)); }
.star small { font: 600 11.5px/1.25 var(--f-ui); }
.xpbar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; margin: 14px 0 6px; }
.xpbar .rk { font: 800 14px var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--brass-hi); }
.xpbar .b { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.xpbar .b i { display: block; height: 100%; width: var(--to); background: linear-gradient(90deg, #b98c35, #f0d48e); animation: xp 1.2s .5s cubic-bezier(.3, .7, .3, 1) both; }
@keyframes xp { from { width: var(--from); } }
.xpbar .plus { font: 800 15px var(--f-display); color: var(--ok); }
.rankup { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 8px 0; font: 800 19px var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--brass-hi); animation: pop .5s .9s both; }
.medal-row { display: flex; gap: 12px; align-items: center; margin-top: 8px; padding: 8px 12px; border-radius: 12px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--brass-dim); }
.medal-row b { display: block; font: 800 16px var(--f-display); letter-spacing: .04em; text-transform: uppercase; }
.medal-row small { color: var(--text2); font-size: 13px; }
.duel { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; margin-top: 8px; padding: 14px; border-radius: 14px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--rule); }
.duel .side { display: grid; justify-items: center; gap: 4px; text-align: center; min-width: 0; }
.duel .side b { font: 800 16px var(--f-display); letter-spacing: .06em; text-transform: uppercase; overflow-wrap: anywhere; }
.duel .side small { font-size: 12px; color: var(--text2); }
.duel .side.win .av { box-shadow: 0 0 0 2px var(--brass-hi), 0 0 16px rgba(232, 201, 125, .4); }
.big-num { font: 900 44px/1 var(--f-display); color: var(--brass-hi); font-variant-numeric: tabular-nums; }
.vs { font: italic 600 16px var(--f-body); color: var(--text3); }
.duel-tx { margin: 8px 0 12px; text-align: center; font: italic calc(16px * var(--fs)) var(--f-body); }
.answers { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.answers li { display: grid; gap: 2px; padding: 10px 14px; border-radius: 10px; background: var(--panel); box-shadow: inset 4px 0 0 var(--ok); }
.answers li.bad { box-shadow: inset 4px 0 0 var(--wax-hi); }
.answers small { color: var(--text2); font-size: 13px; }
.answers b { font: 800 17px/1.15 var(--f-display); letter-spacing: .03em; text-transform: uppercase; }
.answers em { font: 600 13px var(--f-ui); font-style: normal; color: #ff8a78; }
/* the night replayed, one frame per moment */
.replay { display: grid; gap: 12px; margin-top: 12px; }
.board-frame { position: relative; width: 100%; aspect-ratio: 4 / 3.4; max-height: calc(100dvh - 230px); min-height: 260px; overflow: hidden; border-radius: 6px; background: #0a0d13; box-shadow: inset 0 0 0 1px var(--brass-dim), 0 14px 30px rgba(0, 0, 0, .5); animation: frame-in .45s ease-out; }
@keyframes frame-in { from { opacity: .2; transform: scale(.985); } }
.rp-art { position: absolute; inset: 0; opacity: .6; }
.rp-art .banner { width: 100%; height: 100%; display: block; }
.rp-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(10, 13, 19, .2), rgba(10, 13, 19, .9) 85%); }
.board-frame time { position: absolute; top: 10px; left: 14px; z-index: 1; font: 900 30px var(--f-display); color: var(--brass-hi); text-shadow: 0 2px 8px rgba(0, 0, 0, .6); }
.rp-cast { position: absolute; left: 10px; right: 10px; top: 18%; z-index: 1; display: flex; justify-content: center; gap: 12px; }
.rp-cast .pol { width: 27%; max-width: 132px; padding: 6px 6px 24px; }
.rp-cast .pol.killer { box-shadow: 0 0 0 3px var(--wax-hi), 0 8px 18px rgba(0, 0, 0, .5); }
.rp-cast .pol figcaption { font-size: 12px; }
.rp-none { display: grid; place-items: center; width: 80px; height: 80px; color: var(--brass-dim); }
.rp-none .ico { width: 48px; height: 48px; }
.rp-line { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 1; padding: 10px 12px; border-radius: 2px; color: var(--ink); background: var(--paper); font: calc(14.5px * var(--fs))/1.45 var(--f-type); transform: rotate(-.6deg); box-shadow: 0 6px 14px rgba(0, 0, 0, .5); }
.rp-ctl { display: flex; justify-content: center; align-items: center; gap: 14px; }
.rp-ctl .btn { min-width: 170px; }
.rp-dots { display: flex; justify-content: center; gap: 7px; flex-wrap: wrap; }
.rp-dots i { width: 7px; height: 7px; transform: rotate(45deg); background: rgba(255, 255, 255, .16); }
.rp-dots i.past { background: var(--brass-dim); }
.rp-dots i.on { background: var(--brass-hi); }
/* the story, the people, the clues */
.plot { display: grid; gap: 12px; margin-top: 16px; font: calc(17px * var(--fs))/1.6 var(--f-body); }
.timeline { list-style: none; padding: 0; margin: 4px 0 0; }
.timeline li { position: relative; display: flex; flex-direction: column; margin-left: 5px; padding: 0 0 16px 22px; border-left: 2px solid var(--rule); font: calc(15px * var(--fs))/1.45 var(--f-body); }
.timeline li:last-child { border-left-color: transparent; }
.timeline li::before { content: ''; position: absolute; left: -7px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--brass); }
.timeline time { font: 800 14px var(--f-display); letter-spacing: .06em; color: var(--brass-hi); }
.people-grid { display: grid; gap: 12px; margin-top: 6px; }
.truth-person { padding: 14px; border-radius: 14px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--rule); }
.truth-person.killer { box-shadow: inset 0 0 0 2px var(--wax-hi); }
.truth-person > p { margin-top: 10px; font: calc(15px * var(--fs))/1.5 var(--f-body); color: #d9cfbb; }
.role { display: inline-block; margin-top: 6px; padding: 3px 8px 2px; border: 1.5px solid var(--rule); border-radius: 3px; font: 800 11px var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--text2); }
.truth-person.killer .role { color: var(--wax-hi); border-color: currentColor; transform: rotate(-3deg); }
.flow { list-style: none; padding: 0; margin: 14px 0 0; }
.flow li { position: relative; display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 10px; padding: 0 0 12px; font: calc(14.5px * var(--fs))/1.45 var(--f-body); }
.flow li::before { content: ''; position: absolute; left: 76px; top: 6px; bottom: -6px; width: 2px; background: var(--rule); }
.flow li:last-child::before { display: none; }
.flow time { padding-top: 1px; text-align: right; font: 800 13px var(--f-display); letter-spacing: .04em; color: var(--brass); }
.flow span { position: relative; padding-left: 12px; }
.flow span::before { content: ''; position: absolute; left: -4px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--brass); }
.truth-person.killer .flow span::before { background: var(--wax-hi); }
.hid-title { margin-top: 14px; }
.hidden-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 12px; }
.hidden-list li { display: grid; gap: 8px; }
.hid-what { font: calc(15px * var(--fs))/1.45 var(--f-body); color: var(--text); }
.truth-clue { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; align-items: start; margin: 10px 0; padding: 12px 14px 14px; border-radius: 3px; color: var(--ink); background: linear-gradient(var(--paper), var(--paper2)); box-shadow: 0 8px 18px rgba(0, 0, 0, .45); }
.truth-clue.key { box-shadow: inset 4px 0 0 var(--brass), 0 8px 18px rgba(0, 0, 0, .45); }
.truth-clue.missed .pol { filter: grayscale(.8) brightness(.9); }
.truth-clue h4 { color: var(--ink); font: 900 18px/1 var(--f-display); }
.truth-clue p { margin-top: 6px; font: calc(14px * var(--fs))/1.5 var(--f-type); color: #3a2f20; }
.truth-clue .by { display: inline-flex; gap: 2px; flex: none; }
.truth-clue .by .tok-art { width: 22px; height: 22px; }
.truth-clue .miss { color: var(--ink2); }

/* =====================================================================================
   ONLINE ROOMS (js/online.js)
   ===================================================================================== */
.net-stories { display: grid; gap: 8px; }
.net-story { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; border: 0; border-radius: 14px; cursor: pointer; color: inherit; text-align: left; background: var(--panel); box-shadow: inset 0 0 0 1px var(--rule); font: inherit; }
.net-story.on:not(.static) { box-shadow: inset 0 0 0 2px var(--brass); }
.net-story.static { cursor: default; margin-bottom: 4px; }
.net-cover { position: relative; width: 64px; height: 52px; flex: none; overflow: hidden; border-radius: 8px; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(232, 201, 125, .3); }
.net-cover .banner { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.net-cover .emblem { width: 36px; height: 36px; }
.net-st { flex: 1; min-width: 0; display: grid; gap: 2px; }
.net-st b { font: 800 17px/1.1 var(--f-display); letter-spacing: .04em; text-transform: uppercase; }
.net-st small { display: flex; align-items: center; gap: 6px; color: var(--text2); font-size: 13px; }
.net-st .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--wax-hi); }
.net-st .dot.easy { background: var(--ok); }
.net-st .dot.medium { background: var(--brass-hi); }
.net-story .tick { display: inline-flex; color: var(--brass-hi); font-style: normal; padding-right: 4px; }
.net-err { margin-top: 12px; text-align: center; color: var(--bad); font-size: 14px; }
.net-code { display: flex; gap: 10px; justify-content: center; margin: 10px 0 8px; }
.net-code span { width: 58px; height: 70px; border-radius: 8px; display: grid; place-items: center; font: 900 40px var(--f-display); color: var(--brass-hi); background: linear-gradient(#2a2418, #17140f); box-shadow: inset 0 0 0 1px #7d5f22, inset 0 1px 0 rgba(228, 194, 122, .2), 0 3px 0 #0a0907; }
.net-lobby .col-main > .eyebrow { text-align: center; margin-top: 8px; }
.net-code-in { text-align: center; padding: 14px 0 14px .4em; border-radius: 12px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--rule); font: 900 40px var(--f-display); letter-spacing: .4em; text-transform: uppercase; color: var(--brass-hi); }
.net-status { display: block; color: var(--text2); font-size: 13px; }
.net-status.ok { color: var(--ok); }
.net-chat { max-height: 40vh; overflow-y: auto; }
.net-wait .net-clock { display: inline-flex; padding: 8px 16px; border-radius: 99px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--brass-dim); font: 800 24px var(--f-display); color: var(--brass-hi); font-variant-numeric: tabular-nums; }
.kits { display: grid; gap: 10px; }
.kit-card { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; border: 0; border-radius: 14px; cursor: pointer; color: var(--text); text-align: left; background: var(--panel); box-shadow: inset 0 0 0 1px var(--rule); font: inherit; }
.kit-card.on { box-shadow: inset 0 0 0 2px var(--brass); }
.kit-card:not(.on):not(:disabled) { box-shadow: inset 0 0 0 1.5px var(--brass-dim); }
.kit-card:disabled { cursor: default; }
.kit-ic { width: 46px; height: 46px; flex: none; border-radius: 12px; display: grid; place-items: center; color: var(--brass-hi); background: var(--panel2); box-shadow: inset 0 0 0 1px var(--brass-dim); }
.kit-ic .ico { width: 24px; height: 24px; }
.kit-tx { flex: 1; min-width: 0; }
.kit-tx b { display: block; font: 800 17px var(--f-display); letter-spacing: .04em; text-transform: uppercase; }
.kit-tx small { display: block; margin-top: 2px; color: var(--text2); font: calc(14px * var(--fs))/1.4 var(--f-body); }
.kit-who { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: none; min-width: 44px; }
.kit-who .tok-art { width: 28px; height: 28px; }
.kit-who small { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text2); font-size: 11px; }

/* =====================================================================================
   MESSAGES AND MOMENTS
   ===================================================================================== */
.toast { position: fixed; left: 50%; bottom: calc(96px + var(--sb)); z-index: 30; transform: translateX(-50%); max-width: min(90vw, 440px); padding: 12px 18px; border-radius: 3px; color: var(--ink); background: var(--paper); text-align: center; font: 600 14.5px/1.4 var(--f-ui); box-shadow: 0 10px 28px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(107, 90, 64, .3); animation: toast-in .25s ease-out; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 14px); } }
.toast.slip { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px 12px 12px; text-align: left; }
.slip-ic { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #5a4418; background: rgba(107, 90, 64, .14); box-shadow: inset 0 0 0 1px rgba(107, 90, 64, .35); }
.slip-ic .ico { width: 18px; height: 18px; }
.slip-tx { min-width: 0; }
.slip-tx b { display: block; margin-bottom: 2px; font: 900 17px/1.05 var(--f-display); letter-spacing: .03em; text-transform: uppercase; }
.slip-tx p { font: calc(14px * var(--fs))/1.45 var(--f-type); white-space: pre-line; }
.fx { position: fixed; z-index: 60; pointer-events: none; }
.fx.flash { inset: 0; background: radial-gradient(circle at 55% 45%, rgba(255, 250, 235, .95), rgba(255, 250, 235, .45) 40%, rgba(255, 250, 235, 0) 75%); animation: flash .6s ease-out both; }
@keyframes flash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
.fx.minus { left: 50%; top: 50%; font: 900 56px/1 var(--f-display); color: var(--wax-hi); text-shadow: 0 4px 18px rgba(0, 0, 0, .7), 0 0 2px #000; transform: translate(-50%, -50%); animation: minus 1.05s cubic-bezier(.5, 0, .6, 1) both; }
@keyframes minus {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
  15% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  45% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: .2; transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px))) scale(.3); }
}
body.shake .fp, body.shake #app { animation: shake .38s linear; }
@keyframes shake { 20% { transform: translate(5px, -2px); } 40% { transform: translate(-5px, 2px); } 60% { transform: translate(3px, 1px); } 80% { transform: translate(-2px, -1px); } }

/* Start fades the round card to black, the house is built behind it, then the black lifts */
#veil { position: fixed; inset: 0; z-index: 9999; background: #000; opacity: 0; pointer-events: none; display: grid; place-items: center; visibility: hidden; }
#veil.on { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .7s ease-in; }
#veil.lift { opacity: 0; visibility: visible; pointer-events: none; transition: opacity 1s ease-out; }
.veil-tx { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; opacity: 0; transform: translateY(6px); }
#veil.on .veil-tx { opacity: 1; transform: none; transition: opacity .5s .35s ease, transform .6s .35s ease; }
#veil.lift .veil-tx { opacity: 0; transition: opacity .3s ease; }
.veil-tx small { font: 15px var(--f-type); letter-spacing: .08em; color: var(--brass-hi); }
.veil-tx b { font: 900 54px/.9 var(--f-display); text-transform: uppercase; color: var(--paper); }
:lang(zh) .veil-tx b { font-family: var(--f-zh); }

/* Redraws (the clock, the other phone) must not replay an opening animation (main.js marks what was already on screen). */
body[data-still-modal] :is(.modal-bg, .modal, .fp-float, .lock-bg, .quote, .quote .stamp, .ff-found .pol, .ff-found .slip, .ff-found > .stamp),
body[data-still-toast] .toast, body[data-still-screen] :is(.fp-hint span, .news, .news > .stamp, .xpbar .b i, .rankup, .sq .seal, .bag .slot.on, .feed) { animation: none; }
/* Less motion (Settings, or the phone asks for it): no animations, no flying seconds (moments.js) */
html.calm *, html.calm *::before, html.calm *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
html.calm .sh-item { transition: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* =====================================================================================
   SMALL PHONES
   ===================================================================================== */
@media (max-width: 380px) {
  :root { --side: 16px; }
  .large-title { font-size: 34px; }
  .who-head { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; }
  .who-head .poster { width: 76px; }
  .who-head .large-title { font-size: 26px; }
  .pols { gap: 18px 12px; }
  .clue, .truth-clue { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; }
  .pol.sm { width: 76px; }
  .seals { gap: 8px; }
  .seals .seal { width: 40px; height: 40px; }
  .stars { gap: 8px; }
  .lineup-wall .large-title { font-size: 32px; }
  .net-code span { width: 50px; height: 60px; font-size: 34px; }
  .modal { padding-left: 16px; padding-right: 16px; }
  .book-foot { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
  .over .seg.five button { font-size: 12px; letter-spacing: .04em; }
}
@media (max-height: 700px) and (orientation: portrait) {
  .sh-logo { margin-top: 8px; font-size: 22px; }
  .sh-stage { margin-top: 6px; }
  .sh-blurb { font-size: calc(14px * var(--fs)); line-height: 1.4; }
  .shelf { --pw: min(64vw, 290px, calc((100dvh - 380px) * .705)); }
  .sh-cta .btn.primary { min-height: 52px; }
}

/* =====================================================================================
   A PHONE HELD SIDEWAYS: everything must fit in about 360 px of height
   ===================================================================================== */
@media (orientation: landscape) and (max-height: 500px) {
  .large-title { font-size: 30px; }
  .center-page { justify-content: flex-start; gap: 8px; padding-top: 54px; min-height: 0; }
  .center-page h1 { font-size: 28px; }
  .av.xl { width: 60px; height: 60px; }
  .sticky-cta { padding-top: 10px; padding-bottom: calc(8px + var(--sb)); }

  /* the shelf: posters on the left, the case and Play on the right; the tabs join the top bar */
  .shelf { --pw: calc((100dvh - 92px) * .705); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: 'top top' 'stage logo' 'stage info'; padding-bottom: 0; }
  .sh-top { grid-area: top; padding-top: calc(8px + var(--st)); }
  .sh-bg { height: 100%; inset: -40px; }
  .shelf::before { background: linear-gradient(90deg, rgba(11, 14, 19, .2), rgba(11, 14, 19, .7) 50%, var(--night) 80%); }
  .sh-logo { grid-area: logo; margin: 0; padding: 0 20px; font-size: 22px; align-self: end; }
  .sh-stage { grid-area: stage; margin: 0; align-self: center; }
  .sh-track { padding-top: 4px; padding-bottom: calc(8px + var(--sb)); }
  .sh-info { grid-area: info; align-content: center; gap: 6px; padding-bottom: calc(8px + var(--sb)); padding-left: 12px; }
  .sh-blurb { font-size: 14.5px; }
  .sh-cta { gap: 8px; }
  .sh-cta .btn.primary { min-height: 48px; font-size: 18px; }
  .sh-cta .btn.ghost { min-height: 40px; font-size: 14px; }
  .tabbar { top: calc(8px + var(--st)); bottom: auto; left: auto; right: calc(max(18px, var(--sr)) + 56px); height: 44px; padding: 0; gap: 6px; background: none; border: 0; }
  .tabbar button { width: auto; grid-auto-flow: column; align-items: center; align-content: center; gap: 6px; padding: 0 10px; border-radius: 99px; background: rgba(12, 15, 20, .55); }
  .tabbar button.on { box-shadow: inset 0 0 0 1.5px var(--brass-dim); }
  .tabbar .ico { width: 20px; height: 20px; }
  .page.record { padding-bottom: 24px; padding-top: calc(62px + var(--st)); }
  .page.record > .large-title { position: absolute; top: calc(10px + var(--st)); left: max(var(--side), var(--sl)); margin: 0; font-size: 28px; }

  /* the case file: the folder on the left, the suspects on the right */
  .cf-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 24px; }
  .folder { margin-top: 30px; }
  .pols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cf-side { position: relative; }

  /* the round card: the whole screen, the picture on the left, the rest on the right */
  .turn-start { position: fixed; inset: 0; z-index: 5; max-width: none; width: auto; height: auto; min-height: 0; margin: 0; background: var(--night);
    padding: max(12px, var(--st)) max(16px, var(--sr)) max(12px, var(--sb)) max(16px, var(--sl));
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: stretch; align-content: stretch; gap: 16px; }
  .ts-art { aspect-ratio: auto; height: auto; min-height: 0; }
  .ts-art-tx b { font-size: 38px; }
  .ts-side { justify-content: safe center; overflow-y: auto; min-height: 0; gap: 10px; }
  .ts-event { padding: 10px 12px; }
  .ts-event p { font-size: calc(13.5px * var(--fs)); line-height: 1.45; }
  .ts-who .face.sm { width: 38px; height: 38px; }
  .ts-who small { font-size: 10.5px; }
  .ts-time { flex-direction: row; align-items: baseline; justify-content: center; gap: 10px; padding: 0; }
  .ts-time span { font-size: 40px; }
  .ts-time small { margin: 0; }
  .ts-side > .btn.primary { min-height: 46px; }
  .ts-side:has(.ts-gift) .ts-cast { display: none; }
  .ts-gift { padding: 8px 10px; }

  /* the house HUD: a little smaller so the room is what you see */
  :root { --mini-w: 118px; }
  .fp .fp-mini { height: 86px; }
  .watch { width: 56px; height: 56px; }
  .watch b { font-size: 16px; }
  .hud-l { top: calc(12px + var(--st)); gap: 10px; }
  .hud-place { top: calc(80px + var(--st)); }
  .lead-pill { top: calc(114px + var(--st)); }
  .hud-btn { width: 42px; height: 42px; }
  .hud-btn .ico { width: 20px; height: 20px; }
  .hud-r { gap: 8px; right: calc(var(--mini-w) + 22px + var(--sr)); }
  .fp-stick { left: 110px; top: calc(100% - 100px - var(--sb)); }
  .fp-hint span { bottom: calc(165px + var(--sb)); font-size: 12px; padding: 7px 10px; }
  .fp-hint .r { bottom: calc(70px + var(--sb)); }
  body.fp-on .toast { top: calc(64px + var(--st)); }
  .fp-float { width: min(300px, 40vw); padding: 10px; gap: 7px; }
  .ff-found { grid-template-columns: 92px minmax(0, 1fr); }
  .ff-found .pol { width: 92px; }
  .ff-found > .stamp { top: 58px; font-size: 13px; }

  /* locks: the lock on the left, its note beside it */
  .lk-stage { grid-template-columns: auto minmax(0, 300px); justify-content: center; align-items: center; gap: 28px; padding-top: 0; }
  .lk-bar { padding-top: calc(6px + var(--st)); }
  .shackle { height: 54px; margin-bottom: -30px; border-width: 12px; }
  .pad { padding: 16px 16px 14px; }
  .wheel { grid-template-rows: 32px 18px 40px 18px 32px; width: 52px; }
  .wheel b { font-size: 30px; line-height: 40px; }
  .padlock-big { gap: 12px; }
  .pull { min-height: 46px; font-size: 17px; }
  .disc { width: min(240px, calc(100dvh - 150px)); min-width: 170px; }
  .dial { gap: 14px; }
  .dial.words .disc { width: min(420px, 52vw); }
  .dial.words .disc button { min-height: 52px; }
  .tiles-lock { gap: 12px; }
  .look-books .lk-tile { height: 128px; }
  .look-books .lk-tile:nth-child(2n) { height: 118px; }
  .look-books .lk-tile:nth-child(3n) { height: 136px; }
  .look-piano .lk-tile { height: 136px; width: 42px; }
  .lk-tile { min-width: 64px; min-height: 64px; }
  .look-lamps .lk-tile, .look-zodiac .lk-tile { width: 76px; height: 76px; }
  .look-valves .lk-tile, .look-buttons .lk-tile { width: 80px; height: 86px; }
  .look-mahjong .lk-tile { width: 60px; height: 82px; }
  .note-pin { padding: 12px 14px; }

  /* sheets open from the right so the house stays in view; small cards stay centred */
  .modal-bg:not(:is(.endConfirm, .accuseConfirm, .timeup, .hintConfirm, .hint, .leaveConfirm, .result, .talk)) { justify-content: flex-end; align-items: stretch; }
  .modal-bg:not(:is(.endConfirm, .accuseConfirm, .timeup, .hintConfirm, .hint, .leaveConfirm, .result, .talk)) .modal { width: min(56vw, 480px); max-height: none; height: 100%; border-radius: 16px 0 0 16px; padding: calc(14px + var(--st)) max(18px, var(--sr)) calc(16px + var(--sb)) 18px; box-shadow: -1px 0 0 var(--brass-dim), -14px 0 30px rgba(0, 0, 0, .5); animation: side .26s cubic-bezier(.2, .9, .3, 1); }
  .modal-bg:not(:is(.endConfirm, .accuseConfirm, .timeup, .hintConfirm, .hint, .leaveConfirm, .result, .talk)) .modal::before { display: none; }
  .modal-bg:is(.endConfirm, .accuseConfirm, .timeup, .hintConfirm, .hint, .leaveConfirm) .modal { max-height: calc(100dvh - 24px); padding: 16px 18px; }
  .confirm .seal { width: 52px; height: 52px; margin-bottom: 2px; }
  .confirm h2 { font-size: 26px; }
  .book-foot { margin-left: -18px; margin-right: calc(-1 * max(18px, var(--sr))); padding-left: 18px; padding-right: max(18px, var(--sr)); }
  .hint-ic { width: 48px; height: 48px; }
  .sheet-head h2 { font-size: 23px; }
  .book-foot .btn { min-height: 42px; font-size: 16px; }

  /* naming the killer: the lineup on the left, the report on the right */
  .final-cols { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; gap: 18px; }
  .lineup, .lineup.n5, .lineup.n6 { --n: 5; }
  .lineup.n4 { --n: 4; }
  .lineup.n3 { --n: 3; }
  .lineup-wall .large-title { font-size: 30px; }
  .lineup-wall { position: sticky; top: 68px; }
  .final-bar { padding-top: calc(6px + var(--st)); padding-bottom: 6px; }

  /* the end: the paper beside the scores */
  .res-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .board-frame { aspect-ratio: auto; height: calc(100dvh - 170px); min-height: 200px; max-height: none; }
  .rp-cast { top: 16%; }
  .rp-cast .pol { width: min(18%, 21dvh); }
  .people-grid { grid-template-columns: 1fr 1fr; }
  .over .sticky-cta.row-cta { position: static; max-width: 520px; margin-left: auto; width: 100%; background: none; padding-top: 12px; }
}

/* =====================================================================================
   TABLETS AND WIDE SCREENS (640 px and up): use the width, no black bands at the sides
   ===================================================================================== */
@media (min-width: 640px) {
  body:not(.fp-on) { --side: max(28px, var(--sl), var(--sr)); }
  #app { max-width: none; }
  .page .cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr); gap: 32px; align-items: start; }
  .col-main, .col-side { display: block; min-width: 0; }
  .col-side { position: sticky; top: 12px; }
  .col-main > :first-child, .col-side > :first-child { margin-top: 0; }
  .col-side .sticky-cta { position: static; background: none; padding: 16px 0 0; }
  .page.who, .page.record, .page.share, .page.discuss, .page.over, .page.final, .page.casefile { width: 100%; max-width: 1180px; margin: 0 auto; }
  .page.share { max-width: 760px; }
  .page.discuss { max-width: 1100px; }
  .share .pick-list { grid-template-columns: 1fr 1fr; }
  .rec-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 32px; align-items: start; }
  .cf-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px; align-items: start; }
  .pols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .final-cols { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; gap: 28px; }
  .lineup, .lineup.n5, .lineup.n6 { --n: 5; }
  .lineup.n4 { --n: 4; }
  .lineup.n3 { --n: 3; }
  .res-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .people-grid { grid-template-columns: 1fr 1fr; }
  .over .sticky-cta.row-cta { display: flex; justify-content: flex-end; margin: 0 calc(-1 * var(--side)); padding-left: var(--side); padding-right: var(--side); }
  .over .sticky-cta.row-cta .btn { width: 250px; }
  .over .seg.five { max-width: 640px; margin: 0 auto 6px; width: 100%; border-radius: 12px; }
  .center-page > .card, .center-page > .group { width: 100%; max-width: 560px; }
  .nstory p { text-align: justify; }
}
/* the shelf on a tablet held upright: bigger posters */
@media (min-width: 640px) and (orientation: portrait) {
  .shelf { --pw: min(46vw, 380px, calc((100dvh - 470px) * .705)); }
  .sh-logo { font-size: 32px; margin-top: 22px; }
  .sh-blurb { font-size: 17px; }
}
/* tablets and computers sideways: posters on the left, the case on the right */
@media (min-width: 900px) and (min-height: 501px) and (orientation: landscape) {
  .shelf { --pw: min(320px, calc((100dvh - 200px) * .705)); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(360px, 1fr); grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: 'top top' 'stage logo' 'stage info'; padding-bottom: 0; }
  .sh-top { grid-area: top; padding-top: calc(18px + var(--st)); padding-left: max(28px, var(--sl)); padding-right: max(24px, var(--sr)); }
  .sh-bg { height: 100%; inset: -40px; }
  .shelf::before { background: linear-gradient(90deg, rgba(11, 14, 19, .1), rgba(11, 14, 19, .6) 50%, var(--night) 85%); }
  .sh-logo { grid-area: logo; margin: 0; padding: 0 40px 0 20px; font-size: 34px; align-self: end; text-align: left; }
  .sh-stage { grid-area: stage; margin: 0; align-self: center; }
  .sh-info { grid-area: info; justify-items: start; text-align: left; align-content: center; padding: 0 max(40px, var(--sr)) 40px 20px; }
  .sh-dots, .sh-status { justify-content: flex-start; }
  .sh-blurb { font-size: 17px; }
  .tabbar { top: calc(18px + var(--st)); bottom: auto; left: auto; right: calc(max(24px, var(--sr)) + 58px); height: 44px; padding: 0; gap: 8px; background: none; border: 0; }
  .tabbar button { width: auto; grid-auto-flow: column; align-items: center; align-content: center; gap: 8px; padding: 0 14px; border-radius: 99px; background: rgba(12, 15, 20, .55); }
  .tabbar button.on { box-shadow: inset 0 0 0 1.5px var(--brass-dim); }
  .tabbar .ico { width: 20px; height: 20px; }
  .page.record { padding-bottom: 32px; }
  /* the round card on a big screen sideways: the whole screen, the picture filling the left */
  .turn-start { position: fixed; inset: 0; z-index: 5; max-width: none; width: auto; margin: 0; background: var(--night); padding: 72px clamp(28px, 5vw, 96px) 48px; grid-template-columns: minmax(0, 1.5fr) minmax(340px, 1fr); align-items: stretch; align-content: stretch; gap: clamp(28px, 4vw, 64px); }
  .ts-art { aspect-ratio: auto; height: auto; min-height: 0; }
  .ts-art-tx { left: 28px; bottom: 24px; }
  .ts-art-tx b { font-size: 60px; }
  .ts-side { justify-content: safe center; gap: 18px; max-width: 520px; overflow-y: auto; }
  .ts-who .face.sm { width: 56px; height: 56px; }
  .ts-time span { font-size: 72px; }
}
/* a tablet upright: the round card fills the screen too */
@media (min-width: 640px) and (min-height: 501px) and (orientation: portrait) {
  .turn-start { position: fixed; inset: 0; z-index: 5; max-width: none; width: auto; margin: 0; background: var(--night); padding: max(64px, var(--st)) clamp(24px, 6vw, 72px) max(32px, var(--sb)); gap: 20px; align-content: center; }
  .ts-side { gap: 16px; }
  .ts-who .face.sm { width: 60px; height: 60px; }
  .ts-time span { font-size: 72px; }
  .ts-event p { font-size: calc(16.5px * var(--fs)); }
}
@media (min-width: 640px) and (max-height: 500px) {
  .page .cols { grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr); }
  .col-side .sticky-cta { padding-top: 10px; }
}

/* =====================================================================================
   COMPUTERS (html.desk, set by js/desktop.js; ?desk forces it, ?phone turns it off): hover
   states, the arrows on the shelf, centred dialogs, a wider HUD; Enter presses the main button
   and Esc goes back (js/desktop.js). In the house: WASD, the mouse, keys.
   ===================================================================================== */
html.desk :is(.btn, .icon-btn, .hud-btn, .it, .seg button, .segs button, .sh-item, .clue-line, .pick-clue, .cchip, .bank button, .sus, .lk-tile, .disc button, .wheel button, .rec-case, .net-story, .kit-card, .tabbar button, .rank) { cursor: pointer; }
html.desk .btn:not(:disabled):hover, html.desk .pull:not(:disabled):hover { filter: brightness(1.08); }
html.desk .icon-btn:not(:disabled):hover, html.desk .hud-btn:hover { box-shadow: inset 0 0 0 1.5px var(--brass-hi); }
html.desk :is(.clue-line, .pick-clue, .net-story:not(.static), .kit-card:not(:disabled)):hover { box-shadow: inset 0 0 0 1.5px var(--brass); }
html.desk button.it:hover { background: rgba(255, 255, 255, .035); }
html.desk .seg button:not(.on):hover { color: var(--text); }
html.desk .sus:not(.pick):hover .face.lu { filter: brightness(1); }
html.desk .bank button:not(.on):hover { background: rgba(255, 255, 255, .65); }
html.desk .lk-tile:hover, html.desk .disc button:not(.on):hover { filter: brightness(1.12); }
html.desk .sh-step { display: grid; }
html.desk .sh-item:not(.on):hover { opacity: .75; }
html.desk .sh-item.on:hover .poster { box-shadow: 0 22px 46px rgba(0, 0, 0, .65), 0 0 0 1.5px var(--brass-dim); }
html.desk .fp-stick.idle, html.desk .fp-hint { display: none; }
html.desk .fp canvas { cursor: pointer; }
body[data-mouse='drag'] .fp canvas { cursor: grab; }
body[data-mouse='drag'] .fp::after { display: none; }
body[data-mouse='locked'] .fp::after { width: 6px; height: 6px; margin: -3px; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .55); }
.desk-ui { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.desk-go { position: absolute; left: 50%; top: 50%; transform: translate(-50%, 28px); pointer-events: auto; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border: 0; border-radius: 99px; color: var(--text); background: rgba(13, 16, 21, .8); box-shadow: inset 0 0 0 1.5px var(--brass-dim); font: 800 16px var(--f-display); letter-spacing: .08em; text-transform: uppercase; animation: fade .3s; }
.desk-go .ico { width: 20px; height: 20px; color: var(--brass-hi); }
.desk-keys { position: absolute; left: 14px; bottom: 14px; display: flex; flex-wrap: wrap; gap: 6px 12px; max-width: calc(100% - 28px); padding: 8px 12px; border-radius: 12px; background: rgba(13, 16, 21, .62); color: rgba(235, 229, 216, .8); font: 600 12px var(--f-ui); opacity: .55; transition: opacity .3s; }
body[data-mouse='free'] .desk-keys, body[data-mouse='drag'] .desk-keys { opacity: .9; }
body[data-mouse='busy'] .desk-keys { opacity: 0; }
.desk-keys span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.desk-keys kbd { display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 6px; color: var(--text); background: rgba(255, 255, 255, .1); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .5), 0 0 0 1px rgba(232, 201, 125, .25); font: 700 11px var(--f-ui); }
.desk-keys kbd .ico { width: 14px; height: 14px; }
@media (min-width: 900px) and (min-height: 560px) {
  html.desk { --mini-w: 184px; }
  html.desk .fp .fp-mini { height: 138px; }
  html.desk .fp-float { width: 350px; }
  html.desk .modal-bg { align-items: center; padding: 24px; }
  html.desk .modal-bg .modal { max-width: 620px; max-height: 86vh; border-radius: 20px; padding: 22px 26px 24px; box-shadow: inset 0 0 0 1px var(--brass-dim), 0 24px 60px rgba(0, 0, 0, .6); animation: card-in .22s ease-out; }
  html.desk .modal-bg .modal::before { display: none; }
  html.desk .book-foot { bottom: -24px; margin: 18px -26px -24px; padding: 14px 26px 18px; }
  /* in the house the notebook and the map open from the side, so the house stays in view */
  html.desk body.fp-on .modal-bg:is(.book, .map, .notes, .pause, .settings, .howto) { justify-content: flex-end; align-items: stretch; padding: 0; }
  html.desk body.fp-on .modal-bg:is(.book, .map, .notes, .pause, .settings, .howto) .modal { width: 520px; max-width: 44vw; min-width: 420px; max-height: none; height: 100%; border-radius: 16px 0 0 16px; box-shadow: -1px 0 0 var(--brass-dim), -14px 0 30px rgba(0, 0, 0, .5); animation: side .26s cubic-bezier(.2, .9, .3, 1); }
  html.desk body.fp-on .modal-bg.map .modal { width: 620px; }
  html.desk body.fp-on:not(.ff-open) .toast { top: 120px; }
  html.desk .hud-btn { width: 50px; height: 50px; }
  html.desk .watch { width: 70px; height: 70px; }
  html.desk .watch b { font-size: 20px; }
  html.desk .hud-place { top: 100px; }
  html.desk .lead-pill { top: 138px; max-width: 300px; font-size: 14px; }
  html.desk .lk-stage { grid-template-columns: auto minmax(0, 320px); justify-content: center; align-items: center; gap: 48px; }
  .lk-stage { zoom: 1.3; } /* a big screen: the lock as big as it would be in your hand */
  html.desk .page.who, html.desk .page.casefile, html.desk .page.final, html.desk .page.over, html.desk .page.record { padding-top: 12px; }
  html.desk .large-title { font-size: 48px; }
  html.desk .who-head { grid-template-columns: 120px minmax(0, 1fr); }
  html.desk .who-head .poster { width: 120px; }
  html.desk .who-head .large-title { font-size: 40px; }
  html.desk .page .cols { grid-template-columns: minmax(0, 1fr) 420px; gap: 56px; margin-top: 8px; }
  html.desk .cf-cols { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; }
  html.desk .pols { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  html.desk .final-cols { gap: 40px; }
  html.desk .lineup-wall .large-title { font-size: 48px; }
  html.desk .board-frame { max-height: calc(100vh - 260px); }
  html.desk .center-page h1 { font-size: 48px; }
}
@media (min-width: 1500px) {
  html.desk .page.who, html.desk .page.casefile, html.desk .page.final, html.desk .page.over, html.desk .page.record { max-width: 1320px; }
}