/* Charles Mansion: gaslight on dark wallpaper, ink on aged paper. */
:root {
  --bg: #15110e; --panel: #201914; --panel-2: #2a211a; --ink: #eee3cf; --muted: #b8a68b; --faint: #8f7e68; --line: #43362b;
  --accent: #d4a04c; --accent-ink: #1b130b; --danger: #d0675a; --good: #9cb684; --mind: #ac92d6;
  --room: #2c241d; --room-edge: #6e5a45; --unknown: #18130f;
  --kit-bg: var(--panel); --kit-ink: var(--ink); --kit-muted: var(--muted); --kit-line: var(--line); --kit-accent: var(--accent);
  --kit-p0: #b9796a; --kit-p1: #7d9cb8;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --side: clamp(320px, 27vw, 400px);
}
* { box-sizing: border-box; }
html, body { background: var(--bg); }
body { margin: 0; min-height: 100vh; color: var(--ink); font: 16px/1.5 var(--serif);
  background: radial-gradient(ellipse at 50% -10%, #3a2a1b 0%, var(--bg) 60%) fixed; }
#app { max-width: 1240px; margin: 0 auto; padding: 16px 16px 60px; }
[hidden] { display: none !important; }
h1 { font-size: clamp(2.4rem, 7vw, 4rem); margin: 4px 0; letter-spacing: .02em; font-weight: 600; }
h2 { font-weight: 600; }
.kicker { color: var(--accent); text-transform: uppercase; letter-spacing: .2em; font-size: .8rem; margin: 48px 0 0; }
.sub { color: var(--muted); margin: 0 0 28px; font-style: italic; font-size: 1.15rem; }
.menu { display: grid; gap: 12px; max-width: 460px; }
.note { color: var(--muted); font-size: .9rem; }
label { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--muted); }
button, input, select { font: inherit; color: var(--ink); background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 8px 14px; }
button { cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--accent); }
button:disabled { opacity: .5; cursor: default; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.quiet { background: none; }
/* "More games at punatic.org": a link that looks like the quiet buttons, at least 44 px tall */
a.homeLink { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; padding: 8px 14px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); text-decoration: none; }
a.homeLink:hover { border-color: var(--accent); }
dialog.paper a.homeLink { color: #2b2219; border-color: #8a7a63; }
.error { color: var(--danger); min-height: 1.2em; margin: 6px 0 0; }
.saveNote { color: var(--danger); margin: 2px 0 0; }
.row { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
kbd { font: 600 .72rem/1 ui-monospace, Menlo, Consolas, monospace; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 2px 5px; color: var(--muted); background: #0003; }
.ic { width: 18px; height: 18px; flex: none; vertical-align: -3px; }
#handoff { text-align: center; padding-top: 100px; }

/* ---------- the table: full height on a desktop, the plan takes what the side panel leaves ---------- */
body[data-screen="play"] #app { max-width: 1680px; height: 100vh; display: flex; flex-direction: column; padding: 8px 14px 12px; }
#play { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#table { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) var(--side); gap: 14px; }
#stage { display: flex; flex-direction: column; gap: 8px; min-height: 0; min-width: 0; position: relative; }
#side { min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 4px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
#side .error:empty { display: none; }

/* top bar */
#top { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; min-height: 44px; }
#bells { display: flex; gap: 5px; align-items: center; flex: none; }
#bells .bell { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--room-edge); background: var(--panel); }
#bells .bell.late { border-color: #8a5a44; }
#bells .bell.last { border-color: var(--danger); border-width: 2px; }
#bells .bell.rung { background: var(--accent); border-color: var(--accent); }
#bells .label { color: var(--muted); font-size: .85rem; margin-left: 6px; white-space: nowrap; }
#turn { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 12px; white-space: nowrap; overflow: hidden; }
#turn .who { font-size: 1.1rem; overflow: hidden; text-overflow: ellipsis; }
#turn .round { color: var(--muted); font-size: .88rem; }
#turn .threat { color: var(--danger); font-size: .88rem; }
.tools { display: flex; gap: 6px; align-items: center; flex: none; }
button.icon { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: #0000; }
button.icon .lbl { font-size: .9rem; }
.soundWrap { position: relative; }
.pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; background: var(--panel-2); border: 1px solid var(--room-edge); border-radius: 8px; padding: 10px; min-width: 240px; box-shadow: 0 12px 30px #000a; display: grid; gap: 8px; }
.pop .seg { display: grid; gap: 4px; }
.pop .seg button, #menuPop button { text-align: left; background: none; border-color: transparent; padding: 6px 10px; }
.pop .seg button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.pop label { font-size: .9rem; }
.pop input[type=range] { flex: 1; padding: 0; accent-color: var(--accent); }
.pop output { width: 3em; text-align: right; color: var(--muted); font-size: .85rem; }
#menuPop small { color: var(--muted); }
.titleTools { align-items: center; }
.titleTools .pop { right: auto; left: 0; }

/* team strip */
#team { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 300px)); gap: 8px; }
#team[data-n="1"] { --n: 1; } #team[data-n="2"] { --n: 2; } #team[data-n="3"] { --n: 3; } #team[data-n="4"] { --n: 4; }
.chip { position: relative; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--c); border-radius: 8px; min-width: 0; }
.chip.sel { border-color: var(--c); background: var(--panel-2); box-shadow: 0 0 0 1px var(--c) inset; }
.chip.done:not(.sel) { opacity: .7; }
.chip.fallen { opacity: .4; }
.chip .pick { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; grid-template-rows: auto auto auto; column-gap: 8px; row-gap: 1px; width: 100%; padding: 6px 28px 6px 8px; align-items: center; }
.chip:not(.mine) .pick { cursor: help; }
.chip .pick:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px; }
.chip .face { grid-row: 1 / 4; width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--c); }
.chip .nm { font-weight: 600; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; grid-column: 2 / 4; }
.chip .nm em { font-style: normal; font-weight: 400; font-size: .72rem; padding: 0 6px; border-radius: 999px; border: 1px solid; margin-left: 4px; }
.chip .nm em.warn { color: var(--danger); } .chip .nm em.lucid { color: var(--mind); }
.chip .tr { display: flex; align-items: center; gap: 5px; grid-column: 2; font-size: .7rem; color: var(--faint); }
.chip .tr .k { width: 9px; }
.chip .meta { grid-column: 3; grid-row: 2 / 4; display: grid; justify-items: end; gap: 2px; font-size: .85rem; color: var(--muted); }
.chip .meta .ic { width: 12px; height: 12px; color: var(--accent); margin-right: 2px; vertical-align: -1px; }
.chip .acts { display: flex; gap: 3px; }
.chip .acts i { width: 9px; height: 9px; transform: rotate(45deg); border: 1px solid var(--accent); }
.chip .acts i.on { background: var(--accent); }
.chip .card { position: absolute; right: 4px; top: 4px; width: 22px; height: 22px; padding: 0; border-radius: 50%; font: italic 600 .8rem/1 var(--serif); color: var(--muted); background: none; }
.pips { display: inline-flex; gap: 2px; }
.pips i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid #7a6352; }
.pips.body i.on { background: var(--danger); border-color: var(--danger); }
.pips.mind i.on { background: var(--mind); border-color: var(--mind); }

/* objective */
#objective details { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; font-size: .92rem; }
#objective summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; list-style: none; }
#objective summary::-webkit-details-marker { display: none; }
#objective summary::before { content: "▸"; color: var(--faint); font-size: .8rem; }
#objective details[open] summary::before { content: "▾"; }
#objective summary b { color: var(--accent); font-weight: 600; }
#objective .dl { color: var(--muted); font-size: .85rem; }
#objective .prog { flex: 1; min-width: 12em; }
#objective .taken { color: var(--muted); font-size: .85rem; white-space: nowrap; }
#objective .taken.warn { color: var(--danger); }
#objective .taken .ic { width: 15px; height: 15px; margin-right: 4px; }
#objective p { margin: 6px 0 2px; color: var(--muted); }

/* the plan */
#boardWrap { position: relative; flex: 1; min-height: 0; background: var(--unknown); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
#boardScroll { width: 100%; height: 100%; overflow: hidden; }
#board { display: block; width: 100%; height: 100%; }
#zoomBtn { display: none; }
#board .room { cursor: default; }
#board .room .cell { fill: var(--room); stroke: none; }
#board .room.unknown .cell { fill: #120e0b; }
#board .room .edge { fill: none; stroke: var(--room-edge); stroke-width: 1.5; pointer-events: none; }
#board .room.unknown .edge { stroke-dasharray: 6 5; stroke: #4a3c30; }
#board .room.seen .edge { stroke: #8a6fa8; }
#board .room .tile { pointer-events: none; }
#board .room .tile.dim { opacity: .4; }
#board .strip { fill: #0f0b08; }
#board .strip.go { fill: var(--accent); }
#board .strip.locked { fill: #6d2a23; }
#board .name { fill: var(--ink); font: 600 15px var(--serif); pointer-events: none; }
#board .strip.go ~ .name, #board .target.go .name { fill: var(--accent-ink); }
#board .badge rect { fill: #2a211a; stroke: #5b4a3a; }
#board .badge { color: #e2d4ba; pointer-events: none; }
#board .badge text { fill: #e2d4ba; font: 700 13px var(--serif); }
#board .badge.mark { color: var(--accent); } #board .badge.mark rect { stroke: var(--accent); }
#board .badge.seen { color: var(--mind); }
#board .target.go .badge rect { fill: #0000; stroke: #0000; }
#board .target.go .badge { color: var(--accent-ink); }
#board .target.go .badge text { fill: var(--accent-ink); }
#board .badge.lock { color: #f2c6bd; } #board .badge.lock rect { fill: none; stroke: none; }
#board .room .glow { fill: none; stroke: var(--accent); stroke-width: 6; opacity: .55; pointer-events: none; }
#board .room.target.locked .glow { stroke: var(--danger); }
#board .room.target .edge { stroke: var(--accent); stroke-width: 3; stroke-dasharray: none; }
#board .room.target.locked .edge { stroke: var(--danger); }
#board .room.target.go { cursor: pointer; }
#board .room.target.go:hover .tile { filter: brightness(1.15); }
#board .room.target.go:hover .strip.go { fill: #e6b762; }
#board .q { fill: #4d3e31; font: 600 48px var(--serif); pointer-events: none; }
#board .door { fill: #4a3a2c; stroke: var(--room-edge); }
#board .door.locked { fill: #4b2520; stroke: var(--danger); }
#board .lockmark { color: #f2c6bd; pointer-events: none; }
#board .patient circle { fill: #ddd2bd; stroke: #2b2219; stroke-width: 2; }
#board .patient.heard image { opacity: .6; }
#board .monster circle.base { stroke: var(--danger); stroke-width: 3; }
#board .monster circle.hp { fill: #1b130b; stroke: var(--danger); stroke-width: 2; }
#board .monster text.hp { fill: var(--ink); font: 700 12px var(--serif); pointer-events: none; }
#board .token { cursor: pointer; }
#board .token circle { stroke: #1b130b; stroke-width: 2.5; }
#board .token circle.ring { fill: none; stroke: var(--ink); stroke-width: 3; stroke-dasharray: 5 4; }
#board image { pointer-events: none; }

/* hover and tap info */
#roomInfo { position: absolute; z-index: 6; max-width: 300px; background: #1c1510f2; border: 1px solid var(--room-edge); border-radius: 8px; padding: 8px 12px; font-size: .88rem; box-shadow: 0 10px 24px #000a; pointer-events: none; }
#roomInfo.pinned { pointer-events: auto; }
#roomInfo > b { color: var(--accent); display: block; padding-right: 20px; }
#roomInfo p { margin: 4px 0; }
#roomInfo .muted { color: var(--muted); }
#roomInfo .accent { color: var(--accent); }
#roomInfo .ic { width: 14px; height: 14px; margin-right: 4px; color: var(--muted); }
#roomInfo .who { display: flex; gap: 8px; align-items: flex-start; }
#roomInfo .who img { width: 28px; height: 28px; border-radius: 50%; flex: none; }
#roomInfo .x { position: absolute; right: 4px; top: 2px; padding: 0 8px; font-size: 1.2rem; border: 0; }

/* the house's cards: a toast over the bottom of the plan */
#toast { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 7; width: min(460px, calc(100% - 28px)); display: flex; gap: 12px; align-items: center; background: #2a1416f2; border: 1px solid var(--danger); border-radius: 8px; padding: 8px 12px 8px 8px; box-shadow: 0 10px 30px #000a; cursor: pointer; font-size: .9rem; }
#toast.in { animation: toastIn .35s ease-out; }
#toast img, #toast .ic.big { width: 64px; height: 46px; object-fit: cover; border-radius: 4px; border: 1px solid #5a3030; flex: none; }
#toast .ic.big { padding: 8px; color: var(--danger); }
#toast b { display: block; color: #f0c7bd; }
#toast span { color: var(--muted); }
@keyframes toastIn { from { transform: translate(-50%, 12px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }

/* side panel */
.note-card { background: #241c13; border: 1px solid #5a4630; border-left: 3px solid var(--accent); border-radius: 8px; padding: 8px 12px; font-size: .9rem; }
.note-card p { margin: 0 0 6px; }
.note-card button { font-size: .85rem; padding: 4px 10px; }
#away h4 { margin: 0 0 4px; font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--accent); display: flex; justify-content: space-between; align-items: center; }
#away .x { padding: 0 6px; border: 0; font-size: 1.1rem; color: var(--muted); }
#away ul, #log ul { list-style: none; margin: 0; padding: 0; }
#away li, #log li { display: flex; gap: 8px; align-items: flex-start; margin: 3px 0; }
#away li .ic, #log li .ic { width: 15px; height: 15px; margin-top: 3px; color: var(--faint); }
#away .more { color: var(--muted); font-size: .85rem; margin: 4px 0 0; }
li.k-bell .ic, li.k-find .ic, li.k-story .ic { color: var(--accent) !important; }
li.k-monster .ic, li.k-hurt .ic, li.k-taken .ic, li.k-card .ic { color: var(--danger) !important; }
li.k-dice .ic { color: var(--ink) !important; }
li.k-story, li.k-taken { color: var(--accent); }
li.k-taken { color: #f0b2a6; }

#actions { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
#actions h4 { margin: 10px 0 4px; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 600; }
#actions h4 span { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--faint); }
#actions h4:first-child { margin-top: 0; }
#actions .tip { color: var(--muted); font-size: .86rem; margin: 6px 0; }
#actions .tip.said { color: var(--ink); font-style: italic; }
#actions .tip.wait { font-style: italic; }
#actions .gold { color: var(--accent); }
.act { display: flex; flex-direction: column; max-width: 100%; }
.act button { font-size: .9rem; padding: 6px 10px; display: inline-flex; align-items: center; gap: 6px; text-align: left; }
.act button .key { font-size: .66rem; padding: 1px 4px; }
.act small { font-size: .74rem; line-height: 1.25; margin: 2px 2px 0; max-width: 220px; }
.act small.odds { color: var(--faint); }
.act small.why { color: #d49b8f; }
.act.off button { border-style: dashed; }
.endrow { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.endrow .ask { margin: 0 0 6px; font-size: .9rem; }
.act.end button { border-color: var(--room-edge); }
.act.end.primary button, .endrow [data-confirm] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.act.end.primary .key, .endrow [data-confirm] .key { color: var(--accent-ink); border-color: #0004; }

/* the room you're in */
.here { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; align-items: start; }
.here .view { padding: 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: none; display: block; }
.here .view img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: saturate(.9); }
.here h3 { margin: 0; font-size: 1rem; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; line-height: 1.25; }
.here h3 span { font-weight: 400; color: var(--muted); }
.here h3 .face { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--c); }
.here p { margin: 4px 0 0; color: var(--muted); font-size: .85rem; line-height: 1.35; }
.me { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0 2px; padding: 4px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.me .skills { display: flex; gap: 10px; font-size: .74rem; color: var(--faint); }
.me .skills b { color: var(--ink); font-size: .95rem; margin-right: 2px; }
.me .its { display: flex; gap: 4px; }
.me .its img { width: 26px; height: 26px; border-radius: 4px; object-fit: cover; }

/* dice, beside the action that rolled them */
.tray { margin: 8px 0 2px; background: #17110d; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: .86rem; }
.tray.fresh { border-color: var(--accent); animation: flash 1.4s ease-out; }
.tray .hd { color: var(--muted); }
.tray .hd .ic { width: 15px; height: 15px; margin-right: 4px; }
.tray .hd b { color: var(--ink); }
.tray .dice { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; }
.die { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; background: #e9dfca; color: #2b2219; font-weight: 700; }
.tray.fresh .die { animation: roll .45s ease-out backwards; }
.die.s { background: var(--accent); }
.die.i { background: #c7b8e0; }
.verdict { margin-left: 6px; }
.verdict.pass b { color: var(--good); } .verdict.fail b { color: var(--danger); }
@keyframes roll { from { transform: rotate(-200deg) scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes flash { from { box-shadow: 0 0 0 3px #d4a04c66; } to { box-shadow: none; } }

#keeper { background: #1c1214; border: 1px solid #4a2a2a; border-radius: 8px; padding: 8px 12px; font-size: .9rem; }
#keeper h4 { margin: 0 0 2px; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--danger); font-weight: 600; }
#keeper .sum, #keeper .known { margin: 2px 0; }
#keeper .card { display: inline-block; border: 1px solid #4a2a2a; border-radius: 4px; padding: 0 6px; margin: 2px 4px 2px 0; }
#keeper .mons { display: grid; gap: 4px; margin-top: 4px; }
#keeper .mon { display: flex; align-items: center; gap: 8px; text-align: left; background: none; border-color: #4a2a2a; padding: 3px 8px 3px 3px; font-size: .88rem; }
#keeper .mon small { color: var(--muted); }
.card img.mini, .mon img.mini { width: 26px; height: 26px; border-radius: 50%; }

#end { text-align: center; padding: 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); }
#end h2 { margin: 0 0 6px; } #end.win h2 { color: var(--good); } #end.lose h2 { color: var(--danger); }
#end p { margin: 0 0 8px; color: var(--muted); }
#end .row { justify-content: center; }

#logBox { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; }
#logBox > summary { cursor: pointer; color: var(--muted); }
#log { margin-top: 6px; font-size: .88rem; max-height: 420px; overflow: auto; }
#log details { border-top: 1px solid var(--line); padding: 4px 0; }
#log summary { cursor: pointer; color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; display: flex; gap: 10px; }
#log summary .b { color: var(--accent); text-transform: none; letter-spacing: 0; }
#log summary .b .ic { width: 13px; height: 13px; margin-right: 2px; }
#log h5 { margin: 6px 0 2px; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--danger); font-weight: 600; }
#log ul.house { border-left: 2px solid #4a2a2a; padding-left: 8px; }

/* pop-ups on old paper */
dialog.paper { background: #e9dfca var(--paper) center / 512px repeat; color: #2b2219; border: 0; border-radius: 6px; max-width: min(620px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; padding: 22px 26px; box-shadow: 0 20px 60px #000c; }
dialog.paper::backdrop { background: #000a; }
dialog.paper h2 { margin-top: 0; }
dialog.paper button { color: var(--ink); }
dialog.paper button.primary { color: var(--accent-ink); }
dialog.paper button.quiet { color: #2b2219; border-color: #8a7a63; }
dialog.paper :focus-visible { outline-color: #7a2e26; }
dialog#roomPop { padding: 18px 20px; }
dialog#roomPop img { width: 100%; border-radius: 4px; display: block; }
dialog#roomPop h2 { margin: 12px 0 4px; }
dialog#roomPop p { margin: 0 0 12px; }
dialog#help { max-width: min(680px, calc(100vw - 24px)); }
dialog#help h3 { margin: 16px 0 4px; font-size: .85rem; text-transform: uppercase; letter-spacing: .14em; color: #7a2e26; }
dialog#help p, dialog#help li { font-size: .95rem; }
dialog#help ul { padding-left: 20px; margin: 4px 0; }
dialog#help .lead { font-style: italic; }
dialog#help kbd { color: #2b2219; border-color: #8a7a63; background: #fff6; }
dialog#help .check { justify-content: flex-start; color: #2b2219; margin: 16px 0 12px; }
dialog#help .check input { width: 18px; height: 18px; accent-color: #7a2e26; }
#endPop .kicker { margin: 0; color: #7a2e26; }
#endPop h2 { margin: 2px 0 8px; font-size: 1.8rem; }
#endPop.win h2 { color: #3f5a2c; } #endPop.lose h2 { color: #7a2e26; }
#endPop .lead { font-style: italic; }
#endPop ul { padding-left: 20px; } #endPop li { margin: 4px 0; }
#endPop .row { margin-top: 16px; }
#endPop .howwas { margin-top: 14px; border-top: 1px solid #8a7a6366; padding-top: 10px; }
#endPop .howwas h3 { margin: 0 0 6px; font-size: .85rem; text-transform: uppercase; letter-spacing: .14em; color: #7a2e26; }
#endPop .howwas h3 small { text-transform: none; letter-spacing: 0; color: #5a4c3c; font-weight: normal; }
#endPop .howwas .seg { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
#endPop .howwas .seg span { width: 4.8em; align-self: center; font-size: .8rem; color: #5a4c3c; }
#endPop .howwas .seg button { padding: 5px 10px; font-size: .9rem; }
#endPop .howwas button[aria-pressed="true"] { background: #7a2e26; border-color: #7a2e26; color: #f3e9d6; }
#endPop .recordRow { align-items: center; gap: 10px; }
#endPop .recordRow small { color: #5a4c3c; font-size: .8rem; flex: 1 1 200px; }
.invcard header { display: flex; gap: 14px; align-items: center; }
.invcard .face { width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--c); }
.invcard h2 { margin: 0; }
.invcard .who { margin: 0; color: #5a4a3a; font-style: italic; }
.invcard .skills { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 12px 0 8px; text-align: center; font-size: .8rem; color: #5a4a3a; }
.invcard .skills b { display: block; color: #2b2219; font-size: 1.3rem; }
.invcard .tracks { display: flex; gap: 6px 16px; flex-wrap: wrap; font-size: .9rem; margin-bottom: 8px; }
.invcard .pips i { border-color: #8a7a63; }
.invcard .items { display: grid; gap: 6px; margin: 8px 0; }
.invcard .item { display: flex; gap: 8px; align-items: center; }
.invcard .item img { width: 40px; height: 40px; border-radius: 4px; object-fit: cover; }
.invcard .item span { display: grid; } .invcard .item small { color: #5a4a3a; }
.invcard .secret { background: #2b221922; padding: 6px 8px; border-radius: 4px; }
.invcard .warn { color: #7a2e26; }

/* title sections, online */
#title h3 { margin: 14px 0 0; font-size: .85rem; text-transform: uppercase; letter-spacing: .14em; color: var(--accent); font-weight: 600; }
.online { display: grid; gap: 10px; }
#joinForm { display: flex; gap: 8px; }
#joinForm input { flex: 1; text-transform: uppercase; letter-spacing: .15em; }
#lobby { max-width: 640px; }
#lobby .cm-hint { color: var(--muted); font-size: .92rem; border-left: 3px solid var(--accent); padding-left: 10px; margin: 8px 0; }
#lobby .castOnline { margin: 14px 0; }
#lobby .castOnline h3 { margin: 0 0 8px; }
#lobby .castOnline .castPick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
#lobby .castOnline .castOpt[disabled] { opacity: .75; cursor: default; }
#lobby .castOnline .castOpt b { padding-right: 0; }
#lobby .castOnline .castOpt em { position: static; grid-column: 2; justify-self: start; margin-top: 4px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#lobby .cm-hint.warn { border-color: var(--danger); color: var(--ink); }
.cast .castLabel { color: var(--muted); }
#castPick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.castOpt { display: grid; grid-template-columns: 36px 1fr; column-gap: 8px; text-align: left; padding: 6px 8px; position: relative; background: #0005; }
.castOpt img { grid-row: 1 / 3; width: 36px; height: 36px; border-radius: 50%; border: 2px solid #0000; opacity: .65; }
.castOpt b { font-size: .88rem; font-weight: 600; line-height: 1.2; padding-right: 34px; }
.castOpt small { font-size: .72rem; color: var(--muted); line-height: 1.2; }
.castOpt em { position: absolute; right: 6px; top: 6px; font-style: normal; font-size: .7rem; color: var(--accent-ink); background: var(--accent); border-radius: 999px; padding: 0 6px; }
.castOpt.on { border-color: var(--c); background: var(--panel-2); }
.castOpt.on img { border-color: var(--c); opacity: 1; }
#castNote { margin: 4px 0 0; font-size: .82rem; }

/* the Keeper's hand and the traitor's */
.kcard { border: 1px solid #4a2a2a; background: #1c1214; border-radius: 6px; padding: 8px 10px; margin: 6px 0; overflow: hidden; }
.kcard.off { opacity: .55; }
.kcard b { color: var(--ink); } .kcard .cost { float: right; color: var(--danger); font-weight: 600; }
.kcard p { margin: 2px 0 6px; color: var(--muted); font-size: .88rem; }
.kcard img.art { display: block; width: calc(100% + 20px); margin: -8px -10px 8px; height: 84px; object-fit: cover; object-position: 50% 30%; border-bottom: 1px solid #4a2a2a; filter: sepia(.15); }
.kcard.off img.art { filter: grayscale(.6); }
.turned { border: 1px solid #8a6fa8; background: #1d1724; border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.turned h4 { color: #c3a9ea !important; }
.suggest { color: var(--muted); font-size: .85rem; font-style: italic; }

/* title painting (Midjourney), behind the title screen only */
#title { position: relative; isolation: isolate; }
#title::before { content: ""; position: fixed; inset: 0; z-index: -1;
  background: linear-gradient(90deg, #0b0806e6 0%, #0b0806a8 32%, #0b080618 68%, #0b080600 100%),
    linear-gradient(0deg, #0b0806 0%, #0b080600 22%), var(--title-art) 62% 40% / cover no-repeat; }
#title h1 { text-shadow: 0 2px 18px #000; }
#title .menu { background: #0d0a08c8; border: 1px solid #3a2e22; border-radius: 10px; padding: 16px 18px; backdrop-filter: blur(2px); }
@media (max-width: 700px) { #title::before { background: linear-gradient(0deg, #0b0806f0 0%, #0b0806c0 55%, #0b080660 100%), var(--title-art) 70% 30% / cover no-repeat; } }

/* ---------- tablets: a narrower side panel, labels off the top-bar icons ---------- */
@media (max-width: 1180px) {
  :root { --side: 320px; }
  button.icon .lbl { display: none; }
  #bells .label .of { display: none; }
}

/* ---------- phones: one column, actions right after the plan ---------- */
/* ---------- the guided first night (tutorial.js) ---------- */
.learn { display: grid; gap: 2px; text-align: left; padding: 10px 14px; border-color: var(--accent); background: #2a1f13; }
.learn b { color: var(--accent); font-size: 1.05rem; }
.learn small { color: var(--muted); font-size: .82rem; line-height: 1.35; }
.tutor { background: #2a1f13; border: 1px solid var(--accent); border-radius: 8px; padding: 10px 12px; box-shadow: 0 4px 18px #0006; }
.tutor .kicker { margin: 0; font-size: .68rem; letter-spacing: .14em; }
.tutor h4, #actions .tutor h4 { margin: 2px 0 6px; font-size: 1.05rem; font-weight: 600; color: var(--ink); text-transform: none; letter-spacing: 0; }
.tutor .txt { font-size: .92rem; line-height: 1.45; }
.tutor .txt b { color: var(--accent); font-weight: 600; }
.tutor .txt i { color: var(--ink); }
.tutor .txt b[class^="d"] { display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; border-radius: 4px; background: #e9dfc9; color: #2a1f13; font-size: .85em; }
.tutor .txt b.ds { background: var(--accent); }
.tutor .txt b.di { background: var(--mind); }
.tutor .txt:empty { display: none; }
.tutor .row { margin-top: 10px; align-items: center; }
.tutor .skip { margin-left: auto; font-size: .78rem; color: var(--faint); border-color: transparent; padding: 4px 6px; }
.tutor.in { animation: flash 1.4s ease-out; }
#actions.tutoring .act:not(.tutor-target), #actions.tutor-wait .act { opacity: .4; }
.act.tutor-target button { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); animation: tpulse 1.6s ease-in-out infinite; }
@keyframes tpulse { 50% { box-shadow: 0 0 0 2px var(--accent), 0 0 16px 2px #d4a04c99; } }
#board .room.tutor-room .glow { opacity: 1; stroke-width: 10; animation: tglow 1.6s ease-in-out infinite; }
#board.tutoring .room.target:not(.tutor-room) { opacity: .45; }
@keyframes tglow { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .act.tutor-target button, #board .room.tutor-room .glow, .tutor.in { animation: none; } }

@media (max-width: 760px) {
  body[data-screen="play"] #app { height: auto; display: block; padding: 0 10px 40px; }
  #table { display: block; }
  #side { overflow: visible; padding: 0; margin-top: 10px; }
  #top { position: sticky; top: 0; z-index: 10; margin: 0 -10px 8px; padding: 6px 10px; background: #15110ef2; border-bottom: 1px solid var(--line); gap: 8px; flex-wrap: wrap; min-height: 0; backdrop-filter: blur(3px); }
  #bells { gap: 3px; }
  #bells .bell { width: 10px; height: 10px; }
  #bells .label { margin-left: 3px; font-size: .8rem; }
  #turn { order: 3; flex-basis: 100%; gap: 10px; }
  #turn .who { font-size: 1rem; }
  .tools { margin-left: auto; gap: 2px; }
  button.icon { padding: 6px 8px; border-color: transparent; }
  #team { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  #team[data-n="1"] { grid-template-columns: 1fr; }
  .chip .pick { grid-template-columns: 34px minmax(0, 1fr) auto; padding: 5px 26px 5px 6px; }
  .chip .face { width: 34px; height: 34px; }
  .chip .nm { font-size: .88rem; }
  .pips i { width: 6px; height: 6px; }
  .pips { gap: 1.5px; }
  #objective details { font-size: .86rem; padding: 6px 10px; }
  #objective .prog { min-width: 0; flex-basis: 100%; order: 3; }
  #boardWrap { flex: none; }
  #boardScroll { height: auto; max-height: 64vh; overflow: auto; overscroll-behavior: contain; }
  #board { height: auto; aspect-ratio: var(--ar, 1.4); }
  #boardWrap.zoomed #board { width: 220%; }
  .tutor { scroll-margin-top: 92px; }
  #actions .tutor { margin: 8px -4px; }
  #zoomBtn { display: inline-flex; position: absolute; right: 6px; top: 6px; z-index: 4; background: #15110ed8; border-color: var(--line); }
  #boardWrap.zoomed #zoomBtn { color: var(--accent); border-color: var(--accent); }
  #zoomBtn .lbl { display: inline; font-size: .85rem; }
  #roomInfo { left: 6px !important; right: 6px; bottom: 6px; top: auto !important; max-width: none; }
  #toast { position: fixed; left: 10px; right: 10px; bottom: 10px; transform: none; width: auto; z-index: 60; }
  @keyframes toastIn { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
  #actions { order: 1; } #playError { order: 2; } #away { order: 3; } #tips { order: 4; } #keeper { order: 5; } #logBox { order: 6; } #end { order: 0; }
  .here { grid-template-columns: 1fr; }
  .here .view img { aspect-ratio: 16 / 3.2; object-position: 50% 60%; }
  .here .view { order: 2; }
  .me .skills { gap: 7px; }
  .act small { max-width: 160px; }
  .act button { padding: 8px 10px; }
  .act button .key { display: none; }
  .endrow kbd { display: none; }
  dialog.paper { padding: 16px 18px; }
  #castPick { grid-template-columns: 1fr 1fr; }
}
@media (hover: none) { .act button .key, .endrow kbd { display: none; } }

@media (prefers-reduced-motion: reduce) { *, *::before { animation: none !important; transition: none !important; } }

/* who goes next */
#side .nextrow .act.on button, .nextrow .act.on button { border-color: var(--accent); color: var(--accent); }

/* the puzzles (WP12): dial lock and stopped clock, on old paper */
dialog.puzzle { width: min(460px, calc(100vw - 24px)); }
dialog.puzzle h2 { margin-bottom: 6px; }
dialog.puzzle svg.dial { width: 100%; max-width: 320px; display: block; margin: 0 auto; }
dialog.puzzle .dials { display: flex; justify-content: center; gap: 10px; margin: 6px 0 10px; }
dialog.puzzle .stepper { display: flex; flex-direction: column; align-items: center; gap: 2px; }
dialog.puzzle .stepper.wide { flex-direction: row; gap: 10px; justify-content: center; }
dialog.puzzle .stepper button { min-width: 48px; min-height: 40px; padding: 4px 10px; color: #2b2219; background: #fff6; border-color: #8a7a63; }
dialog.puzzle .stepper b { font-size: 1.3rem; min-width: 2.2em; text-align: center; }
dialog.puzzle .stepper.wide b { font-size: 1.05rem; min-width: 11em; }
dialog.puzzle .torn { text-align: center; border-top: 1px solid #8a7a6366; padding-top: 8px; }
dialog.puzzle .torn .lead { font-style: italic; font-size: .92rem; }
dialog.puzzle .signs { display: flex; justify-content: center; gap: 12px; margin: 4px 0 8px; }
dialog.puzzle svg.tornclock { width: min(220px, 70vw); }
dialog.puzzle .clockwrap { text-align: center; }
dialog.puzzle svg.clockface { width: min(230px, 60vw); }
dialog.puzzle .clockset { display: grid; gap: 8px; justify-items: center; margin: 8px 0; }
dialog.puzzle .mins { display: flex; gap: 6px; }
dialog.puzzle .mins button { color: #2b2219; background: #fff6; border-color: #8a7a63; min-width: 52px; }
dialog.puzzle .mins button[aria-pressed="true"] { background: #7a2e26; border-color: #7a2e26; color: #f3e9d6; }
dialog.puzzle .said { font-style: italic; }
dialog.puzzle .note { font-size: .82rem; color: #5a4c3c; }