/* ==========================================================================
   OFC Trainer / OFC Insight — design tokens: "Solver desk" (the site's round 2, R3, the owner's choice of 2026-11-08:
   OFC_Solver docs/SITE_ROUND2_PLAN_20261108.md section 5). A neutral near-black with a cool bias, a flat slate table,
   4 px corners and hairlines, no glow and no shadows; a condensed sans for labels in letter-spaced caps, a plain sans for
   text, a monospaced face for every number so that they line up; one steel-blue accent for what can be clicked, green /
   amber / red only for verdicts. The fonts come with the page (IBM Plex, SIL Open Font License: static/fonts/), so the
   page makes no request to another site.
   ========================================================================== */
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/ibm-plex-sans-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/ibm-plex-sans-condensed-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/ibm-plex-sans-condensed-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2'); }

:root {
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'IBM Plex Sans Condensed', 'IBM Plex Sans', 'Arial Narrow', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);

  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem;
  --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem;

  --radius-sm: 2px; --radius-md: 3px; --radius-lg: 4px; --radius-xl: 4px; --radius-full: 9999px;
  --transition: 140ms cubic-bezier(0.2, 0, 0, 1);

  --card-w: 58px;
  --card-h: 82px;
  --card-w-sm: 42px;
  --card-h-sm: 60px;
}

/* The table stays dark slate in both themes (its labels are light on dark); the light theme lightens what is around it. */
[data-theme='dark'] {
  color-scheme: dark;
  --color-bg: #0f1114;
  --color-surface: #15181d;
  --color-surface-2: #1b1f25;
  --color-surface-3: #242a31;
  --color-border: #2b313a;
  --color-divider: #232830;
  --color-text: #e7e9ec;
  --color-text-muted: #9aa3ad;
  --color-text-faint: #7f8894;
  --color-felt: #181d23;
  --color-felt-2: #181d23;
  --color-felt-edge: #2b323b;
  --color-accent: #5b9be0;
  --color-accent-hover: #7bb0e8;
  --color-accent-ink: #ffffff;
  --color-accent-soft: rgba(91, 155, 224, 0.16);
  --color-primary: #2f6fb8;
  --color-primary-hover: #3a7cc6;
  --color-good: #3dbb79;
  --color-good-soft: rgba(61, 187, 121, 0.14);
  --color-ok: #e2a62b;
  --color-ok-soft: rgba(226, 166, 43, 0.14);
  --color-bad: #ea6a62;
  --color-bad-soft: rgba(234, 106, 98, 0.14);
  --color-card: #fbfbf9;
  --color-card-edge: #cdd2d8;
  --color-card-back: #2d4a6b;
  --color-card-red: #d0201b;
  --color-card-black: #16181c;
  --color-card-blue: #1c5fd0;
  --color-card-green: #12843a;
  --color-chip-red: #ff8077;
  --color-chip-blue: #7db6ff;
  --color-chip-green: #5fd08a;
  --shadow-sm: none;
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-card: 0 1px 0 rgba(0, 0, 0, 0.45);
}

[data-theme='light'] {
  color-scheme: light;
  --color-bg: #eef0f3;
  --color-surface: #ffffff;
  --color-surface-2: #f6f7f9;
  --color-surface-3: #e8ebef;
  --color-border: #d3d8de;
  --color-divider: #e3e6ea;
  --color-text: #15181c;
  --color-text-muted: #56606b;
  --color-text-faint: #67707a;
  --color-felt: #1d232a;
  --color-felt-2: #1d232a;
  --color-felt-edge: #1d232a;
  --color-accent: #1f63b5;
  --color-accent-hover: #174f93;
  --color-accent-ink: #ffffff;
  --color-accent-soft: rgba(31, 99, 181, 0.12);
  --color-primary: #1f63b5;
  --color-primary-hover: #1a559c;
  --color-good: #18834a;
  --color-good-soft: rgba(24, 131, 74, 0.12);
  --color-ok: #9a6300;
  --color-ok-soft: rgba(154, 99, 0, 0.12);
  --color-bad: #bf3a32;
  --color-bad-soft: rgba(191, 58, 50, 0.11);
  --color-card: #ffffff;
  --color-card-edge: #c9ced5;
  --color-card-back: #2d4a6b;
  --color-card-red: #d0201b;
  --color-card-black: #16181c;
  --color-card-blue: #1c5fd0;
  --color-card-green: #12843a;
  --color-chip-red: #c51d18;
  --color-chip-blue: #1c5fd0;
  --color-chip-green: #12843a;
  --shadow-sm: none;
  --shadow-md: 0 12px 32px rgba(20, 30, 40, 0.18);
  --shadow-card: 0 1px 0 rgba(0, 0, 0, 0.35);
}
/* the table stays dark slate in the light theme too: on it the dark theme's accent and verdict colours (the light
   theme's darker ones fell under 4.5:1 on the slate: the scores, FOUL, the royalties, Fantasyland, the warnings) */
[data-theme='light'] .table {
  --color-accent: #5b9be0; --color-accent-hover: #7bb0e8; --color-accent-soft: rgba(91, 155, 224, 0.16);
  --color-good: #3dbb79; --color-good-soft: rgba(61, 187, 121, 0.14);
  --color-ok: #e2a62b; --color-ok-soft: rgba(226, 166, 43, 0.14);
  --color-bad: #ea6a62; --color-bad-soft: rgba(234, 106, 98, 0.14);
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -webkit-text-size-adjust: 100%; }
body {
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
button:disabled { cursor: not-allowed; opacity: 0.45; }
h1, h2, h3 { font-family: var(--font-body); font-weight: 600; line-height: 1.2; letter-spacing: 0; text-wrap: balance; }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-base); }
code { font-family: var(--font-mono); font-size: 0.9em; background: var(--color-surface-3); padding: 0 var(--space-1); border-radius: var(--radius-sm); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* every number in a line of text in the monospaced face, so that columns of them line up */
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 500; }
.muted { color: var(--color-text-muted); }
.small { font-size: var(--text-sm); }
.xs { font-size: var(--text-xs); }

/* ==========================================================================
   Top bar
   ========================================================================== */
.topbar {
  display: flex; align-items: stretch; gap: var(--space-8);
  height: 52px; padding: 0 var(--space-6);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  position: sticky; top: 0; z-index: 20;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--color-text); text-decoration: none; }
.brand .logo { flex: none; }
/* the wordmark: condensed capitals, spaced */
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: 0.1em; font-variant-caps: all-small-caps; }
/* the tabs: a row of words, the open one underlined */
.tabs { display: flex; gap: var(--space-5); }
.tab {
  display: flex; align-items: center; height: 100%; padding: 0 2px; border-radius: 0;
  font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--transition), border-color var(--transition);
}
.tab:hover { color: var(--color-text); }
.tab.is-active { color: var(--color-text); font-weight: 600; border-bottom-color: var(--color-accent); }
.tab .tab-short { display: none; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
.icon-btn {
  width: 34px; height: 34px; border-radius: var(--radius-md); display: grid; place-items: center;
  color: var(--color-text-muted); transition: background var(--transition), color var(--transition);
}
.icon-btn:hover { background: var(--color-surface-2); color: var(--color-text); }
.thinking {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs); font-weight: 500; color: var(--color-accent);
  padding: 3px var(--space-3); border-radius: var(--radius-sm); border: 1px solid var(--color-accent-soft);
}
.thinking .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 0.35; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.1); } }

/* ==========================================================================
   Layout
   ========================================================================== */
#main { max-width: 1440px; margin: 0 auto; padding: var(--space-5) var(--space-6) var(--space-12); }
.view.is-active { display: block; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--space-5); align-items: start; }
@media (max-width: 1100px) { .layout { grid-template-columns: 1fr; } }

