/* Bunker Online — the shipped client ("command console" with tabletop grafts).
   Mobile-first. Dark near-black with hazard yellow, mono type for labels/data, sans for content,
   cream "paper" for everything that is public (revealed cards, the ballot), dark hazard backs for what is hidden. */

:root {
  --bg: #0a0a08;
  --bg-2: #0e0e0b;
  --panel: #121210;
  --panel-2: #171713;
  --raise: #1e1d18;
  --raise-2: #26251e;
  --line: #2a2922;
  --line-2: #3a382d;
  --text: #ece7d6;
  --text-2: #bdb7a3;
  --dim: #8d8876;
  --faint: #6c685a;
  --hz: #f5c518;
  --hz-2: #ffd84a;
  --hz-ink: #141100;
  --hz-soft: rgba(245, 197, 24, .10);
  --hz-line: rgba(245, 197, 24, .45);
  --red: #ff5d4f;
  --red-2: #ff8a80;
  --red-soft: rgba(255, 93, 79, .11);
  --orange: #ff9f43;
  --green: #8fd694;
  --cyan: #6fd0d8;
  --violet: #b9a2ff;
  --paper: #e4d9bd;
  --paper-2: #d3c5a2;
  --paper-hi: #efe6ce;
  --paper-ink: #1d1a13;
  --paper-mut: #675c46;
  --paper-edge: #b3a47f;
  --paper-grad: linear-gradient(180deg, var(--paper-hi), var(--paper) 42%, var(--paper-2));
  --back: repeating-linear-gradient(-45deg, #1f1d16 0 5px, #141410 5px 10px);
  --mono: "JetBrains Mono", "JetBrainsMono Nerd Font", "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, "Noto Sans Mono", "DejaVu Sans Mono", "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --display: "Bahnschrift", "DIN Condensed", "Oswald", "Roboto Condensed", "Arial Narrow", Impact, "Liberation Sans Narrow", sans-serif;
  --hazard: repeating-linear-gradient(-45deg, var(--hz) 0 10px, #0b0b09 10px 20px);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
/* SPEC §11 X7: no `vh` here. On iOS Safari `100vh` is the LARGE viewport (toolbar retracted), so a body that tall is
   taller than the screen whenever the toolbar shows: the page itself could then scroll, and scrolling it (a
   scrollIntoView, a drag on the header or the bar) slid the whole app shell up and left an empty band under the bar.
   Every screen sizes itself with the dynamic viewport (.shell, .screen). */
body {
  background: radial-gradient(ellipse 120% 60% at 50% -10%, #17160f 0%, var(--bg) 60%) fixed, var(--bg);
  color: var(--text);
  font: 14px/1.4 var(--sans);
  overflow-x: hidden;
}
/* subtle CRT scanlines, never intercepting clicks */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 3px);
}
button, input { font: inherit; color: inherit; }
b, strong { font-weight: 700; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
.mono { font-family: var(--mono); }
.fine { font-size: 12px; color: var(--dim); line-height: 1.45; }
.pad { padding: 8px 12px 12px; }
.row { display: flex; align-items: center; flex-wrap: wrap; }
.gap { gap: 8px; }
.grow { flex: 1; }
.k {
  font: 700 9.5px/1.15 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--dim);
}
.k.sub { margin: 10px 0 6px; }
:focus-visible { outline: 2px solid var(--hz); outline-offset: 2px; }
/* a card or alert row that only holds the focus for a moment (a sheet just closed, its button is still held) */
[data-focus-park]:focus { outline: none; }
.ico { width: 14px; height: 14px; flex: none; display: inline-block; vertical-align: middle; }
.trefoil { color: var(--hz); flex: none; display: inline-block; }

/* ------------------------------------------------------------ buttons */
.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font: 700 12px/1.1 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text);
  background: var(--raise);
  border: 1px solid var(--line-2);
  border-radius: 3px;
  padding: 10px 14px;
  min-height: 40px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .12s, background-color .12s, color .12s, opacity .12s;
  -webkit-tap-highlight-color: transparent;
}
.btn.primary { background: var(--hz); color: var(--hz-ink); border-color: var(--hz); }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--red-2); border-color: rgba(255, 93, 79, .38); }
.btn.ok { background: #18261a; color: var(--green); border-color: rgba(143, 214, 148, .5); }
.btn[disabled] { opacity: .36; cursor: not-allowed; }
.btn.sm { min-height: 32px; padding: 6px 11px; font-size: 11px; }
.btn.xs { min-height: 24px; padding: 3px 7px; font-size: 9.5px; letter-spacing: .06em; }
.btn.block { width: 100%; }
.btn.big { min-height: 50px; font-size: 13.5px; }
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  background: transparent;
  color: var(--dim);
  cursor: pointer;
  flex: none;
  -webkit-tap-highlight-color: transparent;
}
.icon-btn .ico { width: 12px; height: 12px; }
.icon-btn[disabled] { opacity: .35; cursor: not-allowed; }
.hostx { display: inline-flex; gap: 4px; margin-left: auto; flex: none; }

/* ------------------------------------------------------------ tags, dots, chips, stamps */
.tag {
  display: inline-flex;
  align-items: center;
  font: 700 9px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 5px 2px;
  border-radius: 2px;
  border: 1px solid var(--line-2);
  color: var(--text-2);
  white-space: nowrap;
}
.tag-speak { background: var(--hz); color: var(--hz-ink); border-color: var(--hz); }
.tag-next { color: var(--hz); border-color: var(--hz-line); }
.tag-you { background: var(--text); color: #111; border-color: var(--text); }
.tag-host { color: var(--hz); border-color: var(--hz-line); background: var(--hz-soft); }
.tag-out { color: var(--red-2); border-color: rgba(255, 93, 79, .5); background: var(--red-soft); }
.tag-left { color: var(--faint); border-style: dashed; }
.tag-off { color: var(--dim); border-style: dashed; }
.tag-immune { color: var(--cyan); border-color: rgba(111, 208, 216, .5); background: rgba(111, 208, 216, .08); }
.tag-blocked { color: var(--orange); border-color: rgba(255, 159, 67, .5); background: rgba(255, 159, 67, .08); }
.tag-double { color: var(--violet); border-color: rgba(185, 162, 255, .5); background: rgba(185, 162, 255, .08); }
.tag-voted { color: var(--green); border-color: rgba(143, 214, 148, .45); }
.tag-voting { color: var(--dim); border-style: dashed; }
.tag-myvote { background: #c9372c; color: #fff; border-color: #c9372c; }
.tag-tie { color: var(--orange); border-color: rgba(255, 159, 67, .5); margin-left: 6px; }
.stamp-tag {
  display: inline-block;
  font: 400 11px/1 var(--display);
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 3px 6px 2px;
  border: 2px solid currentColor;
  border-radius: 3px;
  transform: rotate(-5deg);
  white-space: nowrap;
  pointer-events: none;
}
.stamp-tag.red { color: #ff6b66; background: rgba(40, 10, 9, .9); }
.stamp-tag.grey { color: #aaa491; background: rgba(20, 20, 18, .9); }
.stamp-tag.slam { animation: stamp .5s cubic-bezier(.2, .9, .3, 1.3) both; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
.dot.on { background: var(--green); box-shadow: 0 0 0 2px rgba(143, 214, 148, .14); }
.dot.off { border: 1.5px solid var(--dim); background: transparent; }
.dot.gone { background: var(--faint); }
.chips { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin-top: 6px; }
.chip {
  font-size: 12.5px;
  padding: 3px 8px;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  background: var(--raise);
  overflow-wrap: anywhere;
}
.chip.good { color: var(--green); border-color: rgba(143, 214, 148, .45); background: rgba(143, 214, 148, .07); }
.chip.bad { color: var(--red-2); border-color: rgba(255, 93, 79, .4); background: var(--red-soft); }
.chip-sub { opacity: .75; font-size: 11px; }
.callout {
  font-size: 13px;
  line-height: 1.45;
  padding: 9px 12px;
  border-left: 3px solid var(--line-2);
  background: var(--panel-2);
  border-radius: 0 3px 3px 0;
}
.callout.info { border-left-color: var(--hz-line); }
.callout.warn { border-left-color: var(--orange); background: rgba(255, 159, 67, .07); }
.callout.hz { border-left-color: var(--hz); background: var(--hz-soft); color: var(--text); font-weight: 600; }
.panel .callout { margin: 10px 12px 0; }
.new-tag {
  position: absolute;
  right: 4px;
  top: -6px;
  font: 800 8.5px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  background: #15130e;
  color: var(--hz);
  padding: 2px 4px;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .6);
  pointer-events: none;
}

/* ------------------------------------------------------------ hazard sign + strips */
.hz-sign {
  position: relative;
  display: inline-block;
  width: 22px;
  height: 20px;
  flex: none;
  background: var(--hz);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.hz-sign span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1px;
  text-align: center;
  font: 900 12px/1 var(--mono);
  color: var(--hz-ink);
}
.hz-sign.sm { width: 18px; height: 16px; }
.hz-sign.sm span { font-size: 10px; bottom: 0; }
.hz-strip { height: 6px; background: var(--hazard); flex: none; }

/* ------------------------------------------------------------ panels */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  min-width: 0;
}
.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 10px 12px 9px;
  border-bottom: 1px solid var(--line);
}
.panel-head h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 700 11.5px/1.2 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text);
}
.panel-head h2::before { content: ""; width: 7px; height: 7px; background: var(--hz); flex: none; }
.meta { font: 11px/1.3 var(--mono); color: var(--dim); }

/* ------------------------------------------------------------ shell (mobile first) */
/* An app shell at every width: the header, ONE scrolling middle, the action bar. Nothing ever scrolls under the
   header or the bar, so a control scrolled into view (by a finger, the keyboard or a test) is always tappable.
   Nothing may widen the page either, not even an animation (the EJECTED stamp slams in at 2x): on a phone a wider
   page makes the browser zoom out and push the bar below the layout viewport. */
.shell { height: 100vh; height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); overflow: clip; }
/* while an app shell is on screen the page itself never scrolls or rubber-bands (app.js also pins it back to 0) */
html.app-shell { overflow: hidden; overscroll-behavior: none; }
html.app-shell body { overscroll-behavior: none; }
.top { position: relative; z-index: 40; }
.body { display: flex; flex-direction: column; gap: 12px; padding: 12px; min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scroll-padding-top: calc(var(--toast-h, 0px) + 8px); scroll-padding-bottom: 8px; }
.main-col, .side-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.main-col > *, .side-col > * { flex-shrink: 0; }
.strips { display: grid; gap: 12px; min-width: 0; }
.strips:empty { display: none; }
/* Narrow screens: one column, ordered for a player — what is happening, my hand, then the table. */
@media (max-width: 1179px) {
  .shell.game .main-col, .shell.game .side-col { display: contents; }
  .shell.game .body > * , .shell.game .main-col > *, .shell.game .side-col > * { flex-shrink: 0; min-width: 0; }
  .final-banner { order: 0; }
  .role-banner { order: 1; }
  .strips { order: 2; }
  .stakes { order: 3; }
  .vote-panel { order: 4; }
  .turn-order { order: 5; }
  .intel { order: 6; }
  .hand { order: 7; }
  .specials-panel { order: 8; }
  .board-panel { order: 9; }
  .watcher { order: 10; }
  .log-panel { order: 11; }
  .spectators { order: 12; }
  .is-final .intel, .is-final .hand, .is-final .specials-panel { order: 10; }
}

