/* FORK: 2035, "Game night": a printed board on an oak table. Colours, fonts and materials are the approved mock's
   (docs/reference/ui-mock-desktop.dc.html and ui-mock-phone.dc.html). */

:root {
  --oak: #5e3c22;
  --grain: url("/wood.svg"); /* five oak planks with their grain, seams and knots, a 1600×1000 tile */
  --teal: #1f5f66; --teal-deep: #174a50; --teal-ink: #d6ecea; --teal-dim: #9fc3c0;
  --mustard: #e8b23a; --mustard-deep: #a87b17;
  --tomato: #d8442f; --rust: #9c3a1e;
  --kraft: #c9a272; --paper: #f1ead8; --paper-edge: #b8a988; --paper-line: #d8cdb2;
  --sticky: #f6e27a; --sticky-ink: #7a6a2a;
  --ink: #241a12; --ink-soft: #5c4a33;
  --type: 'Bricolage Grotesque', system-ui, sans-serif;
  --hand: 'Caveat', 'Comic Sans MS', cursive;
  color-scheme: light;
}
/* Bricolage Grotesque has no Cyrillic, so in Bulgarian every letter fell back to the system font while digits stayed in Bricolage: one
   line, two typefaces. Bulgarian gets one face for all of it, a grotesque with the same width and optical-size axes (the browser downloads
   it only on a Bulgarian page). */
:root:lang(bg) { --type: 'Roboto Flex', system-ui, sans-serif; }
/* the seats' pawn colours (--c) and their wooden underside (--cd), up to seven seats: each told apart from the others, and seen on the
   teal board and on paper (styles.test.ts) */
.f0 { --c: #e8743f; --cd: #9c4520; }
.f1 { --c: #5b8bd6; --cd: #2f5a9e; }
.f2 { --c: #6cc08a; --cd: #3d8a58; }
.f3 { --c: #b07ad6; --cd: #7a4aa0; }
.f4 { --c: #ecc94b; --cd: #9a7b14; }
.f5 { --c: #e46a9e; --cd: #a3315f; }
.f6 { --c: #4fd1d9; --cd: #1d8189; }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--oak) var(--grain); min-height: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; font-family: var(--type); color: var(--ink);
  /* a lamp over the middle of the table, the edges falling into shadow, the table's old marks (marks.svg: coffee rings, scratches, a
     pencil tally), then the oak; all fixed to the window, as the rail's darker oak is, so the two line up */
  background:
    radial-gradient(110% 80% at 50% 28%, rgba(255, 214, 160, .1), transparent 62%),
    radial-gradient(150% 115% at 50% 42%, transparent 52%, rgba(12, 6, 2, .55)),
    url("/marks.svg") center / cover no-repeat,
    var(--oak) var(--grain);
  background-attachment: fixed;
}
/* lamplight: the middle of the table is brighter than its edges */
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 35%, rgba(255, 220, 160, .07), transparent 45%, rgba(0, 0, 0, .3)); }
#app { position: relative; }
button, input, select { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--mustard); outline-offset: 2px; }
.paper :focus-visible, .chat :focus-visible, .rules :focus-visible { outline-color: var(--teal); }
.chat-head :focus-visible { outline-color: var(--mustard); } /* the chat's head is teal */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.page { max-width: 1240px; margin: 0 auto; padding: 16px 24px 48px; }
.topbar { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-height: 44px; margin-bottom: 16px; }

/* ---- materials */

.board {
  position: relative; background: var(--teal); color: var(--teal-ink); border-radius: 6px; padding: 30px 34px;
  outline: 6px solid var(--teal-deep); box-shadow: 0 2px 0 var(--teal-deep), 0 18px 34px rgba(0, 0, 0, .5);
}
.board::before { content: ''; position: absolute; inset: 10px; border: 2px solid var(--mustard); border-radius: 3px; pointer-events: none; }
.board > * { position: relative; }
.board-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 20px; }
.brand { margin: 0; font-weight: 800; font-size: 30px; line-height: 1; letter-spacing: -.01em; color: var(--mustard); }
.board-sub { margin: 0; font-size: 15px; font-weight: 400; color: var(--teal-ink); }
.brand-ink { margin: 0; font-weight: 800; font-size: 18px; letter-spacing: -.01em; color: var(--teal); }

.paper { background: var(--paper); color: var(--ink); border-radius: 8px; box-shadow: 0 10px 24px rgba(0, 0, 0, .45); }
.kraft { background: var(--kraft); }

/* a name on masking tape */
.tape {
  display: inline-block; max-width: 100%; padding: 3px 16px 1px; overflow-wrap: anywhere;
  font-family: var(--hand); font-weight: 700; font-size: 30px; line-height: 1.1; color: var(--ink);
  background: var(--paper) linear-gradient(180deg, rgba(255, 255, 255, .35), transparent 40%, rgba(120, 90, 40, .06));
  box-shadow: 0 2px 3px rgba(0, 0, 0, .3);
}
.tilt0 { transform: rotate(-2deg); }
.tilt1 { transform: rotate(1.5deg); }
.tilt2 { transform: rotate(2deg); }
.tilt3 { transform: rotate(-1deg); }
.tilt4 { transform: rotate(1deg); }
.tilt5 { transform: rotate(-1.5deg); }
.tilt6 { transform: rotate(2.5deg); }

.sticky {
  margin: 0; padding: 12px 14px; background: var(--sticky); color: var(--ink); transform: rotate(-2deg);
  font-family: var(--hand); font-size: 23px; line-height: 1.05; box-shadow: 3px 5px 8px rgba(0, 0, 0, .35);
}

/* a wooden pawn; an outline while its seat is empty */
.pawn { display: inline-block; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--c); box-shadow: 0 3px 0 var(--cd); }
.pawn.empty { background: transparent; box-shadow: none; border: 2px dashed var(--c); }

/* chunky board-game buttons */
.btn {
  min-height: 46px; padding: 0 20px; border: 0; border-radius: 10px; background: var(--mustard); color: var(--ink);
  font-weight: 800; font-size: 16px; box-shadow: 0 4px 0 var(--mustard-deep); transition: transform .08s, box-shadow .08s;
}
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--mustard-deep); }
.btn:disabled { opacity: .6; cursor: default; }
.btn-big { min-height: 52px; font-size: 18px; }
.btn-paper { background: var(--paper); font-weight: 700; box-shadow: 0 3px 0 var(--paper-edge); }
.btn-paper:active:not(:disabled) { box-shadow: 0 1px 0 var(--paper-edge); }
.btn-small { min-height: 44px; padding: 0 14px; font-size: 14px; }
.pill {
  min-height: 44px; padding: 0 18px; border: 0; border-radius: 22px; background: var(--paper); color: var(--ink);
  font-weight: 700; font-size: 15px; box-shadow: 0 3px 0 var(--paper-edge);
}
.round-btn {
  flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border: 2px solid currentColor; border-radius: 50%; background: transparent; color: inherit;
}

.field {
  min-height: 46px; padding: 0 12px; border: 2px solid rgba(36, 26, 18, .25); border-radius: 10px;
  background: var(--paper); color: var(--ink); font-size: 16px;
}
input.field { width: 100%; }
.hint { display: flex; justify-content: space-between; gap: 12px; margin: 0; font-size: 14px; color: var(--ink-soft); }
.hint:empty { display: none; }
.hint.error { color: var(--rust); font-weight: 600; }

/* the connection's note ("reconnecting…"), a scrap of kraft paper; nothing when all is well */
.link-note { margin: 0 auto 0 0; padding: 0 10px; font-family: var(--hand); font-size: 22px; color: var(--ink); background: var(--kraft); transform: rotate(-2deg); box-shadow: 0 2px 3px rgba(0, 0, 0, .3); }
.link-note:empty { padding: 0; background: none; box-shadow: none; }
.center-note { margin: 18vh 0 0; text-align: center; font-family: var(--hand); font-size: 32px; color: var(--paper); }
.center-card { width: min(520px, 100%); margin: 10vh auto 0; padding: 30px; display: flex; flex-direction: column; gap: 12px; }
.center-card h1 { margin: 0; font-size: 26px; line-height: 1.15; }
.center-card p { margin: 0; }

/* ---- the name gate (and the owner's login) */

.gate { display: flex; justify-content: center; padding: 5vh 0 24px; }
.place-card { width: min(460px, 100%); padding: 28px 30px 30px; display: flex; flex-direction: column; gap: 14px; transform: rotate(-1deg); }
.place-card h1, .place-card h2 { margin: 0; font-size: 28px; font-weight: 800; line-height: 1.1; }
.gate-seat { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink-soft); }
.tape-input {
  width: 100%; min-height: 60px; padding: 4px 16px; border: 0; border-radius: 0; transform: rotate(-1.5deg);
  font-family: var(--hand); font-weight: 700; font-size: 36px; color: var(--ink);
  background: #e9dcb9 linear-gradient(180deg, rgba(255, 255, 255, .4), transparent 45%, rgba(120, 90, 40, .08));
  box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
}
.count { flex: none; font-variant-numeric: tabular-nums; }

/* ---- the lobby */

.lobby { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; align-items: start; }
.lobby-board { display: flex; flex-direction: column; gap: 28px; min-height: 460px; transform: rotate(-.6deg); }
.seats { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 24px; }
.seat { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
.seat.waiting .tape { color: var(--ink-soft); font-weight: 500; background-color: #d9cfb6; }
.seat-faction { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--teal-ink); }
.lobby-bots { align-self: flex-end; max-width: 280px; transform: rotate(3deg); }
.lobby-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; }
.lobby-clock { margin: 0; font-family: var(--hand); font-size: 26px; color: var(--paper); transform: rotate(-2deg); }
.lobby-host { margin: 0; max-width: 320px; font-size: 15px; color: var(--teal-ink); }
.start { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.start .hint { max-width: 300px; text-align: right; color: var(--teal-ink); }
.start .hint.error { color: var(--sticky); }

/* ---- table talk (inline in the lobby; the table's drawer wraps the same .chat) */

.chat {
  display: flex; flex-direction: column; overflow: hidden; height: min(640px, calc(100dvh - 110px)); min-height: 380px;
  background: var(--paper); color: var(--ink); border-radius: 8px; box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
}
.chat-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; background: var(--teal); color: var(--paper); border-bottom: 4px solid var(--mustard); }
/* the title gives way to the head's buttons (it wraps instead of pushing them down); only the drawer's clock strip takes a line of its own */
.chat-head-title { flex: 1 1 0; min-width: 0; }
.chat-head h2 { margin: 0; font-size: 24px; font-weight: 800; line-height: 1; }
.chat-head p { margin: 4px 0 0; font-size: 13px; color: var(--teal-ink); }
.chat-list { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; overflow-y: auto; overscroll-behavior: contain; }
.chat-list > :first-child { margin-top: auto; } /* a short thread sits at the bottom, by the note box */
.chat-empty { margin: auto 0; text-align: center; font-family: var(--hand); font-size: 24px; color: var(--ink-soft); }
.msg { display: flex; gap: 10px; align-items: flex-start; }
.msg.more { margin-top: -4px; }
.avatar {
  flex: none; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--c); color: #fff; font-weight: 800; text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
}
.avatar-gap { flex: none; width: 34px; }
.msg-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.msg-who { margin: 0; font-size: 13px; color: var(--ink-soft); }
.msg-who b { color: var(--ink); }
.bubble { margin: 0; max-width: 100%; padding: 9px 13px; background: #fff; border-radius: 4px 16px 16px 16px; font-size: 15px; line-height: 1.3; white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble.mine { align-self: flex-end; max-width: 85%; background: var(--teal); color: var(--paper); border-radius: 16px 4px 16px 16px; }
/* The log in the chat: one quiet line style. The Model's lines carry a rust rule, the round's outcome an ink one, the branch a small tag. */
.log-line { margin: 0; padding: 1px 0 1px 9px; border-left: 3px solid var(--paper-line); font-size: 13px; line-height: 1.4; color: var(--ink-soft); }
.log-line + .log-line { margin-top: -4px; }
.model-note { border-left-color: var(--rust); color: var(--rust); }
.log-branch { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 4px; background: rgba(0, 0, 0, .06); font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--ink-soft); vertical-align: 1px; }
.dots { display: flex; gap: 5px; padding: 13px 14px; border-radius: 16px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-soft); animation: dot 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: .2s; }
.dots i:nth-child(3) { animation-delay: .4s; }
@keyframes dot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.note-box { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 18px 18px; border-top: 1px solid var(--paper-line); }
.note-box input { flex: 1; min-width: 0; min-height: 46px; padding: 0 16px; border: 2px solid var(--paper-line); border-radius: 22px; background: #fff; color: var(--ink); font-size: 16px; }
.note-box .btn { border-radius: 22px; box-shadow: 0 3px 0 var(--mustard-deep); }
.note-status { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--rust); }
.note-status:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ---- how to play */

.rules { width: 100%; max-width: min(760px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 0; border: 0; background: transparent; color: var(--ink); overflow: auto; }
.rules::backdrop { background: rgba(20, 12, 6, .62); }
.rules-sheet { padding: 26px 30px 30px; background: var(--paper); border-radius: 10px; box-shadow: 0 20px 40px rgba(0, 0, 0, .5); }
.rules-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 4px solid var(--mustard); }
.rules-head h2 { margin: 0; font-size: 26px; font-weight: 800; line-height: 1.1; }
.eyebrow { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tomato); }
.rules-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: flex; flex-direction: column; gap: 14px; }
.rules-steps li { position: relative; padding-left: 44px; font-size: 15.5px; line-height: 1.45; counter-increment: step; }
.rules-steps li::before {
  content: counter(step); position: absolute; left: 0; top: -2px; display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; background: var(--teal); color: var(--paper); font-weight: 800;
}
.rules h3 { margin: 24px 0 10px; font-size: 18px; font-weight: 800; }
.rules-special { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; line-height: 1.45; }
.rules-tip { margin-top: 22px; transform: rotate(-1deg); font-size: 23px; }

/* ---- the owner's console */

.owner-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; margin: 8px 0 24px; transform: rotate(-.4deg); }
.owner .link-note { display: inline-block; margin-bottom: 12px; }
.owner-grid { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 28px; align-items: start; }
.table-title { margin: 0 0 4px; font-family: var(--hand); font-weight: 700; font-size: 34px; line-height: 1; color: var(--paper); }
.games { display: flex; flex-direction: column; gap: 18px; }
.empty-note { margin: 0; padding: 18px 20px; }
.create { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px 24px; transform: rotate(.5deg); }
.create h2 { margin: 0; font-size: 24px; font-weight: 800; }
.create .field { background: var(--paper); }
.row-field { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-weight: 600; }
.kinds { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; border: 0; }
.kinds legend { margin-bottom: 8px; padding: 0; font-weight: 600; }
.kind-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.kind-faction { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.toggle { display: inline-flex; gap: 3px; padding: 3px; border-radius: 12px; background: rgba(36, 26, 18, .16); }
.toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.toggle span { display: flex; align-items: center; justify-content: center; min-width: 76px; min-height: 44px; padding: 0 12px; border-radius: 9px; font-weight: 700; font-size: 15px; cursor: pointer; }
.toggle input:checked + span { background: var(--paper); box-shadow: 0 2px 0 var(--paper-edge); }
.toggle input[value="bot"]:checked + span { background: var(--teal); color: var(--paper); box-shadow: 0 2px 0 var(--teal-deep); }
.toggle input:focus-visible + span { outline: 3px solid var(--teal); outline-offset: 1px; }

.game-card { overflow: hidden; }
.game-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 18px; background: var(--teal); color: var(--teal-ink); border-bottom: 4px solid var(--mustard); font-size: 14px; }
.status { padding: 3px 10px; border-radius: 4px; font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); }
.s-lobby { background: var(--kraft); }
.s-playing { background: var(--tomato); color: var(--paper); }
.s-over { background: var(--mustard); }
.game-round { font-weight: 700; color: var(--paper); }
.game-meta { margin-left: auto; }
.seat-links { list-style: none; margin: 0; padding: 6px 18px; }
.seat-link { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 10px 0; border-bottom: 1px dashed var(--paper-line); }
.seat-link:last-child { border-bottom: 0; }
.seat-who { display: flex; align-items: center; gap: 10px; flex: 1 1 230px; min-width: 0; min-height: 44px; }
.seat-name { font-family: var(--hand); font-size: 23px; line-height: 1; color: var(--ink-soft); overflow-wrap: anywhere; }
.link-tools { display: flex; align-items: center; gap: 8px; flex: 2 1 330px; min-width: 0; }
.link-url { flex: 1; min-width: 0; display: block; line-height: 44px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; color: var(--teal); }
.game-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 6px 18px 18px; }
.game-actions:not(:has(.btn)):has(.hint:empty) { display: none; }
.game-actions .hint { flex: 1; }