/* Table ------------------------------------------------------------------ */
/* the table: a flat slate panel with a hairline edge (no felt, no glow) */
.table {
  position: relative;
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6) var(--space-6);
  background: var(--color-felt);
  border: 1px solid var(--color-felt-edge);
  min-height: 560px;
}
.table-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.82); font-size: var(--text-sm); }
.table-head > * { white-space: nowrap; }
.table-head h2 { white-space: nowrap; margin-right: var(--space-2); }
.table-head h2 { color: #fff; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; letter-spacing: 0.06em; font-variant-caps: all-small-caps; }
.table-head .spacer { flex: 1; }
/* chips: flat labels with a hairline, numbers in the monospaced face */
.chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: 1px var(--space-2); border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); font-size: var(--text-xs); font-weight: 500; color: rgba(255, 255, 255, 0.82); }
.chip b { font-family: var(--font-mono); font-weight: 600; color: #fff; }
.chip.pos b { color: var(--color-good); }
.chip.neg b { color: var(--color-bad); }
.chip.warn { background: var(--color-ok-soft); border-color: transparent; color: var(--color-ok); font-weight: 600; cursor: help; }
.chip .btn-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); }

.seats-opp { display: flex; justify-content: center; gap: var(--space-10); margin-bottom: var(--space-6); flex-wrap: wrap; }
.seat { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.seat-name { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }
.seat-name .tag { font-family: var(--font-body); font-weight: 400; text-transform: none; letter-spacing: 0; color: rgba(255, 255, 255, 0.5); }
.seat-name .fl { color: var(--color-accent); }

/* my board in the middle of the table, discard zone and buttons to its right, the hand right under it */
.seat-me { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: var(--space-6); row-gap: var(--space-4); }
.seat-me > :first-child { grid-column: 2; grid-row: 1 / span 2; margin-left: calc(-120px - var(--space-3)); }
.seat-me .hand-area { display: contents; }
.seat-me .hand-area > .discard-zone { grid-column: 3; grid-row: 1; align-self: end; flex-direction: column; align-items: flex-start; }
.seat-me .hand-area > .actions { grid-column: 3; grid-row: 2; align-self: start; flex-direction: column; align-items: stretch; width: 120px; }
.actions .btn-skip { margin-top: var(--space-3); } /* "Skip hand" set apart from the buttons of the move */
.seat-me .hand-area > .hand-label { grid-column: 1 / -1; grid-row: 3; text-align: center; }
.seat-me .hand-area > .hand { grid-column: 1 / -1; grid-row: 4; justify-content: center; justify-self: center; }
/* Fantasyland drill after submitting: the optimal board, centred under the hand */
.seat-me .hand-area > .fl-result { grid-column: 1 / -1; grid-row: 5; justify-self: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); margin-top: var(--space-4); }
@media (max-width: 760px) {
  .seat-me { display: flex; flex-direction: column; align-items: center; }
  .seat-me > :first-child { margin-left: 0; }
}

