/* 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: repeating-linear-gradient(91deg, #6b4428 0 22px, #633f24 22px 24px, #72492b 24px 51px, #5f3b20 51px 53px, #6b4428 53px 80px);
  --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;
}
/* the factions' pawn colours (--c) and their wooden underside (--cd) */
.f0 { --c: #e8743f; --cd: #9c4520; }
.f1 { --c: #5b8bd6; --cd: #2f5a9e; }
.f2 { --c: #6cc08a; --cd: #3d8a58; }
.f3 { --c: #b07ad6; --cd: #7a4aa0; }

*, *::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); background: var(--oak) var(--grain); }
/* 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); }

.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: 11px; font-weight: 700; line-height: 1.6; 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: tape, face-down cards, cubes, score; the top seat lies along the board's top edge, the other two down its sides */
.opp { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
.opp-left { grid-area: left; margin-top: 34px; }
.opp-right { grid-area: right; margin-top: 34px; }
.opp-top {
  grid-area: top; justify-self: center; display: grid; align-items: center; gap: 6px 22px; min-height: 112px;
  grid-template-areas: "tape mug note" "where mug note" "stuff mug note";
}
.opp-top .opp-tape { grid-area: tape; justify-self: start; }
.opp-top .opp-where { grid-area: where; justify-self: start; }
.opp-top .opp-stuff { grid-area: stuff; flex-direction: row; align-items: center; gap: 16px; }
.opp-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, .me-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; }
.opp-res { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.opp-score { margin: 0; font-size: 13px; font-weight: 600; color: var(--paper); }
.backs { display: grid; grid-template-columns: repeat(3, 30px); gap: 3px; }
.opp-top .backs { display: flex; }
.backs i {
  width: 30px; height: 42px; border-radius: 4px; border: 2px solid var(--paper);
  background: #2f4f8a; box-shadow: inset 0 0 0 3px #2f4f8a, inset 0 0 0 4px rgba(241, 234, 216, .4), 0 2px 3px rgba(0, 0, 0, .3);
}
.backs-n { display: none; }
.mug {
  grid-area: mug; width: 76px; height: 76px; border-radius: 50%;
  background: radial-gradient(circle, #3a2212 0 52%, #e9e3d6 54% 70%, #d7cfbf 72%); box-shadow: 4px 6px 8px rgba(0, 0, 0, .35);
}

/* resource cubes: Compute mustard, Capability tomato, Control blue, Legitimacy paper */
.res-comp { --cube: var(--mustard); }
.res-cap { --cube: var(--tomato); }
.res-ctrl { --cube: #5b8bd6; }
.res-leg { --cube: var(--paper); }
.cubes { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-start; gap: 8px; }
.res { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; color: var(--paper); text-align: center; line-height: 1.15; }
.pile { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
.pile i { background: var(--cube); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3); }
.fav { font-weight: 800; color: var(--mustard); }
.small { gap: 6px; }
.small .res { width: 34px; font-size: 13px; }
.small .pile { width: 34px; }
.small .pile i { width: 10px; height: 10px; }
.small .res-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.small .fav { font-size: 11px; }
/* your own cubes: each column as wide as its pile or its name (bg 'Способности'), the count above the name; a name that still
   does not fit breaks at a syllable, or anywhere as a last resort */
.big { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 8px; }
.big .res { font-size: 13px; }
.big .res-count b { font-size: 15px; }
.big .res-name { display: block; overflow-wrap: anywhere; }
.big .pile { width: 53px; }
.big .pile i { width: 15px; height: 15px; }

/* 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-top .note { --tilt: 3deg; width: 230px; max-height: 104px; padding: 10px 12px; }
.opp-top .note-text { -webkit-line-clamp: 3; }
.opp-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; }
.track {
  --sq: 58px; --gap: 8px; --col: calc(var(--sq) + 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(--sq) - 4px); font-size: 12px; 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); }
.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(--sq) / 2 - 1.5px);
  bottom: calc(var(--sq) / 2 - 1.5px);
  width: calc(var(--sq) / 2 + var(--gap) - 2px);
  height: calc(var(--up) * (var(--sq) + var(--rgap)) - var(--sq) / 2 + 1.5px);
}
.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(--sq); height: var(--sq); padding: 3px; border-radius: 4px; text-align: center; color: var(--ink);
}
.sq.past { background: var(--mustard); }
.row-branch .sq.past { background: var(--paper); }
.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); }
.sq.horizon { border-radius: 50%; border: 2px solid var(--mustard); }
.sq.horizon.now { border-width: 3px; }
.sq .pawn { width: 20px; height: 20px; }
.sq-text {
  display: block; width: 100%; max-height: calc(3 * 1.05em); overflow: hidden;
  font-weight: 700; font-size: 12px; font-stretch: 75%; line-height: 1.05; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: normal;
}
.sq-text.tight { font-size: 10.5px; max-height: calc(4 * 1.05em); }
.sq-text.squeeze { overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.track-hint { display: none; margin: 0; font-size: 12px; color: var(--teal-ink); }

/* under the track: the round's event card, the Model's cup, its pool, values and notes */
.board-low { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px 26px; padding: 6px 12px 0; }
.event {
  flex: 1 1 380px; max-width: 480px; min-width: 0; display: flex; min-height: 160px; overflow: hidden;
  background: var(--paper); color: var(--ink); border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, .35);
}
.event-side { flex: 0 0 160px; 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 { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4; -webkit-hyphenate-limit-before: 4; overflow-wrap: break-word; }
.event-title { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.05; }
.event-alt { flex: 1 1 0; 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; }
.event-model { margin: auto 0 0; font-size: 14px; line-height: 1.3; color: var(--rust); }
.event-model.none { color: var(--ink-soft); }
.model { flex: 1 1 380px; display: flex; align-items: flex-start; gap: 26px; min-width: 0; }
.cup-spot { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cup-ring { display: flex; align-items: center; justify-content: center; width: 160px; height: 160px; border: 3px solid var(--mustard); border-radius: 50%; }
.cup {
  width: 118px; height: 118px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #4a4a4a, #141414 60%); box-shadow: 6px 10px 14px rgba(0, 0, 0, .55), inset 0 0 0 6px #262626;
}
.model-name { margin: 0; font-size: 15px; font-weight: 800; color: var(--mustard); }
.model-side { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 8px; }
.pool { display: flex; align-items: center; gap: 12px; }
.pool-cubes { display: flex; flex-wrap: wrap; gap: 4px; max-width: 110px; }
.pool-cubes i { width: 18px; height: 18px; background: var(--mustard); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35); }
.pool-label { margin: 0; max-width: 140px; font-size: 14px; line-height: 1.25; color: var(--teal-ink); }
.model-notes {
  max-width: 340px; padding: 7px 12px 8px; background: var(--paper); color: var(--rust); transform: rotate(-1.5deg);
  font-family: var(--hand); font-size: 18px; line-height: 1.05; box-shadow: 2px 4px 6px rgba(0, 0, 0, .35);
}
.model-notes p { margin: 0; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.model-notes p + p { margin-top: 4px; padding-top: 4px; border-top: 1px dashed var(--paper-line); }
/* a narrower board: the event card and the cup side by side, the pool, the values and the notes in a band under them */
@container board (max-width: 880px) {
  .board-low { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 20px; }
  .event { max-width: none; }
  .model { display: contents; }
  .model-side { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 0; }
  .model-notes { flex: 1 1 100%; max-width: none; transform: rotate(-1deg); }
}

/* ---- 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; }
.me-score { margin: 0; font-size: 15px; font-weight: 700; color: var(--paper); white-space: nowrap; }
.me .big .pile { width: 54px; }
.me .big .pile i { width: 12px; height: 12px; }

/* 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); }
.hand-slot:has(.vote) { height: auto; }
.hand {
  --w: 140px; --h: 190px; --gap: 112px; --lift: 72px; --zoom: 1.3; --pull: .6;
  --step: min(var(--gap), (100% - var(--w)) / max(1, var(--n) - 1));
  position: absolute; inset: 0; margin: 0; padding: 0; list-style: none;
}
.fan {
  /* a card stands on its bottom edge, so that a popped card that grows to fit all its text grows upwards */
  position: absolute; bottom: calc(100% - var(--h)); left: calc(50% + var(--off) * var(--step) - var(--w) / 2); width: var(--w);
  transform-origin: 50% 100%; transform: translateY(calc(var(--off2) * 3px)) rotate(calc(var(--off) * 3.5deg)); transition: transform .18s ease-out, left .18s ease-out;
}
.fan.up { z-index: 10; left: calc(50% + var(--off) * var(--pull) * var(--step) - var(--w) / 2); transform: translateY(calc(-1 * var(--lift))) scale(var(--zoom)); }
@media (hover: hover) {
  .fan:not(.up):hover { transform: translateY(-14px) rotate(calc(var(--off) * 3.5deg)); }
}
.card {
  display: flex; flex-direction: column; width: var(--w); height: var(--h); padding: 0; overflow: hidden; text-align: left;
  border: 0; border-radius: 10px; background: var(--paper); color: var(--ink); box-shadow: 0 10px 20px rgba(0, 0, 0, .5);
}
.card:focus-visible { outline-offset: 3px; }
.card.popped { height: auto; min-height: var(--h); box-shadow: 0 0 0 4px var(--mustard), 0 18px 30px rgba(0, 0, 0, .55); }
.role-temptation { --role: var(--tomato); --role-ink: var(--paper); }
.role-control { --role: var(--teal); --role-ink: var(--paper); }
.role-dial { --role: var(--mustard); --role-ink: var(--ink); }
.role-economy { --role: var(--kraft); --role-ink: var(--ink); }
/* a narrower cut of the face, so that the longest English word ('Constitutional') fits on a card; Bulgarian gets syllable breaks (hyphenate) */
.card-title { flex: none; padding: 10px; background: var(--role); color: var(--role-ink); font-weight: 800; font-size: 17px; font-stretch: 85%; line-height: 1.05; overflow-wrap: break-word; }
.card-fx { display: flex; flex-direction: column; gap: 1px; padding: 9px 10px 6px; font-size: 13px; line-height: 1.25; }
.card-special { margin-top: 3px; font-size: 12px; line-height: 1.2; color: var(--ink-soft); }
.card-model { margin-top: auto; padding: 0 10px 11px; font-size: 12px; line-height: 1.25; color: var(--rust); }
.card-model.none { color: var(--ink-soft); }
.card-cta { flex: none; padding: 6px 10px 7px; background: var(--mustard); color: var(--ink); font-weight: 800; font-size: 12px; line-height: 1.15; }
.card.popped .card-model { padding-bottom: 8px; }

/* 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);
}
.move-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.move-btns .btn { padding: 4px 6px; font-weight: 700; font-size: 14px; line-height: 1.1; }
.move-btns .btn:disabled { opacity: .5; }
.act-error { margin: 0; font-size: 14px; font-weight: 700; color: var(--sticky); }
.act-error:empty { display: none; }
.sheet .act-error { color: var(--rust); }
.talk-bar { display: none; }

/* the vote, in place of the hand */
.vote { display: flex; flex-direction: column; gap: 8px; color: var(--paper); }
.vote-head h2 { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.1; }
.vote-head p { margin: 3px 0 0; font-size: 14px; line-height: 1.3; color: var(--paper); }
.vote-opts { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 12px; }
.vote-opt {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 96px; padding: 12px 14px 14px;
  text-align: left; border: 0; border-radius: 10px; background: var(--paper); color: var(--ink); box-shadow: 0 4px 0 var(--paper-edge);
}
.vote-opt:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--paper-edge); }
.vote-opt:disabled { cursor: default; }
.vote-opt:disabled:not(.chosen) { opacity: .55; }
.vote-opt.chosen { box-shadow: 0 0 0 4px var(--mustard), 0 4px 0 var(--paper-edge); }
.vote-name { font-weight: 800; font-size: 19px; line-height: 1.1; }
.vote-fx { font-size: 14px; line-height: 1.3; }
.vote-model { font-size: 13px; line-height: 1.3; color: var(--rust); }
.vote-mine { position: absolute; top: -10px; right: 10px; padding: 2px 8px; border-radius: 4px; background: var(--mustard); font-size: 12px; font-weight: 800; transform: rotate(3deg); }

/* the choosers for Fork, Move pawn and Merge: 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); }
.res-pick { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; border: 0; }
.res-pick legend { margin-bottom: 6px; padding: 0; font-weight: 700; }
.res-pick input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.res-pick span {
  display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px; border-radius: 22px; background: #e4dac2; font-weight: 700; cursor: pointer;
}
.res-pick span::before { content: ''; width: 12px; height: 12px; background: var(--cube); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3); }
.res-pick input:checked + span { background: var(--teal); color: var(--paper); box-shadow: 0 2px 0 var(--teal-deep); }
.res-pick input:focus-visible + span { outline: 3px solid var(--teal); outline-offset: 2px; }
.opts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.opt {
  width: 100%; min-height: 44px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 11px 14px 12px; text-align: left;
  border: 2px solid var(--paper-line); border-radius: 10px; background: #fff; color: var(--ink); box-shadow: 0 2px 0 var(--paper-line);
}
.opt:hover:not(:disabled) { border-color: var(--teal); }
.opt:disabled { opacity: .6; cursor: default; }
.opt-when { font-size: 13px; color: var(--ink-soft); }
.opt-what { font-weight: 800; font-size: 17px; line-height: 1.2; }
.opt-cost { font-weight: 800; font-size: 15px; color: var(--rust); }
.opt-gain { font-size: 15px; font-weight: 600; color: var(--teal); }
.opt-model { font-size: 13px; 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 */
.drawer {
  position: fixed; inset: 0 0 0 auto; z-index: 20; width: 430px; max-width: 100vw; 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: 12px; color: var(--ink-soft); }
.log-line.outcome { border-left-color: var(--ink); font-weight: 700; color: var(--ink); }
.played { margin: 0; padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; background: #fff; border-left: 5px solid var(--role); border-radius: 6px; font-size: 13px; line-height: 1.3; }
.played b { font-size: 15px; }
.played-model { color: var(--rust); }
.played-model.none, .played-copied { color: var(--ink-soft); }

/* ---- the end screen: the verdict, the scores and who was a bot, the canon and the Model, 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); }
.small-cup { flex: none; width: 92px; height: 92px; border-width: 2px; }
.small-cup .cup { width: 68px; height: 68px; box-shadow: 4px 6px 10px rgba(0, 0, 0, .55), inset 0 0 0 4px #262626; }
.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: 12px; 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); }
.final-dials { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.final-dials li { padding: 3px 10px; border: 2px solid var(--teal); border-radius: 14px; font-size: 14px; }
.final-dials b { color: var(--rust); }
.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; }
.cards-played { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 15px; }
.cards-played li { display: flex; align-items: center; gap: 8px; }
.cards-played b { margin-left: auto; }
.cards-played .pawn { width: 14px; height: 14px; box-shadow: 0 2px 0 var(--cd); }
.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; }

/* ---- 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; }
  .hand { --w: 128px; --h: 176px; --gap: 100px; }
  .card-title { font-size: 16px; }
}
@container table (max-width: 1239px) {
  .me .big { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 2px 10px; }
  .me .big .res { flex-direction: row; align-items: center; gap: 3px; font-size: 14px; }
  .me .big .res::before { content: ''; flex: none; width: 11px; height: 11px; background: var(--cube); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3); }
  .me .big .pile, .me .big .fav { display: none; }
  .me .big .res-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .me .big .res-count b { font-size: 15px; }
  .me .big .is-fav b { color: var(--mustard); }
}

/* ---- 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 28px; }
}
@media (max-width: 920px) {
  .at-table .topbar { position: static; margin: 0 6px 10px; pointer-events: auto; }
  .talk-top { display: none; }
}
@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: 6px; padding: 0 2px 116px; }
  .opp, .opp-top { grid-area: auto; justify-self: stretch; position: static; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; min-height: 0; margin: 0; }
  .opp-left { order: 1; align-items: flex-start; }
  .opp-top { order: 2; }
  .opp-right { order: 3; align-items: flex-end; }
  .opp-tape { max-width: 100%; padding: 1px 8px; font-size: 18px; line-height: 1; transform: rotate(-2deg); }
  .opp-top .opp-tape { transform: rotate(1deg); }
  .opp-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-top .opp-stuff { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: inherit; gap: 3px 8px; }
  .opp-left .opp-stuff { justify-content: flex-start; }
  .opp-right .opp-stuff { justify-content: flex-end; }
  .opp-res { display: contents; }
  .backs, .opp-top .backs { display: flex; align-items: center; gap: 3px; order: 1; }
  .backs i { display: none; }
  .backs i:first-child { display: block; width: 12px; height: 17px; border-width: 1.5px; border-radius: 2px; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
  .backs-n { display: inline; font-size: 12px; font-weight: 700; color: var(--paper); }
  .opp-score { order: 2; font-size: 12px; }
  .opp .cubes { order: 3; flex-basis: 100%; flex-wrap: wrap; justify-content: inherit; gap: 1px 5px; }
  .opp-left .cubes { justify-content: flex-start; }
  .opp-right .cubes { justify-content: flex-end; }
  .small .res { flex-direction: row; gap: 2px; width: auto; font-size: 12px; }
  .small .pile { display: none; }
  .small .res::before { content: ''; flex: none; width: 9px; height: 9px; background: var(--cube); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3); }
  .small .is-fav b { color: var(--mustard); }
  .small .fav { display: none; }
  .mug { position: absolute; z-index: 0; left: 44%; bottom: 30px; width: 58px; height: 58px; } /* the band is the table, with a mug on it */
  /* the notes lie in the band under the tapes, never on the board; the typing dots are in the tapes */
  .opp .note, .opp-top .note {
    position: absolute; bottom: 4px; width: 35%; height: 104px; max-height: none; min-height: 0; margin: 0; padding: 7px 9px;
  }
  .opp-left .note { left: 4px; --tilt: -3deg; }
  .opp-top .note { left: 32.5%; --tilt: 2deg; }
  .opp-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; }
  .pool-cubes { display: none; }
  .model-notes { font-size: 19px; }
  .model-notes p:not(:last-child) { display: none; }

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

@container table (max-width: 580px) {
  .track { --sq: 50px; --gap: 7px; --pad: 44px; --rgap: 12px; }
  .yr { font-size: 11px; }
  .sq .pawn { width: 18px; height: 18px; }
  .sq.now { gap: 3px 4px; padding: 3px; }
  .sq.past { padding: 2px; } /* the phone mock's */
  .sq-text { font-size: 10.5px; }
  .sq-text.tight { font-size: 9.5px; }
  .row-name { font-size: 20px; margin-left: 6px; }
  .row-name small { font-size: 17px; }
  .event { flex: none; max-width: none; display: grid; grid-template-columns: 96px minmax(0, 1fr); min-height: 0; border-radius: 6px; }
  .event-side { grid-row: span 2; 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-alt { display: block; 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, .event-model { display: inline; font-size: 12px; line-height: 1.25; }
  .event-res:not(:empty)::before { content: ' '; }
  .event-model::before { content: ', '; color: var(--ink); }
  .event-model-k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .cup-ring { width: 84px; height: 84px; border-width: 2px; }
  .cup { width: 62px; height: 62px; box-shadow: 4px 6px 10px rgba(0, 0, 0, .55), inset 0 0 0 4px #262626; }
  .model-name { font-size: 12px; }
  .pool-label { font-size: 12px; }
}

/* ---- 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; }
  .me-score { font-size: 13px; }
  .me .big { gap: 1px 7px; }
  .me .big .res { font-size: 13px; }
  .hand { --w: 96px; --h: 136px; --gap: 58px; --lift: 62px; --zoom: 1.55; --pull: 0; }
  .card { border-radius: 8px; box-shadow: 0 8px 16px rgba(0, 0, 0, .5); }
  .card.popped { box-shadow: 0 0 0 3px var(--mustard), 0 12px 22px rgba(0, 0, 0, .55); }
  .card-title { padding: 6px 7px; font-size: 12.5px; }
  .card-fx { display: block; padding: 5px 7px 3px; font-size: 11px; line-height: 1.2; }
  .card-fx > span { display: inline; }
  .card-fx > span + span::before { content: ' '; }
  .card-special { display: block !important; margin-top: 2px; font-size: 10px; }
  .card-special::before { content: none !important; }
  .card-model { padding: 0 7px 6px; font-size: 10.5px; line-height: 1.2; }
  .card-model-k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* the rust says it */
  .card-cta { padding: 4px 7px 5px; font-size: 10px; }
  /* 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; }
  .move-btns { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.15fr); gap: 5px; }
  .move-btns .btn { min-height: 46px; padding: 3px 4px; font-size: 13px; }
  .talk-bar { display: block; background: var(--sticky); box-shadow: 0 3px 0 #b8a24a; }
  .talk-bar:active:not(:disabled) { box-shadow: 0 1px 0 #b8a24a; }
  .hand-slot:has(.vote) { margin-bottom: 4px; }
  .vote-head h2 { font-size: 16px; }
  .vote-head p { font-size: 12px; }
  .vote-opts { gap: 8px; }
  .vote-opt { min-height: 0; padding: 9px 10px 10px; gap: 2px; }
  .vote-name { font-size: 15px; }
  .vote-fx { font-size: 12px; }
  .vote-model { font-size: 11.5px; }
}
@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; }
  .small-cup { width: 70px; height: 70px; }
  .small-cup .cup { width: 52px; height: 52px; }
  .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-fx { display: flex; flex-wrap: wrap; gap: 0 8px; margin-top: 1px; font-size: 11.5px; line-height: 1.3; color: var(--ink-soft); }
.step-fx-model { color: var(--rust); }
.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-here {
  flex: none; align-self: center; padding: 1px 6px; border: 2px solid var(--teal); border-radius: 4px; color: var(--teal);
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; transform: rotate(-4deg);
}
.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. On a phone the card takes the board's whole width, the versions one under
   the other, and the Model's cup moves down beside its notes. */
.event {
  container: event / inline-size; display: grid; flex: 1 1 460px; max-width: 620px;
  grid-template-columns: 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-alt.event-only { grid-column: 2 / -1; grid-row: 1 / -1; }
.event-about, .event-means { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4; overflow-wrap: break-word; }
.event-means { margin: 0; font-size: clamp(12.5px, 2.2cqi, 14px); line-height: 1.3; }
.event-res { font-size: clamp(12.5px, 2.2cqi, 14px); }
.event-res-k { color: var(--ink-soft); }
.event-res b { font-weight: 800; }
.event-model { font-size: clamp(12.5px, 2.2cqi, 14px); }
@container board (max-width: 880px) {
  .event { max-width: none; }
}
@container table (max-width: 580px) {
  .board-low { grid-template-columns: auto minmax(0, 1fr); }
  .event { grid-column: 1 / -1; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto auto 1fr; }
  .model-side { grid-column: auto; }
  .event-about { grid-column: 2; padding: 6px 8px; font-size: 11.5px; line-height: 1.25; }
  .event-alt { grid-row: auto; grid-column: 2; padding: 6px 8px; }
  .event-res, .event-model { font-size: 12px; }
  .event-means { display: block; margin: 1px 0 2px; font-size: 11.5px; line-height: 1.25; }
  .event-res-k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* the line says it */
  .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. */
.vote-opts { position: relative; }
.vote-slot { display: flex; min-width: 0; }
.vote-slot > .vote-opt { flex: 1 1 auto; min-width: 0; padding-top: 16px; box-shadow: inset 0 5px 0 var(--tomato), 0 4px 0 var(--paper-edge); }
.vote-slot > .vote-opt.chosen { box-shadow: inset 0 5px 0 var(--tomato), 0 0 0 4px var(--mustard), 0 4px 0 var(--paper-edge); }
.vote-slot > .vote-opt:active:not(.popped) { box-shadow: inset 0 5px 0 var(--tomato), 0 1px 0 var(--paper-edge); }
@media (hover: hover) {
  .vote-slot > .vote-opt:not(.popped):not(.vote-ghost):hover { transform: translateY(-3px); }
}
.vote-opts.voted .vote-slot > .vote-opt:not(.chosen):not(.popped) { opacity: .55; }
.vote-name { overflow-wrap: break-word; }
.vote-slot > .vote-ghost { background: transparent; box-shadow: none; outline: 2px dashed rgba(241, 234, 216, .5); outline-offset: -2px; }
.vote-ghost > * { visibility: hidden; }
.vote-slot > .vote-opt.popped {
  position: absolute; z-index: 10; bottom: calc(100% + 12px); width: min(420px, 100%); min-height: 0; padding: 0; gap: 0; align-items: stretch;
  box-shadow: 0 0 0 4px var(--mustard), 0 18px 30px rgba(0, 0, 0, .55); animation: vote-pop .16s ease-out;
}
.vote-slot > .vote-opt.popped:active { transform: translateY(2px); box-shadow: 0 0 0 4px var(--mustard), 0 12px 22px rgba(0, 0, 0, .55); }
.vote-slot:first-child > .popped { left: 0; }
.vote-slot:last-child:not(:first-child) > .popped { right: 0; }
@keyframes vote-pop { from { opacity: 0; transform: translateY(12px) scale(.97); } }
.vote-pop-head { display: block; padding: 10px 14px 11px; border-radius: 10px 10px 0 0; background: var(--tomato); color: var(--paper); }
.vote-pop-event { display: block; font-weight: 800; font-size: 14px; line-height: 1.15; }
.vote-pop-about { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.3; }
.vote-pop-body { display: flex; flex-direction: column; gap: 7px; padding: 12px 14px 13px; }
.vote-pop-body .vote-name { font-size: 22px; line-height: 1.1; }
.vote-pop-means { font-size: 15px; line-height: 1.35; }
.vote-pop-fx { font-size: 14px; line-height: 1.3; }
.vote-pop-k { color: var(--ink-soft); }
.vote-pop-fx b, .vote-pop-dial b { font-weight: 800; }
.vote-pop-model { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 5px; font-size: 13.5px; line-height: 1.3; color: var(--rust); }
.vote-pop-model .vote-pop-k { color: inherit; }
.vote-pop-dial { grid-column: 2; }
.vote-pop-model.none { display: block; color: var(--ink-soft); }
.vote-pop-cta { display: block; padding: 8px 14px 9px; border-radius: 0 0 10px 10px; background: var(--mustard); color: var(--ink); font-weight: 800; font-size: 14px; line-height: 1.2; }
.vote-opt.popped .vote-mine { z-index: 1; }
@container table (max-width: 880px) {
  .vote-slot > .vote-opt { padding-top: 13px; }
  .vote-slot > .vote-opt.popped { bottom: calc(100% + 10px); width: 100%; padding: 0; }
  .vote-pop-head { padding: 9px 12px 10px; }
  .vote-pop-event { font-size: 13px; }
  .vote-pop-about { font-size: 12.5px; }
  .vote-pop-body { gap: 6px; padding: 10px 12px 11px; }
  .vote-pop-body .vote-name { font-size: 19px; }
  .vote-pop-means { font-size: 14px; line-height: 1.3; }
  .vote-pop-fx, .vote-pop-model { font-size: 13px; }
  .vote-pop-cta { padding: 7px 12px 8px; font-size: 13px; }
}

/* ---- 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 { 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%; }
}

/* ---- card icons (Hand.tsx, cardIcons.ts): each card's icon big and faint behind its text, in its role's colour, cropped at the bottom
   right, the owner's pick (direction D of the icon canvas). The card's own parts stay above it. */
.card { position: relative; }
.card > :not(.card-art) { position: relative; }
.card-art {
  position: absolute; right: -19%; bottom: -11%; width: 96%; aspect-ratio: 1; transform: rotate(-8deg); pointer-events: none;
  fill: none; stroke: var(--art); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: var(--art-o);
}
.role-temptation { --art: var(--tomato); --art-o: .13; }
.role-control { --art: var(--teal); --art-o: .13; }
.role-dial { --art: var(--mustard-deep); --art-o: .2; }
.role-economy { --art: #7a5a34; --art-o: .17; }

/* ---- 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. */
.crown { flex: none; display: inline-block; vertical-align: -1px; }
.canon-tag {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px; border-radius: 999px; vertical-align: 3px; white-space: nowrap;
  font-family: var(--type); font-size: 12px; font-weight: 800; line-height: 1.2; color: var(--ink); background: var(--mustard); box-shadow: 0 2px 0 var(--mustard-deep);
}
.row-main .is-now { position: relative; }
.canon-tag.on-main { position: absolute; z-index: 2; left: calc(100% + 8px); bottom: calc(var(--sq) / 2); transform: translateY(50%); }
.canon-mark { display: inline-flex; align-items: center; gap: 3px; padding: 0 6px; border-radius: 3px; vertical-align: 1px; white-space: nowrap; font-size: 11px; font-weight: 800; line-height: 1.5; }
.canon-mark.out { color: var(--rust); background: var(--paper); }
.canon-mark.in { padding: 0; color: var(--mustard); }
.opp-score { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 6px; }
.canon-warn {
  display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 6px 10px; border-left: 4px solid var(--mustard); border-radius: 3px;
  font-size: 13px; line-height: 1.3; color: var(--ink); background: var(--paper); box-shadow: 0 2px 3px rgba(0, 0, 0, .3);
}
.canon-warn .crown { margin-top: 2px; color: var(--mustard-deep); }
.me > .canon-warn { grid-column: 1 / -1; justify-self: start; margin-bottom: -12px; }
@container table (max-width: 880px) {
  .me > .canon-warn { justify-self: stretch; margin-bottom: 0; padding: 4px 8px; font-size: 12px; }
  .canon-warn .crown { display: none; }
  /* the score stays beside the card count; the tag wraps under them */
  .opp-score { display: contents; }
  .opp-score > * { order: 2; }
}
@container table (max-width: 580px) {
  .canon-tag { padding: 1px 6px 1px 5px; font-size: 11px; }
  .canon-tag .tag-name { display: none; }
}

.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; }
.part { white-space: nowrap; }
.part[class*='res-']::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 4px; background: var(--cube); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35); }
.part.zero { font-weight: 700; color: var(--rust); }
.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: 12.5px; }
}

/* ---- WP4: the Model's disc (ModelCup.tsx). The cup is a button inside a threat ring: a dark groove printed on the board with one step per
   point of Autonomy up to where the Model takes over, filled as far as it is known (mustard, orange two steps away, tomato one step away),
   dashed past a lower bound, dashed all round while nobody knows. Its three values sit around its right side, following the curve (the
   middle one, Autonomy, furthest out): solid mustard once revealed, solid pale for ≥n, dashed for ?. A small "i" says the cup can be
   tapped; it pulses once when the Model acts in your branch (nothing moves under reduced motion). The slip it opens lies on the board like a
   step's slip, pointing at the cup; your rail stays above it. On a wide board, where the cup and its values sit beside the event card,
   the pool and the notes go under them when there is no room for them beside. */
.model { flex-wrap: wrap; gap: 14px 22px; }
.model-side { flex: 1 1 200px; }
.cup-spot {
  display: grid; grid-template-columns: auto auto; grid-template-areas: "cup dials" "name ."; align-items: center; justify-items: center;
  gap: 6px 4px;
}
.cup-btn {
  grid-area: cup; position: relative; display: grid; place-items: center; width: 160px; height: 160px; padding: 0; border: 0;
  border-radius: 50%; background: transparent; color: inherit; -webkit-tap-highlight-color: transparent;
}
.cup-btn .cup { grid-area: 1 / 1; transition: transform .12s ease-out; }
.cup-btn::after {
  content: 'i'; position: absolute; right: 21px; bottom: 21px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--paper); color: var(--ink); box-shadow: 0 2px 3px rgba(0, 0, 0, .45);
  font: italic 800 15px/24px Georgia, 'Times New Roman', serif; text-align: center;
}
@media (hover: hover) {
  .cup-btn:hover .cup { transform: translateY(-2px); }
}
.cup-btn.open .cup { transform: translateY(-2px); }
.cup-btn.open::after { background: var(--mustard); }
.threat { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.threat circle, .threat path { fill: none; }
.threat-groove { stroke: #10292c; stroke-width: 9; }
.threat-step { stroke-width: 6; stroke-linecap: butt; }
.threat-step.on { stroke: var(--mustard); }
.threat.mid .threat-step.on { stroke: #f08a2e; }
.threat.high .threat-step.on { stroke: #ec4f33; }
.threat-step.off { stroke: rgba(214, 236, 234, .2); }
.threat-step.maybe { stroke: var(--teal-dim); stroke-width: 3; stroke-dasharray: 2.5 3; }
.threat-unknown { stroke: var(--teal-dim); stroke-width: 3; stroke-dasharray: 2.5 3.6; }
.cup-pulse { position: absolute; inset: 0; border: 4px solid #ec4f33; border-radius: 50%; opacity: 0; pointer-events: none; animation: cup-pulse 1.3s ease-out; }
@keyframes cup-pulse {
  0% { opacity: .95; transform: scale(.8); }
  100% { opacity: 0; transform: scale(1.35); }
}
.model-name { grid-area: name; }
.cup-dials { grid-area: dials; justify-self: start; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.cup-dial {
  display: flex; align-items: baseline; gap: 5px; margin-left: -12px; padding: 2px 10px 2px 9px; border: 2px dashed var(--teal-dim); border-radius: 14px;
  background: var(--teal-deep); font-size: 13px; line-height: 1.2; white-space: nowrap; color: var(--teal-ink);
}
.cup-dial.au { margin-left: 2px; }
.cup-dial b { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--teal-dim); }
.cup-dial.is { border-style: solid; border-color: var(--mustard); color: var(--paper); }
.cup-dial.is b { color: var(--mustard); }
.cup-dial.atLeast { border-style: solid; }
.cup-dial.atLeast b { color: var(--paper); }
.cup-dials.mid .cup-dial.au:not(.unknown) { border-color: #f08a2e; }
.cup-dials.high .cup-dial.au:not(.unknown) { border-color: #ec4f33; }

.model-card {
  position: absolute; z-index: 4; top: 0; left: 0; width: min(420px, 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;
}
.model-card[data-side="above"] { animation-name: step-up; }
.model-card:focus { outline: none; } /* it takes the focus only so that Tab goes on into it */
.model-card :focus-visible { outline-color: var(--teal); }
.model-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);
}
.model-card[data-side="above"]::before { top: auto; bottom: -7px; }
.model-card[data-side="left"] { animation-name: model-card-left; }
.model-card[data-side="left"]::before { top: calc(var(--tip, 50%) - 8px); left: auto; right: -7px; }
@keyframes model-card-left { from { opacity: 0; transform: translateX(6px); } }
.model-card-head { position: relative; display: flex; align-items: flex-start; gap: 10px; padding-bottom: 9px; border-bottom: 3px solid var(--ink); }
.model-card-what { flex: 1; min-width: 0; }
.model-card-title { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.15; overflow-wrap: break-word; }
.model-card-threat { margin: 4px 0 0; font-size: 13.5px; font-weight: 700; line-height: 1.3; color: var(--ink-soft); }
.model-card-threat.mid, .model-card-threat.high { color: var(--rust); }
.model-card-x { margin: -6px -6px 0 0; border-width: 2px; color: var(--ink-soft); }
.model-card-dials { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.model-card-dials li { display: flex; align-items: flex-start; gap: 10px; }
.model-card-v {
  flex: none; min-width: 40px; padding: 2px 6px; border: 2px dashed var(--teal-dim); border-radius: 14px; background: var(--teal);
  font-size: 15px; font-weight: 800; line-height: 1.25; text-align: center; font-variant-numeric: tabular-nums; color: var(--teal-ink);
}
.model-card-v.is { border-style: solid; border-color: var(--mustard); color: var(--mustard); }
.model-card-v.atLeast { border-style: solid; color: var(--paper); }
.model-card-dials p, .model-card-text { margin: 0; font-size: 13.5px; line-height: 1.32; overflow-wrap: break-word; }
.model-card-key { margin: 10px 0 0; padding-top: 8px; border-top: 1px dashed var(--paper-line); font-size: 12.5px; line-height: 1.3; color: var(--ink-soft); }
.model-card-sub { margin: 10px 0 3px; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--tomato); }
.model-card-text.now { margin-top: 6px; font-weight: 700; color: var(--rust); }
/* a phone: the cup and its values, the pool beside them, the Model's notes under them across the board */
@container table (max-width: 580px) {
  .model-side { display: contents; }
  .pool { grid-column: 2; align-self: center; }
  .model-notes { grid-column: 1 / -1; }
  .cup-btn { width: 84px; height: 84px; }
  .cup-btn::after { right: 8px; bottom: 8px; width: 19px; height: 19px; font-size: 12px; line-height: 19px; }
  .cup-pulse { border-width: 3px; }
  .cup-dials { gap: 5px; }
  .cup-dial { margin-left: -8px; padding: 1px 7px 1px 6px; border-width: 1.5px; font-size: 11px; }
  .cup-dial.au { margin-left: 0; }
  .cup-dial b { font-size: 13px; }
  .model-card { padding: 10px 12px 12px; }
  .model-card-title { font-size: 16px; }
  .model-card-dials p, .model-card-text { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .cup-pulse { display: none; }
}