/* ---- the table (src/client/table): the board in the middle, the others around its edges, you at the bottom. Sizes are the mock's. */

.at-table { position: relative; max-width: 1440px; padding: 14px 20px 32px; transition: padding-right .22s ease-out; }
.at-table .topbar { position: absolute; top: 14px; left: 20px; right: 20px; z-index: 6; margin: 0; pointer-events: none; }
.at-table .topbar > * { pointer-events: auto; }
/* The table and the results lay themselves out by the width they have, not the screen's (the @container table rules below), so that
   the table can make room for the table talk drawer: while the drawer sits beside it (a screen wider than 900 px), the table keeps a
   430 px margin plus its own 20 px on the right (less on a screen so wide that the margin beside the table already holds part of the
   drawer), and nothing you can play is under the drawer. The top bar comes into the flow above the table, out of the drawer's way. */
.table, .results { container: table / inline-size; }
.at-table.talking { padding-right: max(20px, calc(450px - max(0px, (100% - 1440px) / 2))); }
.at-table.talking .topbar { position: static; margin: 0 0 10px; }

.table-top {
  display: grid; gap: 16px 14px; align-items: start;
  grid-template-columns: 160px minmax(0, 1fr) 160px;
  grid-template-areas: "top top top" "left board right";
}
.opps { display: contents; }

/* the others (three to six): tape, world, marks; up the left side (the seat nearest you at the bottom: the DOM keeps the clockwise order),
   along the board's top edge, down the right side (Opponents.tsx) */