/* Board ------------------------------------------------------------------ */
.board { display: flex; flex-direction: column; gap: var(--space-2); }
.board.sm { gap: 5px; }
.row { display: flex; align-items: center; gap: var(--space-3); border-radius: var(--radius-md); padding: 4px; transition: background var(--transition), box-shadow var(--transition); }
/* every row is as wide as five cards, so the three top places sit over the middle of the rows below */
.row .slots { display: flex; gap: 6px; justify-content: center; width: calc(5 * var(--card-w) + 24px); }
.board.sm .row .slots { gap: 4px; width: calc(5 * var(--card-w-sm) + 16px); }
.row .row-label { order: -1; width: 120px; text-align: right; font-size: var(--text-xs); line-height: 1.25; color: rgba(255, 255, 255, 0.6); }
.row .row-label b { display: block; font-family: var(--font-display); font-weight: 600; color: rgba(255, 255, 255, 0.85); letter-spacing: 0.1em; text-transform: uppercase; }
.row .row-label .foul { color: var(--color-bad); }
.row .row-label .roy { color: var(--color-accent); }
.row.droppable { cursor: pointer; }
.row.droppable:hover, .row.drag-over { background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.row.full { cursor: not-allowed; }
.row.full.droppable:hover { background: var(--color-bad-soft); box-shadow: inset 0 0 0 1px var(--color-bad); }

.slot {
  width: var(--card-w); height: var(--card-h); border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(0, 0, 0, 0.22);
}
.board.sm .slot { width: var(--card-w-sm); height: var(--card-h-sm); border-radius: var(--radius-md); }
.slot.back { border: 0; background: repeating-linear-gradient(135deg, var(--color-card-back) 0 3px, #213a56 3px 6px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); }

/* Cards ------------------------------------------------------------------ */
.card {
  position: relative; width: var(--card-w); height: var(--card-h); border-radius: var(--radius-lg);
  background: var(--color-card); color: var(--color-card-black);
  box-shadow: var(--shadow-card), inset 0 0 0 1px var(--color-card-edge);
  font-family: var(--font-display); font-weight: 700; user-select: none; font-variant-emoji: text;
  display: flex; flex-direction: column; justify-content: space-between; padding: 5px 6px;
  transition: transform var(--transition), box-shadow var(--transition), outline-color var(--transition);
}
.card .rank { font-size: 1.4rem; line-height: 1; letter-spacing: -0.02em; }
.card .suit { font-size: 2rem; line-height: 1; align-self: flex-end; }
.card.red { color: var(--color-card-red); }
.card.black { color: var(--color-card-black); }
.card.blue { color: var(--color-card-blue); }
.card.green { color: var(--color-card-green); }
/* the joker game's jokers (X1, X2): no rank and no suit, a colour of their own */
.card.joker { color: #7b3fbf; }
.card.joker .rank { font-size: 1.1rem; letter-spacing: 0.02em; }
.card.sm { width: var(--card-w-sm); height: var(--card-h-sm); border-radius: var(--radius-md); padding: 3px 4px; }
.card.sm .rank { font-size: 1rem; }
.card.sm .suit { font-size: 1.45rem; }
.card.xs { width: 30px; height: 42px; border-radius: var(--radius-sm); padding: 2px 3px; box-shadow: inset 0 0 0 1px var(--color-card-edge); }
/* live cards (plan L3, live.js): the unseen cards of a card's rank, the unseen suits, the draws of your rows */
.live-badge { position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: var(--radius-md); z-index: 2; pointer-events: none;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600; line-height: 16px; text-align: center; color: #fff; box-shadow: 0 0 0 1.5px var(--color-felt); }
.card.sm .live-badge, .card.xs .live-badge { top: -5px; right: -5px; min-width: 14px; height: 14px; line-height: 14px; font-size: 9px; }
.live-badge.live-3 { background: var(--color-good); }
.live-badge.live-2 { background: var(--color-ok); }
.live-badge.live-1 { background: var(--color-bad); }
.live-badge.live-0 { background: #767676; }
.live-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 4px 10px; margin-bottom: var(--space-2); border-radius: var(--radius-md); background: rgba(0, 0, 0, 0.25); color: rgba(255, 255, 255, 0.88); cursor: help; }
.live-strip .muted, .live-outs .muted { color: rgba(255, 255, 255, 0.66); }
.live-suit { font-family: var(--font-mono); font-weight: 600; }
.live-suit.red { color: #ff8a80; }
.live-suit.blue { color: #8ab8ff; }
.live-suit.green { color: #7fe0a0; }
.live-suit.black { color: #ffffff; }
.live-outs { display: flex; flex-direction: column; gap: 2px; margin-top: var(--space-3); padding: 6px 10px; border-radius: var(--radius-md); background: rgba(0, 0, 0, 0.25); color: rgba(255, 255, 255, 0.9); }
.live-outs .out.dead { opacity: 0.6; }
.chip-btn { border: 0; cursor: pointer; font: inherit; font-size: var(--text-xs); }
.chip-btn.on { background: rgba(0, 0, 0, 0.42); color: #fff; }
/* the helper's switch in the table head (live.js): a track whose knob moves right and turns green when it is on; the
   switch and what it shows wrap as one piece */
.helper { display: inline-flex; align-items: center; gap: var(--space-2); }
.chip-btn:hover { background: rgba(0, 0, 0, 0.5); }
.chip-btn:focus-visible, .helper-level button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.switch-track { position: relative; flex: none; width: 24px; height: 14px; border-radius: 7px; background: rgba(255, 255, 255, 0.28); transition: background 0.15s; }
.switch-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; transition: transform 0.15s; }
.helper-switch.on .switch-track { background: var(--color-good); }
.helper-switch.on .switch-track::after { transform: translateX(10px); }
.table-head .helper-level button { padding: 1px var(--space-2); font-size: var(--text-xs); }
.card.xs .rank { font-size: 0.8rem; }
.card.xs .suit { font-size: 1rem; }
.card.selectable { cursor: pointer; }
.card.selectable:hover { transform: translateY(-4px); }
.card.selected { transform: translateY(-10px); outline: 3px solid var(--color-accent); outline-offset: 1px; box-shadow: var(--shadow-card), 0 0 0 6px var(--color-accent-soft); }
.card.selected.auto { transform: translateY(-5px); outline-width: 2px; box-shadow: var(--shadow-card); }
.card.pending { outline: 2px dashed var(--color-accent); outline-offset: -1px; cursor: pointer; }
.card.pending::after { content: '↩'; position: absolute; top: -8px; right: -8px; width: 18px; height: 18px; border-radius: 50%; background: var(--color-accent); color: var(--color-accent-ink); font-size: 11px; font-weight: 700; display: grid; place-items: center; font-family: var(--font-body); }
.card.ghost { opacity: 0.55; box-shadow: inset 0 0 0 1px var(--color-card-edge); }
.card.dragging { opacity: 0.4; }
.card.discarded { filter: grayscale(0.6); opacity: 0.7; }

/* Hand area ------------------------------------------------------------- */
.hand-area { display: flex; flex-direction: column; gap: var(--space-4); min-width: 340px; }
.hand-label { font-family: var(--font-display); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); display: block; line-height: 1.5; }
.hand-label .status-msg { margin-left: var(--space-2); font-family: var(--font-body); font-weight: 400; text-transform: none; letter-spacing: 0; color: rgba(255, 255, 255, 0.82); }
.hand-label .hand-sort { display: inline-flex; align-items: center; gap: 6px; margin-left: var(--space-3); vertical-align: middle; text-transform: none; letter-spacing: 0; }
.hand-sort .lbl { font-weight: 500; color: rgba(255, 255, 255, 0.6); }
.hand-sort .seg button { padding: 1px var(--space-2); font-size: var(--text-xs); }
.hand { display: flex; flex-wrap: wrap; gap: 8px; min-height: var(--card-h); align-items: flex-end; padding-top: 10px; }
.hand.many { gap: 6px; max-width: 560px; }
.discard-zone { display: flex; align-items: center; gap: var(--space-3); }
.discard-zone .zone {
  width: var(--card-w); height: var(--card-h); border-radius: var(--radius-lg); display: grid; place-items: center;
  border: 1px dashed rgba(255, 255, 255, 0.32); color: rgba(255, 255, 255, 0.55); font-size: var(--text-xs); text-align: center; line-height: 1.1;
  cursor: pointer; transition: background var(--transition);
}
.discard-zone .zone:hover, .discard-zone .zone.drag-over { background: rgba(255, 255, 255, 0.08); }
.discard-zone .prev { display: flex; gap: 4px; align-items: center; }
.discard-zone .prev-label { font-size: var(--text-xs); color: rgba(255, 255, 255, 0.5); margin-right: var(--space-1); }
.actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }

/* Buttons --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-md);
  font-size: var(--text-sm); font-weight: 600; line-height: 1.2;
  background: var(--color-surface-2); color: var(--color-text); border: 1px solid var(--color-border);
  transition: background var(--transition), border-color var(--transition);
}
.btn:hover:not(:disabled) { background: var(--color-surface-3); border-color: var(--color-text-faint); }
.btn-primary { background: var(--color-primary); color: #fff; border-color: transparent; }
.btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); border-color: transparent; }
.btn-ghost { background: transparent; }
.btn-onfelt { background: transparent; border-color: rgba(255, 255, 255, 0.22); color: #fff; }
.btn-onfelt:hover:not(:disabled) { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.36); }
.btn-danger-ghost { background: transparent; color: var(--color-bad); border-color: var(--color-border); }
.btn-lg { padding: var(--space-3) var(--space-5); font-size: var(--text-base); }
.btn-sm { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }
.btn-xs { padding: 0 var(--space-2); font-size: 10px; line-height: 1.6; }
.measure-btn { margin-top: 3px; margin-right: var(--space-1); }
.measuring { margin-bottom: 6px; }

/* Side panel ------------------------------------------------------------ */
.panel { display: flex; flex-direction: column; gap: var(--space-4); }
.panel-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); }
.panel-card h2, .panel-card h3 { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
/* the cards' titles as section labels: condensed capitals, spaced */
.panel-card h3 { font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.1em; font-variant-caps: all-small-caps; color: var(--color-text-muted); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-divider); }
.panel-card h3 .sub { margin-left: auto; font-family: var(--font-body); font-weight: 400; font-size: var(--text-xs); letter-spacing: 0; font-variant-caps: normal; color: var(--color-text-faint); }
.panel-empty { color: var(--color-text-muted); font-size: var(--text-sm); }

.verdict { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3) var(--space-4); align-items: center; margin-bottom: var(--space-4); }
.loss-badge {
  font-family: var(--font-mono); font-weight: 600; font-size: var(--text-xl); line-height: 1; letter-spacing: -0.03em;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); min-width: 104px; text-align: center;
}
.loss-badge small { display: block; font-family: var(--font-display); font-weight: 600; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 6px; opacity: 0.85; }
.g-good { background: var(--color-good-soft); color: var(--color-good); }
.g-ok { background: var(--color-ok-soft); color: var(--color-ok); }
.g-bad { background: var(--color-bad-soft); color: var(--color-bad); }
.verdict-text { font-size: var(--text-sm); color: var(--color-text-muted); }
.verdict-text b { color: var(--color-text); }
.pill { display: inline-block; padding: 0 var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 600; }
.pill-hint { background: var(--color-accent-soft); color: var(--color-accent); }

.options { display: flex; flex-direction: column; gap: 4px; }
.opt { display: grid; grid-template-columns: 34px 1fr auto; gap: var(--space-2); align-items: center; padding: 6px var(--space-2); border-radius: var(--radius-md); position: relative; overflow: hidden; }
.opt .bar { position: absolute; left: 0; top: 0; bottom: 0; background: var(--color-surface-3); z-index: 0; border-radius: var(--radius-md); }
.opt > * { position: relative; z-index: 1; }
.opt .rank { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 600; }
.opt .ev { font-family: var(--font-mono); font-weight: 600; font-size: var(--text-sm); }
.opt .heads { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 3px; font-size: var(--text-xs); color: var(--color-text-muted); cursor: help; }
/* the foul / royalty / Fantasyland line reads as words with numbers: the text face, its digits in even widths */
.opt .heads.num { font-family: var(--font-body); font-weight: 400; }
.opt .heads .hi { color: var(--color-bad); font-weight: 700; }
.opt .heads .good { color: var(--color-good); font-weight: 700; }
.opt .heads .src { color: var(--color-text-faint); }
.opt .heads.measured .src { font-style: normal; font-weight: 700; color: var(--color-text); }
.bank-line { display: flex; flex-direction: column; gap: 3px; margin-bottom: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-divider); }
.bank-line .bank-label { font-weight: 700; font-size: var(--text-sm); }
.bank-line .bank-label.trap { color: var(--color-bad); }
.bank-line .bank-label.clear { color: var(--color-ok); }
.bank-line .bank-label.toss_up { color: var(--color-good); }
.bank-line .warn-text { color: var(--color-ok); }
.quiz-bar select { max-width: 170px; }
.why { display: flex; flex-direction: column; gap: 6px; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-divider); font-size: var(--text-sm); }
.why .why-head { font-family: var(--font-display); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); }
.why .why-text { color: var(--color-text); }
.why .why-text.toss { color: var(--color-good); }
/* how the rows ended in the playouts (plan L2) */
.dest { margin-top: 2px; }
.dest-head { font-size: var(--text-xs); font-weight: 700; color: var(--color-text-muted); margin-bottom: 2px; }
.dest-table { width: 100%; border-collapse: collapse; font-size: var(--text-xs); cursor: help; }
.dest-table th, .dest-table td { text-align: left; vertical-align: top; padding: 2px 6px 2px 0; border-bottom: 1px solid var(--color-divider); }
.dest-table thead th { color: var(--color-text-muted); font-weight: 600; }
.dest-table tbody th { color: var(--color-text-muted); font-weight: 600; white-space: nowrap; }
.opt details.ends { margin-top: 2px; font-size: var(--text-xs); }
.opt details.ends summary { cursor: pointer; color: var(--color-text-muted); }
/* an option's twins (the same move for the player) and the note on a move another listed move dominates (engine.py) */
.opt .twin-note { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: center; margin-top: 2px; cursor: help; }
.opt .twin-note .tile { font-size: var(--text-xs); }
.opt .dom-note { margin-top: 2px; cursor: help; }
.opt .ends-body { display: flex; flex-direction: column; gap: 2px; padding: 4px 0 2px; }
.opt .endings { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: 2px; }
.opt .ending { display: flex; flex-direction: column; gap: 2px; }
/* what the judge looks at (plan L4) */
.grid-box { margin-top: var(--space-2); font-size: var(--text-xs); }
.grid-box summary { cursor: pointer; color: var(--color-text-muted); }
.place-grid { border-collapse: separate; border-spacing: 3px; margin-top: 4px; cursor: help; }
.place-grid th { font-weight: 600; color: var(--color-text-muted); text-align: left; padding: 0 4px; }
.place-grid td { text-align: center; padding: 1px 6px; border-radius: 4px; min-width: 44px; }
.weights .grp-chip.weight { display: inline-flex; align-items: center; gap: 4px; }
.weights .bar-mini { display: inline-block; height: 6px; border-radius: 3px; background: var(--color-text-faint); }
.weights .grp-chip.helps .bar-mini { background: var(--color-good); }
/* the weighed cards on the table (live.js setHeat): a ring, stronger the more the choice depends on the card */
.card.heat-1.heat-helps { outline: 2px solid rgba(111, 191, 125, 0.35); outline-offset: 1px; }
.card.heat-1.heat-despite { outline: 2px solid rgba(170, 170, 170, 0.35); outline-offset: 1px; }
.card.heat-2.heat-helps { outline: 2px solid rgba(111, 191, 125, 0.55); outline-offset: 1px; }
.card.heat-2.heat-despite { outline: 2px solid rgba(170, 170, 170, 0.55); outline-offset: 1px; }
.card.heat-3.heat-helps { outline: 3px solid rgba(111, 191, 125, 0.7); outline-offset: 1px; }
.card.heat-3.heat-despite { outline: 3px solid rgba(170, 170, 170, 0.7); outline-offset: 1px; }
.card.heat-4.heat-helps { outline: 3px solid rgba(111, 191, 125, 0.85); outline-offset: 1px; }
.card.heat-4.heat-despite { outline: 3px solid rgba(170, 170, 170, 0.85); outline-offset: 1px; }
.card.heat-5.heat-helps { outline: 4px solid rgba(111, 191, 125, 1.0); outline-offset: 1px; }
.card.heat-5.heat-despite { outline: 4px solid rgba(170, 170, 170, 1.0); outline-offset: 1px; }
/* concepts (plan L5) */
.concepts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 6px 0; }
.concept-chip { padding: 1px 8px; border-radius: var(--radius-sm); background: var(--color-surface-3); color: var(--color-text); cursor: help; }
.concept-chip.main { background: var(--color-primary); color: #fff; font-weight: 600; }
/* the hand at a glance in the review (plan L6) */
.lesson { margin-bottom: var(--space-3); }
.lesson-boxes { display: flex; gap: 4px; margin-bottom: 4px; }
.lesson-box { min-width: 30px; height: 26px; border: 0; border-radius: var(--radius-sm); font: inherit; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; cursor: pointer; }
.lesson-box.worst { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.why .favour { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: var(--text-xs); color: var(--color-text-muted); }
/* the last chip and the sentence's last word on one line ("... gains most when [a jack] comes") */
.why .favour .favour-tail { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.why .grp-chip { display: inline-flex; gap: 3px; padding: 1px 7px; border-radius: var(--radius-sm); background: var(--color-surface-3); color: var(--color-text); cursor: help; }
.why .probes { display: flex; flex-direction: column; gap: 5px; font-size: var(--text-xs); color: var(--color-text-muted); }
.why .probe.confirmed { color: var(--color-text); }
.why .probe .moves { display: inline-flex; vertical-align: middle; }
.why .why-actions, .why-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: 2px; }
.opt.is-chosen { box-shadow: inset 0 0 0 1.5px var(--color-accent); }
.opt.is-chosen .rank { color: var(--color-accent); }
.opt.is-best .ev { color: var(--color-good); }
.moves { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.move { display: inline-flex; align-items: center; gap: 2px; font-size: var(--text-xs); font-weight: 600; padding: 1px 6px 1px 4px; border-radius: var(--radius-sm); background: var(--color-surface-2); border: 1px solid var(--color-divider); }
.layout-line { gap: 4px; flex-wrap: nowrap; }
.layout-line .grp { display: inline-flex; gap: 2px; min-width: 6px; }
.layout-line .grp.out { margin-left: 8px; }
.layout-line .sep { color: var(--color-text-muted); font-weight: 700; }
.tile { font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); line-height: 1.25; padding: 0 4px; border-radius: var(--radius-sm); background: var(--color-card); color: var(--color-card-black); box-shadow: inset 0 0 0 1px var(--color-card-edge); white-space: nowrap; font-variant-emoji: text; }
.tile.red { color: var(--color-card-red); }
.tile.blue { color: var(--color-card-blue); }
.tile.green { color: var(--color-card-green); }
.tile.joker { color: #7b3fbf; }
.tile.discard { opacity: 0.45; text-decoration: line-through; }
.move.discard { text-decoration: line-through; color: var(--color-text-muted); }
.move .c { font-family: var(--font-display); font-variant-emoji: text; }
.move .c.red { color: var(--color-chip-red); }
.move .c.blue { color: var(--color-chip-blue); }
.move .c.green { color: var(--color-chip-green); }
.move .c.joker, .c.joker { color: #a06ae0; }
[data-theme='dark'] .move .c.black { color: var(--color-text); }
.you-tag { font-family: var(--font-display); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-accent); margin-left: var(--space-1); }
/* the playout verdict (T2): the move the playouts recommend over the judge's choice */
.po-tag { font-family: var(--font-display); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-good); margin-left: var(--space-1); cursor: help; }
.po-verdict { display: flex; flex-direction: column; gap: 4px; margin: var(--space-2) 0; padding: var(--space-2) var(--space-3); border-left: 3px solid var(--color-good); border-radius: var(--radius-sm); background: var(--color-surface-2); }
.po-verdict.agree { display: block; margin: 4px 0 8px; padding: 0; border: 0; background: none; }
.po-verdict .po-head { font-weight: 700; font-size: var(--text-sm); }
/* Phase O (OFC_Solver docs/PHASE_O_PLAN.md): a toss-up (O4), the list's two value columns (O1-O2) and its order (O3) */
.po-verdict.tossup { border-left-color: var(--color-text-muted); }
.po-tag.lean { color: var(--color-text-muted); }
.opt .vals { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; }
.opt .val { display: grid; grid-template-columns: auto auto; column-gap: 4px; align-items: baseline; justify-items: end; white-space: nowrap; }
.opt .val .k { grid-column: 1 / -1; font-size: 8px; line-height: 1; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-faint); }
.opt .val .abs { font-size: 10px; color: var(--color-text-faint); }
.opt .val.po .po-v { font-family: var(--font-mono); font-weight: 600; font-size: var(--text-xs); color: var(--color-text); }
.opt.is-best .val.po .po-v { color: var(--color-good); }
.opt.is-best .val.judge .ev { color: inherit; }
.opt .val.judge .ev.top { color: var(--color-good); }
.opt .rank-cell { display: flex; flex-direction: column; line-height: 1.15; }
.opt .rank-cell .rank-by { font-size: 8px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-faint); }
.opt-divider { font-size: var(--text-xs); color: var(--color-text-faint); border-top: 1px solid var(--color-divider); padding: 4px var(--space-2) 0; margin-top: 2px; }
.loss-badge .badge-se { display: block; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0; margin-top: 3px; opacity: 0.9; }
.review-item .loss .loss-sub { display: block; font-size: 9px; font-weight: 600; text-align: right; opacity: 0.85; }

