:root {
  --ink: #120a08;
  --wine: #4a1219;
  --wine2: #6d1a24;
  --brass: #c9a35a;
  --brass2: #e8cf8f;
  --cream: #f3e8d2;
  --paper: #efe2c4;
  --dim: rgba(243, 232, 210, .6);
  --red: #c8323c;
  --serif: "Playfair Display", Georgia, serif;
  --sans: Inter, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--ink); color: var(--cream); font-family: var(--sans); user-select: none; -webkit-user-select: none; }
.hidden { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }
kbd { display: inline-block; min-width: 1.6em; padding: 1px 6px; margin-right: 4px; border-radius: 5px; background: var(--cream); color: var(--ink); font: 700 12px var(--sans); text-align: center; box-shadow: 0 2px 0 rgba(0,0,0,.4); }
kbd.pad { background: #3d8a4a; color: #fff; border-radius: 50%; }

#stage { position: fixed; inset: 0; }
#stage canvas { display: block; width: 100%; height: 100%; }

/* ---------- menu screens ---------- */
.screen { --gap: 22px; position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--gap); padding: 24px; z-index: 10; overflow: hidden auto; overscroll-behavior: contain;
  background: radial-gradient(ellipse at center, rgba(18,10,8,.15), rgba(18,10,8,.75) 75%); }