/* ------------------------------------------------------------ header */
.hdr { position: relative; background: #0c0c0a; border-bottom: 1px solid var(--line); }
.hdr::before { content: ""; display: block; height: 3px; background: var(--hazard); }
.hdr-row { display: flex; flex-wrap: wrap; align-items: stretch; padding: 0 6px; }
.hdr-brand { display: none; align-items: center; gap: 8px; padding: 0 12px 0 4px; }
.hb-logo { width: 20px; height: 20px; }
.hb-word { font: 800 14px/1 var(--mono); letter-spacing: .22em; color: var(--hz); }
.hcell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 7px 8px;
  min-width: 0;
}
.hcell .v { font: 700 14px/1.15 var(--mono); color: var(--text); white-space: nowrap; }
.hcell .v.code { color: var(--hz); letter-spacing: .12em; }
.phase-cell .v { color: var(--hz); }
/* a long phase name that would wrap the header's last buttons gives way (app.js fitHeader sets the size) */
.phase-cell .v.squeezed { display: block; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.02em; }
.ph-vote.phase-cell .v, .ph-defense.phase-cell .v { color: var(--red-2); }
.ph-final.phase-cell .v { color: var(--green); }
.round-cell.ot .v { color: var(--orange); }
.beds-cell .beds { color: var(--hz); }
.beds-cell .sep { color: var(--faint); }
.over-chip {
  display: none;
  margin-left: 8px;
  font: 700 9.5px/1 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--red-2);
  border: 1px solid rgba(255, 93, 79, .5);
  background: var(--red-soft);
  padding: 3px 5px 2px;
  border-radius: 2px;
  vertical-align: 2px;
}
.hdr-spacer { flex: 1 1 0; }
.hdr-break { flex-basis: 100%; height: 0; order: 19; border-top: 1px solid var(--line); margin: 0 -6px; }
.timer-cell {
  order: 20;
  flex: 1 1 auto;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 8px 3px 4px;
}
.timer-cell .k { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timer-cell .v { font-size: 18px; font-variant-numeric: tabular-nums; }
.timer-cell.low .v { color: var(--hz); }
.timer-cell.over .v { color: var(--red); }
/* the clock's row: the clock and, once it has run out, "time's up" (hdr.timeUp) beside it, in the label's type and red.
   Outside the label, which ellipsizes a long name ("Konstantin's turn"): the tag stays whole */
.timer-cell .tv { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.timer-cell .over-tag { display: none; font: 700 9.5px/1.15 var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; color: var(--red); }
.timer-cell.over .over-tag { display: inline; }
/* phones: the cell is 64–104 px wide, too narrow for the tag; the red 0:00 says it alone */
@media (max-width: 639px) { .timer-cell.over .over-tag { display: none; } }
.you-cell { display: none; }
.you-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.leave { order: 18; align-self: center; margin: 0 0 0 auto; min-height: 40px; padding: 5px 10px; font-size: 10.5px; }
.round-track.hdr-track, .wide-only { display: none; }
.hcell .v.red { color: var(--red-2); }
.hcell .v.ok { color: var(--green); }
.hcell .v.dim { color: var(--dim); }
.hdr-progress { height: 2px; background: #1c1b16; overflow: hidden; }
.hdr-progress-fill { height: 100%; background: var(--hz); transform-origin: left center; transform: scaleX(1); }
.conn-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  padding: 8px 14px;
  font-size: 13px;
  background: #2a1210;
  color: #ffd0cb;
  border-bottom: 1px solid rgba(255, 93, 79, .5);
}
.conn-banner .btn { margin-left: auto; }
.conn-pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--red); flex: none; animation: pulse 1.4s ease-in-out infinite; }
.jump {
  order: 21;
  display: flex;
  gap: 4px;
  padding: 4px 0;
  margin-left: auto;
  flex: none;
}
.jump-btn {
  flex: none;
  min-height: 40px;
  min-width: 42px;
  font: 700 10px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 0 8px;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ------------------------------------------------------------ round track + stakes */
.round-track { display: flex; gap: 3px; list-style: none; }
.rt {
  width: 30px;
  text-align: center;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  padding: 3px 0 2px;
  background: #121210;
}
.rt-n { display: block; font: 700 11px/1.1 var(--mono); }
.rt-k { display: block; font: 700 9px/1.2 var(--mono); color: var(--faint); }
.rt-vote .rt-k { color: var(--red-2); }
.rt-past { opacity: .42; }
.rt-now { border-color: var(--hz); background: var(--hz-soft); box-shadow: inset 0 0 0 1px var(--hz); }
.rt-now .rt-n { color: var(--hz); }
.round-track.wide .rt { flex: 1; width: auto; padding: 6px 0 5px; }
.stakes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
}
.stakes-nums { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.kv { display: flex; flex-direction: column; gap: 2px; }
.kv .v { font: 700 15px/1.1 var(--mono); }
.kv.big .v { font-size: 24px; }
.kv.hz .v { color: var(--hz); }
.kv.red .v { color: var(--red-2); }
.kv.ok .v { color: var(--green); }
.stakes-vote { flex: 1 1 220px; font-size: 12.5px; color: var(--text-2); }

/* ------------------------------------------------------------ situation */
.sit-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  background: none;
  border: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.sit-sum { flex: 1; min-width: 0; font-size: 13px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sit-sum-cat { color: var(--hz); font-weight: 700; }
.sit-toggle { flex: none; font-size: 10.5px; color: var(--dim); letter-spacing: .06em; }
.sit-grid { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line); }
.situation.rail .sit-grid { border-top: 0; grid-template-columns: minmax(0, 1fr); }
.situation.rail .sit-bunker { border-left: 0; border-top: 1px solid var(--line); }
.sit-block { padding: 12px 14px 14px; min-width: 0; }
.sit-bunker { border-top: 1px solid var(--line); }
.sit-title { font: 800 18px/1.2 var(--sans); margin: 5px 0 6px; }
.sit-cat .sit-title { color: var(--hz); }
.sit-text { font-size: 13.5px; line-height: 1.5; color: var(--text-2); margin-bottom: 10px; }
.facts { display: flex; flex-wrap: wrap; gap: 5px; list-style: none; }
.facts li { font-size: 12px; padding: 3px 8px; border: 1px solid var(--line-2); background: var(--raise); border-radius: 2px; }
.dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0 0 4px; font-size: 13px; }
.dl dt { font: 700 9.5px/1.9 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.dl dd { margin: 0; }
.situation.rail .sit-block { padding: 10px 12px 12px; }
.situation.rail .sit-title { font-size: 15.5px; margin: 3px 0 4px; }
.situation.rail .sit-text { font-size: 12.5px; line-height: 1.45; margin-bottom: 8px; }
.situation.rail .facts { display: grid; gap: 3px; }
.situation.rail .facts li { font-size: 11.5px; line-height: 1.35; padding: 2px 7px; }
.situation.rail .dl { font-size: 12.5px; }

/* ------------------------------------------------------------ turn order */
.turn-order { display: grid; gap: 6px; min-width: 0; }
.dir-glyph { color: var(--hz); font-size: 13px; margin-right: 6px; letter-spacing: 0; }
.to-list { display: flex; flex-wrap: nowrap; gap: 4px; list-style: none; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; padding-bottom: 2px; }
.to-list::-webkit-scrollbar { display: none; }
.to-list li { display: flex; flex: none; }
.to {
  cursor: pointer;
  color: inherit;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  min-height: 40px;
  padding: 3px 10px 3px 7px;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  background: var(--panel);
  max-width: 180px;
}
.to-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.to-mark { font: 700 10px/1 var(--mono); min-width: 14px; text-align: center; color: var(--dim); }
.to-done { opacity: .5; }
.to-done .to-mark { color: var(--green); }
.to-now { background: var(--hz); border-color: var(--hz); color: var(--hz-ink); font-weight: 700; }
.to-now .to-mark { color: var(--hz-ink); }
.to-skip .to-name { text-decoration: line-through; }
.to-me:not(.to-now) { border-color: var(--text-2); }

/* ------------------------------------------------------------ vote panel (a paper ballot) + results */
.vote-panel { border-color: rgba(255, 93, 79, .45); background: linear-gradient(180deg, rgba(255, 93, 79, .07), transparent 140px), var(--panel); }
.vote-panel.defense { border-color: rgba(255, 159, 67, .55); background: linear-gradient(180deg, rgba(255, 159, 67, .08), transparent 140px), var(--panel); }
.vp-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 20px; padding: 12px 14px 10px; }
.vp-head-text { flex: 1 1 320px; min-width: 0; }
.vp-kicker { font: 700 10.5px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--red-2); }
.defense .vp-kicker { color: var(--orange); }
.vp-title { font: 800 21px/1.2 var(--sans); margin: 5px 0 4px; overflow-wrap: anywhere; }
.vp-sub { font-size: 12.5px; color: var(--text-2); line-height: 1.45; max-width: 80ch; }
.vp-progress { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: 1 1 200px; max-width: 380px; }
.vp-progress .vp-meter { width: 100%; flex: none; }
.vp-meter { flex: 1; height: 6px; background: #27251d; border-radius: 3px; overflow: hidden; }
.vp-meter-fill { height: 100%; background: var(--hz); transition: width .3s; }
.vp-count { font-size: 12px; color: var(--text-2); }
.vp-grid { display: grid; gap: 8px 18px; padding: 0 14px 12px; }
.vp-grid:empty { display: none; }
.mods { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px; }
.vp-col { font-size: 12.5px; color: var(--text-2); }
.vp-wait { font-size: 12px; color: var(--text-2); text-align: right; line-height: 1.4; }
.vp-wait .k { font-size: 9px; }
.vp-mine { margin: 0 14px 12px; padding: 8px 12px; border-radius: 0 3px 3px 0; font-size: 13.5px; line-height: 1.4; }
.vp-mine-k { font: 800 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; margin-right: 10px; }
.vp-last { border-top: 1px dashed var(--line-2); }
.vp-last > .k { padding: 10px 14px 0; display: block; }
.vp-last .results, .lv-body .results { padding: 4px 14px 12px; }
.defense .vp-last .results { padding-top: 8px; }
.last-vote .lv-body { border-top: 1px solid var(--line); }
.tally-brief { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 0 12px 10px; font-size: 12.5px; line-height: 1.35; }
.tally-brief li { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 5px; min-width: 0; }
.tally-brief .tb-name { color: var(--text); }
.tally-brief .out .tb-name { color: var(--red-2); }
.tally-brief .tie .tb-name { color: var(--orange); }
.tally-brief .tb-n { font-weight: 700; color: var(--red-2); }
.tally-brief .tb-arrow { color: var(--faint); }
.tally-brief .tb-v { color: var(--text-2); overflow-wrap: anywhere; }
/* the open ballot is printed on paper: red for "your vote", green once it is cast */
.vote-panel.ballot { background: var(--paper-grad); color: var(--paper-ink); border: 1px solid var(--paper-edge); box-shadow: 0 10px 28px -12px #000; }
.vote-panel.ballot.revote { box-shadow: inset 0 4px 0 var(--orange), 0 10px 28px -12px #000; }
.ballot .vp-kicker { color: #b3261e; }
.ballot.revote .vp-kicker { color: #a65400; }
.ballot .vp-title { color: var(--paper-ink); }
.ballot .vp-sub, .ballot .vp-wait, .ballot .vp-count, .ballot .vp-col { color: #4a4232; }
.ballot .k { color: var(--paper-mut); }
.ballot .fine { color: #5a513e; }
.ballot .vp-meter { background: rgba(29, 26, 19, .16); }
.ballot .vp-meter-fill { background: var(--paper-ink); }
.ballot .vp-mine.todo { background: rgba(179, 38, 30, .12); border-left: 4px solid #b3261e; color: #6e1510; }
.ballot .vp-mine.todo .vp-mine-k { color: #b3261e; }
.ballot .vp-mine.done { background: rgba(46, 125, 50, .14); border-left: 4px solid #2e7d32; color: #173d1d; }
.ballot .vp-mine.done .vp-mine-k { color: #2e7d32; }
.ballot .vp-mine.none { background: rgba(166, 84, 0, .12); border-left: 4px solid #a65400; color: #4d2a00; }
.ballot .tag { background: rgba(255, 255, 255, .45); }
.ballot .tag-immune { color: #0d6b73; border-color: #0d6b73; }
.ballot .tag-blocked { color: #a65400; border-color: #a65400; }
.ballot .tag-double { color: #5b3fc4; border-color: #5b3fc4; }
.ballot .vp-last { border-top: 1px dashed rgba(29, 26, 19, .3); }
.ballot .sit-sum { color: #3a3326; }
.ballot .sit-toggle { color: var(--paper-mut); }
.ballot .result-line { color: var(--paper-ink); }
.ballot .result-line.bad { color: #b3261e; }
.ballot .result-line.warn { color: #a65400; }
.ballot .rtable th, .ballot .rtable td { border-bottom-color: rgba(29, 26, 19, .18); }
.ballot .rtable thead th { color: var(--paper-mut); }
.ballot .rtable .voters { color: #3a3326; }
.ballot .rtable tr.ejected th { color: #b3261e; }
.ballot .bar-mini { background: #b3261e; }
.result-line { font-weight: 600; font-size: 13.5px; margin: 6px 0 8px; }
.result-line.bad { color: var(--red-2); }
.result-line.warn { color: var(--orange); }
.rtable { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rtable th, .rtable td { text-align: left; padding: 5px 8px 5px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.rtable thead th { font: 700 9.5px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.rtable tbody th { font-weight: 700; white-space: nowrap; }
.rtable tr.ejected th { color: var(--red-2); }
.rtable tr.ejected .tag { margin-left: 6px; }
.rtable .num { white-space: nowrap; width: 1%; padding-right: 14px; }
.bar-mini { display: inline-block; height: 6px; background: rgba(255, 93, 79, .65); margin-right: 6px; vertical-align: middle; border-radius: 1px; }
.rtable .voters { color: var(--text-2); overflow-wrap: anywhere; }
.results .fine { margin-top: 6px; }

/* ------------------------------------------------------------ board: shared */
.board-tools { display: none; align-items: center; gap: 6px; margin-left: auto; }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 3px; overflow: hidden; }
.seg-btn {
  font: 700 9.5px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 6px 9px;
  min-height: 26px;
  background: transparent;
  color: var(--text-2);
  border: 0;
  cursor: pointer;
}
.seg-btn + .seg-btn { border-left: 1px solid var(--line-2); }
.seg-btn.on { background: var(--hz); color: var(--hz-ink); }
.seg-btn.solo { border: 1px solid var(--line-2); border-radius: 3px; }
.seg-btn.solo.on { border-color: var(--hz); }

/* ------------------------------------------------------------ board (narrow: stacked sheets) */
.board { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 8px; }
.bhead { display: none; }
.prow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  min-width: 0;
}
.bc { min-width: 0; }
.prow .who {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 8px;
  padding: 6px 8px 6px 10px;
  border-bottom: 1px solid var(--line);
}
.who-main {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
  max-width: 100%;
  min-height: 40px;
  padding: 0 4px 0 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.seat { font: 600 10.5px/1 var(--mono); color: var(--faint); flex: none; }
.pname { font-weight: 700; font-size: 14.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.prow .who .tags { flex: 1 1 100%; }
/* a card cell: revealed = paper, hidden = a dark card back */
.card { position: relative; padding: 6px 9px 7px; border: 2px solid transparent; background-clip: padding-box; border-radius: 5px; }
.card.up { background-image: var(--paper-grad); color: var(--paper-ink); }
.card.hidden { background-image: var(--back); }
.clabel { display: block; font: 700 9px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin-bottom: 2px; }
.card.up .clabel { color: var(--paper-mut); }
.cval { display: block; font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; }
.card.up .cval { font-weight: 600; }
.facedown { display: none; }
/* (the word is the cell's own aria-label, board.hiddenAria, in the page's language: CSS holds no English) */
.card.hidden .cval::before { content: attr(aria-label); font: 600 10px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.card.up.fresh { animation: flipDown .55s cubic-bezier(.2, .7, .3, 1.2) both; box-shadow: 0 0 0 2px var(--hz), 0 0 16px rgba(245, 197, 24, .35); transform-origin: 50% 0; }
.card.up.fresh::before { content: ""; position: absolute; inset: 0; border-radius: 3px; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .8) 48%, transparent 66%); background-size: 250% 100%; animation: glint 1.1s ease-out .2s both; pointer-events: none; }
.card.up.late { background-image: linear-gradient(180deg, #fff3c4, #f3dc8a 60%, #e5c96a); }
.prow .st { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 7px 10px; border-top: 1px solid var(--line); }
.prow .st:empty { display: none; }
.st-line { font-size: 12px; }
.st-line.ok { color: var(--green); }
.st-line.dim { color: var(--dim); }
.st-line.cand { color: var(--red-2); font-weight: 600; }
.st-line.hz { color: var(--hz); font-weight: 600; }
.st-row { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: center; }
.vmark { display: none; font: 700 12px/1 var(--mono); width: 12px; text-align: center; flex: none; }
.vmark.ok { color: var(--green); }
.vmark.wait { color: var(--dim); }
.vmark.none { color: var(--faint); }
.sp-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; min-width: 0; max-width: 100%; }
.prow .st > * { max-width: 100%; min-width: 0; }
.sp-chip {
  font-size: 11px;
  line-height: 1.35;
  padding: 1px 5px;
  border-radius: 2px;
  color: var(--cyan);
  background: rgba(111, 208, 216, .08);
  border: 1px solid rgba(111, 208, 216, .25);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sp-chip.unplayed { color: var(--text-2); background: transparent; border-style: dashed; border-color: var(--line-2); }
.sp-chips.wrap .sp-chip { white-space: normal; overflow: visible; }
.sp-never { font-size: 10.5px; color: var(--dim); }
.sp-detail { list-style: none; display: grid; gap: 3px; font-size: 12px; color: var(--text-2); width: 100%; }
.sp-detail li.unplayed { color: var(--dim); }
.vote-row { min-width: 88px; }
.vote-row .xtra { white-space: pre; }
.vote-row.picked, .vote-row.picked:hover:not([disabled]) { background: #c9372c; color: #fff; border-color: #c9372c; }
/* row states */
.prow.me { border-color: var(--line-2); background: #1b1a15; }
.prow.speaking { border-color: var(--hz); background: linear-gradient(90deg, rgba(245, 197, 24, .12), rgba(245, 197, 24, .02) 55%, transparent), var(--panel-2); box-shadow: inset 3px 0 0 var(--hz); }
.prow.defending:not(.speaking) { box-shadow: inset 3px 0 0 var(--orange); }
.prow.st-ejected .card, .prow.st-left .card { filter: saturate(.25) brightness(.62); }
.prow.st-ejected .pname { color: var(--red-2); }
.prow.st-left .pname { color: var(--faint); text-decoration: line-through; }
.prow.offline .pname { color: var(--text-2); }
.prow.my-pick { box-shadow: inset 0 0 0 2px #c9372c; }
.prow.flash { outline: 2px solid var(--hz); outline-offset: -2px; }
.prow.just-out { animation: outFlash 1.6s ease-out both; }
.role-banner { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 9px 12px; border-radius: 4px; font-size: 13px; line-height: 1.4; }
.role-banner .rb-k { font: 700 10.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.role-banner .rb-t { color: var(--text-2); flex: 1 1 240px; }
.role-banner.out { background: var(--red-soft); border: 1px solid rgba(255, 93, 79, .4); }
.role-banner.out .rb-k { color: var(--red-2); }
.role-banner.watch { background: rgba(111, 208, 216, .07); border: 1px solid rgba(111, 208, 216, .35); }
.role-banner.watch .rb-k { color: var(--cyan); }
.bgroup {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 12px;
  font: 700 11px/1.2 var(--mono);
  letter-spacing: .15em;
  text-transform: uppercase;
  border-radius: 2px;
}
.bgroup.good { color: var(--green); background: rgba(143, 214, 148, .07); box-shadow: inset 3px 0 0 var(--green); }
.bgroup.bad { color: var(--red-2); background: var(--red-soft); box-shadow: inset 3px 0 0 var(--red); }
.bgroup .meta { color: inherit; }

/* ------------------------------------------------------------ board: one panel per player ("Cards" view, final) */
.seats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px; padding: 10px; align-items: start; }
.seats.dense { grid-template-columns: repeat(auto-fill, minmax(min(100%, 215px), 1fr)); gap: 8px; }
.seat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 8px 8px 9px;
  background: linear-gradient(180deg, #1c1b16, #151511);
  border: 1px solid var(--line-2);
  border-radius: 7px;
  box-shadow: 0 10px 22px -14px #000;
}
.seat-card.me { border-color: var(--text-2); }
.seat-card.speaking { border-color: var(--hz); box-shadow: 0 0 0 1px var(--hz), 0 0 22px -6px rgba(245, 197, 24, .5); }
.seat-card.defending:not(.speaking) { border-color: var(--orange); }
.seat-card.my-pick { box-shadow: 0 0 0 2px #c9372c; }
.seat-card.st-ejected:not(.final) .sc-ups, .seat-card.st-left:not(.final) .sc-ups { filter: saturate(.3) brightness(.7); }
.sc-head { display: flex; align-items: center; gap: 7px; min-width: 0; min-height: 26px; }
.sc-seat { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 4px; font-size: 11px; font-weight: 700; color: var(--hz-ink); background: var(--hz); border-radius: 3px; flex: none; }
.sc-name { font-weight: 800; font-size: 15px; line-height: 1.2; min-width: 0; overflow-wrap: anywhere; }
.seat-card .tags { flex: none; }
.seat-card .stamp-tag { position: absolute; right: 12px; bottom: 12px; font-size: 17px; z-index: 2; }
.sc-ups { list-style: none; display: grid; gap: 3px; perspective: 900px; }
.sc {
  position: relative;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 6px;
  align-items: start;
  padding: 4px 7px 5px;
  background: var(--paper-grad);
  color: var(--paper-ink);
  border: 1px solid var(--paper-edge);
  border-radius: 4px;
  transform-origin: 50% 0;
}
.sc-k { font: 700 8.5px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--paper-mut); padding-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-v { font-size: 12.5px; font-weight: 650; line-height: 1.28; overflow-wrap: anywhere; }
.sc.late { background: linear-gradient(180deg, #fff3c4, #f3dc8a 60%, #e5c96a); border-color: #b99a2b; }
.sc.fresh { animation: flipDown .55s cubic-bezier(.2, .7, .3, 1.2) both; box-shadow: 0 0 0 2px var(--hz); }
.sc-downs { display: flex; flex-wrap: wrap; gap: 3px; }
.sc-back { font: 700 8.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); padding: 6px 6px 5px; border-radius: 3px; background: var(--back); border: 1px solid #2e2c22; }
.sc-specials { list-style: none; display: grid; gap: 4px; }
.sc-specials li { font-size: 12px; line-height: 1.35; padding: 4px 7px; border-radius: 4px; border: 1px solid rgba(245, 197, 24, .35); background: rgba(245, 197, 24, .07); }
.sc-specials.brief { display: flex; flex-wrap: wrap; gap: 4px; }
.sc-specials.brief li { padding: 2px 7px; }
.scs-t { display: flex; align-items: center; gap: 5px; font-weight: 700; color: var(--hz-2); }
.scs-t .ico { width: 11px; height: 11px; }
.scs-x { display: block; color: var(--text-2); font-size: 11.5px; }
.sc-never { display: grid; gap: 4px; }
.sc-specials.never li { border-style: dashed; border-color: var(--line-2); background: transparent; }
.sc-specials.never .scs-t { color: var(--text-2); }
.sc-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 4px; border-top: 1px dashed var(--line-2); }
.sc-status .vote-row { width: 100%; }
.seat-group { margin: 10px; border-radius: 8px; border: 1px solid var(--line); }
.seat-group .seats { padding: 4px 10px 10px; }
.sg-title { display: flex; align-items: center; gap: 10px; padding: 12px 12px 8px; font: 400 24px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.sg-ico { width: 24px; height: 24px; }
.sg-tree { color: #93a884; font-size: 18px; }
.sg-count { font-size: 17px; color: var(--dim); }
.seat-group.in { background: linear-gradient(180deg, rgba(245, 197, 24, .08), rgba(245, 197, 24, .01)); border-color: rgba(245, 197, 24, .35); }
.seat-group.out { background: linear-gradient(180deg, rgba(60, 80, 50, .18), rgba(40, 50, 30, .04)); border-color: #3a4533; }
.seat-group.out .seat-card { border-color: #353f2f; }

/* ------------------------------------------------------------ my hand */
.hand .callout { margin: 10px 12px 2px; }
.hand-cards { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 146px), 1fr)); gap: 6px; padding: 8px; }
.hc {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 8px;
  align-items: center;
  padding: 6px 9px 8px;
  border-radius: 5px;
  border: 1px solid var(--line-2);
  background: var(--back);
  transition: opacity .2s;
}
.hc > .hc-label { grid-column: 1; grid-row: 1; }
.hc > .hc-state, .hc > .btn { grid-column: 2; grid-row: 1; justify-self: end; }
.hc > .hc-text { grid-column: 1 / -1; grid-row: 2; }
.hc-label { font: 700 9.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.hc-text { font-size: 13.5px; line-height: 1.3; overflow-wrap: anywhere; }
.hc.secret .hc-text { color: var(--text); }
.hc.public { background: var(--paper-grad); border-color: var(--paper-edge); color: var(--paper-ink); }
.hc.public .hc-label { color: var(--paper-mut); }
.hc.public .hc-text { font-weight: 650; }
.hc-state { font: 700 9px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 3px 5px 2px; border-radius: 2px; }
.hc-state.pub { color: #2e6b33; border: 1px solid rgba(46, 107, 51, .45); }
.hc-state.sec { color: var(--dim); border: 1px dashed var(--line-2); }
.hc.eligible { border-color: var(--hz); background: linear-gradient(180deg, rgba(245, 197, 24, .16), rgba(245, 197, 24, .05)), #1a1810; animation: breathe 1.8s ease-in-out infinite; }
.hc.eligible .hc-label { color: var(--hz); }
.hc.dim { opacity: .42; }
.hc-reveal { animation: nudge 1.2s ease-in-out infinite; }
.hc.fresh { animation: flipIn .6s cubic-bezier(.2, .7, .3, 1.2) both; }
.specials-panel { padding-bottom: 6px; }
.special {
  margin: 8px 10px 4px;
  padding: 10px 11px;
  border: 1px solid var(--line-2);
  border-radius: 5px;
  background: linear-gradient(180deg, #1b1a14, #151510);
}
.special.ready { border: 3px solid transparent; background: linear-gradient(180deg, #2c281b, #1c1a13) padding-box, repeating-linear-gradient(-45deg, var(--hz) 0 7px, #16150f 7px 14px) border-box; padding: 8px 9px; }
.special.used { opacity: .5; }
.sp-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
/* a title too long to share its line with the state label («Дипломатический иммунитет», «Продажный охранник» at
   1280–1440) leaves the label the next line, at the right, and wraps between its words when it is wider than the card */
.sp-top { flex-wrap: wrap; row-gap: 2px; }
.sp-title { font: 800 14.5px/1.2 var(--sans); min-width: 0; }
.sp-top .card-chip.cc-lg .cc-t { white-space: normal; overflow-wrap: anywhere; hyphens: auto; }
.special.ready .sp-title { color: var(--hz-2); }
.sp-state { flex: none; margin-left: auto; white-space: nowrap; font: 700 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.sp-state.ready { color: var(--hz); }
.sp-text { font-size: 12.5px; color: var(--text-2); margin: 5px 0 4px; line-height: 1.4; }
.sp-meta { font: 10px/1.4 var(--mono); color: var(--dim); }
.sp-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 9px; }
.sp-why { font-size: 11.5px; color: var(--dim); line-height: 1.3; flex: 1 1 140px; }
.intel { border-color: rgba(111, 208, 216, .45); background: linear-gradient(180deg, rgba(111, 208, 216, .07), transparent 90px), var(--panel); }
.intel .panel-head h2::before { background: var(--cyan); }
.note-list { list-style: none; display: grid; gap: 4px; padding: 8px 10px 10px; }
.note-list li { display: grid; grid-template-columns: 40px 1fr; gap: 6px; font-size: 12.5px; line-height: 1.4; padding: 6px 8px; background: rgba(111, 208, 216, .07); border-left: 2px solid var(--cyan); }
.note-list time { font-size: 11px; color: var(--faint); padding-top: 1px; }
.watcher .watch-text { padding: 10px 12px 0; font-size: 13px; color: var(--text-2); line-height: 1.45; }
.watcher .k.sub { padding: 0 12px; }
.spec-list { list-style: none; padding: 4px 0 8px; }
.sp-row { display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 13px; }
.sp-row .btn { margin-left: auto; }
.sp-row.offline .lp-name { color: var(--dim); }

/* ------------------------------------------------------------ log */
.log { list-style: none; padding: 6px 0; max-height: 300px; overflow-y: auto; font-size: 12.5px; overscroll-behavior: contain; }
.le { display: grid; grid-template-columns: 38px 14px minmax(0, 1fr); gap: 6px; padding: 3px 12px; line-height: 1.4; }
.le time { font-size: 10.5px; color: var(--faint); padding-top: 1px; }
.lg { font-size: 11px; color: var(--dim); text-align: center; }
.lt { overflow-wrap: anywhere; color: var(--text-2); }
.k-reveal .lg { color: var(--hz); }
.k-special .lg, .k-special .lt { color: var(--cyan); }
.k-vote .lg { color: var(--orange); }
.k-eject .lg, .k-eject .lt { color: var(--red-2); }
.k-system .lt { color: var(--text); font-weight: 600; }

/* ------------------------------------------------------------ action bar (opaque: nothing shows through) */
.bar {
  position: relative;
  z-index: 30;
  background: #0d0d0b;
  border-top: 1px solid var(--line-2);
  box-shadow: 0 -14px 30px rgba(0, 0, 0, .55);
  max-height: 40vh;
  max-height: 40dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.bar-stripe { height: 3px; background: var(--line-2); }
.tone-mine .bar-stripe { background: var(--hazard); height: 4px; }
.tone-done .bar-stripe { background: var(--green); }
.tone-final .bar-stripe { background: var(--green); }
.tone-info .bar-stripe { background: var(--hz-line); }
.tone-offline .bar-stripe { background: var(--red); }
/* the bar ends flush with the bottom of the screen: below its content only the home indicator's inset (or 10 px on a
   screen without one), never both (SPEC §11 X7) */
.bar-inner { padding: 8px 12px max(10px, env(safe-area-inset-bottom, 0px)); }
.bar-main { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.bar-status { flex: 1 1 260px; min-width: 0; }
.bar-eyebrow { font: 700 10px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.tone-mine .bar-eyebrow { color: var(--hz); }
.tone-done .bar-eyebrow { color: var(--green); }
.tone-offline .bar-eyebrow { color: var(--red-2); }
.tone-final .bar-eyebrow { color: var(--green); }
.bar-title { font: 800 16px/1.25 var(--sans); margin-top: 2px; overflow-wrap: anywhere; }
.tone-mine .bar-title { color: var(--hz); }
.tone-done .bar-title { color: var(--green); }
.bar-detail { font-size: 12.5px; color: var(--text-2); margin-top: 2px; line-height: 1.4; }
.bar-buttons { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 100%; }
.bar-host { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; gap: 6px; flex: 1 1 100%; padding-top: 6px; border-top: 1px dashed var(--line-2); }
.bar-host-k { grid-column: 1 / -1; }
.bar-host > button:last-child:nth-child(2) { grid-column: 1 / -1; }
/* the host tools' head: the HOST label and, in a game, End game (SPEC §11 X6), small, on its own row away from Next */
.bar-host-head { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.btn.end-game { flex: none; }
.bar-host.with-end .bar-host-head { margin-bottom: 4px; }
.btn.end-game.armed { box-shadow: 0 0 0 2px rgba(201, 55, 44, .35); }
.btn.end-game.armed.settling[disabled] { opacity: .8; }
.bar-endnote { margin-top: 6px; padding: 6px 10px; border-left: 3px solid var(--red); border-radius: 0 3px 3px 0; background: var(--red-soft); color: var(--red-2); font-size: 12.5px; line-height: 1.4; }
.bar-endnote b { color: var(--text); }
.bar-host-k { font: 700 9px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--hz); writing-mode: horizontal-tb; flex: none; }
.host-btn { flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; min-height: 44px; min-width: 0; padding: 6px 11px; white-space: normal; text-align: left; flex: 1 1 150px; }
.host-btn.own-turn { border-style: dashed; color: var(--text-2); }
.btn.cooling[disabled] { opacity: .62; }
.b-main { font: 700 12px/1.15 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.b-sub { font: 500 11.5px/1.2 var(--sans); letter-spacing: 0; text-transform: none; opacity: .78; }
.bar-buttons .btn { min-width: 150px; min-height: 44px; flex: 1 1 auto; }
.bar-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; margin-top: 8px; }
.bar-choices.ch-vote { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-height: 44px;
  min-width: 0;
  padding: 6px 10px;
  text-align: left;
  background: var(--raise);
  border: 1px solid var(--line-2);
  border-radius: 3px;
  cursor: pointer;
  transition: border-color .12s, background-color .12s;
}
.choice[disabled] { opacity: .4; cursor: not-allowed; }
.ch-k { font: 700 9.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--hz); }
.ch-v { font-size: 13px; font-weight: 600; line-height: 1.25; overflow-wrap: break-word; min-width: 0; }
.reveal-choice { border-color: var(--hz-line); background: linear-gradient(180deg, rgba(245, 197, 24, .08), rgba(245, 197, 24, .02)); }
.bar-choices.ch-reveal.n1 { grid-template-columns: minmax(0, 460px); }
.ch-reveal.n1 .reveal-choice { background: var(--hz); border-color: var(--hz); min-height: 52px; }
.ch-reveal.n1 .reveal-choice .ch-k, .ch-reveal.n1 .reveal-choice .ch-v { color: var(--hz-ink); }
.vote-choice { flex-direction: row; align-items: center; gap: 7px; min-height: 44px; }
.vote-choice .ch-k { color: var(--faint); display: none; }
.vote-choice .ch-v { flex: 1; }
.vote-choice.picked, .vote-choice.picked:hover:not([disabled]) { background: #c9372c; border-color: #c9372c; color: #fff; }
.vote-choice.picked .ch-k { color: #fff; }
.ch-mark { font: 800 13px/1 var(--mono); }

/* ------------------------------------------------------------ toasts + modal */
.toasts { position: fixed; top: calc(var(--top-h, 0px) + 6px); left: 8px; right: 8px; z-index: 80; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.toast {
  pointer-events: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 2px 2px 2px 10px;
  background: #22120f;
  border: 1px solid rgba(255, 93, 79, .55);
  border-left: 4px solid var(--red);
  border-radius: 3px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .55);
  font-size: 13px;
  animation: dropIn .22s ease-out both;
}
.toast-info { background: #1a1810; border-color: var(--hz-line); border-left-color: var(--hz); }
.toast-k { font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--red-2); }
.toast-info .toast-k { color: var(--hz); }
.toast-msg { overflow-wrap: anywhere; line-height: 1.35; margin: 6px 0; }
.toast-info .toast-msg { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; }
.toast-x { pointer-events: auto; background: none; border: 0; color: var(--dim); font-size: 18px; line-height: 1; cursor: pointer; min-width: 40px; min-height: 40px; padding: 0; }
body.modal-open { overflow: hidden; }
.modal-wrap { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; justify-content: center; }
.modal-back { position: absolute; inset: 0; background: rgba(0, 0, 0, .72); }
.modal {
  position: relative;
  width: 100%;
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--hz-line);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -20px 60px rgba(0, 0, 0, .6);
}
.modal::before { content: ""; display: block; height: 4px; margin: 0 -16px 14px; background: var(--hazard); border-radius: 8px 8px 0 0; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
/* the title takes what × leaves: a long special title («Дипломатический иммунитет») wraps, and × stays on the sheet */
.modal-head > div { flex: 1 1 auto; min-width: 0; }
.modal-head > .toast-x { flex: none; margin-left: -12px; }   /* (the title may run under × box's empty left edge) */
.modal-title .card-chip.cc-xl .cc-t { white-space: normal; overflow-wrap: anywhere; hyphens: auto; }
.modal-title { font: 800 22px/1.2 var(--sans); color: var(--hz); margin-top: 4px; }
.modal-card-text { font-size: 14px; color: var(--text-2); margin-top: 6px; line-height: 1.45; }
.modal-card-meta { font: 11px/1.4 var(--mono); color: var(--dim); margin-top: 4px; }
.steps { display: flex; gap: 6px; list-style: none; margin: 14px 0 12px; }
.step { flex: 1; min-width: 0; border-top: 3px solid var(--line-2); padding-top: 6px; font-size: 12px; color: var(--dim); display: flex; flex-wrap: wrap; gap: 2px 6px; align-items: baseline; }
.step-n { font-size: 10px; font-weight: 700; }
.step-l { font: 700 10px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.step-v { width: 100%; color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step.now { border-color: var(--hz); color: var(--text); }
.step.done { border-color: var(--hz-line); }
.pick-q { font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.opt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.opt {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 8px;
  align-items: center;
  padding: 9px 10px;
  min-height: 52px;
  text-align: left;
  background: var(--raise);
  border: 1px solid var(--line-2);
  border-radius: 3px;
  cursor: pointer;
}
.opt-seat { grid-row: 1 / 3; font-size: 11px; color: var(--faint); }
.opt-name { font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.opt-sub { font-size: 11.5px; color: var(--dim); overflow-wrap: anywhere; }
.opt-grid.cats .opt { grid-template-columns: minmax(0, 1fr); }
.confirm { padding: 12px 14px; background: var(--hz-soft); border-left: 3px solid var(--hz); border-radius: 0 3px 3px 0; }
.confirm-what { font-size: 16px; font-weight: 700; line-height: 1.4; }
.confirm-warn { font-size: 12.5px; color: var(--text-2); margin-top: 6px; }
.modal-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; position: sticky; bottom: calc(-16px - env(safe-area-inset-bottom, 0px)); background: var(--panel); padding: 8px 0 4px; }
.modal .callout.warn { margin: 0 0 10px; }

/* ------------------------------------------------------------ landing + simple screens */
.screen { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; overflow-x: clip; }
.landing-grid { flex: 1; display: grid; grid-template-areas: "brand" "entry" "how"; gap: 22px; width: min(1140px, 100%); margin: 0 auto; padding: 22px 16px 20px; align-content: center; }
.brand { grid-area: brand; }
.brand-how { grid-area: how; }
.entry { grid-area: entry; }
.brand-kicker { display: flex; align-items: center; gap: 10px; font: 700 11px/1.2 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--hz); }
.brand-title { margin: 16px 0 12px; font-family: var(--mono); font-weight: 800; line-height: .9; }
.bt-main { display: block; font-size: clamp(58px, 17vw, 132px); letter-spacing: -.02em; color: var(--hz); text-shadow: 0 0 40px rgba(245, 197, 24, .12); }
.bt-sub { display: block; font-size: clamp(14px, 3.4vw, 22px); letter-spacing: .62em; text-transform: uppercase; color: var(--text); margin-top: 12px; padding-left: 4px; }
.brand-lede { font-size: 16px; line-height: 1.55; color: var(--text-2); max-width: 46ch; }
.brand-steps { list-style: none; display: grid; gap: 9px; max-width: 52ch; }
.brand-steps li { display: grid; grid-template-columns: 34px 1fr; font-size: 14px; color: var(--text-2); line-height: 1.45; }
.brand-steps .n { font: 700 12px/1.6 var(--mono); color: var(--hz); }
/* the fanned hand of cards (decorative, wide screens only) */
.fan { display: none; position: relative; width: 380px; height: 196px; margin: 26px 0 44px 20px; }
.fc {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 112px;
  height: 158px;
  border-radius: 9px;
  padding: 8px;
  transform-origin: 50% 210%;
  box-shadow: 0 14px 24px -10px #000, 0 2px 4px rgba(0, 0, 0, .6);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fc:nth-child(1) { transform: translateX(-50%) rotate(-22deg); }
.fc:nth-child(2) { transform: translateX(-50%) rotate(-11deg); }
.fc:nth-child(3) { transform: translateX(-50%) rotate(0deg) translateY(-6px); }
.fc:nth-child(4) { transform: translateX(-50%) rotate(11deg); }
.fc:nth-child(5) { transform: translateX(-50%) rotate(22deg); }
.fc.back { border: 3px solid #1e1d18; align-items: center; justify-content: center; background: repeating-linear-gradient(-45deg, #8a7214 0 7px, #16150f 7px 14px); }
.fc-emblem { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #16150f; border: 2px solid var(--hz); }
.fc-tre { width: 34px; height: 34px; }
.fc.face { background: var(--paper-grad); color: var(--paper-ink); border: 1px solid var(--paper-edge); justify-content: space-between; }
.fc-cat { font: 700 9px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--paper-mut); }
.fc-text { font-size: 13px; font-weight: 750; line-height: 1.2; text-align: center; margin-bottom: 30px; }
.fc.special { border: 4px solid transparent; color: var(--text); background: linear-gradient(180deg, #2c281b, #1c1a13) padding-box, repeating-linear-gradient(-45deg, var(--hz) 0 7px, #15130e 7px 14px) border-box; }
.fc.special .fc-cat { color: var(--hz); }
.fc-title { font: 400 25px/1 var(--display); color: var(--hz-2); letter-spacing: .05em; text-transform: uppercase; margin-top: 16px; text-align: center; }
.fc.special .fc-text { font-size: 12px; font-weight: 500; color: #d9d2bf; margin-bottom: 8px; }
.entry { display: grid; gap: 14px; align-content: start; min-width: 0; }
.form { padding: 18px 16px 16px; }
.field { display: grid; gap: 7px; min-width: 0; }
.field-k { font: 700 10px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  background: #0b0b09;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  color: var(--text);
  font: 16px/1.2 var(--sans);
  padding: 11px 12px;
}
.input::placeholder { color: var(--faint); }
.input:focus { outline: none; border-color: var(--hz); box-shadow: 0 0 0 3px rgba(245, 197, 24, .18); }
.input:disabled { opacity: .5; }
.form .field + .btn { margin-top: 14px; }
.input.code { font: 800 22px/1.1 var(--mono); letter-spacing: .32em; text-transform: uppercase; text-align: center; padding: 9px 8px 9px 14px; }
.or { display: flex; align-items: center; gap: 10px; margin: 18px 0 12px; font: 700 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.join-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: end; }
.join-row .btn { min-height: 46px; }
.hint { margin-top: 10px; min-height: 1.45em; }
.rejoin { border-color: var(--hz-line); background: linear-gradient(135deg, rgba(245, 197, 24, .08), transparent 60%), var(--panel); }
.rejoin-text { padding: 12px 14px 10px; font-size: 14px; line-height: 1.45; }
.rejoin .row { padding: 0 14px; }
.rejoin .fine { padding: 10px 14px 12px; }
.landing-foot { padding: 14px 16px 18px; text-align: center; font-size: 12px; color: var(--faint); }
.center { align-items: center; }
.center .panel.narrow { width: min(460px, calc(100% - 32px)); margin: auto 16px; }
.narrow .big-line { padding: 16px 14px 6px; font-size: 16px; line-height: 1.45; }
.narrow .fine { padding: 4px 14px 10px; }
.narrow .row { padding: 6px 14px 16px; }
.mock-list { list-style: none; padding: 6px 14px 16px; display: grid; gap: 6px; }
.mock-list a { color: var(--hz); }

/* ------------------------------------------------------------ lobby */
.invite { display: grid; gap: 14px; padding: 16px; }
.invite-code .k { display: block; margin-bottom: 6px; }
.invite-letters { display: block; font-size: 54px; font-weight: 800; line-height: 1; letter-spacing: .14em; color: var(--hz); }
.invite-link { display: grid; gap: 7px; min-width: 0; }
.link-row { display: flex; gap: 8px; min-width: 0; }
.link-input { font: 13px/1.2 var(--mono); padding: 10px; }
.link-row .btn { flex: none; min-width: 118px; }
.lobby-list { list-style: none; display: grid; grid-template-columns: 1fr; }
.lp { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 9px; padding: 8px 12px; border-bottom: 1px solid var(--line); min-width: 0; min-height: 48px; }
.lp.me { background: #1a1914; }
.lp-name { font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.lp.offline .lp-name { color: var(--text-2); }
.lp-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.lp .admin { margin-left: auto; display: flex; gap: 5px; }
.presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 10px 12px 6px; }
.preset {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-height: 46px;
  padding: 7px 9px;
  text-align: left;
  background: var(--raise);
  border: 1px solid var(--line-2);
  border-radius: 3px;
  cursor: pointer;
  color: var(--text);
}
.preset.on { border-color: var(--hz); background: var(--hz-soft); box-shadow: inset 0 0 0 1px var(--hz); }
.preset[disabled] { cursor: default; }
.preset[disabled]:not(.on) { opacity: .55; }
.pr-l { font: 700 11.5px/1.1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.preset.on .pr-l { color: var(--hz); }
.pr-h { font-size: 10px; color: var(--dim); }
.opt-list { display: grid; }
.opt-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.opt-text { display: grid; gap: 1px; min-width: 0; }
.opt-label { font-weight: 700; font-size: 13.5px; }
.opt-hint { font-size: 11.5px; color: var(--dim); }
.opt-val { font-size: 15px; font-weight: 700; color: var(--hz); }
.input.num { width: 86px; flex: none; text-align: right; font: 700 15px/1.2 var(--mono); padding: 8px 10px; min-height: 40px; }
.sched { padding: 12px; }
.sched-stats { display: flex; gap: 22px; margin-bottom: 12px; }
.sched .fine { margin-top: 8px; }
.rules-list { padding: 10px 14px 14px 32px; display: grid; gap: 7px; font-size: 13px; color: var(--text-2); line-height: 1.45; }
.rules-list b { color: var(--text); }

/* ------------------------------------------------------------ final */
.final-banner {
  position: relative;
  padding: 22px 16px 16px;
  border: 1px solid #4a4436;
  border-radius: 6px;
  background: radial-gradient(ellipse 60% 120% at 0% 40%, rgba(245, 197, 24, .16), transparent 70%), linear-gradient(180deg, #25231c, #181713);
  overflow: hidden;
}
.final-banner::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7px; background: var(--hazard); }
.fb-hero { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
.fb-wheel { width: 52px; height: 52px; flex: none; filter: drop-shadow(0 0 18px rgba(245, 197, 24, .35)); animation: spinIn 1.2s cubic-bezier(.2, .8, .2, 1) both; }
.fb-hero-text { min-width: 0; }
.fb-kicker { font: 700 11px/1.2 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--hz); }
.fb-title { font: 400 clamp(30px, 7vw, 58px)/1 var(--display); letter-spacing: .06em; text-transform: uppercase; margin: 6px 0 6px; color: var(--text); }
.fb-sum { font-size: 14.5px; color: #d9d2bf; line-height: 1.4; }
.fb-you { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.fb-you.good { color: var(--green); }
.fb-you.bad { color: var(--red-2); }
.fb-cols { display: grid; grid-template-columns: 1fr; gap: 12px; }

/* ------------------------------------------------------------ < 1024: comfortable tap targets (>= 40 px) */
@media (max-width: 1023px) {
  .btn.sm, .btn.xs { min-height: 42px; }
  .btn.xs { padding: 6px 10px; font-size: 10.5px; }
  .icon-btn { width: 40px; height: 40px; }
  .icon-btn .ico { width: 16px; height: 16px; }
  .seg-btn { min-height: 40px; }
  .sc-head { min-height: 40px; }
}

/* ------------------------------------------------------------ ≥ 640: sheets side by side */
@media (min-width: 640px) {
  .board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* wider screens: flashes sit just above the action bar at the right, over the bottom of the log they repeat */
  .toasts { left: auto; right: 16px; top: auto; bottom: calc(var(--bar-h, 0px) + 12px); width: 380px; }
  .toast { padding: 4px 2px 4px 12px; }
  .modal-wrap { align-items: center; padding: 20px; }
  .modal { width: min(640px, 100%); border-radius: 5px; border-bottom: 1px solid var(--hz-line); max-height: calc(100dvh - 40px); padding-bottom: 18px; }
  .modal::before { border-radius: 5px 5px 0 0; }
  .modal-actions { position: static; background: none; padding: 0; }
  .fb-cols { grid-template-columns: 1fr 1fr; }
  .fb-wheel { width: 64px; height: 64px; }
  .final-banner { padding: 26px 22px 18px; }
  .sit-grid { grid-template-columns: 1.25fr 1fr; }
  .sit-bunker { border-top: 0; border-left: 1px solid var(--line); }
  .invite { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 24px; }
  .lobby-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lobby-list .lp:nth-child(odd) { border-right: 1px solid var(--line); }
  .bar { max-height: 45vh; max-height: 45dvh; }
  .bar-inner { padding: 10px 14px max(12px, env(safe-area-inset-bottom, 0px)); }
  .bar-buttons { flex: 0 1 auto; }
  .bar-host { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 0 1 auto; padding-top: 0; border-top: 0; padding-left: 14px; border-left: 1px dashed var(--line-2); }
  .bar-host-k { grid-column: auto; }
  .bar-host-head { justify-content: flex-start; gap: 10px; }
  .bar-host.with-end .bar-host-head { align-self: stretch; margin-bottom: 0; padding-right: 12px; margin-right: 4px; border-right: 1px dashed var(--line-2); }
  .host-btn { flex: 0 1 auto; min-width: 190px; }
  .bar-buttons .btn { flex: 0 1 auto; }
  .bar-title { font-size: 17px; }
  .you-cell { display: flex; }
  .body { padding: 14px 16px; }
  .hdr-row { flex-wrap: wrap; padding: 0 8px; }
  .hcell { padding: 7px 10px; }
  .hdr-break { display: none; }
  .timer-cell { order: 0; flex: 0 0 auto; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; padding: 7px 12px; }
  .timer-cell .k { max-width: 200px; }
  .leave { order: 0; margin-left: 6px; }
  .jump { order: 30; flex: 1 1 100%; margin: 0 -8px; padding: 5px 8px; border-top: 1px solid var(--line); }
  .over-chip { display: inline-block; }
  .vote-choice .ch-k { display: inline; }
  .turn-order { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
  .to-list { flex-wrap: wrap; overflow: visible; }
  .to { min-height: 32px; }
  .hand-cards { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}

/* ------------------------------------------------------------ ≥ 900: landing in two columns */
@media (min-width: 900px) {
  .landing-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); grid-template-areas: "brand entry" "how entry"; gap: 26px 56px; padding: 48px 32px; align-items: center; }
  .brand { align-self: end; }
  .brand-how { align-self: start; }
  .fan { display: block; }
  .hdr-brand { display: flex; }
  .bar-inner { padding: 12px 20px 14px; }
  .bar-title { font-size: 19px; }
  .bar-choices { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
  .bar-choices.ch-vote { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
  .hcell { padding: 7px 14px; border-left: 1px solid var(--line); }
  .hcell .v { font-size: 15px; }
  .hdr-row { padding: 0 10px 0 14px; }
}

/* ------------------------------------------------------------ ≥ 1024: the players × categories matrix */
@media (min-width: 1024px) {
  .board-tools { display: flex; }
  .board-panel { overflow: clip; }
  .board.matrix { display: block; padding: 0; }
  .brow {
    display: grid;
    grid-template-columns: minmax(150px, 1.45fr) repeat(8, minmax(0, 1fr)) minmax(100px, 1fr);
    border-bottom: 1px solid var(--line);
  }
  .board.with-adm .brow { grid-template-columns: minmax(172px, 1.6fr) repeat(8, minmax(0, 1fr)) minmax(96px, .95fr); }
  .bhead { position: sticky; top: 0; z-index: 3; background: #191914; border-bottom: 1px solid var(--line-2); }
  .bhead .bc { padding: 8px 8px 7px; font: 700 9px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bc { padding: 6px 8px; }
  .prow { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
  .prow:nth-child(even of .prow) { background: rgba(255, 255, 255, .014); }
  .prow .who, .prow .st { grid-column: auto; }
  .prow .who { flex-direction: row; flex-wrap: wrap; align-items: center; align-content: center; gap: 1px 5px; padding: 2px 5px 2px 9px; border-bottom: 0; }
  .who-main { min-height: 20px; gap: 6px; }
  .prow .who .tags { flex: 0 1 auto; }
  .prow .icon-btn { width: 20px; height: 20px; }
  .prow .icon-btn .ico { width: 11px; height: 11px; }
  .prow .hostx { gap: 3px; }
  .prow .who .tags { gap: 3px; }
  .prow .who .pname { line-height: 1.15; }
  .prow .who .tag { font-size: 8.5px; padding: 2px 4px 1px; }
  .prow .who .stamp-tag { font-size: 9.5px; padding: 1px 4px 0; border-width: 1.5px; }
  .prow .tag-voted, .prow .tag-voting { display: none; }
  .vmark { display: inline-block; }
  .sp-chip { font-size: 10px; line-height: 1.25; padding: 0 4px; }
  .clabel { display: none; }
  .prow .card { padding: 2px 5px 3px; border-width: 1px; border-radius: 4px; }
  .card.hidden .cval::before { content: none; }
  .hcell { padding-top: 6px; padding-bottom: 6px; }
  .bar-inner { padding-top: 10px; padding-bottom: 11px; }
  .cval { font-size: 12px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: var(--cl, 2); -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; hyphens: auto; }
  .board.dense .cval { font-size: 11.5px; line-height: 1.18; }
  .board.full .cval, .prow.expanded .cval { display: block; -webkit-line-clamp: unset; }
  .prow .st { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: center; gap: 2px; padding: 4px 8px; border-top: 0; border-left: 1px solid rgba(255, 255, 255, .035); }
  .prow .st .st-row { flex-direction: row; flex-wrap: wrap; gap: 0 8px; }
  .prow .st .st-line { white-space: nowrap; font-size: 11.5px; }
  .board-panel > .panel-head { padding: 7px 12px 6px; align-items: center; }
  .prow.me { background: #1a1914; }
  .prow.speaking { box-shadow: inset 3px 0 0 var(--hz); }
  .prow.my-pick { box-shadow: inset 3px 0 0 #c9372c, inset 0 0 0 1px rgba(201, 55, 44, .6); }
  .bgroup { border-radius: 0; border-bottom: 1px solid var(--line); }
  .pname { font-size: 13.5px; }
  .sp-chip { max-width: 100%; }
  .vote-row { min-width: 0; flex: 1 1 auto; max-width: 100%; overflow: hidden; text-overflow: ellipsis; padding: 3px 5px; }
  .vote-row .xtra { display: none; }
  .stakes-vote { text-align: right; }
  .seats .vote-row { padding: 6px 10px; }
  .card .new-tag { top: -5px; right: 2px; font-size: 7.5px; }
}
/* a clamped cell shows its whole text in the page's popover (hover, focus or tap: see .card-pop) */
@media (min-width: 1024px) {
  .board.matrix:not(.full) .card.up { cursor: help; }
  .board.matrix .card.up:focus-visible { outline: 2px solid var(--hz); outline-offset: -1px; z-index: 2; }
}

/* ------------------------------------------------------------ ≥ 1180: console layout, independent columns */
@media (min-width: 1180px) {

  .jump { display: none; }
  .hdr-row { flex-wrap: nowrap; }
  .body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 0; padding: 0; min-height: 0; overflow: hidden; }
  .main-col { overflow-y: auto; padding: 12px 12px 16px 14px; min-height: 0; gap: 10px; }
  .side-col { overflow-y: auto; padding: 12px 14px 16px 12px; border-left: 1px solid var(--line); background: rgba(0, 0, 0, .18); min-height: 0; gap: 10px; }
  .shell.game .side-col .log-panel { flex: 1 0 240px; display: flex; flex-direction: column; min-height: 240px; }
  .shell.game .side-col .log { flex: 1 1 auto; max-height: none; min-height: 170px; height: 0; }
  .bar { position: relative; max-height: 46vh; max-height: 46dvh; }
  .toasts { right: 12px; width: 276px; }
  .round-track.hdr-track { display: flex; align-self: center; margin: 0 6px 0 14px; flex: none; }
  .hdr-track .rt { width: 26px; padding: 2px 0 1px; }
  .wide-only { display: flex; }
  .stakes, .turn-order { display: none; }
  .vote-panel:not(.defense) .vp-sub { display: none; }
  .strips { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .shell.lobby .body { grid-template-columns: minmax(0, 1fr) 380px; }
  .hand-cards { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 6px 8px 8px; }
  .hc { padding: 5px 9px 6px; }
  .hc-text { font-size: 13px; }
  .specials-panel .special { margin: 8px 8px 4px; }
  .timer-cell .k { max-width: 150px; }
  /* one row that never wraps: if it still runs short, the "next vote" cell gives way with an ellipsis (its title has
     the whole text, and the round track beside it shows the plan) instead of every cell shrinking and wrapping its
     label onto a second line (a 10 px taller header) */
  .hdr-row > .hcell { flex-shrink: 0; }
  .hdr-row > .nv-cell { flex-shrink: 1; min-width: 64px; }
  .nv-cell .k, .nv-cell .v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* in play the language switch takes ~70 px of the one-row header: up to 1599 px the brand keeps only its trefoil
   there (as it already does below 1440), so nothing else has to give way */
@media (min-width: 1440px) and (max-width: 1599px) { .shell.game .hdr-brand .hb-word { display: none; } }
@media (min-width: 1180px) and (max-width: 1439px) {
  .body { grid-template-columns: minmax(0, 1fr) 280px; }
  .toasts { width: 256px; }
  .board.dense .cval { font-size: 11px; }
  .board.with-adm .brow { grid-template-columns: minmax(166px, 1.5fr) repeat(8, minmax(0, 1fr)) minmax(88px, .85fr); }
  .you-cell { display: none; }
  .hdr-brand .hb-word { display: none; }
  .hcell { padding: 6px 10px; }
  .hdr-track .rt { width: 23px; }
  .nv-cell .v { font-size: 13.5px; }
}
@media (min-width: 1500px) {
  .body { grid-template-columns: minmax(0, 1fr) 356px; }
  .toasts { width: 330px; }
  .brow { grid-template-columns: minmax(160px, 1.4fr) repeat(8, minmax(0, 1fr)) minmax(110px, 1fr); }
  .board.with-adm .brow { grid-template-columns: minmax(180px, 1.5fr) repeat(8, minmax(0, 1fr)) minmax(106px, 1fr); }
  .cval { font-size: 12.5px; }
  .timer-cell .k { max-width: 220px; }
}

/* ------------------------------------------------------------ small phones */
@media (max-width: 420px) {
  .hdr-row { padding: 0 4px; }
  .hcell { padding: 6px 5px; }
  .hcell .v { font-size: 13px; }
  .hcell .k { letter-spacing: .06em; font-size: 9px; }
  .leave { padding: 4px 8px; font-size: 10px; letter-spacing: .04em; }
  .timer-cell .v { font-size: 16px; }
  .jump-btn { min-width: 40px; padding: 0 6px; font-size: 9.5px; letter-spacing: .04em; }
  .bar-title { font-size: 15.5px; }
  .bar-detail { font-size: 12px; }
  .invite-letters { font-size: 46px; }
  .link-row { flex-wrap: wrap; }
  .link-row .btn { flex: 1 1 100%; }
  .presets { padding: 10px 10px 6px; gap: 5px; }
  .pr-h { font-size: 9px; }
}

@media (hover: hover) {
  .btn:hover:not([disabled]) { border-color: var(--hz-line); background: var(--raise-2); }
  .btn.primary:hover:not([disabled]) { background: var(--hz-2); border-color: var(--hz-2); }
  .btn.danger:hover:not([disabled]) { background: var(--red-soft); border-color: var(--red); }
  .icon-btn:hover:not([disabled]) { color: var(--hz); border-color: var(--hz-line); background: var(--raise-2); }
  .icon-btn.danger:hover:not([disabled]) { color: var(--red-2); border-color: var(--red); background: var(--red-soft); }
  .choice:hover:not([disabled]) { border-color: var(--hz); background: var(--raise-2); }
  .opt:hover { border-color: var(--hz); background: var(--raise-2); }
  .preset:hover:not([disabled]) { border-color: var(--hz-line); }
  .seg-btn:hover:not(.on) { color: var(--hz); }
  .who-main:hover .pname { color: var(--hz); }
  .sit-bar:hover .sit-toggle { color: var(--hz); }
  .toast-x:hover { color: var(--text); }
  .ch-reveal.n1 .reveal-choice:hover:not([disabled]) { background: var(--hz-2); }
}

/* ------------------------------------------------------------ motion */
@keyframes pulse { 50% { opacity: .25; } }
@keyframes breathe { 0%, 100% { box-shadow: 0 0 0 1px rgba(245, 197, 24, .55), 0 0 14px -4px rgba(245, 197, 24, .45); } 50% { box-shadow: 0 0 0 2px rgba(245, 197, 24, .95), 0 0 24px 0 rgba(245, 197, 24, .55); } }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes flipDown { 0% { transform: perspective(600px) rotateX(-88deg); opacity: .3; } 60% { opacity: 1; } 100% { transform: perspective(600px) rotateX(0); } }
@keyframes flipIn { 0% { transform: perspective(700px) rotateY(-90deg) scale(.96); } 100% { transform: perspective(700px) rotateY(0) scale(1); } }
@keyframes glint { 0% { background-position: 120% 0; opacity: 1; } 100% { background-position: -60% 0; opacity: 0; } }
@keyframes stamp { 0% { transform: rotate(-5deg) scale(2); opacity: 0; } 70% { opacity: 1; } 100% { transform: rotate(-5deg) scale(1); } }
@keyframes outFlash { 0% { background-color: rgba(255, 93, 79, .28); } 100% { background-color: transparent; } }
@keyframes spinIn { from { transform: rotate(-200deg) scale(.6); opacity: 0; } }
@keyframes dropIn { from { transform: translateY(-6px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ------------------------------------------------------------ round-1 fixes: rules, two-tap leave/kick, invite, final cause */
/* header: "Rules" in every phase; Leave keeps a clear gap from it (phones in play: Leave is at the foot of the page) */
.rules-btn { order: 17; align-self: center; margin: 0 0 0 auto; min-height: 40px; padding: 5px 10px; font-size: 10.5px; }
.rules-btn ~ .leave { margin-left: 12px; }
@media (min-width: 640px) { .rules-btn { order: 0; margin-left: 6px; } }
@media (max-width: 420px) { .rules-btn { padding: 4px 8px; font-size: 10px; letter-spacing: .04em; } }
/* the first tap of a two-tap Leave / Kick: impossible to miss, gone after 4 s */
.btn.leave.armed { background: var(--red); color: #140a08; border-color: var(--red); opacity: 1; }
.icon-btn.armed, .prow .icon-btn.armed { width: auto; min-width: 40px; padding: 0 7px; background: var(--red); border-color: var(--red); color: #140a08; font: 700 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.prow .icon-btn.armed { min-width: 0; padding: 0 5px; font-size: 9px; }
.leave-panel { display: flex; align-items: center; gap: 12px; padding: 12px; }
.leave-panel .leave-text { flex: 1 1 auto; min-width: 0; font-size: 12.5px; line-height: 1.4; color: var(--dim); }
.leave-panel .leave { order: 0; flex: none; margin: 0; min-height: 44px; }
.leave-panel.armed { border-color: var(--red); background: var(--red-soft); }
.leave-panel.armed .leave-text { color: var(--red-2); font-weight: 600; }
@media (max-width: 1179px) { .leave-panel { order: 13; } }
/* "How to play" sheet */
.rules-body { display: grid; gap: 14px; margin-top: 10px; }
.rs-t { font: 700 11px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--hz); margin-bottom: 6px; }
.rs-list { padding-left: 18px; display: grid; gap: 5px; font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
.rules-goal { padding: 10px 14px 0; font-size: 13px; line-height: 1.45; color: var(--text-2); }
.rules-goal b { color: var(--hz); }
@media (max-width: 639px) { .shell.lobby .side-col .rules { order: -1; } }
/* landing opened from an invite link: Join that room is the main button */
.form.invited .invite-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 14px; }
.invite-code-big { font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: .18em; color: var(--hz); }
.invited-row { grid-template-columns: minmax(0, 1fr) auto; margin-top: 14px; }
.form.invited .or { margin: 14px 0 10px; }
/* final: what sealed the door */
.fb-cause { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 10px; margin: 4px 0 12px; padding: 9px 12px; border-left: 3px solid var(--hz); border-radius: 0 3px 3px 0; background: rgba(0, 0, 0, .3); font-size: 14px; line-height: 1.4; color: var(--text); }
.fb-cause-k { font: 700 10px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--hz); }
.fb-cause-t { min-width: 0; overflow-wrap: anywhere; }
.fb-cause.c-vote { border-left-color: var(--red); }
.fb-cause.c-vote .fb-cause-k { color: var(--red-2); }
.fb-cause.c-leave { border-left-color: var(--dim); }
.fb-cause.c-leave .fb-cause-k { color: var(--text-2); }

/* ------------------------------------------------------------ round-2 fixes: briefing, projected track, offline speaker */
/* round 1: the catastrophe and the bunker open the table (dismissible) */
.briefing { border-color: var(--hz-line); background: linear-gradient(180deg, rgba(245, 197, 24, .07), rgba(245, 197, 24, 0) 70%), var(--panel); padding: 12px 14px 12px; display: grid; gap: 7px; }
.brief-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.brief-head-text { min-width: 0; }
.brief-head .k { color: var(--hz); }
.brief-title { font: 800 19px/1.15 var(--display); letter-spacing: .02em; text-transform: uppercase; margin-top: 3px; overflow-wrap: anywhere; }
.brief-head .btn { flex: none; min-height: 36px; }
.brief-text { font-size: 13.5px; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.brief-facts { display: flex; flex-wrap: wrap; gap: 4px 6px; list-style: none; }
.brief-facts li { font-size: 12px; line-height: 1.35; padding: 2px 8px; border: 1px solid var(--line-2); border-radius: 2px; background: var(--raise); color: var(--text-2); overflow-wrap: anywhere; }
.brief-bunker, .brief-feats { font-size: 13px; line-height: 1.45; color: var(--text-2); overflow-wrap: anywhere; }
.brief-bunker .k, .brief-feats .k { margin-right: 6px; }
.brief-bunker b { color: var(--text); }
.brief-beds { font-size: 13px; line-height: 1.4; color: var(--text-2); padding-top: 6px; border-top: 1px dashed var(--line-2); }
.brief-beds b { color: var(--hz); }
@media (max-width: 1179px) { .briefing { order: 2; } }
@media (max-width: 639px) { .brief-title { font-size: 17px; } .brief-text { font-size: 13px; } }
/* round track: a vote cancelled by a special (its ejections move on) */
.rt-cancel .rt-k { color: var(--dim); text-decoration: line-through; }
/* speaking order: a speaker who is offline */
.to-off { border-style: dashed; }
.to-off-tag { font: 700 8.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--orange); margin-left: 2px; }
.to-now .to-off-tag { color: var(--hz-ink); }
/* two-tap Leave / Kick in their first moment, and the picker's Play right after a step change: armed-looking, not yet live */
.btn.leave.armed.settling[disabled], .icon-btn.armed.settling[disabled] { opacity: .8; }
.btn.primary.settling[disabled] { opacity: .7; }
/* the hand's head points to the specials below it */
.hand-sp-link { margin-left: auto; flex: none; font: 700 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--hz); background: var(--hz-soft); border: 1px solid var(--hz-line); border-radius: 2px; padding: 5px 7px; cursor: pointer; }
@media (hover: hover) { .hand-sp-link:hover { background: rgba(245, 197, 24, .2); } }

/* ------------------------------------------------------------ owner features: card chips + popovers (X3) */
/* a special card's title, wherever it appears: a small hazard-yellow outlined chip that opens its rules text */
.card-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 1px 6px 1px 4px;
  font: 700 11.5px/1.35 var(--sans);
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  color: var(--hz-2);
  background: rgba(245, 197, 24, .07);
  border: 1px solid var(--hz-line);
  border-radius: 3px;
  cursor: help;
  vertical-align: baseline;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .12s, border-color .12s;
}
.card-chip .cc-ico { width: 10px; height: 10px; flex: none; color: var(--hz); }
.card-chip .cc-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-chip[aria-describedby] { background: rgba(245, 197, 24, .2); border-color: var(--hz); }
.card-chip.cc-static { cursor: default; }
.card-chip:focus-visible { outline: 2px solid var(--hz); outline-offset: 1px; }
.card-chip.unplayed { color: var(--text-2); border-style: dashed; border-color: var(--line-2); background: transparent; }
.card-chip.unplayed .cc-ico { color: var(--dim); }
.card-title-plain { font-weight: 700; }
/* the table's status column and the seat panels */
.sp-chip.card-chip { font-size: 11px; line-height: 1.3; padding: 1px 6px 1px 4px; border-radius: 3px; }
.sp-chips.wrap .sp-chip.card-chip .cc-t { white-space: normal; overflow: visible; }
.sc-specials.brief li, .sc-specials li:has(> .card-chip) { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.sc-specials.brief li { padding: 0; border: 0; background: none; }
.scs-chip { font-size: 12px; }
/* in running text (the log, the final banner): the chip sits on the line */
.card-chip.in-text { padding: 0 5px 0 3px; font-size: inherit; line-height: 1.3; vertical-align: 0; }
.card-chip.in-text .cc-ico { width: 9px; height: 9px; }
.lt .card-chip.in-text { font-size: 12px; }
.lt-card { color: var(--dim); }
.k-special .lt-card { color: rgba(111, 208, 216, .62); }
.k-airlock .lg, .k-airlock .lt { color: #ff9b8f; }
.k-airlock .lt { font-weight: 600; }
/* my hand and the picker: the title itself is the chip */
.card-chip.cc-lg { font: 800 14.5px/1.2 var(--sans); padding: 2px 8px 2px 6px; }
.card-chip.cc-lg .cc-ico { width: 12px; height: 12px; }
.special:not(.ready) .card-chip.cc-lg { color: var(--text); }
.card-chip.cc-xl { font: 800 21px/1.2 var(--sans); color: var(--hz); padding: 3px 11px 3px 8px; border-width: 1.5px; border-radius: 4px; }
.card-chip.cc-xl .cc-ico { width: 16px; height: 16px; }
.fb-cause-t .card-chip.in-text { font-size: 13px; }
@media (min-width: 1024px) {
  .sp-chip.card-chip { font-size: 10.5px; line-height: 1.25; padding: 0 5px 0 3px; }
  .sp-chip.card-chip .cc-ico { width: 8px; height: 8px; }
}
@media (hover: hover) {
  .card-chip:hover { background: rgba(245, 197, 24, .18); border-color: var(--hz); }
  .card-chip.unplayed:hover { background: rgba(255, 255, 255, .05); border-color: var(--text-2); }
}
@media (pointer: coarse) {
  .card-chip { min-height: 26px; padding-top: 3px; padding-bottom: 3px; }
  .card-chip.in-text { min-height: 0; padding-top: 1px; padding-bottom: 1px; }
}

/* the popover: fixed, above everything (the picker included), never wider than the screen */
.card-pop {
  position: fixed;
  z-index: 90;
  left: 0;
  top: 0;
  width: max-content;
  max-width: min(330px, calc(100vw - 16px));
  padding: 10px 12px 11px;
  background: #1d1b13;
  color: var(--text);
  border: 1px solid var(--hz);
  border-radius: 5px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 0, 0, .6);
  animation: popIn .12s ease-out both;
}
/* a hover (or focus) popover is only a tooltip: a click goes through it to what lies under it (it opens under a
   pointer that is merely resting where the page moved, and would otherwise swallow the next click on a Reveal or a
   target); a pinned one (click or tap) takes the pointer, so it can be scrolled and tapped closed */
.card-pop:not(.pinned) { pointer-events: none; }
.cp-body { max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain; }
.card-pop.cp-special::before {
  content: "";
  position: absolute;
  top: -6px;
  left: calc(var(--ax, 24px) - 6px);
  width: 10px;
  height: 10px;
  background: #1d1b13;
  border-left: 1px solid var(--hz);
  border-top: 1px solid var(--hz);
  transform: rotate(45deg);
}
.card-pop.cp-special.above::before { top: auto; bottom: -6px; transform: rotate(225deg); }
.card-pop.cp-special::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--hazard); border-radius: 4px 4px 0 0; }
.cp-k { font: 700 9.5px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin: 2px 0 4px; }
.cp-t { display: flex; align-items: center; gap: 6px; font: 800 15px/1.2 var(--sans); color: var(--hz-2); overflow-wrap: anywhere; }
.cp-t .cp-ico { width: 13px; height: 13px; color: var(--hz); }
.cp-x { font-size: 13.5px; line-height: 1.45; color: var(--text); margin-top: 6px; overflow-wrap: anywhere; }
.cp-m { font: 10.5px/1.45 var(--mono); color: var(--dim); margin-top: 7px; padding-top: 6px; border-top: 1px dashed var(--line-2); }
/* a characteristic's full text: paper, floating over its own cell */
.card-pop.cp-paper { padding: 6px 9px 8px; background: var(--paper-hi); color: var(--paper-ink); border: 1px solid var(--paper-edge); border-radius: 4px; box-shadow: 0 12px 26px rgba(0, 0, 0, .65); max-width: min(300px, calc(100vw - 16px)); }
.card-pop.cp-paper .cp-t { font: 700 9px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--paper-mut); }
.card-pop.cp-paper .cp-x { margin-top: 3px; font-size: 13px; line-height: 1.32; font-weight: 650; color: var(--paper-ink); }
@keyframes popIn { from { opacity: 0; transform: translateY(-3px); } }
/* a shortened quote in the action bar opens in full */
.clip-pop { cursor: help; text-decoration: underline dotted var(--hz-line); text-underline-offset: 3px; border-radius: 2px; }
.clip-pop[aria-describedby] { background: var(--hz-soft); }

/* ------------------------------------------------------------ owner features: airlock (X1) */
.airlock-strip {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 10px;
  min-width: 0;
  padding: 5px 8px 5px 8px;
  background: repeating-linear-gradient(-45deg, rgba(255, 93, 79, .16) 0 7px, rgba(255, 93, 79, .05) 7px 14px);
  border-top: 1px solid rgba(255, 93, 79, .5);
  animation: airPulse 1.8s ease-in-out infinite;
}
.airlock-badge { display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 3px 8px 3px 6px; border-radius: 3px; background: #c9372c; color: #fff; font: 11.5px/1.2 var(--mono); letter-spacing: .03em; box-shadow: 0 0 0 1px rgba(0, 0, 0, .4); }
.airlock-badge .ab-ico { width: 14px; height: 14px; }
.ab-k { font-weight: 800; letter-spacing: .1em; white-space: nowrap; }
.ab-by { font-family: var(--sans); font-weight: 600; letter-spacing: 0; overflow-wrap: anywhere; }
.ab-note { font-size: 11.5px; line-height: 1.3; color: #ffc4bd; min-width: 0; }
.airlock-strip.on-me .ab-note { color: #fff; font-weight: 700; }
.seat-card .airlock-strip { margin: 0 -8px; padding: 6px 8px; border-bottom: 1px solid rgba(255, 93, 79, .5); }
.seat-card:has(.airlock-strip), .prow:has(.airlock-strip) { border-color: rgba(255, 93, 79, .75); }
@media (min-width: 1024px) {
  /* the table: the strip runs under the target's cards, their name cell spans both lines, the row is marked red */
  .prow:has(.airlock-strip) { background: rgba(255, 93, 79, .07); box-shadow: inset 3px 0 0 var(--red); }
  .prow:has(.airlock-strip) > .who { grid-row: span 2; }
  .prow .airlock-strip { grid-column: 2 / -1; padding: 3px 9px; gap: 2px 10px; border-top: 1px dashed rgba(255, 93, 79, .45); margin-bottom: 2px; }
  .prow .airlock-badge { padding: 2px 7px 2px 5px; font-size: 10.5px; }
  .prow .ab-note { font-size: 11px; }
}
/* every open airlock, at the top of the table */
.airlock-alert { border-color: rgba(255, 93, 79, .6); background: linear-gradient(180deg, rgba(255, 93, 79, .1), rgba(255, 93, 79, .02) 80%), var(--panel); overflow: hidden; }
.airlock-alert::before { content: ""; display: block; height: 4px; background: repeating-linear-gradient(-45deg, var(--red) 0 10px, #0b0b09 10px 20px); }
.aa-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 9px 12px 2px; }
.aa-ico { width: 17px; height: 17px; color: var(--red-2); }
.aa-k { font: 800 12px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--red-2); }
.aa-when { font-size: 11.5px; color: var(--dim); flex: 1 1 200px; }
.aa-list { list-style: none; display: grid; gap: 1px; padding: 4px 0 6px; }
.aa-item { padding: 6px 12px 7px; display: grid; gap: 3px; }
.aa-item + .aa-item { border-top: 1px dashed rgba(255, 93, 79, .3); }
.aa-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.aa-who { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; min-height: 32px; padding: 0; background: none; border: 0; color: inherit; cursor: pointer; text-align: left; }
.aa-name { font: 800 17px/1.2 var(--sans); color: var(--text); overflow-wrap: anywhere; }
.aa-count { font-size: 12px; font-weight: 800; color: #fff; background: #c9372c; padding: 2px 6px; border-radius: 3px; }
.aa-text { font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
.aa-item.on-me .aa-name { color: var(--red-2); }
.aa-item.on-me .aa-text { color: var(--text); }
.aa-item.joinable { background: rgba(255, 93, 79, .08); box-shadow: inset 3px 0 0 var(--red); }
.aa-join { flex: none; }
.btn.danger-solid, .aa-join:not([disabled]) { background: #c9372c; color: #fff; border-color: #c9372c; }
@media (hover: hover) {
  .aa-who:hover .aa-name { color: var(--hz); }
  .btn.danger-solid:hover:not([disabled]), .aa-join:hover:not([disabled]) { background: #e0453a; border-color: #e0453a; }
}
@media (max-width: 1179px) { .airlock-alert { order: 1; } }
/* the action bar's line */
.bar-airlock { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; font-size: 12px; line-height: 1.35; color: #ffc4bd; min-width: 0; }
.bar-airlock .ba-ico { width: 13px; height: 13px; color: var(--red-2); align-self: center; }
.ba-k { font: 800 9.5px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--red-2); flex: none; }
.ba-t { min-width: 0; overflow-wrap: anywhere; }
.ba-t b { color: #fff; }
.bar-airlock.joinable .ba-t, .bar-airlock.on-me .ba-t { color: #fff; font-weight: 600; }
/* my Airlock card when it would close an open airlock */
.special.joins { border: 3px solid transparent; background: linear-gradient(180deg, #2e1a15, #1c1411) padding-box, repeating-linear-gradient(-45deg, var(--red) 0 7px, #16100e 7px 14px) border-box; }
.sp-join { display: flex; gap: 7px; align-items: flex-start; margin: 2px 0 6px; padding: 7px 9px; font-size: 12.5px; line-height: 1.4; color: #ffd7d2; background: rgba(255, 93, 79, .12); border-left: 3px solid var(--red); border-radius: 0 3px 3px 0; }
.sp-join b { color: #fff; }
.sp-join-ico { width: 15px; height: 15px; color: var(--red-2); margin-top: 1px; }
/* the picker: the players whose airlock this card closes */
.airlock-callout { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 10px; border-left-color: var(--red); background: rgba(255, 93, 79, .1); }
.airlock-callout .ac-ico { width: 16px; height: 16px; color: var(--red-2); margin-top: 1px; }
.pick-note { font-size: 12.5px; color: var(--text-2); line-height: 1.45; margin: -2px 0 10px; }
.opt.join { border: 2px solid var(--red); background: linear-gradient(180deg, rgba(255, 93, 79, .2), rgba(255, 93, 79, .07)), var(--raise); box-shadow: 0 0 16px -6px rgba(255, 93, 79, .7); }
.opt.join .opt-sub { color: #ffc4bd; font-weight: 600; }
.opt.join .opt-seat { color: var(--red-2); }
.confirm.join { background: rgba(255, 93, 79, .12); border-left-color: var(--red); }
.btn.primary.join { background: #c9372c; border-color: #c9372c; color: #fff; }
@media (hover: hover) { .btn.primary.join:hover:not([disabled]) { background: #e0453a; border-color: #e0453a; } }
@keyframes airPulse { 0%, 100% { background-color: rgba(255, 93, 79, 0); } 50% { background-color: rgba(255, 93, 79, .1); } }
/* A button that carries a player's name ("Play Airlock: {name} is out", "Join: throw {name} out") wraps instead of
   running off a 360 px phone: a name may be 20 characters, or 20 wide emoji. */
.modal-actions [data-testid="special-confirm-btn"], .aa-join { white-space: normal; overflow-wrap: anywhere; text-align: center; max-width: 100%; min-width: 0; line-height: 1.25; }
.modal-actions [data-testid="special-confirm-btn"] { flex: 0 1 auto; }
.aa-join { flex: 0 1 auto; }
/* Every Airlock of the game is played: an open airlock can only jam, so it is shown calm, as information, not a threat */
.airlock-alert.spent { border-color: var(--line-2); background: var(--panel); }
.airlock-alert.spent::before { background: repeating-linear-gradient(-45deg, var(--dim) 0 10px, #0b0b09 10px 20px); opacity: .5; }
.airlock-alert.spent .aa-k, .airlock-alert.spent .aa-ico { color: var(--text-2); }
.airlock-alert.spent .aa-count { background: var(--raise); color: var(--text-2); }
.airlock-alert.spent .aa-item.on-me .aa-name { color: var(--text); }
.airlock-strip.spent { animation: none; background: rgba(255, 255, 255, .03); border-top-color: var(--line-2); }
.airlock-strip.spent .airlock-badge { background: var(--raise); color: var(--text-2); }
.airlock-strip.spent .ab-note, .airlock-strip.spent.on-me .ab-note { color: var(--dim); font-weight: 400; }
.seat-card:has(.airlock-strip.spent), .prow:has(.airlock-strip.spent) { border-color: var(--line-2); }
@media (min-width: 1024px) { .prow:has(.airlock-strip.spent) { background: none; box-shadow: none; } }
.bar-airlock.spent, .bar-airlock.spent .ba-k, .bar-airlock.spent .ba-ico { color: var(--dim); }
.bar-airlock.spent .ba-t b { color: var(--text-2); }

/* ------------------------------------------------------------ owner features: lobby game length (X4) */
.estimate { margin: 12px 12px 0; padding: 10px 12px 11px; border: 1px solid var(--hz-line); border-radius: 4px; background: linear-gradient(180deg, rgba(245, 197, 24, .08), rgba(245, 197, 24, .02)); display: grid; gap: 4px; }
.est-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.est-row .k { color: var(--hz); }
.est-main { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.est-v { font-size: 24px; line-height: 1.1; color: var(--text); }
.est-range { font-size: 12px; color: var(--dim); }
.est-sub { font-size: 12px; color: var(--text-2); }
.est-note { font-size: 11.5px; color: var(--dim); line-height: 1.4; }

/* ------------------------------------------------------------ short laptop screens (a 768p or 1080p display zoomed) */
/* In a vote the host's Next does the same as Close vote: a small button beside it, not a second big one. */
.host-btn.vote-dup { min-width: 0; flex: 0 0 auto; }
/* 1280×600 or 1093×530: a 16-player vote's bar took a third of the height; tighter choices keep more of the table. */
@media (min-width: 640px) and (max-height: 700px) {
  .bar-inner { padding-top: 7px; padding-bottom: max(9px, env(safe-area-inset-bottom, 0px)); }   /* a phone on its side: the home indicator */
  .bar-title { font-size: 16px; }
  .bar-choices { gap: 4px; margin-top: 6px; }
  .bar-choices.ch-vote { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
  .vote-choice { min-height: 34px; padding: 4px 9px; }
  .host-btn { min-height: 38px; padding: 4px 10px; }
}

/* ------------------------------------------------------------ narrator (public/narrator.js; opt-in, per device) */
/* header: the speaker button (yellow when on; its waves pulse while a clip plays) and its popover */
.narr-hdr { order: 17; position: relative; align-self: center; display: flex; margin: 0 0 0 auto; }
.narr-hdr ~ .rules-btn { margin-left: 6px; }
@media (min-width: 640px) { .narr-hdr { order: 0; margin-left: 6px; } }
/* phones in play: row 1 (room, round, phase, beds, Rules) is full, so the button ends the row below, after the jump
   chips, and the timer gives way (a long label shortens) so that row never wraps: the header keeps its height */
@media (max-width: 639px) {
  .narr-hdr.in-game { order: 22; margin: 0 0 0 4px; }
  .narr-hdr.in-game ~ .rules-btn { margin-left: auto; }
  .hdr-row:has(> .narr-hdr.in-game) > .timer-cell { flex-basis: 80px; }   /* > the 12 px the row break leaves on its line */
}
/* tablets in play: the first row wraps easily, so the button sits at the right end of the row of jump chips (taken
   out of the flow: no row ever wraps because of it) */
@media (min-width: 640px) and (max-width: 1179px) {
  .hdr-row:has(> .narr-hdr.in-game) { position: relative; }
  .narr-hdr.in-game { position: absolute; right: 8px; bottom: 4px; margin: 0; }
}
.narr-btn { min-height: 40px; min-width: 40px; padding: 5px 9px; font-size: 10.5px; gap: 6px; color: var(--text-2); }
.narr-hdr.is-on .narr-btn { color: var(--hz); border-color: var(--hz-line); }
.narr-hdr.is-open .narr-btn { background: var(--raise-2); border-color: var(--hz); }
.narr-ico { width: 18px; height: 18px; flex: none; display: block; }
.narr-hdr.is-live .narr-waves { animation: narrWave 1.1s ease-in-out infinite; }
@keyframes narrWave { 50% { opacity: .25; } }
.narr-btn-t { display: none; }
.narr-hdr.in-lobby .narr-btn-t { display: inline; }
@media (min-width: 1500px) { .narr-hdr.in-game .narr-btn-t { display: inline; } }
@media (max-width: 360px) { .narr-hdr.in-lobby .narr-btn-t { display: none; } }
.narr-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 5;
  width: 320px;
  display: grid;
  gap: 10px;
  padding: 12px 12px 12px;
  background: var(--panel-2);
  border: 1px solid var(--hz-line);
  border-top: 3px solid var(--hz);
  border-radius: 3px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .7);
  text-align: left;
  animation: dropIn .14s ease-out;
}
@media (max-width: 639px) {
  .narr-pop { position: fixed; top: calc(var(--top-h, 0px) + 6px); left: 8px; right: 8px; width: auto; }
}
.narr-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -4px -4px -4px 0; }
.narr-pop-k { font: 700 11.5px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--hz); }
.narr-x { width: 40px; height: 40px; flex: none; display: grid; place-items: center; padding: 0; font: 400 22px/1 var(--sans); color: var(--dim); background: none; border: 1px solid transparent; border-radius: 3px; cursor: pointer; }
.narr-pop-lead { font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
.narr-switch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 2.8em;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 8px 10px 8px 12px;
  font: 600 13px/1.3 var(--sans);
  color: var(--text);
  text-align: left;
  background: var(--raise);
  border: 1px solid var(--line-2);
  border-radius: 3px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.narr-switch.is-on { background: var(--hz-soft); border-color: var(--hz); }
.narr-track { position: relative; width: 40px; height: 22px; border-radius: 11px; background: #2c2b24; border: 1px solid var(--line-2); }
.narr-knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--dim); transition: transform .15s, background-color .15s; }
.narr-switch.is-on .narr-track { background: rgba(245, 197, 24, .25); border-color: var(--hz); }
.narr-switch.is-on .narr-knob { transform: translateX(18px); background: var(--hz); }
.narr-switch-v { font: 700 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); text-align: right; }
.narr-switch.is-on .narr-switch-v { color: var(--hz); }
.narr-vol { display: grid; grid-template-columns: auto minmax(0, 1fr) 3.2em; align-items: center; gap: 10px; min-height: 44px; }
.narr-vol-k { font: 700 10px/1 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--dim); }
.narr-range { width: 100%; height: 40px; margin: 0; accent-color: var(--hz); cursor: pointer; background: transparent; }
.narr-vol-v { font: 700 12px/1 var(--mono); color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.narr-vol-na { grid-column: 2 / -1; font-size: 12.5px; line-height: 1.35; color: var(--text-2); }   /* iOS: no page volume */
.narr-pop-play { display: flex; align-items: center; gap: 10px; min-width: 0; }
.narr-pop-clip { min-width: 0; font-size: 13px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.narr-pop-note { font-size: 12.5px; line-height: 1.4; color: var(--text); padding: 6px 9px; border-left: 3px solid var(--hz); background: rgba(0, 0, 0, .28); border-radius: 0 3px 3px 0; }
.narr-pop-note.is-error { border-left-color: var(--red); color: var(--red-2); }
/* ▶ Listen / ■ Stop next to the catastrophe title (same width in every state: nothing moves) */
.narr-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.narr-title-row > :first-child { min-width: 0; }
.sit-cat .narr-title-row { margin: 5px 0 8px; }
.sit-cat .narr-title-row .sit-title { margin: 0; }
.situation.rail .sit-cat .narr-title-row { margin: 3px 0 6px; }
.brief-head-text .narr-title-row { margin-top: 3px; }
.narr-title-row .brief-title { margin-top: 0; }
.narr-listen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: none;
  min-height: 40px;
  min-width: 112px;
  padding: 0 12px;
  font: 700 11px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hz);
  background: var(--hz-soft);
  border: 1px solid var(--hz-line);
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .12s, border-color .12s, color .12s;
}
.narr-listen.is-on { background: var(--hz); color: var(--hz-ink); border-color: var(--hz); }
.narr-listen.is-pending { visibility: hidden; }
.narr-listen.is-loading .narr-glyph { animation: pulse 1s ease-in-out infinite; }
.narr-listen.is-error { color: var(--red-2); border-color: rgba(255, 93, 79, .5); background: var(--red-soft); }
.narr-glyph { width: 11px; height: 11px; flex: none; display: block; }
/* autoplay refused by the browser: one tap plays it (fixed, above the action bar: the page does not move) */
.narr-pill {
  position: fixed;
  z-index: 60;
  left: 12px;
  right: 12px;
  bottom: calc(var(--bar-h, 0px) + 12px);
  width: fit-content;
  max-width: calc(100vw - 24px);
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  color: var(--hz-ink);
  background: var(--hz);
  border-radius: 4px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 0, 0, .5);
  animation: dropIn .2s ease-out;
}
.narr-pill[hidden] { display: none; }
.narr-pill-go { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 54px; padding: 8px 14px 8px 16px; color: inherit; background: none; border: 0; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.narr-pill-go .narr-glyph { width: 16px; height: 16px; }
.narr-pill-text { display: grid; gap: 3px; min-width: 0; }
.narr-pill-t { font: 800 13px/1.15 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.narr-pill-sub { font-size: 12px; line-height: 1.3; opacity: .8; overflow-wrap: anywhere; }
.narr-pill-x { flex: none; width: 46px; padding: 0; font: 400 22px/1 var(--sans); color: inherit; background: none; border: 0; border-left: 1px solid rgba(0, 0, 0, .25); cursor: pointer; }
@media (min-width: 640px) { .narr-pill { right: auto; left: 16px; margin: 0; } }
@media (hover: hover) {
  .narr-listen:hover { border-color: var(--hz); background: rgba(245, 197, 24, .2); }
  .narr-listen.is-on:hover { background: var(--hz-2); }
  .narr-switch:hover { border-color: var(--hz-line); }
  .narr-x:hover { color: var(--text); border-color: var(--line-2); }
  .narr-pill-go:hover, .narr-pill-x:hover { background: rgba(0, 0, 0, .08); }
}

/* ------------------------------------------------------------ SPEC §11 X9 profile tag, X10 report links + version */
/* the landing's "Profile: p2" (only with ?profile=): small, next to the kicker, never in the way */
.brand-kicker:has(.profile-tag) { flex-wrap: wrap; row-gap: 6px; }
.profile-tag { flex: none; margin-left: auto; padding: 3px 7px 2px; font: 700 10px/1.2 var(--mono); letter-spacing: .08em; text-transform: none; color: var(--cyan, #6fd0d8); border: 1px dashed rgba(111, 208, 216, .55); border-radius: 2px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* the two links and the version: small, secondary, quiet */
.rep-links { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.rep-link { font-size: 12px; color: var(--dim); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; overflow-wrap: anywhere; }
.rep-link::after { content: " ↗"; font-size: .9em; color: var(--faint); }
.rep-link:focus-visible { outline: 2px solid var(--hz); outline-offset: 2px; border-radius: 2px; }
.app-version { font-size: 11px; color: var(--faint); letter-spacing: .04em; white-space: nowrap; }
@media (hover: hover) { .rep-link:hover { color: var(--hz); text-decoration-color: var(--hz-line); } }
@media (pointer: coarse) { .rep-link { display: inline-block; padding: 7px 0; } }   /* a finger-sized target, same look */
/* landing footer: the credit line, then the links and the version */
.landing-foot { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.foot-meta { display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 14px; }
/* the rules sheet: one quiet line at its foot */
.rs-feedback { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding-top: 12px; border-top: 1px dashed var(--line-2); font-size: 12px; color: var(--faint); }
/* the final screen: under the two columns */
.final-feedback { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 14px; padding-top: 10px; border-top: 1px dashed rgba(255, 255, 255, .12); font-size: 12px; color: var(--faint); }
/* header menu "⋯": after Rules (phones: on Rules' line; wider: in the flow before Leave) */
.hdr-menu { order: 17; position: relative; align-self: center; display: flex; margin: 0 0 0 4px; }
@media (min-width: 640px) { .hdr-menu { order: 0; margin-left: 6px; } }
.hdr-menu-btn { min-height: 40px; min-width: 36px; padding: 0 8px; color: var(--text-2); }
.hm-dots { font: 700 16px/1 var(--sans); letter-spacing: 0; }
.hdr-menu.is-open .hdr-menu-btn { background: var(--raise-2); border-color: var(--hz); color: var(--hz); }
.hdr-menu-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 6;
  width: 280px;
  display: grid;
  gap: 10px;
  padding: 12px;
  background: var(--panel-2);
  border: 1px solid var(--hz-line);
  border-top: 3px solid var(--hz);
  border-radius: 3px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .7);
  text-align: left;
  animation: dropIn .14s ease-out;
}
@media (max-width: 639px) {
  .hdr-menu-pop { position: fixed; top: calc(var(--top-h, 0px) + 6px); left: auto; right: 8px; width: min(300px, calc(100vw - 16px)); }
}
.hm-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -4px -4px -4px 0; }
.hm-k { font: 700 11.5px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--hz); }
.hm-x { width: 40px; height: 40px; flex: none; display: grid; place-items: center; padding: 0; font: 400 22px/1 var(--sans); color: var(--dim); background: none; border: 1px solid transparent; border-radius: 3px; cursor: pointer; }
.hm-lead { font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
.hdr-menu-pop .rep-links { display: grid; gap: 2px; }
.hdr-menu-pop .rep-link { display: flex; align-items: center; min-height: 40px; padding: 0 10px; font-size: 13.5px; color: var(--text); text-decoration: none; background: var(--raise); border: 1px solid var(--line-2); border-radius: 3px; }
.hdr-menu-pop .rep-link::after { margin-left: auto; }
.hm-foot { display: flex; justify-content: flex-end; }
@media (hover: hover) {
  .hm-x:hover { color: var(--text); border-color: var(--line-2); }
  .hdr-menu-pop .rep-link:hover { border-color: var(--hz-line); background: var(--raise-2); }
}

/* ------------------------------------------------------------ the language switch (SPEC §11 X5.7; design §9.3) */
/* one button, EN | RU, the current language lit: on the landing page above the brand, and in the header right before
   Rules. Never disabled. (After the narrator section on purpose: its rules place Rules on phones, these override them.) */
.lang-switch {
  appearance: none;
  display: inline-flex;
  align-items: stretch;
  flex: none;
  padding: 0;
  margin: 0;
  min-height: 32px;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  background: transparent;
  font: 700 10.5px/1 var(--mono);
  letter-spacing: .08em;
  color: var(--dim);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lang-switch .ls-opt { display: inline-flex; align-items: center; justify-content: center; padding: 0 7px; }
.lang-switch .ls-opt.on { background: var(--hz-soft); color: var(--hz); }
.lang-switch .ls-opt + .ls-opt { border-left: 1px solid var(--line-2); }
.lang-switch:focus-visible { outline: 2px solid var(--hz); outline-offset: 2px; }
/* a switch in a room waits for the server's answer (a slow link): after a moment the button pulses until it lands */
.lang-switch.is-pending { animation: lsPending 1.1s ease-in-out .6s infinite; }
@keyframes lsPending { 50% { opacity: .45; } }
@media (hover: hover) { .lang-switch:hover { border-color: var(--hz-line); color: var(--text-2); } }
/* the header: in the first row, right before Rules */
.ls-header { order: 17; align-self: center; margin: 0 0 0 auto; min-height: 40px; }
.narr-hdr ~ .ls-header { margin-left: 6px; }
.ls-header ~ .rules-btn { margin-left: 6px; }
@media (min-width: 640px) { .ls-header { order: 0; margin-left: 6px; } }
/* phones: a 2-letter pill (the language a tap switches to), 44 px wide. In the lobby it is in the top row, before
   Rules. In play that row is full (room, round, phase, beds, Rules, ⋯: one more pill wrapped Rules onto a third header
   row), so there it ends the row below, after the jump chips and before the narrator. The timer cell gives way (the
   row never wraps: the header keeps its height), so its label sits above the clock, where it has the cell's whole
   width («Ход: Оля», "Kai's turn", "Discussion": beside the clock it kept 2–3 letters) */
@media (max-width: 639px) {
  .ls-header { min-width: 44px; justify-content: center; }
  .ls-header .ls-opt.on { display: none; }
  .ls-header .ls-opt { padding: 0 10px; }
  .ls-header .ls-opt + .ls-opt { border-left: 0; }
  .shell.game .ls-header { order: 21; margin: 0 0 0 4px; }
  .hdr-row:has(> .narr-hdr.in-game):has(> .ls-header) > .timer-cell { flex-basis: 64px; }   /* (80 px for the narrator alone) */
  .shell.game .timer-cell { flex-direction: column; align-items: stretch; justify-content: center; gap: 2px; padding: 3px 4px; }
  .shell.game .timer-cell .v { line-height: 1.05; }
}
/* tablets in play: the first row wraps easily, so the switch sits at the right end of the row of jump chips, left of the
   narrator (taken out of the flow like it: no row ever wraps because of it) */
@media (min-width: 640px) and (max-width: 1179px) {
  .hdr-row:has(> .jump) { position: relative; }
  .hdr-row:has(> .jump) > .ls-header { position: absolute; right: 8px; bottom: 4px; margin: 0; }
  .hdr-row:has(> .jump):has(> .narr-hdr.in-game) > .ls-header { right: 56px; }
}
/* phones in the lobby: the top row keeps room, phase, the narrator, the pill, Rules, ⋯ and Leave on one line: up to
   440 px the narrator's button is its icon (as at 360 px before), and on small phones the gaps and the buttons'
   padding give way a little */
@media (max-width: 440px) { .shell.lobby .narr-hdr.in-lobby .narr-btn-t { display: none; } }
@media (max-width: 420px) {
  .shell.lobby .ls-header { min-width: 40px; }
  .shell.lobby .ls-header .ls-opt { padding: 0 8px; }
  .shell.lobby .narr-hdr ~ .ls-header, .shell.lobby .ls-header ~ .rules-btn { margin-left: 4px; }
  .shell.lobby .rules-btn ~ .leave { margin-left: 6px; }
  .shell.lobby .rules-btn, .shell.lobby .hdr .leave { padding: 4px 6px; }
}
/* the landing page: a row of its own above the brand, right-aligned (on screen at 360 × 640, above the form) */
.landing-top { display: flex; justify-content: flex-end; width: min(1140px, 100%); margin: 0 auto; padding: 10px 16px 0; }
@media (min-width: 900px) { .landing-top { padding: 14px 32px 0; } }
.ls-landing { min-height: 36px; }
.ls-landing .ls-opt { padding: 0 11px; }

/* Russian (design §14): the condensed display faces have no Cyrillic on Apple devices ("DIN Condensed"), so a Russian
   heading would fall back letter by letter to a wider font while its digits stayed condensed. In ru the display face
   is the system font, heavier and tighter, the same on every device. */
html:lang(ru) { --display: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif; }
html:lang(ru) .stamp-tag { font-weight: 800; letter-spacing: .06em; }
html:lang(ru) .sg-title { font-weight: 800; font-size: 21px; letter-spacing: .02em; }
html:lang(ru) .fc-title { font-weight: 800; font-size: 21px; letter-spacing: .01em; }
html:lang(ru) .fb-title { font-weight: 800; letter-spacing: .01em; }
html:lang(ru) .brief-title { letter-spacing: 0; }
/* Russian header words run longer ("Голосование", "Правила", "Койки / в игре"): on phones the top row's cells, labels
   and Rules button give up a little padding and tracking, so the row keeps Rules and ⋯ in more phases (phones and
   small tablets) */
@media (max-width: 799px) {
  html:lang(ru) .hdr-row > .hcell { padding-left: 4px; padding-right: 4px; }
  html:lang(ru) .hdr-row > .hcell .k { letter-spacing: .02em; }
  html:lang(ru) .hdr-row > .rules-btn { padding-left: 6px; padding-right: 6px; letter-spacing: .02em; }
}
@media (max-width: 420px) {
  html:lang(ru) .hdr-row > .hcell .v { font-size: 12.5px; }
}
/* Russian host buttons on small phones: «Закрыть голосование» wrapped onto two lines in its half of the bar (141 px),
   which pushed the vote buttons below the bar's fold in a 16-player vote. A little smaller and tighter, it fits. */
@media (max-width: 420px) {
  html:lang(ru) .bar-host .b-main { font-size: 11px; letter-spacing: .02em; }
}
/* Russian special titles in the table's status column (desktop matrix, about 100 px wide): «Сыворотка правды»,
   «Вечерние курсы» kept 7 letters. In ru the column is a little wider (each card column gives up 2–3 px), so most
   titles fit on their line and the status line («через 3 · 5/8») stops wrapping, and a longer title takes a second
   line («Украденный / дневник»), breaking between words (a word too long for the line is hyphenated where the browser
   has a Russian dictionary, «Рентгенов-ские», and else breaks inside it) */
@media (min-width: 1024px) {
  html:lang(ru) .brow { grid-template-columns: minmax(150px, 1.45fr) repeat(8, minmax(0, 1fr)) minmax(118px, 1.22fr); }
  html:lang(ru) .board.with-adm .brow { grid-template-columns: minmax(172px, 1.6fr) repeat(8, minmax(0, 1fr)) minmax(112px, 1.15fr); }
  html:lang(ru) .prow .st .sp-chip.card-chip { align-items: flex-start; }
  html:lang(ru) .prow .st .sp-chip.card-chip .cc-ico { margin-top: 3px; }
  html:lang(ru) .prow .st .sp-chip.card-chip .cc-t {
    white-space: normal; overflow-wrap: anywhere; hyphens: auto;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
}
@media (min-width: 1180px) and (max-width: 1439px) {
  html:lang(ru) .board.with-adm .brow { grid-template-columns: minmax(166px, 1.5fr) repeat(8, minmax(0, 1fr)) minmax(108px, 1.08fr); }
}
@media (min-width: 1500px) {
  html:lang(ru) .brow { grid-template-columns: minmax(160px, 1.4fr) repeat(8, minmax(0, 1fr)) minmax(130px, 1.22fr); }
  html:lang(ru) .board.with-adm .brow { grid-template-columns: minmax(180px, 1.5fr) repeat(8, minmax(0, 1fr)) minmax(126px, 1.22fr); }
}

/* ------------------------------------------------------------ touch screens: finger-sized targets (≥ 40 px) */
/* Buttons whose height sets their row's grow a little; small chips and links keep their look and get a transparent hit
   area around them instead (::before), so nothing moves. */
@media (pointer: coarse) {
  .ls-landing { min-height: 40px; }
  .brief-head .btn { min-height: 40px; }
  .card-chip:not(.in-text), .hand-sp-link, .aa-who, .rep-link, .hdr-menu-btn { position: relative; }
  .sp-chip.card-chip { overflow: visible; }   /* (its title ellipsizes itself: .cc-t) */
  .card-chip:not(.in-text)::before, .hand-sp-link::before, .aa-who::before, .rep-link::before {
    content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 40px; min-height: 100%; transform: translateY(-50%);
  }
  /* ⋯ (36 px wide): its row is full on phones, so it keeps its width and its hit area reaches into the gaps beside it */
  .hdr-menu-btn::before { content: ""; position: absolute; top: 0; bottom: 0; left: -3px; right: -3px; }
}