/* Score breakdown ------------------------------------------------------- */
.score-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-2); }
.pair { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-2); font-size: var(--text-sm); }
.pair .pts { font-family: var(--font-mono); font-weight: 600; font-size: var(--text-lg); align-self: center; }
.pair .rows { display: flex; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); grid-column: 1 / -1; }
.pair .rows span { padding: 0 6px; border-radius: var(--radius-sm); background: var(--color-surface-3); }
.pair .rows .w { color: var(--color-good); }
.pair .rows .l { color: var(--color-bad); }
.pos { color: var(--color-good); }
.neg { color: var(--color-bad); }
.eval-list { display: grid; gap: var(--space-2); font-size: var(--text-sm); }
.eval-row { display: grid; grid-template-columns: 64px 1fr auto; gap: var(--space-2); align-items: baseline; padding: var(--space-1) 0; border-bottom: 1px solid var(--color-divider); }
.eval-row:last-child { border-bottom: 0; }
.eval-row .who { font-weight: 700; }
.eval-row .hands { color: var(--color-text-muted); font-size: var(--text-xs); line-height: 1.35; }
.eval-row .badge-fl { color: var(--color-accent); font-weight: 700; }

.review { display: flex; flex-direction: column; gap: 4px; }
.charts.one { grid-template-columns: 1fr; }
.stats-tools { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.group-select { max-width: 520px; padding: 4px var(--space-2); border-radius: var(--radius-sm); background: var(--color-surface-2); border: 1px solid var(--color-border); color: var(--color-text); font-size: var(--text-sm); }
.review.worst .review-item { grid-template-columns: 64px 1fr auto; }
.worst-side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); }
.before { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-divider); font-size: var(--text-xs); }
.before .lbl { color: var(--color-text-muted); }
.review-item { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--space-2); align-items: center; padding: var(--space-2); border-radius: var(--radius-md); background: var(--color-surface-2); font-size: var(--text-xs); }
.review-item .st { font-weight: 700; color: var(--color-text-muted); }
.review-item.clickable { cursor: pointer; }
.review-item.clickable:hover, .review-item.open { box-shadow: inset 0 0 0 1px var(--color-divider); }
.review-item .review-detail { grid-column: 1 / -1; padding-top: var(--space-2); cursor: default; }
.review-item .loss { font-family: var(--font-mono); font-weight: 600; font-size: var(--text-sm); padding: 2px 8px; border-radius: var(--radius-sm); }
.review-item .lines { display: flex; flex-direction: column; gap: 3px; }
.review-item .lines > div { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.review-item .lines .lbl { min-width: 28px; }
.review-item .lines .lbl { color: var(--color-text-faint); margin-right: 4px; }

/* FL drill ------------------------------------------------------------ */
.fl-layout .table { min-height: 520px; }
.fl-controls { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.seg { display: inline-flex; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--radius-md); overflow: hidden; }
.seg button { padding: var(--space-1) var(--space-3); font-size: var(--text-sm); font-weight: 600; color: rgba(255, 255, 255, 0.7); }
.seg button.is-active { background: rgba(255, 255, 255, 0.14); color: #fff; box-shadow: inset 0 -2px 0 var(--color-accent); }
.seg button + button { border-left: 1px solid rgba(255, 255, 255, 0.15); }
.mini-board { display: flex; flex-direction: column; gap: 4px; }
.mini-board .mrow { display: flex; gap: var(--space-2); align-items: center; }
.mini-board .mrow .cards { display: flex; gap: 3px; }
.mini-board .mrow .name { font-size: var(--text-xs); color: var(--color-text-muted); }
.mini-board .mrow .lbl { width: 16px; font-size: var(--text-xs); font-weight: 700; color: var(--color-text-faint); }
.compare { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
.mini-board .mrow .cards { min-width: 158px; }
.compare h4 { font-family: var(--font-display); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-muted); margin-bottom: var(--space-2); }
.compare .val { font-family: var(--font-mono); font-weight: 600; font-size: var(--text-lg); }

/* Stats ---------------------------------------------------------------- */
.stats-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-5); }
.stats-head h2 { font-size: var(--text-xl); font-family: var(--font-display); font-weight: 700; letter-spacing: 0; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-5); }
.kpi { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); }
.kpi .lbl { font-family: var(--font-display); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-muted); font-weight: 600; }
.kpi .val { font-family: var(--font-mono); font-weight: 600; font-size: var(--text-xl); letter-spacing: -0.03em; line-height: 1.1; margin-top: var(--space-1); }
.kpi .sub { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }
.charts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.charts.two { grid-template-columns: 1.2fr 1fr; }
.charts + .charts { margin-top: var(--space-4); }
.charts .wide { grid-column: 1 / -1; }
@media (max-width: 1000px) { .charts { grid-template-columns: 1fr; } }
.chart { width: 100%; height: auto; max-height: 260px; display: block; font-family: var(--font-body); }
.chart text { fill: var(--color-text-muted); font-size: 11px; }
.chart text.axis { stroke: none; }
.chart .grid { stroke: var(--color-divider); stroke-dasharray: 2 3; }
.chart .bar { fill: var(--color-accent); }
.chart .bar.quiet { fill: var(--color-surface-3); }
.chart .line { fill: none; stroke: var(--color-accent); stroke-width: 1.5; }
.chart .area { fill: var(--color-accent-soft); }
.chart .pt-good { fill: var(--color-good); }
.chart .pt-ok { fill: var(--color-ok); }
.chart .pt-bad { fill: var(--color-bad); }
.chart .lbl-val { fill: var(--color-text); font-weight: 700; }
.legend { display: flex; gap: var(--space-4); font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-2); flex-wrap: wrap; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
table.stat { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
table.stat th, table.stat td { text-align: left; padding: var(--space-2) var(--space-2); border-bottom: 1px solid var(--color-divider); }
table.stat th { font-family: var(--font-display); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-muted); font-weight: 600; }
table.stat td.num, table.stat th.num { text-align: right; }

