/* Clocktower companion: Hub navy-slate look, phone first, laptop uses the width */
:root {
  --bg: #0f1117; --bg-soft: #161923; --card: #1a1e2b; --card-2: #212636; --line: #2a3042;
  --text: #e8eaf0; --muted: #969db4; --accent: #6ea8fe; --warm: #f0b354;
  --tf: #6ea8fe; --out: #8fd3ff; --min: #f0806a; --dem: #e0453c; --good: #3fb27f;
  --r: 14px; --tab-h: 60px; --head-h: 52px;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
body {
  position: fixed; inset: 0; display: flex; flex-direction: column;
  background: radial-gradient(120% 70% at 50% -10%, #1b2033 0%, var(--bg) 60%) fixed, var(--bg);
  color: var(--text); font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; touch-action: manipulation; -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
button:active:not(:disabled) { transform: scale(.97); }
button:disabled { opacity: .4; cursor: default; }
.btn.primary:disabled { background: var(--card-2); border-color: var(--line); color: var(--muted); opacity: 1; }
svg { display: block; }
.hidden { display: none !important; }

/* ---------- header ---------- */
header.top {
  height: var(--head-h); flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 0 12px; padding-top: env(safe-area-inset-top); border-bottom: 1px solid var(--line);
  background: rgba(15,17,23,.85); backdrop-filter: blur(8px);
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: -.01em; font-size: 17px; white-space: nowrap; }
.brand img { width: 26px; height: 26px; }
.head-mid { flex: 1; display: flex; justify-content: center; min-width: 0; }
.iconbtn { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--muted); }
.iconbtn:hover { background: var(--card); color: var(--text); }
.iconbtn svg { width: 22px; height: 22px; }

/* ---------- layout ---------- */
.shell { flex: 1; min-height: 0; display: flex; flex-direction: column; }
main { flex: 1; min-width: 0; min-height: 0; position: relative; }
.view { position: absolute; inset: 0; display: none; flex-direction: column; padding: 10px 12px; gap: 10px; min-height: 0; }
.view.on { display: flex; }
.scroll { overflow-y: auto; min-height: 0; -webkit-overflow-scrolling: touch; }
.row { display: flex; align-items: center; gap: 8px; }
.grow { flex: 1; min-width: 0; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.tiny { font-size: 11.5px; }

/* bottom tabs (phone) */
nav.tabs {
  flex: 0 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); height: calc(var(--tab-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--line); background: rgba(15,17,23,.95);
}
nav.tabs button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); font-size: 11.5px; font-weight: 600; }
nav.tabs button svg { width: 24px; height: 24px; }
nav.tabs button.on { color: var(--text); }
nav.tabs button.on svg { color: var(--warm); }
nav.tabs button.hub svg { width: 30px; height: 30px; margin: -3px 0; }

/* ---------- controls ---------- */
.btn { min-height: 44px; padding: 0 14px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--line); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: background .15s, border-color .15s; }
.btn:hover:not(:disabled) { border-color: #3d4560; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #0b1020; }
.btn.warm { background: var(--warm); border-color: var(--warm); color: #1a1205; }
.btn.danger { background: #3a1a1c; border-color: #6b2a2e; color: #ffb4ae; }
.btn.small { min-height: 34px; padding: 0 10px; font-size: 13px; border-radius: 10px; }
.btn svg { width: 18px; height: 18px; }
.seg { display: inline-flex; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px; padding: 3px; gap: 2px; }
.seg button { min-height: 34px; padding: 0 12px; border-radius: 9px; color: var(--muted); font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.seg button.on { background: var(--card-2); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.4); }
.stepper { display: inline-flex; align-items: center; gap: 4px; }
.stepper button { width: 36px; height: 36px; border-radius: 10px; background: var(--card-2); border: 1px solid var(--line); font-size: 18px; font-weight: 700; }
.stepper span { min-width: 48px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
#headMid .stepper span { min-width: 92px; }
.switch { position: relative; width: 50px; height: 30px; border-radius: 15px; background: #39405a; transition: background .2s; flex: 0 0 auto; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.switch.on { background: var(--good); }
.switch.on::after { transform: translateX(20px); }
.help { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 700; display: inline-grid; place-items: center; flex: 0 0 auto; }
.help:hover { color: var(--text); border-color: var(--muted); }
input[type=text], textarea, select { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 16px; width: 100%; }
textarea { min-height: 70px; resize: vertical; }
label.fld { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); font-weight: 600; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; }
h2.sec { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; }

/* ---------- the seat circle: the Town Square from your chair ----------
   Real game: a life token per player on the Town Square board, in seat order (parchment side up =
   alive, black side up = dead), a vote token on a dead player who still has a vote. Character tokens
   are thick round cardboard with ink art: blue for good, red for evil. Your seat is at the near edge. */
:root {
  --parch: #efe4c8; --parch-2: #dccaa0; --parch-3: #c3ab78;
  --ink-T: #1f4f93; --ink-O: #2b6a8c; --ink-M: #a3261c; --ink-D: #8c0f0f; --ink-x: #8a7a58;
  /* the cardboard edge under a token, then its shadow on the table */
  --edge: 0 1px 0 #b39d72, 0 2px 0 #8a7650, 0 3px 0 #66563a, 0 5px 9px rgba(0,0,0,.55);
  --edge-dark: 0 1px 0 #2c2c30, 0 2px 0 #1c1c1f, 0 3px 0 #0e0e10, 0 5px 9px rgba(0,0,0,.6);
}
.ringwrap { flex: 1; min-height: 0; display: grid; place-items: center; position: relative; }
.ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(100cqw, 100cqh); height: min(100cqw, 100cqh); container-type: size; }
/* the Grimoire box is not round: its tokens lie in an oval that fills the box (sizes inside the ring
   are in cqmin, so a round ring is unchanged and an oval sizes by its short side) */
.ring.oval { width: 100cqw; height: 100cqh; }
.ringbox { container-type: size; flex: 1; min-height: 160px; width: 100%; position: relative; }
/* the Town Square board: a round dark board with a gold rim and clock ticks */
.ring::before { content: ""; position: absolute; inset: 9%; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle at 50% 42%, #33251a 0%, #23180f 58%, #170f09 100%);
  border: 2px solid rgba(206,168,96,.55);
  box-shadow: inset 0 0 0 5px rgba(0,0,0,.22), inset 0 0 0 6px rgba(206,168,96,.18), inset 0 0 34px rgba(0,0,0,.65), 0 8px 22px rgba(0,0,0,.55); }
.ring::after { content: ""; position: absolute; inset: 11.5%; border-radius: 50%; z-index: -1; pointer-events: none;
  background: repeating-conic-gradient(from -1.2deg, rgba(222,186,112,.55) 0 2.4deg, transparent 2.4deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 0 88%, #000 89% 96%, transparent 97%); mask: radial-gradient(circle, transparent 0 88%, #000 89% 96%, transparent 97%); }
.tok {
  position: absolute; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 38% 30%, #fbf4e2, var(--parch) 40%, var(--parch-2) 80%, var(--parch-3) 100%);
  border: 0; color: var(--ink-x);
  transition: transform .15s ease, box-shadow .2s, opacity .2s;
  box-shadow: inset 0 0 0 1px rgba(80,55,20,.35), var(--edge);
}
.tok:active { transform: translate(-50%, -50%) scale(.95); }
.tok .ic { width: 58%; height: 58%; position: relative; }
.tok .ic svg { width: 100%; height: 100%; stroke-width: 4.2; }
/* the printed inner ring of a token */
.tok::before { content: ""; position: absolute; inset: 7%; border-radius: 50%; border: 1.5px solid currentColor; opacity: .35; pointer-events: none; }
.tok.t-T { color: var(--ink-T); } .tok.t-O { color: var(--ink-O); }
.tok.t-M { color: var(--ink-M); } .tok.t-D { color: var(--ink-D); }
/* labels scale with the circle so they stay readable on a laptop */
.tok .nm { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 5px; font-size: clamp(11.5px, 2.5cqmin, 16px); font-weight: 650; color: #f6efe0; white-space: nowrap; max-width: max(90px, 24cqmin); overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px #000, 0 0 6px #000; }
.tok .cl { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 2px; font-size: clamp(10px, 2.1cqmin, 14px); font-weight: 600; color: #e8dcc0; white-space: pre; text-align: center; line-height: 1.2; max-width: max(96px, 23cqmin); overflow: hidden; text-overflow: ellipsis; padding: 0 4px; border-radius: 6px; background: rgba(20,12,6,.72); }
.tok .badge { position: absolute; top: 72%; left: calc(100% - 10px); transform: translateY(-50%); padding: 1px .4em; border-radius: 1em; font-size: clamp(12px, 2.2cqmin, 15px); font-weight: 800; color: #0b0d12; text-align: center; box-shadow: 0 0 0 2px #1b120b, 0 2px 3px rgba(0,0,0,.6); font-variant-numeric: tabular-nums; }
.tok.me { box-shadow: inset 0 0 0 1px rgba(80,55,20,.35), 0 0 0 3px rgba(240,179,84,.85), 0 0 14px rgba(240,179,84,.35), var(--edge); }
.tok.sel { box-shadow: inset 0 0 0 1px rgba(80,55,20,.35), 0 0 0 4px rgba(110,168,254,.8), 0 0 16px rgba(110,168,254,.45), var(--edge); transform: translate(-50%, -50%) scale(1.06); }
.tok.empty .ic { opacity: .32; }
/* dead: the life token is flipped to its black side */
.tok.dead { background: radial-gradient(circle at 38% 30%, #3c3c42, #222226 45%, #131315 100%); color: #8d8d96; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), var(--edge-dark); }
.tok.dead .ic { opacity: .5; }
.tok.dead::before { border-color: #8d8d96; opacity: .25; }
.tok .shroud { position: absolute; bottom: -4px; left: -8px; width: 34%; height: 34%; min-width: 18px; min-height: 18px; color: #e9e3d4; filter: drop-shadow(0 1px 2px #000); }
.tok.dead.me { box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 0 0 3px rgba(240,179,84,.7), var(--edge-dark); }
/* 11+ seats: the claim sits on the token's lower edge (like the name printed on a real token) and the
   player's name right under it, so every label stays inside its own seat's slice of the circle */
.ring.crowd { --clf: clamp(10px, 1.95cqmin, 13px); --nmf: clamp(10.5px, 2.25cqmin, 15px); }
.ring.crowd .tok .lb { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: calc(var(--clf) * -.7); display: flex; flex-direction: column; align-items: center; pointer-events: none; z-index: 1; }
.ring.crowd .tok .lb .cl, .ring.crowd .tok .lb .nm { position: static; transform: none; margin: 0; max-width: var(--lw); }
.ring.crowd .tok .lb .cl { max-width: calc(var(--lw) * 1.3); }
.ring.crowd .tok .cl { font-size: var(--clf); line-height: 1.12; padding: 0 3px; border-radius: 5px; background: rgba(20,12,6,.85); }
.ring.crowd .tok .nm { font-size: var(--nmf); line-height: 1.12; }
/* crowded: each seat's small marks go where no neighbour's name can be. Seats down the sides (their
   neighbours above and below): the odds badge (alive) or the shroud (dead) on the outer side half way
   down, the vote token on the outer top corner, a raised hand on the inner top corner. Seats near the
   top and bottom (.vt, neighbours beside them): badge or shroud above the token, the hand on the outer
   side. Mirrored on the left half of the circle (.lft). */
/* the seat at the far right keeps its badge on the inner side, so it never runs off the screen */
.ring:not(.crowd) .tok.rgt .badge { left: auto; right: -8px; }
.ring.crowd .tok .badge { top: 50%; left: calc(100% - 7px); padding: 0 .3em; font-size: clamp(11px, 1.85cqmin, 13px); }
.ring.crowd .tok.lft .badge { left: auto; right: calc(100% - 7px); }
.ring.crowd .tok .hand { top: -10%; right: auto; left: -14%; width: 44%; min-width: 13px; }
.ring.crowd .tok.lft .hand { left: auto; right: -14%; }
.ring.crowd:not(.grim) .tok .shroud { bottom: auto; top: 50%; left: auto; right: -12px; transform: translateY(-50%); }
.ring.crowd:not(.grim) .tok.lft .shroud { right: auto; left: -12px; }
.ring.crowd .tok .ghost { bottom: auto; top: -4px; }
.ring.crowd .tok.lft .ghost { right: auto; left: -5px; }
.ring.crowd .tok.vt .badge, .ring.crowd .tok.vt.lft .badge { top: 0; left: 50%; right: auto; transform: translate(-50%, -78%); }
.ring.crowd:not(.grim) .tok.vt .shroud, .ring.crowd:not(.grim) .tok.vt.lft .shroud { top: 0; left: 50%; right: auto; transform: translate(-50%, -70%); }
.ring.crowd .tok.vt .hand { top: 28%; left: auto; right: -16%; } /* no transform: the hand pops on a yes vote */
.ring.crowd .tok.vt.lft .hand { right: auto; left: -16%; }
/* when you must pick a player, the living seats glow to say "tap me" */
.ring.picking .tok:not(.dead):not(.sel):not(.me) { animation: pickme 1.6s ease-in-out infinite; }
@keyframes pickme { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(80,55,20,.35), 0 0 0 0 rgba(110,168,254,0), var(--edge); } 50% { box-shadow: inset 0 0 0 1px rgba(80,55,20,.35), 0 0 0 4px rgba(110,168,254,.45), var(--edge); } }
.tok.sure-evil { box-shadow: inset 0 0 0 1px rgba(80,55,20,.35), 0 0 0 3px rgba(224,69,60,.85), var(--edge); }
.tok.sure-good { box-shadow: inset 0 0 0 1px rgba(80,55,20,.35), 0 0 0 3px rgba(63,178,127,.85), var(--edge); }
.tok.top { box-shadow: inset 0 0 0 1px rgba(80,55,20,.35), 0 0 0 3px rgba(224,69,60,.55), 0 0 18px rgba(224,69,60,.45), var(--edge); }
/* the vote token a dead player keeps on their life token */
.tok .ghost { position: absolute; bottom: -3px; right: -5px; width: 32%; height: 32%; min-width: 15px; min-height: 15px; border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #ffffff, #e9e6de 60%, #c9c4b6); box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.18), 0 1px 0 #9d988a, 0 2px 0 #77736a, 0 3px 4px rgba(0,0,0,.55); }
.tok .ghost::after { content: ""; position: absolute; inset: 28%; border-radius: 50%; border: 1.5px solid rgba(60,50,40,.55); }
/* a raised hand over each yes vote */
.tok .hand { position: absolute; top: -12%; right: -14%; width: 40%; min-width: 15px; aspect-ratio: 1; color: #f6efe0; filter: drop-shadow(0 1px 2px #000); }
.tok .hand svg { width: 100%; height: 100%; }
.ring .reminders.col { flex-direction: column; align-items: center; }
.ring .reminders { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: flex-start; gap: 3px; pointer-events: none; z-index: 2; }
/* reminder token: a small round parchment token with its character's symbol, the word beside it */
.rem { display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: clamp(10px, 1.9cqmin, 12px); font-weight: 700; line-height: 1.05; white-space: nowrap; color: #f1e6cc; text-shadow: 0 1px 2px #000, 0 0 4px #000; }
.rem i { width: clamp(20px, 6.4cqmin, 36px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #fbf4e2, var(--parch) 45%, var(--parch-2)); box-shadow: inset 0 0 0 1px rgba(80,55,20,.35), 0 1px 0 #8a7650, 0 2px 0 #66563a, 0 3px 4px rgba(0,0,0,.5); }
.rem i svg { width: 62%; height: 62%; stroke-width: 5; }
.rem i.c-T, .rem i.c-O { color: var(--ink-T); } .rem i.c-M, .rem i.c-D { color: var(--ink-M); }
/* the clock hand points at the player on trial */
.ring .clockhand { position: absolute; left: 50%; top: 50%; width: 2.2cqmin; height: 31%; margin-left: -1.1cqmin; transform-origin: 50% 100%; translate: 0 -100%; pointer-events: none; z-index: 0; opacity: .85; }
.ring .clockhand svg { width: 100%; height: 100%; }
/* the hand starts outside the words in the middle, so it never covers the nominee's name */
.ring .clockhand { -webkit-mask: linear-gradient(#000 52%, transparent 62%); mask: linear-gradient(#000 52%, transparent 62%); }
.center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 46%; text-align: center; pointer-events: auto; z-index: 1; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.center .lbl { font-size: clamp(11.5px, 2.3cqmin, 15px); color: #c9b48a; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.center .big { font-size: clamp(18px, 7cqmin, 52px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin: 2px 0; overflow-wrap: anywhere; color: #f6efe0; }
.center .big.c-T { color: var(--tf); } .center .big.c-D { color: #ff6a5e; }
.center .sub { font-size: clamp(12px, 2.4cqmin, 16px); color: #c9b48a; }
.center .small { font-size: clamp(13px, 2.6cqmin, 17px); }
.center .pct { font-size: clamp(14px, 4.5cqmin, 28px); font-weight: 800; }
/* night and day light the board, so the phase reads at a glance */
.ring.night::before { background: radial-gradient(circle at 50% 42%, #22283a 0%, #181b28 58%, #0f111a 100%); }
.ring.day::before { background: radial-gradient(circle at 50% 42%, #3b2b1c 0%, #2a1d12 58%, #1a110a 100%); }
/* the table under the circle */
.tbl-surface.tbl-wood-dark { --tbl-base: #3f2716; }
.tbl-surface.is-night { --tbl-base: #1e1a1c; --tbl-light: rgba(150,170,230,.10); --tbl-vig: rgba(0,0,0,.7); }
.ringbox.tbl-surface { border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.4), inset 0 2px 10px rgba(0,0,0,.45); }

/* Grimoire: the Storyteller's box, felt-lined, character tokens + shrouds + reminders */
.ringbox.grimbox { border-radius: 16px; background-color: #1d1418;
  background-image: radial-gradient(ellipse 80% 70% at 50% 45%, rgba(255,230,190,.07), transparent 70%), var(--tbl-tex); background-size: 100% 100%, 140px 140px;
  --tbl-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .45 -.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  border: 7px solid #2a1c12; box-shadow: inset 0 0 0 1px #6b4e2c, inset 0 0 24px rgba(0,0,0,.7), 0 0 0 1px #000, 0 4px 14px rgba(0,0,0,.5); }
.ring.grim::before, .ring.grim::after { display: none; }
.ring.grim .tok.dead { background: radial-gradient(circle at 38% 30%, #fbf4e2, var(--parch) 40%, var(--parch-2) 80%, var(--parch-3) 100%); box-shadow: inset 0 0 0 1px rgba(80,55,20,.35), var(--edge); }
.ring.grim .tok.dead .ic { opacity: .55; }
/* the shroud token laid over a dead character */
.ring.grim .tok .shroud { left: 50%; top: 2%; bottom: auto; width: 54%; height: 66%; min-width: 0; min-height: 0; margin-left: -28%; display: grid; place-items: start center; padding-top: 14%; color: #d9d2c0;
  background: linear-gradient(#2b2b30, #0d0d10); clip-path: polygon(0 0, 100% 0, 100% 82%, 75% 100%, 50% 84%, 25% 100%, 0 82%); filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
.ring.grim .tok .shroud svg { width: 62%; height: auto; }
.ring.grim .center { width: 34%; }
.bluffs { display: flex; justify-content: center; gap: 6%; margin-top: 4px; }
.bluffs .bt { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 30%; font-size: clamp(9.5px, 1.9cqmin, 13px); color: #e8dcc0; line-height: 1.15; }
.bluffs .bt .ctok { width: min(11cqmin, 100%); }

/* ---------- lists ---------- */
.list { display: flex; flex-direction: column; gap: 2px; }
.li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; background: var(--card); border: 1px solid transparent; }
.li .ic { width: 26px; height: 26px; flex: 0 0 auto; }
.li .ttl { font-weight: 650; }
.li .x { width: 34px; height: 34px; border-radius: 10px; color: var(--muted); display: grid; place-items: center; flex: 0 0 auto; }
.li .x:hover { background: var(--card-2); color: var(--text); }
.phase-h { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--warm); font-weight: 800; margin: 10px 2px 4px; }
.c-T { color: var(--tf); } .c-O { color: var(--out); } .c-M { color: var(--min); } .c-D { color: var(--dem); }

/* odds table */
.orow { display: grid; grid-template-columns: 28px minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 8px; padding: 7px 8px; border-bottom: 1px solid rgba(42,48,66,.6); }
.orow .ic { width: 24px; height: 24px; }
/* thin track, number beside it: small odds read as a short line, not a blob */
.bar { position: relative; height: 22px; padding-right: 40px; }
.bar::before { content: ""; position: absolute; left: 0; right: 40px; top: 7px; height: 8px; border-radius: 4px; background: #232838; }
.bar i { position: absolute; left: 0; top: 7px; height: 8px; max-width: calc(100% - 40px); border-radius: 4px; transition: width .35s ease; }
.bar b { position: absolute; right: 0; top: 0; width: 38px; text-align: right; line-height: 22px; font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ohead { display: grid; grid-template-columns: 28px minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 0 8px 4px; font-size: 11.5px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--line); }
.team { padding: 8px 10px; border-radius: 10px; background: var(--card); display: flex; gap: 10px; align-items: center; }
.team .p { font-weight: 800; min-width: 38px; text-align: right; font-variant-numeric: tabular-nums; }

/* chips for picking players / roles */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { min-height: 36px; padding: 0 11px; border-radius: 18px; background: var(--bg-soft); border: 1px solid var(--line); font-size: 13.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.chip.on { background: rgba(110,168,254,.18); border-color: var(--accent); color: #dce8ff; }
.chip.dead { color: var(--muted); text-decoration: line-through; }
.chip .ic { width: 18px; height: 18px; }
.rolegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.rolebtn { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; border-radius: 12px; background: var(--bg-soft); border: 1px solid var(--line); font-size: 11.5px; font-weight: 600; text-align: center; min-height: 72px; }
.rolebtn .ic { width: 30px; height: 30px; }
.rolebtn.on { border-color: var(--warm); background: rgba(240,179,84,.12); }
.rolebtn.used { opacity: .45; }

/* ---------- sheet ---------- */
.sheet-wrap { position: fixed; inset: 0; z-index: 50; background: rgba(5,6,10,.72); display: flex; align-items: flex-end; justify-content: center; animation: fadeo .18s ease; }
@keyframes fadeo { from { opacity: 0; } to { opacity: 1; } }
.sheet { width: 100%; max-height: 88dvh; background: var(--card); border: 1px solid var(--line); border-radius: 18px 18px 0 0; display: flex; flex-direction: column; animation: up .22s cubic-bezier(.2,.8,.2,1); padding-bottom: env(safe-area-inset-bottom); }
@keyframes up { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
.sheet .sh-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 8px; border-bottom: 1px solid var(--line); }
.sheet .sh-head h3 { margin: 0; font-size: 17px; flex: 1; min-width: 0; }
.sheet .sh-body { padding: 12px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; min-height: 0; }
.sheet .sh-foot { display: flex; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--line); }
.sheet .sh-foot .btn { flex: 1; }

.toast { position: fixed; left: 50%; bottom: calc(var(--tab-h) + 16px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; background: #262c40; border: 1px solid #3d4560; border-radius: 12px; padding: 8px 8px 8px 14px; display: flex; align-items: center; gap: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.5); max-width: calc(100vw - 32px); font-size: 14px; animation: up .2s ease; }
.toast button { color: var(--warm); font-weight: 700; padding: 6px 10px; }

/* ---------- town ---------- */
.townbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: nowrap; }
.actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; flex: 0 0 auto; }
.banner { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: linear-gradient(90deg, rgba(240,179,84,.16), rgba(240,179,84,.04)); border: 1px solid rgba(240,179,84,.35); font-size: 13.5px; }
.banner.evil { background: linear-gradient(90deg, rgba(224,69,60,.18), rgba(224,69,60,.04)); border-color: rgba(224,69,60,.4); }
.banner.good { background: linear-gradient(90deg, rgba(110,168,254,.18), rgba(110,168,254,.04)); border-color: rgba(110,168,254,.4); }
.split { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; }
.ringcol { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; }
.side { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.playside { flex: 0 0 auto; max-height: 36%; }
.playside .feed { flex: 1; }

/* ---------- play ---------- */
.rolecard { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.rolecard .ic { width: 38px; height: 38px; flex: 0 0 auto; }
.rolecard .ttl { font-weight: 800; font-size: 15px; }
.rolecard .ab { font-size: 12px; color: var(--muted); line-height: 1.3; }
.feed { display: flex; flex-direction: column; gap: 4px; font-size: 13px; padding-top: 6px; -webkit-mask-image: linear-gradient(transparent, #000 16px); mask-image: linear-gradient(transparent, #000 16px); }
.feed .f { padding: 5px 8px; border-radius: 8px; background: var(--card); }
.feed .f.priv { background: rgba(240,179,84,.1); border: 1px solid rgba(240,179,84,.25); }
.feed .f.sys { background: transparent; color: var(--warm); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; padding-top: 8px; }
.actbar { display: flex; gap: 8px; flex-wrap: wrap; flex: 0 0 auto; }
.actbar .btn { flex: 1 1 0; min-width: 0; }
.votebox { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: var(--card); border: 1px solid var(--accent); }
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: blink 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: .2s; } .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.hist { display: flex; gap: 6px; align-items: flex-end; height: 60px; }
.hist div { flex: 1; border-radius: 4px 4px 0 0; min-height: 3px; position: relative; }
.hist div span { position: absolute; bottom: 100%; left: 0; right: 0; text-align: center; font-size: 10.5px; font-weight: 700; }

/* night order */
.step { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; background: var(--card); }
.step .num { width: 22px; text-align: right; font-weight: 800; color: var(--muted); flex: 0 0 auto; padding-top: 4px; }
.step .ic { width: 28px; height: 28px; flex: 0 0 auto; }

.count-chip { white-space: nowrap; padding: 4px 9px; border-radius: 9px; font-size: 12.5px; font-weight: 700; background: var(--bg-soft); border: 1px solid var(--line); }
.count-chip.ok { border-color: rgba(63,178,127,.6); color: #8fe0bb; }
.count-chip.bad { border-color: rgba(224,69,60,.6); color: #ffb4ae; }

/* ---------- Play: your place at the table ---------- */
/* a character token (thick parchment cardboard, ink symbol in team colour) */
.ctok { display: grid; place-items: center; flex: 0 0 auto; aspect-ratio: 1; border-radius: 50%; position: relative; color: var(--ink-x);
  background: radial-gradient(circle at 38% 30%, #fbf4e2, var(--parch) 40%, var(--parch-2) 80%, var(--parch-3) 100%);
  box-shadow: inset 0 0 0 1px rgba(80,55,20,.35), var(--edge); }
.ctok::before { content: ""; position: absolute; inset: 7%; border-radius: 50%; border: 1.5px solid currentColor; opacity: .35; }
.ctok .ic { width: 60%; height: 60%; }
.ctok .ic svg { width: 100%; height: 100%; stroke-width: 4.4; }
.ctok.t-T { color: var(--ink-T); } .ctok.t-O { color: var(--ink-O); } .ctok.t-M { color: var(--ink-M); } .ctok.t-D { color: var(--ink-D); }
/* your character sheet: cream paper on the table in front of you, your token on it */
#v-play .rolecard { background: linear-gradient(180deg, #f1e7cf, #e4d7b8); border: 0; border-radius: 4px; color: #2a2118; padding: 8px 10px 8px 8px;
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 2px 3px rgba(0,0,0,.35), 0 8px 18px rgba(0,0,0,.35); }
#v-play .rolecard .ctok { width: 48px; }
#v-play .rolecard .ttl { color: #1f1710; }
#v-play .rolecard .ab { color: #4c3f2e; }
#v-play .rolecard .evilteam { color: #9a2219; }
/* the log is your paper notes: a cream pad with a margin line */
#v-play .feed { background: linear-gradient(90deg, transparent 24px, rgba(176,58,46,.32) 24px 25px, transparent 25px), linear-gradient(180deg, #ece2c9, #e3d6b6);
  background-attachment: local; border-radius: 4px; padding: 10px 6px 6px 30px; gap: 0; color: #2b2218;
  box-shadow: 0 2px 3px rgba(0,0,0,.35), 0 8px 18px rgba(0,0,0,.35);
  -webkit-mask-image: none; mask-image: none; }
#v-play .feed .f { background: none; border-radius: 0; padding: 4px 2px; border-bottom: 1px solid rgba(60,90,140,.16); }
#v-play .feed .f.priv { background: linear-gradient(transparent 12%, rgba(242,200,70,.45) 12% 88%, transparent 88%); border: 0; border-bottom: 1px solid rgba(60,90,140,.16); }
#v-play .feed .f.sys { color: #9a2219; border-bottom: 0; padding-top: 8px; }
/* the Storyteller's prompts sit on the table as dark leather boxes */
#v-play .votebox { background: rgba(24,16,10,.82); border-color: rgba(206,168,96,.6); box-shadow: 0 4px 12px rgba(0,0,0,.4); }
#v-play .actbar .btn:not(.warm):not(.primary), #v-play .votebox .btn:not(.warm):not(.primary) { background: rgba(30,22,16,.86); border-color: rgba(206,168,96,.35); }
/* the setup and lobby panels: a dark card lying on the table */
#v-play .panel { background: rgba(22,16,12,.88); border-color: rgba(206,168,96,.3); box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.tbl-surface.is-night .rolecard, .tbl-surface.is-night .feed { filter: brightness(.86) saturate(.9); }
/* token flip (life token turned to its black side) */
@keyframes tokflip { 0% { transform: translate(-50%, -50%) rotateY(180deg); } 100% { transform: translate(-50%, -50%) rotateY(0); } }
.tok.flipping { animation: tokflip .55s cubic-bezier(.3,.7,.3,1); }
#v-play .rolecard .ctok .ic { width: 60%; height: 60%; }
@media (min-width: 900px) { #v-play .rolecard .ctok { width: 58px; } }
#v-play .rolecard { cursor: pointer; }
.grimcol { display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 360px; }
.grimhint { text-align: center; }
/* The circle is the game, so it gets the room first.
   Phone: one column: the circle as wide as the screen, then your sheet as a slim strip (tap it to read
   all of it), the Storyteller's prompt and your notes (which take whatever height is left).
   Laptop and phone sideways: the circle fills the height on the left; sheet, prompt and notes beside it. */
#v-play, #v-town { container-type: size; }
@media (max-width: 899px) {
  #v-play .split { gap: 6px; }
  #v-play .split > .ringcol, #v-play .split > .playside { display: contents; }
  #v-play .ringbox { flex: 0 1 auto; aspect-ratio: 1; min-height: 150px; }
  #v-play #pCard, #v-play .votebox, #v-play .actbar, #v-play .banner, #v-play .hist { flex: 0 0 auto; }
  #v-play .feed { flex: 1 0 64px; min-height: 64px; padding-top: 4px; }
  #v-play .rolecard { padding: 4px 8px 4px 6px; gap: 8px; }
  #v-play .rolecard .ctok { width: 36px; }
  #v-play .rolecard .ttl { font-size: 14px; line-height: 1.2; }
  #v-play .rolecard .ab, #v-play .rolecard .evilteam { font-size: 11.5px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #v-play .rolecard::after { content: '\203A'; margin-left: auto; padding: 0 2px 2px 4px; font-size: 24px; line-height: 1; color: #6b5a42; }
  #v-play .votebox { padding: 6px 8px 6px 10px; }
}
@media (max-width: 899px) and (orientation: landscape) and (max-height: 520px) {
  #v-play .split, #v-town .split { display: grid; grid-template-columns: minmax(0, min(100cqh, 58cqw)) minmax(0, 1fr); gap: 8px 10px; }
  #v-play .split { grid-template-rows: minmax(0, 1fr); }
  #v-play .split > .ringcol, #v-play .split > .playside { display: flex; min-width: 0; }
  #v-play .ringbox { flex: 1; aspect-ratio: auto; min-height: 0; }
  #v-play .playside { max-height: none; gap: 6px; }
  #v-play .feed { flex: 1 1 0; min-height: 40px; }
  /* Town sideways: circle left, the buttons and the log right (no Circle/Log switch needed) */
  #v-town .townbar { display: none; }
  #v-town .split { grid-template-rows: auto minmax(0, 1fr); }
  #v-town .split > .ringcol { display: contents; }
  #v-town .split > .nb-log { display: flex; grid-column: 2; grid-row: 2; }
  #v-town .ringbox { grid-column: 1; grid-row: 1 / 3; min-height: 0; }
  #v-town .actions { grid-column: 2; grid-row: 1; }
  /* Grimoire sideways: the box fits the screen, no hint line */
  .grimcol { min-height: 0; }
  .grimhint { display: none; }
  /* Storyteller sideways: Setup / Night / Grimoire stacked on the left so the box gets the full height */
  #v-st.on { flex-direction: row; }
  #v-st > .row { flex-direction: column; align-items: stretch; }
  #v-st > .row .seg { flex-direction: column; }
  #v-st > .split { min-width: 0; }
}
@media (min-width: 900px) {
  #v-play .rolecard .ctok { width: 58px; }
  #v-play .split, #v-town .split { display: grid; grid-template-columns: minmax(0, min(100cqh, calc(100cqw - 356px))) minmax(340px, 1fr); gap: 12px 16px; }
  #v-play .split { grid-template-rows: minmax(0, 1fr); }
  #v-play .split > .side, #v-town .split > .side { max-width: none; }
  #v-town .split { grid-template-rows: auto minmax(0, 1fr); }
  #v-town .split > .ringcol { display: contents; }
  #v-town .ringbox { grid-column: 1; grid-row: 1 / 3; }
  #v-town .actions { grid-column: 2; grid-row: 1; }
  #v-town .split > .nb-log { grid-column: 2; grid-row: 2; }
  /* Grimoire: the night sheet beside the box takes less, the box more */
  #v-st .split > .side { flex: 0 0 360px; }
}
@media (max-width: 899px) and (max-height: 600px) and (orientation: portrait) {
  #v-play .feed { flex-basis: 48px; min-height: 48px; }
}

/* ---------- laptop ---------- */
@media (min-width: 900px) {
  :root { --head-h: 56px; }
  .shell { flex-direction: row; }
  nav.tabs { order: -1; width: 200px; height: auto; grid-template-columns: 1fr; grid-auto-rows: 52px; align-content: start; padding: 12px 10px; gap: 4px; border-top: 0; border-right: 1px solid var(--line); background: transparent; }
  nav.tabs button { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 0 12px; border-radius: 12px; font-size: 14.5px; }
  nav.tabs button.on { background: var(--card); }
  nav.tabs button.hub svg { width: 24px; height: 24px; }
  .view { padding: 16px 20px; }
  .split { flex-direction: row; }
  .split > .ringcol { flex: 1.25; min-width: 0; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
  .split > .side { flex: 1; max-width: 460px; }
  .sheet-wrap { align-items: center; }
  .sheet { width: 470px; border-radius: 18px; max-height: 86vh; }
  .toast { bottom: 24px; }
  .rolecard { padding: 10px 14px; }
  .rolecard .ic { width: 44px; height: 44px; }
  .rolecard .ttl { font-size: 17px; }
  .rolecard .ab { font-size: 13.5px; }
  .feed { font-size: 14px; }
  .feed .f { padding: 7px 10px; }
  .orow { padding: 10px 8px; }
  .oddsgrid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; min-height: 0; flex: 1; }
  .rolesgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
  .phone-only, .phone-only-row { display: none !important; }
  .playside { flex: 1; max-height: none; }
}
@media (max-width: 899px) {
  .split.show-log > .ringcol { display: none; }
  .split.show-circle > .nb-log { display: none; }
  .split.show-log > .nb-log { flex: 1; }
  .oddsgrid { display: flex; flex-direction: column; gap: 12px; min-height: 0; flex: 1; }
  .oddsgrid > .scroll:first-child { flex: 1.6 1 0; }
  .oddsgrid > .scroll.side { flex: 1 1 0; }
  .orow { padding: 5px 6px; }
  .orow .tiny { font-size: 11px; }
  .phone-hide { display: none !important; }
  .rolegrid { grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); }
  .rolebtn { min-height: 64px; padding: 7px 3px; font-size: 11px; }
  .rolebtn .ic { width: 26px; height: 26px; }
  .count-chip { padding: 3px 7px; font-size: 12px; }
}
@media (max-width: 380px) { .seg button { padding: 0 9px; } }

/* ---------- Sound & effects (rows from js/fx.js, made to match the rows above) ---------- */
.fx-set { display: flex; flex-direction: column; gap: 14px; }
.fx-set .fx-row { border-top: 0; padding: 0; min-height: 30px; gap: 8px; }
.fx-set .fx-row.dim { opacity: .45; }
.fx-set .switch { width: 50px; height: 30px; }
.fx-set .switch span { display: none; }
.fx-set .seg { display: inline-flex; }
.fx-set .seg button { min-height: 34px; padding: 0 12px; }
.fx-set .seg button[aria-pressed="true"] { background: var(--card-2); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.4); }
.fx-set .q { width: 22px; height: 22px; font-size: 12px; }
.fx-set .fx-test { min-height: 34px; border-radius: 10px; background: var(--card-2); }
.fx-set .fx-why { padding: 0; margin-top: -8px; }

/* ---------- paper: the Storyteller's night sheet and the town notebook's log ---------- */
#v-st .step { background: linear-gradient(180deg, #efe5cc, #e5d8b9); color: #2a2118; border-radius: 3px; box-shadow: 0 1px 2px rgba(0,0,0,.35); }
#v-st .step .muted, #v-st .step .num { color: #5a4b37; }
#v-st .step .ic.c-T, #v-st .step .ic.c-O { color: var(--ink-T); } #v-st .step .ic.c-M, #v-st .step .ic.c-D { color: var(--ink-M); }
#v-town .nb-log > .scroll { background: linear-gradient(90deg, transparent 24px, rgba(176,58,46,.32) 24px 25px, transparent 25px), linear-gradient(180deg, #ece2c9, #e3d6b6);
  background-attachment: local; border-radius: 4px; padding: 4px 4px 4px 30px; color: #2b2218; box-shadow: 0 2px 3px rgba(0,0,0,.35); }
#v-town .nb-log .list { gap: 0; }
#v-town .nb-log .li { background: none; border-radius: 0; border: 0; border-bottom: 1px solid rgba(60,90,140,.16); padding: 6px 2px; }
#v-town .nb-log .muted { color: #5a4b37; }
#v-town .nb-log .phase-h { color: #9a2219; }
#v-town .nb-log .li .x { color: #6b5a42; }
#v-town .nb-log .li .x:hover { background: rgba(0,0,0,.08); color: #2b2218; }
#v-town .nb-log .ic.c-T, #v-town .nb-log .ic.c-O { color: var(--ink-T); } #v-town .nb-log .ic.c-M, #v-town .nb-log .ic.c-D { color: var(--ink-M); }