#title { padding-bottom: 9vh; background: linear-gradient(transparent 40%, rgba(18,10,8,.85)); }
#title.fp-spectate { background: linear-gradient(transparent 70%, rgba(18,10,8,.62)); }
#select, #online, #lobby, #local, #pause { background: rgba(18,10,8,.78); backdrop-filter: blur(3px); }
.screen h2 { margin: 0; font: 900 clamp(26px, 4vw, 40px) var(--serif); color: var(--brass2); letter-spacing: .02em; text-align: center; }
.logo { display: flex; flex-direction: column; align-items: center; max-width: 100%; text-align: center; filter: drop-shadow(0 6px 20px rgba(0,0,0,.8)); }
/* The title box shrink-wraps "Knows?" so "Who" always sits over its K, whatever width the subtitle needs. */
.logo-title { display: flex; flex-direction: column; align-items: flex-start; width: max-content; max-width: 100%; margin-inline: auto;
  font: italic 900 clamp(52px, min(13vw, 19vh), 150px)/0.9 var(--serif); color: var(--red); letter-spacing: .04em;
  -webkit-text-stroke: 2px var(--brass2); text-shadow: 0 4px 0 #2a0508, 0 8px 30px rgba(0,0,0,.7); }
.logo-who { display: block; color: #fff; font-size: .38em; line-height: 1; text-align: left; -webkit-text-stroke: 0; text-shadow: 0 3px 16px rgba(0,0,0,.7); }
.logo-knows { display: block; width: max-content; text-align: left; }
.logo-question { position: relative; top: .1em; color: #f4c43e; -webkit-text-stroke: 0; text-shadow: none; }
.logo-sub { max-width: 100%; margin-top: 8px; text-wrap: balance; font: 700 clamp(11px, min(1.6vw, 2.6vh), 18px) var(--serif); letter-spacing: .35em; text-transform: uppercase; color: var(--brass2); }
.live-badge { padding: 5px 10px; border: 1px solid rgba(228, 103, 98, .55); border-radius: 20px; background: rgba(28, 5, 8, .75); color: #ffb2ad; font: 700 11px var(--sans); letter-spacing: .16em; text-shadow: 0 1px 4px #000; }
.pads-hint { font-size: 12px; color: var(--dim); letter-spacing: .08em; }

.menu { display: flex; flex-direction: column; gap: 10px; min-width: min(340px, 90vw); }
.menu.row { flex-direction: row; justify-content: center; min-width: 0; flex-wrap: wrap; }
.menu button, .over-btns button, .join-row button {
  padding: 13px 26px; border: 2px solid var(--brass); border-radius: 4px; background: linear-gradient(var(--wine2), var(--wine));
  font: 700 18px var(--serif); color: var(--cream); letter-spacing: .03em; transition: transform .12s, background .12s, box-shadow .12s;
  box-shadow: 0 4px 0 #23070b, 0 8px 20px rgba(0,0,0,.4); }
.menu button small { display: block; font: 400 12px var(--sans); color: var(--dim); margin-top: 3px; }
.menu button.ghost { background: rgba(0,0,0,.35); border-color: rgba(201,163,90,.5); }
.menu button:hover, .menu button.focus, .over-btns button:hover, .over-btns button.focus, .join-row button:hover {
  transform: translateY(-2px); border-color: var(--brass2); box-shadow: 0 6px 0 #23070b, 0 0 0 3px rgba(232,207,143,.35), 0 10px 26px rgba(0,0,0,.5); }
.menu button:disabled { opacity: .4; cursor: default; transform: none; }
.title-presence { position: absolute; top: max(14px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left)); display: flex; gap: 5px; flex-wrap: wrap; max-width: min(320px, 70vw); }
.title-presence .avatar-pill { width: 32px; height: 32px; box-shadow: 0 2px 8px #0009; }
.settings-cog { position: absolute; top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid rgba(232,207,143,.65); border-radius: 50%; background: rgba(18,10,8,.72); color: var(--brass2); box-shadow: 0 2px 12px #0009; }
.settings-cog:hover, .settings-cog:focus-visible, .settings-cog.focus { background: var(--wine); border-color: var(--brass2); outline: 2px solid rgba(232,207,143,.35); }
.settings-overlay { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 18px; background: rgba(7,5,7,.72); backdrop-filter: blur(6px); }
.settings-card { width: min(420px, 100%); max-height: min(560px, calc(100dvh - 36px)); overflow: auto; border: 1px solid rgba(232,207,143,.75); border-radius: 12px; background: linear-gradient(145deg, #29171a, #110d12 70%); box-shadow: 0 20px 60px #000c, inset 0 1px rgba(255,255,255,.07); }
.settings-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px 10px; }
.settings-head h2 { margin: 0; color: var(--cream); font: 700 24px var(--serif); }
.settings-head button { width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--brass2); font-size: 28px; line-height: 1; }
.settings-head button:hover, .settings-head button:focus-visible { background: rgba(232,207,143,.14); }
.settings-tab { display: inline-block; margin: 0 20px; padding: 5px 2px 9px; border-bottom: 2px solid var(--brass2); color: var(--brass2); font: 700 13px var(--sans); letter-spacing: .07em; }
.settings-fields { display: grid; gap: 17px; padding: 20px; border-top: 1px solid rgba(232,207,143,.18); }
.settings-fields label { display: grid; gap: 8px; color: var(--cream); font: 600 13px var(--sans); }
.settings-fields label > span { display: flex; justify-content: space-between; align-items: center; }
.settings-fields output { color: var(--brass2); font-variant-numeric: tabular-nums; }
.settings-fields select { width: 100%; padding: 9px 12px; border: 1px solid rgba(232,207,143,.48); border-radius: 6px; background: #21181b; color: var(--cream); font: 14px var(--sans); }
.settings-fields input[type="range"] { width: 100%; margin: 2px 0; accent-color: var(--brass2); }
.settings-fields .settings-check { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; min-height: 25px; }
.settings-check input { width: 17px; height: 17px; margin: 0; accent-color: var(--brass2); }
.settings-fields select:focus-visible, .settings-fields input:focus-visible { outline: 2px solid var(--brass2); outline-offset: 2px; }
.title-online-row { position: relative; width: 100%; }
.title-online-row > button:first-child { width: 100%; }
.title-lobbies { position: absolute; top: 50%; left: calc(100% + 8px); transform: translateY(-50%); display: flex; gap: 5px; max-width: min(156px, calc((100vw - 340px) / 2 - 12px)); overflow-x: auto; scrollbar-width: thin; }
.title-lobbies:empty { display: none; }
.avatar-pill { position: relative; flex: none; display: grid; place-items: center; width: 34px; height: 34px; overflow: hidden; border: 2px solid var(--brass); border-radius: 50%; background: var(--wine); color: var(--cream); font: 700 14px var(--serif); }
.avatar-pill img { width: 100%; height: 100%; object-fit: cover; }
.title-online-row .title-lobbies button.avatar-pill { width: 40px; height: 40px; padding: 0; border-radius: 50%; box-shadow: 0 2px 8px #000; }
.title-online-row .title-lobbies button.avatar-pill:hover, .title-online-row .title-lobbies button.avatar-pill.focus { border-color: var(--brass2); transform: translateY(-2px); }

/* suspects grid */
.suspects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: min(760px, 94vw); }
.suspects.small { grid-template-columns: repeat(6, minmax(0, 1fr)); width: min(820px, 96vw); }
.sus { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px 12px; border: 2px solid rgba(201,163,90,.35);
  border-radius: 6px; background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(0,0,0,.3)); text-align: center; transition: border-color .12s, transform .12s; }
.sus b { font: 700 16px var(--serif); color: var(--cream); }
.sus small { font-size: 11px; color: var(--dim); line-height: 1.35; }
.sus:hover, .sus.focus { border-color: var(--c); transform: translateY(-2px); }
.sus.locked { border-color: var(--c); background: linear-gradient(160deg, color-mix(in srgb, var(--c) 35%, transparent), rgba(0,0,0,.3)); }
.sus.taken:not(.locked) { opacity: .5; }
.sus:disabled { cursor: default; }
.cursors { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; }
.cur { padding: 1px 6px; border-radius: 3px; font: 700 11px var(--sans); background: var(--brass); color: var(--ink); }
.cur.p2 { background: #7fb7e8; }
.slots { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.slot { min-width: 240px; padding: 10px 14px; border: 1px dashed rgba(201,163,90,.5); border-radius: 5px; font-size: 13px; color: var(--dim); }
.slot b { display: block; color: var(--brass2); font: 700 15px var(--serif); }
.slot.in { border-style: solid; color: var(--cream); }

/* character select: face shot, lore, stats, buffs and debuffs. Sized by viewport height so it fits without scrolling. */
#select { --gap: clamp(8px, 1.6vh, 18px); padding: clamp(8px, 1.5vh, 20px) 16px; }
#select h2 { font-size: clamp(22px, 4vh, 38px); }
.suspects.pick { grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(1120px, 96vw); gap: clamp(6px, 1.2vh, 12px); }
.suspects.pick .sus { align-items: stretch; text-align: left; gap: clamp(3px, .7vh, 7px); padding: clamp(6px, 1.2vh, 12px) 10px; }
.suspects.pick .sus > b { text-align: center; font-size: clamp(14px, 2.2vh, 18px); }
.sus .face { align-self: center; width: clamp(56px, 12vh, 124px); aspect-ratio: 1; border-radius: 12px; overflow: hidden; border: 2px solid var(--c); box-shadow: 0 4px 14px #000a;
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c) 55%, #1a110e), #120a08 85%); }
.sus .face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sus .lore { margin: 0; font-size: clamp(10px, 1.5vh, 12px); line-height: 1.3; color: var(--cream); text-align: center; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sus .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; padding: clamp(3px, .7vh, 7px) 0; border-top: 1px solid rgba(201,163,90,.25); border-bottom: 1px solid rgba(201,163,90,.25); }
.sus .stat { display: grid; grid-template-columns: 46px 1fr 20px; align-items: center; gap: 4px; font-size: clamp(9px, 1.35vh, 11px); color: var(--dim); }
.sus .stat i { height: 5px; border-radius: 3px; background: #ffffff18; overflow: hidden; }
.sus .stat u { display: block; height: 100%; background: var(--c); border-radius: 3px; }
.sus .stat em { font-style: normal; text-align: right; color: var(--cream); }
.sus .effects { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.sus .effects li { padding: 1px 6px; border-radius: 10px; font-size: clamp(9px, 1.35vh, 11px); font-weight: 700; cursor: help; }
.sus .effects .buff { background: rgba(96,170,96,.18); color: #9be37a; }
.sus .effects .debuff { background: rgba(190,70,60,.18); color: #f08a7e; }
#select .slot { padding: clamp(4px, .8vh, 10px) 14px; }
#select .menu button { padding-block: clamp(6px, 1.2vh, 12px); }
@media (max-height: 820px) and (min-width: 1001px) { .sus .lore { -webkit-line-clamp: 2; } .sus .face { width: clamp(52px, 10vh, 96px); } #select { --gap: 6px; } #select .slot { padding: 3px 12px; } #select .slot b { display: inline; margin-right: 8px; } }
@media (max-width: 1000px) { .suspects.pick { grid-template-columns: repeat(2, minmax(0, 1fr)); } } 
@media (max-width: 560px) { .suspects.pick { grid-template-columns: 1fr; } }

/* portraits */
.portrait { position: relative; width: 74px; height: 74px; border-radius: 50%; overflow: hidden; flex: none;
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c) 70%, #fff 10%), color-mix(in srgb, var(--c) 60%, #000) 75%);
  border: 3px solid var(--brass); box-shadow: inset 0 -8px 18px rgba(0,0,0,.45); }
.portrait .sil { position: absolute; left: 50%; bottom: -14%; width: 64%; height: 70%; transform: translateX(-50%); background: rgba(10,6,5,.82);
  border-radius: 50% 50% 18% 18% / 38% 38% 18% 18%; }
.portrait .sil::before { content: ""; position: absolute; left: 50%; top: -38%; width: 54%; height: 58%; transform: translateX(-50%); border-radius: 50%; background: inherit; }
.portrait span { display: none; }
.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.portrait.mini { width: 38px; height: 38px; border-width: 2px; }
.seat-portrait { display: grid; place-items: center; }
.seat-portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait.dead { filter: grayscale(1) brightness(.5); }
.portrait.dead::after { content: "✕"; position: absolute; inset: 0; display: grid; place-items: center; font: 900 34px var(--serif); color: var(--red); }

.pchip { display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px 1px 6px; border-radius: 99px; background: rgba(0,0,0,.4);
  border: 1px solid var(--c); font: 700 13px var(--sans); color: var(--cream); white-space: nowrap; }
.pchip::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--c); }

/* online */
.online-box { display: flex; flex-direction: column; gap: 14px; align-items: center; width: min(520px, 94vw); }
.status { margin: 0; color: var(--dim); text-align: center; font-size: 14px; }
.lobbies { display: flex; flex-direction: column; gap: 8px; width: 100%; max-height: 38vh; overflow: auto; }
.lobbies button { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid rgba(201,163,90,.4); border-radius: 5px; background: rgba(0,0,0,.35); text-align: left; }
.lobbies button b { font: 900 20px var(--serif); color: var(--brass2); letter-spacing: .12em; }
.lobbies button span { flex: 1; color: var(--dim); }
.lobbies button:hover, .lobbies button.focus { border-color: var(--brass2); }
.lobbies .empty { text-align: center; color: var(--dim); }
.join-row { display: flex; gap: 8px; }
.join-row input { width: 130px; padding: 10px; border: 2px solid rgba(201,163,90,.5); border-radius: 4px; background: rgba(0,0,0,.4); color: var(--cream);
  font: 900 20px var(--serif); letter-spacing: .3em; text-align: center; text-transform: uppercase; }
.join-row button { padding: 10px 18px; font-size: 16px; }
#lobbyCode { color: var(--red); letter-spacing: .15em; }
.killers { display: flex; gap: 6px; align-items: center; justify-content: center; margin: 4px 0 12px; }
.killers span { font: 700 11px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--brass); margin-right: 6px; }
.killers button { display: grid; place-items: center; min-width: 94px; height: 38px; padding: 0 10px; border: 1px solid rgba(201,163,90,.5); border-radius: 6px; background: rgba(0,0,0,.55); color: var(--cream); font: 700 13px var(--sans); opacity: .82; transition: background .12s, border-color .12s, opacity .12s; }
.killers button.on { opacity: 1; background: linear-gradient(var(--wine2), var(--wine)); color: #fff; border-color: var(--brass2); box-shadow: 0 0 0 1px var(--brass2); }
.killers button:disabled { cursor: default; }
.killers button:focus-visible { outline: 2px solid var(--brass2); outline-offset: 2px; }
.members { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.member { display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 99px; background: rgba(0,0,0,.4); font-size: 13px; }
.member img { width: 24px; height: 24px; border-radius: 50%; }
.member .avatar-pill { width: 28px; height: 28px; }
.member-profile { display: flex; align-items: center; gap: 6px; min-width: 0; color: inherit; text-decoration: none; }
.member-profile > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-profile:hover { color: var(--brass2); }
.member .device-icon { display: inline-grid; place-items: center; width: 25px; height: 25px; flex: none; border-radius: 50%; background: rgba(201,163,90,.16); font-size: 15px; line-height: 1; }
@media (max-width: 600px) {
  #title .menu { width: min(340px, calc(100vw - 104px)); min-width: 0; }
  .title-lobbies { max-width: calc((100vw - min(340px, 100vw - 104px)) / 2 - 12px); }
}

/* ---------- in-game HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#hud button, #hud .dlg, #hud .body-menu, #hud .book, #hud .accp { pointer-events: auto; }
.online-sync { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 12px 18px; border: 1px solid rgba(201,163,90,.55); border-radius: 8px; background: rgba(18,10,8,.9); color: var(--cream); font: 700 15px var(--serif); text-align: center; box-shadow: 0 12px 32px #0008; }
#clock { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 3; padding: 6px 18px 7px; text-align: center; border-radius: 0 0 10px 10px;
  background: rgba(18,10,8,.78); border: 1px solid rgba(201,163,90,.45); border-top: 0; min-width: 150px; max-width: calc(100vw - 110px); }
.clk-day { font: 700 11px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--brass); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clk-time { font: 900 22px/1.1 var(--serif); color: var(--cream); }
.clk-left { font-size: 12px; color: var(--dim); }
.clk-left.urgent { color: #ff7a7a; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .45; } }
#pauseBtn { position: absolute; top: 10px; right: 12px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(201,163,90,.5); background: rgba(18,10,8,.7); font-size: 18px; }

.phud { position: absolute; overflow: hidden; }
.split .phud:first-child { border-right: 2px solid rgba(201,163,90,.6); }
.ph-top { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.note-indicator { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border: 1px solid rgba(201,163,90,.5); border-radius: 6px; background: rgba(18,10,8,.8); color: var(--cream); font: 700 11px var(--sans); letter-spacing: .04em; cursor: pointer; pointer-events: auto; }
.note-indicator > span { color: var(--brass2); font-size: 16px; line-height: 1; }
.note-indicator small { min-width: 17px; padding: 1px 4px; border-radius: 9px; background: rgba(201,163,90,.25); color: var(--brass2); text-align: center; font: 700 10px var(--sans); }
.note-indicator.note-pulse { animation: notePulse .85s ease-out; }
.note-glow { position: absolute; inset: 0; z-index: 5; pointer-events: none; background: radial-gradient(circle at 50% 50%, rgba(242,211,128,.2), transparent 42%); animation: noteGlow .8s ease-out both; }
.note-glow.item-origin { background: radial-gradient(circle 125px at var(--cue-x) var(--cue-y), rgba(242,211,128,.3), transparent); }
.item-glimpse { position: absolute; z-index: 6; width: 78px; height: 78px; border: 2px solid rgba(255,225,154,.9); border-radius: 50%; box-shadow: 0 0 14px 4px rgba(255,208,112,.55), inset 0 0 18px rgba(255,236,170,.45); transform: translate(-50%,-50%) scale(.45); pointer-events: none; animation: itemGlimpse 1.05s ease-out both; }
@keyframes itemGlimpse { 20% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.45); } }
.note-mote { position: absolute; z-index: 6; width: 5px; height: 5px; border-radius: 50%; background: #ffe4a0; box-shadow: 0 0 10px #ffcf69; pointer-events: none; animation: noteFlight .85s cubic-bezier(.2,.3,.25,1) both; }
@keyframes notePulse { 45% { border-color: #fff0b8; box-shadow: 0 0 20px rgba(255,210,112,.85); } }
@keyframes noteGlow { to { opacity: 0; } }
@keyframes noteFlight { 0% { transform: translate(0,0) scale(1.3); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(var(--dx),var(--dy)) scale(.25); opacity: 0; } }
.role { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 99px; background: rgba(18,10,8,.75); border: 1px solid rgba(201,163,90,.4); }
.role b { display: block; font: 700 14px var(--serif); }
.role small { font: 700 10px var(--sans); letter-spacing: .18em; color: var(--brass); }
.role.killer { border-color: var(--red); }
.role.killer small { color: #ff6b6b; }
.daily-task { display: flex; gap: 9px; align-items: center; max-width: min(350px, 90vw); padding: 7px 12px 7px 8px; background: rgba(18,10,8,.86); border: 1px solid rgba(201,163,90,.45); border-radius: 8px; }
.task-icon { display: grid; place-items: center; width: 29px; height: 29px; flex: none; font-size: 23px; color: var(--brass2); }
.daily-task b { display: block; font: 700 14px var(--serif); }
.daily-task small { display: block; font: 11px/1.4 var(--sans); color: var(--dim); }
.daily-task.complete { border-color: #6f9e74; } .daily-task.complete small { color: #a3cea5; }
.daily-task.required:not(.complete) { border-color: #bd4e50; } .daily-task.required:not(.complete) small { color: #ee9b91; }
/* Docked under the clock as one compact top-centre panel. */
#clock .daily-task { margin: 5px -12px 0; max-width: none; padding: 4px 4px 0; gap: 6px; justify-content: center; text-align: left; background: none; border: 0; border-top: 1px solid rgba(201,163,90,.3); border-radius: 0; }
#clock .daily-task .task-icon { width: 20px; height: 20px; font-size: 16px; }
#clock .daily-task b { font-size: 12px; line-height: 1.2; }
#clock .daily-task small { font-size: 10px; line-height: 1.3; }
#clock .daily-task.complete b { color: #a3cea5; }
#clock .daily-task.required:not(.complete) b { color: #ff8f86; }
#clock:has(.daily-task:not(.hidden)) { max-width: min(330px, calc(100vw - 110px)); }
.phud > .daily-task { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); max-width: min(300px, 92%); padding: 4px 9px 4px 6px; }
.ph-notes-row { display: flex; align-items: center; gap: 8px; }
.core-gathering { display: inline-flex; align-items: center; gap: 5px; font: 700 10px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--brass); text-shadow: 0 1px 3px #000; }
.core-gathering i { font-style: normal; font-size: 13px; display: inline-block; animation: gatherSpin 2.4s ease-in-out infinite; }
@keyframes gatherSpin { 0%, 40% { transform: rotate(0); } 50%, 90% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } }
.reduce-motion .core-gathering i { animation: none; }
.pool-panel { position: absolute; z-index: 6; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(640px, 94%); max-height: 92%; overflow-y: auto; border: 2px solid var(--brass); border-radius: 10px; padding: 12px; background: #18130fee; pointer-events: auto; box-shadow: 0 18px 70px #000b; }
.pool-heading { display: flex; align-items: center; justify-content: space-between; font: 700 20px var(--serif); }
.pool-heading button { padding: 4px 10px; }
.pool-panel canvas { width: 100%; height: auto; display: block; touch-action: none; cursor: crosshair; }
.pool-controls { display: flex; gap: 8px; align-items: center; }
.pool-controls button { padding: 8px 12px; border: 1px solid var(--brass); border-radius: 5px; background: #463423; }
.pool-controls label { display: flex; gap: 8px; align-items: center; flex: 1; min-width: 0; font-size: 12px; }
.pool-controls input { width: 100%; min-width: 35px; accent-color: var(--brass); }
.pool-controls button:disabled { opacity: .45; }
.pool-caption { font-size: 11px; color: var(--dim); margin-top: 10px; text-align: center; }
.narrow .daily-task { max-width: 245px; padding: 5px 8px; } .narrow .daily-task b { font-size: 12px; }
/* Inventory: two hands, two pockets (bottom-left). */
.inv { position: absolute; left: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.inv-row { display: flex; gap: 5px; align-items: stretch; }
.inv .sep { width: 1px; background: rgba(201,163,90,.35); margin: 4px 2px; }
.inv .islot { width: 84px; min-height: 46px; padding: 4px 6px; border-radius: 6px; display: flex; flex-direction: column; justify-content: center; gap: 1px; text-align: left;
  background: rgba(18,10,8,.72); border: 1px solid rgba(201,163,90,.3); color: var(--cream); font: 12px var(--sans); }
.inv .islot.wide { width: 173px; }
.inv .islot small { font: 700 9px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--brass); }
.inv .islot b { font: 700 12px/1.15 var(--serif); }
.inv .islot b.dim { color: var(--dim); font-weight: 400; }
.inv .islot em { font: italic 10px var(--sans); color: var(--dim); }
.inv .islot em.bl { color: #ff6b6b; } .inv .islot em.wt, .inv-st.wt { color: #9ad0ff; }
.inv button.islot { cursor: pointer; pointer-events: auto; }
.inv button.islot:hover { border-color: var(--brass); background: rgba(40,22,14,.85); }
.inv .islot.bloody { border-color: rgba(255,90,90,.6); box-shadow: inset 0 0 12px rgba(140,10,10,.45); }
.inv-st { padding: 2px 8px; border-radius: 4px; background: rgba(18,10,8,.72); font: 11px var(--sans); color: #ffb0a0; }
.narrow .inv .islot { width: 66px; } .narrow .inv .islot.wide { width: 137px; }
.stamina { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); width: 106px; height: 10px; border: 1px solid rgba(232,207,143,.5); border-radius: 8px; background: rgba(18,10,8,.82); overflow: visible; pointer-events: none; }
.stamina-fill { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--brass2); transition: width .1s linear; }
.stamina.exhausted .stamina-fill { background: #d75b57; }
.stamina.exhausted small { color: #ff8b80; }
.stamina small { display: block; margin-top: 3px; text-align: center; color: var(--cream); font: 700 8px var(--sans); letter-spacing: .1em; white-space: nowrap; text-shadow: 0 1px 4px #000; }

/* Pocket-search d20. */
.dice { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -58%); width: 260px; padding: 10px 12px 12px; border-radius: 10px; text-align: center;
  background: rgba(10,6,4,.88); border: 1px solid rgba(201,163,90,.5); animation: deal .3s ease-out; z-index: 6; }
.dice-h { font: 700 13px var(--serif); color: var(--cream); }
.dice-c canvas { display: block; margin: 0 auto; width: 160px !important; height: 160px !important; }
.dice-r { min-height: 38px; font: 13px var(--sans); color: var(--dim); opacity: 0; transition: opacity .3s; }
.dice-r b { color: var(--cream); font-size: 16px; }
.dice.done .dice-r { opacity: 1; }
.dice.done.ok { border-color: #8fd18f; } .dice.done.fail { border-color: #ff6b6b; }
.dice-r span { display: block; margin-top: 3px; color: var(--cream); }
.cards { padding: 8px; border-radius: 6px; background: rgba(18,10,8,.7); border: 1px solid rgba(201,163,90,.35); }
.cards-h { font: 700 10px var(--sans); letter-spacing: .15em; text-transform: uppercase; color: var(--brass); margin-bottom: 6px; }

.toasts { position: absolute; top: 76px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; align-items: center; width: 90%; }
.toast { padding: 7px 14px; border-radius: 5px; background: rgba(18,10,8,.85); border-left: 3px solid var(--brass); font-size: 14px; text-align: center; animation: pop .25s ease-out; transition: opacity .5s; }
.toast.out { opacity: 0; }
@keyframes pop { from { transform: scale(.85); opacity: 0; } }
.prompt { position: absolute; bottom: 18%; left: 50%; transform: translateX(-50%); padding: 8px 16px; border-radius: 6px; background: rgba(18,10,8,.82);
  border: 1px solid rgba(201,163,90,.5); font: 600 15px/1.8 var(--sans); white-space: nowrap; text-align: center; }
.prompt .dim { color: var(--dim); font-weight: 400; }
.noted { position: absolute; top: 120px; right: 12px; max-width: 300px; padding: 9px 13px; border-radius: 4px; background: var(--paper); color: var(--ink); font: 14px/1.35 var(--serif);
  box-shadow: 0 6px 20px rgba(0,0,0,.5); transform: rotate(1.2deg); }
.noted b { display: block; font: 700 11px var(--sans); letter-spacing: .12em; color: var(--wine2); text-transform: uppercase; }
.noted.pop { animation: pop .3s ease-out; }

/* dialogue */
.dlg { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); width: min(720px, 94%); padding: 14px 16px; border-radius: 8px;
  background: linear-gradient(rgba(30,14,12,.94), rgba(18,10,8,.96)); border: 2px solid var(--brass); box-shadow: 0 10px 40px rgba(0,0,0,.6); }
.d-name { margin-bottom: 6px; }
.d-name small { color: var(--dim); }
.d-line { font: 500 19px/1.4 var(--serif); color: var(--cream); min-height: 1.4em; }
.d-line.thinking { color: var(--dim); animation: blink 1.2s infinite; }
.d-timer { position: absolute; right: 15px; top: 12px; min-width: 24px; text-align: center; color: var(--brass2); font: 700 13px var(--sans); }
.d-opts { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; max-height: 40vh; overflow: auto; }
.opt { display: flex; align-items: baseline; gap: 8px; padding: 8px 12px; border: 1px solid rgba(201,163,90,.3); border-radius: 5px; background: rgba(255,255,255,.04); text-align: left; font-size: 15px; }
.opt:hover, .opt.focus { border-color: var(--brass2); background: rgba(201,163,90,.15); }
.opt .n, .rebuts .n { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--brass); color: var(--ink); font: 700 11px var(--sans); }
.kind { flex: none; padding: 1px 7px; border-radius: 3px; font: 700 10px var(--sans); letter-spacing: .1em; text-transform: uppercase; background: rgba(255,255,255,.12); }
.k-share { background: #2f5d3a; } .k-ask { background: #2e4a6b; } .k-accuse { background: #7a5a16; } .k-deceit, .k-deceive, .k-lie { background: #7c1a24; color: #ffd0d0; }
.k-pass { background: #4a5a3a; } .k-team { background: #3e5a7a; } .k-accept { background: #2f6b54; } .k-decline { background: #5a4a3a; }
.narrow .d-line { font-size: 16px; } .narrow .opt { font-size: 13px; }
.body-menu { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); width: min(520px, 94%); max-height: min(68vh, 460px); overflow-y: auto; padding: 14px 16px; border-radius: 8px; background: rgba(24, 10, 10, .97); border: 2px solid var(--brass); box-shadow: 0 10px 40px rgba(0,0,0,.65); }
.body-menu > b { display: block; margin-bottom: 10px; font: 700 20px var(--serif); }
.body-options { display: flex; flex-direction: column; gap: 6px; }
.body-options .opt { width: 100%; min-height: 42px; cursor: pointer; color: var(--cream); }

/* notebook */
.book { position: absolute; inset: 60px 5% 16px; display: flex; flex-direction: column; border-radius: 6px; background: var(--paper); color: var(--ink);
  box-shadow: 0 16px 50px rgba(0,0,0,.7); border: 3px solid #8a6a32; overflow: hidden; }
.book-head { display: flex; align-items: center; gap: 14px; padding: 10px 14px; background: #d9c7a0; border-bottom: 2px solid #8a6a32; }
.book-head b { font: 900 18px var(--serif); }
.book-tabs { display: flex; gap: 4px; flex: 1; }
.book-tabs button, .book-x { padding: 4px 12px; border: 1px solid #8a6a32; border-radius: 3px; background: transparent; color: var(--ink); font-size: 13px; }
.book-tabs button.on { background: var(--wine); color: var(--cream); }
.book-tabs button[data-tab="memories"] { border-color: #c3a46b; }

/* Replay archive and reconstructed memories */
.memory-gallery, .memory-viewer { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 18px; background: rgba(5,4,5,.86); backdrop-filter: blur(8px); }
.memory-gallery.hidden, .memory-viewer.hidden { display: none; }
.memory-gallery-card, .memory-viewer-card { width: min(1050px, 96vw); max-height: min(92vh, 980px); overflow: auto; border: 1px solid #715b49; border-radius: 12px; background: #171416; color: var(--cream); box-shadow: 0 24px 80px #000b; padding: clamp(14px, 3vw, 28px); }
.memory-gallery-header, .memory-viewer-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-bottom: 1px solid #493c36; padding-bottom: 12px; }
.memory-gallery-header small, .memory-viewer-header small { color: #c3a46b; letter-spacing: .15em; }
.memory-gallery-header h2, .memory-viewer-header h2 { margin: 3px 0 0; font-family: 'Playfair Display', serif; }
.memory-gallery-header > button, .memory-viewer-header > button { border: 0; background: transparent; color: var(--cream); font-size: 28px; cursor: pointer; }
.memory-gallery-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; }
.memory-gallery-tabs, .memory-card-actions, .memory-viewer-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.memory-gallery button, .memory-viewer button, .memory-gallery select { border: 1px solid #80664f; border-radius: 6px; background: #292326; color: var(--cream); padding: 8px 12px; cursor: pointer; }
.memory-gallery button.on { background: var(--wine); }
.memory-gallery button:disabled { opacity: .45; cursor: default; }
.memory-import { border: 1px dashed #80664f; padding: 8px 12px; border-radius: 6px; cursor: pointer; }
.memory-import input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.memory-gallery-note, .memory-player-status { min-height: 1.4em; color: #d5bc91; }
.memory-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.memory-card { display: grid; grid-template-columns: 112px 1fr; gap: 12px; border: 1px solid #493c36; border-radius: 8px; overflow: hidden; background: #211d1f; }
.memory-card > img, .memory-thumb { width: 112px; height: 112px; object-fit: cover; background: #31292d; }
.memory-thumb { display: grid; place-items: center; font: 700 24px 'Playfair Display', serif; color: #c3a46b; }
.memory-card-copy { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 8px 8px 8px 0; }
.memory-card-copy b { overflow-wrap: anywhere; }
.memory-card-copy small { color: #bcae9e; }
.memory-card-actions button { padding: 5px 8px; font-size: 12px; }
.memory-player { width: min(860px, 100%); margin: 14px auto; overflow: hidden; background: #080808; }
.memory-viewer-actions { justify-content: flex-end; }
.memory-viewer-actions .hidden { display: none; }
.memory-viewer { padding: 0; place-items: stretch; }
.memory-viewer-card { display: flex; flex-direction: column; width: 100vw; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; max-width: none; padding: 10px clamp(10px, 2vw, 28px) max(10px, env(safe-area-inset-bottom)); border: 0; border-radius: 0; overflow: hidden; }
.memory-viewer-header { flex: 0 0 auto; }
.memory-player-status { flex: 0 0 auto; margin: 6px 0 0; min-height: 1.2em; }
.memory-player { display: grid; place-items: center; flex: 1 1 auto; min-height: 0; width: 100%; margin: 4px auto 8px; overflow: hidden; }
.memory-player > div { width: 100% !important; height: 100% !important; }
.memory-viewer-actions { flex: 0 0 auto; }
.memory-round-choice { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; margin: 16px 0 0; padding: 12px; border: 1px solid #80664f; border-radius: 8px; text-align: left; }
.memory-round-choice p { grid-column: 1 / -1; margin: 0; color: #c4b8ab; }
.memory-round-choice button { border: 1px solid #80664f; border-radius: 6px; background: #292326; color: var(--cream); padding: 8px 10px; }
.memory-round-choice [role=status] { grid-column: 1 / -1; color: #d5bc91; }
.notebook-memories { padding: 4px 8px; }
.notebook-memories > p { color: #bcae9e; }
.notebook-memory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 11px; padding: 4px 0 10px; }
.notebook-memory-card { display: flex; min-width: 0; flex-direction: column; gap: 6px; padding: 7px; border: 1px solid #80664f; border-radius: 8px; background: #292326; color: var(--cream); text-align: left; cursor: pointer; }
.notebook-memory-card:disabled { opacity: .5; cursor: default; }
.notebook-memory-thumb { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 5px; background: #100d0e; }
.notebook-memory-thumb img { width: 100%; height: 100%; object-fit: cover; }
.notebook-memory-placeholder { color: #c3a46b; font: 700 13px 'Playfair Display', serif; letter-spacing: .12em; }
.notebook-memory-play { position: absolute; inset: 0; display: grid; place-items: center; color: white; font-size: 24px; opacity: .9; text-shadow: 0 2px 8px #000; background: linear-gradient(transparent 45%, #0008); }
.notebook-memory-card b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.notebook-memory-card small { color: #bcae9e; font-size: 11px; }
@media (max-width: 650px) { .memory-gallery { padding: 6px; } .memory-gallery-card { max-height: 96vh; } .memory-card { grid-template-columns: 82px 1fr; } .memory-card > img, .memory-thumb { width: 82px; height: 100%; min-height: 92px; } .memory-round-choice { grid-template-columns: 1fr 1fr; } .memory-round-choice b, .memory-round-choice p, .memory-round-choice [role=status] { grid-column: 1 / -1; } }
.book-body { flex: 1; overflow: auto; padding: 12px 14px; }
.sheet { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sheet h4 { margin: 0 0 6px; font: 900 15px var(--serif); color: var(--wine2); }
.mark { display: flex; justify-content: space-between; width: 100%; padding: 5px 8px; border: 0; border-bottom: 1px solid rgba(0,0,0,.15); background: transparent; color: var(--ink); text-align: left; font-size: 13px; }
.mark i { font-style: normal; font-weight: 900; width: 18px; text-align: center; }
.mark.m-x span { text-decoration: line-through; opacity: .5; } .mark.m-x i { color: #9b1c25; }
.mark.m-v i { color: #2f6b3a; } .mark.m-v { background: rgba(47,107,58,.12); }
.mark.focus, .mark:hover { background: rgba(201,163,90,.35); }
.clues { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.clues li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 8px; border-left: 3px solid #8a6a32; background: rgba(0,0,0,.04); font: 14px var(--serif); }
.clues li em { flex: none; font: 11px var(--sans); color: #6a5634; }
.clues li.k-body, .clues li.k-kill, .clues li.k-tod { border-color: #9b1c25; }
.clues li.k-held { border-color: #9b1c25; background: rgba(155,28,37,.1); }
.book .empty { color: #6a5634; text-align: center; }

/* accusation panel (per player) */
.accp { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); width: min(760px, 96%); padding: 12px 14px; border-radius: 8px;
  background: rgba(18,10,8,.94); border: 2px solid var(--brass); }
.acc-h { display: flex; justify-content: space-between; font: 900 18px var(--serif); color: var(--brass2); margin-bottom: 8px; }
.acc-h span { font: 600 13px var(--sans); color: var(--dim); }
.acols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.acol { display: flex; flex-direction: column; gap: 3px; }
.acol h4 { margin: 0 0 3px; font: 700 11px var(--sans); letter-spacing: .15em; text-transform: uppercase; color: var(--brass); }
.acol button { padding: 4px 8px; border: 1px solid rgba(201,163,90,.25); border-radius: 3px; background: rgba(255,255,255,.04); text-align: left; font-size: 13px; }
.acol button.on { background: var(--wine2); border-color: var(--brass2); }
.acol button.focus, .acol button:hover { outline: 2px solid var(--brass2); }
.acol button:disabled { opacity: .3; }
.acc-go { margin-top: 10px; width: 100%; padding: 9px; border: 2px solid var(--brass); border-radius: 4px; background: linear-gradient(var(--wine2), var(--wine)); font: 700 16px var(--serif); }
.acc-go.focus { box-shadow: 0 0 0 3px rgba(232,207,143,.45); }
.acc-go:disabled { opacity: .4; }
.rebuts { display: flex; flex-direction: column; gap: 6px; }
.rebuts button { display: flex; gap: 8px; align-items: baseline; padding: 8px 12px; border: 1px solid rgba(201,163,90,.3); border-radius: 5px; background: rgba(255,255,255,.04); text-align: left; font-size: 14px; }
.rebuts button.lie { border-color: rgba(200,50,60,.6); }
.rebuts button.focus, .rebuts button:hover { border-color: var(--brass2); background: rgba(201,163,90,.15); }
.rebuts .pass { color: var(--dim); }
.rebuts .empty { color: var(--dim); margin: 0; }
.narrow .acol button { font-size: 11px; padding: 3px 5px; }

/* table board (shared) */
#tableBoard { position: absolute; top: 74px; right: 12px; width: min(330px, 40vw); padding: 10px 12px; border-radius: 6px; background: rgba(18,10,8,.85); border: 1px solid rgba(201,163,90,.5); z-index: 2; font-size: 13px; }
.split #tableBoard { top: auto; bottom: auto; right: 50%; transform: translateX(50%); top: 74px; width: 320px; }
.tb-h { display: flex; gap: 8px; align-items: baseline; margin-bottom: 8px; }
.tb-h b { font: 900 15px var(--serif); color: var(--brass2); }
.tb-h span { flex: 1; color: var(--dim); }
.tb-h i { font-style: normal; color: var(--brass); }
.props { display: flex; flex-direction: column; gap: 4px; }
.prop { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.prop span { color: var(--cream); font-size: 12px; }
.prop.wait span { color: var(--dim); font-style: italic; }
.prop em { color: #7fdc8f; font-size: 11px; }
.tally { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(201,163,90,.3); }
.tally div { display: flex; gap: 10px; flex-wrap: wrap; }
.tally b { color: var(--brass2); }
.rebs { list-style: none; margin: 8px 0 0; padding: 8px 0 0; border-top: 1px solid rgba(201,163,90,.3); display: flex; flex-direction: column; gap: 5px; }
.rebs span { font: italic 13px var(--serif); }

.kocard { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: radial-gradient(circle, rgba(20,4,6,.88), #000 75%); text-align: center; padding: 20px; z-index: 4; animation: koIn .5s ease-out; }
.kocard b { font: 900 28px var(--serif); color: #e8d8c0; letter-spacing: .04em; }
.kocard span { max-width: 340px; font-size: 13px; color: var(--dim); }
@keyframes koIn { from { opacity: 0; } to { opacity: 1; } }
.deadcard { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); padding: 10px 18px; border-radius: 6px; background: rgba(90,8,14,.9); border: 1px solid #ff6b6b; text-align: center; }
.deadcard b { display: block; font: 900 18px var(--serif); }
.deadcard span { font-size: 12px; color: var(--dim); }

.rolecard { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(420px, 90%); padding: 22px; border-radius: 10px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--paper); color: var(--ink); border: 4px double var(--brass);
  box-shadow: 0 20px 60px rgba(0,0,0,.8); animation: flip .6s ease-out; }
.rolecard small { font: 700 11px var(--sans); letter-spacing: .25em; text-transform: uppercase; color: #6a5634; }
.rolecard h2 { margin: 0; font: 900 24px var(--serif); }
.role-name { font: italic 900 30px var(--serif); color: #2f5d3a; }
.rolecard.killer { background: #2a0a0d; color: var(--cream); border-color: var(--red); }
.rolecard.killer .role-name { color: #ff4d55; } .rolecard.killer small { color: var(--brass); }
.rolecard p { margin: 4px 0 0; font-size: 14px; line-height: 1.45; }
@keyframes flip { from { transform: translate(-50%, -50%) rotateY(90deg); } }

/* in-world labels & bubbles (positioned by view.js) */
.overlay { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.vp { position: absolute; overflow: hidden; }
.tag { position: absolute; left: 0; top: 0; padding: 1px 8px; border-radius: 99px; background: rgba(18,10,8,.65); font: 700 11px var(--sans); white-space: nowrap; border: 1px solid var(--c, var(--brass)); }
.bubble { position: absolute; left: 0; top: 0; width: max-content; max-width: 260px; padding: 7px 11px; border-radius: 10px; background: var(--cream); color: var(--ink); font: 14px/1.3 var(--serif);
  box-shadow: 0 4px 14px rgba(0,0,0,.5); }
.bubble.pop { animation: bubpop .2s ease-out; }
@keyframes bubpop { from { opacity: 0; } }
.bubble::after { content: ""; position: absolute; left: 50%; bottom: -7px; margin-left: -7px; border: 7px solid transparent; border-bottom: 0; border-top-color: var(--cream); }

/* ---------- cinematics ---------- */
.cine { position: fixed; inset: 0; z-index: 8; display: grid; place-items: center; pointer-events: none; padding: 20px; }
.cine.night, .cine.over, .cine.reveal { background: radial-gradient(ellipse, rgba(18,10,8,.55), rgba(5,2,2,.92)); pointer-events: auto; animation: fade .6s; }
.cine.banner { align-items: start; padding-top: 18vh; }
@keyframes fade { from { opacity: 0; } }
.cine-banner { text-align: center; animation: pop .5s ease-out; text-shadow: 0 4px 20px rgba(0,0,0,.9); }
.cine-banner small { font: 700 13px var(--sans); letter-spacing: .25em; text-transform: uppercase; color: var(--brass2); }
.cine-banner h1 { margin: 4px 0 0; font: italic 900 clamp(48px, 8vw, 92px)/1 var(--serif); color: var(--cream); }
.cine-card { width: min(620px, 94vw); padding: 26px 28px; border-radius: 10px; text-align: center; background: rgba(18,10,8,.92); border: 2px solid var(--brass);
  box-shadow: 0 20px 80px rgba(0,0,0,.8); animation: pop .5s ease-out; max-height: 92vh; overflow: auto; }
.cine-card small { font: 700 12px var(--sans); letter-spacing: .25em; text-transform: uppercase; color: var(--brass); }
.cine-card h1 { margin: 8px 0; font: 900 clamp(24px, 3.6vw, 36px)/1.2 var(--serif); color: var(--cream); display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.cine-card p { color: var(--dim); line-height: 1.5; }
.cine-card p b { color: var(--cream); }
.cine-card .sub { color: var(--brass2); font-style: italic; }
.survivors { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.survivors .portrait { width: 58px; height: 58px; }
.envelope { margin: 16px auto; width: 220px; padding: 22px 0; border-radius: 4px; background: #d8c49a; color: var(--ink); font: 900 28px var(--serif); letter-spacing: .1em;
  border: 3px solid #8a6a32; animation: seal 1.2s ease-out; }
.envelope:not(.open) { background: #3a0c11; color: #ff6b6b; border-color: var(--red); }
@keyframes seal { 0%, 50% { transform: scale(.6) rotate(-6deg); color: transparent; } }
.cine-card.over.saviors { border-color: #7fdc8f; }
.cine-card.over.killer { border-color: var(--red); }
.kills { list-style: none; padding: 0; margin: 10px 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--dim); }
.mine { margin: 4px 0; color: var(--cream) !important; }
.over-btns { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }

/* pause */
#pause { z-index: 12; }
.help { padding: 14px 18px; border-radius: 6px; background: rgba(0,0,0,.45); border: 1px solid rgba(201,163,90,.35); font-size: 14px; }
.help p { margin: 5px 0; } .help b { color: var(--brass2); display: inline-block; min-width: 170px; }

@media (max-width: 640px) {
  .suspects { grid-template-columns: repeat(2, 1fr); }
  .suspects.small { grid-template-columns: repeat(3, 1fr); }
  .sus small { display: none; }
  .sheet { grid-template-columns: 1fr; }
  .acols { grid-template-columns: 1fr; max-height: 44vh; overflow: auto; }
}

/* ---------- first person ---------- */
.reticle { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: rgba(255,240,215,.75); box-shadow: 0 0 0 1px rgba(0,0,0,.5); pointer-events: none; }
.talking .reticle { display: none; }
.prompt kbd { display: inline-block; min-width: 1.6em; padding: 0 5px; margin-right: 3px; border-radius: 4px; background: rgba(255,240,215,.14); border: 1px solid rgba(255,240,215,.3); font: 700 11px var(--sans); text-align: center; }
.prompt kbd.pad { border-radius: 99px; }
.prompt kbd.touch { width: auto; background: rgba(109,26,36,.88); color: var(--cream); }
.decide { position: absolute; top: 22%; left: 50%; transform: translateX(-50%); padding: 12px 22px; border-radius: 8px; text-align: center; background: rgba(8,4,4,.86); border: 1px solid rgba(255,107,107,.45); animation: decidePulse 1.6s ease-in-out infinite; }
.decide b { display: block; font: 900 20px var(--serif); }
.decide span { display: block; margin-top: 4px; font-size: 13px; }
.decide em { display: block; margin-top: 4px; font: 700 11px var(--sans); letter-spacing: .14em; color: #ff6b6b; text-transform: uppercase; }
.decide kbd { display: inline-block; padding: 0 6px; border-radius: 4px; background: rgba(255,240,215,.14); font: 700 11px var(--sans); }
@keyframes decidePulse { 50% { border-color: rgba(255,107,107,.9); } }
.gstat { position: absolute; top: 70px; left: 50%; transform: translateX(-50%); padding: 6px 14px; border-radius: 99px; background: rgba(20,30,40,.75); border: 1px solid rgba(160,210,255,.4); color: #cfe6ff; font-size: 12px; }
.rolecard.secret { background: #16110d; color: var(--cream); border-color: var(--brass); }
.rolecard.secret .portrait { margin: 8px auto; }
.buzz { display: flex; gap: 12px; justify-content: center; margin: 14px 0 6px; }
.buzz > div { flex: 1; padding: 10px 6px; border-radius: 8px; background: rgba(255,240,215,.06); border: 1px solid rgba(201,163,90,.35); }
.buzz i { display: block; font-style: normal; letter-spacing: .3em; color: var(--brass); font-size: 18px; }
.buzz span { display: block; font-size: 12px; color: var(--dim); }
.buzz b { display: block; font: 900 18px var(--serif); }
.rolecard kbd { padding: 0 6px; border-radius: 4px; background: rgba(255,240,215,.14); font: 700 11px var(--sans); }
.vr-btn { position: absolute; right: 18px; bottom: 18px; padding: 8px 16px; border-radius: 99px; font: 700 13px var(--sans); background: rgba(18,10,8,.8); color: var(--cream); border: 1px solid var(--brass); cursor: pointer; }

/* Touch movement and actions stay outside the game panels. */
#stage canvas { touch-action: none; }
/* A Devvit inline post is part of Reddit's feed: leave vertical scrolling to
   Reddit and reserve scene swipes for the user-expanded game view. */
body.devvit-inline #stage canvas { touch-action: pan-y; }
body.devvit-inline #touchStick { display: none !important; }
#touchControls { display: none; }
.touch-capable.in-game:not(.touch-ui-open):not(.xr-active) #touchControls { display: block; position: fixed; inset: 0; pointer-events: none; z-index: 7; }
#touchStick { position: absolute; left: max(16px, env(safe-area-inset-left)); bottom: max(22px, env(safe-area-inset-bottom)); width: 110px; height: 110px; border: 2px solid rgba(232,207,143,.62); border-radius: 50%; background: rgba(18,10,8,.4); pointer-events: auto; touch-action: none; }
#touchStick::after { content: ""; position: absolute; inset: 50%; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: var(--brass2); opacity: .5; }
#touchStickKnob { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px; border: 1px solid var(--brass2); border-radius: 50%; background: rgba(109,26,36,.85); box-shadow: 0 2px 8px #0008; }
.touch-actions { position: absolute; right: max(10px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(3, 56px); gap: 7px; pointer-events: auto; }
.touch-actions button { min-width: 56px; min-height: 42px; padding: 3px; border: 1px solid rgba(232,207,143,.7); border-radius: 10px; background: rgba(18,10,8,.72); color: var(--cream); font: 700 11px var(--sans); touch-action: none; }
.touch-actions button.touch-primary { background: rgba(109,26,36,.95); border-color: var(--brass2); }
.touch-actions button.pressed { background: var(--brass); color: var(--ink); }
.touch-crouch { position: absolute; left: max(22px, env(safe-area-inset-left)); bottom: max(148px, calc(env(safe-area-inset-bottom) + 140px)); min-width: 94px; min-height: 44px; padding: 8px 12px; pointer-events: auto; touch-action: none; border: 1px solid var(--brass2); border-radius: 10px; color: var(--cream); background: rgba(18,10,8,.78); font: 700 12px var(--sans); }
.touch-crouch[aria-pressed="true"] { color: var(--ink); background: var(--brass); }
.crouch-status { position: absolute; bottom: 108px; left: 16px; padding: 5px 9px; border: 1px solid rgba(232,207,143,.5); border-radius: 5px; background: rgba(18,10,8,.65); font: 11px var(--sans); color: var(--cream); pointer-events: none; }
.touch-capable .crouch-status { left: 20px; bottom: 202px; }
.touch-help { display: none; }

@media (max-width: 640px) {
  .screen { --gap: 12px; padding: max(16px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom)); overflow-y: auto; }
  #title { padding-bottom: max(28px, env(safe-area-inset-bottom)); }
  .logo-title { font-size: clamp(52px, min(18vw, 15vh), 90px); }
  .logo-sub { font-size: 11px; letter-spacing: .22em; }
  #title .menu { width: min(340px, 90vw); }
  .title-lobbies { position: static; max-width: 100%; margin-top: 7px; transform: none; justify-content: center; }
  .suspects, .suspects.small { width: 100%; gap: 7px; }
  .sus { padding: 8px 4px; gap: 3px; }
  .sus b { font-size: 13px; }
  .sus .portrait { width: 54px; height: 54px; }
  .suspects.small .portrait { width: 44px; height: 44px; }
  .members { gap: 5px; }
  .member { max-width: 100%; font-size: 11px; }
  .member-profile > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .menu.row { width: 100%; }
  .menu.row button { padding: 10px 13px; font-size: 15px; min-height: 44px; }
  .online-box { width: 100%; }
  .join-row input { width: 110px; }
  .help { max-height: 55dvh; overflow-y: auto; }
  .touch-capable .touch-help { display: block; }
  .touch-capable #clock { top: max(4px, env(safe-area-inset-top)); min-width: 106px; padding: 3px 7px; }
  .touch-capable .clk-time { font-size: 16px; }
  .touch-capable .ph-top { top: max(50px, calc(env(safe-area-inset-top) + 48px)); left: 6px; gap: 3px; }
  .touch-capable .inv { left: auto; right: 6px; top: max(54px, calc(env(safe-area-inset-top) + 52px)); bottom: auto; transform: scale(.72); transform-origin: top right; }
  .touch-capable .prompt { bottom: 185px; width: max-content; max-width: 90%; white-space: normal; font-size: 12px; }
  .touch-capable .stamina { bottom: max(9px, env(safe-area-inset-bottom)); }
  .touch-capable .dlg, .touch-capable .body-menu, .touch-capable .accp { bottom: max(6px, env(safe-area-inset-bottom)); max-height: 86%; overflow-y: auto; }
  .touch-capable .book { inset: max(48px, env(safe-area-inset-top)) 4px max(4px, env(safe-area-inset-bottom)); }
  .touch-capable .book-head { flex-wrap: wrap; gap: 5px; padding: 6px; }
  .touch-capable .book-tabs button { padding: 5px; }
  .touch-capable #tableBoard { top: 58px; right: 5px; width: min(250px, 65vw); max-height: 25vh; overflow-y: auto; font-size: 11px; }
  .touch-capable #pauseBtn { top: max(7px, env(safe-area-inset-top)); right: max(7px, env(safe-area-inset-right)); }
}

@media (max-height: 680px) and (pointer: coarse) {
  #touchStick { width: 88px; height: 88px; }
  .touch-actions { grid-template-columns: repeat(3, 52px); gap: 4px; }
  .touch-actions button { min-width: 52px; min-height: 36px; font-size: 10px; }
}
.toast.thought { display: flex; gap: 8px; align-items: center; max-width: 520px; text-align: left; border-left-color: #8d8a84; font: italic 14px/1.45 var(--serif); }
.toast.thought i { font-style: italic; }
.team-badge { display: flex; gap: 9px; align-items: center; max-width: min(300px, 90vw); padding: 7px 12px 7px 8px; background: rgba(18,10,8,.86); border: 1px solid #6f8fb0; border-radius: 8px; }
.team-badge b { display: block; font: 700 14px var(--serif); }
.team-badge small { display: block; font: 11px/1.4 var(--sans); color: var(--dim); }
.narrow .team-badge { max-width: 220px; padding: 5px 8px; } .narrow .team-badge b { font-size: 12px; }

/* task mini-games */
.task-panel .tp-stage { position: relative; }
.task-panel .tp-extra { position: absolute; inset: auto 0 0 0; padding: 12px; background: linear-gradient(transparent, #120d0aee 30%); display: flex; flex-direction: column; gap: 8px; }
.task-panel .tp-paint { display: flex; gap: 8px; }
.task-panel .tp-paint input { flex: 1; padding: 8px 10px; font: 15px var(--serif); background: #2a211a; color: #f2e6c8; border: 1px solid var(--brass); border-radius: 6px; }
.task-panel .tp-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.task-panel .tp-chips button { font-size: 12px; padding: 4px 9px; }
.task-panel .tp-done { position: absolute; inset: 0; display: grid; place-items: center; font: 700 44px var(--serif); color: #9be37a; text-shadow: 0 3px 18px #000; background: #0006; pointer-events: none; animation: tpDone .5s ease-out; }
.task-panel .tp-status { color: #f2e6c8; }
@keyframes tpDone { from { transform: scale(1.4); opacity: 0; } }

/* The mansion appears first; controls stay hidden until GPU preparation finishes. */
body.booting > :not(#stage):not(#bootLoading):not(script){visibility:hidden!important;pointer-events:none!important}
#bootLoading{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;background:#090b10}
#bootScene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.65}
#bootLoading::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,7,12,.85),rgba(6,7,12,.15) 70%)}
.boot-content{position:relative;z-index:1;text-align:center;width:min(90vw,650px)}
.boot-content .logo{margin:0 0 4rem;text-shadow:0 4px 28px #000}
.boot-progress{width:min(75vw,360px);margin:4rem auto 0}
#bootProgress{display:block;width:100%;height:7px;border:1px solid #a88a55;border-radius:5px;background:#201b18;overflow:hidden;accent-color:#dfbf7d}
#bootProgress::-webkit-progress-bar{background:#201b18}#bootProgress::-webkit-progress-value{background:linear-gradient(90deg,#927039,#f2d99d);transition:width .2s}
#guestLoading{font-size:12px;letter-spacing:.08em;color:#e6d9bc;min-height:2em}

.performance-review{font-size:12px;margin-top:16px;color:var(--dim)}.performance-review pre{max-height:210px;overflow:auto;white-space:pre-wrap;font:11px monospace;user-select:text}.performance-review button{font-size:12px}

.speech-settings{border:1px solid #806b45;border-radius:6px;margin:14px 0;padding:10px;font-size:12px}.speech-settings label{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:7px 0}.speech-settings select{max-width:230px}.speech-settings p{color:var(--dim);font-size:12px}.settings-card{max-height:90vh;overflow:auto}
.speech-settings select,.speech-settings button{font:inherit;color:#f2e6c8;background:#2a211a;border:1px solid #806b45;border-radius:5px;padding:6px 8px}.speech-settings button{cursor:pointer}.speech-settings button:hover,.speech-settings button:focus-visible{background:#493b28;outline:1px solid #d7b36b}.speech-settings select{min-width:0;width:60%}

/* Cinematic dialogue: speech remains separate from response controls. */
#hud .dlg { inset: 0; width: auto; padding: 0; transform: none; border: 0; border-radius: 0; background: none; box-shadow: none; pointer-events: none; overflow: hidden; }
.d-caption { position: absolute; left: 4%; top: 30%; width: 36%; max-width: 440px; text-shadow: 0 2px 4px #000, 0 0 14px #000; }
.d-name { margin-bottom: 10px; font-weight: 700; }
.d-name .pchip { border: 0; background: none; padding: 0; }
.d-line { font-size: clamp(17px, 2vw, 25px); line-height: 1.45; max-height: 30vh; overflow-y: auto; }
.d-opts { position: absolute; bottom: max(18px, env(safe-area-inset-bottom)); left: 4%; right: 4%; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; max-height: 29%; margin: 0; overflow-y: auto; overscroll-behavior: contain; pointer-events: auto; padding: 4px; }
.d-opts .opt { min-width: 0; border-left: 4px solid var(--choice-color,#c7af80); background: #171b23e8; text-align: left; padding: 12px; }
.d-opts .kind { color: var(--choice-color,#c7af80); }
.category-ask { --choice-color: #8dc6ff; }
.category-chat { --choice-color: #9de0ce; }
.category-search { --choice-color: #edc580; }
.category-team-up { --choice-color: #b6a5ff; }
.category-accuse { --choice-color: #ff9b9b; }
.category-pass-on { --choice-color: #e9b4e8; }
.d-timer { position: absolute; bottom: 34%; left: 4%; }
.dice { top: auto; left: auto; right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); transform: none; width: 210px; }
.dice-c canvas { width: 115px !important; height: 115px !important; }
.narrow .d-caption { left: 4%; top: 24%; width: 46%; }
.narrow .d-opts { grid-template-columns: 1fr; max-height: 31%; }
.narrow .dice { width: 160px; font-size: 12px; }
.narrow .dice-c canvas { width: 90px !important; height: 90px !important; }
@media (pointer: coarse) { .touch-capable .dlg { bottom: 0; max-height: none; overflow: hidden; } .d-opts { touch-action: pan-y; } }
@media (max-height: 500px) { .d-caption { top: 15%; } .d-line { font-size: 16px; max-height: 28vh; } .d-opts .opt { padding: 7px; } }

.d-timer { top: auto; right: auto; }

.talking .ph-top, .talking > .daily-task, .talking .inv, .talking .stamina, .talking .prompt, .talking .noted { visibility: hidden; pointer-events: none; }

/* Avatar appearance is independent of who controls a seat. */
.avatar-mode { display: grid; justify-items: center; gap: 8px; margin: 14px auto 8px; }
.avatar-mode-label { color: var(--brass); font: 700 11px var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.avatar-mode-buttons { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; width: min(100%,360px); }
.avatar-mode-button { position: relative; display: grid; justify-items: center; gap: 4px; min-width: 0; min-height: 76px; padding: 9px 12px; border: 1px solid #c9a35a66; border-radius: 9px; background: #10151bde; color: var(--cream); font: 700 12px var(--sans); }
.avatar-mode-button svg { width: 58px; height: 34px; }
.avatar-mode-button.is-selected { border-color: var(--brass2); background: #594523; box-shadow: 0 0 0 2px var(--brass2); color: #fff7dc; }
.avatar-mode-button.is-selected::after { content: '✓'; position: absolute; top: 4px; right: 7px; color: #ffe2a1; }
.avatar-mode-button:focus-visible { outline: 3px solid #e9d39c; outline-offset: 4px; }
.avatar-mode-button:disabled { cursor: default; opacity: .65; }
.avatar-mode-button.is-selected:disabled { opacity: .9; }
@media (max-width: 380px) { .avatar-mode-buttons { gap: 6px; width: min(100%,290px); } .avatar-mode-button { padding: 8px; } }

/* Controller choices keep keyboard numbers; face/shoulder shortcuts are contextual. */
.pad-shortcut,.pad-only{display:none}
.controller-input .d-opts .pad-shortcut{display:inline-flex;align-items:center;justify-content:center;min-width:1.8em;height:1.8em;padding:0 .25em;border:1px solid currentColor;border-radius:.4em;font-weight:800;font-size:.8em;color:#ffe3a1;flex-shrink:0}
.controller-input .d-opts .n{display:none}
.controller-input .pad-only{display:inline}
.vote-guide{font-size:.78rem;color:#d9c9ad;margin:.4rem 0}.vote-warning{color:#ffd28d;border-left:3px solid #c69b49;padding:.5rem;font-size:.85rem}

.dialogue-pad-guide{grid-column:1/-1;margin:.2rem 0;color:#ddcfb8;font-size:.76rem}.controller-input .dialogue-pad-guide{display:block}

/* Today’s Story is the private Core Card hand. */
.core-book{max-width:800px;margin:auto}.core-book>p{font:13px/1.6 var(--sans);color:#cfbd95}.core-tools{display:flex;gap:8px;flex-wrap:wrap}
.core-record{border:1px solid #756448;border-radius:6px;padding:12px;margin:10px 0;background:#1b2025;display:flow-root}.core-record-face{--u:.72px;float:left;margin:0 14px 6px 0;cursor:default;pointer-events:none}.core-record.invalid{opacity:.58}.core-record header{font:11px var(--sans);color:#d4ba7e}.core-record h4{margin:8px 0}.core-record p{font:13px/1.5 var(--sans)}.core-record button,.core-tools button{margin:4px;padding:7px;min-height:36px}.core-record details{font:12px var(--sans);color:#c9c1b0}


.core-story{position:relative;pointer-events:auto;overflow:visible}
/* Cards arrive one by one on a transparent strip: no panel, no placeholder slots. */
.core-card-wrap.cc-enter{animation:coreCardIn .55s cubic-bezier(.2,.8,.25,1.15) var(--enter-delay,0ms) both}
@keyframes coreCardIn{from{opacity:0;transform:translateY(-14px) scale(.82) rotate(-4deg)}to{opacity:1;transform:none}}
.reduce-motion .core-card-wrap.cc-enter{animation:none}
.core-story-grid{display:grid;grid-auto-flow:column;grid-auto-columns:calc(96*var(--u,1px));gap:calc(7*var(--u,1px))}
.core-card-wrap{display:block}
/* Core Cards: one unit (--u) scales the whole face so HUD, split-screen and manual share one design. */
.core-card{--u:1px;--edge:#8f743e;--ink:#3b2f1c;--bar:#8f743e;--bg:linear-gradient(160deg,#f6ead0,#d8c39b);position:relative;display:flex;flex-direction:column;width:calc(96*var(--u));height:calc(134*var(--u));min-height:0;padding:calc(5*var(--u));box-sizing:border-box;border:calc(2*var(--u)) solid var(--edge);border-radius:calc(9*var(--u));color:var(--ink);background:var(--bg);box-shadow:inset 0 0 0 calc(2*var(--u)) #ffffff30,inset 0 0 calc(18*var(--u)) #0003,0 calc(3*var(--u)) calc(6*var(--u)) #0007;cursor:pointer;overflow:hidden;isolation:isolate;transition:transform .16s,border-color .16s,box-shadow .16s;text-align:center}
.core-card:before{content:'';position:absolute;inset:calc(4*var(--u));border:1px solid currentColor;border-radius:calc(6*var(--u));opacity:.22;pointer-events:none;z-index:1}
.core-card:hover,.core-card:focus-visible{transform:translateY(-4px) rotate(-.6deg);border-color:#f1d17d;outline:2px solid #e3c478;outline-offset:2px;box-shadow:inset 0 0 0 calc(2*var(--u)) #ffffff40,0 8px 16px #000a}
.cc-tex{position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--tex,none);opacity:var(--tex-o,1)}
.cc-stains{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;mix-blend-mode:multiply}
.cc-band{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:calc(3*var(--u));height:calc(15*var(--u));margin:calc(-1*var(--u)) calc(-1*var(--u)) 0;border-radius:calc(5*var(--u)) calc(5*var(--u)) calc(2*var(--u)) calc(2*var(--u));background:var(--band,#0000001c);color:var(--band-ink,inherit)}
.cc-emblem{width:calc(12*var(--u));height:calc(12*var(--u));flex:none}
.core-card-label{font:800 calc(7.4*var(--u))/1 var(--sans);letter-spacing:.07em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-art{position:relative;z-index:2;flex:1;display:grid;align-content:center;justify-items:center;align-items:center;min-height:0;padding:calc(2*var(--u)) 0}
.cc-n1{grid-template-rows:auto auto;gap:calc(2*var(--u))}
.cc-n2{grid-template-columns:1fr calc(15*var(--u)) 1fr;column-gap:calc(1*var(--u))}
.cc-n3{grid-template-columns:1fr calc(16*var(--u)) 1fr;grid-template-areas:"a a a" "b v c";row-gap:calc(1*var(--u))}
.cc-n3 .cc-tok-0{grid-area:a}.cc-n3 .cc-tok-1{grid-area:b}.cc-n3 .cc-tok-2{grid-area:c}.cc-n3 .cc-verb{grid-area:v;align-self:start;margin-top:calc(9*var(--u))}
.cc-tok{display:flex;flex-direction:column;align-items:center;min-width:0;max-width:100%}
.cc-name{display:block;max-width:calc(44*var(--u));margin-top:calc(1.5*var(--u));font:700 calc(7*var(--u))/1.15 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 0 var(--name-glow,#fff6)}
.cc-tok-you .cc-name{margin-top:calc(6.5*var(--u))}
.cc-name em{display:block;font:italic 600 calc(5.6*var(--u))/1.1 var(--serif);opacity:.72;letter-spacing:.04em;text-transform:uppercase}
.ct{--s:calc(32*var(--u));position:relative;display:block;width:var(--s);height:var(--s);flex:none}
.cc-n1 .ct{--s:calc(46*var(--u))}.cc-n2 .ct{--s:calc(35*var(--u))}.cc-n3 .cc-tok-0 .ct{--s:calc(38*var(--u))}.cc-n3 .cc-tok-1 .ct,.cc-n3 .cc-tok-2 .ct{--s:calc(30*var(--u))}
.ct .ci{position:absolute;inset:0;width:100%;height:100%}
.ct-person{border-radius:50%;background:radial-gradient(circle at 50% 35%,#5d6470,#22262c);box-shadow:0 0 0 calc(2*var(--u)) var(--pc),0 0 0 calc(3*var(--u)) #0008,0 calc(2*var(--u)) calc(4*var(--u)) #0008;overflow:visible}
.ct-person img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 22%}
.ct-person .ct-sil{border-radius:50%;overflow:hidden}
.ct-person.is-dead img{filter:grayscale(1) contrast(1.1) brightness(.8)}
.ct-badge{position:absolute;right:calc(-4*var(--u));bottom:calc(-3*var(--u));width:calc(14*var(--u));height:calc(14*var(--u));border-radius:50%;background:#14100d;box-shadow:0 0 0 1px #e3c47888;display:block}
.ct-badge .ci{inset:calc(1.5*var(--u));width:auto;height:auto}
.ct-badge.ct-gone{right:auto;left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);width:120%;height:120%;background:none;box-shadow:none}
.ct-badge.ct-gone .ci{inset:0}
.ct-you{position:absolute;left:50%;bottom:calc(-4*var(--u));transform:translateX(-50%);padding:0 calc(3*var(--u));border-radius:calc(3*var(--u));background:var(--pc);color:#fff;font:800 calc(5.5*var(--u))/1.5 var(--sans);font-style:normal;letter-spacing:.06em;text-shadow:0 1px 1px #000a}
.ct-room .ci{filter:drop-shadow(0 calc(1.5*var(--u)) calc(2*var(--u)) #0008)}
.ct-thing{border-radius:50%;background:radial-gradient(circle at 45% 35%,#fffaf0f0,#d9ccb0e0 60%,#8d7a5ad0);box-shadow:0 0 0 calc(1.5*var(--u)) #6b5531,0 calc(2*var(--u)) calc(4*var(--u)) #0007}
.ct-thing>.ci:first-child{inset:8%;width:84%;height:84%}
.ct-thing .ct-smear{inset:0}
.ct-thing.is-missing>.ci:first-child{opacity:.38;filter:grayscale(.6)}
.ct-mark{border-radius:calc(7*var(--u));background:radial-gradient(circle at 45% 35%,#fffaf0e6,#d5c6a6d0);box-shadow:0 0 0 calc(1.5*var(--u)) #6b5531,0 calc(2*var(--u)) calc(4*var(--u)) #0007}
.ct-mark .ci{inset:7%;width:86%;height:86%}
.cc-verb{position:relative;display:block;width:calc(15*var(--u));height:calc(15*var(--u));border-radius:50%;background:#16120f;box-shadow:0 0 0 1px var(--edge),0 1px 3px #0009;z-index:3}
.cc-verb .ci{position:absolute;inset:calc(2*var(--u));width:auto;height:auto}
.cc-n2 .cc-verb{align-self:start;margin-top:calc(10*var(--u))}
.cc-meter{position:relative;z-index:2;display:flex;align-items:center;gap:calc(3*var(--u));height:calc(11*var(--u));padding:0 calc(2*var(--u))}
.cc-bar{flex:1;height:calc(4*var(--u));border-radius:9px;background:#0003;box-shadow:inset 0 1px 1px #0005;overflow:hidden}
.cc-bar i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--bar),color-mix(in srgb,var(--bar) 60%,#fff))}
.cc-meter b{font:800 calc(7*var(--u))/1 var(--sans);letter-spacing:.04em;min-width:calc(18*var(--u));text-align:right}
.cc-back{display:flex;align-items:center;justify-content:center}
.cc-seal{position:relative;display:block;width:calc(44*var(--u));height:calc(44*var(--u));border-radius:50%;background:radial-gradient(circle,#2b2620,#120f0c);box-shadow:0 0 0 calc(2*var(--u)) #a8874a,0 0 0 calc(5*var(--u)) #a8874a33}
.cc-seal .ci{position:absolute;inset:calc(8*var(--u));width:auto;height:auto;opacity:.75;animation:cc-turn 6s ease-in-out infinite}
@keyframes cc-turn{0%,40%{transform:rotate(0)}50%,90%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}
/* Type backgrounds: each card kind has its own stock, so a hand reads at a glance. */
.core-witness{--edge:#d8d2c4;--ink:#2a1214;--bar:#a30d22;--band:#7d0716;--band-ink:#fff4ee;--bg:radial-gradient(ellipse at 50% 40%,#ffffff,#f3efe6 55%,#ddd5c6);--tex:repeating-linear-gradient(0deg,#00000005 0 1px,transparent 1px 3px);box-shadow:inset 0 0 0 calc(2*var(--u)) #fff,inset 0 0 calc(20*var(--u)) #7d071622,0 0 calc(10*var(--u)) #c0142a55,0 calc(3*var(--u)) calc(6*var(--u)) #0007}
.core-accusation{--edge:#e2b65b;--ink:#fde9c8;--bar:#e2b65b;--band:#00000045;--name-glow:#0008;--bg:radial-gradient(ellipse at 50% 30%,#8f1d27,#4c0a12 70%,#2a050a);--tex:repeating-linear-gradient(45deg,#ffffff07 0 2px,transparent 2px 6px)}
.core-observation{--edge:#7fa2c4;--ink:#e6eef6;--bar:#9fc4e8;--band:#0000003a;--name-glow:#0008;--bg:radial-gradient(ellipse at 50% 20%,#4b6f93,#22364d 60%,#121d2a);--tex:radial-gradient(circle at 50% 8%,#fff3c255,transparent 45%)}
.core-evidence{--edge:#8b6a32;--ink:#3a2a14;--bar:#8b5a1a;--band:#8b6a3233;--bg:linear-gradient(170deg,#efe0b8,#d6bf8c 70%,#c3a670);--tex:repeating-radial-gradient(circle at 80% 85%,#5a3a1416 0 1px,transparent 1px 4px)}
.core-suspect{--edge:#d9862b;--ink:#2e1806;--bar:#c4561c;--band:#c4561c;--band-ink:#fff4e6;--bg:linear-gradient(165deg,#f8d79c,#e7a75a 75%,#c97a33);--tex:repeating-linear-gradient(-45deg,#0000000d 0 6px,transparent 6px 12px)}
.core-investigation{--edge:#6d5a3a;--ink:#2b2215;--bar:#6d5a3a;--band:#6d5a3a3a;--bg:linear-gradient(160deg,#e7dcc2,#c8b48a);--tex:repeating-linear-gradient(0deg,#4a3a2212 0 1px,transparent 1px 10px),repeating-linear-gradient(90deg,#4a3a2212 0 1px,transparent 1px 10px)}
.core-alibi{--edge:#6fb38f;--ink:#e9f7ee;--bar:#8fdcb2;--band:#00000030;--name-glow:#0008;--bg:radial-gradient(ellipse at 50% 30%,#2f7d58,#14452f 70%,#0b2a1d);--tex:repeating-linear-gradient(135deg,#ffffff08 0 1px,transparent 1px 4px)}
.core-company{--edge:#93a9c8;--ink:#253549;--bar:#4d6a91;--band:#4d6a9133;--bg:linear-gradient(165deg,#e3e9f1,#b8c6d8 70%,#98abc4);--tex:radial-gradient(circle at 20% 15%,#ffffff70,transparent 40%)}
.core-visit{--edge:#b58a4c;--ink:#fbecd2;--bar:#e3b85c;--band:#00000035;--name-glow:#0008;--bg:linear-gradient(175deg,#7a4a26,#4f2c13 70%,#3a1f0c);--tex:repeating-linear-gradient(92deg,#ffffff07 0 2px,transparent 2px 5px,#0000000e 5px 6px,transparent 6px 11px)}
.core-location{--edge:#7fb4e0;--ink:#e2f1ff;--bar:#7fb4e0;--band:#00000035;--name-glow:#0008;--bg:linear-gradient(170deg,#1d4f86,#123460);--tex:repeating-linear-gradient(0deg,#bfe2ff1c 0 1px,transparent 1px 8px),repeating-linear-gradient(90deg,#bfe2ff1c 0 1px,transparent 1px 8px)}
.core-flicker{--edge:#c9b35a;--ink:#f3eac2;--bar:#ffe680;--band:#00000045;--name-glow:#000a;--bg:radial-gradient(ellipse at 50% 15%,#2b3456,#11152a 65%,#07080f);--tex:radial-gradient(circle at 70% 18%,#ffe68033,transparent 30%),radial-gradient(circle at 25% 75%,#7f9cff22,transparent 35%)}
.core-objective{--edge:#a8172a;--ink:#f4d9dc;--bar:#a8172a;--band:#a8172a;--band-ink:#fff;--name-glow:#000a;--bg:radial-gradient(ellipse at 50% 30%,#2a1418,#120809 70%,#050203);--tex:repeating-linear-gradient(60deg,#a8172a0f 0 1px,transparent 1px 7px)}
.core-question{--edge:#6d5a33;--ink:#bba878;--band:#0000;--bg:linear-gradient(145deg,#2b2821,#191b19);--tex:repeating-linear-gradient(45deg,#e3c4780c 0 1px,transparent 1px 9px),repeating-linear-gradient(-45deg,#e3c4780c 0 1px,transparent 1px 9px);border-style:dashed}
.core-question .cc-meter{visibility:hidden}
/* The back: the same tokens with role labels and the full account. */
.core-card-detail{display:none;position:absolute;top:100%;left:0;z-index:70;width:min(340px,calc(100vw - 36px));box-sizing:border-box;margin-top:6px;padding:13px 15px;border:1px solid #bea15d;border-radius:9px;background:#171b1bf7;box-shadow:0 9px 26px #000a;color:#f0e5cf;text-align:left;pointer-events:auto;overflow-wrap:anywhere;max-height:52vh;overflow-y:auto;isolation:isolate}
.core-card-detail .cc-stains{z-index:-1;opacity:.9}
.cd-head{display:flex;align-items:center;gap:7px;margin-bottom:8px}.cd-emblem{width:20px;height:20px;flex:none}
.core-card-detail strong{display:block;font:700 11px var(--sans);color:#d2b875;letter-spacing:.03em}.core-card-detail b{display:block;font:700 16px/1.3 var(--serif)}.core-card-detail p{font:13px/1.5 var(--sans);margin:8px 0}.core-card-detail small{display:block;margin-top:6px;font:10px/1.4 var(--sans);color:#bfbaab}
.cd-art{--u:1.35px;display:block;margin:2px 0 8px;padding:8px 6px;border-radius:8px;background:#00000038;box-shadow:inset 0 0 0 1px #ffffff14}
.cd-art .cc-art{min-height:calc(70*var(--u))}
.core-card-detail .cc-meter{--u:1.3px;--bar:#e3c478;margin:6px 0 0}
.cd-witness{background:radial-gradient(ellipse at 50% 30%,#fffdf8,#ece5d6);color:#2a1214;border-color:#c0142a}.cd-witness strong{color:#7d0716}.cd-witness small{color:#6b5a50}.cd-witness .cd-art{background:#ffffff8c;box-shadow:inset 0 0 0 1px #7d071633}.cd-witness .cc-meter{--bar:#a30d22}
.cd-accusation{background:linear-gradient(170deg,#3d0a10f7,#1b0508f7);border-color:#e2b65b}
.cd-observation{background:linear-gradient(170deg,#1f3247f7,#0f1923f7);border-color:#7fa2c4}
.cd-evidence{background:linear-gradient(170deg,#3a2c16f7,#1d160bf7);border-color:#b8954f}
.cd-suspect{background:linear-gradient(170deg,#4a2508f7,#221004f7);border-color:#d9862b}
.cd-investigation{background:linear-gradient(170deg,#352c1df7,#1a150df7);border-color:#9c8458}
.cd-alibi{background:linear-gradient(170deg,#123a28f7,#081d14f7);border-color:#6fb38f}
.cd-company{background:linear-gradient(170deg,#24344af7,#111a26f7);border-color:#93a9c8}
.cd-visit{background:linear-gradient(170deg,#3f2410f7,#1f1107f7);border-color:#b58a4c}
.cd-location{background:linear-gradient(170deg,#123460f7,#0a1d36f7);border-color:#7fb4e0}
.cd-flicker{background:linear-gradient(170deg,#1b2140f7,#07080ff7);border-color:#c9b35a}
.cd-objective{background:linear-gradient(170deg,#2a0d12f7,#0b0405f7);border-color:#a8172a}
.core-card-detail .cc-name{--name-glow:#0008;color:inherit}.cd-witness .cc-name{--name-glow:#fff8}
.core-card-wrap.open .core-card-detail,.core-card:focus-visible+.core-card-detail{display:block}
@media(hover:hover){.core-card-wrap:hover .core-card-detail{display:block}}
.narrow .core-story{--u:.7px}.narrow .core-card{--u:.7px}.narrow .core-card-detail{width:min(300px,calc(50vw - 28px))}
.touch-capable .core-story,.touch-capable .core-card{--u:.74px}
@media(max-width:650px){.book-tabs{flex-wrap:wrap}}
@media(max-width:650px),(max-height:520px){.phud .core-story,.phud .core-card{--u:.66px}}
@media(prefers-reduced-motion:reduce){.core-card{transition:none}.core-card:hover,.core-card:focus-visible{transform:none}.cc-seal .ci{animation:none}}
.acol button.proven-invalid{text-decoration:line-through;opacity:.4}.acol button.most-likely{border-color:#d9b759;box-shadow:inset 0 0 0 1px #d9b75988}.acol button.protected-ally{opacity:.5;font-style:italic}.acol button.proven-invalid.most-likely{box-shadow:none}

/* ---------- pie (radial) item menu ---------- */
.pie { position: fixed; z-index: 60; width: 0; height: 0; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.pie.hidden { display: none; }
.pie button { font-family: var(--serif); }
.pie-hub { position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; border-radius: 50%; border: 2px solid rgba(201,163,90,.7); background: rgba(18,10,8,.92); color: var(--brass2); font-size: 15px; cursor: pointer; display: grid; place-items: center; box-shadow: 0 4px 16px #000c; }
.pie-item { position: absolute; left: calc(var(--x) - 42px); top: calc(var(--y) - 42px); width: 84px; height: 84px; border-radius: 50%; padding: 4px; border: 2px solid rgba(201,163,90,.55);
  background: radial-gradient(circle at 50% 30%, #3a2a22, #1a110e); color: var(--cream); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; cursor: pointer;
  box-shadow: 0 4px 16px #000c; animation: pie-in .14s ease-out both; line-height: 1.05; }
.pie-item i { font-style: normal; font-size: 18px; }
.pie-item b { font-size: 10.5px; max-width: 74px; line-height: 1.1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pie-item small { font: 9px var(--sans); color: var(--dim); max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pie-item:hover, .pie-item:focus-visible, .pie-item.hot { border-color: var(--brass2); background: radial-gradient(circle at 50% 30%, #5a3f30, #2a1a14); transform: scale(1.12); outline: none; }
.pie-item.danger { border-color: rgba(199,85,74,.7); } .pie-item.danger i { color: #f08a7e; }
.pie-item:disabled { opacity: .45; cursor: default; }
@keyframes pie-in { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

#stage canvas { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* ---------- rev 5: accessibility, comfort and new controls ---------- */
/* Reduced motion: the device setting or the in-game switch stops UI animation. */
@media (prefers-reduced-motion: reduce) { html:not(.motion-ok) *, html:not(.motion-ok) *::before, html:not(.motion-ok) *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
.reduce-motion .core-card:hover, .reduce-motion .core-card:focus-visible { transform: none; }
/* Reduced flashing: no strobing overlays (the 3D lights calm down in view.js). */
.reduce-flashing .flicker, .reduce-flashing .flash, .reduce-flashing [class*="flash"] { animation: none !important; }
/* Colour vision: the same correction as the 3D view, for the HUD and menus. */
.cvd-ui #hud, .cvd-ui .cine, .cvd-ui #tableBoard, .cvd-ui .screen, .cvd-ui #settings { filter: url(#cvdFilter); }
/* Larger text: scale the reading surfaces (not the positioned HUD frames). */
.text-large .dlg, .text-large .accp, .text-large .book, .text-large .toasts, .text-large .prompt, .text-large .daily-task, .text-large .body-menu, .text-large .cine-card, .text-large #tableBoard, .text-large .manual-book, .text-large .settings-card { zoom: var(--text-scale, 1); }
/* Core Cards stay readable on phones: a slightly larger card and a floor
   under every label, name and percentage (they were 3.7–4.9 px). */
@media (max-width: 650px), (max-height: 520px) { .phud .core-story, .phud .core-card { --u: .9px; } }
.core-card-label { font-size: max(8.5px, calc(7.4 * var(--u))); }
.cc-name { font-size: max(8.5px, calc(7 * var(--u))); max-width: max(44px, calc(44 * var(--u))); }
.cc-name em { font-size: max(7.5px, calc(5.6 * var(--u))); }
.cc-meter b { font-size: max(8.5px, calc(7 * var(--u))); }
.ct-you { font-size: max(7.5px, calc(5.5 * var(--u))); }
/* Small HUD text floors (phones shrank these to 10–11 px). */
@media (max-width: 640px) { .touch-capable .prompt { font-size: 13px; } .touch-capable #tableBoard { font-size: 12px; } }
/* Touch targets: at least 44 px tall everywhere (WCAG 2.5.5 / Apple HIG). */
@media (max-height: 680px) and (pointer: coarse) {
  .touch-actions { grid-template-columns: repeat(3, 50px); gap: 5px; }
  .touch-actions button { min-width: 50px; min-height: 44px; font-size: 11px; }
}
.touch-actions button { min-height: 44px; }
/* Accusation: accuse or skip. */
.acc-actions { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 10px; }
.acc-actions .acc-go { margin-top: 0; }
.acc-skip { padding: 9px 14px; border: 2px solid #7d7262; border-radius: 4px; background: #1d1916; color: var(--cream); font: 700 15px var(--serif); cursor: pointer; }
.acc-skip.on { border-color: var(--brass2); background: #3a2f22; }
.acc-skip.focus, .acc-skip:focus-visible { box-shadow: 0 0 0 3px rgba(232,207,143,.45); outline: none; }
#tableBoard .prop.skip span { opacity: .75; font-style: italic; }
/* Volume mixer and new settings. */
.volume-settings { border: 1px solid #806b45; border-radius: 6px; margin: 14px 20px; padding: 10px 12px; font-size: 13px; color: var(--cream); }
.volume-settings legend { padding: 0 6px; color: var(--brass2); font: 700 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.volume-settings label { display: grid; grid-template-columns: 9.5em 1fr 3em; align-items: center; gap: 10px; margin: 8px 0; }
.volume-settings input[type="range"] { width: 100%; accent-color: var(--brass2); min-height: 24px; }
.volume-settings output { text-align: right; color: var(--brass2); font-variant-numeric: tabular-nums; }
.settings-fields small { display: block; color: var(--dim); font: 500 11px var(--sans); }
.performance-review ul { margin: 6px 0 10px 18px; padding: 0; font: 12px/1.5 var(--sans); color: var(--cream); }
.performance-review li { margin: 4px 0; }
.kocard em { font-style: normal; font-weight: 800; color: var(--brass2); }
.round-seed { margin-top: 14px; color: var(--dim); font: 12px var(--sans); user-select: all; }

/* Map: snapshot of each level with what this player can see or remembers. */
.map-btn { display: inline-grid; place-items: center; width: 30px; height: 26px; padding: 0; border: 1px solid rgba(201,163,90,.5); border-radius: 6px; background: rgba(18,10,8,.8); color: var(--brass2); cursor: pointer; pointer-events: auto; }
.map-btn svg { width: 18px; height: 18px; }
.touch-capable .map-btn { width: 40px; height: 34px; }
.touch-capable .map-btn svg { width: 22px; height: 22px; }
.map-panel { position: absolute; inset: 3%; z-index: 7; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 8px; border: 2px solid var(--brass); border-radius: 12px; background: radial-gradient(120% 90% at 50% 40%, #2a1d14f5, #110b08f8); box-shadow: 0 18px 70px #000c, inset 0 0 0 1px #00000080; pointer-events: auto; }
.map-head { display: flex; align-items: center; gap: 12px; min-height: 36px; }
.map-head b { font: 700 20px var(--serif); color: var(--cream); letter-spacing: .02em; }
.map-levels { display: flex; gap: 4px; padding: 3px; border: 1px solid rgba(201,163,90,.35); border-radius: 99px; background: #0007; }
.map-levels button { padding: 6px 14px; border: 0; border-radius: 99px; background: transparent; color: var(--dim); font: 700 12px var(--sans); cursor: pointer; transition: background .15s, color .15s; }
.map-levels button:hover { color: var(--cream); }
.map-levels button.on { background: linear-gradient(#d9b46a, #a07a36); color: #1a0f08; }
.map-where { flex: 1; text-align: right; font: italic 13px var(--serif); color: var(--brass2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-x { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(201,163,90,.5); background: #0006; color: var(--cream); font-size: 15px; cursor: pointer; }
.map-x:hover, .map-tools button:hover { background: rgba(201,163,90,.25); }
.map-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(201,163,90,.35); }
.map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.map-canvas:active { cursor: grabbing; }
.map-tools { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 6px; }
.map-tools button { width: 36px; height: 36px; border-radius: 8px; border: 1px solid rgba(201,163,90,.55); background: #140d09e6; color: var(--cream); font: 700 18px var(--sans); line-height: 1; cursor: pointer; box-shadow: 0 4px 14px #0008; }
.touch-capable .map-tools button { width: 44px; height: 44px; }
.map-tip { position: absolute; transform: translate(-50%, calc(-100% - 8px)); padding: 5px 9px; border: 1px solid var(--brass); border-radius: 7px; background: #140d09f2; color: var(--cream); font: 12px var(--sans); pointer-events: none; white-space: nowrap; box-shadow: 0 6px 18px #000a; }
.map-tip b { display: block; font: 700 13px var(--serif); }
.map-tip small { color: var(--dim); }
.map-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; }
.map-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font: 11px var(--sans); color: var(--dim); }
.map-legend span { display: inline-flex; align-items: center; gap: 5px; }
.map-legend i { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; font-style: normal; }
.map-legend .lg-ico { width: 20px; height: 20px; padding: 2px; border-radius: 50%; background: #120c09; box-shadow: 0 0 0 2px #e0503c; }
.map-legend .lg-ico.lg-item { box-shadow: 0 0 0 2px #e9d7a6; }
.lg-you { background: #fff4d6; box-shadow: 0 0 0 2px #fff4d6, 0 0 0 4px #fff4d655; }
.lg-person { background: #5d8fd6; box-shadow: 0 0 0 2px #2756c8; }
.lg-chalk { width: 18px; height: 18px; filter: drop-shadow(0 0 2px #ff3030); }
.lg-old { background: #120c09; box-shadow: 0 0 0 2px #8a8070; outline: 1px dashed #cfc6b4; outline-offset: 2px; opacity: .7; }
.map-hint { font: 11px var(--sans); color: #a8987a; }
.map-hint span { display: none; }
.map-panel[data-input="mouse"] .hint-mouse, .map-panel[data-input="touch"] .hint-touch, .map-panel[data-input="pad"] .hint-pad { display: inline; }
@media (max-width: 650px) { .map-panel { inset: 1.5%; padding: 8px; } .map-head b { display: none; } .map-levels button { padding: 5px 10px; font-size: 11px; } .map-where { font-size: 12px; } .map-hint { display: none; } }

/* ---------- every screen size ---------- */
/* Menu screens centre their content while it fits and scroll from the top when it does not
   (plain flex centring cut off the heading and the Back button on short windows). */
.screen::before, .screen::after { content: ""; flex: 1 0 0; margin-block: calc(var(--gap) / -2); }
#title::after { display: none; }
#title::before { margin-block: 0 calc(-1 * var(--gap)); }
/* Short windows (1024×576, 630×500, landscape phones): tighter menus, the same layout. */
@media (max-height: 640px) {
  .screen { --gap: 12px; padding-block: 14px; }
  #title { padding-bottom: max(18px, 4vh, env(safe-area-inset-bottom)); }
  .screen h2 { font-size: clamp(22px, 5.5vh, 34px); }
  .menu { gap: 7px; }
  .menu button { padding: 9px 22px; font-size: 16px; }
  .menu button small { margin-top: 1px; font-size: 11px; }
  .title-utility-row { min-height: 46px; }
  .title-help-trigger { top: -18px; }
  .avatar-mode { margin: 4px auto; gap: 5px; }
  .avatar-mode-button { min-height: 58px; padding: 5px 10px; }
  .avatar-mode-button svg { height: 26px; }
  .killers { margin: 0; }
  .killers button { height: 34px; }
  .suspects.small .sus { padding: 6px 4px; gap: 3px; }
  .suspects.small .portrait { width: 46px; height: 46px; }
  .help { padding: 10px 14px; font-size: 13px; }
  .help p { margin: 3px 0; }
  .boot-content .logo { margin-bottom: 2rem; }
  .boot-progress { margin-top: 2rem; }
  .settings-head { padding: 10px 16px 6px; }
  .settings-fields { gap: 12px; padding: 14px 18px; }
  .cine-card { padding: 16px 18px; }
  .cine.banner { padding-top: 10vh; }
}
@media (max-height: 640px) and (min-width: 1001px) {
  .sus .lore { -webkit-line-clamp: 1; }
  .sus .face { width: clamp(44px, 9vh, 70px); }
}
@media (max-height: 460px) { .sus .lore { display: none; } }

/* In-game panels never run off the screen. */
.accp { max-height: calc(100% - 24px); overflow-y: auto; overscroll-behavior: contain; }
.rolecard { max-height: calc(100% - 24px); overflow-y: auto; }
#tableBoard { max-height: calc(100vh - 110px); overflow-y: auto; }
.pool-panel canvas { width: auto; max-width: 100%; max-height: calc(100vh - 230px); margin-inline: auto; }
/* Narrow single-screen windows: the clock moves beside the menu button so it no longer
   covers the role, notes and Core Cards stacked at the top left. */
@media (max-width: 760px) {
  body:not(.touch-capable):not(.split) #clock { left: auto; right: 60px; transform: none; min-width: 0; max-width: calc(100vw - 300px); }
  body:not(.touch-capable):not(.split) #clock:has(.daily-task:not(.hidden)) { max-width: min(330px, calc(100vw - 300px)); }
  body:not(.touch-capable):not(.split) #tableBoard { top: 124px; width: min(300px, 46vw); max-height: calc(100vh - 140px); }
}
/* Very narrow: the clock stays centred and the top-left stack starts under it
   (--clock-h is the clock's measured bottom edge, kept current by ui.js). */
@media (max-width: 520px) {
  body:not(.touch-capable):not(.split) #clock, body:not(.touch-capable):not(.split) #clock:has(.daily-task:not(.hidden)) { left: 50%; right: auto; transform: translateX(-50%); max-width: calc(100vw - 110px); }
  body:not(.touch-capable):not(.split) .ph-top { top: max(10px, calc(var(--clock-h, 0px) + 8px)); }
  body:not(.touch-capable):not(.split) #tableBoard { top: max(74px, calc(var(--clock-h, 0px) + 8px)); width: min(300px, 70vw); }
}
@media (max-width: 640px) {
  body.touch-capable:not(.split) .ph-top { top: max(50px, calc(var(--clock-h, 0px) + 6px)); }
  body.touch-capable:not(.split) .inv { top: max(54px, calc(var(--clock-h, 0px) + 6px)); }
}
/* Short player views (set by PlayerHud.setRect). */
.phud.short .ph-top { gap: 5px; }
.phud.short .core-story, .phud.short .core-card { --u: .8px; }
.phud.short .inv .islot { min-height: 38px; }
.phud.short .prompt { bottom: 15%; }
.phud.short .noted { top: 96px; }
.phud.short .book { inset: 52px 3% 8px; }
.phud.short .book-head { padding: 6px 12px; }
.phud.short .rolecard { padding: 14px 16px; gap: 3px; }
.phud.short .rolecard h2 { font-size: 20px; }
.phud.short .role-name { font-size: 24px; }
.phud.short .kocard b { font-size: 22px; }
.phud.short .map-hint { display: none; }
.phud.short .map-head { min-height: 30px; }
.phud.short .map-panel { inset: 1.5%; gap: 5px; padding: 6px 10px; }