/* Drawer / settings --------------------------------------------------- */
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); z-index: 40;
  background: var(--color-surface); border-left: 1px solid var(--color-border); box-shadow: var(--shadow-md);
  display: flex; flex-direction: column;
}
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--color-border); }
.drawer-head h2 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; letter-spacing: 0.08em; font-variant-caps: all-small-caps; }
.drawer-body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); overflow: auto; }
.backdrop { position: fixed; inset: 0; background: rgba(5, 7, 10, 0.55); z-index: 30; }
.field { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-sm); }
.field > span { font-weight: 600; }
.field select, .field input[type='text'] {
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  background: var(--color-surface-2); border: 1px solid var(--color-border); color: var(--color-text);
}
.field select:focus, .field input[type='text']:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent-soft); }
.field-row { flex-direction: row; align-items: center; gap: var(--space-3); }
.field-row > span { font-weight: 400; }
.field-row input { flex: none; width: 18px; height: 18px; accent-color: var(--color-accent); }
.field-note { font-size: var(--text-xs); color: var(--color-text-muted); }
.field-note.warn { color: var(--color-ok); font-weight: 600; }
#settings-error { color: var(--color-bad); font-weight: 500; min-height: 1em; }
.drawer-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.toast {
  position: fixed; left: 50%; bottom: var(--space-8); transform: translateX(-50%); max-width: min(560px, calc(100vw - 24px));
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-md);
  background: var(--color-surface-2); color: var(--color-text); border: 1px solid var(--color-border); border-left: 3px solid var(--color-accent);
  box-shadow: var(--shadow-md); font-size: var(--text-sm); font-weight: 500; z-index: 50;
}
.toast.err { border-left-color: var(--color-bad); color: var(--color-bad); }

