/* Tara & Marley’s Medieval Manor: one full-bleed 3D canvas; menus are candlelit cards over the manor; the HUD hugs the corners.
   Surfaces are dark plum glass with a gilt hairline; titles are blackletter; everything else is round and friendly.
   Sizes are in rem: the root size follows the window (and Settings > Interface size), so 1280x720 and 2560x1440 both read well.
   Stacking: walk HUD 4, HUD 5, menus 10, map 18, meeting 20, fix panels 22, splashes 25, dialogs 30, toast 40, boot 50. */
:root {
  color-scheme: dark;
  /* oak, ink and lamp-black; brass rules; parchment for paper things. Nothing glows that is not a flame. */
  --night: #0f0c09; --plum: #1b1611; --plum-2: #241d16; --plum-3: #3a2f24; --line: rgba(196,163,108,.22); --line-2: rgba(196,163,108,.45);
  --ink: #ece2cd; --muted: #bfb197; --dim: #978a72; --parch: #ede1c6; --parch-2: #dccaa2; --parch-ink: #241a12;
  --candle: #c9a35b; --candle-2: #e0c78f; --gilt: #b08f58; --blood: #9b3328; --blood-2: #cf6b58; --teal: #6e9a8a; --sleuth: #8fa3b5; --ghost: #b8c2cc; --leaf: #8eab72;
  --glass: #18130e; --glass-hud: rgba(19,15,11,.92); --glass-solid: #1b1611;
  --hair: inset 0 0 0 1px var(--line-2), inset 0 0 0 4px var(--glass), inset 0 0 0 5px var(--line);
  --lift: 0 0.75rem 2rem rgba(0,0,0,.5);
  --display: 'IM Fell English SC', 'IM Fell English', 'Iowan Old Style', Georgia, serif;
  --serif: 'IM Fell English', 'Iowan Old Style', Georgia, serif;
  --ui: 'Alegreya Sans', 'Gill Sans', 'Trebuchet MS', system-ui, sans-serif;
  --caps: 'Alegreya Sans SC', 'Alegreya Sans', 'Gill Sans', system-ui, sans-serif;
  --pad: 1rem; --r: 0.1875rem;
  --grain: none;
  font-synthesis: none;
}
html { font-size: calc(var(--ui-scale, 1) * clamp(14px, min(10px + .85vh, 8px + 1.1vw), 24px)); }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body { background: var(--night); color: var(--ink); font: 1rem/1.45 var(--ui); overflow: hidden; -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.btn { border: 0; border-radius: 2px; min-height: 44px; box-sizing: border-box; padding: 0.625rem 1.125rem; font: 700 1rem/1.15 var(--caps); letter-spacing: .03em; background: #241d16; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: 0.5625rem; box-shadow: inset 0 0 0 1px var(--line-2); transition: background .15s, box-shadow .15s, color .15s; }
input, textarea { user-select: text; -webkit-user-select: text; }
.pick, .chat-log, .casefile p, .reason { user-select: text; -webkit-user-select: text; }
:focus-visible { outline: 2px solid var(--candle); outline-offset: 0.1875rem; }
.ico { width: 1.25em; height: 1.25em; flex: none; display: inline-block; vertical-align: -0.22em; }
kbd { display: inline-grid; place-items: center; min-width: 1.375rem; height: 1.375rem; padding: 0 0.375rem; box-sizing: border-box; font: 700 0.75rem/1 var(--ui); border-radius: 2px; background: #2a221a; box-shadow: inset 0 0 0 1px var(--line-2), 0 2px 0 #0b0907; color: var(--parch); letter-spacing: .02em; }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#labels { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
.eyebrow { margin: 0; font: 400 0.9375rem/1.2 var(--display); letter-spacing: .06em; color: var(--gilt); }
h1, h2, h3 { margin: 0; }
.orn { display: flex; align-items: center; gap: 0.625rem; color: var(--gilt); }
.orn::before, .orn::after { content: ''; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--line-2)); }
.orn::after { background: linear-gradient(90deg, var(--line-2), transparent); }
.orn i { width: 0.375rem; height: 0.375rem; transform: rotate(45deg); background: var(--gilt); opacity: .8; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.fine { margin: 0; font-size: 0.8125rem; color: var(--dim); }
.soft { color: var(--dim); letter-spacing: .06em; text-transform: none; font-weight: 500; }
.soft-line { margin: 0; color: var(--muted); }
.stack { display: grid; gap: 0.625rem; }
.note { margin: 0; display: flex; gap: 0.5625rem; align-items: flex-start; font-size: 0.875rem; color: var(--muted); }

/* ---------- buttons & controls ---------- */
.btn { border: 0; border-radius: 0.25rem; min-height: 44px; box-sizing: border-box; padding: 0.6875rem 1.125rem; font-weight: 600; font-size: 0.9688rem; background: linear-gradient(160deg, #474038, #39332c); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: 0.5625rem; box-shadow: inset 0 0 0 1px var(--line-2), 0 2px 0.375rem rgba(0,0,0,.15); transition: background .15s, filter .15s, box-shadow .15s; }
@media (hover: hover) and (pointer: fine) { .btn:hover:not(:disabled) { background: #2e251c; box-shadow: inset 0 0 0 1px var(--candle); } .btn.primary:hover:not(:disabled) { background: #f4ead3; } }
.btn:active:not(:disabled) { background: #1a1510; transform: translateY(1px); }
.btn.primary { background: var(--parch); color: var(--parch-ink); box-shadow: inset 0 0 0 1px #7d5f35, inset 0 0 0 3px var(--parch), inset 0 0 0 4px rgba(125,95,53,.55); }
.btn.danger { background: #7a2a20; color: #f3e6d0; box-shadow: inset 0 0 0 1px #b5584a; }
.btn.ghosty { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.btn.big { font-size: 1.125rem; padding: 0.875rem 1.375rem; }
.btn .ico { width: 1.15em; height: 1.15em; }
.btn small { font-family: var(--ui); letter-spacing: 0; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; filter: none; }
.btn.busy:disabled { opacity: .92; cursor: progress; }
.icon-btn { min-width: 44px; width: 2.75rem; height: 2.75rem; padding: 0; border-radius: 0.25rem; }
.spin { width: 1em; height: 1em; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(1turn); } }
.field { display: grid; gap: 0.4375rem; }
.field > span { font: 700 0.875rem/1 var(--caps); letter-spacing: .04em; color: var(--muted); }
.input { background: rgba(15,12,10,.55); border: 0; min-height: 44px; box-sizing: border-box; box-shadow: inset 0 0 0 1px var(--line-2); border-radius: 0.25rem; padding: 0.6875rem 0.8125rem; color: var(--ink); outline: none; transition: box-shadow .15s; }
.input:focus { box-shadow: inset 0 0 0 2px var(--candle), inset 0 2px 0.375rem rgba(0,0,0,.35); }
.input:disabled { opacity: .55; }
.input::placeholder { color: var(--dim); }
.input.code { font: 700 1.375rem/1 var(--ui); letter-spacing: .32em; text-transform: uppercase; width: 8ch; text-align: center; padding-left: calc(0.8125rem + .32em); }
.input.bad { box-shadow: inset 0 0 0 2px var(--blood-2), inset 0 2px 0.375rem rgba(0,0,0,.35); animation: nope .35s; }
@keyframes nope { 20%, 60% { transform: translateX(-0.3125rem); } 40%, 80% { transform: translateX(0.3125rem); } }
.seg { display: inline-flex; flex-wrap: wrap; background: rgba(15,12,10,.4); box-shadow: inset 0 0 0 1px var(--line); border-radius: 0.25rem; padding: 0.1875rem; gap: 2px; }
.seg button { border: 0; background: transparent; padding: 0.4375rem 0.8125rem; border-radius: 0.25rem; font-weight: 600; font-size: 0.875rem; color: var(--muted); transition: background .15s, color .15s; }
.seg button:hover:not(:disabled):not(.on) { color: var(--ink); background: rgba(255,255,255,.05); }
.seg button.on { background: var(--parch); color: var(--parch-ink); box-shadow: none; }
.seg button:disabled:not(.on) { opacity: .6; cursor: default; }
.seg button:disabled.on { cursor: default; }
@media (hover: hover) and (pointer: fine) { .seg button { min-height: 2.5rem; } }
.stepper { display: inline-flex; align-items: center; gap: 2px; background: rgba(15,12,10,.4); box-shadow: inset 0 0 0 1px var(--line); border-radius: 0.25rem; padding: 0.1875rem; }
.stepper b { min-width: 2.2em; text-align: center; font-variant-numeric: tabular-nums; }
.stepper button { width: 2.125rem; height: 2rem; border: 0; border-radius: 0.25rem; background: rgba(255,255,255,.06); font: 700 1.125rem/1 var(--ui); color: var(--ink); }
.stepper button:hover:not(:disabled) { background: rgba(255,255,255,.12); }
.stepper button:disabled { opacity: .35; cursor: default; }
.row { display: flex; gap: 0.625rem; align-items: center; flex-wrap: wrap; }
.range { display: grid; grid-template-columns: 1fr auto; gap: 0.375rem 0.625rem; align-items: center; }
.range > span { font-weight: 600; }
.range b { font-weight: 600; color: var(--candle-2); font-size: 0.8438rem; font-variant-numeric: tabular-nums; }
.range input { grid-column: 1 / -1; width: 100%; -webkit-appearance: none; appearance: none; height: 0.375rem; border-radius: 6.1875rem; background: linear-gradient(90deg, var(--candle) var(--v, 50%), rgba(255,255,255,.1) var(--v, 50%)); outline: none; margin: 0.5rem 0; }
.range input::-webkit-slider-thumb { -webkit-appearance: none; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--parch); box-shadow: 0 0 0 0.1875rem rgba(207,173,104,.35), 0 2px 0.375rem rgba(0,0,0,.4); cursor: pointer; }
.range input::-moz-range-thumb { width: 1.125rem; height: 1.125rem; border: 0; border-radius: 50%; background: var(--parch); box-shadow: 0 0 0 0.1875rem rgba(207,173,104,.35); cursor: pointer; }
.range input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 0.1875rem var(--candle), 0 0 0 0.375rem rgba(207,173,104,.3), 0 2px 0.375rem rgba(0,0,0,.4); }
.range input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 0.1875rem var(--candle), 0 0 0 0.375rem rgba(207,173,104,.3); }
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; font-weight: 600; cursor: pointer; }
.toggle input { -webkit-appearance: none; appearance: none; width: 2.625rem; height: 1.5rem; border-radius: 6.1875rem; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px var(--line); position: relative; cursor: pointer; transition: background .2s; flex: none; margin: 0; }
.toggle input::after { content: ''; position: absolute; top: 0.1875rem; left: 0.1875rem; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--parch); box-shadow: 0 1px 0.1875rem rgba(0,0,0,.4); transition: transform .2s; }
.toggle input:checked { background: var(--candle); }
.toggle input:checked::after { transform: translateX(1.125rem); }
.card { position: relative; background: var(--glass); border-radius: var(--r); padding: 1.25rem; box-shadow: var(--hair), var(--lift); }
.card::before { content: none; }
.card > * { position: relative; }
.tag { display: inline-flex; align-items: center; gap: 0.25rem; font: 700 0.75rem/1.2 var(--caps); padding: 0.125rem 0.4375rem; border-radius: 2px; background: transparent; box-shadow: inset 0 0 0 1px currentColor; color: var(--muted); letter-spacing: .04em; }
.tag .ico { width: 0.75rem; height: 0.75rem; }
.tag.host { color: var(--candle); }
.tag.bot { color: var(--sleuth); }
.tag.you { color: var(--teal); }
.tag.partner { color: var(--blood-2); }
.portrait { position: relative; display: block; border-radius: 0.875rem; overflow: hidden; background: radial-gradient(circle at 50% 30%, #54483c, #29221c); box-shadow: inset 0 0 0 1px var(--line-2); }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; }
body.lowfx .card, body.lowfx .layer, body.lowfx :is(.taskbox,.taskout), body.lowfx .mapview { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* ---------- toast: one for the whole game, above everything ---------- */
.toast { position: fixed; left: 50%; top: 19%; transform: translate(-50%, 0.5rem); text-align: center; opacity: 0; transition: opacity .3s, transform .3s; max-width: min(80vw, 56.25rem); display: grid; gap: 0.375rem; justify-items: center; z-index: 40; pointer-events: none; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast b { display: block; font: 400 2.75rem/1 var(--display); color: var(--parch); text-shadow: 0 2px 0 #000, 0 0 0.25rem rgba(0,0,0,.9); }
.toast span { font: 500 1.0625rem/1.35 var(--serif); font-style: italic; text-shadow: 0 1px 0 #000, 0 0 0.3rem rgba(0,0,0,.95); color: #efe5d0; }
.toast span:not(:empty)::before { content: ''; display: block; width: 7.5rem; height: 1px; margin: 0 auto 0.5rem; background: var(--gilt); }
.toast b:empty { display: none; }
/* a discovery (a hidden door, a puzzle that clicks open) is violet, like the hidden passages on the map */
.toast.secret b { color: #d6e6dc; text-shadow: 0 0.1875rem 0 #282018; }
.toast.secret span:not(:empty)::before { background: linear-gradient(90deg, transparent, #7fae9c, transparent); width: 10rem; }

/* ---------- boot ---------- */
#boot { position: fixed; inset: 0; display: grid; place-items: center; background: var(--night); z-index: 50; transition: opacity .7s; }
#boot::before { content: none; }
#boot.done { opacity: 0; pointer-events: none; }
.boot-card { position: relative; display: grid; gap: 0.875rem; justify-items: center; width: min(28.75rem, 88vw); text-align: center; }
.boot-card h1 { font: 400 clamp(2.5rem, 9vw, 4.2rem)/1.02 var(--display); color: var(--parch); }
.boot-card h1 span { display: block; margin-top: .65rem; color: var(--gilt); font: 400 .4em/1.2 var(--serif); font-style: italic; letter-spacing: .02em; }
.bar { width: 100%; height: 0.375rem; border-radius: 0.1875rem; background: rgba(255,255,255,.08); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.bar i { display: block; height: 100%; width: 0; background: var(--candle); border-radius: inherit; transition: width .3s; }
.boot-step { font-size: 0.9062rem; color: var(--muted); min-height: 1.4em; }
.boot-tip { font-size: 0.9062rem; color: var(--ink); opacity: .8; font-style: italic; max-width: 42ch; margin: 0.375rem 0 0; }
.boot-card.failed .bar i { background: var(--blood); box-shadow: none; animation: none; }
.boot-card.failed .boot-step { color: var(--blood-2); max-width: 44ch; }
.boot-card .btn { margin-top: 0.25rem; }
.boot-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
@keyframes flicker-unused { 0%, 100% { text-shadow: 0 0.1875rem 0 #3a2418; } 45% { text-shadow: 0 0.1875rem 0 #3a2418; } 55% { text-shadow: 0 0.1875rem 0 #3a2418; } }

/* ---------- title menu ---------- */
#menu { position: fixed; inset: 0; display: flex; align-items: center; padding: 1.5rem var(--pad); background: linear-gradient(90deg, rgba(20,17,14,.94) 0%, rgba(20,17,14,.78) 38%, rgba(20,17,14,0) 70%); z-index: 10; animation: fadein .6s; }
#menu::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 120% 90% at 70% 50%, transparent 50%, rgba(0,0,0,.55)); }
.menu-card { position: relative; z-index: 1; width: min(58rem, 100%); display: grid; gap: 1.25rem; margin-left: clamp(0px, 3vw, 3rem); max-height: 100%; overflow: auto; padding: 0.375rem 0.5rem 0.375rem 2px; scrollbar-width: thin; scrollbar-color: var(--plum-3) transparent; }
.title-lockup h1 { font: 400 clamp(2.65rem, 5.2vw, 4rem)/1.02 var(--display); color: var(--parch); text-shadow: 0 2px 0 rgba(0,0,0,.6); }
.title-lockup h1 span { display: flex; align-items: center; gap: 0.75rem; font: 400 .34em/1.2 var(--serif); font-style: italic; color: var(--gilt); letter-spacing: .02em; margin-top: .55em; text-shadow: none; }
.title-lockup h1 span::before, .title-lockup h1 span::after { content: ''; height: 1px; width: 2.2em; background: var(--line-2); }
.tagline { margin: 0; font-size: 1.0312rem; max-width: 38ch; color: #e9dfcc; }
.who { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0.875rem; align-items: center; padding: 0.875rem; }
.who .portrait { width: 5.5rem; height: 5.5rem; border-radius: 0.25rem; box-shadow: inset 0 0 0 2px var(--candle); }
.who .nm-in { display: grid; gap: 0.375rem; }
.who .char-name { font: 400 1.75rem/1 var(--display); color: var(--parch); }
.who .char-line { font-size: 0.8438rem; color: var(--muted); }
.menu-actions { display: grid; gap: 0.625rem; }
.join-row { display: flex; gap: 0.5rem; }
.join-row .btn { flex: 1; }
.menu-foot { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.menu-foot .ver { margin-left: auto; font-size: 0.8125rem; color: var(--dim); }
.err { color: var(--blood-2); font-size: 0.9062rem; min-height: 1.3em; margin: 0; }
.menu-layout { display: grid; grid-template-columns: 1.1fr 1fr; align-items: start; gap: 1rem; }
.menu-layout > section { min-width: 0; display: grid; gap: 1rem; }
.menu-section-head { display: grid; gap: .25rem; padding-bottom: .75rem; border-bottom: 1px solid var(--line); }
.menu-section-head h2 { font: 400 1.375rem/1.25 var(--display); color: var(--parch); }
.menu-section-head .eyebrow { font-size: .7rem; letter-spacing: .12em; }
.menu-identity .who { padding: 0; background: none; box-shadow: none; }
.menu-identity .who::before { display: none; }
.menu-identity .who .portrait { width: 5rem; height: 5rem; border-radius: 0.25rem; box-shadow: inset 0 0 0 1px var(--line-2); }
.menu-identity .who .char-name { font-size: 1.5rem; }
.menu-identity .who .nm-in { min-width: 0; gap: .4rem; }
.menu-identity .who .nm-in label { font-size: .8rem; color: var(--muted); }
.menu-identity .who .input { width: 100%; }
.menu-colours { border-top: 1px solid var(--line); padding-top: .125rem; }
.menu-colours > summary { display: flex; align-items: center; gap: .5rem; list-style: none; min-height: 44px; cursor: pointer; font-size: .875rem; color: var(--muted); }
.menu-colours > summary::-webkit-details-marker { display: none; }
.menu-colours > summary::after { content: '+'; color: var(--candle); font-size: 1.25rem; }
.menu-colours[open] > summary::after { content: '−'; }
.menu-colours .outfit-current { margin-left: auto; font-size: .8125rem; display: flex; align-items: center; gap: .5rem; }
.menu-colours .outfit-current::before { content: ''; width: .75rem; height: .75rem; background: var(--outfit); border-radius: 50%; box-shadow: 0 0 0 1px #ffffff30; }
.menu-colours .outfit-options { padding: .25rem 0 .75rem; }
.menu-play-button { justify-content: flex-start; text-align: left; min-height: 5.1rem; padding: .875rem 1rem; gap: .875rem; }
.menu-play-button > .ico { width: 1.5rem; height: 1.5rem; }
.menu-play-button > span { display: grid; gap: .2rem; }
.menu-play-button b { font-size: 1.0625rem; font-weight: 600; }
.menu-play-button small { font-size: .8125rem; line-height: 1.4; font-weight: 400; opacity: .85; }
.join-form { display: grid; gap: .5rem; }
.join-field { min-width: 0; display: grid; gap: .625rem; }
.join-field > label { font: 400 1.375rem/1.2 var(--display); color: var(--parch); }
.join-field > .join-hint { margin-top: -.375rem; }
.join-form .input.code { min-width: 0; width: 100%; min-height: 4rem; font-size: 1.75rem; }
.join-form .btn { width: 100%; min-height: 3.5rem; justify-content: center; }
.host-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; padding-top: .875rem; border-top: 1px solid var(--line); font-size: .875rem; color: var(--muted); }
.join-hint, .menu-status { margin: 0; font-size: .8rem; line-height: 1.45; color: var(--muted); }
.menu-status:empty { display: none; }
.menu-foot { padding-top: .25rem; }
.menu-foot .btn { padding: .625rem .875rem; }
@media (max-width: 820px) {
  #menu { padding: 1rem; align-items: flex-start; background: rgba(20,17,14,.82); }
  .menu-card { margin: auto; width: min(34rem, 100%); gap: 1rem; }
  .menu-layout { grid-template-columns: 1fr; gap: .75rem; }
  .menu-layout > section { padding: 1rem; gap: .75rem; }
  .menu-section-head { padding-bottom: .5rem; }
  .menu-section-head .eyebrow { display: none; }
  .menu-play-button { min-height: 4.5rem; }
  .title-lockup h1 { font-size: clamp(2.6rem, 8vw, 3.4rem); }
  .menu-foot .ver { flex-basis: 100%; margin-left: 0; }
}

/* Two identities; clothing colours belong to individual players. */
.chars { display: grid; gap: .65rem; }
.identity-options { display: grid; grid-template-columns: 1fr 1fr; gap: .625rem; }
.identity-card { display: flex; position: relative; align-items: center; gap: .65rem; min-width: 0; border: 1px solid var(--line); border-radius: 2px; padding: .5rem; text-align: left; background: #1d1712; color: var(--parch); transition: border-color .15s, background .15s; }
.identity-card img { width: 3.2rem; height: 3.6rem; border-radius: .6rem; object-fit: cover; object-position: 50% 18%; background: #28231e; }
.identity-card b { display: block; font: 400 1.3rem/1.15 var(--display); }
.identity-card small { display: block; margin-top: .2rem; color: var(--muted); font-size: .69rem; }
.identity-card > svg { margin-left: auto; width: 1rem; flex: none; color: var(--candle); }
.identity-card.on { border-color: var(--candle); background: #2a2119; }
.identity-card:hover { border-color: var(--gilt); }
.outfit-heading { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin-top: .2rem; font-size: .77rem; color: var(--muted); }
.outfit-current { color: var(--parch); font-weight: 500; }
.outfit-options { display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); gap: .45rem; }
.outfit-swatch { position: relative; display: grid; place-items: center; padding: .25rem; min-height: 2.35rem; border: 1px solid var(--line); border-radius: 0.25rem; background: #191612; }
.outfit-swatch i { display: block; width: 100%; height: 1.65rem; border-radius: .3rem; background: var(--outfit); box-shadow: inset 0 0 0 1px #ffffff24; }
.outfit-swatch svg { position: absolute; width: 1.1rem; height: 1.1rem; color: #ffffff; filter: drop-shadow(0 1px 1px #000000) drop-shadow(0 0 2px #000000); }
.outfit-swatch.on { border-color: var(--candle); box-shadow: 0 0 0 2px #cfad6824; }
.outfit-swatch:hover:not(:disabled) { border-color: var(--gilt); }
.outfit-swatch.pending { border-style: dashed; }
.outfit-swatch:disabled { cursor: not-allowed; opacity: .28; }
.outfit-swatch:disabled::after { content: ''; position: absolute; width: 65%; height: 2px; background: #ffffff; transform: rotate(-38deg); box-shadow: 0 0 2px #000000; }
.appearance-note { margin: 0; color: var(--dim); font-size: .72rem; line-height: 1.5; }
.outfit-tag { display: inline-flex; align-items: center; gap: .3rem; font-size: .68rem; color: var(--muted); white-space: nowrap; }
.outfit-tag i { width: .65rem; height: .65rem; border-radius: 50%; background: var(--outfit); box-shadow: 0 0 0 1px #ffffff30; }
@media (max-height: 860px) { .tagline { display: none; } .title-lockup h1 { font-size: clamp(2.5rem,6vw,3.75rem); } .menu-card { gap: .8rem; } .identity-card img { height: 2.75rem; width: 2.75rem; } }
@media (max-width: 480px) { .identity-card { gap: .4rem; } .identity-card b { font-size: 1rem; } .identity-card small { font-size: .6rem; } .identity-card > svg { display: none; } .outfit-options { gap: .35rem; } }

/* ---------- lobby ---------- */
#lobby { position: fixed; inset: 0; display: flex; padding: 1.25rem; background: radial-gradient(ellipse at 50% 40%, rgba(26,22,17,.55), rgba(15,12,10,.85)); z-index: 10; overflow: auto; animation: fadein .4s; }
.lobby { margin: auto; width: min(67.5rem, 100%); display: grid; grid-template-columns: 1.15fr 1fr; gap: 1rem; }
@media (max-width: 880px) { .lobby { grid-template-columns: 1fr; } }
@media (max-height: 820px) { .lobby { gap: 0.75rem; } .lobby .card { padding: 0.875rem 1rem; } .lobby-head h2 { font-size: clamp(2.25rem, 5vw, 2.875rem); } .players { max-height: 26vh; overflow: auto; } }
.lobby-head { grid-column: 1 / -1; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.lobby-head h2 { font: 400 clamp(2.5rem, 6vw, 3.5rem)/.9 var(--display); color: var(--parch); margin-top: 0.375rem; text-shadow: 0 0.1875rem 0 #2a1a10; }
.ticket { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 0.875rem 0.75rem 1.125rem; background: linear-gradient(135deg, #c8af74, #e6cf9f); color: var(--parch-ink); border-radius: 0.25rem; box-shadow: 0 0.625rem 1.875rem rgba(0,0,0,.4), inset 0 0 0 1px rgba(120,80,30,.35); position: relative; }
.ticket::before { content: ''; position: absolute; left: -0.4375rem; top: 50%; width: 0.875rem; height: 0.875rem; margin-top: -0.4375rem; border-radius: 50%; background: #231e18; }
.ticket small { font-family: var(--caps); display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: .04em;  color: #6f5028; }
.ticket b { font: 400 2.375rem/1 var(--display); letter-spacing: .12em; color: #3a2010; }
.ticket .btn { background: #3a2a1a; color: var(--parch); box-shadow: none; padding: 0.5625rem 0.75rem; font-size: 0.9062rem; min-width: 9.5em; }
.lobby .card h3 { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.players { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.players li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; align-items: center; gap: .15rem .625rem; background: rgba(15,12,10,.32); box-shadow: inset 0 0 0 1px var(--line); border-radius: 0.25rem; padding: .55rem; }
.players li.new { animation: pop .32s cubic-bezier(.2,1.3,.4,1) both; }
.players .portrait { width: 2.5rem; height: 2.5rem; border-radius: 0.25rem; grid-column: 1; grid-row: 1 / span 3; }
.players .nm { grid-column: 2; grid-row: 1; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.players .outfit-tag { grid-column: 2; grid-row: 2; min-width: 0; }
.players .tag { grid-column: 3; justify-self: end; }
.players .tag.host, .players .tag.bot { grid-row: 1; }
.players .tag.you { grid-row: 2; }
.players .row-acts { grid-column: 3; grid-row: 3; }
.players > li > small { grid-column: 2; grid-row: 3; }
.players small { color: var(--dim); font-size: 0.7812rem; display: flex; align-items: center; gap: 0.1875rem; }
.players small .ico { width: 0.8125rem; height: 0.8125rem; }
.players li.empty { grid-template-columns: 1fr; justify-items: center; color: var(--dim); font-size: 0.8438rem; background: transparent; box-shadow: none; border: 1px dashed var(--line-2); }
.row-acts { display: flex; gap: 0.25rem; margin-left: auto; }
.mini { min-width: 1.875rem; height: 1.875rem; padding: 0 0.4375rem; border: 0; border-radius: 0.25rem; background: rgba(255,255,255,.07); color: var(--muted); display: inline-grid; place-items: center; font: 700 0.75rem/1 var(--ui); }
.mini .ico { width: 0.9375rem; height: 0.9375rem; }
.mini:hover { background: rgba(255,255,255,.14); color: var(--ink); }
.mini.danger:hover, .mini.armed { background: var(--blood); color: #ffffff; }
.mini.armed:not(.danger) { background: var(--candle); color: #2a1a08; }
.lan-note { color: var(--muted); font-size: 0.8438rem; margin: 0.75rem 0 0; display: flex; gap: 0.5rem; align-items: flex-start; }
.lan-note b { color: var(--parch); font-weight: 600; word-break: break-all; }
.opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr)); gap: 0.5rem 1.625rem; }
.opt { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.625rem; padding: 0.375rem 0; border-bottom: 1px solid var(--line); }
.opt > span { font-weight: 600; }
.opt small { display: block; font-weight: 400; color: var(--dim); font-size: 0.8125rem; }
.mic-row { margin-top: 0.875rem; }
.mic-note { color: var(--muted); font-size: 0.8125rem; }
.mic-meter { height: 0.5rem; border-radius: 0.1875rem; background: rgba(255,255,255,.08); overflow: hidden; flex: 1; min-width: 7.5rem; box-shadow: inset 0 0 0 1px var(--line); }
.mic-meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--teal), #badcd6); transition: width .08s; }
.lobby-foot { grid-column: 1 / -1; display: flex; gap: 0.625rem; justify-content: flex-end; flex-wrap: wrap; align-items: center; }
.lobby-foot .wait { color: var(--muted); display: flex; gap: 0.5rem; align-items: center; }
.lobby-foot .grow { flex: 1; }
.lobby-rules-summary { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.lobby-rules-summary > span { border: 1px solid var(--line); border-radius: 0.25rem; padding: .3rem .6rem; background: #1b181480; color: var(--muted); font-size: .8125rem; }
.core-rules { margin-bottom: .875rem; }
.advanced-rules { border-top: 1px solid var(--line); }
.advanced-rules > summary { cursor: pointer; display: flex; align-items: center; gap: .75rem; min-height: 44px; padding: .625rem 0; list-style: none; }
.advanced-rules > summary::-webkit-details-marker { display: none; }
.advanced-rules > summary::after { content: '+'; margin-left: auto; font: 500 1.4rem/1 var(--ui); color: var(--candle); }
.advanced-rules[open] > summary::after { content: '−'; }
.advanced-rules > summary span { font-weight: 600; }
.advanced-rules > summary small { color: var(--muted); font-size: .8125rem; }
.advanced-rules > .opts { padding: .25rem 0 .5rem; }
.lobby-foot { position: sticky; bottom: 0; background: #241e19f5; border: 1px solid var(--line); padding: .75rem; border-radius: 0.25rem; z-index: 2; }

/* ---------- modal layers: Esc, backdrop click and the close button all work ---------- */
.layer { position: fixed; inset: 0; display: flex; padding: 1.25rem; background: rgba(12,10,7,.62);   z-index: 30; overflow: auto; animation: fadein .2s; }
.layer > .modal { margin: auto; }
.modal { width: min(40rem, 100%); max-height: calc(100vh - 2.5rem); max-height: calc(100dvh - 2.5rem); overflow: auto; display: grid; gap: 1rem; align-content: start; animation: rise .28s cubic-bezier(.2,.9,.3,1.2); outline: none; }
.modal.wide { width: min(56.25rem, 100%); }
.modal.narrow { width: min(26.25rem, 100%); }
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; }
.modal > .modal-head { position: sticky; top: 0; z-index: 3; margin: -1.25rem -1.25rem 0; padding: 1rem 1.25rem 0.75rem; background: linear-gradient(180deg, #393129 72%, rgba(57,49,41,0)); border-radius: var(--r) var(--r) 0 0; }
.modal h2 { font: 400 2.625rem/.9 var(--display); color: var(--parch); }
.tabs { display: flex; gap: 0.25rem; flex-wrap: wrap; background: rgba(15,12,10,.4); padding: 0.25rem; border-radius: 0.25rem; box-shadow: inset 0 0 0 1px var(--line); width: fit-content; max-width: 100%; }
.tabs button { border: 0; background: transparent; padding: 0.5rem 0.875rem; border-radius: 0.25rem; color: var(--muted); font-weight: 600; display: flex; gap: 0.4375rem; align-items: center; }
.tabs button.on { background: var(--plum-3); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.panel { display: grid; gap: 1rem; outline: none; }
.settings { width: min(52rem, 100%); }
.settings .panel:is([aria-labelledby=tab-g], [aria-labelledby=tab-a]) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.75rem; }
.settings .field, .settings .range, .settings .toggle { min-width: 0; }
.settings .field > span { line-height: 1.35; }
.settings .toggle { padding: .5rem 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
@media (max-width: 700px) { .settings .panel:is([aria-labelledby=tab-g], [aria-labelledby=tab-a]) { grid-template-columns: minmax(0, 1fr); gap: 1rem; } }
.help-start { padding: 1rem; border: 1px solid var(--line-2); border-radius: 0.25rem; background: #1b181480; }
.help-start ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: .75rem 0 0; padding: 0; list-style: none; counter-reset: steps; }
.help-start li { counter-increment: steps; display: grid; grid-template-columns: 1.75rem 1fr; gap: .25rem .5rem; align-content: start; }
.help-start li::before { content: counter(steps); grid-row: span 2; display: grid; place-items: center; height: 1.75rem; border-radius: 0.25rem; color: var(--candle); background: #cfad6814; font-weight: 600; }
.help-start li b { font-size: .9375rem; color: var(--parch); }
.help-start li span { color: var(--muted); font-size: .8125rem; line-height: 1.5; }
.help-start + .help-grid { margin-top: .25rem; }
.help-grid { columns: 3 15.625rem; column-gap: 0.75rem; } /* the cards flow down the columns, so a short one does not leave a hole beside a long one */
.help-grid > div { background: rgba(15,12,10,.35); box-shadow: inset 0 0 0 1px var(--line); border-radius: 0.25rem; padding: 0.875rem; break-inside: avoid; margin: 0 0 0.75rem; }
.help-grid > div[style*="grid-column"] { column-span: all; margin-bottom: 0; }
.help-grid h3 { font: 600 0.9688rem var(--ui); color: var(--candle); margin-bottom: 0.375rem; display: flex; gap: 0.5rem; align-items: center; }
.help-grid p, .help-grid li { margin: 0; color: var(--ink); font-size: 0.9062rem; }
.help-grid ul { margin: 0; padding-left: 1.125rem; }
.help-grid b { color: var(--parch); }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 0.75rem; font-size: 0.9062rem; align-items: center; }
.keys kbd { justify-self: start; }
.help-grid .keys { grid-template-columns: auto 1fr auto 1fr; gap: 0.5rem 0.875rem; }
@media (max-width: 760px) { .help-grid .keys { grid-template-columns: auto 1fr; } }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
.hud-tr { position: absolute; right: 0.875rem; top: 0.875rem; width: 18rem; display: grid; gap: 0.5rem; }
.hud-card { position: relative; background: var(--glass-hud); border-radius: 0.25rem; padding: 0.6875rem 0.8125rem; font-size: 0.8438rem; box-shadow: var(--hair), 0 0.5rem 1.5rem rgba(0,0,0,.3); }
.hud-card h4 { font-family: var(--caps); margin: 0 0 0.5rem; font-size: 0.75rem; letter-spacing: .04em;  color: var(--parch-2); display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.hud-card h4 .ico { width: 0.875rem; height: 0.875rem; color: var(--gilt); }
.hud-card h4 > span:first-child { display: flex; gap: 0.375rem; align-items: center; }
.role-card { display: grid; grid-template-columns: 2.75rem 1fr; gap: 0.6875rem; align-items: center; padding: 0.625rem 0.75rem; overflow: hidden; }
.role-card::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0.1875rem; background: var(--rc, var(--parch)); }
.role-card .emb { width: 2.75rem; height: 2.75rem; border-radius: 0.75rem; display: grid; place-items: center; color: var(--rc, var(--parch)); background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--rc, #ffffff) 22%, transparent), rgba(0,0,0,.2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc, #ffffff) 35%, transparent); }
.role-card .emb .ico { width: 1.5rem; height: 1.5rem; }
.role-card b { display: block; font: 400 1.625rem/1 var(--display); color: var(--rc, var(--parch)); }
.role-card small { color: var(--muted); font-size: 0.7812rem; display: block; line-height: 1.35; margin-top: 0.1875rem; }
.role-card.murderer { --rc: var(--blood); } .role-card.detective { --rc: var(--sleuth); } .role-card.guest { --rc: var(--parch); } .role-card.ghost { --rc: var(--ghost); }
.chore-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.25rem; }
.chore-list li { display: grid; grid-template-columns: 1rem minmax(0, 1fr) auto; gap: 0.5rem; align-items: center; padding: 0.3rem 0; transition: opacity .3s; }
.chore-list li i { width: 1rem; height: 1rem; border-radius: 0.3125rem; box-shadow: inset 0 0 0 2px rgba(230,210,168,.55); display: grid; place-items: center; transition: background .25s, box-shadow .25s; }
.chore-list li i .ico { width: 0.75rem; height: 0.75rem; color: #0d2a17; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .3s cubic-bezier(.2,1.6,.4,1); }
.chore-list li.done { opacity: .65; } .chore-list li.done span { text-decoration: line-through; text-decoration-color: rgba(127,214,154,.6); }
.chore-list li.done i { background: var(--leaf); box-shadow: none; } .chore-list li.done i .ico { opacity: 1; transform: none; }
.chore-list li.next span { color: var(--candle-2); }
.chore-list li small { color: var(--dim); white-space: nowrap; font-size: 0.75rem; max-width: 6.875rem; overflow: hidden; text-overflow: ellipsis; }
.dawn { display: grid; grid-template-columns: auto 1fr auto; gap: 0.5rem; align-items: center; margin-top: 0.625rem; font-size: 0.75rem; color: var(--muted); }
.dawn .ico { width: 0.875rem; height: 0.875rem; }
.dawn .ico.moon { color: var(--ghost); } .dawn .ico.sun { color: var(--candle); }
.dawn-cap { display: block; margin-top: 0.25rem; font-size: 0.75rem; color: var(--dim); }
.prog { height: 0.375rem; border-radius: 0.1875rem; background: rgba(255,255,255,.08); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #86725e, #c98a2a, var(--candle-2)); transition: width .6s cubic-bezier(.2,.8,.2,1); box-shadow: none; }
.nb { display: grid; gap: 0.375rem; }
.hud-bl { position: absolute; left: 1rem; bottom: 1rem; display: grid; gap: 0.5rem; }
.held { display: grid; grid-template-columns: 2.875rem 1fr; gap: 0.6875rem; align-items: center; padding: 0.5625rem 0.875rem 0.5625rem 0.5625rem; animation: rise .25s; }
.held .emb { width: 2.875rem; height: 2.875rem; border-radius: 0.75rem; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, rgba(207,173,104,.25), rgba(0,0,0,.2)); box-shadow: inset 0 0 0 1px rgba(207,173,104,.35); color: var(--candle-2); }
.held .emb .ico { width: 1.5rem; height: 1.5rem; }
.held.prop .emb { background: radial-gradient(circle at 50% 35%, rgba(134,174,252,.22), rgba(0,0,0,.2)); box-shadow: inset 0 0 0 1px rgba(134,174,252,.35); color: var(--sleuth); }
.held b { font-weight: 700; font-size: 0.9688rem; display: block; }
.held small { color: var(--muted); font-size: 0.7812rem; display: flex; gap: 0.375rem; align-items: center; margin-top: 2px; }
.held small kbd { height: 1.1875rem; min-width: 1.1875rem; font-size: 0.75rem; }
.hud-br { position: absolute; right: 1rem; bottom: 1rem; display: flex; gap: 0.75rem; align-items: flex-end; }
.act { --p: 0; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--glass-solid); display: grid; place-items: center; align-content: center; gap: 1px; text-align: center; font-size: 0.75rem; font-weight: 600; position: relative; color: var(--muted); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px var(--line-2), 0 0.5rem 1.25rem rgba(0,0,0,.4); transition: transform .15s, color .15s, box-shadow .2s; }
.act .ico { width: 1.625rem; height: 1.625rem; color: var(--ink); }
.act > span { line-height: 1; margin-top: 2px; }
.act kbd { position: absolute; top: -0.25rem; right: -0.25rem; height: 1.3125rem; min-width: 1.3125rem; font-size: 0.75rem; }
.act.hot { color: var(--ink); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 2px var(--candle); }
.act.hot .ico { color: var(--candle-2); }
.act.off { opacity: .55; }
.act.ready { color: #ffffff; box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 2px var(--blood); animation: ready 1.6s ease-in-out infinite; }
.act.ready .ico { color: var(--blood-2); }
@keyframes ready { 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 2px var(--blood); } }
.act .ring { position: absolute; inset: -0.25rem; border-radius: 50%; background: conic-gradient(rgba(14,11,8,.78) calc(var(--p) * 1turn), transparent 0); pointer-events: none; }
.act .cd { position: absolute; inset: 0; display: grid; place-items: center; font: 700 1.375rem var(--ui); color: var(--ink); text-shadow: 0 2px 0.375rem #000000; }
.act.big { width: 5.25rem; height: 5.25rem; }
.voice-list { position: absolute; left: 1rem; top: 7rem; display: grid; gap: 0.375rem; }
.voice-list div { display: flex; align-items: center; gap: 0.5rem; background: var(--glass-hud); border-radius: 0.1875rem; padding: 0.25rem 0.75rem 0.25rem 0.25rem; font-weight: 600; font-size: 0.8438rem; box-shadow: var(--hair); animation: rise .2s; }
.voice-list img { width: 1.625rem; height: 1.625rem; border-radius: 50%; object-fit: cover; object-position: 50% 15%; box-shadow: 0 0 0 2px var(--teal); }
.voice-list .ico { width: 0.875rem; height: 0.875rem; color: var(--teal); }
.mic-state { position: absolute; left: 1rem; top: 4.5rem; background: var(--glass-hud); border-radius: 0.1875rem; padding: 0.375rem 0.75rem 0.375rem 0.5625rem; font-size: 0.8125rem; font-weight: 600; display: flex; gap: 0.4375rem; align-items: center; box-shadow: var(--hair); color: var(--muted); }
.mic-state .ico { width: 0.9375rem; height: 0.9375rem; }
.mic-state .wh { margin-left: 0.25rem; padding-left: 0.5rem; border-left: 1px solid rgba(255,255,255,.18); color: var(--muted); font-weight: 500; } .mic-state .wh.on { color: #e9dcce; font-weight: 700; }
.mic-state.live { color: var(--ink); box-shadow: 0 0 0 1.5px var(--teal); } .mic-state.live .ico { color: var(--teal); }
.mic-state.off .ico { color: var(--blood-2); }
.alert { position: absolute; top: 0.875rem; left: 50%; translate: -50% 0; display: flex; align-items: center; gap: 0.75rem; background: linear-gradient(180deg, rgba(107,39,46,.94), rgba(71,24,30,.94)); box-shadow: 0 0 0 1px #db656b, 0 0.625rem 1.875rem rgba(0,0,0,.4); padding: 0.625rem 1rem 0.625rem 0.75rem; border-radius: 0.875rem; font-weight: 600; width: max-content; max-width: min(40rem, calc(100vw - 2 * (18rem + 2rem))); animation: rise .3s cubic-bezier(.2,.9,.3,1.2), pulse 1.4s ease-in-out infinite; z-index: 2; transition: opacity .2s; }
.alert.out { opacity: 0; animation: none; }
@media (max-width: 1100px) { .alert { max-width: calc(100vw - 2 * 1rem); top: auto; bottom: 7.5rem; } }
.alert .ico { width: 1.375rem; height: 1.375rem; flex: none; color: #e9a1a4; }
.alert b { font: 700 1.375rem/1 var(--ui); margin-left: 0.25rem; font-variant-numeric: tabular-nums; }
@keyframes pulse { 50% { box-shadow: 0 0 0 1px #db656b; } }
.keyhint { position: absolute; left: 50%; bottom: 1.25rem; translate: -50% 0; display: flex; gap: 0.5rem 1rem; flex-wrap: wrap; justify-content: center; max-width: min(47.5rem, calc(100vw - 37.5rem)); padding: 0.5625rem 1rem; border-radius: 2px; background: var(--glass-hud); box-shadow: var(--hair); font-size: 0.8438rem; font-weight: 600; color: var(--muted); animation: rise .4s; transition: opacity .7s; }
.keyhint.out { opacity: 0; }
.keyhint span { display: inline-flex; align-items: center; gap: 0.375rem; }
@media (max-width: 1000px) { .keyhint { display: none; } }
.fps { position: absolute; right: 0.875rem; bottom: 7rem; font: 600 0.8125rem var(--ui); color: var(--muted); font-variant-numeric: tabular-nums; }
.compass { position: absolute; left: 50%; top: 0.875rem; translate: -50% 0; animation: rise .3s; display: flex; align-items: center; gap: 0.5625rem; padding: 0.375rem 0.875rem 0.375rem 0.375rem; border-radius: 2px; background: var(--glass-hud); box-shadow: var(--hair), 0 0.5rem 1.25rem rgba(0,0,0,.3); font-size: 0.8438rem; font-weight: 600; white-space: nowrap; max-width: calc(100vw - 2 * (18rem + 2rem)); }
.compass .c-label, .compass small { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.compass .needle { width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; flex: none; background: rgba(207,173,104,.14); box-shadow: inset 0 0 0 1px rgba(207,173,104,.4); color: var(--candle-2); }
.compass .needle .ico { width: 0.9375rem; height: 0.9375rem; transition: transform .12s linear; }
.compass small { color: var(--muted); font-weight: 500; display: flex; align-items: center; gap: 0.25rem; }
.compass small .ico { width: 0.8125rem; height: 0.8125rem; }
.compass.here .needle { background: var(--leaf); color: #0d2a17; }
.hud.ghost .compass, .hud.with-alert .compass { top: 4.125rem; }
@media (max-width: 1100px) {
  .hud .compass, .hud.ghost .compass, .hud.with-alert .compass { top: auto; bottom: 7rem; max-width: min(30rem, calc(100vw - 2rem)); }
  .hud.with-alert .compass { bottom: 12rem; }
}
.vignette { position: fixed; inset: 0; pointer-events: none; z-index: 4; background: radial-gradient(ellipse 85% 75% at 50% 50%, transparent 55%, rgba(0,0,0,.45)); }
.hud.ghost ~ .vignette, body.ghostly .vignette { background: radial-gradient(ellipse 85% 75% at 50% 50%, rgba(219,198,176,.05) 40%, rgba(93,75,57,.5)); }
.nametag { position: absolute; left: 0; top: 0; font: 600 0.8125rem/1 var(--ui); color: #ffffff; padding: 0.25rem 0.625rem 0.25rem 0.4375rem; border-radius: 0.1875rem; background: rgba(26,22,17,.72); box-shadow: 0 0 0 1px rgba(255,255,255,.08); white-space: nowrap; display: flex; gap: 0.375rem; align-items: center; will-change: transform; }
.nametag .mic { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--c); transition: transform .1s; }
.nametag.talking .mic { background: var(--teal); box-shadow: none; transform: scale(1.4); }
.nametag.ghost { opacity: .65; font-style: italic; }
.bubble { position: absolute; left: 0; top: 0; max-width: 13.75rem; background: var(--parch); color: var(--parch-ink); padding: 0.4375rem 0.6875rem; border-radius: 0.8125rem; font-size: 0.8438rem; font-weight: 600; translate: -50% -100%; box-shadow: 0 0.375rem 1rem rgba(0,0,0,.35); overflow-wrap: anywhere; transform-origin: 50% 100%; animation: bubble-life 3.2s both; }
.bubble::after { content: ''; position: absolute; left: 50%; bottom: -0.3125rem; width: 0.625rem; height: 0.625rem; margin-left: -0.3125rem; transform: rotate(45deg); background: inherit; border-radius: 0 0 0.1875rem 0; }
@keyframes bubble-life { 0% { opacity: 0; transform: translateY(0.375rem) scale(.9); } 5% { opacity: 1; transform: none; } 87% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-0.25rem); } }
.marker { position: absolute; left: 0; top: 0; display: grid; justify-items: center; gap: 0.1875rem; pointer-events: none; will-change: transform, opacity; }
.marker i { width: 1.375rem; height: 1.375rem; transform: rotate(45deg); border-radius: 0.3125rem; background: linear-gradient(135deg, var(--candle-2), #ae8647); box-shadow: 0 0 0 2px rgba(20,12,4,.6); display: grid; place-items: center; animation: bob 1.8s ease-in-out infinite; }
.marker i .ico { width: 0.8125rem; height: 0.8125rem; transform: rotate(-45deg); color: #2a1a08; }
.marker span { font: 600 0.7812rem/1 var(--ui); color: #ffffff; background: rgba(26,22,17,.78); padding: 0.1875rem 0.4375rem; border-radius: 0.1875rem; white-space: nowrap; }
.marker.fix i { background: linear-gradient(135deg, #e07b81, #9f454a); }
@keyframes bob { 50% { transform: rotate(45deg) translate(-0.1875rem, -0.1875rem); } }

/* walk mode's own HUD pieces, dressed for the game */
#walkHud.in-game .w-room { top: 1rem; left: 1.125rem; text-shadow: 0 2px 0.625rem rgba(0,0,0,.7); transition: opacity .3s; }
#walkHud.in-game .w-room b { font: 400 2rem/1 var(--display); color: var(--parch); }
#walkHud.in-game .w-room small { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.3125rem; font: 600 0.75rem/1 var(--ui); letter-spacing: .2em; color: var(--candle); }
#walkHud.in-game .w-room small::after { content: ''; width: 2.5rem; height: 1px; background: linear-gradient(90deg, var(--gilt), transparent); }
#walkHud.in-game .w-room.flash b { animation: roomin .6s cubic-bezier(.2,.8,.2,1); }
@keyframes roomin { from { opacity: 0; transform: translateX(-0.625rem); letter-spacing: .06em; } }
#walkHud.in-game .w-cross { width: 0.375rem; height: 0.375rem; margin: -0.1875rem 0 0 -0.1875rem; background: rgba(255,255,255,.85); box-shadow: 0 0 0 1.5px rgba(0,0,0,.35); transition: transform .15s, background .15s, opacity .2s; }
#walkHud.in-game .w-cross.on { transform: scale(1.7); background: var(--candle-2); box-shadow: 0 0 0 1.5px rgba(0,0,0,.35); }
#walkHud.in-game .w-prompt { top: calc(50% + 1.625rem); transform: none; translate: -50% 0; background: var(--glass-hud); box-shadow: var(--hair), 0 0.5rem 1.25rem rgba(0,0,0,.35); border-radius: 0.875rem; padding: 0.5rem 0.875rem 0.5rem 0.5625rem; font: 600 0.9375rem/1.25 var(--ui); display: grid; grid-template-columns: auto auto; column-gap: 0.5625rem; align-items: center; text-align: left; opacity: 1; visibility: visible; transition: opacity .12s ease-out, transform .16s cubic-bezier(.2,.9,.3,1.2), visibility 0s; }
#walkHud.in-game .w-prompt[hidden] { display: grid !important; opacity: 0; visibility: hidden; transform: translateY(0.25rem); pointer-events: none; transition: opacity .14s .09s, transform .14s .09s, visibility 0s .23s; }
#walkHud.in-game .w-prompt.swap > * { animation: swapin .16s ease-out; }
@keyframes swapin { from { opacity: .25; transform: translateY(0.1875rem); } }
#walkHud.in-game .w-prompt kbd { grid-row: span 2; min-width: 1.625rem; height: 1.625rem; margin: 0; padding: 0 0.4375rem; border-radius: 0.25rem; background: var(--parch); color: #2a1a08; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 2px 0 #71552d; font: 700 0.8125rem var(--ui); }
#walkHud.in-game .w-prompt small { grid-column: 2; margin: 2px 0 0; color: var(--muted); font-weight: 500; font-size: 0.7812rem; }
#walkHud.in-game .w-lock { bottom: auto; top: calc(50% + 6.5rem); left: 50%; transform: none; translate: -50% 0; font: 700 0.9375rem/1 var(--ui); padding: 0.625rem 1.125rem; opacity: 1; visibility: visible; transition: opacity .2s, visibility 0s; animation: wlockpulse 1.8s ease-in-out infinite; }
#walkHud.in-game .w-lock[hidden] { display: block !important; opacity: 0; visibility: hidden; animation: none; transition: opacity .2s, visibility 0s .2s; }
#walkHud.in-game .w-toast, #walkHud.in-game .w-held { display: none; } /* shown through the game's own toast and the held-item card instead */

/* ---------- map ---------- */
.mapview { position: fixed; inset: 0; z-index: 18; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); place-items: center; padding: 1.375rem 1.625rem; background: radial-gradient(ellipse at 50% 50%, rgba(14,11,8,.35), rgba(12,10,7,.7)); animation: fadein .2s; pointer-events: none; }
.map-card { width: min(75rem, 100%); height: min(53.75rem, 100%); min-height: 0; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 0.875rem; background: linear-gradient(180deg, rgba(42,35,29,.93), rgba(22,18,15,.95)); pointer-events: auto; backdrop-filter: none; -webkit-backdrop-filter: none; }
.map-card header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: nowrap; min-width: 0; }
.map-card header > div:first-child { flex: none; }
.map-card header .seg { flex: 0 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: none; }
.map-card header .seg button { white-space: nowrap; padding: 0.375rem 0.6875rem; }
.map-card header .btn { flex: none; padding: 0.5rem 0.875rem; }
.map-card header h2 { font: 400 2.125rem/.9 var(--display); color: var(--parch); white-space: nowrap; }
.map-stage { position: relative; min-height: 0; overflow: hidden; border-radius: 1px; background-color: #e9e0c9;
  background-image: linear-gradient(90deg, transparent 33.1%, rgba(60,40,20,.13) 33.3%, rgba(255,255,255,.18) 33.6%, transparent 34.4%, transparent 66.2%, rgba(60,40,20,.13) 66.4%, rgba(255,255,255,.18) 66.7%, transparent 67.5%),
    linear-gradient(180deg, transparent 49.6%, rgba(60,40,20,.12) 49.8%, rgba(255,255,255,.16) 50.1%, transparent 50.8%),
    linear-gradient(rgba(60,80,110,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(60,80,110,.08) 1px, transparent 1px), radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.35), transparent 60%), radial-gradient(ellipse at 80% 95%, rgba(90,60,30,.18), transparent 55%);
  background-size: 100% 100%, 100% 100%, 22px 22px, 22px 22px, auto, auto;
  box-shadow: inset 0 0 0 10px #e9e0c9, inset 0 0 0 11px rgba(40,30,20,.65), inset 0 0 0 14px #e9e0c9, inset 0 0 0 15px rgba(40,30,20,.3), 0 0.5rem 1.5rem rgba(0,0,0,.45); }
.map-card canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.map-card footer { display: flex; gap: 0.5rem 1.125rem; justify-content: center; flex-wrap: wrap; color: var(--muted); font-size: 0.8438rem; }
.map-card footer span { display: flex; gap: 0.4375rem; align-items: center; }
.map-card footer i { width: 0.75rem; height: 0.75rem; border-radius: 0.1875rem; display: inline-block; }
@media (max-height: 760px) { .map-card { padding: 0.875rem 1rem; gap: 0.5rem; } .map-card header h2 { font-size: 1.75rem; } }
@media (max-height: 620px) { .map-card footer { display: none; } }
@media (max-width: 760px) { .map-card header .eyebrow, .map-card header .btn kbd { display: none; } }

/* ---------- reveal / death / eject ---------- */
.splash { position: fixed; inset: 0; display: flex; z-index: 25; background: radial-gradient(ellipse at 50% 45%, rgba(29,24,20,.55), rgba(12,10,7,.96)); text-align: center; overflow: auto; animation: fadein .5s; }
@keyframes fadein { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(0.5rem); } }
@keyframes pop { from { opacity: 0; transform: scale(.94); } }
.splash .inner { display: grid; gap: 0.75rem; justify-items: center; max-width: 40rem; padding: 1.25rem; margin: auto; }
.splash .eyebrow { animation: rise .6s .1s both; }
.splash .portrait { width: 11rem; height: 11rem; border-radius: 50%; box-shadow: 0 0 0 0.25rem var(--rc, var(--parch-2)), 0 0 3.75rem color-mix(in srgb, var(--rc, #ffffff) 45%, transparent); animation: pop .7s .2s cubic-bezier(.2,1.4,.4,1) both; }
@media (max-height: 640px) { .splash .portrait { width: 6.875rem; height: 6.875rem; } }
.splash h1 { font: 400 clamp(4rem, 11vw, 7rem)/.85 var(--display); color: var(--rc, var(--parch)); text-shadow: 0 0.25rem 0 rgba(0,0,0,.5), 0 0 3.125rem color-mix(in srgb, var(--rc, #ffffff) 35%, transparent); animation: rise .7s .45s both; }
.splash p { margin: 0; font-size: 1.125rem; animation: rise .6s .7s both; }
.splash .sub { color: var(--muted); font-size: 0.9688rem; animation-delay: .9s; }
.splash .role-emb { display: grid; place-items: center; color: var(--rc); animation: rise .6s .35s both; }
.splash .role-emb .ico { width: 2.125rem; height: 2.125rem; }
.splash.murderer { --rc: var(--blood); background: radial-gradient(ellipse at 50% 45%, rgba(50,18,21,.55), rgba(7,6,5,.97)); }
.splash.detective { --rc: var(--sleuth); }
.splash.guest { --rc: var(--parch); }
.splash.death { --rc: var(--blood); background: radial-gradient(ellipse at 50% 45%, rgba(63,20,24,.6), rgba(5,4,3,.97)); }
.splash.death h1 { animation: thud .7s .2s cubic-bezier(.3,1.6,.4,1) both; }
@keyframes thud { from { opacity: 0; transform: scale(1.8); } }
.splash.eject { --rc: var(--parch); background: linear-gradient(180deg, rgba(12,10,7,.88) 0%, rgba(12,10,7,0) 30%, rgba(12,10,7,0) 70%, rgba(12,10,7,.88) 100%); pointer-events: none; }
.splash.eject .inner { margin: 6vh auto auto; }
.splash.eject h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }
.splash.eject .sub2 { opacity: 0; transition: opacity .8s, transform .8s; transform: translateY(0.375rem); font-size: 1.375rem; font-weight: 600; animation: none; } .splash.eject .sub2.on { opacity: 1; transform: none; }
.splash .btn { animation: rise .6s 1.1s both; }

/* ---------- meeting ---------- */
#meeting, .meeting-ghost { position: fixed; inset: 0; display: flex; padding: 1rem; background: radial-gradient(ellipse at 50% 40%, rgba(25,21,16,.6), rgba(12,10,7,.88)); z-index: 20; overflow: auto; animation: fadein .35s; }
.meet { margin: auto; width: min(72.5rem, 100%); max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); display: grid; grid-template-columns: 1fr 22.5rem; grid-template-rows: auto minmax(0, 1fr) auto; gap: 0.875rem; animation: rise .4s cubic-bezier(.2,.9,.3,1.1); }
@media (max-width: 920px) { .meet { grid-template-columns: 1fr; grid-template-rows: auto; max-height: none; } }
.meet-head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--line); }
.meet-head .who-called { display: flex; gap: 0.875rem; align-items: center; }
.meet-head .tools { display: flex; gap: 0.5rem; align-items: center; }
.meet-head .badge { width: 3.375rem; height: 3.375rem; border-radius: 2px; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, rgba(181,70,76,.35), rgba(0,0,0,.2)); box-shadow: inset 0 0 0 1px rgba(181,70,76,.5); color: var(--blood-2); flex: none; }
.meet-head .badge.gong { background: radial-gradient(circle at 50% 35%, rgba(207,173,104,.3), rgba(0,0,0,.2)); box-shadow: inset 0 0 0 1px rgba(207,173,104,.5); color: var(--candle-2); }
.meet-head .badge .ico { width: 1.75rem; height: 1.75rem; }
.meet-head h2 { font: 400 2.875rem/.9 var(--display); color: var(--parch); margin-top: 0.25rem; }
.timer { --p: 1; position: relative; width: 3.875rem; height: 3.875rem; border-radius: 50%; display: grid; place-items: center; font: 700 1.3125rem var(--ui); color: var(--candle-2); background: conic-gradient(var(--candle) calc(var(--p) * 1turn), rgba(255,255,255,.08) 0); font-variant-numeric: tabular-nums; flex: none; }
.timer::before { content: ''; position: absolute; inset: 0.3125rem; border-radius: 50%; background: #29221c; }
.timer span { position: relative; }
.timer.low { color: var(--blood-2); background: conic-gradient(var(--blood) calc(var(--p) * 1turn), rgba(255,255,255,.08) 0); animation: timer-beat 1s ease-in-out infinite; }
@keyframes timer-beat { 50% { transform: scale(1.07); } }
.suspects { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.625rem; align-content: start; overflow: auto; padding: 0.1875rem; }
.sus { position: relative; animation: pop .35s calc(var(--i, 0) * 30ms) both; }
.suspect { position: relative; width: 100%; height: 100%; background: rgba(15,12,10,.35); border: 0; box-shadow: inset 0 0 0 1px var(--line); border-radius: 0.25rem; padding: 0.5rem; display: grid; grid-template-columns: 3.625rem 1fr; gap: 0.625rem; align-items: center; align-content: start; text-align: left; transition: transform .15s, box-shadow .15s, background .15s; color: var(--ink); }
.suspect:not(:disabled):hover { transform: translateY(-2px); background: rgba(255,255,255,.04); }
.suspect:disabled { cursor: default; }
.suspect.me { box-shadow: inset 0 0 0 1px rgba(120,166,160,.55); }
.suspect.me small { color: var(--teal); font-weight: 600; }
.suspect .portrait { width: 3.625rem; height: 3.625rem; border-radius: 0.25rem; }
.suspect .nm { font-weight: 700; display: block; }
.suspect small { color: var(--dim); font-size: 0.8125rem; display: block; }
.suspect.dead { opacity: .5; filter: grayscale(.85); }
.suspect.dead .portrait::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 46%, rgba(181,70,76,.8) 47% 53%, transparent 54%); }
.suspect.sel { box-shadow: inset 0 0 0 2px var(--candle); background: rgba(207,173,104,.09); }
.suspect.voted::after { font-family: var(--caps); content: 'voted'; position: absolute; top: 0.4375rem; right: 0.5rem; font-size: 0.75rem; letter-spacing: .06em;  color: var(--leaf); font-weight: 700; background: rgba(127,214,154,.14); padding: 2px 0.375rem; border-radius: 0.1875rem; }
.suspect.talking .portrait { box-shadow: 0 0 0 0.1875rem var(--teal); }
.suspect .votes { grid-column: 1 / -1; display: flex; gap: 0.25rem; flex-wrap: wrap; }
.suspect .votes img { width: 1.5rem; height: 1.5rem; border-radius: 50%; object-fit: cover; object-position: 50% 15%; box-shadow: 0 0 0 2px #231e18; animation: pop .3s cubic-bezier(.2,1.6,.4,1) both; }
.suspect.out { box-shadow: inset 0 0 0 2px var(--blood); }
.suspect.out { background: rgba(181,70,76,.09); animation: ui-slam .5s var(--sd, 0s) both; }
.suspect.out .portrait { filter: grayscale(.55) brightness(.82); transition: filter .5s var(--sd, 0s); }
@keyframes ui-slam { 30% { transform: translateX(-0.25rem) rotate(-.7deg); } 60% { transform: translateX(0.1875rem) rotate(.5deg); } }
.suspect .votes { align-items: center; }
.sus:has(.mute-btn) .votes { padding-right: 2rem; } /* (the mute button sits in the corner the vote total would take) */
.meet.tallied .suspect.voted::after { display: none; } /* once the votes are in, the faces say who voted: the tag would sit under the stamp */
.suspect .votes .tot { margin-left: auto; min-width: 1.5rem; height: 1.5rem; padding: 0 0.4375rem; box-sizing: border-box; border-radius: 0.1875rem; display: grid; place-items: center; font: 800 0.875rem/1 var(--ui); background: var(--blood); color: #ffffff; box-shadow: 0 0 0 2px #231e18; animation: pop .3s cubic-bezier(.2,1.6,.4,1) both; }
.suspect .out-stamp { position: absolute; right: 0.625rem; top: 0.5rem; font: 400 1rem/1 var(--display); letter-spacing: .1em; color: var(--blood-2); border: 2px solid var(--blood-2); padding: 0.125rem 0.4375rem 0; border-radius: 0.375rem; background: rgba(29,11,13,.6); opacity: 0; transform: rotate(-9deg); pointer-events: none; }
.suspect.out .out-stamp { animation: ui-gavel .45s var(--sd, 0s) cubic-bezier(.2,1.6,.4,1) forwards; }
@keyframes ui-gavel { from { opacity: 0; transform: rotate(-9deg) scale(2.4); } to { opacity: 1; transform: rotate(-9deg) scale(1); } }
.suspect .stamp { position: absolute; right: 0.625rem; top: 50%; transform: translateY(-50%) rotate(-12deg); font: 400 0.9375rem/1 var(--display); color: var(--candle); border: 2px solid var(--candle); padding: 0.1875rem 0.4375rem; border-radius: 0.375rem; opacity: 0; letter-spacing: .06em; pointer-events: none; }
.suspect.mine .stamp { animation: ui-stamp .35s cubic-bezier(.2,1.6,.4,1) forwards; }
@keyframes ui-stamp { from { opacity: 0; transform: translateY(-50%) rotate(-12deg) scale(2); } to { opacity: .95; transform: translateY(-50%) rotate(-12deg) scale(1); } }
.mute-btn { position: absolute; right: 0.375rem; bottom: 0.375rem; width: 1.75rem; height: 1.75rem; border: 0; border-radius: 0.25rem; background: rgba(255,255,255,.08); color: var(--muted); display: grid; place-items: center; }
.mute-btn .ico { width: 0.9375rem; height: 0.9375rem; }
.mute-btn:hover { background: rgba(255,255,255,.16); color: var(--ink); }
.mute-btn[aria-pressed=true] { background: var(--blood); color: #ffffff; }
.evidence { display: grid; gap: 0.625rem; align-content: start; overflow: auto; min-height: 0; }
.casefile { position: relative; background: linear-gradient(180deg, #c5ad77, #ead6ab); color: var(--parch-ink); border-radius: 0.25rem; padding: 0.875rem 0.875rem 0.75rem; box-shadow: 0 0.5rem 1.25rem rgba(0,0,0,.35), inset 0 0 0 1px rgba(120,80,30,.3); font-size: 0.9062rem; }
.casefile::before { content: ''; position: absolute; top: -0.375rem; left: 1.375rem; width: 0.875rem; height: 1.625rem; border: 0.1875rem solid #8b8f97; border-bottom: 0; border-radius: 0.25rem 0.5rem 0 0; }
.casefile h4 { margin: 0 0 0.375rem; font: 400 1.25rem/1 var(--display); color: #5a2a14; display: flex; gap: 0.5rem; align-items: center; }
.casefile h4 .ico { width: 1rem; height: 1rem; }
.casefile p { margin: 0; }
.clues { display: grid; gap: 0.375rem; }
.clue { display: flex; gap: 0.5625rem; align-items: center; background: rgba(255,255,255,.06); color: var(--ink); border-radius: 0.25rem; padding: 0.4375rem 0.625rem; font-weight: 600; font-size: 0.8438rem; box-shadow: inset 0 0 0 1px var(--line); animation: rise .3s both; }
.clue .ico { width: 1rem; height: 1rem; color: var(--candle-2); }
.clue small { margin-left: auto; color: var(--dim); font-weight: 500; text-align: right; }
.clue.mine { background: rgba(134,174,252,.12); box-shadow: inset 0 0 0 1px rgba(134,174,252,.35); }
.clue.mine .ico { color: var(--sleuth); }
.chat { display: grid; grid-template-rows: 1fr auto; gap: 0.5rem; min-height: 11.25rem; max-height: 40vh; }
.chat-log { overflow: auto; display: grid; gap: 0.375rem; align-content: start; font-size: 0.9062rem; padding-right: 0.25rem; }
.chat-log p { margin: 0; animation: rise .2s; line-height: 1.35; } .chat-log b { color: var(--c); } .chat-log .ghost { opacity: .65; font-style: italic; }
.meet-foot { grid-column: 1 / -1; display: flex; gap: 0.625rem; justify-content: space-between; align-items: center; flex-wrap: wrap; padding-top: 0.75rem; border-top: 1px solid var(--line); }
.meet-foot .hint { color: var(--muted); display: flex; gap: 0.5rem; align-items: center; }

/* ---------- end ---------- */
.end-card { width: min(53.75rem, 100%); text-align: center; }
.end-card h2 { font-size: clamp(2.5rem, 6vw, 3.75rem); }
.end-card.won h2 { color: var(--candle-2); text-shadow: none; }
.end-card.lost h2 { color: var(--blood-2); }
.end-card .reason { margin: 0; font-size: 1.0625rem; color: #e9dfcc; }
.end-roster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: 0.5rem; text-align: left; }
.end-roster li { display: flex; gap: 0.625rem; align-items: center; background: rgba(15,12,10,.35); box-shadow: inset 0 0 0 1px var(--line); border-radius: 0.25rem; padding: 0.4375rem 0.5625rem; animation: pop .35s both; }
.end-roster .portrait { width: 2.875rem; height: 2.875rem; border-radius: 0.25rem; flex: none; }
.end-roster small { display: block; color: var(--dim); font-size: 0.7812rem; }
.end-roster li.murderer { box-shadow: inset 0 0 0 2px var(--blood); }
.end-roster li.murderer small b { color: var(--blood-2); }
.end-roster li.detective small b { color: var(--sleuth); }
.end-roster li.gone { opacity: .6; }
.scoreboard { position: fixed; left: 50%; top: 50%; translate: -50% -50%; width: min(41.25rem, 92vw); max-height: 88vh; overflow: auto; z-index: 15; animation: pop .18s cubic-bezier(.2,.9,.3,1.2); display: grid; gap: 0.75rem; }
.board-h { display: flex; gap: 0.5rem; align-items: center; }
.board { grid-template-columns: repeat(auto-fill, minmax(14.375rem, 1fr)); }
/* the sabotage menu: five cards under the crosshair, each with its own colour, key and what it costs or wins */
:is(.sabmenu,.sabout) { position: fixed; left: 50%; top: 53%; translate: -50% 0; z-index: 15; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.625rem; width: min(53rem, 96vw); animation: rise .2s; pointer-events: auto; }
.sab-title { flex-basis: 100%; margin: 0; display: flex; justify-content: center; align-items: center; gap: 0.5rem; font: 400 1.75rem/1 var(--display); color: var(--blood-2); text-shadow: 0 2px 0 rgba(0,0,0,.6); }
.sab-title .ico { width: 1.25rem; height: 1.25rem; }
:is(.sabmenu,.sabout) .sab-opt { --sc: var(--candle-2); flex-direction: column; justify-content: flex-start; width: 9.75rem; min-height: 9.25rem; padding: 2.125rem 0.75rem 0.75rem; gap: 0.3125rem; position: relative; text-align: center; color: var(--ink); background: var(--glass-solid); box-shadow: var(--hair), 0 0.5rem 1.25rem rgba(0,0,0,.45); transition: transform .14s, box-shadow .16s, filter .14s; animation: rise .26s calc(var(--i, 0) * 45ms + 40ms) cubic-bezier(.2,.9,.3,1.2) both; }
:is(.sabmenu,.sabout) .sab-opt.cold { --sc: var(--sleuth); } :is(.sabmenu,.sabout) .sab-opt.danger { --sc: var(--blood-2); } :is(.sabmenu,.sabout) .sab-opt.odd { --sc: #7fae9c; }
:is(.sabmenu,.sabout) .sab-opt:hover:not(:disabled), :is(.sabmenu,.sabout) .sab-opt:focus-visible { transform: translateY(-3px); filter: none; box-shadow: var(--hair), 0 0 0 2px var(--sc), 0 0 1.5rem color-mix(in srgb, var(--sc) 40%, transparent), 0 0.75rem 1.5rem rgba(0,0,0,.45); }
:is(.sabmenu,.sabout) .sab-opt .emb { width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; color: var(--sc); background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--sc) 28%, transparent), rgba(0,0,0,.28)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sc) 50%, transparent); }
:is(.sabmenu,.sabout) .sab-opt .emb .ico { width: 1.5rem; height: 1.5rem; }
:is(.sabmenu,.sabout) .sab-opt b { font: 400 1.3125rem/1 var(--display); color: var(--parch); }
:is(.sabmenu,.sabout) .sab-opt kbd { position: absolute; top: 0.5rem; left: 0.5rem; }
:is(.sabmenu,.sabout) .sab-opt small { font-weight: 500; font-size: 0.8125rem; line-height: 1.3; color: var(--muted); }
.sab-hint { flex-basis: 100%; margin: 0; display: flex; justify-content: center; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: var(--muted); text-shadow: 0 2px 0.5rem #000000; }
.sab-hint kbd { height: 1.1875rem; min-width: 1.1875rem; font-size: 0.6875rem; }

/* ---------- fix panels (fuse box, valves) and walk mode's chore sheet: the same parchment sheet ---------- */
:is(.taskbox,.taskout), #walkHud.in-game .w-task { position: fixed; inset: 0; display: flex; background: rgba(17,14,11,.62);   z-index: 22; animation: fadein .2s; overflow: auto; pointer-events: auto; }
#walkHud.in-game .w-task { position: absolute; z-index: auto; }
#walkHud.in-game:has(.w-task:not([hidden])) { z-index: 22; }
:is(.taskbox,.taskout) .sheet, #walkHud.in-game .w-task .sheet { position: relative; margin: auto; width: min(29.375rem, calc(100% - 2rem)); max-height: calc(100vh - 1.5rem); max-height: calc(100dvh - 1.5rem); overflow: auto; background: #ebdfc3; color: #2b1d17; border-radius: 2px; padding: 1.5rem 1.375rem 1.375rem; box-shadow: 0 1.5rem 3.5rem rgba(0,0,0,.55), inset 0 0 0 0.5rem #ebdfc3, inset 0 0 0 calc(0.5rem + 1px) rgba(70,45,25,.55), inset 0 0 0 calc(0.5rem + 4px) #ebdfc3, inset 0 0 0 calc(0.5rem + 5px) rgba(70,45,25,.3); animation: rise .22s cubic-bezier(.2,.8,.3,1); }
:is(.taskbox,.taskout) h2, #walkHud.in-game .w-task h2 { margin: 0 2.2em 0.25rem 0; font: 400 2.125rem/1 var(--display); color: #4a2412; }
:is(.taskbox,.taskout) .sub { margin: 0 0 0.875rem; font: italic 1rem/1.3 var(--serif); color: #6a4c30; }
:is(.taskbox,.taskout) .body, #walkHud.in-game .w-task .body { position: relative; display: grid; justify-items: center; gap: 0.75rem; }
:is(.taskbox,.taskout) .x, #walkHud.in-game .w-task .x { position: absolute; right: 0.75rem; top: 0.75rem; width: 2.125rem; height: 2.125rem; border-radius: 0.25rem; border: 0; background: rgba(90,50,20,.12); display: grid; place-items: center; color: #4a2412; padding: 0; font-size: 0; }
#walkHud.in-game .w-task .x::before { content: ''; width: 1rem; height: 1rem; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat; }
:is(.taskbox,.taskout) .x:hover, #walkHud.in-game .w-task .x:hover { background: rgba(90,50,20,.22); }
:is(.taskbox,.taskout) .x .ico { width: 1rem; height: 1rem; }
:is(.taskbox,.taskout) .mg-canvas, #walkHud.in-game .w-task .mg-canvas { width: auto; max-width: 100%; max-height: min(20rem, 42vh); margin: 0 auto; }
:is(.taskbox,.taskout) .mg-btn, #walkHud.in-game .w-task .mg-btn { background: #3b2a1e; color: #f1e6cf; border-radius: 2px; box-shadow: inset 0 0 0 1px #6b4f33, 0 3px 0 #1d110a; font: 700 1rem/1.1 var(--caps); letter-spacing: .03em; padding: 0.75rem 1.5rem; }
:is(.taskbox,.taskout) .mg-btn.on, #walkHud.in-game .w-task .mg-btn.on { background: #2c1f16; box-shadow: inset 0 0 0 1px #6b4f33, 0 1px 0 #1d110a; transform: translateY(2px); }
:is(.taskbox,.taskout) .mg-btn.ghost, #walkHud.in-game .w-task .mg-btn.ghost { background: transparent; color: #4a2412; box-shadow: inset 0 0 0 1px rgba(74,36,18,.45); }
:is(.taskbox,.taskout) .shake, #walkHud.in-game .w-task .shake { animation: mg-shake .35s; }
@keyframes mg-shake { 20%, 60% { translate: -0.375rem 0; } 40%, 80% { translate: 0.375rem 0; } }
#walkHud.in-game .w-task { animation: none; opacity: 1; visibility: visible; transition: opacity .2s, visibility 0s; }
#walkHud.in-game .w-task .sheet { animation: none; transition: transform .28s cubic-bezier(.2,.9,.3,1.2); }
#walkHud.in-game .w-task[hidden] { display: flex !important; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s, visibility 0s .18s; } /* it fades out (the sheet keeps its last picture) instead of vanishing */
#walkHud.in-game .w-task[hidden] .sheet { transform: translateY(0.5rem) scale(.985); transition: transform .18s ease-in; }

@media (max-width: 720px) { .hud-tr { width: 14.375rem; } .act { width: 3.75rem; height: 3.75rem; } .act .ico { width: 1.375rem; height: 1.375rem; } .compass { top: auto; bottom: 6rem; max-width: calc(100vw - 2rem); } .hud.ghost .compass, .hud.with-alert .compass { top: auto; } .toast b { font-size: 2rem; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .suspect.mine .stamp { opacity: .95; }
}

/* ---- added in the integration pass ---- */
.mic-meter { position: relative; }
.mic-meter b { position: absolute; top: 0; bottom: 0; left: 9%; width: 2px; background: var(--candle); opacity: .9; }
.settings .modal-head .grow { flex: 1; }
.field .soft { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--dim); }
.field > .btn[data-rebind] { justify-self: start; min-width: 4.5rem; }
.voices { display: grid; gap: 0.375rem; margin: 0.25rem 0 0.5rem; max-height: 11rem; overflow: auto; padding-right: 0.25rem; }
.voices .eyebrow { margin: 0 0 0.125rem; }
.vrow { display: grid; grid-template-columns: 6.5rem 1fr auto; align-items: center; gap: 0.625rem; }
.vrow .nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vrow .mini[aria-pressed="true"] { background: var(--blood); color: #ffffff; }
.casefile.board { margin-top: 0.25rem; }
.casefile.board p { display: flex; gap: 0.5rem; align-items: flex-start; padding: 0.25rem 0; border-top: 1px dashed rgba(120,80,30,.3); }
.casefile.board p:first-of-type { border-top: 0; }
.portrait.tiny { width: 1.75rem; height: 1.75rem; border-radius: 0.25rem; flex: none; }
.end-roster li.accomplice { box-shadow: inset 0 0 0 2px var(--blood); }
.end-roster li.accomplice small b { color: var(--blood-2); }
.end-roster li.jester { box-shadow: inset 0 0 0 2px #7fae9c; }
.end-roster li.jester small b { color: #7fae9c; }
.suspect.dead[disabled] .nm { text-decoration: line-through; }
.role-card.accomplice { --rc: var(--blood); } .role-card.jester { --rc: #7fae9c; }
.splash.accomplice { --rc: var(--blood); background: radial-gradient(ellipse at 50% 45%, rgba(44,19,25,.5), rgba(7,6,5,.97)); }
.splash.jester { --rc: #7fae9c; background: radial-gradient(ellipse at 50% 45%, rgba(75,60,45,.5), rgba(7,6,5,.97)); }


/* ---------- round 2: leaving, keyed entrances, chat, recap ---------- */
/* everything that fades in also fades out: ui.js adds .closing (or swaps .taskbox for .taskout, so game code that looks for a live sheet no longer sees it) and removes the node afterwards */
@keyframes fadeout { to { opacity: 0; } }
@keyframes sink { to { opacity: 0; transform: translateY(0.375rem) scale(.985); } }
.layer.closing, .mapview.closing, .meeting-ghost.closing, :is(.taskout), #menu.leaving, #lobby.leaving { animation: fadeout .2s ease-in forwards; pointer-events: none; }
.layer.closing > .modal, .map-card.closing, .taskout .sheet, .meeting-ghost.closing .meet { animation: sink .2s ease-in forwards; }
.mapview.closing .map-card { animation: sink .2s ease-in forwards; }
.splash.closing { animation: fadeout .3s ease-in forwards; pointer-events: none; }
.sabout { animation: sink .16s ease-in forwards; pointer-events: none; }
.toast.on { animation: none; }
.hud-card[hidden], .voice-list div.out { pointer-events: none; }
.voice-list div.out { animation: fadeout .2s forwards; }
.held:not([hidden]) { animation: rise .25s cubic-bezier(.2,.9,.3,1.2); }

/* title menu and lobby: the first draw staggers in, later renders do not move */
.menu-card > * { animation: rise .55s cubic-bezier(.2,.9,.3,1.1) both; }
.menu-card > :nth-child(2) { animation-delay: .06s } .menu-card > :nth-child(3) { animation-delay: .12s } .menu-card > :nth-child(4) { animation-delay: .18s } .menu-card > :nth-child(5) { animation-delay: .24s } .menu-card > :nth-child(6) { animation-delay: .3s }
.lobby.enter > * { animation: rise .45s cubic-bezier(.2,.9,.3,1.1) both; }
.lobby.enter > :nth-child(2) { animation-delay: .05s } .lobby.enter > :nth-child(3) { animation-delay: .1s } .lobby.enter > :nth-child(4) { animation-delay: .15s } .lobby.enter > :nth-child(5) { animation-delay: .2s }
/* a long control (the kill cooldown's five values) drops under its label instead of squeezing it into a column */
.opt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.375rem 0.75rem; }
.opt > span { flex: 1 1 11rem; min-width: 0; }
.opt > .seg, .opt > .stepper { flex: 0 1 auto; max-width: 100%; margin-left: auto; }
.opt small.why { color: var(--candle-2); font-weight: 600; margin-top: 0.1875rem; }
.opt small.why::before { content: '! '; font-weight: 800; }

/* the chore that has just been ticked off: the box pops, the row glows once */
.chore-list li { border-radius: 0.375rem; }
.chore-list li.pop { animation: chorelit 1.1s ease-out; }
.chore-list li.pop i { animation: tickpop .55s cubic-bezier(.2,1.5,.4,1); }
@keyframes chorelit { 0% { background: rgba(127,214,154,.3); } 100% { background: transparent; } }
@keyframes tickpop { 0% { transform: scale(.55); } 55% { transform: scale(1.4); } 100% { transform: none; } }
.nb .clue { animation: none; } .nb .clue.fresh { animation: rise .35s both; }
.dawn .prog i { transition: width .8s cubic-bezier(.2,.8,.2,1); }

/* text chat in play: Enter opens one line (movement carries on); ghosts use it too, and only ghosts see it */
.chatbar { position: absolute; left: 50%; bottom: 5.25rem; translate: -50% 0; width: min(30rem, calc(100vw - 2rem)); display: grid; gap: 0.375rem; justify-items: center; }
.chatbar .line { width: 100%; display: flex; align-items: center; gap: 0.5rem; background: var(--glass-hud); border-radius: 0.1875rem; padding: 0.3125rem 0.3125rem 0.3125rem 0.875rem; box-shadow: var(--hair), 0 0.5rem 1.5rem rgba(0,0,0,.35); pointer-events: auto; animation: rise .18s cubic-bezier(.2,.9,.3,1.2); }
.chatbar .line .tagc { font: 700 0.6875rem/1 var(--caps); letter-spacing: .04em;  color: var(--candle); white-space: nowrap; }
.chatbar .line.ghost .tagc { color: var(--ghost); }
.chatbar .line input { flex: 1; min-width: 0; border: 0; background: rgba(15,12,10,.45); border-radius: 0.1875rem; padding: 0.5rem 0.875rem; outline: none; box-shadow: inset 0 0 0 1px var(--line-2); }
.chatbar .line input:focus { box-shadow: inset 0 0 0 2px var(--candle); }
.chatbar .echo { max-width: 100%; background: rgba(26,22,17,.78); padding: 0.3125rem 0.75rem; border-radius: 0.1875rem; font-size: 0.8438rem; font-weight: 600; color: var(--muted); animation: rise .2s; transition: opacity .4s; }
.chatbar .echo.out { opacity: 0; }
.chatbar .chat-hint { font-size: 0.75rem; font-weight: 600; color: var(--dim); background: rgba(26,22,17,.6); padding: 0.1875rem 0.625rem; border-radius: 0.1875rem; display: flex; gap: 0.375rem; align-items: center; animation: rise .3s; }
.chatbar .chat-hint kbd { height: 1.125rem; min-width: 1.125rem; font-size: 0.6875rem; }
.nametag.ghost, .bubble.ghost { opacity: .8; }

/* end card: the night in brief */
.recap { display: grid; gap: 0.75rem; text-align: left; }
.recap h3 { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.recap ol { list-style: none; margin: 0; padding: 0 0 0 0.9375rem; display: grid; gap: 0.5rem; border-left: 2px solid var(--line-2); }
.recap ol li { position: relative; font-size: 0.9062rem; color: var(--ink); animation: rise .35s both; }
.recap ol li::before { content: ''; position: absolute; left: -1.3125rem; top: 0.4375rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--candle); box-shadow: 0 0 0 3px #2f2821; }
.recap ol li.kill::before { background: var(--blood); } .recap ol li.out::before { background: var(--sleuth); }
.recap ol li small { display: block; color: var(--dim); font-size: 0.8125rem; }
.awards { display: grid; grid-template-columns: repeat(auto-fit, minmax(11.25rem, 1fr)); gap: 0.5rem; }
.award { display: grid; grid-template-columns: auto 1fr; gap: 0.1875rem 0.625rem; align-items: center; background: rgba(15,12,10,.35); box-shadow: inset 0 0 0 1px var(--line); border-radius: 0.25rem; padding: 0.5rem 0.75rem; animation: pop .4s both; }
.award .ico { grid-row: span 2; width: 1.5rem; height: 1.5rem; color: var(--candle-2); }
.award b { font: 400 1.125rem/1 var(--display); color: var(--parch); } .award span { font-size: 0.8125rem; color: var(--muted); }
.end-card { max-height: calc(100dvh - 2.5rem); }

/* map: hidden passages you have found (or, for the murderers, all of them) */
.map-card footer i.lg-door { width: 0.875rem; height: 0.1875rem; border-radius: 0.125rem; background: rgba(214,178,102,.75); }
.map-card footer .legend-hidden i { background: transparent; border: 2px dashed #7fae9c; border-radius: 0.1875rem; }

@media (prefers-reduced-motion: reduce) { .menu-card > *, .lobby.enter > * { animation: none; } }
/* the meeting's fading copy must not replay any entrance */
.meeting-ghost, .meeting-ghost .meet, .meeting-ghost .sus, .meeting-ghost .clue, .meeting-ghost .votes img, .meeting-ghost .votes .tot, .meeting-ghost .suspect.out, .meeting-ghost .chat-log p { animation: none; }
.meeting-ghost .suspect.out .out-stamp { animation: none; opacity: 1; }
.meeting-ghost.closing { animation: fadeout .2s ease-in forwards; }
.meeting-ghost.closing .meet { animation: sink .2s ease-in forwards; }

/* ---------- round 3: settings tabs, the door in the storm, boot candle ---------- */
.panel.enter > * { animation: rise .22s both; }
.panel.enter > :nth-child(2) { animation-delay: .02s } .panel.enter > :nth-child(3) { animation-delay: .04s } .panel.enter > :nth-child(4) { animation-delay: .06s } .panel.enter > :nth-child(5) { animation-delay: .08s } .panel.enter > :nth-child(n+6) { animation-delay: .1s }
/* thrown out: the front door lets in a wedge of cold light, and the storm answers with one flash of lightning */
.splash.eject::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 38% 62% at 50% 104%, rgba(190,210,255,.2), transparent 72%); animation: fadein 1.6s both; }
.splash.eject::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: #dfe8ff; opacity: 0; animation: flash 1.1s 1.3s ease-out 1 both; }
@keyframes flash { 0% { opacity: 0; } 6% { opacity: .26; } 22% { opacity: 0; } }
/* murdered: a bruise of red creeps in from the top edge */
.splash.death::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 46%; pointer-events: none; background: radial-gradient(ellipse 70% 100% at 50% 0, rgba(119,36,43,.5), transparent 72%); animation: fadein 1.4s .1s both; }
.splash > .inner { position: relative; }
/* the loading candle */
.boot-candle { width: 3.5rem; height: auto; overflow: visible; margin-bottom: -0.25rem; filter: drop-shadow(0 0 1.25rem rgba(207,173,104,.45)); }
.boot-candle .flame { transform-box: fill-box; transform-origin: 50% 90%; animation: flame 1.5s ease-in-out infinite; }
.boot-candle .core { transform-box: fill-box; transform-origin: 50% 90%; animation: flame 1.5s .2s ease-in-out infinite reverse; }
.boot-candle .halo { animation: halo 3s ease-in-out infinite; }
@keyframes flame { 0%, 100% { transform: scale(1, 1) rotate(-1.5deg); } 30% { transform: scale(.94, 1.06) rotate(1.5deg); } 60% { transform: scale(1.05, .95) rotate(-.5deg); } }
@keyframes halo { 50% { opacity: .7; } }
.boot-card.failed .boot-candle .flame, .boot-card.failed .boot-candle .core { animation: none; opacity: .35; }
@media (prefers-reduced-motion: reduce) { .splash.eject::after { display: none; } }
/* while somebody is thrown out the screen belongs to the front door: the HUD steps back */
#hud, #walkHud { transition: opacity .35s; }
body:has(.splash.eject:not(.closing)) :is(#hud, #walkHud, .vignette) { opacity: 0; }

/* Phone controls share the walker's coarse-pointer/first-touch switch. */
.phone-tools, .phone-voice { display: none; }
.chat-compose { display: flex; gap: .5rem; min-width: 0; }
.chat-compose input { min-width: 0; flex: 1; }
.meet-tabs { display: none; }
.meet-evidence-body { display: contents; }
.board-close { display: none; }
.touch-help { display: none; }
html[data-touch-controls=true] .touch-help { display: block; line-height: 1.6; }
html[data-touch-controls=true] .touch-help + .keys, html[data-touch-controls=true] .touch-help + .keys + .fine { display: none; }
.sab-title { display: flex; align-items: center; justify-content: center; gap: .75rem; }
html[data-touch-controls=true] { --safe-top: max(8px, env(safe-area-inset-top)); --safe-right: max(8px, env(safe-area-inset-right)); --safe-bottom: max(8px, env(safe-area-inset-bottom)); --safe-left: max(8px, env(safe-area-inset-left)); }
html[data-touch-controls=true] body { overscroll-behavior: none; }
html[data-touch-controls=true] :is(button, a, input, select, textarea) { touch-action: manipulation; }
html[data-touch-controls=true] :is(.btn, .mini, .seg button, .stepper button, .outfit-swatch, .tabs button) { min-height: 44px; min-width: 44px; }
html[data-touch-controls=true] .outfit-options { grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); }
html[data-touch-controls=true] .mg-root button { min-height: 44px; }
html[data-touch-controls=true] :is(input:not([type=range]):not([type=checkbox]), textarea, select) { font-size: max(16px, 1rem); }
html[data-touch-controls=true] :is(#menu, #lobby, .layer, #meeting, .mapview, .taskbox) { box-sizing: border-box; top: var(--screen-top, 0px); bottom: auto; height: var(--screen-height, 100dvh); padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left); overscroll-behavior: contain; }
html[data-touch-controls=true] :is(.modal, .end-card) { max-height: 100%; }
html[data-touch-controls=true] :is(.menu-card, .lobby, .meet, .card) { min-width: 0; }
html[data-touch-controls=true] .menu-card { margin-left: 0; padding-right: 4px; }
html[data-touch-controls=true] .phone-tools { display: flex; position: absolute; pointer-events: auto; left: var(--safe-left); top: var(--safe-top); gap: 5px; z-index: 4; }
html[data-touch-controls=true] :is(.phone-tools, .phone-voice) button { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 2px; min-height: 44px; min-width: 44px; padding: 5px 8px; border: 1px solid var(--line-2); border-radius: 0.25rem; color: var(--ink); background: rgba(33,28,24,.94); box-shadow: 0 2px 8px #0005; font: 600 11px/1.1 var(--ui); }
html[data-touch-controls=true] :is(.phone-tools, .phone-voice) button .ico { width: 18px; height: 18px; }
html[data-touch-controls=true] .phone-tools button[aria-expanded=true] { color: var(--candle); border-color: var(--candle); }
html[data-touch-controls=true] .phone-voice { display: flex; position: fixed; right: var(--safe-right); top: var(--safe-top); gap: 5px; z-index: 24; touch-action: none; }
html[data-touch-controls=true] .phone-voice button { touch-action: none; -webkit-touch-callout: none; }
html[data-touch-controls=true] .phone-voice button.held, html[data-touch-controls=true] .phone-voice.live [data-voice=talk] { background: #224d48; border-color: var(--teal); }
html[data-touch-controls=true] .phone-voice.off [data-voice=mute] { color: var(--blood-2); }
html[data-touch-controls=true] .phone-voice-note { position: absolute; top: calc(100% + 5px); right: 0; width: min(290px, 76vw); box-sizing: border-box; border-radius: 0.25rem; padding: 7px 10px; background: #26201aef; color: var(--parch); font: 500 12px/1.4 var(--ui); pointer-events: none; }
html[data-touch-controls=true] :is(.hud-br, .keyhint, .mic-state, .desktop-only) { display: none !important; }
html[data-touch-controls=true] .hud-tr { display: none; right: auto; left: var(--safe-left); top: calc(var(--safe-top) + 52px); width: min(340px, calc(100vw - var(--safe-left) - var(--safe-right))); max-height: calc(var(--screen-height, 100dvh) - var(--safe-top) - var(--safe-bottom) - 65px); overflow: auto; pointer-events: auto; }
html[data-touch-controls=true] .chores-open .hud-tr { display: grid; }
html[data-touch-controls=true] .hud-bl { left: var(--safe-left); bottom: calc(var(--safe-bottom) + 158px); max-width: 180px; gap: 3px; }
html[data-touch-controls=true] .held { padding: 5px 8px; }
html[data-touch-controls=true] .held :is(small, .emb) { display: none; }
html[data-touch-controls=true] #walkHud.in-game .w-room { left: var(--safe-left); top: calc(var(--safe-top) + 52px); max-width: 45vw; }
html[data-touch-controls=true] #walkHud.in-game .w-room b { font-size: 1.35rem; }
html[data-touch-controls=true] #walkHud.in-game .w-room small { font-size: 10px; letter-spacing: .1em; }
html[data-touch-controls=true] .voice-list { top: calc(var(--safe-top) + 52px); left: auto; right: var(--safe-right); max-height: 90px; overflow: hidden; }
html[data-touch-controls=true] .hud .compass { top: auto; bottom: calc(var(--safe-bottom) + 6px); max-width: max(120px, calc(100vw - 490px)); padding: 5px; white-space: normal; }
html[data-touch-controls=true] .hud .compass :is(.c-sub, small) { display: none; }
html[data-touch-controls=true] .hud .alert { top: calc(var(--safe-top) + 90px); bottom: auto; max-width: min(60vw, 500px); padding: 6px 10px; }
html[data-touch-controls=true] .toast { top: calc(var(--safe-top) + 98px); bottom: auto; max-width: min(70vw, 480px); }
html[data-touch-controls=true] .toast b { font-size: 1.5rem; }
html[data-touch-controls=true] .toast span { font-size: .9rem; }
html[data-touch-controls=true] .chatbar { position: fixed; top: auto; bottom: max(var(--safe-bottom), calc(100dvh - var(--screen-height, 100dvh) - var(--screen-top, 0px) + 8px)); z-index: 25; width: min(580px, calc(100vw - var(--safe-left) - var(--safe-right))); }
html[data-touch-controls=true] .chatbar .line { box-sizing: border-box; border-radius: 0.25rem; padding: 6px; flex-wrap: wrap; }
html[data-touch-controls=true] .chatbar .line .tagc { flex-basis: 100%; padding: 0 4px; }
html[data-touch-controls=true] .chatbar .line input { min-height: 44px; box-sizing: border-box; width: 100px; }
html[data-touch-controls=true] .board-close { display: flex; position: sticky; bottom: 0; margin-top: 1rem; width: 100%; }
html[data-touch-controls=true] .scoreboard { width: min(680px, calc(100vw - var(--safe-left) - var(--safe-right))); max-height: calc(var(--screen-height, 100dvh) - var(--safe-top) - var(--safe-bottom) - 60px); top: calc(var(--screen-top, 0px) + var(--safe-top) + 54px); translate: -50% 0; box-sizing: border-box; pointer-events: auto; }
html[data-touch-controls=true] .map-card header { flex-wrap: wrap; }
html[data-touch-controls=true] .map-card header .seg { order: 3; flex-basis: 100%; }
html[data-touch-controls=true] .map-card header .seg button { flex: 0 0 auto; min-width: max-content; padding: 8px 12px; }
html[data-touch-controls=true] .map-card header .btn { margin-left: auto; }
html[data-touch-controls=true] .sabmenu { width: min(640px, calc(100vw - var(--safe-left) - var(--safe-right))); max-height: calc(var(--screen-height, 100dvh) - var(--safe-top) - var(--safe-bottom)); top: calc(var(--screen-top, 0px) + var(--safe-top)); translate: -50% 0; overflow: auto; box-sizing: border-box; }
html[data-touch-controls=true] .sabmenu kbd, html[data-touch-controls=true] .sab-hint { display: none; }
html[data-touch-controls=true] .meet { padding: 12px; margin-top: 52px; margin-bottom: 0; grid-template-columns: 1fr; grid-template-rows: auto; max-height: none; }
html[data-touch-controls=true] .meet-head { align-items: flex-start; }
html[data-touch-controls=true] .meet-head h2 { font-size: 2rem; }
html[data-touch-controls=true] .meet-head .badge { display: none; }
html[data-touch-controls=true] .meet .suspects { overflow: visible; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); }
html[data-touch-controls=true] .meet-foot { position: sticky; bottom: 0; background: #2f2821; padding: 8px; z-index: 3; border-radius: 0.25rem; }
html[data-touch-controls=true] .meet-foot > .row { flex: 1; justify-content: flex-end; }
html[data-touch-controls=true] .chat { min-height: 140px; max-height: 240px; }
html[data-touch-controls=true] body:has(#meeting:not([hidden])) .phone-tools { display: none; }
html[data-touch-controls=true] body:has(:is(.mapview, .taskbox, .sabmenu, .scoreboard):not(.closing)) .phone-tools { display: none; }
html[data-touch-controls=true] body:has(:is(.mapview, .sabmenu, .scoreboard):not(.closing)) .phone-voice { display: none; }
html[data-touch-controls=true] body:has(#touchVoice:not([hidden])) .taskbox,
html[data-touch-controls=true] body:has(#touchVoice:not([hidden])) #walkHud.in-game .w-task { padding-top: calc(var(--safe-top) + 52px); }
html[data-touch-controls=true] body:has(.taskbox, #walkHud.in-game .w-task:not([hidden])) .phone-voice { top: var(--safe-top); }
html[data-touch-controls=true] body.keyboard-open :is(.phone-tools, .phone-voice) { display: none; }
html[data-touch-controls=true] body:has(#lobby:not([hidden])) #lobby { padding-top: calc(var(--safe-top) + 52px); }
html[data-touch-controls=true] body:has(#lobby:not([hidden])) .phone-voice { top: var(--safe-top); }
@media (max-width: 540px) {
  html[data-touch-controls=true] .phone-voice { top: calc(var(--safe-top) + 52px); }
  html[data-touch-controls=true] .voice-list { display: none; }
  html[data-touch-controls=true] .lobby .players { grid-template-columns: 1fr; }
  html[data-touch-controls=true] .title-lockup h1 { font-size: 2.8rem; }
  html[data-touch-controls=true] .map-card header h2 { font-size: 1.7rem; }
  html[data-touch-controls=true] .meet-head { flex-wrap: wrap; }
  html[data-touch-controls=true] .meet { margin-top: 98px; }
  html[data-touch-controls=true] .hud .compass { bottom: calc(var(--safe-bottom) + 164px); max-width: 70vw; }
  html[data-touch-controls=true] body:has(#touchVoice:not([hidden])) #walkHud.in-game .w-room { top: calc(var(--safe-top) + 106px); }
  html[data-touch-controls=true] body:has(.hud.with-alert) #walkHud.in-game .w-room { display: none; }
}

/* One meeting panel at a time on phones, with voting always within reach. */
@media (max-width: 920px) {
  html[data-touch-controls=true] #meeting { overflow: hidden; }
  html[data-touch-controls=true] body:has(#meeting:not([hidden])) .phone-voice { top: var(--safe-top); }
  html[data-touch-controls=true] .meet { box-sizing: border-box; height: calc(100% - 52px); max-height: none; margin: 52px 0 0; gap: 8px; grid-template-rows: auto auto minmax(0, 1fr) auto; }
  html[data-touch-controls=true] .meet-head { grid-row: 1; flex-wrap: nowrap; gap: 8px; padding-bottom: 8px; min-width: 0; }
  html[data-touch-controls=true] .meet-head .who-called { min-width: 0; }
  html[data-touch-controls=true] .meet-head h2 { font-size: 1.65rem; overflow-wrap: anywhere; }
  html[data-touch-controls=true] .meet-head .eyebrow { font-size: .65rem; letter-spacing: .08em; }
  html[data-touch-controls=true] .meet-head .tools { gap: 4px; flex: none; }
  html[data-touch-controls=true] .meet-head .timer { width: 44px; height: 44px; font-size: 1rem; }
  html[data-touch-controls=true] .meet-tabs { grid-row: 2; display: flex; gap: 5px; }
  html[data-touch-controls=true] .meet-tabs button { flex: 1; min-height: 44px; border-radius: 0.25rem; border: 1px solid var(--line-2); background: #211c18; color: var(--ink); font: 700 .9rem var(--ui); }
  html[data-touch-controls=true] .meet-tabs button[aria-pressed=true] { color: var(--candle); border-color: var(--candle); background: #36332f; }
  html[data-touch-controls=true] .meet > :is(.suspects, .evidence) { grid-row: 3; grid-column: 1; min-height: 0; overflow: auto; }
  html[data-touch-controls=true] .meet .evidence { align-content: stretch; grid-template-rows: minmax(0, 1fr); }
  html[data-touch-controls=true] .meet-evidence-body { display: grid; gap: 12px; align-content: start; overflow: auto; padding-top: 5px; }
  html[data-touch-controls=true] .meet .chat { min-height: 0; max-height: none; height: 100%; box-sizing: border-box; grid-template-rows: minmax(0, 1fr) auto; }
  html[data-touch-controls=true] .meet:not([data-meet-panel=suspects]) > .suspects,
  html[data-touch-controls=true] .meet[data-meet-panel=suspects] > .evidence,
  html[data-touch-controls=true] .meet:not([data-meet-panel=evidence]) .meet-evidence-body,
  html[data-touch-controls=true] .meet:not([data-meet-panel=chat]) .chat { display: none; }
  html[data-touch-controls=true] .meet-foot { grid-row: 4; position: static; display: grid; grid-template-columns: 1fr; gap: 8px; padding: 10px 0 0; }
  html[data-touch-controls=true] .meet-foot .hint { font-size: .8rem; line-height: 1.3; }
  html[data-touch-controls=true] .meet-foot .row { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  html[data-touch-controls=true] .meet-foot .row .btn { min-height: 48px; padding: 8px; }
  html[data-touch-controls=true] #mtMute { display: none; }
  html[data-touch-controls=true] body.keyboard-open .meet { height: 100%; margin-top: 0; }
  html[data-touch-controls=true] body.keyboard-open .meet-head .eyebrow,
  html[data-touch-controls=true] body.keyboard-open .meet-foot .hint { display: none; }
}

/* Compact menus still keep labels, focus rings and comfortable touch targets. */
@media (max-width: 540px) {
  html { font-size: calc(16px * var(--ui-scale, 1)); }
  .menu-card { gap: .875rem; }
  .menu-foot { gap: .5rem; }
  .menu-foot .btn { flex: 1 1 auto; font-size: .875rem; }
  .menu-identity .who { grid-template-columns: 4.5rem minmax(0, 1fr); gap: .75rem; }
  .menu-identity .who .portrait { width: 4.5rem; height: 4.5rem; }
  .menu-identity .appearance-note { font-size: .8rem; }
  .lobby-head { align-items: flex-start; }
  .lobby-head h2 { font-size: 2.5rem; line-height: 1.05; }
  .ticket { width: 100%; box-sizing: border-box; justify-content: space-between; }
  .ticket .btn { min-width: 0; }
  .lobby-foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .lobby-foot .grow { display: none; }
  .lobby-foot .btn { min-width: 0; padding: .625rem .25rem; font-size: .8125rem; gap: .3rem; }
  .lobby-foot .btn.big, .lobby-foot .wait { grid-column: 1 / -1; }
  .lobby-foot .btn.big { font-size: 1rem; padding: .875rem; }
  .opts { grid-template-columns: minmax(0, 1fr); }
  .advanced-rules > summary small { max-width: 11rem; text-align: right; line-height: 1.3; }
  .help-start ol { grid-template-columns: 1fr; gap: .75rem; }
  .modal > .modal-head { gap: .5rem; flex-wrap: wrap; }
  .modal > .modal-head h2 { flex: 1; font-size: 2.25rem; }
  .tabs { width: 100%; box-sizing: border-box; }
  .tabs button { flex: 1 1 auto; justify-content: center; padding: .625rem .5rem; font-size: .875rem; }
  .settings > .modal-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .settings > .modal-head .grow { display: none; }
  .settings > .modal-head [data-x] { grid-column: 2; grid-row: 1; }
  .settings > .modal-head [data-reset] { grid-column: 1 / -1; grid-row: 2; }
  .settings .tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .settings .tabs button { flex-direction: column; gap: .25rem; font-size: .8rem; line-height: 1.25; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .suspect, .timer, .input, .menu-card, .panel { transition: none; }
  .title-lockup h1, .timer.low, .act.ready { animation: none; }
}

/* Surface styling lives in modern.css; retain gameplay visibility rules. */
/* ---------- a quiet screen in play: on the move only the crosshair and what you can use; stand still (or finish something) and the rest comes back ---------- */
.role-card, .hud-card:has(.chore-list), .compass, .keyhint, #walkHud.in-game .w-room, .hud-br .act { transition: opacity .5s ease, transform .5s ease; }
html.hud-quiet :is(.role-card, .hud-card:has(.chore-list), .compass, .keyhint) { opacity: 0; }
html.hud-quiet .hud-card:has(.chore-list) { transform: none; }
/* the room plaque: shown when you walk into a room, then it fades; always there while you stand still */
html.hud-quiet #walkHud.in-game .w-room { opacity: 0; }
html.hud-quiet #walkHud.in-game .w-room.flash { animation: plaque 3.4s ease both; }
@keyframes plaque { 0% { opacity: 0; } 10%, 72% { opacity: 1; } 100% { opacity: 0; } }
/* a mouse and keyboard know E and R: the Use push is not needed, and Report appears only when there is someone to report */
@media (hover: hover) and (pointer: fine) {
  html:not([data-touch-controls=true]) .hud-br .act-use { display: none; }
  html:not([data-touch-controls=true]) .hud-br .act-rep:not(.hot):not(.ready) { opacity: 0; pointer-events: none; transform: scale(.8); }
}
html.hud-quiet:not([data-touch-controls=true]) .hud-br .act:not(.ready):not(.hot):not(.act-kill) { opacity: 0; }
@media (prefers-reduced-motion: reduce) { html.hud-quiet .hud-card:has(.chore-list) { transform: none; } }

/* Tomato meetings keep the real Great Hall in view. */
#meeting.table-meeting { display:block; position:fixed; inset:0; padding:0; background:none; backdrop-filter:none; pointer-events:none; }
#meeting.table-meeting[hidden] { display:none; }
.table-look { position:absolute; inset:0; pointer-events:auto; touch-action:none; cursor:grab; }
.table-look:active { cursor:grabbing; }
.table-meeting-head { position:absolute; top:max(22px,env(safe-area-inset-top)); left:max(24px,env(safe-area-inset-left)); right:max(24px,env(safe-area-inset-right)); display:flex; justify-content:space-between; color:#fff0d2; text-shadow:0 2px 6px #000; }
.table-meeting-head strong { display:block; font:30px 'IM Fell English',serif; }
.table-meeting-head span:not(.table-meeting-timer) { display:block; font-size:16px; }
.table-meeting-timer { font-size:28px; font-variant-numeric:tabular-nums; }
.table-targets { position:absolute; inset:0; }
.table-guest { position:absolute; transform:translate(-50%,-100%); pointer-events:auto; min-height:44px; min-width:64px; padding:8px 14px; border:0; border-bottom:3px solid var(--guest); border-radius:8px; background:#171c24e8; color:#fff1d7; font:700 17px 'Alegreya Sans',sans-serif; cursor:pointer; box-shadow:0 3px 8px #0007; }
.table-guest[hidden] { display:none; }
.table-guest:disabled { opacity:.8; cursor:default; }
.table-guest:hover:not(:disabled),.table-guest:focus-visible { background:#733a37; outline:2px solid #f2d294; }
.table-guest.talking { outline:2px solid #91be8e; }
.table-meeting-hint { position:absolute; bottom:max(24px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); margin:0; padding:8px 14px; background:#10151cbb; color:#fff0d2; text-align:center; border-radius:5px; white-space:nowrap; }
.table-meeting-tools { position:absolute; right:max(18px,env(safe-area-inset-right)); bottom:max(18px,env(safe-area-inset-bottom)); display:flex; gap:8px; pointer-events:auto; }
.table-meeting-tools .btn { min-height:44px; padding:8px 12px; font-size:16px; }
.table-chat { position:absolute; right:max(18px,env(safe-area-inset-right)); bottom:max(78px,calc(env(safe-area-inset-bottom) + 60px)); width:min(360px,calc(100% - 36px)); background:#18202bed; border:1px solid #bfa27460; border-radius:12px; padding:14px; pointer-events:auto; }
.table-chat[hidden] { display:none; }
.table-chat .chat-log { max-height:min(240px,35dvh); overflow-y:auto; }
.table-chat .chat-compose { display:flex; gap:8px; }
.table-chat input { min-width:0; width:100%; }
@media(max-width:700px) { .table-meeting-head strong {font-size:23px;} .table-meeting-head{top:max(12px,env(safe-area-inset-top));left:14px;right:14px;} .table-guest{font-size:15px;padding:6px 10px;} .table-meeting-hint{bottom:max(74px,calc(env(safe-area-inset-bottom) + 60px));font-size:14px;} .table-meeting-tools{bottom:max(12px,env(safe-area-inset-bottom));right:14px;} .table-chat{bottom:126px;} }
body:has(#meeting.table-meeting:not([hidden])) #walkHud,
body:has(#meeting.table-meeting:not([hidden])) #labels,
body:has(#meeting.table-meeting:not([hidden])) #hud { visibility:hidden; }
.table-guest { max-width:calc(100vw - 24px); user-select:none; touch-action:manipulation; }

/* the kill camera: a short third-person shot; the HUD, prompts and name labels fade out of its way */
html.kill-cam :is(#hud, #walkHud, #labels, #netbar) { opacity: 0 !important; pointer-events: none !important; transition: opacity .2s; }