.opp-side { display: flex; flex-direction: column; align-items: center; gap: 22px; min-width: 0; }
.opp-left { grid-area: left; flex-direction: column-reverse; margin-top: 34px; }
.opp-right { grid-area: right; margin-top: 34px; }
.opp-top { grid-area: top; justify-self: center; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 10px 34px; min-height: 112px; }
.opp { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
.opp-at-top { display: grid; align-items: center; gap: 6px 22px; grid-template-areas: "tape note" "where note" "stuff note"; }
.opp-at-top .opp-tape { grid-area: tape; justify-self: start; }
.opp-at-top .opp-where { grid-area: where; justify-self: start; }
.opp-at-top .opp-stuff { grid-area: stuff; flex-direction: row; align-items: center; gap: 16px; }
.opp-at-top .note { grid-area: note; }
.opp-tape { display: flex; align-items: center; gap: 6px; margin: 0; padding: 2px 12px; font-size: 22px; transform: rotate(-2deg); }
.opp-left .opp-tape { transform: rotate(2deg); }
.opp-name { min-width: 0; }
.opp-tape .ink-dots { display: none; } /* on a wide screen the dots are on a note of their own */
.opp-where{
  margin: 0; padding: 0 9px; font-family: var(--hand); font-weight: 700; font-size: 19px; line-height: 1.15; color: var(--ink);
  background: var(--kraft); transform: rotate(-2deg); box-shadow: 0 2px 3px rgba(0, 0, 0, .3);
}
.opp-stuff { display: flex; flex-direction: column; align-items: center; gap: 10px; }


/* sticky notes, yellow and pink, in Caveat; a long message gets a smaller hand. The dots pulse while someone types. */
.note {
  --tilt: -4deg; position: relative; z-index: 3; margin: 0; padding: 12px; overflow: hidden; color: var(--ink);
  font-family: var(--hand); line-height: 1.05; box-shadow: 3px 5px 8px rgba(0, 0, 0, .35); transform: rotate(var(--tilt));
  animation: stick .28s ease-out;
}
@keyframes stick { from { opacity: 0; transform: rotate(var(--tilt)) translateY(-10px) scale(1.06); } }
.note.yellow { background: var(--sticky); }
.note.pink { background: #f4a7b9; }
.note-from { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
.note-text { margin: 0; overflow: hidden; overflow-wrap: anywhere; white-space: pre-wrap; display: -webkit-box; -webkit-box-orient: vertical; }
.size-l .note-text { font-size: 23px; -webkit-line-clamp: 6; }
.size-m .note-text { font-size: 20px; -webkit-line-clamp: 7; }
.size-s .note-text { font-size: 17px; -webkit-line-clamp: 8; }
.opp-left .note, .opp-right .note { width: 160px; min-height: 120px; margin-top: 22px; }
.opp-right .note { --tilt: 4deg; }
.opp-at-top .note { --tilt: 3deg; width: 230px; max-height: 104px; padding: 10px 12px; }
.opp-at-top .note-text { -webkit-line-clamp: 3; }
.opp-at-top .size-l .note-text { font-size: 22px; -webkit-line-clamp: 3; }
.opp .note.just-dots { width: 96px; min-height: 0; height: 64px; display: flex; align-items: center; justify-content: center; }
.opp-left .note.just-dots, .opp-right .note.just-dots { margin-top: 14px; }
.ink-dots { display: inline-flex; align-items: center; gap: 8px; }
.ink-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); animation: dot 1.2s infinite; }
.ink-dots i:nth-child(2) { animation-delay: .2s; }
.ink-dots i:nth-child(3) { animation-delay: .4s; }
.note:not(.just-dots) .ink-dots { position: absolute; right: 9px; bottom: 7px; gap: 4px; }
.note:not(.just-dots) .ink-dots i { width: 6px; height: 6px; }

/* the board */
.table-board { container: board / inline-size; grid-area: board; display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 24px 22px 26px; transform: rotate(-1deg); }
.table-board .board-head { padding: 0 12px; align-items: baseline; }
.table-board .brand { font-size: 30px; }
.board-round { margin: 0 auto 0 0; font-weight: 700; font-size: 15px; color: var(--paper); }

/* the track: one scroller for every row, faded at both ends; it is focusable, and its frame shows the focus (a mask would hide it) */
.track-wrap { margin: 0 -12px; border-radius: 4px; }
.track-wrap:has(> .track:focus-visible) { outline: 3px solid var(--mustard); outline-offset: 2px; }
.track:focus-visible { outline: none; }
/* --sq is a square's height, --sqw its width (WP3: a little wider than tall, for larger text), --col a column's step */
.track {
  --sq: 58px; --sqw: 66px; --gap: 8px; --col: calc(var(--sqw) + var(--gap)); --pad: 56px; --rgap: 16px;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
  cursor: grab; user-select: none; -webkit-user-select: none;
}
.track::-webkit-scrollbar { display: none; }
.track.free { scroll-snap-type: none; }
.track.dragging { cursor: grabbing; }
.track-in { position: relative; width: max-content; min-width: 100%; padding: 2px 0 8px; }
.row { display: flex; gap: var(--gap); margin: 0; padding: 0 var(--pad); list-style: none; }
/* a label wider than its square (bg 'II пол. 2028') wraps under itself; the squares stay in line at the bottom */
.col { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; scroll-snap-align: center; }
.yr { width: calc(var(--sqw) - 2px); font-size: 12px; font-stretch: 85%; line-height: 1.15; text-align: center; color: var(--teal-ink); }
.is-later .yr { color: var(--teal-dim); }
.is-now .yr, .is-horizon .yr { font-weight: 800; color: var(--paper); }
/* each row stacks over the rows below it, so a curve climbing from a lower row to its parent runs under every box it crosses (the owner) */
.row-main { position: relative; }
.row-branch { position: relative; align-items: center; height: var(--sq); margin-top: var(--rgap); padding-left: calc(var(--pad) + var(--fork) * var(--col)); }
.row-branch.dead { opacity: .5; }
/* the dashed curve from the parent's row: down from its last shared round, then into the branch's first square */
.fork-line {
  position: absolute; z-index: 0; border: 0 dashed var(--paper); border-width: 0 0 3px 3px; border-bottom-left-radius: 26px;
  left: calc(var(--pad) + (var(--fork) - 1) * var(--col) + var(--sqw) / 2 - 1.5px);
  bottom: calc(var(--sq) / 2 - 1.5px);
  width: calc(var(--sqw) / 2 + var(--gap) - 2px);
  height: calc(var(--up) * (var(--sq) + var(--rgap)) - var(--sq) / 2 + 1.5px);
}
/* a merge, the fork's mirror: from the closed row's last square, across to the merge's round, then up (or down) into the target's square */

.row-name { flex: none; margin: 0 0 0 10px; white-space: nowrap; font-family: var(--hand); font-size: 24px; line-height: 1; color: var(--paper); }
.row-name small { font-size: 20px; color: var(--teal-ink); }
.sq {
  position: relative; z-index: 1; flex: none; display: flex; align-items: center; justify-content: center;
  width: var(--sqw); height: var(--sq); padding: 3px; border-radius: 4px; text-align: center; color: var(--ink);
}
/* colour shows the canon (the owner: "the canon should be colored, the rest uncolored and the closed muted"): its past squares are mustard,
   every other row's are paper, and a closed row's are muted (.dead) */
.sq.past { background: var(--paper); }
.row.canon .sq.past { background: var(--mustard); }
.sq.forked { box-shadow: 0 0 0 3px var(--paper); }
.sq.now { flex-wrap: wrap; align-content: center; gap: 4px 5px; padding: 4px; background: var(--tomato); }
.sq.future { border: 2px dashed #5f9c9f; }
.sq.gap { background: rgba(23, 74, 80, .6); }
.sq.now.empty { background: none; border: 3px dashed var(--tomato); }
/* the horizon is a ring: as wide as it is tall, in the middle of its column */
.sq.horizon { width: var(--sq); margin-inline: calc((var(--sqw) - var(--sq)) / 2); border-radius: 50%; border: 2px solid var(--mustard); }
.sq.horizon.now { border-width: 3px; }
.sq .pawn { width: 20px; height: 20px; }
/* WP3: larger than it was (13 px, then 12 on four lines; on a phone 13 px throughout, Task 9), and only long words hyphenated, at a syllable with
   at least three letters each side (Bulgarian gets its own syllable breaks: logic.ts hyphenate); a word that still does not fit breaks
   at its edge rather than spilling (squeeze), and never below the floor */
.sq-text {
  display: block; width: 100%; max-height: calc(3 * 1.08em); overflow: hidden;
  font-weight: 700; font-size: 13px; font-stretch: 75%; line-height: 1.08; overflow-wrap: normal;
}
.sq-text.tight { font-size: 12px; max-height: calc(4 * 1.08em); }
.sq-text.squeeze { overflow-wrap: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.track-hint { display: none; margin: 0; font-size: 13px; color: var(--teal-ink); }

/* under the track: the round's event card, then the Model's panel (on a wide screen they lie around the track: the WP3 block) */
.board-low { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 6px 12px 0; }
.event {
  container: event / inline-size; min-width: 0; overflow: hidden;
  background: var(--paper); color: var(--ink); border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, .35);
}
.event-side { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; padding: 14px; background: var(--tomato); color: var(--paper); }
.event-when { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.25; }
/* only a long word is hyphenated (break-through), and only when it has to be */
.event-title, .event-alt h3 { overflow-wrap: break-word; }
.event-title { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.05; }
.event-alt { min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 14px; }
.event-alt + .event-alt { border-left: 2px dashed #c9b994; }
.event-alt h3 { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.1; }
.event-res { margin: 0; font-size: 14px; line-height: 1.3; }

/* ---- your rail, at the bottom: your seat, your hand (or the vote) and your moves. It stays at the bottom of the screen while the page
   scrolls (the board slides under it); while it is stuck there it is a strip of darker oak with a shadow on its top edge. The cards are
   taller than the rail and run off the bottom of the screen until one pops up. */

.me {
  --hand-h: 150px;
  position: sticky; bottom: 0; z-index: 5; display: grid; grid-template-columns: 330px minmax(0, 1fr) 306px; gap: 24px; align-items: start;
  margin: 16px -20px 0; padding: 12px 20px 10px;
}
.me.stuck {
  background-color: #4a2f1a; background-image: linear-gradient(rgba(24, 12, 4, .34), rgba(24, 12, 4, .34)), var(--grain); background-attachment: fixed;
}
.me.stuck { box-shadow: 0 -12px 20px -10px rgba(0, 0, 0, .6), inset 0 2px 0 rgba(255, 220, 160, .08); }
.rail-end { height: 0; }
/* your seat's column is wide enough for the four resource names side by side at 13 px, in Bulgarian too (about 316 px) */
.me-seat { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
/* the name, the branch and the score on one line where they fit; your own note lies at the head's right for a few seconds */
.me-head { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.me-head:has(.note) { padding-right: 156px; min-height: 58px; }
.me-tape { max-width: 100%; margin: 0; padding: 2px 12px; font-size: 24px; transform: rotate(-1deg); }
.me-seat .note { --tilt: 3deg; position: absolute; top: 0; right: 0; width: 148px; max-height: 64px; padding: 6px 10px; }
.me-seat .note-text, .me-seat .size-l .note-text, .me-seat .size-m .note-text, .me-seat .size-s .note-text { font-size: 18px; -webkit-line-clamp: 2; }

/* your hand, fanned: each card is placed from the middle of the slot by its offset --off (and --off2, its square, for the arc), as far
   apart as the slot allows (at most --gap; a percentage of the slot's width). A popped card lifts, grows and comes to the front, upright,
   pulled towards the middle by --pull (on a phone, right to it); the others stay put. Only the popped card rises above the moves. */
.hand-slot { position: relative; min-width: 0; height: var(--hand-h); }

/* your moves: the hourglass and whose decision it is, a private notice, the three move buttons, a refusal */
.moves { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.timer { display: flex; align-items: center; gap: 12px; min-height: 44px; color: var(--paper); }
.hourglass { flex: none; }
.hourglass .glass { fill: none; stroke: var(--paper); stroke-width: 2.5; }
.hourglass .sand { fill: var(--mustard); }
.hourglass .stream { stroke: var(--mustard); stroke-width: 1.5; stroke-dasharray: 2 2; animation: pour .5s linear infinite; }
@keyframes pour { to { stroke-dashoffset: -4; } }
.timer-text { min-width: 0; }
.timer-title { margin: 0; font-weight: 800; font-size: 24px; line-height: 1; overflow-wrap: anywhere; }
.timer:not(.mine) .timer-title { font-size: 19px; color: var(--teal-ink); }
.timer-sub { margin: 4px 0 0; font-size: 14px; line-height: 1.25; font-variant-numeric: tabular-nums; }
.timer.urgent .timer-sub { color: var(--sticky); font-weight: 700; }
.timer.urgent .sand { fill: var(--tomato); }
.auto-note {
  align-self: flex-start; margin: 0; padding: 1px 10px; font-family: var(--hand); font-weight: 700; font-size: 19px; line-height: 1.15; color: var(--ink);
  background: var(--kraft); transform: rotate(-1.5deg); box-shadow: 0 2px 3px rgba(0, 0, 0, .3);
}
.act-error { margin: 0; font-size: 14px; font-weight: 700; color: var(--sticky); }
.act-error:empty { display: none; }
.sheet .act-error { color: var(--rust); }

/* a question for the host (host.tsx Confirm): a paper sheet over the table */
.sheet { width: 100%; max-width: min(620px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 0; border: 0; background: transparent; color: var(--ink); overflow: auto; }
.sheet::backdrop { background: rgba(20, 12, 6, .62); }
.sheet :focus-visible { outline-color: var(--teal); }
.sheet-in { padding: 22px 24px 24px; background: var(--paper); border-radius: 10px; box-shadow: 0 20px 40px rgba(0, 0, 0, .5); }
.sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 12px; border-bottom: 4px solid var(--mustard); }
.sheet-head h2 { margin: 0; font-size: 24px; font-weight: 800; line-height: 1.1; }
.sheet-intro { margin: 12px 0 14px; font-size: 15px; line-height: 1.4; color: var(--ink-soft); }

/* the table talk drawer: from the right on a wide screen, beside the table (not modal, so above the table's own layers); a modal sheet on a
   phone. It is never wider than the window (100% of a fixed box is the window's width without its scroll bar; 100vw is with it). */
.drawer {
  position: fixed; inset: 0 0 0 auto; z-index: 20; width: min(430px, 100%); max-width: 100%; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--paper); color: var(--ink); box-shadow: -18px 0 40px rgba(0, 0, 0, .45); overflow: hidden; animation: drawer-in .22s ease-out;
}
.drawer:focus { outline: none; } /* it takes the focus only so that Esc reaches it after a click on its text */
.drawer::backdrop { background: rgba(20, 12, 6, .3); }
@keyframes drawer-in { from { transform: translateX(100%); } }
.drawer .chat { height: 100%; min-height: 0; border-radius: 0; box-shadow: none; }
.drawer-back {
  display: none; align-items: center; min-height: 44px; padding: 0 14px; border: 2px solid var(--paper); border-radius: 22px;
  background: transparent; color: var(--paper); font-weight: 600; font-size: 14px; white-space: nowrap;
}
.drawer-back.mine { border-color: var(--mustard); background: var(--mustard); color: var(--ink); font-weight: 800; box-shadow: 0 3px 0 var(--mustard-deep); }
/* the clock across the bottom of the drawer's head (the drawer covers the timer): your own decision in mustard, tomato near the end */
.talk-status {
  flex: 1 0 100%; display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; padding: 6px 12px; border-radius: 8px;
  background: var(--teal-deep); color: var(--teal-ink); font-size: 16px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums;
}
.talk-status .hourglass { width: 15px; height: 20px; }
.talk-status-what { min-width: 0; overflow-wrap: anywhere; }
.talk-status-clock { flex: none; }
.talk-status.mine { background: var(--mustard); color: var(--ink); font-weight: 800; }
.talk-status.mine .glass { stroke: var(--ink); }
.talk-status.mine .sand { fill: var(--teal); }
.talk-status.mine .stream { stroke: var(--teal); }
.talk-status.urgent { background: var(--tomato); color: var(--paper); }
.talk-status.urgent .glass { stroke: var(--paper); }
.talk-status.urgent .sand { fill: var(--sticky); }
.talk-status.urgent .stream { stroke: var(--sticky); }
/* a decision that has just become yours: a mustard ring, three times (off under reduced motion, where the colour alone says it) */
.pulse { animation: your-turn 1.1s ease-out 3; }
@keyframes your-turn { from { box-shadow: 0 0 0 0 rgba(232, 178, 58, .95); } to { box-shadow: 0 0 0 12px rgba(232, 178, 58, 0); } }
.talk-round { display: flex; overflow: hidden; margin-top: 6px; border-radius: 6px; box-shadow: 0 2px 4px rgba(0, 0, 0, .15); }
.talk-when { flex: none; display: flex; align-items: center; padding: 8px 10px; background: var(--tomato); color: var(--paper); font-weight: 800; font-size: 15px; line-height: 1.1; max-width: 92px; }
.talk-event { flex: 1; min-width: 0; padding: 8px 12px; background: #fff; font-weight: 800; font-size: 16px; line-height: 1.15; }
.talk-event small { display: block; margin-top: 3px; font-weight: 400; font-size: 13px; color: var(--ink-soft); }
.log-line.outcome { border-left-color: var(--ink); font-weight: 700; color: var(--ink); }

/* ---- the end screen: the verdict and Share, the scores and who was a bot, the 2035 pages, the Model's offers, the numbers, and the whole tree */

.at-results { max-width: 1440px; }
.results { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 28px; align-items: start; }
.results-board { display: flex; flex-direction: column; gap: 22px; min-width: 0; transform: rotate(-.4deg); }
.verdict { display: flex; align-items: center; gap: 18px; padding: 0 4px; }
.verdict > .pawn { width: 46px; height: 46px; box-shadow: 0 6px 0 var(--cd); }
.verdict-title { margin: 0; font-size: 42px; font-weight: 800; line-height: 1.02; color: var(--paper); overflow-wrap: anywhere; }
.verdict-sub { margin: 6px 0 0; font-size: 16px; line-height: 1.3; color: var(--teal-ink); }

.results-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.results .paper { padding: 16px 18px 18px; box-shadow: 0 4px 8px rgba(0, 0, 0, .35); }
.results h2:not(.verdict-title):not(#chat-title) { margin: 0 0 8px; font-size: 20px; font-weight: 800; line-height: 1.1; }
.results h3 { margin: 14px 0 6px; font-size: 15px; font-weight: 800; }
.score-rows { list-style: none; margin: 0; padding: 0; }
.score-row { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-bottom: 1px dashed var(--paper-line); }
.score-row:last-child { border-bottom: 0; }
.score-row.won { background: rgba(232, 178, 58, .22); border-radius: 6px; }
.score-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.score-who b { font-family: var(--hand); font-weight: 700; font-size: 25px; line-height: 1; overflow-wrap: anywhere; }
.score-who small { font-size: 13px; color: var(--ink-soft); }
.stamp {
  flex: none; padding: 2px 8px; border: 2px solid currentColor; border-radius: 4px; font-size: 13px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; transform: rotate(-5deg);
}
.stamp.bot { color: var(--teal); background: rgba(31, 95, 102, .08); }
.stamp.human { color: var(--ink-soft); }
.score-n { flex: none; min-width: 88px; text-align: right; font-weight: 800; font-size: 18px; font-variant-numeric: tabular-nums; }
.scores-note { margin: 10px 0 0; font-family: var(--hand); font-size: 21px; line-height: 1.1; color: var(--ink-soft); }
.results-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.canon p { margin: 0; font-size: 14px; color: var(--ink-soft); }

.stats dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; margin: 0; font-size: 15px; }
.stats dd { margin: 0; font-weight: 800; text-align: right; }

.tree-title { margin: 0 0 8px; padding: 0 4px; font-size: 18px; font-weight: 800; color: var(--paper); }
.results-foot { display: flex; justify-content: flex-end; align-items: flex-end; }
.results-foot .lobby-host { text-align: right; }
.verdict-text { flex: 1; min-width: 0; }
.verdict-lost { color: var(--sticky); }
/* Share: a mustard button at the verdict's right; where the text can only be selected by hand, it lies under the button */
.share { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: 100%; }
.share-btn { min-width: 96px; }
.share .share-text { width: min(300px, 100%); font-size: 13px; resize: none; }
/* the 2035 pages: a tab per world, the open world's page */
.pages { display: flex; flex-direction: column; min-width: 0; }
.page-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.page-tab {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--paper-edge); font: inherit; font-size: 14px; font-weight: 700; color: var(--ink); cursor: pointer;
}
.page-tab:hover { background: var(--paper-line); }
.page-tab[aria-selected="true"] { background: var(--teal); color: var(--paper); box-shadow: 0 2px 0 var(--teal-deep); }
.page-tab.happened:not([aria-selected="true"]) { box-shadow: inset 0 0 0 2px var(--teal); }
.page-tab-n { min-width: 20px; padding: 0 5px; border-radius: 9px; background: rgba(36, 26, 18, .1); font-size: 13px; text-align: center; font-variant-numeric: tabular-nums; }
.page-tab[aria-selected="true"] .page-tab-n { background: rgba(241, 234, 216, .2); }
.world-page { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.world-page-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.results .world-page .world-page-head h3 { margin: 0; font-size: 19px; font-weight: 800; overflow-wrap: anywhere; }
.world-page-head small { font-size: 13px; color: var(--ink-soft); }
.world-page-body { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.page-read { min-height: 0; padding-top: 6px; border-top: 1px dashed var(--paper-line); }
.page-eyebrow { margin: 0 0 2px; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.page-text { margin: 0; font-size: 15px; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
.page-text.waiting { font-style: italic; color: var(--ink-soft); }
.page-lines { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.page-lines li { display: flex; align-items: flex-start; gap: 8px; }
.page-lines .pawn { flex: none; width: 14px; height: 14px; margin-top: 3px; }
.page-lines p { margin: 0; font-size: 14px; line-height: 1.4; }
.page-lines b { font-family: var(--hand); font-size: 19px; line-height: 1; }
/* the Model's offers revealed: one line each, in order; a taken one in rust */
.offers { display: flex; flex-direction: column; min-height: 0; }
.offer-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 14px; line-height: 1.3; }
.offer-row { display: flex; align-items: flex-start; gap: 7px; color: var(--ink-soft); }
.offer-row.taken { font-weight: 700; color: var(--rust); }
.offer-row .pawn { flex: none; width: 13px; height: 13px; margin-top: 2px; }

/* ---- your rail on a narrower table (a laptop, or a wide screen with the drawer open): a slimmer seat, its cubes as counts; the hand
   keeps the most room. A table 1240 px wide or more is a full-size one (a 1280 px screen less the table's padding). */
@container table (min-width: 881px) and (max-width: 1239px) {
  .me { grid-template-columns: 230px minmax(0, 1fr) 260px; gap: 18px; }
  .me-head:has(.note) { padding-right: 0; }
  .me-seat .note { top: auto; bottom: calc(100% + 8px); right: auto; left: 0; }

}

/* ---- narrow screens: one column, the phone mock's sizes */

@media (max-width: 900px) {
  .lobby, .owner-grid { grid-template-columns: minmax(0, 1fr); }
  .lobby-board, .owner-head, .create { transform: none; }
}
@media (max-width: 600px) {
  .page { padding: 12px 16px 32px; }
  .topbar { margin-bottom: 12px; }
  .board { padding: 22px 20px; outline-width: 5px; }
  .board::before { inset: 8px; }
  .brand { font-size: 24px; }
  .lobby { gap: 24px; }
  .lobby-board { gap: 22px; min-height: 0; }
  .seats { gap: 22px 12px; }
  .tape { padding: 2px 10px 0; font-size: 24px; }
  .lobby-bots { align-self: stretch; max-width: none; font-size: 21px; transform: rotate(1.5deg); }
  .lobby-foot { flex-direction: column; align-items: stretch; }
  .start { align-items: stretch; }
  .start .hint { max-width: none; text-align: left; }
  .chat { height: 60dvh; min-height: 340px; }
  .chat-head { padding: 12px 16px; }
  .chat-head h2 { font-size: 20px; }
  .chat-list { padding: 12px 14px; }
  .note-box { padding: 10px 12px 16px; gap: 6px; }
  .place-card { padding: 22px 20px 24px; transform: none; }
  .place-card h1, .place-card h2 { font-size: 24px; }
  .rules-sheet { padding: 20px 18px 24px; }
  .rules-head h2 { font-size: 22px; }
  .rules-steps li { padding-left: 38px; font-size: 15px; }
  .game-meta { margin-left: 0; }
  .link-tools { flex-basis: 100%; }
}

/* ---- the table when it is narrow (the phone mock; also a wide screen with the drawer beside a table of 880 px or less): the others'
   tapes in a row on top, their notes on the table under them, then the board at full width with the track sliding across it, then you.
   A table is 880 px or less on every screen up to 900 px (its padding is 10 px there), and on screens up to 920 px (padding 20 px): the
   top bar, which is outside the table, comes into the flow (and its Table talk gives way to the rail's) on screens up to 920 px, so that
   the two always agree. */

@media (max-width: 900px) {
  .at-table { padding: 12px 10px 0; } /* WP3: your rail is the bottom of the page, with no wood under it */
}
@media (max-width: 920px) {
  .at-table .topbar { position: static; margin: 0 6px 10px; pointer-events: auto; }
}
@container table (max-width: 880px) {
  .table-top { grid-template-columns: minmax(0, 1fr); grid-template-areas: "opps" "board"; gap: 12px; }
  .opps { grid-area: opps; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 6px; padding: 0 2px; }
  .opp-side { display: contents; }
  .opp, .opp-at-top { grid-area: auto; justify-self: stretch; position: static; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; min-height: 0; margin: 0; }
  .opp-tape { max-width: 100%; padding: 1px 8px; font-size: 18px; line-height: 1; transform: rotate(-2deg); }
  .opp-at-top .opp-tape { transform: rotate(1deg); }
  .opp-at-right .opp-tape { transform: rotate(2deg); }
  .opp-name { overflow-wrap: break-word; }
  .opp-tape .ink-dots { display: inline-flex; flex: none; gap: 3px; }
  .opp-tape .ink-dots i { width: 5px; height: 5px; }
  .opp-where { font-size: 15px; padding: 0 6px; }
  .opp-stuff, .opp-at-top .opp-stuff { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 3px 6px; }

  /* the notes lie on the top of the board under the tapes for their few seconds (WP3: no empty band of table kept for them); the typing
     dots are in the tapes */
  .opp .note, .opp-at-top .note {
    position: absolute; top: calc(100% + 4px); width: 35%; height: auto; max-height: 104px; min-height: 0; margin: 0; padding: 7px 9px;
  }
  .opp-at-left .note { left: 4px; --tilt: -3deg; }
  .opp-at-top .note { left: 32.5%; --tilt: 2deg; }
  .opp-at-right .note { right: 4px; --tilt: 4deg; }
  .opp .note.just-dots, .opp .note .ink-dots { display: none; }
  .opp .note-from { position: static; width: auto; height: auto; clip-path: none; font-size: 14px; color: var(--sticky-ink); }
  .opp .note.pink .note-from { color: #8a4256; }
  .opp .note-text, .opp .size-l .note-text, .opp .size-m .note-text, .opp .size-s .note-text { font-size: 18px; -webkit-line-clamp: 4; }
  .opp .size-s .note-text { font-size: 16px; -webkit-line-clamp: 5; }

  .table-board { gap: 10px; padding: 20px 10px 18px; transform: none; }
  .table-board .board-head { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* for screen readers only */
  .track-wrap { margin: 0; }
  .track-hint { display: block; padding: 0 12px; }
  .board-low { gap: 12px; padding: 0 10px; }

  .me-seat .note { display: none; }
  .me-head, .me-head:has(.note) { min-height: 0; padding-right: 0; }
}

/* a phone: no text under 13 px (the fontfit check), so the squares are the wide table's width and a little lower, and a square's text
   stays at 13 px on three lines (tight changes nothing; then every word breaks, then it is clamped), as in the end screen's tree.
   ponytail: 13 px squares 66 px wide on a phone instead of 11 px in 60; ceiling: a phone shows about half a column less of the track, and a
   very long answer may be clamped (…) where 11 px fitted it */
@container table (max-width: 580px) {
  .track { --sq: 54px; --sqw: 66px; --gap: 7px; --pad: 44px; --rgap: 12px; }
  .yr { font-size: 13px; }
  .sq .pawn { width: 18px; height: 18px; }
  .sq.now { gap: 3px 4px; padding: 3px; }
  .sq.past { padding: 2px; } /* the phone mock's */
  .sq-text, .sq-text.tight, .sq-text.squeeze { font-size: 13px; }
  .sq-text.tight { max-height: calc(3 * 1.08em); }
  .sq-text.squeeze { -webkit-line-clamp: 3; }
  .row-name { font-size: 20px; margin-left: 6px; }
  .row-name small { font-size: 17px; }

}

/* ---- your rail when the table is narrow (the phone mock): a strip at the bottom of the screen with your name, cubes and score in one
   line, the hand peeking out (the cards tuck under the move bar until one pops up, centred), and the bar: the clock, the three moves and
   Table talk */
@media (max-width: 900px) {
  .results { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .results-board { transform: none; }
  .results-grid { grid-template-columns: minmax(0, 1fr); }
}
@container table (max-width: 880px) {
  .me {
    --hand-h: 78px; grid-template-columns: minmax(0, 1fr); gap: 6px; margin: 12px -10px 0; padding: 8px 12px 10px;
    background-color: #4a2f1a; background-image: linear-gradient(rgba(24, 12, 4, .34), rgba(24, 12, 4, .34)), var(--grain); background-attachment: fixed;
    box-shadow: 0 -12px 20px -10px rgba(0, 0, 0, .6);
  }
  .talking .me { margin-inline: -20px; } /* beside the drawer the table's own padding is the wide screen's 20 px */
  /* your seat as a strip: the tape, the branch, the score and the cubes flow in one or two lines */
  .me-seat { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 3px 10px; }
  .me-head { display: contents; }
  .me-tape { padding: 1px 8px; font-size: 18px; }
  .me .opp-where { font-size: 15px; padding: 0 6px; }

  /* the bar covers the bottoms of the cards */
  .moves {
    position: relative; z-index: 2; gap: 6px; margin: 0 -12px -10px; padding: 6px 12px 10px;
    background-color: #4a2f1a; background-image: linear-gradient(rgba(24, 12, 4, .34), rgba(24, 12, 4, .34)), var(--grain); background-attachment: fixed;
  }
  .timer { gap: 10px; min-height: 0; }
  .hourglass { width: 20px; height: 27px; }
  .timer-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
  .timer-title, .timer:not(.mine) .timer-title { font-size: 17px; }
  .timer-sub { margin: 0; font-size: 13px; }
  .auto-note { font-size: 17px; }

}
@media (max-width: 600px) {
  .sheet { max-width: 100vw; max-height: calc(100dvh - 40px); margin: auto 0 0; }
  .sheet-in { padding: 18px 16px 22px; border-radius: 16px 16px 0 0; }
  .sheet-head h2 { font-size: 21px; }
  .drawer { inset: 60px 0 0 0; width: 100%; height: auto; border-radius: 18px 18px 0 0; box-shadow: 0 -14px 30px rgba(0, 0, 0, .45); animation-name: sheet-up; }
  .drawer .drawer-x { display: none; }
  .drawer .drawer-back { display: inline-flex; }
  .talk-event { font-size: 14px; }
  .verdict { gap: 14px; }
  .verdict-title { font-size: 30px; }
  .verdict > .pawn { width: 34px; height: 34px; }
  /* Share under the verdict's text, so that the winner's name keeps the line */
  .verdict { flex-wrap: wrap; }
  .share { flex-basis: 100%; align-items: flex-start; padding-left: 48px; box-sizing: border-box; }

  .score-row { gap: 8px; padding: 9px 2px; flex-wrap: wrap; }
  .score-who b { font-size: 22px; }
  .score-n { min-width: 0; font-size: 16px; }
}
@keyframes sheet-up { from { transform: translateY(100%); } }

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

/* ---- stopping and deleting a game (src/client/host.tsx): the owner's buttons and question, and the stopped screen */
.topbar { flex-wrap: wrap; }
.host-delete { background: var(--tomato); color: var(--paper); box-shadow: 0 3px 0 var(--rust); }
.btn.host-delete { box-shadow: 0 4px 0 var(--rust); }
.btn.host-delete:active:not(:disabled) { box-shadow: 0 1px 0 var(--rust); }
.host-tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.stopped .host-tools { justify-content: flex-start; }
.lobby-board > .host-tools { margin-top: -12px; }
.results-foot { flex-wrap: wrap; gap: 12px 24px; }
@media (min-width: 601px) { .confirm { max-width: 480px; } } /* on a phone it is the bottom sheet of the choosers */
.confirm-game { margin: 12px 0 0; font-size: 14px; font-weight: 700; color: var(--teal); }
.confirm-game + .sheet-intro { margin-top: 6px; }
.confirm-btns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-top: 10px; }
.stopped h1 { font-size: 30px; }
.stopped-again { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 8px; }
.stopped-host { color: var(--ink-soft); }
.s-stopped { background: var(--paper-edge); }
/* ---- WP2: the alert buttons in the top bar (src/client/alertbar.tsx), Sound and Notify me: round icon buttons at the left of the top bar, on every
   screen (on a laptop the bar floats over the table, and its right side is Table talk and How to play). Pressed means on: mustard. The
   top bar may wrap, so that a "reconnecting…" note never pushes them off a phone. */
.topbar { flex-wrap: wrap; }
.alert-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; padding: 0; }
.alert-btn svg { flex: none; }
.alert-btn[aria-pressed='true'] { background: var(--mustard); box-shadow: 0 3px 0 var(--mustard-deep); }
.alert-btn:disabled { opacity: .55; cursor: default; }
/* ---- a step of the track, popped (Track.tsx, StepCard.tsx): every past square is a button that lifts a little under the mouse; the open
   one lifts with an ink ring. The slip lies on the board under its square (or over it), pointing at it; your rail stays above it. In it:
   the round and the branch, the event and the version lived there, then who did what in turn order, those who were in the branch when the
   round was voted marked "here" on a mustard wash, the others faded. */

.track-wrap { position: relative; }
button.sq { margin: 0; border: 0; font: inherit; color: var(--ink); cursor: pointer; transition: transform .12s ease-out, box-shadow .12s ease-out; }
@media (hover: hover) {
  button.sq:hover { transform: translateY(-2px); box-shadow: 0 3px 0 rgba(0, 0, 0, .3); }
  button.sq.forked:hover { box-shadow: 0 0 0 3px var(--paper), 0 4px 0 3px rgba(0, 0, 0, .3); }
}
button.sq.open, button.sq.open:hover { transform: translateY(-2px); box-shadow: 0 0 0 3px var(--ink), 0 4px 0 3px rgba(0, 0, 0, .3); }

.step-card {
  position: absolute; z-index: 4; top: 0; left: 0; width: min(380px, calc(100% - 8px)); padding: 12px 14px 14px; text-align: left;
  background: var(--paper); color: var(--ink); border-radius: 8px; box-shadow: 0 12px 26px rgba(0, 0, 0, .5); animation: step-down .16s ease-out;
}
.step-card[data-side="above"] { animation-name: step-up; }
@keyframes step-down { from { opacity: 0; transform: translateY(-6px); } }
@keyframes step-up { from { opacity: 0; transform: translateY(6px); } }
.step-card:focus { outline: none; } /* it takes the focus only so that Tab goes on into it */
.step-card :focus-visible { outline-color: var(--teal); }
/* the pointer to the square, at --tip from the slip's left edge */
.step-card::before {
  content: ''; position: absolute; top: -7px; left: calc(var(--tip, 50%) - 8px); width: 16px; height: 16px; border-radius: 2px;
  background: var(--paper); transform: rotate(45deg);
}
.step-card[data-side="above"]::before { top: auto; bottom: -7px; }
.step-head { position: relative; display: flex; align-items: flex-start; gap: 10px; padding-bottom: 10px; border-bottom: 3px solid var(--mustard); }
.step-what { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.step-when { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--tomato); }
.step-event { margin: 0; font-size: 16px; font-weight: 800; line-height: 1.12; overflow-wrap: break-word; }
/* the version as its square shows it: mustard on Main, paper in a branch */
.step-version { margin: 2px 0 0; padding: 3px 9px; border-radius: 4px; background: #fff; box-shadow: inset 0 0 0 2px var(--teal); font-weight: 800; font-size: 13px; line-height: 1.2; }
.step-version.main { background: var(--mustard); box-shadow: none; }
.step-x { margin: -6px -6px 0 0; border-width: 2px; color: var(--ink-soft); }
.step-sub { margin: 10px 0 4px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
.step-moves { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.step-move { display: flex; align-items: flex-start; gap: 9px; padding: 5px 6px; border-radius: 6px; }
.step-move .pawn { width: 16px; height: 16px; margin-top: 3px; box-shadow: 0 2px 0 var(--cd); }
.step-move p { flex: 1; min-width: 0; margin: 0; font-size: 13px; line-height: 1.3; overflow-wrap: break-word; }

.step-who { margin-right: 2px; font-family: var(--hand); font-weight: 700; font-size: 18px; line-height: 1; }
.step-move.here { background: rgba(232, 178, 58, .22); }
.step-move.away { opacity: .6; }

.step-note { margin: 10px 0 0; font-family: var(--hand); font-size: 17px; line-height: 1.1; color: var(--ink-soft); }
@container table (max-width: 580px) {
  .step-card { padding: 10px 12px 12px; }
  .step-event { font-size: 15px; }
  .step-move { gap: 7px; padding: 4px 5px; }
  .step-move p { font-size: 12.5px; }
  .step-who { font-size: 17px; }
}

/* ---- the round's event explained, and the vote as cards (EventCard.tsx, Vote.tsx). This block restyles the event card and the vote
   above; it comes last so that it wins over them.
   The event card: the title on its tomato side, then what is happening (a line across the top), then the two versions side by side,
   each with what it means, what it pays everyone in your branch and what it does to the Model. The texts size themselves to the card
   (cqi: a part of its width) between a floor and a ceiling.
   WP3: the card lays itself out by its own width (.event is the container, .event-in the grid), not the table's or the screen's: a wide
   card gives what is happening a column of its own, a middling one a line across the top, and a narrow one (a phone's, or one squeezed
   by the table talk) stacks the versions one under the other, each in a few lines; the side narrows with the card. */
.event { display: flex; flex-direction: column; }
.event-in {
  flex: 1 1 auto; display: grid;
  grid-template-columns: clamp(110px, 24%, 160px) repeat(2, minmax(0, 1fr)); grid-template-rows: auto 1fr;
}
.event-side { grid-column: 1; grid-row: 1 / -1; }
.event-about {
  grid-column: 2 / -1; grid-row: 1; margin: 0; padding: 12px 14px 10px; border-bottom: 2px dashed #c9b994;
  font-size: clamp(12.5px, 2.2cqi, 14px); line-height: 1.3; color: var(--ink-soft);
}
.event-alt { grid-row: 2; padding: 10px 14px 14px; }

.event-about { overflow-wrap: break-word; }

.event-res { font-size: clamp(12.5px, 2.2cqi, 14px); }

.event-res b { font-weight: 800; }

@container event (min-width: 760px) {
  .event-in { grid-template-columns: 150px minmax(0, .85fr) repeat(2, minmax(0, 1fr)); grid-template-rows: 1fr; }
  .event-about { grid-column: 2; grid-row: 1; padding: 12px 14px; border-bottom: 0; border-right: 2px dashed #c9b994; font-size: 13px; }
  .event-alt { grid-row: 1; }
  .event-res { font-size: 13.5px; }
}
@container event (max-width: 459px) {
  .event-in { grid-template-columns: clamp(96px, 26%, 116px) minmax(0, 1fr); grid-template-rows: auto; }
  .event-side { grid-row: 1 / span 3; justify-content: flex-start; padding: 8px; }
  .event-when { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* for screen readers only */
  .event-title { font-size: 13.5px; }
  .event-about { grid-column: 2; padding: 6px 8px; font-size: 11.5px; line-height: 1.25; }
  .event-alt { display: block; grid-row: auto; grid-column: 2; padding: 6px 8px; font-size: 12px; line-height: 1.25; }
  .event-alt + .event-alt { border-left: 0; border-top: 2px dashed #c9b994; }
  .event-alt h3, .event-res { display: inline; font-size: 12px; line-height: 1.25; }
  .event-res:not(:empty)::before { content: ' '; }

  .event-res b { font-weight: 700; }
}

/* The vote: a small card per version in the rail, with a tomato edge like the event's. The first tap pops one up: it rises above the
   rail, wider and fully readable (the event and what is happening on tomato, the version and what it means, its effects in plain
   words, "Click again to vote" on mustard), and its outline stays behind so that nothing under it moves. On a wide rail the popped card
   keeps to its own side, so that the other card can still be tapped; on a narrow one it takes the rail's width, above both. */

/* ---- WP6: the owner's console (src/client/owner.tsx): Past games folded under the live ones, who is at the table now (a filled dot is online, a
   ring is not; the word says it too), Share all links, Make a bot, and the page of an old link whose seat a bot has taken */
.past > summary { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; list-style: none; font-family: var(--hand); font-size: 30px; line-height: 1; color: var(--paper); }
.past > summary::-webkit-details-marker { display: none; }
.past > summary::before { content: '\25B8'; font-family: var(--type); font-size: 18px; transition: transform .15s; }
.past[open] > summary::before { transform: rotate(90deg); }
.past-count { padding: 3px 10px; border-radius: 999px; background: var(--paper); color: var(--ink); font-family: var(--type); font-size: 14px; font-weight: 800; }
.past-list { display: flex; flex-direction: column; gap: 18px; margin-top: 10px; }
.presence { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; white-space: nowrap; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.presence .dot { flex: none; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--ink-soft); }
.presence.on { color: #2c6e45; }
.presence.on .dot { border-color: #3d8a58; background: #3d8a58; }
.share-all { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 6px 18px 0; }
.share-all a.btn, .game-host a.btn { display: inline-flex; align-items: center; text-decoration: none; }
.share-text { flex: 1 1 100%; resize: vertical; font-size: 13px; line-height: 1.4; }
@media (min-width: 601px) { .seat-who { flex-basis: 300px; } }
@media (max-width: 600px) {
  .link-tools { flex-wrap: wrap; }
  .link-url { flex: 1 0 100%; }
}

/* ---- the owner console, compact: it is a desk tool used with a mouse, so its buttons are small chips (taller where the pointer is a
   finger), the seat rows tight, a seat's tools quiet outlines and a game's tools one row, Delete a red outline rather than a red block. */
.owner .btn-small { min-height: 32px; padding: 0 11px; border-radius: 8px; font-size: 13px; box-shadow: 0 2px 0 var(--mustard-deep); }
.owner .btn-small:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
.owner .btn-paper.btn-small { background: transparent; box-shadow: inset 0 0 0 1.5px var(--paper-edge); font-weight: 700; color: var(--ink); }
.owner .btn-paper.btn-small:hover:not(:disabled) { background: var(--paper-line); }
.owner .btn.host-delete { background: transparent; color: var(--tomato); box-shadow: inset 0 0 0 1.5px var(--tomato); }
.owner .btn.host-delete:hover:not(:disabled) { background: var(--tomato); color: var(--paper); }
.owner .game-head { padding: 9px 16px; font-size: 13px; }
.owner .seat-links { padding: 2px 16px; }
.owner .seat-link { gap: 4px 12px; padding: 5px 0; }
.owner .seat-who { gap: 8px; min-height: 32px; flex-basis: 210px; font-size: 15px; }
.owner .seat-name { font-size: 20px; }
.owner .link-tools { gap: 6px; }
.owner .link-url { line-height: 32px; font-size: 13px; }
.owner .presence { font-size: 12px; }
.owner .game-actions { gap: 6px; padding: 8px 16px 12px; }
.owner .game-actions .share-all { gap: 6px; padding: 0; }
.owner .game-host, .owner .game-host .host-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.owner .game-host { margin-left: auto; }
.owner .game-actions .hint { flex-basis: 100%; }
.owner .game-actions .hint:empty { display: none; }
.owner .create { gap: 10px; padding: 18px 20px 20px; }
.owner .create h2 { font-size: 21px; }
.owner .create .field { min-height: 36px; padding-top: 4px; padding-bottom: 4px; font-size: 14px; }
.owner .toggle span { min-width: 60px; min-height: 32px; padding: 0 10px; font-size: 13px; }
.owner .create .btn-big { min-height: 42px; font-size: 16px; }
@media (pointer: coarse) {
  .owner .btn-small, .owner .toggle span { min-height: 40px; }
  .owner .seat-who, .owner .link-url { min-height: 40px; line-height: 40px; }
}

/* ---- the host's menu at the table (host.tsx HostMenu): one small button in the top bar, Stop and Delete in a little paper menu under it. */
.host-menu { position: relative; }
.host-menu-list {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 20; display: flex; flex-direction: column; align-items: stretch; gap: 6px;
  padding: 8px; border-radius: 10px; background: var(--paper); box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
}
.host-menu-list .btn { white-space: nowrap; }
/* ---- WP1: is anyone winning? Only the canon scores. The canon's crown on the track ("counts": in its row's name, or a tag of its own
   after Main's current square, which has no name), the word beside a seat's score (outside the canon, where it shows 0; on your own
   seat, in it), the plain line across the top of your rail while you are outside it (as wide as its text: one line or two on a laptop,
   where the seat's column would make it six), and on the end screen each score's breakdown under its row, with the HUMAN or BOT stamp
   beside the name (not over the faction), lying face down until it turns over, one seat after another. */

.row-main .is-now { position: relative; }


.score-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "pawn who n" ". parts parts";
  align-items: center; column-gap: 12px; row-gap: 3px;
}
.score-row > .pawn { grid-area: pawn; }
.score-who { grid-area: who; }
.score-who small { overflow-wrap: anywhere; }
.score-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.score-n { grid-area: n; }
.score-parts { grid-area: parts; margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
.score-parts b { color: var(--ink); font-variant-numeric: tabular-nums; }
.score-seat { color: var(--ink); }
.part { white-space: nowrap; }

.stamp-flip { display: inline-grid; flex: none; transform-style: preserve-3d; animation: stamp-turn .6s cubic-bezier(.3, .7, .4, 1) both; animation-delay: calc(.6s + var(--i, 0) * .55s); }
.stamp-flip > .stamp { grid-area: 1 / 1; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.stamp-back { text-align: center; color: var(--ink-soft); border-style: dashed; transform: rotateY(180deg) rotate(5deg); }
@keyframes stamp-turn { from { transform: perspective(240px) rotateY(180deg); } to { transform: perspective(240px) rotateY(0deg); } }
@media (max-width: 600px) {
  .score-row { column-gap: 8px; grid-template-areas: "pawn who n" "parts parts parts"; }
  .score-parts { font-size: 13px; }
}

/* a step's slip that lies beside its square slides in from the side */
@keyframes model-card-left { from { opacity: 0; transform: translateX(6px); } }

/* ---- WP7: the table talk (src/client/chat.tsx): mentions, whispers and reactions */
/* nothing in the thread shrinks to fit: a long thread scrolls (a round's header and a block of plays, which clip their corners, would
   otherwise be squeezed to nothing, since overflow: hidden lets a flex item shrink below its content) */
.chat-list > * { flex-shrink: 0; }
/* a player's name in the thread is a button: a tap puts "@Name " in the note box */
.who-btn { padding: 0; border: 0; background: none; color: var(--ink); font-weight: 700; font-size: inherit; text-decoration: underline dotted rgba(36, 26, 18, .4); text-underline-offset: 3px; }
.who-btn:hover { text-decoration-style: solid; }
/* a message that names you: a mustard rule down its left and a warmer paper */
.msg.named .bubble { background: #fff3c4; box-shadow: inset 4px 0 0 var(--mustard); }
/* a whisper: a dashed edge, and a small lock with whom it is for */
.whisper-tag { display: inline-flex; align-items: center; gap: 4px; color: var(--rust); font-weight: 700; }
.whisper-tag svg, .note-private svg { flex: none; }
.msg.whisper .bubble { background: #faf6ec; border: 2px dashed var(--paper-edge); }
.mine-msg { align-self: flex-end; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; max-width: 85%; }
.mine-msg .bubble.mine { max-width: 100%; }
.mine-msg.whisper .bubble.mine { background: var(--teal-deep); outline: 2px dashed var(--teal-dim); outline-offset: -5px; }
.note.whisper { outline: 2px dashed rgba(36, 26, 18, .45); outline-offset: -6px; }
/* reactions: the chips under a message or a play, and beside it the button that opens the six to pick from */
.bubble-row { display: flex; align-items: flex-end; gap: 2px; min-width: 0; }
.bubble-row .bubble { min-width: 0; }
.react-add {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink-soft); opacity: 0; transition: opacity .15s;
}
.react-add:hover, .react-add[aria-expanded="true"] { background: rgba(0, 0, 0, .07); }
.msg:hover .react-add, .react-add:focus-visible, .react-add[aria-expanded="true"] { opacity: 1; }
@media (hover: none) { .react-add { opacity: .55; } }
.reacts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.mine-msg .reacts { justify-content: flex-end; }
.react-chip {
  display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 9px; border: 1.5px solid var(--paper-line); border-radius: 999px;
  background: #fff; color: var(--ink); font-size: 14px; line-height: 1; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.react-chip:hover { border-color: var(--paper-edge); }
.react-chip.mine { border-color: var(--teal); background: var(--teal-ink); }
.react-n { font-size: 13px; font-weight: 700; }
.react-pick { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 22px; background: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, .2); }
.react-opt { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; font-size: 22px; line-height: 1; }
.react-opt:hover, .react-opt[aria-pressed="true"] { background: var(--teal-ink); }
.react-who { flex-basis: 100%; font-size: 13px; color: var(--ink-soft); }

/* the note box: To (everyone, or one player for a whisper), and the line that says a whisper is private until the game ends */
.note-to { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.note-to select { min-height: 36px; max-width: 100%; padding: 0 10px; border: 2px solid var(--paper-line); border-radius: 18px; background: #fff; color: var(--ink); font-size: 14px; }
.note-private { flex-basis: 100%; display: flex; align-items: flex-start; gap: 5px; margin: 0; font-weight: 400; font-size: 13px; line-height: 1.35; color: var(--rust); }
.note-private svg { margin-top: 2px; }
.note-box.whispering input { border-style: dashed; border-color: var(--rust); }

/* ---- the new-version note (seat.tsx): the game was deployed since this page loaded; one tap reloads it */
.update-note {
  position: fixed; z-index: 50; top: 12px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px;
  width: max-content; max-width: calc(100% - 32px); margin: 0; padding: 8px 8px 8px 14px; border-radius: 10px;
  font-size: 14px; line-height: 1.35; color: var(--ink); background: var(--paper); box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
}
.update-note .btn { flex: none; }
/* ---- WP3: the layout. On a screen wider than 920 px the table is exactly the window's height and nothing scrolls: the page is a "stage"
   (a container as big as the window less its top margin), the table fills it, your rail takes the height of its hand at the bottom, and
   the opponents and the board share the rest. Sizes follow the stage's height (cqh) between a floor and a ceiling. Two arrangements:
   - around (a stage at least 1260 px wide and 700 px tall): the opponents on the left, across and on the right of the board as in the
     mock, the one across in a strip at the top; on the board the title, the track and the event card down the left, the Model's panel
     down the right;
   - compact (smaller): the three opponents in a row of strips at the top, between the top bar's buttons; on the board the track
     with the Model's panel beside it, and the event card across the whole board under them; Table talk moves to your rail, and How to
     play becomes a "?".
   Elsewhere: the "6 cards" chip, each name plate in its seat's colour, the cost line under a move, the Model's panel and meters, and on a
   phone the hand as a strip that scrolls sideways, each card with its whole title. */

/* a slip on the board (a step's, the Model's) that is taller than the room on its side: as tall as the room (StepCard.tsx, ModelCup.tsx
   set its max-height), its head stays and the rest scrolls */
.step-card { display: flex; flex-direction: column; }
.step-head { flex: none; }
.slip-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
/* a step's slip beside its square (a short window), its pointer on the side towards it */
.step-card[data-side="right"], .step-card[data-side="left"] { animation-name: model-card-left; }
.step-card[data-side="right"]::before { top: calc(var(--tip, 50%) - 8px); left: -7px; }
.step-card[data-side="left"]::before { top: calc(var(--tip, 50%) - 8px); left: auto; right: -7px; }

/* every seat's name plate carries its colour: a band down its left and a wash of it */
.opp-tape, .me-tape { background-color: color-mix(in oklab, var(--c) 30%, var(--paper)); box-shadow: inset 6px 0 0 var(--c), 0 2px 3px rgba(0, 0, 0, .3); padding-left: 16px; }

/* ---- a phone (a table of 880 px or less): the hand is a strip that scrolls sideways, every card whole, with its whole title on up to two
   lines; a card pops up in its place, wider and showing all it says, and the strip slides to show it (Hand.tsx). Your rail no longer
   needs the move bar to cover the cards. */
@container table (max-width: 880px) {
  .hand-slot { height: auto; }

  .moves { margin: 0 -12px -10px; }
}

/* ---- the stage: a screen wider than 920 px (the drawer beside the table only from 1351 px: ChatDrawer.tsx drawerOver) */
@media (min-width: 921px) {
  .at-table { container: stage / size; height: 100vh; height: 100dvh; display: flex; flex-direction: column; padding: 8px 20px 0; }
  .at-table .topbar { top: 8px; }
  .at-table.talking .topbar { margin: 0 0 8px; }
  .table { flex: 1 1 0; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; zoom: var(--fit, 1); } /* --fit: Table.tsx useFit */
  .rail-end { display: none; }
}
@container stage (min-width: 1px) {
  .table {
    /* a card is 100 px tall on a 520 px window, 150 on 680, 200 on 900 */
    --card-h: clamp(100px, calc(30cqh - 54px), 205px); --card-w: clamp(112px, calc(var(--card-h) * .74), 148px);
  }
  /* the board never shrinks below what it holds: if that is more than its room, the table shrinks (Table.tsx useFit measures from here),
     and past its floor the seats and the board scroll in their place above your rail. They ran on under the rail, out of reach (the
     overfit check at 1000 × 520: the fists, the cards, the reveal); the page still never scrolls, and your controls stay in sight.
     It reaches into the stage's side padding (as your rail does), so that what lies over its edges (a seat's tape, a note, the board's
     tilt and shadow) is clipped by the window, not by the table.
     ponytail: the last resort is a scroll of the board's part of the table; ceiling: on such a window the event card may need a scroll */
  .table-top { position: relative; min-height: 0; gap: 8px 12px; margin-inline: -20px; padding-inline: 20px; overflow: hidden auto; overscroll-behavior: contain; }
  .table-board { align-self: stretch; display: grid; gap: 10px 16px; padding: 16px 18px; transform: rotate(-.35deg); }
  .board-low { display: contents; }
  .track-hint { display: none; }
  .table-board .board-head { grid-area: head; padding: 0 4px; }
  .track-wrap { grid-area: track; align-self: start; min-width: 0; margin: 0 -8px; }
  .track { --sq: clamp(46px, 7.4cqh, 66px); --sqw: max(66px, calc(var(--sq) + 8px)); --rgap: clamp(10px, 1.7cqh, 16px); }
  .event { grid-area: event; min-height: min-content; }

  /* your rail: the seat (and under it the line that says you are outside the canon), the hand, the moves; always the darker oak */
  .me {
    position: relative; bottom: auto; z-index: 5; margin: 0 -20px; padding: 5px 20px 6px; gap: 5px 18px; align-items: start;
    grid-template-columns: 250px minmax(0, 1fr) 280px; grid-template-areas: "warn warn warn" "seat hand moves";
    background-color: #4a2f1a; background-image: linear-gradient(rgba(24, 12, 4, .34), rgba(24, 12, 4, .34)), var(--grain); background-attachment: fixed;
    box-shadow: 0 -12px 20px -10px rgba(0, 0, 0, .6), inset 0 2px 0 rgba(255, 220, 160, .08);
  }
  .me-seat { grid-area: seat; gap: 6px; }

  .hand-slot { grid-area: hand; height: calc(var(--card-h) + 8px); }

  .moves { grid-area: moves; gap: 8px; }
  .me-head:has(.note) { padding-right: 0; }
  .me-seat .note { top: auto; bottom: calc(100% + 10px); right: auto; left: 0; }

  /* the vote: its heading beside its two cards, so that it is no taller than the hand */

  .timer-title { font-size: 21px; }
  .timer:not(.mine) .timer-title { font-size: 17px; }
  .timer-sub { margin-top: 2px; font-size: 13px; }

  /* the smallest text here is 12 px, so that the last resort's zoom (Table.tsx, down to .92) keeps it above 11 */
  .step-when, .step-sub { font-size: 12px; }
}

/* around: the opponents round the board */
@container stage (min-width: 1260px) and (min-height: 700px) {
  .table-top {
    grid-template-columns: 150px minmax(0, 1fr) 150px; grid-template-rows: auto 1fr; grid-template-areas: "top top top" "left board right";
  }
  /* the side seats sit in the middle of the board's height (the owner), not at its top; two on a side keep room between them for a note */
  .opp-left, .opp-right { align-self: center; margin-top: 0; gap: 30px; }
  .opp-at-left, .opp-at-right { gap: 8px; }
  /* a side seat's tape as wide as its longest word, never narrower than its column, growing away from the board ("Лаборатория|та" broke) */
  .opp-left .opp-tape, .opp-right .opp-tape { width: min-content; min-width: 100%; max-width: none; overflow-wrap: normal; }
  .opp-left .opp-tape { align-self: flex-end; }
  .opp-right .opp-tape { align-self: flex-start; }
  /* a note hangs under its seat, out of the layout, so that it never moves the board */
  .opp-left .note, .opp-right .note { position: absolute; top: calc(100% + 8px); left: 0; width: 150px; min-height: 0; max-height: 132px; margin: 0; }
  /* a seat on the right hangs its note from its right edge, over the board: from its left edge a short name's note ran off a 1440 px
     window (the notes check) */
  .opp-right .note { left: auto; right: 0; }
  /* the ones across: a strip along the top, each note hanging under its seat */
  .opp-top { min-height: auto; gap: 4px 40px; }
  .opp-at-top { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 14px; padding-top: 6px; }
  .opp-at-top .opp-tape { font-size: 21px; }
  .opp-at-top .opp-stuff { display: flex; flex-direction: row; align-items: center; gap: 12px; }

  .opp-at-top .note { position: absolute; top: calc(100% - 4px); left: calc(100% - 60px); width: 220px; max-height: 84px; }

  /* the board: the title, the track and the event card down the left, the Model's panel down the right, its meters each on a line */
  .table-board {
    grid-template-columns: minmax(0, 1fr) clamp(310px, 28cqw, 380px); grid-template-rows: auto 1fr auto;
    grid-template-areas: "head model" "track model" "event model";
  }

  /* the event card as tall as its text (the owner, 2026-10-30: the timeline gets the room), its type a step above the cards' */
  .event-title { font-size: clamp(17px, 2.1cqh, 21px); }
  .event-alt h3 { font-size: clamp(14.5px, min(1.75cqh, 2.2cqi), 16.5px); }
  .event-about, .event-res { font-size: clamp(12.5px, min(1.5cqh, 1.9cqi), 14px); }
  .event-when { font-size: 12px; }
  /* your seat wide enough for its four piles and their names (bg 'Легитимност'), as the mock has it */
  .me { grid-template-columns: 320px minmax(0, 1fr) 280px; }
}

/* compact: the opponents in a row on top, the track beside the Model, the event card across */
@container stage (max-width: 1259px) or (max-height: 699px) {
  .topbar .pill { min-height: 38px; padding: 0 14px; font-size: 14px; }
  .topbar .alert-btn { width: 38px; padding: 0; }
  .topbar .icon-btn { width: 38px; padding: 0; }
  .table-top { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "opps" "board"; }
  /* a grid, not a wrapping flex row, so that the row is as tall as its tallest seat once their lines have wrapped */
  .opps {
    grid-area: opps; position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, max-content); justify-content: center;
    align-items: start; gap: 6px 18px; padding: 0 60px 0 96px;
  }
  .opps[data-n="5"], .opps[data-n="6"] { gap: 6px 12px; }
  .at-table:has(.host-menu) .opps { padding-right: 130px; }
  .opp-side { display: contents; }
  .opp, .opp-at-top {
    grid-area: auto; position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; min-width: 0; min-height: 0; margin: 0;
  }
  .opp-tape { max-width: 100%; padding: 1px 9px 1px 14px; font-size: 18px; line-height: 1.05; }
  .opp-tape .ink-dots { display: inline-flex; flex: none; gap: 3px; }
  .opp-tape .ink-dots i { width: 5px; height: 5px; }
  .opp-where { font-size: 15px; padding: 0 6px; }
  .opp-stuff, .opp-at-top .opp-stuff { flex-basis: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
  .opp .note.just-dots, .opp .note .ink-dots { display: none; }
  .opp .note, .opp-at-top .note { position: absolute; top: calc(100% + 4px); left: 0; width: 210px; height: auto; min-height: 0; max-height: 86px; margin: 0; padding: 7px 10px; --tilt: -2deg; }
  /* the last seat in the row hangs its note to the left, from its right edge: at seven seats on 1000 px it ran off the window (notes) */
  .opp-right > .opp:last-child .note { left: auto; right: 0; }
  .opp .note-text, .opp .size-l .note-text, .opp .size-m .note-text, .opp .size-s .note-text { font-size: 18px; -webkit-line-clamp: 3; }
  /* the Model's column is 40% of the board, between 390 and 460 px. A percentage, not 40cqw on the panel: inside the table's zoom (--fit,
     .92 at 1000×520) WebKit took cqw from the board's zoomed width, so the panel fell to 390 px and cut 'Послуша…'; Chromium is unchanged */
  .table-board {
    grid-template-columns: minmax(0, 1fr) clamp(390px, 40%, 460px); grid-template-rows: 1fr auto; grid-template-areas: "track model" "event event"; gap: 8px 14px; padding: 13px 15px;
  }
  .table-board .board-head { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* for screen readers only */

  /* the event card's type follows the window's height (cqh: the stage's) */
  .event-side { gap: 6px; padding: 10px 12px; }
  .event-when { font-size: 12px; }
  .event-title { font-size: clamp(14px, 2.4cqh, 19px); }
  .event-about { padding: 8px 12px; }
  .event-alt { gap: 4px; padding: 8px 12px 10px; }
  .event-alt h3 { font-size: clamp(13.5px, 2.2cqh, 16px); }
  .event-about, .event-res { font-size: clamp(12px, min(2cqh, 1.9cqi), 14px); }

  /* the clock no taller than the cards: a smaller hourglass and title */
  .timer { gap: 8px; }
  .timer .hourglass { width: 24px; height: 32px; }
  .timer-title { font-size: 18px; }
  .timer:not(.mine) .timer-title { font-size: 16px; }
  .timer-sub { font-size: 12.5px; line-height: 1.2; }
  .moves { gap: 6px; }
  /* the moves panel lays its parts on a grid of four: the clock across, the three moves and Give under it */
  .moves { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 6px; align-content: start; }
  .moves > .timer { grid-column: 1 / -1; }
  .moves > .auto-note, .moves > .act-error { grid-column: 1 / -1; }

}

/* ---- icons (the owner, 2026-10-30): Table talk, Host and How to play in the top bar, and the three moves, show an icon; the word is
   each one's tooltip and label. Table talk's count of unread notes is a badge on its corner. */
.icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; padding: 0; }
.icon-btn .icon { flex: none; }
.rules-btn span { font-size: 21px; font-weight: 800; line-height: 1; }
.icon-badge {
  position: absolute; top: -6px; right: -6px; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 11px;
  font-size: 13px; font-weight: 800; line-height: 21px; color: #fff; background: var(--tomato); box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

/* ---- cards, cubes and the timeline (the owner, 2026-10-30: "too large fonts and ugly cards"; "align scores to the bottom"; the event
   card only as tall as it needs, more room for the timelines).
   A card speaks the board's language: each effect after a cube of its resource's colour, the Model's line after a small Model disc. Its
   title band is two lines tall on every card, so that the text under it lines up across the fan. */

/* the timeline takes the board's spare height (a screen wider than 920 px): its squares grow to fill it, and shrink as branches open */
@container stage (min-width: 1px) {
  .track-wrap { container: timeline / size; align-self: stretch; display: flex; flex-direction: column; justify-content: center; min-height: 140px; }

  /* the squares shrink as branches open, down to 44 px for two rows and further for three (the owner's 1000×520: a third branch was cut off
     under the second), and the gap between rows narrows with them; four rows or more may still not fit, and the track then scrolls */
  .track {
    --rgap: clamp(6px, calc(24px / var(--rows)), 12px);
    --sq: clamp(max(28px, min(44px, calc(88px / var(--rows)))), calc((100cqh - 46px - (var(--rows) - 1) * var(--rgap)) / var(--rows)), 84px);
    --sqw: max(66px, calc(var(--sq) + 10px));
  }
  /* the roller (Track.tsx useRoller): three rows or more on the table. The squares keep a two-row size; Main, with the years, is pinned on
     top, and the branches roll under it: a row comes to rest with its top at Main's bottom (the last one at the bottom), the one most in
     sight is in focus and its neighbours fade (nothing scales, so the columns stay lined up). Where every row fits, nothing fades */
  .track[data-roller] {
    --rgap: 12px; --sq: clamp(44px, calc((100cqh - 46px - var(--rgap)) / 2), 84px);
    overflow-y: auto; overscroll-behavior-y: contain; scroll-snap-type: y mandatory; scroll-padding-top: var(--drum-top, 0px);
  }
  .track[data-roller].free { scroll-snap-type: none; }
  .track[data-roller] .col { scroll-snap-align: none; }
  .track[data-roller] .row-main { position: sticky; top: 0; z-index: 3; background: var(--teal); }
  /* the drum's lip: under the pinned Main a short teal fade, so a row rolling under it reads as curving away, not cut (the owner's 1000×520) */
  .track[data-roller] .row-main::after { content: ''; position: absolute; left: 0; right: 0; bottom: -18px; height: 18px; background: linear-gradient(var(--teal), transparent); pointer-events: none; }
  .track[data-roller] .row-branch { scroll-snap-align: start none; transition: opacity .3s; }
  .track[data-roller].spinning .row-branch:not(.focus) { opacity: .4; }
  .track[data-roller].spinning .row-branch.dead.focus { opacity: .6; }
  .track[data-roller] .row-name { cursor: pointer; }
  .drum-btns { position: absolute; z-index: 4; right: 2px; bottom: 6px; display: flex; flex-direction: column; gap: 4px; }
  .drum-btns .round-btn { width: 26px; height: 26px; padding: 0; font-size: 12px; line-height: 1; }
  .drum-btns .round-btn:disabled { opacity: .3; cursor: default; }
}
@media (prefers-reduced-motion: reduce) { .track[data-roller] .row-branch { transition: none; } }

/* ---- the end screen in one window (the owner, 2026-10-30): wider than 920 px it is the window's height and the page never scrolls. The
   verdict is small, the scores, the 2035 pages and the side papers (the offers, the numbers) share the middle, the tree runs along the
   bottom, and the chat is as tall as the board (narrower up to 1279 px). The middle is as tall as the scores (or the side papers, on a
   board too narrow for three columns, where they lie under the scores) and the room left: the open page fills its column and scrolls in
   its paper if it must, and so does the list of offers beside it. Where the middle would not fit, it packs denser (Results.tsx useDense,
   data-dense on the board): 1, the side papers on one paper; 2, the rows and the tree's squares smaller too; past that (a match with many
   worlds) the middle scrolls inside. A short window (the
   owner's 1000 × 520) is laid out tighter: the top bar over the chat, so that the board takes the whole height, the brand beside the
   verdict and the host's buttons beside the tree's title. Every text on the board is 13 px or more, so that the zoom of a short window
   (.85 at most) keeps it over 11. */
@media (min-width: 921px) {
  .page.at-results { --chat-w: 360px; box-sizing: border-box; height: 100vh; height: 100dvh; display: flex; flex-direction: column; padding-top: 8px; padding-bottom: 12px; overflow: hidden; }
  .at-results > .topbar { flex: none; margin-bottom: 8px; }
  .at-results .results { flex: 1; min-height: 0; grid-template-columns: minmax(0, 1fr) var(--chat-w); grid-template-rows: minmax(0, 1fr); align-items: stretch; gap: 22px; }
  /* the board: the verdict (with Share) and the brand on one line, the middle, and the tree with the host's buttons on the right of its title */
  .at-results .results-board {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "verdict head" "middle middle" "tree tree"; min-height: 0; gap: 10px 16px; padding: 18px 24px 16px;
  }
  .at-results .verdict { grid-area: verdict; }
  .at-results .board-head { grid-area: head; flex-direction: column; align-items: flex-end; gap: 4px; }
  .at-results .brand { font-size: 24px; }
  .at-results .board-sub { font-size: 13px; }
  .at-results .tree { grid-area: tree; min-width: 0; }
  .at-results .tree-title { display: flex; align-items: center; min-height: 40px; margin: 0; }
  .at-results .results-foot { grid-area: tree; align-self: start; justify-self: end; max-width: 72%; }
  .at-results .verdict { gap: 14px; }
  .at-results .verdict-title { font-size: clamp(24px, 3.6vh, 34px); }
  .at-results .verdict-sub { margin-top: 3px; font-size: 14px; }
  .at-results .verdict > .pawn { width: 32px; height: 32px; box-shadow: 0 4px 0 var(--cd); }

  .at-results .results-grid { grid-area: middle; min-height: 0; overflow: auto; margin: -4px; padding: 4px; }
  .at-results .results .paper { padding: 12px 14px; }
  .at-results .results h2:not(.verdict-title):not(#chat-title) { margin-bottom: 6px; font-size: 17px; }
  .at-results .results h3 { margin: 10px 0 4px; font-size: 14px; }
  .at-results .score-row { gap: 10px; padding: 5px 6px; }
  .at-results .score-who b { font-size: 21px; }
  .at-results .score-n { min-width: 72px; font-size: 16px; }
  .at-results .scores-note { margin-top: 4px; font-size: 18px; }
  .at-results .stats dl { font-size: 14px; }

  .at-results .stamp { font-size: 13px; }
  .at-results .tree-title { font-size: 16px; }
  /* the tree's squares wide enough for every event's name in three lines of 13 px (its years too), so none needs the track's 12 px */
  .at-results .tree .track { --sq: 46px; --sqw: 88px; --rgap: 8px; }
  .at-results .tree .yr { font-size: 13px; }
  .at-results .tree .sq-text.tight { font-size: 13px; max-height: calc(3 * 1.08em); }
  .at-results .tree .sq-text.squeeze { -webkit-line-clamp: 3; }
  /* the tree as wide as the board (Task 9): at 1536 and 1920 the 88 px columns ran past the board, and the world labels after each row's
     last square lay beyond the track's edge, cut and faded by its mask. Now the seven columns (v3's ROUNDS; v2's ten left 72 px columns
     and clamped answers, Task 10) and a label of up to --label fit: the columns take what the board leaves (72 to 88 px), a long label
     wraps on two lines, and nothing slides, so there is no mask.
     ponytail: the tree's mask is off and its columns may be 72 px; ceiling: a board under ~730 px still slides the tree, now without the
     faded edge that says so, and an answer may need its hyphenated copy where 88 px fitted it whole */
  .at-results .tree { container: tree / inline-size; }
  .at-results .tree .track {
    --pad: 16px; --gap: 6px; --label: 150px;
    --sqw: clamp(72px, calc((100cqw - 2 * var(--pad) - var(--label)) / 7 - var(--gap)), 88px);
    -webkit-mask-image: none; mask-image: none;
  }
  .at-results .tree .row-name { max-width: calc(var(--label) - 12px); white-space: normal; overflow-wrap: anywhere; font-size: 20px; line-height: .95; }
  .at-results .tree .row-name small { font-size: 16px; }
  /* the middle: the scores and the pages side by side, the side papers under the scores (two of them side by side); on a board wide
     enough, the side papers a third column. The pages (and in three columns the side papers) count for nothing in the middle's height
     (height 0): they fill the row the scores make, stretched to the room there is (an auto row stretches), and scroll inside */
  .at-results .results-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-areas: "scores pages" "side pages"; align-items: start; }
  .at-results .scores { grid-area: scores; }
  .at-results .pages { grid-area: pages; align-self: stretch; height: 0; min-height: 100%; box-sizing: border-box; }
  .at-results .results-side { grid-area: side; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); align-items: start; gap: 12px; }
  .at-results .world-page { flex: 1; }
  .at-results .page-read { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
  .at-results .page-text { font-size: 14px; }
  .at-results .page-tab { min-height: 32px; font-size: 13px; }
  .at-results .offer-rows { max-height: calc(6 * 1.3em + 5 * 3px); overflow-y: auto; overscroll-behavior: contain; font-size: 13px; }
  .at-results .verdict .share-btn { min-height: 40px; }

  /* a score's name, stamp and faction on one line; the note about the bots beside the heading */
  .at-results .score-who { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 10px; }
  .at-results .scores { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 12px; }
  .at-results .scores > h2 { grid-row: 1; grid-column: 1; }
  .at-results .scores-note { grid-row: 1; grid-column: 2; margin: 0; }
  .at-results .score-rows { grid-column: 1 / -1; }
  /* the host's tools and New game in one row along the bottom, no taller than a small button */
  .at-results .results-foot { align-items: center; gap: 8px 14px; }
  .at-results .results-foot .start { display: flex; flex-direction: row-reverse; align-items: center; gap: 12px; }
  .at-results .results-foot .btn-big { min-height: 40px; padding: 0 18px; font-size: 16px; }
  .at-results .results-foot .hint, .at-results .results-foot .lobby-host { margin: 0; font-size: 13px; }
  .at-results .chat { height: auto; min-height: 0; }
  /* denser (useDense) */

  .at-results [data-dense] .results-side { gap: 0; border-radius: 8px; background: var(--paper); box-shadow: 0 4px 8px rgba(0, 0, 0, .35); }
  .at-results [data-dense] .results-side > .paper { padding: 10px 14px; background: none; box-shadow: none; }
  .at-results [data-dense] .results-side > .stats { border-left: 1px dashed var(--paper-line); }
  .at-results :is([data-dense="2"], [data-dense="3"]) .score-row { padding-block: 2px; }

  .at-results :is([data-dense="2"], [data-dense="3"]) .tree .track { --sq: 36px; --rgap: 6px; }

}
@media (min-width: 921px) and (max-width: 1279px) {
  .page.at-results { --chat-w: 300px; }
}
/* a board wide enough for three columns: the side papers on the right, one under the other, the offers taking what the numbers leave */
@container table (min-width: 1300px) {
  .at-results .results-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, .8fr); grid-template-areas: "scores pages side"; }
  .at-results .results-side { display: flex; flex-direction: column; align-items: stretch; align-self: stretch; height: 0; min-height: 100%; }
  .at-results .results-side > .offers { flex: 0 1 auto; min-height: 0; }
  .at-results .results-side > .stats { flex: none; }
  .at-results .offer-rows { max-height: none; min-height: 0; }
  .at-results [data-dense] .results-side > .stats { border-left: 0; border-top: 1px dashed var(--paper-line); }
}
/* a short window (or a narrow one, where the scores wrap more): the board a little smaller */
@media (min-width: 921px) and (max-height: 800px), (min-width: 921px) and (max-width: 1279px) and (max-height: 860px) {
  .at-results .results-board { zoom: .9; }
}
@media (min-width: 921px) and (max-height: 700px), (min-width: 921px) and (max-width: 1100px) and (max-height: 800px) {
  .at-results .results-board { zoom: .85; }
  .at-results .tree .track { --sq: 42px; }
  .at-results .score-row { padding-block: 3px; }
}
/* a short window: the top bar over the chat (the page a grid of two columns, the results' own columns and rows its subgrid, which a
   size container cannot be: none of the results' container rules applies this wide anyway), the board down the whole of the left one,
   its spare height shared out above and below the middle */
@media (min-width: 921px) and (max-height: 600px), (min-width: 921px) and (max-width: 1279px) and (max-height: 680px) {
  .page.at-results { display: grid; grid-template-columns: minmax(0, 1fr) var(--chat-w); grid-template-rows: auto minmax(0, 1fr); column-gap: 22px; }
  .at-results > .topbar { grid-area: 1 / 2; z-index: 1; }
  .at-results .results { grid-area: 1 / 1 / 3 / 3; container-type: normal; grid-template-columns: subgrid; grid-template-rows: subgrid; row-gap: 0; }
  .at-results .chat { grid-area: 2 / 2; }
  /* the board down the whole of the left column, its spare height shared out above and below the middle */
  .at-results .results-board { grid-area: 1 / 1 / 3 / 2; grid-template-rows: auto minmax(0, max-content) auto; align-content: space-between; padding: 14px 20px 12px; }
  .at-results .results-foot .hint { max-width: 190px; }
  .at-results .results-foot .btn-big { padding: 0 14px; }
  .at-results .score-row { row-gap: 1px; }
  .at-results .score-who b { font-size: 20px; }
}
/* the narrowest short window: the chat 280 px, and New game's line about the same seats for screen readers only (an error still shows),
   so that the buttons fit beside the tree's title */
@media (min-width: 921px) and (max-width: 999px) and (max-height: 680px) {
  .page.at-results { --chat-w: 280px; }
  .at-results .results-foot .hint:not(.error) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---- a half-year as a circle half filled (rounds.tsx, the owner): the left half for the first half of the year, the right for the second */
.half { position: relative; white-space: nowrap; } /* its words for screen readers stay inside it (in a scrolling list they once stretched the page) */
.half-mark { width: .9em; height: .9em; margin-right: .22em; vertical-align: -.1em; }
.half-mark circle { fill: none; stroke: currentColor; stroke-width: 1.6; }
.half-mark path { fill: currentColor; }
/* ---- WP9: hints on your first turn (coach.tsx). A paper slip with a mustard edge, pointing at a part of the table, and a mustard ring
   round that part; both fixed to the window over the table (outside its shrink to fit), above your rail and the top bar, under the flying
   cards, the drawer and the dialogs. The ring lets every tap through. Under reduced motion nothing in them moves. */
.coach-ring {
  position: fixed; z-index: 8; left: 0; top: 0; pointer-events: none; border-radius: 12px;
  box-shadow: 0 0 0 3px var(--mustard), 0 0 0 7px rgba(232, 178, 58, .3), 0 0 24px 8px rgba(232, 178, 58, .22);
}
.coach {
  position: fixed; z-index: 8; left: 0; top: 0; width: min(320px, calc(100vw - 16px)); padding: 11px 14px 10px; text-align: left;
  background: var(--paper); color: var(--ink); border-radius: 10px; box-shadow: 0 0 0 2px var(--mustard), 0 14px 30px rgba(0, 0, 0, .55);
}
/* the pointer to the target, at --tip from the slip's left edge (from its top edge when it lies beside the target) */
.coach::before {
  content: ''; position: absolute; top: -8px; left: calc(var(--tip, 50%) - 8px); width: 16px; height: 16px; border-radius: 2px;
  background: var(--paper); box-shadow: -2px -2px 0 var(--mustard); transform: rotate(45deg);
}
.coach[data-side="above"]::before { top: auto; bottom: -8px; box-shadow: 2px 2px 0 var(--mustard); }
.coach[data-side="right"]::before { top: calc(var(--tip, 50%) - 8px); left: -8px; box-shadow: -2px 2px 0 var(--mustard); }
.coach[data-side="left"]::before { top: calc(var(--tip, 50%) - 8px); left: auto; right: -8px; box-shadow: 2px -2px 0 var(--mustard); }
.coach :focus-visible { outline-color: var(--teal); }
.coach-h { margin: 0 0 4px; font-size: 17px; font-weight: 800; line-height: 1.15; }
.coach-text { margin: 0; font-size: 14px; line-height: 1.35; overflow-wrap: break-word; }
.coach-btns { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin-top: 8px; }
.coach-n { margin-right: auto; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--tomato); white-space: nowrap; }
.coach-skip {
  min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--ink-soft);
  font-weight: 700; font-size: 14px; text-decoration: underline; text-underline-offset: 3px;
}
.coach-skip:hover { color: var(--ink); }
/* they give way to what you open: a popped card (the hand's hint), a step's or the Model's slip, the host's menu (all of them) */

@media (prefers-reduced-motion: no-preference) {
  .coach { animation: coach-in .22s ease-out; }
  .coach-ring { animation: coach-ring 1.2s ease-out 2; }
}
@keyframes coach-in { from { opacity: 0; } }
@keyframes coach-ring { 0% { box-shadow: 0 0 0 3px var(--mustard), 0 0 0 16px rgba(232, 178, 58, 0), 0 0 24px 8px rgba(232, 178, 58, .22); } }
/* the hand's hint lies just above your rail, over the bottom of the board: on a screen where the page scrolls, the page gets that much
   more room under the board while it shows (coach.tsx --coach-room), so the board's last part (the Model) can still scroll up clear of it */
@media (max-width: 920px) {
  .table-top { padding-bottom: var(--coach-room, 0px); }
}
@media (max-width: 600px) {
  .coach { width: min(400px, calc(100vw - 16px)); padding: 10px 12px 9px; } /* a phone: as wide as the window lets it, so it is less tall */
  .coach-h { font-size: 16px; }
  .coach-text { font-size: 13.5px; }
}

/* ---- a move's slip (Actions.tsx, the owner: like a card, a first click explains and a second chooses): over the move buttons, a paper
   slip with the move's name, what it does, its cost and what a second click does; the button that opened it is ringed in mustard */
.moves { position: relative; }

/* a square's text: the copy with only long words broken, or (fit's 'hyph', when that still overflows) the one with every word broken */
.sq-h, .sq-text.hyph .sq-w { display: none; }
.sq-text.hyph .sq-h { display: inline; }
/* the end screen's tree on a short window: its squares are as low as 36 px, and a ring that small cut "Точкуване" to "Точ-ку-ва…"; there
   the horizon is an oval as wide as the squares instead */
.at-results .tree .sq.horizon { width: var(--sqw); margin-inline: 0; }

/* View game: a spectator's page says so in the top bar */
.watch-pill { display: inline-flex; align-items: center; margin: 0; padding: 0 14px; font-weight: 700; }
.watching .react-add { display: none; }

/* the event card as the ballot (EventCard.tsx): a version you may vote for answers the pointer; the marked one gets a mustard frame, the one
   you voted for a teal one (frames only: nothing covers a version, and the fitted table never moves) */
.event-alt.chosen { position: relative; border-radius: 6px; }

.event-alt.picked { background: rgba(232, 179, 61, .28); box-shadow: inset 0 0 0 3px var(--mustard); }
.event-alt.chosen { box-shadow: inset 0 0 0 3px var(--teal); }

/* the round on the table opens its slip (Track.tsx): its square is a button, and the slip says the vote decides its version */
.sq.now { cursor: pointer; font: inherit; border: 0; }
.sq.now.empty { border: 3px dashed var(--tomato); }
.sq.now.open { box-shadow: 0 0 0 3px var(--paper); }
.step-version.open { background: none; box-shadow: none; padding: 0; font-weight: 600; font-style: italic; }

/* the whole timeline (Track.tsx FullTimeline): an expand button in the timeline's top-right corner opens it in a modal of 80% of the
   screen, every branch and round as the end screen draws them */
@container stage (min-width: 1260px) and (min-height: 700px) {
  .table-board .board-head { position: relative; padding-right: 40px; }
  /* the timeline runs a little wider than the head: this puts the button on the ▲/▼'s centre line (the owner: "all 3 aligned in their middles") */
  .track-expand.in-head { right: -8px; }
} /* only where the head shows: elsewhere it is for screen readers only, out of the flow */
.track-expand { position: absolute; z-index: 6; top: 0; right: 0; width: 26px; height: 26px; padding: 0; display: grid; place-items: center; } /* the ▲/▼'s size (the owner) */
.full-timeline { width: 80vw; height: 80vh; max-width: none; max-height: none; padding: 0; border: 0; border-radius: 12px; background: var(--teal); color: var(--paper); box-shadow: 0 20px 40px rgba(0, 0, 0, .5); }
.full-timeline::backdrop { background: rgba(20, 12, 6, .62); }
.full-timeline-sheet { display: flex; flex-direction: column; gap: 10px; height: 100%; box-sizing: border-box; padding: 14px 18px 18px; }
.full-timeline-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 8px; border-bottom: 3px solid var(--mustard); }
.full-timeline-head h2 { margin: 0; font-size: 22px; font-weight: 800; }
.full-timeline-body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; overflow: auto; }
.full-timeline-body .track-wrap { margin: 0; flex: 1; min-height: 0; }
@media (max-width: 700px) { .full-timeline { width: calc(100vw - 16px); height: 90vh; } }

/* a closed Main (merged into another branch): its squares fade like any closed row's, the rounds after it are blank under their years, and
   its name and fate follow its last square; the curve down into the branch it joined is that row's (.merge-in) */
.row-main.dead .sq { opacity: .5; } /* muted, as a closed branch's row */

/* the expand button: in the board head's top-right corner where the head shows (a large window); in the timeline's corner where it is
   hidden (a compact window, a phone). Never both. */
.track-expand.in-track { display: none; top: 2px; right: 2px; } /* over the ▲/▼, on their centre line */
@container stage (max-width: 1259px) or (max-height: 699px) {
  .track-expand.in-track { display: grid; }
  .track-expand.in-head { display: none; }
}
@container table (max-width: 880px) {
  .track-expand.in-track { display: grid; }
  .track-expand.in-head { display: none; }
}
/* in the modal the columns shrink to show all fifteen rounds at once where the width allows (never under the track's 66 px; then it slides) */
@container stage (min-width: 1px) {
  .full-timeline .track {
    --sqw: max(66px, calc((100cqw - 2 * var(--pad)) / 15 - var(--gap)));
    --sq: clamp(44px, min(calc((100cqh - 46px - (var(--rows) - 1) * var(--rgap)) / var(--rows)), calc(var(--sqw) - 10px)), 84px);
  }
}

/* ---- the table in play (v2's Task 7, kept by v3): the event card's two answers, the fists on the table, the worlds with their people
   and Heat, and your rail's ballot and moves. Phone first: at 390 × 844 nothing is cut and nothing
   scrolls sideways; no text here is under 13 px. */

.seat-stuff { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; }
.fist-mark { font-size: 16px; line-height: 1; }

/* the event card: each answer careful or fast, and the Progress and Heat it brings your world; your fist and your ballot marked */
.event-res .pace { padding: 0 5px; border-radius: 3px; font-size: 1em; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.event-res .pace.careful { background: #d6ecea; color: var(--teal-deep); }
.event-res .pace.fast { background: #f7d9c9; color: var(--rust); }
.event-res .heat-add { font-weight: 700; color: var(--ink-soft); }
.event-res .heat-add.h1 { color: #b4561c; }
.event-res .heat-add.h2 { color: var(--tomato); }
.event-alt.chosen { box-shadow: inset 0 0 0 3px var(--teal); }
.event-alt.lived { background: #f7e7b5; }
.event-alt.fisted h3 { color: var(--rust); }
@container event (max-width: 459px) {
  .event-title { font-size: 15px; }
  .event-about { font-size: 13px; }
  .event-alt, .event-alt h3, .event-res { font-size: 13px; }
}

/* the fists on the table, a kraft strip under the card */
.board-event { display: grid; gap: 8px; min-width: 0; }
.fists { padding: 7px 12px 8px; border-radius: 6px; background: var(--kraft); color: var(--ink); box-shadow: 0 3px 6px rgba(0, 0, 0, .3); }
.fists-h { margin: 0 0 4px; font-size: 14px; font-weight: 800; }
.fists ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.fists small { font-size: 13px; }
.fists li { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 14px; line-height: 1.25; }
.fists .pawn { width: 14px; height: 14px; }
.fist-alt { font-weight: 700; overflow-wrap: anywhere; }

/* the worlds: a paper row each, in the timeline's order */
.worlds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.world { position: relative; padding: 7px 10px 8px; border-radius: 6px; background: var(--paper); color: var(--ink); box-shadow: 0 3px 6px rgba(0, 0, 0, .3); }
.world.mine { box-shadow: inset 4px 0 0 var(--mustard), 0 3px 6px rgba(0, 0, 0, .3); }
.world.taken { background: #2b2a27; color: var(--paper); }
.world.empty { opacity: .85; }
.world-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0 0 4px; }
.world-name { font-size: 16px; font-weight: 800; overflow-wrap: anywhere; }
.world-founder { font-size: 13px; color: var(--ink-soft); }
.world.taken .world-founder { color: #cfc6b0; }
.world-mark { padding: 0 6px; border-radius: 4px; font-size: 13px; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.world-mark.you { background: var(--mustard); color: var(--ink); }
.world-mark.happened { background: var(--teal); color: var(--teal-ink); }
.world-mark.taken { background: var(--tomato); color: var(--paper); }
.world-body { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.world-who { display: inline-flex; align-items: center; gap: 3px; min-height: 18px; font-size: 13px; color: var(--ink-soft); }
.world-who .pawn { width: 16px; height: 16px; }
/* "Nobody lives here" is a <small>: the browser's smaller would put it under the floor (fontfit) */
.world-who small { font-size: inherit; }
.world-drift { font-size: 13px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.world.taken .world-drift, .world.taken .world-who { color: #cfc6b0; }
/* a world's people: eight places, a dot for each billion */
.people-row { display: inline-flex; align-items: center; gap: 6px; }
.people-dots { display: inline-flex; gap: 3px; }
.people-dots i { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(36, 26, 18, .25); }
.people-dots i.on { background: var(--teal); box-shadow: inset 0 0 0 1.5px var(--teal-deep), 0 1px 0 rgba(0, 0, 0, .3); }
.world.taken .people-dots i { box-shadow: inset 0 0 0 1.5px rgba(241, 234, 216, .25); }
.world.taken .people-dots i.on { background: var(--teal-dim); }
.people-n { font-size: 14px; font-variant-numeric: tabular-nums; }
/* the Heat: TAKEOFF steps, a notch after each incident threshold, the last in the Model's black */
.heat { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.heat-steps { display: inline-flex; gap: 2px; }
.heat-steps i { position: relative; width: 8px; height: 12px; border-radius: 1px; background: rgba(36, 26, 18, .12); }
.heat-steps i.incident::after { content: ''; position: absolute; right: -2px; top: -3px; bottom: -3px; width: 2px; background: var(--rust); }
.heat-steps i.takeoff { background: rgba(27, 26, 24, .4); }
.heat-steps i.on { background: #e08a2c; }
.heat-steps i.on:nth-child(n+4) { background: var(--tomato); }
.heat-steps i.takeoff.on, .heat.taken .heat-steps i { background: #1b1a18; box-shadow: inset 0 0 0 1px var(--tomato); }
.heat-n { font-size: 13px; font-weight: 700; }
/* a person on the way between two worlds' rows */
.flyer-person {
  position: fixed; left: 0; top: 0; z-index: 15; width: 14px; height: 14px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: var(--teal); box-shadow: inset 0 0 0 2px var(--teal-deep), 0 4px 8px rgba(0, 0, 0, .45); will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) { .flyer-person { display: none; } }

/* your rail: the ballot and the moves take the hand's place, as tall as they need */
.hand-slot:has(.ballot), .hand-slot:has(.move-opts), .hand-slot:has(.move-wait), .hand-slot:has(.card-hand) { height: auto; }
.ballot, .move-opts, .card-hand { display: flex; flex-direction: column; gap: 6px; min-width: 0; color: var(--paper); }
.ballot-h { margin: 0; font-size: 14px; font-weight: 800; color: var(--teal-ink); }
.ballot-alts { display: flex; flex-direction: column; gap: 6px; }
.ballot-alt { display: flex; align-items: stretch; gap: 6px; min-width: 0; }
.ballot-pick {
  flex: 1 1 auto; min-width: 0; min-height: 44px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 10px;
  padding: 5px 12px; border: 0; border-radius: 9px; background: var(--paper); color: var(--ink); text-align: left; box-shadow: 0 3px 0 var(--paper-edge);
}
.ballot-name { font-size: 15px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.ballot-fx { font-size: 13px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.ballot-alt.picked .ballot-pick { box-shadow: 0 0 0 3px var(--mustard), 0 3px 0 var(--paper-edge); }
.ballot-alt.voted .ballot-pick { box-shadow: 0 0 0 3px var(--teal-dim), 0 3px 0 var(--paper-edge); }
.ballot-alt.voted .ballot-pick:disabled { opacity: 1; }
.ballot-pick:disabled { cursor: default; }
.ballot-alt.off .ballot-pick { opacity: .45; text-decoration: line-through; text-decoration-thickness: 1.5px; }
.ballot.cast .ballot-alt:not(.voted) .ballot-pick { opacity: .55; }
.fist-btn {
  flex: none; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 0 10px;
  border: 2px dashed rgba(241, 234, 216, .55); border-radius: 9px; background: transparent; color: var(--paper); font-size: 14px; font-weight: 700;
}
.fist-btn span[aria-hidden] { font-size: 18px; line-height: 1; filter: grayscale(.6); }
.fist-btn.up { border: 2px solid var(--rust); background: var(--tomato); box-shadow: 0 3px 0 var(--rust); }
.fist-btn.up span[aria-hidden] { filter: none; }
.fist-btn:disabled { opacity: .5; cursor: default; }
.ballot-foot { display: flex; flex-wrap: wrap; gap: 8px; }
.ballot-cast { flex: 1 1 auto; }
.move-row .btn.open { box-shadow: 0 0 0 3px var(--mustard); }
/* a slip in the rail: the name of your world */
.slip { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px 10px; border-radius: 8px; background: var(--paper); color: var(--ink); box-shadow: 0 4px 10px rgba(0, 0, 0, .4); }
.slip-h { margin: 0; font-size: 14px; font-weight: 800; }
.slip-k { margin: 0; font-size: 13px; color: var(--ink-soft); }
.slip-go { align-self: flex-start; }
.name-field { display: flex; align-items: center; gap: 8px; }
.name-field .tape-input { flex: 1 1 auto; min-width: 0; font-size: 18px; }
.name-field .count { font-size: 13px; color: var(--ink-soft); }
/* the moves: a row each, its options as buttons with their price */
.move-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.move-k { flex: none; min-width: 96px; font-size: 13px; font-weight: 700; color: var(--teal-ink); }
.move-opt { display: inline-flex; align-items: center; gap: 6px; }
.move-opt small { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.move-wait { margin: 0; font-size: 15px; font-weight: 700; color: var(--teal-ink); }
/* a seat's own deed in the table talk takes reactions, as a message does */
.log-deed .bubble-row { align-items: flex-start; }
.log-deed .log-line { flex: 1 1 auto; margin: 0; }

/* a narrow table (the phone): the rail compact, the ballot's head left to the clock */
@container table (max-width: 880px) {
  .me .seat-stuff { gap: 3px 10px; }
  .ballot-h { display: none; }
  .move-opts .ballot-h { display: block; }
  .move-k { flex-basis: 100%; }
  .fist-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .fist-btn { min-width: 48px; padding: 0 8px; }
  .ballot .btn, .move-opts .btn { min-height: 42px; }
  .board-low { padding: 0 6px; }
  .world-name { font-size: 15px; }
}
/* the stage (wider than 920 px): the event card and the fists where the event card was, the worlds where the Model's panel was */
@container stage (min-width: 1px) {
  .board-event { grid-area: event; align-self: end; }
  .board-event .event { grid-area: auto; }
  /* the worlds count for nothing in the board's rows (height 0), then fill the room the track and the event card leave them and scroll
     inside it: three worlds or more made the track's row as tall as their list and pushed the event card under your rail (the overfit
     check, seven seats at 1000 × 520) */
  .worlds-panel { grid-area: model; align-self: stretch; height: 0; min-height: 100%; overflow-y: auto; overscroll-behavior: contain; }
}
@container table (max-width: 400px) {
  .opp-tape { flex-wrap: wrap; font-size: 16px; }
}


/* ---- v3 (Task 8): the others round the board, your side, the worlds' two tracks, the vote's tie, the cards and their reveal. Phone first:
   at 390 × 844 nothing is cut and nothing scrolls sideways; no text here is under 13 px. */

/* a seat's tape: its player's name in the hand, its doctrine under it in type */
.opp-tape { flex-wrap: wrap; column-gap: 6px; }
.opp-doctrine { flex-basis: 100%; font-family: var(--type); font-size: 13px; font-weight: 700; line-height: 1.2; color: var(--ink-soft); }
/* a seat's marks: its fist, the night's call, a card still to play, its move made (an icon in a chip, the word for screen readers); cut off,
   whom it accuses and your shield (in words) */
.opp-stuff, .seat-stuff { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; }
.seat-mark {
  display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 4px; border-radius: 13px;
  font-size: 15px; line-height: 1; background: var(--paper); color: var(--ink); box-shadow: 0 2px 0 var(--paper-edge);
}
.seat-mark.fist { background: var(--tomato); box-shadow: 0 2px 0 var(--rust); }
.seat-mark.called { background: #1b1a18; color: var(--mustard); box-shadow: 0 2px 0 #000; }
.seat-mark.to-play { background: var(--kraft); }
.mini-card { display: block; width: 11px; height: 15px; border-radius: 2px; background: repeating-linear-gradient(45deg, var(--teal) 0 3px, var(--teal-deep) 3px 6px); box-shadow: inset 0 0 0 1.5px var(--paper); }
.seat-mark.done { background: var(--teal-deep); color: var(--teal-ink); box-shadow: none; }
.seat-mark.said { height: auto; min-height: 22px; padding: 1px 8px; border-radius: 4px; font-size: 13px; font-weight: 700; line-height: 1.25; }
.seat-mark.cut { background: #2b2a27; color: var(--paper); box-shadow: none; }
.seat-mark.accuses { background: var(--sticky); }
.seat-mark.shield { background: var(--teal-ink); color: var(--teal-deep); }

/* your side, which only you see: a paper slip for a Human, the Model's black ringed in tomato for an agent */
.side { padding: 5px 10px 6px; border-radius: 6px; background: var(--paper); color: var(--ink); box-shadow: 0 3px 6px rgba(0, 0, 0, .35); transform: rotate(-.5deg); }
.side.agent { background: #1b1a18; color: var(--paper); box-shadow: inset 0 0 0 2px var(--tomato), 0 3px 6px rgba(0, 0, 0, .35); }
.side-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; margin: 0; }
.side-who b { font-size: 16px; font-weight: 800; }
.side.agent .side-who b { color: #ff7a5c; }
.side-allies { font-size: 13px; font-weight: 600; }
.side-goal { margin: 2px 0 0; font-size: 13px; line-height: 1.3; color: var(--ink-soft); }
.side.agent .side-goal { color: #cfc6b0; }

/* the worlds: the people at risk over them; each world's Heat and Progress on a line of their own */
.worlds-panel { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.worlds-risk { margin: 0; padding: 4px 10px; border-radius: 6px; font-size: 13px; font-weight: 700; line-height: 1.3; background: var(--teal-deep); color: var(--teal-ink); }
.worlds-risk.some { background: #1b1a18; color: var(--sticky); }
.world-tracks { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 5px; }
.progress { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; white-space: nowrap; }
.progress-steps { display: inline-flex; gap: 2px; border-radius: 2px; }
.progress-steps i { width: 8px; height: 12px; border-radius: 1px; background: rgba(36, 26, 18, .12); }
.progress-steps i.on { background: var(--mustard); box-shadow: inset 0 0 0 1px var(--mustard-deep); }
.progress.behind .progress-steps i.on { background: #ecd9a2; box-shadow: inset 0 0 0 1px #c9ac5a; }
.progress.goal .progress-steps { outline: 2px solid var(--mustard-deep); outline-offset: 1px; }
.progress-n { font-size: 13px; font-weight: 700; }
.progress-behind { font-size: 13px; font-weight: 700; color: var(--rust); }
.world.taken .progress-steps i { background: rgba(241, 234, 216, .15); }
.world.taken .progress-steps i.on { background: var(--mustard-deep); }
.world-mark.tried { background: var(--kraft); color: var(--ink); }
.world-who .who { position: relative; display: inline-flex; }
.world-who .who.cut::after { content: ''; position: absolute; left: -3px; right: -3px; top: 45%; height: 2px; background: var(--ink); transform: rotate(-35deg); }
.world-cut { margin: 4px 0 0; font-size: 13px; font-weight: 700; color: var(--rust); }
.world.taken .world-cut { color: var(--sticky); }

/* the event card: who wins a tie in your world, across under the answers */
.event-tie { grid-column: 2 / -1; grid-row: 3; margin: 0; padding: 0 14px 10px; font-size: 13px; font-style: italic; line-height: 1.3; color: var(--ink-soft); }
.event-in:has(.event-tie) .event-side { grid-row: 1 / span 3; }
@container event (min-width: 760px) {
  .event-tie { grid-row: 2; }
  .event-in:has(.event-tie) .event-side, .event-in:has(.event-tie) .event-about { grid-row: 1 / span 2; }
}
@container event (max-width: 459px) {
  .event-tie { grid-column: 2; grid-row: auto; padding: 4px 8px 6px; }
  .event-in:has(.event-tie) .event-side { grid-row: 1 / span 4; }
}

/* the ballot's last line: what a fist means; the Charter's shield beside Cast */
.ballot-note { margin: 0; font-size: 13px; line-height: 1.3; color: var(--teal-ink); }
/* the ballots on the table, in the cards phase: who voted for each answer */
.ballots li { gap: 2px 10px; }
.ballot-who { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }

/* your card: Secure on paper, Leak in the Model's black (only an agent has it) */
.card-why, .card-note, .card-wait { margin: 0; font-size: 13px; line-height: 1.3; color: var(--teal-ink); }
.card-state { margin: 0; font-size: 15px; font-weight: 700; color: var(--paper); }
.card-picks { display: flex; flex-wrap: wrap; gap: 10px; }
.play-card {
  flex: 0 1 150px; min-width: 110px; min-height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 6px 10px; border: 0; border-radius: 8px; font-size: 16px; font-weight: 800;
}
.play-card.secure { background: var(--paper); color: var(--teal-deep); box-shadow: inset 0 0 0 3px var(--teal), 0 4px 0 var(--paper-edge); }
.play-card.leak { background: #1b1a18; color: #ff7a5c; box-shadow: inset 0 0 0 3px var(--tomato), 0 4px 0 #000; }
.play-card .card-face { font-size: 20px; line-height: 1; }
.play-card:disabled { opacity: .55; cursor: default; }
.play-card:active:not(:disabled) { transform: translateY(3px); }

/* the cards on the table: each card player's card, face down once it is in (dashed while still to play); then the reveal, the cards
   turning over one after another (not under reduced motion: they lie face up at once), and who played them */
.card-table { display: flex; flex-direction: column; gap: 6px; padding: 7px 12px 9px; border-radius: 6px; background: var(--kraft); color: var(--ink); box-shadow: 0 3px 6px rgba(0, 0, 0, .3); }
.card-world { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.card-where, .card-count { margin: 0; font-size: 14px; font-weight: 700; }
.card-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.table-card { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.card-back {
  display: block; width: 28px; height: 38px; border-radius: 4px;
  background: repeating-linear-gradient(45deg, var(--teal) 0 4px, var(--teal-deep) 4px 8px); box-shadow: inset 0 0 0 2px var(--paper), 0 2px 3px rgba(0, 0, 0, .35);
}
.table-card.in-hand .card-back { background: transparent; box-shadow: none; border: 2px dashed rgba(36, 26, 18, .45); }
.table-card .pawn, .card-who .pawn { width: 13px; height: 13px; box-shadow: 0 2px 0 var(--cd); }
.turn-card { display: grid; transform-style: preserve-3d; }
.turn-card > * { grid-area: 1 / 1; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.turn-card .card-back { width: auto; height: 34px; transform: rotateY(180deg); }
.card-front {
  display: flex; align-items: center; justify-content: center; min-width: 66px; height: 34px; padding: 0 6px; border-radius: 4px;
  font-size: 13px; font-weight: 800; white-space: nowrap;
}
.turn-card.secure .card-front { background: var(--paper); color: var(--teal-deep); box-shadow: inset 0 0 0 2px var(--teal); }
.turn-card.leak .card-front { background: #1b1a18; color: #ff7a5c; box-shadow: inset 0 0 0 2px var(--tomato); }
@media (prefers-reduced-motion: no-preference) {
  .turn-card { animation: card-turn .55s cubic-bezier(.3, .7, .4, 1) both; animation-delay: calc(.3s + var(--i, 0) * .35s); }
}
@keyframes card-turn { from { transform: perspective(240px) rotateY(180deg); } to { transform: perspective(240px) rotateY(0deg); } }
.card-who { display: flex; flex-wrap: wrap; gap: 3px; margin: 0; }
.card-shield { flex-basis: 100%; margin: 0; font-size: 13px; font-weight: 700; color: var(--teal-deep); }

/* the move phase: once your move is made, who has still to move */
.move-wait p { margin: 0; }
.move-who { font-size: 13px; font-weight: 600; }

/* the round on the timeline: five pawns or more in its square get smaller, so that seven fit */
.sq.now:has(> :nth-child(6)) .pawn { width: 14px; height: 14px; box-shadow: 0 2px 0 var(--cd); }

/* a phone (a table of 880 px or less): the goal under your side and the fist's note are left to the rules, so that the rail stays low */
@container table (max-width: 880px) {
  .side { padding: 2px 8px 3px; }
  .side-who b { font-size: 14px; }
  .side-goal, .ballot-note { display: none; }
  .play-card { min-height: 52px; }
}
/* the stage when compact: your side's goal in its title only */
@container stage (max-width: 1259px) or (max-height: 699px) {
  .side-goal { display: none; }
}

/* ---- v3 (Task 9): the night, the move phase's accusations and powers, the end screen's reveal and feedback, the console's answers.
   Phone first: at 390 × 844 nothing is cut and nothing scrolls sideways; no text here is under 13 px. */

/* the night: on the board, the two seats called, in the Model's black with a mustard moon; in your rail, the offer or the watch */
.night-call { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 7px 12px; border-radius: 6px; background: #1b1a18; color: var(--paper); box-shadow: 0 3px 6px rgba(0, 0, 0, .35); }
.night-h { margin: 0; font-size: 15px; font-weight: 800; color: var(--mustard); }
.night-who { margin: 0; font-size: 14px; font-weight: 700; }
.hand-slot:has(.night-hand) { height: auto; }
.night-hand { display: flex; flex-direction: column; gap: 6px; min-width: 0; color: var(--paper); }
.night-hand.offer, .night-hand.watch { padding: 8px 12px 10px; border-radius: 8px; background: #1b1a18; box-shadow: inset 0 0 0 2px var(--mustard), 0 4px 10px rgba(0, 0, 0, .4); }
.night-hand.offer { box-shadow: inset 0 0 0 2px var(--tomato), 0 4px 10px rgba(0, 0, 0, .4); }
.night-hand-h { margin: 0; font-size: 14px; font-weight: 800; color: var(--mustard); }
.night-text { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.35; }
.night-sub { margin: 0; font-size: 13px; font-weight: 600; color: var(--teal-ink); }
.night-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.night-btns .btn { flex: 1 1 120px; min-height: 44px; }
.night-accept { background: var(--tomato); color: var(--paper); box-shadow: 0 3px 0 var(--rust); }

/* the move phase: the accusations in your world, the chooser's seats as buttons, your power's answer */
.accusations { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 4px 10px; border-radius: 6px; background: var(--sticky); color: var(--ink); font-size: 13px; }
.accusations-h { margin: 0; font-weight: 800; }
.accusations ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 12px; }
.accusations li { display: inline-flex; align-items: center; gap: 4px; }
.accusations .pawn { width: 12px; height: 12px; box-shadow: 0 2px 0 var(--cd); }
.pick-row { display: flex; flex-wrap: wrap; gap: 6px; }
.pick { display: inline-flex; align-items: center; gap: 6px; }
.pick .pawn { width: 14px; height: 14px; box-shadow: 0 2px 0 var(--cd); }
.pick.on, .pick[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--tomato); }
.pick.on:disabled { opacity: 1; }
.power-answer { margin: 0; padding: 6px 10px; border-radius: 6px; background: #1b1a18; color: var(--sticky); font-size: 14px; font-weight: 700; line-height: 1.3; box-shadow: inset 0 0 0 2px var(--mustard); }
.move-wait { display: flex; flex-direction: column; gap: 6px; }

/* the end screen: the verdict's mark, each seat's side on the reveal, the agents, the nights, trials and worlds, the feedback form */
.verdict-mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; font-size: 26px; font-weight: 800; }
.verdict-mark.humans { background: var(--paper); color: var(--teal-deep); box-shadow: inset 0 0 0 3px var(--teal), 0 5px 0 var(--paper-edge); }
.verdict-mark.model { background: #1b1a18; color: #ff7a5c; box-shadow: inset 0 0 0 3px var(--tomato), 0 5px 0 #000; }
.reveal-agents { display: flex; flex-direction: column; gap: 2px; margin: 0 0 4px; font-size: 14px; line-height: 1.35; }
.reveal-agents p { margin: 0; }
.side-tag { min-width: 0; font-size: 13px; font-weight: 800; color: var(--teal-deep); white-space: nowrap; }
.side-tag.agent { padding: 2px 8px; border-radius: 4px; background: #1b1a18; color: #ff7a5c; }
.score-row.won { background: rgba(232, 178, 58, .22); border-radius: 6px; }
.offer-row.happened { font-weight: 700; color: var(--ink); }
.offer-none { margin: 0; font-size: 14px; color: var(--ink-soft); }
.pages-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.feedback { display: flex; flex-direction: column; gap: 8px; }
.feedback-q { margin: 0; padding: 0; font-size: 15px; font-weight: 800; }
.feedback-text { min-height: 72px; resize: vertical; font: inherit; font-size: 15px; }
.feedback-again { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; padding: 0; border: 0; }
.feedback-again legend { float: left; margin-right: 12px; }
.feedback-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.feedback-send { flex: none; }
.feedback-thanks { margin: 0; font-size: 16px; font-weight: 700; color: var(--teal-deep); }
.feedback-said { display: grid; gap: 2px; margin: 0; font-size: 14px; }
.feedback-said dt { font-weight: 700; color: var(--ink-soft); }
.feedback-said dd { margin: 0 0 4px; }
.feedback-moment { white-space: pre-line; overflow-wrap: anywhere; font-family: var(--hand); font-size: 20px; line-height: 1.15; }
.feedback-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.feedback-head h2 { margin: 0; }
.feedback-intro { margin: 0; font-size: 14px; line-height: 1.35; color: var(--ink-soft); }
/* the form about the last game, as a card over the new match until it is answered or closed (Feedback.tsx FeedbackCard) */
.feedback-card {
  position: fixed; z-index: 18; top: 70px; left: 16px; width: min(380px, calc(100vw - 32px)); max-height: calc(100dvh - 86px); overflow: auto;
  padding: 14px 16px 16px; box-shadow: 0 14px 30px rgba(0, 0, 0, .45);
}
.feedback-card .feedback-text { min-height: 52px; }
@media (max-width: 920px) { .feedback-card { top: 8px; left: 8px; width: calc(100vw - 16px); max-height: calc(100dvh - 16px); } }
.rules-doctrines { list-style: none; padding-left: 0; }
@media (min-width: 921px) {
  .at-results .pages-col { grid-area: pages; align-self: stretch; height: 0; min-height: 100%; gap: 12px; }
  .at-results .pages-col > .pages { flex: 1 1 auto; height: auto; min-height: 200px; }
  .at-results .pages-col > .feedback { flex: none; gap: 5px; }
  .at-results .feedback-text { min-height: 52px; }
  .at-results .feedback .hint { font-size: 13px; }
  .at-results .verdict-mark { width: 32px; height: 32px; font-size: 18px; }
  /* the reveal's agents and its "Cards played" across the paper, under its head and the note about the bots */
  .at-results .reveal-paper > :is(.reveal-agents, h3) { grid-column: 1 / -1; }
  /* the nights across the side papers, their lines being the longest */
  .at-results .results-side > .nights { grid-column: 1 / -1; }
}
/* a short window (the owner's 1000 × 520): the form without its head (it still names the form) and with a lower field, so that its
   question, field, yes or no and Send are all on screen at once */
@media (min-width: 921px) and (max-height: 600px) {
  .at-results .feedback:not(.sent) > .feedback-head { display: none; }
  .at-results .feedback-text { min-height: 40px; }
}

/* the console: under a game that has ended, its people's answers to the feedback form, match by match */
.answers { padding: 8px 16px 14px; border-top: 1px dashed var(--paper-line); }
.answers-h { margin: 0 0 4px; font-size: 15px; font-weight: 800; }
.answers-none, .answers-sum { margin: 0; font-size: 13px; color: var(--ink-soft); }
.answers-rows { list-style: none; margin: 4px 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.answer-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; }
.answer-who .pawn { width: 14px; height: 14px; box-shadow: 0 2px 0 var(--cd); }
.answer-again { padding: 0 6px; border-radius: 4px; font-size: 13px; font-weight: 800; }
.answer-again.yes { background: var(--teal); color: var(--paper); }
.answer-again.no { background: var(--paper-line); color: var(--ink); }
.answer-moment { margin: 2px 0 0 20px; font-size: 14px; line-height: 1.4; white-space: pre-line; overflow-wrap: anywhere; }