/* Analyse a position ------------------------------------------------------ */
.warn-text { color: var(--color-ok); }
.analyse-main { min-width: 0; }
.analyse-edit { min-height: 520px; }
.edit-me { display: flex; justify-content: center; align-items: flex-start; gap: var(--space-8); flex-wrap: wrap; }
.edit-me .seat-name { margin-bottom: 8px; }
.edit-strips { display: flex; flex-direction: column; gap: var(--space-4); padding-top: 28px; }
.edit-strip { display: flex; flex-direction: column; gap: 6px; border-radius: var(--radius-lg); padding: 4px; }
.edit-strip .strip-label { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }
.edit-strip .strip-cards { display: flex; flex-wrap: wrap; gap: 4px; min-height: var(--card-h-sm); max-width: 560px; }
.edit-me.fl-me .edit-strip { margin-top: 4px; }
.slot.sm-slot { width: var(--card-w-sm); height: var(--card-h-sm); border-radius: 5px; }
.analyse-notes { margin-top: var(--space-5); display: flex; flex-direction: column; gap: 4px; font-size: var(--text-xs); color: rgba(255, 255, 255, 0.78); text-align: center; }
.analyse-notes .problem { color: #ffd38a; font-weight: 700; }
.analyse-text {
  width: 100%; min-height: 7.5em; resize: vertical; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  background: var(--color-surface-2); border: 1px solid var(--color-border); color: var(--color-text);
  font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.45;
}
.analyse-text:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.analyse-status { margin-top: var(--space-2); }
.notation p + p { margin-top: 6px; }
.notation code { white-space: nowrap; }
/* the editor: rows and strips as targets, cards taken back with a click, a palette of the 52 cards */
.seat-head { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.edit-me .seat-head { align-items: flex-start; margin-bottom: 8px; }
.edit-me .seat-head .seat-name { margin-bottom: 0; }
.seat-ctl { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: rgba(255, 255, 255, 0.7); }
.seat-ctl .ctl { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.seat-ctl input { accent-color: var(--color-accent); }
.seat-ctl select { padding: 0 4px; border-radius: var(--radius-sm); background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; font-size: var(--text-xs); }
.ctl-btn { padding: 0 6px; border-radius: var(--radius-sm); border: 1px dashed rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.6); font-size: var(--text-xs); }
.ctl-btn.is-on { border: 1px solid var(--color-accent); color: var(--color-accent); font-weight: 700; }
.analyse-edit .row.is-target, .edit-strip.is-target { background: var(--color-accent-soft); box-shadow: inset 0 0 0 1.5px var(--color-accent); }
.edit-strip.droppable { cursor: pointer; }
.edit-strip.droppable:hover, .edit-strip.drag-over { background: rgba(255, 255, 255, 0.08); }
.analyse-edit .card.pending { outline: none; }
.analyse-edit .card.pending::after { content: '\00d7'; opacity: 0; transition: opacity var(--transition); }
.analyse-edit .card.pending:hover::after { opacity: 1; }
.palette-wrap { margin-top: var(--space-5); display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.palette-label { font-size: var(--text-xs); color: rgba(255, 255, 255, 0.72); text-align: center; }
.palette-label b { color: var(--color-accent); }
.palette { display: flex; flex-direction: column; gap: 4px; }
.palette-row { display: flex; gap: 4px; }
.palette .card.selectable:hover { transform: translateY(-2px); }
.card.used { opacity: 0.18; box-shadow: none; }
/* the level of detail on the first street, and its progress */
.level-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--space-2); margin: 10px 0 8px; }
.panel .seg { border-color: var(--color-border); }
.panel .seg button { color: var(--color-text-muted); font-size: var(--text-xs); padding: 2px var(--space-3); }
.panel .seg button.is-active { background: var(--color-surface-3); color: var(--color-text); }
.panel .seg button + button { border-left-color: var(--color-border); }
.widen-line { display: flex; align-items: center; gap: var(--space-2); margin-bottom: 8px; font-size: var(--text-xs); color: var(--color-text); }
.widen-line .dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--color-accent); animation: pulse 1s ease-in-out infinite; }
.widen-line .btn { margin-left: auto; }
.analyses .analysis-item { grid-template-columns: 48px minmax(0, 1fr) auto; align-items: start; }
.analyses .pos-text { font-family: var(--font-mono); font-size: 10.5px; line-height: 1.35; white-space: pre; overflow: hidden; text-overflow: ellipsis; color: var(--color-text); }

/* Quiz bits ------------------------------------------------------------ */
.quiz-bar { display: flex; gap: var(--space-2); align-items: center; flex-wrap: nowrap; color: rgba(255, 255, 255, 0.8); font-size: var(--text-sm); }
.quiz-bar select { padding: 4px var(--space-2); border-radius: var(--radius-sm); background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; font-size: var(--text-sm); }

/* Skeleton ------------------------------------------------------------- */
.skeleton { height: 12px; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--color-surface-2), var(--color-surface-3), var(--color-surface-2)); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.fade-in { animation: fadeIn 220ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
/* the Fantasyland drill: a hand of your own, typed or clicked in */
.own-hand { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }
.own-line { display: flex; align-items: center; gap: var(--space-3); width: 100%; max-width: 640px; }
.own-text {
  flex: 1; min-width: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  background: var(--color-surface-2); border: 1px solid var(--color-border); color: var(--color-text);
  font-family: var(--font-mono); font-size: 0.86rem;
}
.own-text:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.own-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; min-height: var(--card-h-sm); max-width: 640px; }
.own-problem { min-height: 1.2em; font-size: var(--text-xs); color: #ffd38a; font-weight: 700; text-align: center; }
.own-hand .palette-wrap { margin-top: var(--space-2); }
.fl-controls .btn.is-active { background: rgba(255, 255, 255, 0.22); }
.continue-btn { margin-top: 3px; margin-right: var(--space-1); }

/* ==========================================================================
   The site (hosted mode, ofc_trainer/hosted.py): the sign-in page, who is signed in, the password form.
   Only the site's pages carry these classes and ids (login.html, body.hosted, #user-box, #drawer-account and
   #password-form shown by app.js and settings.js), so the local app looks as before.
   ========================================================================== */
.login-main { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: var(--space-12) var(--space-4) var(--space-8); }
.login-card {
  width: min(400px, 100%); display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-6); border-radius: var(--radius-lg);
  background: var(--color-surface); border: 1px solid var(--color-border); border-top: 2px solid var(--color-accent);
}
.login-card h1 { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; letter-spacing: 0.04em; font-variant-caps: all-small-caps; }
/* 16 px at least: a phone does not zoom into a field it focuses */
.login-card input, .password-form input {
  width: 100%; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); font-size: max(1rem, 16px);
  background: var(--color-surface-2); border: 1px solid var(--color-border); color: var(--color-text);
}
.login-card input:focus, .password-form input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent-soft); }
.login-card .btn-primary { justify-content: center; width: 100%; }
.link-btn { align-self: center; padding: var(--space-1); font-size: var(--text-sm); color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.link-btn:hover { color: var(--color-accent-hover); }
.login-error { min-height: 1.25em; font-size: var(--text-sm); font-weight: 500; color: var(--color-bad); }
.login-privacy { width: min(400px, 100%); text-align: center; }
.user-box { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.user-box .user-name { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--color-text-muted); }
.password-form { gap: var(--space-2); }
.password-form .field-note.ok { color: var(--color-good); font-weight: 600; }
.password-form .field-note.bad { color: var(--color-bad); font-weight: 600; }
/* the drawer's own lines for a phone (below): who is signed in and Log out; what the helper shows */
.drawer-account { display: none; align-items: center; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-divider); font-size: var(--text-sm); color: var(--color-text-muted); }
.drawer-account b { color: var(--color-text); font-weight: 600; }
.helper-level-field { display: none; }
/* a small tablet: the site's top bar wraps, the tabs in a row of their own under the name */
@media (max-width: 760px) {
  body.hosted .topbar { flex-wrap: wrap; height: auto; min-height: 52px; gap: var(--space-2) var(--space-4); padding: var(--space-2) var(--space-4); align-items: center; }
  body.hosted .tabs { order: 3; width: 100%; overflow-x: auto; height: 36px; }
  body.hosted #main { padding: var(--space-3) var(--space-2) var(--space-8); }
  .login-main { padding-top: var(--space-6); }
}

/* ==========================================================================
   The site on a phone, 520 px and narrower: "All three boards" (the site's round 2, P1, the owner's choice of 2026-11-08,
   OFC_Solver docs/SITE_ROUND2_PLAN_20261108.md section 4). The three boards, the hand and the buttons on the first screen
   of a 390 x 844 phone: the top bar one row that scrolls away (the name and Log out in the drawer), the table's head one
   line (the hand, the scores, the helper's switch; the table's size, the bots and the judge are in the drawer), the two
   opponents side by side with small cards and no row labels, your board, the hand and the discard place in one row, the
   buttons side by side, and after a move the page scrolls just far enough to show the verdict (play.js). Before it, two
   boards fitted a screen and Confirm was 1,123 px down (ofc-site docs/REPORT_S4.md section 3). Nothing scrolls sideways
   (tests/test_ui_hosted.py). The site's pages only: the local app looks as before.
   ========================================================================== */
@media (max-width: 520px) {
  body.hosted { --card-w: 44px; --card-h: 62px; --card-w-sm: 26px; --card-h-sm: 37px; }
  /* the bar: one row that scrolls away; the tabs' short names; who is signed in is in the drawer */
  body.hosted .topbar { position: static; flex-wrap: nowrap; height: 48px; min-height: 0; gap: var(--space-4); padding: 0 var(--space-3); align-items: stretch; }
  body.hosted .tabs { order: 0; width: auto; height: auto; overflow: visible; gap: var(--space-4); }
  body.hosted .tab .tab-full { display: none; }
  body.hosted .tab .tab-short { display: inline; }
  body.hosted .brand-name { display: none; }
  body.hosted .topbar .user-box { display: none; }
  body.hosted .topbar-right { gap: 2px; }
  body.hosted .thinking { align-self: center; gap: 0; padding: 6px; font-size: 0; }
  body.hosted #main { padding: var(--space-2) var(--space-2) var(--space-8); }
  body.hosted .layout { gap: var(--space-3); }
  /* the table and its head: one line with the hand, the scores and the helper's switch */
  body.hosted .table { min-height: 0; padding: var(--space-2) var(--space-2) var(--space-3); }
  body.hosted .table-head { gap: 4px 10px; margin-bottom: 6px; padding-bottom: 6px; }
  body.hosted .table-head h2 { font-size: 1.05rem; margin-right: 0; }
  body.hosted .table-head .chip-players, body.hosted .table-head .chip-agent, body.hosted .table-head .spacer { display: none; }
  body.hosted .table-head .chip-score { background: none; border: 0; padding: 0; gap: 4px; font-size: 12px; }
  body.hosted .table-head .helper { order: 9; margin-left: auto; }
  body.hosted .table-head .helper-level { display: none; }
  body.hosted .table-head .helper-switch { padding: 1px 6px; }
  body.hosted .live-strip { padding: 3px 8px; gap: 2px 8px; }
  /* the opponents side by side: small cards, no row labels (the rows are 3, 5 and 5 places; the scoring names them) */
  body.hosted .seats-opp { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-2); margin-bottom: var(--space-2); }
  body.hosted .seats-opp .seat { gap: 4px; min-width: 0; }
  body.hosted .seats-opp .seat-name { font-size: 10px; gap: 4px; flex-wrap: wrap; justify-content: center; }
  body.hosted .seats-opp .seat-name .tag-spec { display: none; }
  body.hosted .seat-ctl { flex-wrap: wrap; justify-content: center; }
  body.hosted .board.sm { gap: 3px; }
  body.hosted .board.sm .row { padding: 1px; gap: 0; }
  body.hosted .board.sm .row .row-label { display: none; }
  body.hosted .board.sm .row .slots { gap: 2px; width: calc(5 * var(--card-w-sm) + 8px); }
  body.hosted .card.sm { padding: 1px 2px; border-radius: var(--radius-sm); }
  body.hosted .card.sm .rank { font-size: 12px; }
  body.hosted .card.sm .suit { font-size: 13px; }
  body.hosted .card.sm .live-badge { min-width: 11px; height: 11px; line-height: 11px; font-size: 8px; top: -4px; right: -4px; padding: 0 2px; }
  /* your board: narrow labels */
  body.hosted .row { gap: var(--space-2); padding: 2px 4px; }
  body.hosted .row .row-label { width: 52px; font-size: 10px; }
  body.hosted .row .slots { gap: 4px; width: calc(5 * var(--card-w) + 16px); }
  body.hosted .card .rank { font-size: 1.2rem; }
  body.hosted .card .suit { font-size: 1.6rem; }
  body.hosted .card.xs .rank { font-size: 0.8rem; }
  body.hosted .card.xs .suit { font-size: 1rem; }
  /* under your board: the hand with the discard place beside it, the earlier discards, then the buttons in a row */
  body.hosted .seat-me { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-2); row-gap: 6px; align-items: center; }
  body.hosted .seat-me > :first-child > .seat-name { margin-bottom: 2px !important; }
  body.hosted .seat-me > :first-child { grid-column: 1 / -1; grid-row: 1; justify-self: center; margin-left: 0; }
  body.hosted .seat-me .hand-area { min-width: 0; }
  body.hosted .seat-me .hand-area > .hand-label { grid-column: 1 / -1; grid-row: 2; text-align: left; }
  body.hosted .seat-me .hand-area > .hand { grid-column: 1 / -1; grid-row: 3; justify-self: center; justify-content: center; padding-top: 4px; min-height: 0; }
  body.hosted .seat-me .hand-area:has(.zone) > .hand { grid-column: 1; }
  body.hosted .seat-me .hand-area > .discard-zone { display: contents; }
  body.hosted .seat-me .hand-area > .discard-zone > .zone { grid-column: 2; grid-row: 3; align-self: end; }
  body.hosted .seat-me .hand-area > .discard-zone > .prev { grid-column: 1 / -1; grid-row: 4; justify-content: center; }
  body.hosted .seat-me .hand-area > .actions { grid-column: 1 / -1; grid-row: 5; flex-direction: row; flex-wrap: wrap; align-items: stretch; width: auto; gap: 6px; }
  body.hosted .seat-me .hand-area > .actions .btn { flex: 1 1 auto; padding: 10px 8px; font-size: 14px; }
  body.hosted .seat-me .hand-area > .actions .btn-primary { flex: 2 1 auto; }
  body.hosted .seat-me .hand-area > .actions .btn-skip { flex: 0 1 auto; margin-top: 0; padding-inline: 6px; background: none; border-color: transparent; color: rgba(255, 255, 255, 0.72); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
  body.hosted .seat-me .hand-area > .fl-result { grid-column: 1 / -1; grid-row: 6; }
  body.hosted .hand { justify-content: center; }
  /* the panel under the table */
  body.hosted .panel { gap: var(--space-3); }
  body.hosted .panel-card { padding: var(--space-3); }
  body.hosted .layout-line { flex-wrap: wrap; }
  body.hosted .notation code { white-space: normal; }
  body.hosted .palette-row { gap: 2px; }
  body.hosted .palette .card.xs { width: 24px; height: 34px; padding: 1px 2px; }
  /* the drawer: who is signed in and Log out; what the helper shows (its buttons are not in the table's head here) */
  body.hosted .drawer-account { display: flex; }
  body.hosted .helper-level-field { display: flex; }
}

/* ---- the table sheet (js/table.js; the site's round 3, the owner's T1 of 2026-11-08): the chip that names the table in a
   head, and the sheet it opens: a popover under the chip, a bottom sheet on a phone. Tokens only, so both themes hold. */
.chip-btn .caret { font-size: 0.75em; color: var(--color-accent); margin-left: 3px; }
.table-head .chip-table, .table-head .chip-agent.chip-btn { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(91, 155, 224, 0.45); color: #fff; padding: 1px var(--space-2); }
.table-head .chip-table:hover, .table-head .chip-agent.chip-btn:hover { background: rgba(91, 155, 224, 0.18); }
.ts-backdrop { position: fixed; inset: 0; z-index: 44; background: transparent; }
.ts-backdrop.dim { background: rgba(5, 7, 10, 0.55); }
.table-sheet { position: fixed; z-index: 45; width: min(460px, calc(100vw - 16px)); max-height: calc(100vh - 16px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  padding: var(--space-3) var(--space-4) var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); font-size: var(--text-sm); }
.table-sheet[hidden], .ts-backdrop[hidden] { display: none; }
.table-sheet.as-sheet { left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 88vh; border-radius: 10px 10px 0 0; border-width: 1px 0 0;
  padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); }
.ts-grab { display: none; }
.table-sheet.as-sheet .ts-grab { display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--color-border); margin: 0 auto calc(-1 * var(--space-1)); }
.ts-head { display: flex; align-items: center; gap: var(--space-3); }
.ts-head h3 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; letter-spacing: 0.08em; font-variant-caps: all-small-caps; }
.ts-sub { flex: 1; color: var(--color-text-faint); font-size: var(--text-xs); }
.ts-sec h4 { font-family: var(--font-display); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.1em; font-variant-caps: all-small-caps; color: var(--color-text-muted); margin-bottom: var(--space-1); }
.ts-sec h4 span { font-family: var(--font-body); font-weight: 400; letter-spacing: 0; font-variant-caps: normal; color: var(--color-text-faint); font-size: var(--text-xs); }
.ts-games { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.ts-games button { padding: var(--space-2) var(--space-1); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: transparent; color: var(--color-text-muted); font-weight: 600; font-size: var(--text-sm); }
.ts-games button:hover { color: var(--color-text); border-color: var(--color-text-faint); }
.ts-games button.is-on { border-color: var(--color-accent); color: var(--color-text); background: var(--color-accent-soft); box-shadow: inset 0 -2px 0 var(--color-accent); }
.ts-pair { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-5); align-items: start; }
.ts-pair.one { grid-template-columns: 1fr; }
.table-sheet .seg { border-color: var(--color-border); }
.table-sheet .seg button { color: var(--color-text-muted); font-size: var(--text-xs); padding: 4px var(--space-3); }
.table-sheet .seg button.is-active { background: var(--color-surface-3); color: var(--color-text); }
.table-sheet .seg button + button { border-left-color: var(--color-border); }
.ts-fixed { display: inline-block; padding-top: 4px; color: var(--color-text-faint); font-size: var(--text-xs); }
.ts-switch { display: inline-flex; align-items: center; gap: var(--space-2); padding: 4px 0; border: 0; background: none; color: var(--color-text-muted); font-size: var(--text-xs); text-align: left; }
.ts-switch .switch-track { background: var(--color-text-faint); }
.ts-switch.on .switch-track { background: var(--color-good); }
.ts-switch.on .switch-track::after { transform: translateX(10px); }
.ts-list { display: flex; flex-direction: column; gap: 4px; }
.ts-opt { display: grid; grid-template-columns: 16px 1fr auto 3.2em; gap: var(--space-2); align-items: center; padding: 6px var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: transparent; color: var(--color-text); font-size: var(--text-sm); text-align: left; }
.ts-opt:hover { border-color: var(--color-text-faint); }
.ts-opt.is-on { border-color: var(--color-accent); background: var(--color-accent-soft); }
.ts-radio { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--color-text-faint); }
.ts-opt.is-on .ts-radio { border-color: var(--color-accent); background: radial-gradient(circle, var(--color-accent) 38%, transparent 44%); }
.ts-name { font-weight: 600; }
.ts-name small { display: block; font-weight: 400; font-size: var(--text-xs); color: var(--color-text-faint); }
.ts-tag { margin-left: var(--space-2); padding: 1px 4px; border: 1px solid var(--color-good); border-radius: var(--radius-sm); color: var(--color-good);
  font-family: var(--font-display); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; font-variant-caps: all-small-caps; vertical-align: 1px; }
.ts-wait { text-align: right; white-space: nowrap; font-size: var(--text-xs); color: var(--color-text-faint); }
.ts-dots { color: var(--color-accent); font-size: 0.7rem; letter-spacing: 1px; }
.ts-dots i { font-style: normal; color: var(--color-text-faint); }
.ts-more { align-self: flex-start; padding: 2px 0; border: 0; background: none; color: var(--color-accent); font-size: var(--text-xs); text-decoration: underline; }
.ts-note { color: var(--color-text-faint); font-size: var(--text-xs); }
/* the foot stays at the bottom of the sheet while its lists scroll */
.table-sheet { padding-bottom: 0; }
.table-sheet.as-sheet { padding-bottom: 0; }
.ts-foot { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); flex-wrap: wrap;
  margin: 0 calc(-1 * var(--space-4)); padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); background: var(--color-surface); border-top: 1px solid var(--color-divider); }
.ts-foot .ts-apply { margin-left: auto; }
.table-fields { display: flex; flex-direction: column; gap: var(--space-4); }
.chip-btn[disabled] { opacity: 0.55; cursor: default; }
@media (max-width: 520px) {
  body.hosted .table-head .chip-table { font-size: 12px; padding: 1px 6px; }
  /* your board's 'You · button' line: the head's scores carry the button; a Fantasyland line stays (round 3: the table's
     chip takes the head's second line, and Confirm stays on a 375 x 667 screen) */
  body.hosted #view-play .seat-me > :first-child > .seat-name:not(:has(.fl)) { display: none; }
  .ts-games button { font-size: var(--text-xs); }
}