/* Gambit Chess — screen layouts. */

/* ----- welcome and home ----- */
.welcome { min-height: calc(100dvh - var(--topbar-h)); display: grid; place-items: center; padding: 40px var(--gutter) 80px; }
.welcome-in { width: min(1080px, 100%); display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; }
.welcome h1 { font-size: clamp(44px, 6.4vw, 76px); line-height: 0.98; font-weight: 800; letter-spacing: -0.045em; }
.welcome h1 em { color: var(--accent-2); font-style: normal; }
.welcome .lede { font-size: 18px; color: var(--text-2); margin: 16px 0 18px; max-width: 540px; text-wrap: pretty; }
.welcome .noacct { margin-bottom: 22px; }
.welcome-card { padding: 26px; }
.welcome-card h2 { font-size: 22px; margin-bottom: 4px; }
.feature-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; }
.feature { padding: 14px 0 0; border-top: 1px solid var(--line-2); }
.feature b { display: block; font-family: var(--font-display); font-size: 15.5px; font-weight: 700; margin-bottom: 4px; letter-spacing: -0.01em; }
.feature span { color: var(--text-2); font-size: 14px; }
/* The hero board stands still and plays its own little game. */
.hero-board { width: min(380px, 100%); margin: 0 auto; }
.hero-board .board-frame { box-shadow: 0 0 0 1px var(--line-2), var(--shadow-2); }
@media (max-width: 899px) { .welcome-in { grid-template-columns: 1fr; gap: 32px; } .hero-board { display: none; } .feature-row { grid-template-columns: 1fr; } }
@media (pointer: coarse) { .welcome-card .linkish { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; } }

.greet { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.greet h1 { font-size: clamp(30px, 4vw, 44px); }
.greet .sub { color: var(--text-2); margin-top: 6px; }
.rating-plaque { display: flex; align-items: center; gap: 14px; padding: 12px 18px; }
.rating-plaque b { font-family: var(--font-display); font-size: 30px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.rating-plaque span { color: var(--text-3); font-size: 12.5px; font-weight: 650; }
.rating-plaque .rp-txt { display: flex; flex-direction: column; gap: 3px; }
.rating-plaque .rp-unrated { font-size: 20px; letter-spacing: -0.02em; }
.rating-plaque small { font-size: 12.5px; color: var(--text-3); }

.tc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
/* Home's quick pairing: the tiles share the whole row, and on a phone the
   last one takes a row of its own rather than sitting beside a gap. */
.tc-fill { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
@media (max-width: 520px) { .tc-fill > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* The Play page: one column per kind of game, two tiles across in each. */
.tc-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px 24px; margin-top: 14px; }
.tc-groups .tc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tc-group { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--text-3); }
.tc-group .icon { width: 16px; height: 16px; }
.tc-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 84px; padding: 10px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface);
  color: var(--text); text-align: center; box-shadow: var(--shadow-1);
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.tc-tile:hover { border-color: var(--line-accent); transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.tc-tile:active { transform: translateY(0) scale(0.98); }
.tc-tile b { font-size: 22px; font-weight: 750; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
/* The first line keeps one height, so an icon tile's label sits level with
   the labels under the times beside it. */
.tc-tile > b { display: grid; place-items: center; min-height: 1.5em; }
.tc-tile > b .icon { width: 22px; height: 22px; }
.tc-tile span { font-size: 12px; color: var(--text-3); font-weight: 650; }
.tc-tile .waiting { position: absolute; top: 7px; right: 8px; font-size: 11px; color: var(--win); font-weight: 700; }
.mode-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.mode-card { display: flex; gap: 14px; align-items: flex-start; padding: 18px; text-align: left; width: 100%; color: inherit; font: inherit; cursor: pointer; }
.mode-card .mode-ico { width: 44px; height: 44px; border-radius: var(--radius); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-2); flex: none; transition: transform var(--t-med) var(--spring); }
.mode-card:hover .mode-ico { transform: rotate(-6deg) scale(1.08); }
.mode-card .mode-ico svg { width: 23px; height: 23px; }
.mode-card b { display: block; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 3px; }
.mode-card span { color: var(--text-2); font-size: 13.5px; }
.toggles { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 14px; }

.mini-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.mini-card { display: block; padding: 10px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); color: inherit; text-decoration: none !important; box-shadow: var(--shadow-1); transition: border-color var(--t-fast), transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease); }
.mini-card:hover { border-color: var(--line-accent); transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.mini-card .mini-who { display: flex; justify-content: space-between; gap: 6px; font-size: 12.5px; font-weight: 650; padding: 4px 2px; }
.mini-card .mini-who .ellipsis { max-width: 70%; }
.mini-card .mini-who .ellipsis:only-child { max-width: 100%; }
/* Which colour a name plays: a white or a black dot with a ring that shows on both themes. */
.mini-side { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; box-shadow: 0 0 0 1.5px var(--text-3); }
.mini-side.w { background: #f3efe6; }
.mini-side.b { background: #161a17; }
.mini-turn { color: var(--accent); font-weight: 700; }
.mini-card .mini-clock { font-variant-numeric: tabular-nums; color: var(--text-2); }
.mini-card .mini-clock.on { color: var(--text); }
.mini-board { display: grid; grid-template-columns: repeat(8, 1fr); aspect-ratio: 1; border-radius: 6px; overflow: hidden; }
.mini-board .m-sq { position: relative; background: var(--sq-light); }
.mini-board .m-sq.d { background: var(--sq-dark); }
.mini-board .m-sq.l::before { content: ""; position: absolute; inset: 0; background: var(--hl-last); animation: fade-in 420ms var(--ease) both; }
.mini-board .pc { position: absolute; inset: 0; width: 100%; height: 100%; padding: 4%; }
.mini-meta { font-size: 11.5px; color: var(--text-3); padding: 4px 2px 0; display: flex; justify-content: space-between; gap: 6px; }

.t-card { display: flex; flex-direction: column; gap: 8px; }
.t-card .t-name { font-family: var(--font-display); font-size: 18.5px; font-weight: 750; line-height: 1.1; letter-spacing: -0.02em; }
.t-card .t-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.t-card .noacct { align-self: flex-start; }
/* Your recent games: the Review button has a slot of its own in every row,
   so the result chips line up even when a game has nothing to review. */
.rg-act { flex: none; width: 76px; display: flex; justify-content: flex-end; }

/* ----- the game screen ----- */
body.immersive .page { padding-bottom: 24px; }
.game {
  --board: max(320px, min(760px, calc(100dvh - var(--topbar-h) - 196px)));
  display: grid; grid-template-columns: minmax(0, var(--board)) minmax(300px, 400px);
  gap: 24px; justify-content: center; align-items: start;
  max-width: var(--maxw); margin: 0 auto; padding: 18px var(--gutter) 28px;
}
.game-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.board-row { display: flex; gap: 10px; align-items: stretch; }
.board-row .board-frame { flex: 1; min-width: 0; }
.board-row .evalbar { align-self: stretch; }
.board-frame { position: relative; }
.back-live { position: absolute; left: 50%; bottom: -46px; transform: translateX(-50%); z-index: 6; box-shadow: var(--shadow-2); }
.pcard { position: relative; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 8px 6px 6px; border-radius: 12px; }
.pcard .pc-info { flex: 1; min-width: 0; }
.pcard .pc-top { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-weight: 650; }
.pcard .pname { color: var(--text); }
.pcard .pc-rating { color: var(--text-3); font-weight: 600; font-size: 13.5px; }
.pc-delta { font-weight: 750; font-size: 13px; font-variant-numeric: tabular-nums; }
.pc-delta.up { color: var(--win); }
.pc-delta.down { color: var(--loss); }
.pc-away { font-size: 11px; font-weight: 750; color: var(--warn); text-transform: uppercase; letter-spacing: 0.06em; }
.pcard .pc-cap { display: flex; align-items: center; min-height: 18px; margin-top: 1px; }
/* Nothing taken yet: no empty line, so the name sits on the avatar's and the
   clock's centre line. */
.pcard .pc-cap:empty { display: none; }
.pcard .cap { width: 18px; height: 18px; margin-right: -6px; }
.pcard .cap .pc { width: 18px; height: 18px; padding: 0; }
/* By night the black pieces White has taken get a light edge on the dark page. */
:root:not([data-theme="light"]) .pcard.is-white .cap .pc { filter: drop-shadow(0 0 1px var(--text-2)); }
.pcard .pc-adv { margin-left: 12px; font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.pc-clock {
  margin-left: auto; min-width: 108px; padding: 8px 12px; border-radius: 10px; text-align: right;
  font-size: 26px; font-weight: 700; line-height: 1; letter-spacing: 0.01em;
  background: var(--bg-2); color: var(--text-3); border: 1px solid var(--line);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.pc-clock.running { background: var(--surface-3); color: var(--text); border-color: var(--line-accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.pc-clock.low { color: #fff; background: var(--danger); border-color: var(--danger); }
/* Low on time: a ring pulses out from the running clock, once a second. */
.pc-clock { position: relative; }
.pc-clock.low.running::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 55%, transparent); animation: lowpulse 1s var(--ease) infinite; pointer-events: none; }
@keyframes lowpulse { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.16, 1.4); } }
.pcard.to-move .avatar { box-shadow: 0 0 0 2px var(--accent); }
.pc-bubble { position: absolute; left: 54px; top: calc(100% - 6px); z-index: 30; pointer-events: none; }
.pcard[data-slot="bottom"] .pc-bubble { top: auto; bottom: calc(100% - 6px); }
.emote-bubble {
  position: relative; display: inline-block; padding: 8px 14px; border-radius: 16px; font-weight: 700; white-space: nowrap;
  background: var(--text); color: var(--bg); box-shadow: var(--shadow-2); animation: bubble-in 300ms var(--ease-out-back) both;
}
.emote-bubble.out { animation: fade-in 300ms reverse forwards; }
.finger-bubble { background: transparent; box-shadow: none; padding: 0; }
.finger-bubble .finger { width: 74px; height: 92px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45)); animation: finger-wag 900ms var(--ease-out-back) both; transform-origin: 50% 90%; }
@keyframes bubble-in { from { opacity: 0; transform: translateY(8px) scale(0.8); } to { opacity: 1; transform: none; } }
@keyframes finger-wag { 0% { transform: translateY(40px) scale(0.4) rotate(-20deg); opacity: 0; } 45% { transform: translateY(-6px) scale(1.12) rotate(8deg); opacity: 1; } 65% { transform: rotate(-7deg); } 82% { transform: rotate(4deg); } 100% { transform: none; } }

.game-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.gs-head { padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: 8px; }
.gs-head-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.gs-title { font-family: var(--font-display); font-size: 18px; font-weight: 750; color: var(--text); line-height: 1.15; letter-spacing: -0.015em; }
.spectators { display: inline-flex; align-items: center; gap: 4px; color: var(--text-3); font-size: 13px; font-weight: 650; }
.gs-moves { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-1); max-height: min(42dvh, 380px); min-height: 120px; overflow-y: auto; }
.movelist { list-style: none; margin: 0; padding: 6px; display: grid; grid-template-columns: 1fr; }
.movelist li { display: grid; grid-template-columns: 38px 1fr 1fr; align-items: center; border-radius: 6px; }
.movelist li:nth-child(odd) { background: color-mix(in srgb, var(--bg-2) 55%, transparent); }
.movelist .mn { color: var(--text-3); font-size: 13px; font-variant-numeric: tabular-nums; padding-left: 8px; }
.mv { text-align: left; background: none; border: 0; border-radius: 6px; padding: 6px 8px; font-weight: 600; color: var(--text); font-size: 14.5px; min-height: 32px; }
.mv:hover { background: var(--surface-3); }
.mv.cur { background: color-mix(in srgb, var(--accent) 28%, transparent); color: var(--text); }
.mv.empty { pointer-events: none; }
.mv.t-bad { color: var(--c-mistake); }
.mv.t-great { color: var(--c-brilliant); }
.ml-empty { padding: 14px; display: block !important; }
/* An empty list is a quiet note in the middle of its card, not a data row. */
.movelist li.ml-empty { background: none; text-align: center; padding: 38px 14px; color: var(--text-3); }
.gs-nav { display: flex; gap: 4px; align-items: center; }
/* The action rows: the game's buttons, then the gestures (emote, the finger,
   slam). The buttons of a row share its width evenly, so rows of three line
   up in columns; a row whose labels cannot fit wraps rather than clipping.
   The ⋯ menu sits with the board buttons, next to Flip. */
.gs-actions { display: flex; flex-direction: column; gap: 8px; }
.act-row { display: flex; flex-wrap: wrap; gap: 8px; }
.act-row > .btn { flex: 1 1 0; }
.act-finger .finger { width: 15px; height: 19px; margin: -2px 0; }
.act-slam svg { color: var(--danger-2); }
/* Phones of 360 to 400 px: a little less padding keeps three buttons on one
   line. */
@media (max-width: 400px) {
  .act-row { gap: 6px; }
  .act-row > .btn:not(.btn-icon) { padding-left: 9px; padding-right: 9px; }
}
.gs-notices { display: flex; flex-direction: column; gap: 8px; }
.gs-notices:empty { display: none; }
.notice { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: var(--radius-l); background: var(--surface-2); border: 1px solid var(--line-accent); }
.notice.warn { border-color: color-mix(in srgb, var(--warn) 60%, transparent); }
.notice-body { font-weight: 550; }
.over-card { padding: 18px; border-radius: var(--radius-l); background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-1); text-align: center; }
.over-card.won { box-shadow: 0 0 0 1px var(--accent), 0 20px 50px -30px var(--accent-glow); }
.over-title { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; transform-origin: 50% 70%; }
.over-card.won .over-title { color: var(--accent-2); }
.over-sub { color: var(--text-2); margin-top: 4px; font-weight: 550; }
.over-sub .num { white-space: nowrap; }
.over-rating { margin-top: 10px; font-size: 14.5px; }
.over-why { display: block; margin-top: 4px; font-size: 13px; }
/* How both sides played, and the rating test's result */
.over-test { display: flex; width: fit-content; align-items: center; gap: 5px; margin: 0 auto 6px; padding: 2px 10px 2px 7px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--accent-2); background: var(--accent-soft); border: 1px solid var(--line-accent); }
.over-test .icon { width: 14px; height: 14px; }
.over-played { display: grid; gap: 5px; max-width: 380px; margin: 12px auto 0; padding: 10px 12px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--line); text-align: left; font-size: 14px; line-height: 1.4; }
.over-played b { font-weight: 750; color: var(--text); }
.over-played .over-note { font-size: 12.5px; padding-top: 5px; border-top: 1px solid var(--line); }
.over-played.op-wait { text-align: center; font-size: 13px; }
/* An even grid: each button takes a whole line (the main action, Game Review,
   Back to tournament) except the last two, New game | PGN, which pair up.
   Two buttons alone (pass and play) take a line each. */
.over-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.over-btns > * { grid-column: 1 / -1; }
.over-btns > :last-child:nth-child(n+3), .over-btns > :nth-last-child(2):nth-child(n+2) { grid-column: auto; }
.gs-chat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-1); padding: 12px; }
.gs-chat .kicker { margin-bottom: 6px; }
.chat-log { max-height: 180px; min-height: 40px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; font-size: 14px; }
.chat-line b { color: var(--accent-2); font-weight: 650; }
.chat-line.spec b { color: var(--info); }
.chat-form { display: flex; gap: 8px; }
.chat-form .input { min-height: 40px; }
.moves-strip { display: none; }
.emote-grid { display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: 6px; }
.emote-grid button { min-height: 42px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-weight: 650; padding: 0 10px; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), scale var(--t-fast) var(--ease); }
.emote-grid button:active { scale: 0.95; }
.emote-grid button:hover { border-color: var(--line-accent); background: var(--surface-3); }
.emote-finger { display: flex; align-items: center; gap: 8px; grid-column: 1 / -1; justify-content: center; }
.emote-finger .finger { width: 22px; height: 28px; }
.emote-grid button[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; background: var(--surface); border-color: var(--line); }

/* Coach Ollie's cards (game, Game Review, analysis board) wear the theme's
   accent: a plain card with an accent hairline. */
.coach { padding: 12px; border-radius: var(--radius-l); background: var(--surface); border: 1px solid var(--line-accent); box-shadow: var(--shadow-1); }
.coach-row { display: flex; gap: 10px; align-items: flex-start; }
.coach-av svg { border-radius: 50%; }
.coach-bubble { position: relative; flex: 1; background: var(--surface-2); border-radius: 12px; padding: 8px 12px; font-size: 14px; }
.coach-bubble::before { content: ""; position: absolute; left: -6px; top: 14px; border: 6px solid transparent; border-left: 0; border-right-color: var(--surface-2); }
.coach-bubble b { display: block; font-size: 13.5px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--accent-2); margin-bottom: 2px; }
.coach-text { transition: color var(--t-med) var(--ease); }
.coach-text.tone-bad { color: var(--danger-2); }
.coach-text.tone-great { color: var(--c-brilliant); }
.coach-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }

/* Fair play on the game screen: the spectators' eval note, Report fair play,
   and the private note from the admins */
.fp-evalnote { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 6px 12px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--text-2); background: color-mix(in srgb, var(--text) 5%, transparent); border: 1px solid var(--line); text-wrap: balance; }
.fp-evalnote .icon { color: var(--text-3); width: 16px; height: 16px; }
.fp-report { display: flex; justify-content: center; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.fp-report-btn { color: var(--text-3); }
.fp-report-btn[disabled] { opacity: 1; color: var(--text-3); cursor: default; }
.fp-report-btn[disabled] .icon { color: var(--win); }
.fp-note-body { display: flex; gap: 14px; align-items: flex-start; }
.fp-note-body p + p { margin-top: 8px; font-size: 13.5px; }
.fp-note-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; flex: none; color: var(--info); background: color-mix(in srgb, var(--info) 14%, transparent); }

@media (max-width: 979px) {
  .game { grid-template-columns: minmax(0, 640px); padding-top: 10px; gap: 14px; }
  .game { --board: 640px; }
  .gs-moves { display: none; }
  .moves-strip { display: flex; gap: 2px; align-items: center; overflow-x: auto; white-space: nowrap; padding: 4px 2px; scrollbar-width: none; }
  .moves-strip::-webkit-scrollbar { display: none; }
  .moves-strip .mn { color: var(--text-3); font-size: 12.5px; margin-left: 6px; }
  .moves-strip .mv { padding: 4px 6px; min-height: 30px; font-size: 14px; }
}
@media (max-width: 979px) {
  .game-side .gs-over { order: 1; }
  .game-side .gs-notices { order: 2; }
  .game-side .gs-actions { order: 3; }
  .game-side .coach { order: 4; }
  .game-side .gs-nav { order: 5; }
  .game-side .gs-head { order: 6; }
  .game-side .gs-chat { order: 7; }
}
/* Touch: the moves in the strip and the lists are full-size tap targets. */
@media (pointer: coarse) { .moves-strip .mv, .movelist .mv { min-height: 44px; } }
/* Where the bottom tab bar shows, the page ends clear of it (on a phone the
   game hides the tab bar and keeps its own small margin, below). */
@media (max-width: 899px) {
  .game { padding-bottom: calc(var(--tabbar-h) + 28px + env(safe-area-inset-bottom, 0px)); }
}
/* The action rows stay in the column's flow, after the notices, so they never
   cover a notice (a sticky bar can only rise to the top of its column). */
@media (max-width: 767px) {
  body.immersive .tabbar { display: none; }
  .gs-actions { padding: 4px 0 0; }
  .gs-actions:empty { display: none; }
  .game { padding: 6px 8px calc(16px + env(safe-area-inset-bottom, 0px)); }
  .board-frame { padding: 3px; border-radius: 8px; }
  .pcard { min-height: 48px; padding: 4px; }
  .pc-clock { font-size: 22px; min-width: 92px; padding: 7px 10px; }
  .pcard .avatar { width: 34px; height: 34px; font-size: 13px; }
  .board-row .evalbar { width: 14px; }
  .gs-head { padding: 10px 12px; }
  .gs-title { font-size: 19px; }
  .back-live { bottom: auto; top: calc(100% + 4px); }
}

/* ----- bots ----- */
.bot-tier { margin-top: 28px; }
.bot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.bot-card { display: flex; gap: 14px; align-items: flex-start; padding: 16px; text-align: left; width: 100%; color: inherit; font: inherit; cursor: pointer; }
.bot-card .bot-avatar { flex: none; border-radius: 50%; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.6); }
/* The words run the card's full height, so the measured-strength line sits
   at the foot of every card in a row, whatever the length of the blurb. */
.bot-card > span { align-self: stretch; display: flex; flex-direction: column; min-width: 0; }
.bot-card b { display: block; font-size: 17px; }
.bot-card .elo { align-self: flex-start; font-variant-numeric: tabular-nums; color: var(--accent-2); font-weight: 700; font-size: 13px; }
.bot-card p { color: var(--text-2); font-size: 13.5px; margin-top: 4px; }
.bot-hero { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; }
.bot-hero .bot-avatar { width: 72px; height: 72px; flex: none; }
/* How strong a bot really plays, from its reviewed games */
.bot-measured { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; }
.bot-card .bot-measured { margin-top: auto; padding-top: 8px; }
.bot-measured b, .bot-card .bot-measured b, .rt-bot-txt .bot-measured b { display: inline; font-size: inherit; color: var(--text-2); font-weight: 750; }
/* the rating test */
.rt-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); gap: 18px; align-items: start; }
.rt-main { display: flex; flex-direction: column; gap: 22px; padding: 22px; }
.rt-h { font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 10px; }
.rt-step > .faint { font-size: 13.5px; margin: -4px 0 12px; max-width: 560px; }
.rt-step > .faint:last-child { margin-bottom: 0; }
/* The test's steps: game 1, game 2, your rating */
.rt-track { list-style: none; margin: 0; padding: 0 0 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; border-bottom: 1px solid var(--line); }
/* Dots in a row joined by a line, each step's words under its dot */
.rt-tr { position: relative; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; min-width: 0; }
.rt-tr:not(:last-child)::after { content: ""; position: absolute; left: 36px; right: -4px; top: 13px; height: 2px; border-radius: 2px; background: var(--line-2); transform-origin: 0 50%; }
.rt-tr.is-done:not(:last-child)::after { background: var(--accent); opacity: 0.55; }
.rt-tr-dot { position: relative; z-index: 1; flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--text-3); background: var(--surface); border: 1.5px solid var(--line-2); box-shadow: 0 0 0 4px var(--surface); }
.rt-tr-dot .icon { width: 14px; height: 14px; }
.rt-tr.is-now .rt-tr-dot { color: var(--accent-2); border-color: var(--accent); box-shadow: 0 0 0 4px var(--surface), 0 0 0 6px var(--accent-glow); }
.rt-tr.is-done .rt-tr-dot { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.rt-tr.is-done .rt-tr-dot .icon { stroke-width: 2.6; }
.rt-tr-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-right: 8px; }
.rt-tr-txt b { font-size: 14px; color: var(--text); white-space: nowrap; }
.rt-tr-txt small { font-size: 12.5px; color: var(--text-3); line-height: 1.35; }
.rt-tr.is-now .rt-tr-txt small { color: var(--accent-2); font-weight: 600; }
.rt-now { display: flex; flex-direction: column; gap: 4px; }
.rt-now b { font-size: 42px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.rt-now span { font-size: 13.5px; }
.rt-levels { display: flex; flex-wrap: wrap; gap: 8px; }
.rt-level, .rt-bot { border: 1px solid var(--line-2); background: var(--surface); color: var(--text-2); transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-med) var(--ease), color var(--t-fast); }
.rt-level { min-height: 44px; padding: 0 14px; border-radius: 10px; font-weight: 650; font-size: 14px; }
.rt-level:hover, .rt-bot:hover { border-color: var(--line-accent); color: var(--text); }
.rt-level[aria-pressed="true"], .rt-bot[aria-pressed="true"] { border-color: var(--accent); color: var(--text); box-shadow: 0 0 0 2px var(--accent-glow); }
.rt-bots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rt-bot { position: relative; display: flex; gap: 10px; align-items: flex-start; min-height: 44px; padding: 12px 30px 12px 12px; border-radius: var(--radius); text-align: left; font: inherit; }
.rt-bot:hover { transform: translateY(-1px); }
.rt-bot .bot-avatar { flex: none; border-radius: 50%; }
.rt-bot-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rt-bot-txt b { font-size: 15px; color: var(--text); }
.rt-bot-txt .faint { font-size: 12.5px; }
.rt-bot .bot-measured { margin-top: 3px; }
.rt-tick { position: absolute; top: 9px; right: 9px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); opacity: 0; transform: scale(0.6); transition: opacity var(--t-fast), transform var(--t-med) var(--spring); }
.rt-tick .icon { width: 13px; height: 13px; stroke-width: 2.6; }
.rt-bot[aria-pressed="true"] .rt-tick { opacity: 1; transform: none; }
.rt-pending { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.rt-pending .icon { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; }
.rt-start { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.rt-info { margin: -8px 0 0; padding: 10px 12px; border-radius: var(--radius); background: var(--accent-soft); border: 1px solid var(--line-accent); color: var(--text); font-size: 14px; font-weight: 550; }
.rt-main .form-error:empty { display: none; }
.rt-how { padding: 20px; }
.rt-steps { margin: 10px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; color: var(--text-2); font-size: 14.5px; }
.rt-steps b { color: var(--text); }
.rt-small { margin-top: 14px; font-size: 13px; }
/* Past tests: each one's games, what it did, and for the newest the sentence */
.rt-list { list-style: none; margin: 10px 0 0; padding: 0; }
.rt-row { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; }
.rt-row + .rt-row { border-top: 1px solid var(--line); }
.rt-row-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.rt-when { font-size: 13px; color: var(--text-3); font-weight: 550; }
.rt-change { white-space: nowrap; font-size: 14px; text-align: right; }
.rt-change b { font-size: 16px; font-weight: 800; }
.rt-was { color: var(--text-3); }
.rt-row-games { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rt-g { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2); text-decoration: none; transition: border-color var(--t-fast), transform var(--t-med) var(--ease); }
.rt-g:hover { border-color: var(--line-accent); color: var(--text); transform: translateY(-1px); }
.rt-g .avatar { flex: none; }
.rt-g-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; font-size: 14px; }
.rt-g-txt b { color: var(--text); }
.rt-g-txt small { font-size: 12.5px; }
.rt-g .chip { height: 20px; font-size: 11.5px; padding: 0 7px; margin-left: 2px; vertical-align: 1px; }
.rt-g-go { flex: none; color: var(--text-3); }
.rt-g-go .icon { width: 15px; height: 15px; }
.rt-g:hover .rt-g-go { color: var(--accent-2); }
.rt-story { margin: 0; font-size: 13.5px; color: var(--text-2); line-height: 1.45; }
@media (max-width: 899px) { .rt-grid { grid-template-columns: 1fr; } }
@media (max-width: 599px) {
  .rt-bots { grid-template-columns: 1fr; }
  .rt-main { padding: 16px; gap: 18px; }
  .rt-track { grid-template-columns: 1fr; gap: 10px; padding-bottom: 14px; }
  .rt-tr { flex-direction: row; gap: 10px; }
  .rt-tr:not(:last-child)::after { left: 13px; right: auto; top: 30px; bottom: -12px; width: 2px; height: auto; transform-origin: 50% 0; }
  .rt-tr-txt { padding: 3px 0 0; }
  .rt-row { padding: 12px 14px; }
  .rt-row-games { grid-template-columns: 1fr; }
  .rt-change { text-align: left; }
}

/* ----- settings ----- */
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.settings-grid .card h3 { font-family: var(--font-display); font-size: 17px; font-weight: 700; margin-bottom: 10px; letter-spacing: -0.01em; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { display: flex; flex-direction: column; gap: 6px; align-items: center; padding: 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text-2); font-size: 12.5px; font-weight: 650; min-width: 92px; }
.swatch[aria-pressed="true"] { border-color: var(--accent); color: var(--text); box-shadow: 0 0 0 2px var(--accent-glow); }
.swatch .sw-board { display: grid; grid-template-columns: repeat(4, 16px); grid-template-rows: repeat(2, 16px); border-radius: 4px; overflow: hidden; }
/* The two pieces stand on board squares, as they would in a game, so a dark
   piece never sinks into a dark card. */
.swatch .sw-pieces { display: flex; gap: 0; border-radius: 4px; overflow: hidden; }
.swatch { transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-med) var(--spring), scale var(--t-fast) var(--ease); }
.swatch:hover { transform: translateY(-2px); }
.swatch:active { scale: 0.95; }
.board-custom { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 12px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: color-mix(in srgb, var(--text) 3%, var(--surface)); }
.color-pick { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; font-size: 14px; color: var(--text-2); cursor: pointer; }
.color-pick input { width: 44px; height: 32px; padding: 0; border: 1px solid var(--line-2); border-radius: 8px; background: none; cursor: pointer; }
.color-pick input::-webkit-color-swatch-wrapper { padding: 3px; }
.color-pick input::-webkit-color-swatch { border: 0; border-radius: 5px; }
.board-preview { display: grid; grid-template-columns: repeat(4, 22px); grid-template-rows: repeat(4, 22px); border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px var(--line-2); margin-left: auto; }
.board-preview i.l { background: var(--sq-light); }
.board-preview i.d { background: var(--sq-dark); }
.swatch .sw-pieces .pc { width: 28px; height: 28px; padding: 0; background: var(--sq-dark); }
.swatch .sw-pieces .pc + .pc { background: var(--sq-light); }
.engine-credit { margin-top: 22px; font-size: 13px; line-height: 1.5; max-width: 72ch; }
/* Two columns: Look down the left; Playing, Sound and Emotes stacked at their
   own heights on the right; Account and Reset share the last row. */
@media (min-width: 900px) { .settings-grid > .card:first-child { grid-row: span 3; } }
@media (max-width: 899px) { .settings-grid { grid-template-columns: 1fr; } }

/* ----- misc ----- */
.searching { text-align: center; }
.searching .pulse-ring { width: 84px; height: 84px; margin: 6px auto 14px; border-radius: 50%; border: 2px solid var(--accent); animation: ring 1.6s ease-out infinite; display: grid; place-items: center; }
.searching .pulse-ring svg { width: 34px; height: 34px; color: var(--accent-2); }
@keyframes ring { 0% { box-shadow: 0 0 0 0 var(--accent-glow); } 100% { box-shadow: 0 0 0 26px rgba(201, 162, 74, 0); } }
.ready { text-align: center; }
.ready-vs { font-size: 17px; margin: 8px 0; }
.ready-count { font-size: 34px; color: var(--accent-2); min-height: 40px; }
.medal { width: 140px; height: 140px; margin: 4px auto 16px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #f6dc95, #c9a24a 45%, #7c5f24 100%); box-shadow: 0 0 0 6px rgba(201, 162, 74, 0.25), 0 20px 40px -18px rgba(0, 0, 0, 0.8); animation: medal-in 700ms var(--ease-out-back) both; }
.medal span { font-family: var(--font-display); font-size: 34px; font-weight: 800; color: #2a1e08; }
@keyframes medal-in { from { transform: scale(0.3) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }
.menu-head { display: flex; flex-direction: column; padding: 6px 12px 8px; }
.more-menu a { font-size: 16px; min-height: 48px; }
.tc-picker .tc-custom { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.tc-picker .seg button { min-width: 58px; }
/* Each row's label is plain words with its icon, not a button-like pill. */
.tc-picker .tc-label { display: inline-flex; align-items: center; gap: 6px; min-width: 104px; font-size: 13px; font-weight: 650; color: var(--text-2); }
.tc-picker .tc-label .icon { width: 16px; height: 16px; color: var(--text-3); }
/* Phones: every label above its choices, so no row wraps differently. */
@media (max-width: 520px) { .tc-picker .row-wrap { display: grid; justify-items: start; gap: 6px; } }
.challenge-card { text-align: center; padding: 28px; }
.challenge-card .vs { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 12px 0; }

/* ----- tournaments ----- */
.t-champ { display: flex; align-items: center; gap: 6px; color: var(--gold); font-weight: 700; }
.t-hero { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; padding: 24px 26px; align-items: start; }
.t-hero h1 { font-size: clamp(28px, 3.6vw, 44px); }
.t-desc { color: var(--text-2); margin-top: 8px; max-width: 70ch; white-space: pre-line; }
.t-rules { margin-top: 10px; font-size: 13.5px; }
.t-act { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 12px; background: color-mix(in srgb, var(--text) 3%, var(--surface)); border: 1px solid var(--line); }
/* The small print in the action box shares one size with the field labels. */
.t-act p.faint { font-size: 13.5px; }
/* Leave, Withdraw and "Show me" keep their own width instead of spanning the box. */
.t-act > .btn:not(.btn-block) { align-self: flex-start; }
.t-in { display: flex; align-items: center; gap: 6px; font-weight: 750; color: var(--win); }
.t-count { font-size: 18px; font-weight: 650; }
.t-count b { color: var(--accent-2); }
.t-champ-name { font-size: 30px; line-height: 1.05; color: var(--gold); font-weight: 800; letter-spacing: -0.03em; }
.t-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; margin-top: 20px; align-items: start; }
.t-side { display: flex; flex-direction: column; gap: 14px; }
/* The invite and director slots are empty when there is nothing to show:
   they take no gap, so the side column lines up with the tabs. */
.t-side > :empty { display: none; }
.t-invite .qr { margin: 4px auto 12px; }
.t-invite .qr svg { width: 200px; height: 200px; }
.t-invite .copy-field { margin-bottom: 8px; }
.t-invite .hint { margin-top: 10px; }
.t-code { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--bg-2); border: 1px dashed var(--line-accent); }
.t-code b { font-size: 24px; letter-spacing: 0.18em; color: var(--accent-2); }
.t-director .stack { gap: 10px; }
/* The director's smaller buttons sit in an even grid: two across in the side
   column and on a phone, one row of four when the column is full width. */
.t-director .row-wrap { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.t-director .row-wrap > .btn { width: 100%; padding: 0 10px; }
.t-chat .chat-log { max-height: 280px; }
.t-chat .chat-log:empty { min-height: 0; margin: 0; }
.t-chat > p.faint { font-size: 13.5px; }
.chat-line.td b { color: var(--accent-2); }
/* Activity: the whole header opens it, and a chevron says it can. */
.t-log { padding: 0; }
.t-log summary { cursor: pointer; margin: 0; padding: 18px 20px; list-style: none; }
.t-log summary::-webkit-details-marker { display: none; }
.t-log summary::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: translateY(-2px) rotate(45deg); transition: transform var(--t-fast) var(--ease); }
.t-log[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.t-log ol { list-style: none; padding: 0 20px 18px; margin: 0; max-height: 260px; overflow: auto; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.t-hero.no-action { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1099px) { .t-layout { grid-template-columns: minmax(0, 1fr); } .t-hero { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599px) { .t-hero { padding: 20px 18px; } }

/* bracket */
.b-tools { display: flex; align-items: center; gap: 8px 12px; margin-bottom: 8px; }
.bracket-scroll { overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-l); background: color-mix(in srgb, var(--text) 2.5%, var(--bg)); padding: 14px; max-height: 78vh; scroll-behavior: smooth; }
.bracket-zoom { position: relative; }
.bracket { position: relative; transform-origin: 0 0; }
.b-lines { position: absolute; left: 0; top: 0; overflow: visible; }
.b-lines path { fill: none; stroke: var(--line-2); stroke-width: 2; transition: stroke var(--t-slow) var(--ease); }
.b-lines path.won { stroke: var(--accent-3); }
.b-title { position: absolute; top: 2px; font-size: 13px; font-weight: 700; letter-spacing: -0.005em; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-title-third { top: auto; }
.b-match {
  position: absolute; display: flex; flex-direction: column; justify-content: center;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 9px; box-shadow: var(--shadow-1);
  transition: border-color var(--t-fast), transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), opacity var(--t-med) var(--ease);
}
.b-match[role="button"] { cursor: pointer; }
.b-match[role="button"]:hover, .b-match:focus-visible { border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.b-match.is-live { border-color: color-mix(in srgb, var(--live) 70%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--live) 16%, transparent); }
/* When a player is spotlit, their matches light up once. */
@keyframes spot { 0% { box-shadow: 0 0 0 0 var(--accent-glow), var(--shadow-1); } 60% { box-shadow: 0 0 0 8px transparent, var(--shadow-1); } 100% { box-shadow: 0 0 0 3px var(--accent-glow), var(--shadow-1); } }
.just-spot .b-match.is-path { animation: spot 900ms var(--ease) both; }
.just-spot .pair-row.is-path { animation: rise-in var(--t-slow) var(--ease) both; }
/* Not started yet: a dashed outline and no shadow, but full strength, so
   the final and the third-place match stay readable. */
.b-match.waiting { border-style: dashed; box-shadow: none; }
.b-match.waiting .b-name { color: var(--text-2); }
.b-row { display: flex; align-items: center; gap: 6px; height: 50%; padding: 0 8px; font-size: 13.5px; min-width: 0; }
.b-row + .b-row { border-top: 1px solid var(--line); }
/* The rows follow the card's inner corners, so the winner's bar and the
   spotlight fill stay inside the rounded card. */
.b-match > .b-row:first-child { border-radius: 8px 8px 0 0; }
.b-match > .b-row:nth-child(2) { border-radius: 0 0 8px 8px; }
.b-row.win { font-weight: 750; box-shadow: inset 3px 0 0 var(--accent); }
.b-row.win .b-score { color: var(--accent-2); }
.b-row.lose .b-name { color: var(--text-3); }
.b-row.lose .b-score { color: var(--text-3); font-weight: 600; }
.b-seed { width: 18px; font-size: 11px; color: var(--text-3); text-align: right; flex: none; }
.b-name { flex: 1; min-width: 0; }
.b-rating { font-size: 11.5px; color: var(--text-3); flex: none; }
.b-score { width: 20px; text-align: right; font-weight: 750; flex: none; }
.b-tags { position: absolute; right: 6px; top: -9px; display: flex; gap: 4px; }
.b-live, .b-flag { font-size: 10.5px; font-weight: 800; padding: 1px 6px; border-radius: 4px; background: color-mix(in srgb, var(--live) 82%, #000); color: #fff; white-space: nowrap; }
.b-flag { background: var(--warn); color: #20160a; }
.b-flag.subtle { background: var(--surface-3); color: var(--text-3); }

/* pairings */
.pair-round { margin-bottom: 14px; }
.pair-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.pair-head h3 { font-family: var(--font-display); font-size: 17px; font-weight: 700; margin: 0 auto 0 0; letter-spacing: -0.01em; }
/* Four fixed tracks in every row: a live game shows its badge in the score
   column, so the columns line up from one round card to the next. */
.pair-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 76px minmax(0, 1fr); align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background var(--t-fast) var(--ease); }
.pair-row:last-child { border-bottom: 0; }
.pair-row:hover, .pair-row:focus-visible { background: color-mix(in srgb, var(--text) 4%, transparent); }
.pair-row.is-live { background: color-mix(in srgb, var(--live) 6%, transparent); }
.p-side { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-side.right { text-align: right; }
.p-side.win { font-weight: 750; color: var(--accent-2); }
.p-score { text-align: center; font-weight: 750; white-space: nowrap; }
.p-score .live-dot { width: 8px; height: 8px; margin: 0 0 0 5px; vertical-align: 1px; }
/* Phones: narrower board and score columns, and no ratings (they are on
   Seeds), so each name gets about 120 px and shows in full. */
@media (max-width: 599px) {
  .pair-head { padding: 12px; }
  .pair-row { grid-template-columns: 16px minmax(0, 1fr) 56px minmax(0, 1fr); gap: 6px; padding: 10px 12px; }
  .pair-row .p-rating { display: none; }
  .p-side:not(.right) .p-seed { margin: 0 4px 0 0; }
  .p-side.right .p-seed { margin: 0 0 0 4px; }
}

/* players */
.plist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-1); }
.plist-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--surface); transition: background var(--t-fast) var(--ease); }
.plist-row:hover { background: color-mix(in srgb, var(--text) 2.5%, var(--surface)); }
.plist-row:last-child { border-bottom: 0; }
.plist-seed { flex: none; }
.plist-row .grow { flex: 1; min-width: 0; }
.plist.manual .plist-row { cursor: grab; }
.plist-row.dragging { opacity: 0.5; }

/* projector */
.projector { position: fixed; inset: 0; z-index: 400; background: radial-gradient(1200px 700px at 30% 10%, #1b3a2d, #070d0b 70%); color: #efe6d2; overflow: auto; }
.proj-in { min-height: 100%; display: grid; grid-template-columns: 1.2fr 1fr; gap: 6vw; padding: 6vh 6vw; align-items: center; position: relative; }
.proj-left h1 { font-size: clamp(40px, 6vw, 96px); margin: 8px 0 24px; }
.proj-qr { padding: 18px; border-radius: 18px; }
.proj-qr svg { width: min(42vh, 36vw); height: min(42vh, 36vw); }
.proj-url { margin-top: 18px; font-size: clamp(18px, 2vw, 30px); font-weight: 650; color: #ddb862; word-break: break-all; }
.proj-code { font-size: clamp(18px, 2vw, 28px); margin-top: 6px; }
.proj-code b { letter-spacing: 0.2em; color: #f6dc95; font-size: 1.4em; }
.proj-right h2 { font-size: clamp(32px, 4vw, 64px); margin-bottom: 18px; }
.proj-list { columns: 2; column-gap: 32px; font-size: clamp(16px, 1.7vw, 26px); line-height: 1.6; padding-left: 1.4em; }
.proj-started { margin-top: 16px; color: #ddb862; font-weight: 700; font-size: 22px; }
.proj-close { position: absolute; top: 18px; right: 18px; }
@media (max-width: 899px) { .proj-in { grid-template-columns: 1fr; } }

/* champion */
.champion { display: flex; gap: 28px; align-items: center; margin-top: 20px; padding: 26px 30px; overflow: hidden; }
.champion .trophy { width: 140px; flex: none; }
/* The cup stands on the card itself: not in the profile's trophy-list tile. */
.champion .trophy, .cm-in .trophy { display: block; padding: 0; background: none; border-radius: 0; }
.champion .kicker::before { background: var(--gold); }
.trophy-svg { width: 100%; height: auto; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.5)); }
:root[data-theme="light"] .trophy-svg { filter: drop-shadow(0 10px 16px rgba(16, 24, 20, 0.18)); }
.trophy-svg .shine { animation: shine 3.2s ease-in-out infinite 1s; }
@keyframes shine { 0% { transform: translateX(0) skewX(-18deg); } 45%, 100% { transform: translateX(170px) skewX(-18deg); } }
.champ-name { font-size: clamp(36px, 5vw, 60px); line-height: 1; color: var(--gold); font-weight: 800; letter-spacing: -0.035em; }
.podium { list-style: none; padding: 0; margin: 12px 0 0; display: flex; gap: 18px; flex-wrap: wrap; font-weight: 650; }
.medal-dot { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 12px; font-weight: 800; color: #20160a; }
.medal-dot.m1 { background: linear-gradient(145deg, #f6dc95, #b8902f); }
.medal-dot.m2 { background: linear-gradient(145deg, #e8e8e8, #a7a7a7); }
.medal-dot.m3 { background: linear-gradient(145deg, #e3a76d, #9a5b2a); }
@media (max-width: 599px) {
  .champion { flex-direction: column; text-align: center; padding: 22px 18px; }
  .champion .kicker, .champion .row-wrap, .champ-you, .podium { justify-content: center; }
}
.champion-moment { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; background: radial-gradient(900px 600px at 50% 40%, rgba(40, 70, 56, 0.96), rgba(4, 8, 6, 0.97)); animation: fade-in 400ms ease both; }
.champion-moment.out { animation: fade-in 400ms ease reverse forwards; }
.champion-moment .confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cm-in { position: relative; text-align: center; padding: 20px; }
.cm-in .kicker::before { background: var(--gold); }
.cm-in .kicker { max-width: 520px; margin-left: auto; margin-right: auto; }
.cm-in .trophy { width: min(220px, 50vw); margin: 0 auto 14px; }
.cm-in .trophy.rise { animation: trophy-rise 1100ms var(--ease-out-back) both; }
@keyframes trophy-rise { 0% { transform: translateY(60%) scale(0.6); opacity: 0; } 100% { transform: none; opacity: 1; } }
.cm-name { font-size: clamp(48px, 9vw, 110px); line-height: 1; color: #f6dc95; text-shadow: 0 6px 40px rgba(221, 184, 98, 0.45); animation: name-in 900ms 600ms ease both; }
@keyframes name-in { from { opacity: 0; letter-spacing: 0.3em; } to { opacity: 1; letter-spacing: 0; } }
.cm-sub { font-size: 20px; color: #efe6d2; margin: 6px 0 24px; animation: rise-in 600ms 1100ms ease both; }

/* tournament form */
.tform fieldset { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px 16px; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.tform legend { padding: 0 6px; font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--text); }
/* Four ways to seed, two by two, so no choice is left alone on a line. */
.tform [data-seg="seeding"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-self: stretch; }
.tb-list { list-style: decimal; margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 4px; }
.tb-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 8px; border-radius: 8px; background: var(--surface-2); }
.tform-dialog { width: min(820px, 100%); }

/* ----- Game Review and the analysis board ----- */
.review, .analysis {
  --board: max(300px, min(720px, calc(100dvh - var(--topbar-h) - 150px)));
  display: grid; grid-template-columns: minmax(0, var(--board)) minmax(320px, 430px);
  gap: 24px; justify-content: center; align-items: start;
  max-width: var(--maxw); margin: 0 auto; padding: 18px var(--gutter) 40px;
}
.analysis { --board: max(300px, min(720px, calc(100dvh - var(--topbar-h) - 110px))); }
.rv-main, .an-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; position: sticky; top: calc(var(--topbar-h) + 12px); }
.rv-side, .an-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rv-player { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 6px; }
.rv-player .grow { flex: 1; min-width: 0; }
.rv-acc { display: flex; flex-direction: column; align-items: center; min-width: 68px; padding: 4px 8px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.rv-acc b { font-family: var(--font-display); font-size: 20px; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; }
.rv-acc span { font-size: 11.5px; color: var(--text-3); font-weight: 650; white-space: nowrap; }
.rv-played { font-size: 15px; line-height: 1.45; margin-bottom: 6px; color: var(--text); }
.rv-played b { font-weight: 800; }
.rv-played-note { font-size: 12.5px; margin-bottom: 10px; }
.rv-head, .an-head { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; }
.rv-title, .an-title { font-family: var(--font-display); font-size: 24px; font-weight: 750; line-height: 1.05; letter-spacing: -0.02em; }
.an-head-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.an-head-top .switch { min-height: 36px; }
.rv-coach { padding: 12px; border-color: var(--line-accent); }
.rv-coach .coach-bubble p { margin: 0; }
.rv-cls { display: flex !important; align-items: center; gap: 6px; text-transform: none !important; letter-spacing: 0 !important; font-size: 14px !important; }
.coach-bubble.c-brilliant .rv-cls { color: var(--c-brilliant); }
.coach-bubble.c-great .rv-cls { color: var(--c-great); }
.coach-bubble.c-best .rv-cls, .coach-bubble.c-excellent .rv-cls { color: var(--c-best); }
.coach-bubble.c-good .rv-cls { color: var(--c-good); }
.coach-bubble.c-book .rv-cls { color: var(--c-book); }
.coach-bubble.c-inaccuracy .rv-cls { color: var(--c-inaccuracy); }
.coach-bubble.c-mistake .rv-cls { color: var(--c-mistake); }
.coach-bubble.c-miss .rv-cls { color: var(--c-miss); }
.coach-bubble.c-blunder .rv-cls { color: var(--c-blunder); }
.coach-bubble.c-forced .rv-cls { color: var(--c-forced); }
.rv-summary-text { color: var(--text-2); font-size: 14.5px; margin-bottom: 10px; }
.rv-counts { width: 100%; border-collapse: collapse; font-size: 14px; }
.rv-counts th { font-size: 12.5px; letter-spacing: 0; text-transform: none; color: var(--text-3); font-weight: 650; padding: 4px 6px; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-counts td { padding: 4px 6px; border-top: 1px solid var(--line); }
.rv-counts td:first-child { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.rv-counts .num { text-align: right; width: 80px; font-weight: 700; }
/* Every verdict's colour (--k), on the table rows, the moves and the coach's
   heading; each row label wears its own. The analysis panel below mixes them
   toward the text so they read. */
.rv-counts tr.c-brilliant, .rv-moves .mv.k-brilliant, .rv-coach .coach-bubble.c-brilliant { --k: var(--c-brilliant); }
.rv-counts tr.c-great, .rv-moves .mv.k-great, .rv-coach .coach-bubble.c-great { --k: var(--c-great); }
.rv-counts tr.c-best, .rv-coach .coach-bubble.c-best, .rv-coach .coach-bubble.c-excellent { --k: var(--c-best); }
.rv-counts tr.c-excellent { --k: var(--c-excellent); }
.rv-counts tr.c-good, .rv-coach .coach-bubble.c-good { --k: var(--c-good); }
.rv-counts tr.c-book, .rv-coach .coach-bubble.c-book { --k: var(--c-book); }
.rv-counts tr.c-inaccuracy, .rv-moves .mv.k-inaccuracy, .rv-coach .coach-bubble.c-inaccuracy { --k: var(--c-inaccuracy); }
.rv-counts tr.c-mistake, .rv-moves .mv.k-mistake, .rv-coach .coach-bubble.c-mistake { --k: var(--c-mistake); }
.rv-counts tr.c-miss, .rv-moves .mv.k-miss, .rv-coach .coach-bubble.c-miss { --k: var(--c-miss); }
.rv-counts tr.c-blunder, .rv-moves .mv.k-blunder, .rv-coach .coach-bubble.c-blunder { --k: var(--c-blunder); }
.rv-counts tr.c-forced, .rv-coach .coach-bubble.c-forced { --k: var(--c-forced); }
.rv-counts tr[class*="c-"] td:first-child { color: var(--k); }
.rv-graph-card { padding: 12px 14px; }
.rv-graph-card .kicker { margin-bottom: 8px; }
.evgraph { display: block; width: 100%; height: 110px; border-radius: 8px; cursor: pointer; }
.evgraph .eg-bg { fill: #2b2a26; }
.evgraph .eg-area { fill: #ece6d6; }
.evgraph .eg-mid { stroke: var(--accent); stroke-width: 0.4; stroke-dasharray: 1 1; vector-effect: non-scaling-stroke; }
.evgraph .eg-line { fill: none; stroke: var(--accent-2); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.evgraph .eg-cur { stroke: var(--accent-2); stroke-width: 2; vector-effect: non-scaling-stroke; }
.evgraph .gm { stroke: #111; stroke-width: 0.5; vector-effect: non-scaling-stroke; }
.evgraph .gm.c-brilliant { fill: var(--c-brilliant); }
.evgraph .gm.c-great { fill: var(--c-great); }
.evgraph .gm.c-blunder { fill: var(--c-blunder); }
.evgraph .gm.c-mistake { fill: var(--c-mistake); }
.evgraph .gm.c-miss { fill: var(--c-miss); }
.rv-keys:empty { display: none; }
.rv-keys .kicker { margin-bottom: 8px; }
.key-chip { cursor: pointer; height: 30px; font-size: 13px; }
.key-chip:hover { border-color: var(--line-accent); color: var(--text); }
.key-chip .badge-ico { flex: none; }
.rv-moves { max-height: min(46dvh, 420px); overflow-y: auto; }
.mv .badge-ico { vertical-align: -3px; margin-left: 2px; }
.mv.k-brilliant { color: var(--c-brilliant); }
.mv.k-great { color: var(--c-great); }
.mv.k-inaccuracy { color: var(--c-inaccuracy); }
.mv.k-mistake { color: var(--c-mistake); }
.mv.k-miss { color: var(--c-miss); }
.mv.k-blunder { color: var(--c-blunder); }
/* The move on the board keeps the plain text colour on its highlight. */
.rv-moves .mv.cur { color: var(--text); }
/* The page's four buttons sit two by two, in an even grid. */
.rv-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.evalbar.off .white { height: 50% !important; opacity: 0.35; }

/* the analysis panel */
.an-turn { font-size: 13px; font-weight: 600; margin-right: 6px; }
.an-engine { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.an-engine.off .an-lines { opacity: 0.7; }
.an-engine-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.an-eval { font-family: var(--font-display); font-size: 25px; font-weight: 800; line-height: 1; min-width: 74px; letter-spacing: -0.02em; }
.an-eval.w { color: var(--text); }
.an-eval.b { color: var(--text-2); }
.an-depth { font-size: 12.5px; font-weight: 600; }
.an-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.an-line { display: flex; align-items: flex-start; gap: 8px; padding: 4px; border-radius: 8px; background: color-mix(in srgb, var(--bg-2) 55%, transparent); min-height: 34px; }
.an-msg { padding: 8px 6px; font-weight: 600; }
.an-ev { flex: none; min-width: 58px; height: 26px; border-radius: 6px; border: 0; font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; cursor: pointer; }
.an-ev.w { background: #ece6d6; color: #1d1b16; }
.an-ev.b { background: #2b2a26; color: #ece6d6; box-shadow: inset 0 0 0 1px var(--line-2); }
.an-pv { display: flex; flex-wrap: wrap; gap: 0 2px; font-size: 13.5px; line-height: 26px; min-width: 0; max-height: 52px; overflow: hidden; }
.pv-mv { background: none; border: 0; padding: 0 3px; border-radius: 4px; color: var(--text); font-weight: 600; cursor: pointer; }
.pv-mv:hover { background: var(--surface-3); }
.mvn { color: var(--text-3); font-weight: 600; margin-right: 2px; }
.an-toggles { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.an-threat { font-size: 13.5px; color: var(--text-2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.an-threat .icon { color: var(--danger-2); width: 16px; height: 16px; }
.an-tree-card { display: flex; flex-direction: column; }
.an-tree { max-height: min(40dvh, 360px); min-height: 110px; overflow-y: auto; padding: 6px; }
.an-row { display: grid; grid-template-columns: 38px 1fr 1fr; align-items: center; border-radius: 6px; }
.an-row:nth-child(odd) { background: color-mix(in srgb, var(--bg-2) 55%, transparent); }
.an-row .mn { color: var(--text-3); font-size: 13px; font-variant-numeric: tabular-nums; padding-left: 8px; }
.an-vars { margin: 2px 0 4px 18px; padding: 4px 8px; border-left: 2px solid var(--line-accent); display: flex; flex-direction: column; gap: 2px; }
.an-var { font-size: 13.5px; line-height: 1.9; color: var(--text-2); }
.an-sub { color: var(--text-3); }
.mv-in { display: inline; min-height: 0; padding: 2px 4px; font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.mv-in.cur { color: var(--text); }
.mv .nag { color: var(--accent-2); margin-left: 1px; }
.an-note, .an-cmt { color: var(--info); font-size: 13px; font-style: italic; }
.an-note { padding: 4px 10px; }
.an-empty { padding: 14px; font-size: 14px; }
.an-tree-tools { display: flex; gap: 6px; padding: 6px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.an-tools { display: flex; flex-direction: column; gap: 12px; padding: 14px; }
.an-tools .row .input { flex: 1; min-width: 0; }
/* The copy button matches the FEN field beside it. */
.an-tools .row .btn-icon { width: 44px; min-height: 44px; }
/* The tools sit in an even grid: two across in the side panel and on a
   phone, three on a tablet, one on the narrowest phones. */
.an-btns { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); gap: 8px; }
.an-960 { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
.an-960 .row { align-items: flex-end; }
.an-960n .input { width: 110px; }
/* the coach: opening name, one comment on the move, book moves from here */
.an-coach { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 14px; border-color: var(--line-accent); }
.an-opening { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 13.5px; font-weight: 650; line-height: 1.3; color: var(--text-2); }
.an-opening .icon { flex: none; width: 17px; height: 17px; color: var(--text-3); }
.an-opening.named { color: var(--accent-2); }
.an-opening.named .icon { color: var(--c-book); }
.an-say { min-height: 66px; }
.an-say .an-say-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 3px; font-size: 14px; letter-spacing: 0; text-transform: none; }
.an-say-move { color: var(--text-3); font-weight: 650; }
.an-say p { margin: 0; line-height: 1.45; }
.an-say .an-thinking, .an-say .an-say-plain { color: var(--text-2); }
.an-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse 1.1s ease-in-out infinite; }
.an-say .coach-btns { margin-top: 8px; }
.an-book { display: flex; flex-direction: column; padding-top: 10px; border-top: 1px solid var(--line); }
.an-book[hidden] { display: none; }
.an-book .kicker { margin-bottom: 4px; }
.an-book-list { display: flex; flex-direction: column; }
.an-bk { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 38px; padding: 5px 8px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background var(--t-fast) var(--ease); }
.an-bk:hover, .an-bk:focus-visible { background: var(--surface-3); }
.an-bk b { font-weight: 750; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.an-bk span { min-width: 0; color: var(--text-2); font-size: 13.5px; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.an-book-more { align-self: flex-start; margin-top: 4px; }
@media (pointer: coarse) { .an-bk, .an-row > .mv-in { min-height: 44px; } }
/* verdicts in the move list (the colours are Game Review's) */
.an-tree .mv-in { display: inline-flex; align-items: center; white-space: nowrap; }
.an-tree .mv-in .badge-ico { flex: none; margin-left: 3px; }
/* The verdict colours are mixed toward the text so they read (at least
   4.5:1): deeper on white, and the dark red lighter on the dark theme. The
   move on the board keeps the plain text colour on its highlight. The same
   goes for Game Review's moves, table and coach (their --k is set above). */
.an-tree .mv.k-brilliant, .an-say.c-brilliant { --k: var(--c-brilliant); }
.an-tree .mv.k-great, .an-say.c-great { --k: var(--c-great); }
.an-say.c-best, .an-say.c-excellent { --k: var(--c-best); }
.an-say.c-good { --k: var(--c-good); }
.an-say.c-book { --k: var(--c-book); }
.an-tree .mv.k-inaccuracy, .an-say.c-inaccuracy { --k: var(--c-inaccuracy); }
.an-tree .mv.k-mistake, .an-say.c-mistake { --k: var(--c-mistake); }
.an-tree .mv.k-miss, .an-say.c-miss { --k: var(--c-miss); }
.an-tree .mv.k-blunder, .an-say.c-blunder { --k: var(--c-blunder); }
.an-say.c-forced { --k: var(--c-forced); }
.an-say.c-blunder .rv-cls, .an-tree .mv.k-blunder:not(.cur),
.rv-coach .coach-bubble.c-blunder .rv-cls, .rv-moves .mv.k-blunder:not(.cur), .rv-counts tr.c-blunder td:first-child { color: color-mix(in srgb, var(--c-blunder) 72%, var(--text)); }
:root[data-theme="light"] .an-say-move { color: var(--text-2); }
:root[data-theme="light"] .an-say[class*="c-"] .rv-cls,
:root[data-theme="light"] .an-tree .mv:not(.cur):is(.k-brilliant, .k-great, .k-inaccuracy, .k-mistake, .k-miss, .k-blunder),
:root[data-theme="light"] .rv-coach .coach-bubble[class*="c-"] .rv-cls,
:root[data-theme="light"] .rv-moves .mv:not(.cur):is(.k-brilliant, .k-great, .k-inaccuracy, .k-mistake, .k-miss, .k-blunder),
:root[data-theme="light"] .rv-counts tr[class*="c-"] td:first-child { color: color-mix(in srgb, var(--k) 50%, var(--text)); }
/* the position editor */
.an-editor { display: flex; flex-direction: column; gap: 14px; padding: 14px 16px; }
.an-palette { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
.an-pal-gap { grid-column: span 1; }
.an-brush { aspect-ratio: 1; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text-2); padding: 3px; cursor: pointer; min-width: 0; }
.an-brush .pc { width: 100%; height: 100%; padding: 0; }
.an-brush .icon { width: 22px; height: 22px; }
.an-brush:hover { border-color: var(--line-accent); background: var(--surface-3); }
.an-brush[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 22%, var(--surface-2)); box-shadow: 0 0 0 2px var(--accent-glow); color: var(--text); }
.an-castle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.painting .board { cursor: crosshair; }

@media (max-width: 979px) {
  .review, .analysis { grid-template-columns: minmax(0, 640px); --board: 640px; padding-top: 10px; gap: 14px; }
  .rv-main, .an-main { position: static; }
}
/* Where the bottom tab bar shows, the page ends clear of it. */
@media (max-width: 899px) {
  .review, .analysis { padding-bottom: calc(var(--tabbar-h) + 28px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 767px) {
  .review, .analysis { padding: 6px 8px calc(var(--tabbar-h) + 28px + env(safe-area-inset-bottom, 0px)); }
  .rv-title, .an-title { font-size: 24px; }
  .rv-acc { min-width: 56px; padding: 3px 6px; }
  .rv-acc b { font-size: 18px; }
  .an-eval { font-size: 26px; min-width: 64px; }
  .an-castle { grid-template-columns: 1fr; }
}

/* ----- Watch ----- */
.watch-featured { margin-bottom: 22px; }
/* Board and words sit together in the middle of the card. */
.wf-card { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 520px); justify-content: center; gap: 28px; align-items: center; padding: 18px; border-radius: var(--radius-l); background: var(--surface); box-shadow: var(--shadow-1); border: 1px solid var(--line-accent); }
.wf-board { display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none !important; }
.wf-player { display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: 14px; min-height: 34px; }
.wf-name { max-width: 60%; }
.wf-clock { margin-left: auto; padding: 4px 10px; border-radius: 8px; background: var(--bg-2); color: var(--text-3); border: 1px solid var(--line); font-weight: 700; font-size: 16px; }
.wf-clock.on { color: var(--text); border-color: var(--line-accent); background: var(--surface-3); }
.wf-clock:empty { display: none; }
.wf-info { display: flex; flex-direction: column; gap: 10px; }
.wf-title { font-family: var(--font-display); font-size: clamp(24px, 2.8vw, 34px); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; }
.wf-t { display: block; overflow-wrap: anywhere; }
.wf-t .mini-side { width: 0.42em; height: 0.42em; margin-right: 0.3em; vertical-align: 0.14em; }
.wf-vs { display: block; margin: 4px 0; font-family: var(--font-ui); font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--text-3); }
.wf-meta { color: var(--text-2); }
.wf-result { display: flex; align-items: center; gap: 8px; }
.watch-filters { margin-bottom: 18px; }
.watch-group + .watch-group { margin-top: 26px; }
/* The button always stays on the right; a long name wraps in its own block. */
.wg-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: nowrap; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.wg-head > div { min-width: 0; }
.wg-head > .btn { flex: none; }
.wg-title { font-family: var(--font-display); font-size: 20px; font-weight: 750; line-height: 1.1; letter-spacing: -0.02em; }
@media (max-width: 899px) {
  .wf-card { grid-template-columns: 1fr; gap: 16px; padding: 12px; }
  .wf-board { max-width: 480px; width: 100%; margin: 0 auto; }
}
/* Tablets: board and words side by side, so they share one left edge. */
@media (min-width: 600px) and (max-width: 899px) {
  .wf-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .wf-board { margin: 0; }
}
/* Phones: the five filters share one even row. */
@media (max-width: 520px) {
  .watch-filters { display: flex; flex-wrap: nowrap; width: 100%; }
  .watch-filters button { flex: 1 1 auto; padding: 0 6px; }
}
.rv-moves .mv { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.rv-moves .mv .badge-ico { margin-left: 2px; vertical-align: 0; }
@media (max-width: 520px) {
  .mini-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mini-card { padding: 6px; border-radius: 12px; }
  .mini-card .mini-who { font-size: 11.5px; padding: 3px 1px; }
  .mini-meta { font-size: 10.5px; }
}

/* ----- puzzles ----- */
.puzzles {
  --board: max(300px, min(700px, calc(100dvh - var(--topbar-h) - 150px)));
  display: grid; grid-template-columns: minmax(0, var(--board)) minmax(320px, 420px);
  gap: 24px; justify-content: center; align-items: start;
  max-width: var(--maxw); margin: 0 auto; padding: 18px var(--gutter) 40px;
}
.pz-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; position: sticky; top: calc(var(--topbar-h) + 12px); }
.pz-side, .pz-panel { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pz-goal { min-height: 46px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-weight: 650; font-size: 15.5px; transition: border-color var(--t-med) var(--ease), color var(--t-med) var(--ease), box-shadow var(--t-slow) var(--ease); }
.pz-goal::before { content: ""; width: 14px; height: 14px; border-radius: 50%; flex: none; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-2); }
/* No side to move (a menu over the empty board): words only, no hollow dot. */
.pz-goal:not(.turn-w):not(.turn-b):not(.good):not(.bad)::before { display: none; }
.pz-goal.turn-w::before { background: #ece6d6; }
.pz-goal.turn-b::before { background: #1d1b16; box-shadow: inset 0 0 0 1px #8a836f; }
.pz-goal.good { border-color: color-mix(in srgb, var(--win) 55%, transparent); color: var(--win); box-shadow: 0 0 0 3px color-mix(in srgb, var(--win) 16%, transparent); }
.pz-goal.good::before { background: var(--win); }
.pz-goal.bad { border-color: color-mix(in srgb, var(--loss) 55%, transparent); color: var(--danger-2); }
.pz-goal.bad::before { background: var(--loss); }
/* The tabs choose what the whole page shows, so they run above board and panel. */
.pz-tabs { grid-column: 1 / -1; margin-bottom: -10px; }
.pz-tabs button { display: inline-flex; align-items: center; gap: 6px; }
.pz-tab-short { display: none; }
.pz-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.pz-card .kicker { margin-bottom: 0; }
.pz-title { font-size: 20px; font-weight: 750; letter-spacing: -0.02em; line-height: 1.2; margin: 0; }
.pz-card .pz-title + .muted, .pz-card .pz-title + .faint { margin-top: -6px; }
/* Rating and streak: the two labels share a line, and so do the numbers. */
.pz-rating { display: flex; align-items: stretch; gap: 12px; }
.pz-rating > div { display: flex; flex-direction: column; justify-content: space-between; }
.pz-rating .pc-delta { align-self: center; }
.pz-rating b.display { font-size: 40px; line-height: 1; font-weight: 600; }
.pz-rating .faint { font-size: 13px; font-weight: 650; }
.pz-streak { margin-left: auto; text-align: right; }
.pz-streak b { font-size: 22px; font-weight: 700; line-height: 1; padding-bottom: 2px; }
.pz-info { display: flex; flex-direction: column; gap: 8px; }
.pz-themes { display: flex; flex-wrap: wrap; gap: 6px; }
.pz-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.pz-btns.pz-center { justify-content: center; }
.pz-small { font-size: 13px; }
.pz-rush-log { display: flex; flex-wrap: wrap; gap: 5px; }
.pz-dot { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; }
.pz-dot .icon { width: 15px; height: 15px; stroke-width: 2.6; }
.pz-dot.ok { background: color-mix(in srgb, var(--win) 22%, transparent); color: var(--win); }
.pz-dot.no { background: color-mix(in srgb, var(--loss) 22%, transparent); color: var(--loss); }
.pz-modes { display: grid; gap: 10px; }
.pz-mode { display: flex; align-items: center; gap: 12px; padding: 14px 16px; text-align: left; width: 100%; color: inherit; font: inherit; cursor: pointer; }
.pz-mode .icon { width: 26px; height: 26px; color: var(--accent-2); }
.pz-mode b { font-size: 16px; }
.pz-mode .faint { margin-left: auto; }
.pz-rush-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pz-rush-top > div:first-child { display: flex; flex-direction: column; min-width: 0; }
.pz-clock { font-size: 34px; font-weight: 700; line-height: 1.1; }
.pz-clock.low { color: var(--danger-2); animation: pz-tick 1s var(--ease) infinite; }
@keyframes pz-tick { 0%, 100% { scale: 1; } 12% { scale: 1.06; } }
.pz-score { font-size: 64px; line-height: 1; font-weight: 600; color: var(--accent-2); white-space: nowrap; }
.pz-score-of { font-size: 0.42em; font-weight: 650; color: var(--text-3); letter-spacing: 0; }
.pz-rush-end .pz-score { text-align: center; font-size: 88px; }
.pz-rush-end .pz-rush-log { justify-content: center; }
.pz-record { color: var(--accent-2); display: inline-flex; align-items: center; gap: 6px; }
.pz-run-label { font-weight: 650; color: var(--text-2); margin: -4px 0 0; }
.pz-strikes { display: flex; gap: 8px; }
.pz-strike { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--line-2); color: var(--text-3); }
.pz-strike .icon { width: 18px; height: 18px; stroke-width: 2.6; }
.pz-strike { transition: border-color var(--t-med) var(--ease), background var(--t-med) var(--ease), color var(--t-med) var(--ease); }
.pz-strike.on { border-color: var(--loss); background: var(--loss); color: #fff; }
/* From your games: one card per game, its moments as chips. */
.pz-back { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; font-size: 13.5px; min-height: 30px; }
.pz-back .icon { width: 16px; height: 16px; }
.pz-mine-head .progress { height: 6px; }
.pz-games { display: flex; flex-direction: column; gap: 10px; }
.pz-game { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease); }
.pz-game:hover { border-color: var(--line-accent); }
.pz-game-open { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 8px; }
.pz-game-open:hover .pz-game-who b { color: var(--accent-2); }
.pz-game-who { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.pz-game-who b { font-size: 15.5px; transition: color var(--t-fast); }
.pz-game-who .faint { font-size: 13px; }
.pz-chev { width: 18px; height: 18px; color: var(--text-3); flex: none; }
.pz-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pz-chip { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px 0 6px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text-2); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; transition: border-color var(--t-fast), color var(--t-fast), transform var(--t-fast) var(--ease); }
.pz-chip:hover { border-color: var(--line-accent); color: var(--text); transform: translateY(-1px); }
.pz-chip .badge-ico { flex: none; }
.pz-chip.solved { color: var(--text-3); }
.pz-tick { width: 14px; height: 14px; color: var(--win); stroke-width: 2.6; }
.pz-game-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pz-game-top { display: flex; align-items: center; gap: 12px; }
.pz-game-top .grow { flex: 1; min-width: 0; }
.pz-game-top .faint, .pz-game-top .pz-title + .faint { font-size: 13.5px; margin-top: 3px; }
.pz-moments { display: flex; flex-direction: column; }
.pz-moment { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--line); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background var(--t-fast) var(--ease); }
.pz-moment:last-child { border-bottom: 0; }
.pz-moment:hover, .pz-moment:focus-visible { background: color-mix(in srgb, var(--text) 4%, transparent); }
.pz-moment-no { font-weight: 750; font-size: 14px; }
.pz-moment-txt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; color: var(--text-2); min-width: 0; }
.pz-moment-txt b { color: var(--text); }
.pz-cls { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 650; }
.pz-cls.c-blunder { color: var(--c-blunder); }
.pz-cls.c-mistake { color: var(--c-mistake); }
.pz-cls.c-miss { color: var(--c-miss); }
.pz-cls.c-inaccuracy { color: var(--c-inaccuracy); }
.pz-moment-end { display: flex; align-items: center; gap: 8px; }
.pz-solved { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--win) 18%, transparent); color: var(--win); }
.pz-solved.pz-unsolved { background: none; } /* keeps the chips lined up */
.pz-solved .icon { width: 15px; height: 15px; stroke-width: 2.6; }
.pz-diff { gap: 4px; }
.pz-diff b { color: var(--text); font-weight: 750; }
.pz-solve-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pz-coach .coach-bubble { font-size: 14.5px; line-height: 1.45; padding: 10px 14px; }
.pz-coach .coach-bubble p { margin: 0; }
.pz-coach .coach-bubble p + p { margin-top: 6px; }
.pz-coach .coach-bubble b.pz-say { display: flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; font-size: 14px; margin-bottom: 4px; color: var(--text); }
.pz-coach .coach-bubble.c-blunder b.pz-say { color: var(--c-blunder); }
.pz-coach .coach-bubble.c-mistake b.pz-say { color: var(--c-mistake); }
.pz-coach .coach-bubble.c-miss b.pz-say { color: var(--c-miss); }
.pz-coach .coach-bubble.c-best b.pz-say { color: var(--win); }
.pz-coach .coach-bubble.c-good b.pz-say { color: var(--text); }
.pz-also { color: var(--text-3); font-size: 13.5px; }
.pz-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.pz-meta .chip { white-space: normal; height: auto; min-height: 26px; padding: 3px 10px; }
.pz-meta:empty { display: none; }
/* Themes: collections of the shipped puzzles. */
.pz-theme-group { display: flex; flex-direction: column; gap: 8px; }
.pz-group-title { font-size: 14px; font-weight: 700; color: var(--text-2); margin: 6px 2px 0; letter-spacing: 0; }
.pz-theme-list { display: flex; flex-direction: column; }
.pz-theme { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.pz-theme:last-child { border-bottom: 0; }
.pz-theme-txt { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.pz-theme-txt b { font-size: 15px; }
.pz-theme-txt .faint { font-size: 13px; }
.pz-theme-btns { display: flex; gap: 6px; flex: none; }
.pz-theme-note { margin-top: -6px; }
@media (max-width: 979px) {
  .puzzles { grid-template-columns: minmax(0, 640px); --board: 640px; padding-top: 10px; padding-bottom: calc(var(--tabbar-h) + 28px + env(safe-area-inset-bottom, 0px)); gap: 14px; }
  .pz-main { position: static; }
  /* Lists need no board on a phone or tablet: the panel comes first. */
  .puzzles.pz-browse .pz-main { display: none; }
}
@media (max-width: 767px) {
  .puzzles { padding: 6px 8px calc(var(--tabbar-h) + 28px + env(safe-area-inset-bottom, 0px)); }
  .pz-tabs { margin-bottom: -4px; }
  .pz-tabs button { padding: 0 10px; font-size: 13px; }
  .pz-tabs button .icon { display: none; }
  .pz-tab-full { display: none; }
  .pz-tab-short { display: inline; }
  .pz-score { font-size: 48px; }
  .pz-title { font-size: 18.5px; }
}
@media (max-width: 440px) {
  .pz-theme { flex-wrap: wrap; }
  .pz-theme-btns { width: 100%; }
  .pz-theme-btns .btn { flex: 1; }
  .pz-moment { grid-template-columns: 62px minmax(0, 1fr); }
  .pz-moment-end { grid-column: 2; }
  /* A game's count on its own line, then its two ways in as one even pair
     (a single "Solve it" stays beside the count). */
  .pz-game-foot.pz-two .spacer { flex-basis: 100%; height: 0; }
  .pz-game-foot.pz-two .btn { flex: 1; }
}
@media (pointer: coarse) {
  .pz-chip { height: 44px; padding: 0 12px 0 8px; }
  .pz-back { min-height: 44px; }
}

/* ----- learn ----- */
/* One page, three sections: Learn's title, the section tabs, then the
   section's line with its progress (under Openings, the games looked at).
   A lesson, an opening and a drill are pages of their own. */
.learn-head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
/* The sections are pages, so their switch is a set of links that looks like
   a segmented control (.seg), a size up: the Openings tabs sit below it.
   As in .seg, the chosen section's raised thumb is a layer of its own that
   slides from the old choice to the new one (js/motion.js); the track is
   that layer's stacking context, so the thumb passes under the labels. */
.learn-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: color-mix(in srgb, var(--text) 5%, var(--field)); border: 1px solid var(--line); isolation: isolate; }
.learn-tabs a { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; min-width: 118px; padding: 0 20px; border-radius: 9px; color: var(--text-2); font-size: 15px; font-weight: 650; text-decoration: none !important; transition: color var(--t-fast) var(--ease), scale var(--t-fast) var(--ease); }
.learn-tabs a::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14), 0 0 0 1px var(--line); opacity: 0; transition: opacity var(--t-fast) var(--ease); pointer-events: none; }
.learn-tabs.m-ink a::before { transition: none; }
.learn-tabs a:hover { color: var(--text); }
.learn-tabs a:active { scale: 0.97; }
.learn-tabs a[aria-current="page"] { color: var(--text); }
.learn-tabs a[aria-current="page"]::before { opacity: 1; }
/* By night the chosen section is raised above its track, as in .seg. */
:root:not([data-theme="light"]) .learn-tabs a::before { background: var(--surface-3); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--line-2); }
/* The section's line and its content are one panel: another section
   cross-fades it (js/motion.js swapOut, then the tab's panel fade). */
.learn-intro { display: flex; align-items: center; justify-content: space-between; gap: 14px 32px; flex-wrap: wrap; margin-bottom: 26px; }
.learn-blurb { flex: 1 1 380px; max-width: 80ch; color: var(--text-2); }
.learn-side { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; }
.learn-side:empty { display: none; }
@media (max-width: 767px) {
  .learn-head { gap: 14px; margin-bottom: 16px; }
  .learn-tabs { display: flex; width: 100%; }
  .learn-tabs a { flex: 1; min-width: 0; padding: 0 8px; }
  .learn-intro { margin-bottom: 22px; }
}
@media (pointer: coarse) { .learn-tabs a { min-height: 44px; } }
.learn-progress { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.learn-progress b { font-size: 40px; line-height: 1; color: var(--accent-2); }
.learn-progress > span { color: var(--text-2); font-size: 14px; line-height: 1.2; white-space: nowrap; }
.learn-group { margin-top: 26px; }
.learn-group:first-child { margin-top: 0; }
.learn-group-title { font-family: var(--font-display); font-size: 20px; font-weight: 750; margin-bottom: 12px; letter-spacing: -0.02em; }
.learn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
/* The cards of a row share their height: titles start on one line at the top
   and the progress bars share the bottom line, however long the blurb. */
.lesson-card { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; text-align: left; width: 100%; color: inherit; font: inherit; cursor: pointer; }
.lesson-piece { width: 52px; height: 52px; flex: none; border-radius: 12px; background: radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%), var(--surface-2); display: grid; place-items: center; }
.lesson-piece .pc { width: 44px; height: 44px; padding: 0; }
.lesson-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; align-self: stretch; }
.lesson-text b { font-size: 16px; }
.lesson-text > span { color: var(--text-2); font-size: 13.5px; }
.lesson-text > span:not(.lesson-bar) { margin-bottom: 6px; }
.lesson-bar { display: block; height: 5px; border-radius: 3px; background: var(--surface-3); overflow: hidden; margin-top: auto; }
.lesson-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-3), var(--accent-2)); }
.lesson-done { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--win); color: #fff; }
.lesson-done .icon { width: 15px; height: 15px; stroke-width: 2.6; }
.lesson-card.complete { border-color: color-mix(in srgb, var(--win) 40%, var(--line)); }
.lesson {
  --board: max(300px, min(700px, calc(100dvh - var(--topbar-h) - 90px)));
  display: grid; grid-template-columns: minmax(0, var(--board)) minmax(300px, 400px);
  gap: 24px; justify-content: center; align-items: start;
  max-width: var(--maxw); margin: 0 auto; padding: 18px var(--gutter) 40px;
}
.ls-main { min-width: 0; }
.ls-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ls-back { align-self: flex-start; }
.ls-card { display: flex; flex-direction: column; gap: 12px; padding: 18px; }
.ls-card .kicker { margin-bottom: 0; }
.ls-title { font-family: var(--font-display); font-size: 26px; font-weight: 800; line-height: 1.05; letter-spacing: -0.025em; }
.ls-steps { display: flex; gap: 6px; flex-wrap: wrap; }
.ls-dot { width: 26px; height: 8px; border-radius: 4px; border: 0; background: var(--line-2); padding: 0; cursor: pointer; }
.ls-dot.done { background: color-mix(in srgb, var(--accent) 60%, transparent); }
.ls-dot.cur { background: var(--accent-2); box-shadow: 0 0 0 2px var(--accent-glow); }
.ls-text { font-size: 16px; line-height: 1.5; }
/* A right try swells the words from their left edge, a wrong one shakes them. */
.ls-feedback { min-height: 24px; font-weight: 650; transform-origin: 0 50%; transition: color var(--t-fast) var(--ease); }
/* The board draws every star again after each move: the ones still to
   find stand still, and the one just reached bursts (board.css). */
.lesson .b-mark.star.still svg { animation: none; }
.ls-feedback.good { color: var(--win); }
.ls-feedback.bad { color: var(--danger-2); }
.ls-q { font-weight: 650; margin-bottom: 8px; }
.ls-options { display: flex; flex-direction: column; gap: 8px; }
.ls-options .btn { justify-content: flex-start; }
.ls-btns { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 979px) {
  .lesson { grid-template-columns: minmax(0, 640px); --board: 640px; padding-top: 10px; padding-bottom: calc(var(--tabbar-h) + 28px + env(safe-area-inset-bottom, 0px)); gap: 14px; }
}
@media (max-width: 767px) {
  .lesson { padding: 6px 8px calc(var(--tabbar-h) + 28px + env(safe-area-inset-bottom, 0px)); }
  .ls-title { font-size: 26px; }
}

/* ----- openings ----- */
/* The Openings section of Learn: the overview sits below Learn's title,
   section tabs and line (see learn); an opening and a drill are pages. */
/* Overview */
.op-head-side { display: flex; align-items: center; gap: 12px; }
/* One line, like the Learn page's: a big number, then what it counts. */
.op-head-side .stat { flex-direction: row; align-items: baseline; gap: 8px; }
.op-head-side .stat b { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--accent-2); }
.op-head-side .stat span { font-size: 14px; font-weight: 400; letter-spacing: 0; line-height: 1.2; color: var(--text-2); white-space: nowrap; }
.op-tabs { margin-bottom: 18px; }
.op-small { font-size: 13px; }
.op-note { display: flex; align-items: flex-start; gap: 8px; padding: 10px 14px; margin-bottom: 14px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); background: color-mix(in srgb, var(--warn) 9%, transparent); font-size: 14px; }
.op-note .icon { color: var(--warn); margin-top: 2px; }
.op-intro { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 26px; }
.op-intro-text { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.op-intro-text p { max-width: 64ch; }
.op-intro-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.op-explain { margin-top: 12px; }
.op-group-title { font-size: 20px; margin-bottom: 12px; }
.op-sub-title { font-size: 13.5px; font-weight: 700; color: var(--text-2); margin: 16px 0 8px; }
.op-group { display: flex; flex-direction: column; }
/* The title stays on one line; a long score drops whole to the next. */
.op-group-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 2px 10px; padding: 14px 16px 10px; border-bottom: 1px solid var(--line); }
.op-group-head > span { white-space: nowrap; line-height: 1.15; }
.op-group-head h2 { font-size: 18px; }
.op-group-empty { padding: 18px 16px; }
.op-list { display: flex; flex-direction: column; }
.op-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 16px; min-height: 60px; text-align: left; font: inherit; color: inherit; background: none; border: 0; border-bottom: 1px solid var(--line); transition: background var(--t-fast) var(--ease); }
.op-row:last-child { border-bottom: 0; }
button.op-row { cursor: pointer; }
button.op-row:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
button.op-row:hover .op-row-go { color: var(--accent-2); transform: translateX(2px); }
.op-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.op-row-name { font-weight: 650; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.op-row-sub { font-size: 12.5px; color: var(--text-3); }
.op-row-score { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; width: 84px; flex: none; }
.op-row-score b { font-size: 17px; font-weight: 750; line-height: 1; }
.op-row-score .op-wdl { width: 100%; }
.op-wdl { height: 7px; border-radius: 4px; }
.op-row-go { color: var(--text-3); flex: none; width: 18px; transition: transform var(--t-fast) var(--ease), color var(--t-fast); }
.op-row-plain { min-height: 52px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); margin-bottom: 6px; }
.op-row-plain:last-child { border-bottom: 1px solid var(--line); }
.op-done { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 650; color: var(--win); }
.op-done .icon { width: 14px; height: 14px; stroke-width: 2.4; }
.op-done-sm { width: 18px; height: 18px; border-radius: 50%; justify-content: center; background: color-mix(in srgb, var(--win) 16%, transparent); }
.op-done-sm .icon { width: 12px; height: 12px; }
.op-starters, .op-likely > section { margin-top: 30px; }
.op-starters:first-child, .op-likely > section:first-child { margin-top: 0; }
.op-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.op-card { display: flex; gap: 14px; padding: 14px; align-items: flex-start; }
.op-card-board { width: 108px; flex: none; }
.op-card-board .mini-board { border-radius: 6px; box-shadow: 0 0 0 1px var(--line-2); }
/* The body fills the card, so the buttons of a row of cards share a line. */
.op-card-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; align-self: stretch; }
.op-card-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-3); font-weight: 600; }
.op-card-name { font-size: 17px; font-weight: 750; letter-spacing: -0.01em; }
.op-card-idea { font-size: 13.5px; color: var(--text-2); }
.op-card-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 4px; }
.op-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; display: inline-block; }
.op-dot.w { background: #ece6d6; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); }
.op-dot.b { background: #1d1b16; box-shadow: inset 0 0 0 1px #8a836f; }
.op-filter { max-width: 420px; margin: 30px 0 4px; }
.op-all { margin-top: 12px; }
.op-all-group:first-of-type .op-sub-title { margin-top: 0; }
.op-nomatch { margin-top: 14px; }
/* One opening */
.op-detail {
  --board: max(300px, min(620px, calc(100dvh - var(--topbar-h) - 260px)));
  display: grid; grid-template-columns: minmax(0, var(--board)) minmax(320px, 440px);
  grid-template-areas: "board hero" "board side"; grid-template-rows: auto 1fr;
  gap: 16px 24px; justify-content: center; align-items: start;
  max-width: var(--maxw); margin: 0 auto; padding: 18px var(--gutter) 48px;
}
.op-hero { grid-area: hero; display: flex; flex-direction: column; gap: 12px; padding: 18px; }
.op-board-col { grid-area: board; display: flex; flex-direction: column; gap: 10px; min-width: 0; position: sticky; top: calc(var(--topbar-h) + 12px); scroll-margin-top: calc(var(--topbar-h) + 10px); }
.op-side-col { grid-area: side; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.op-back { align-self: flex-start; margin: -4px 0 0 -8px; }
.op-hero .kicker { margin-bottom: 0; }
.op-title { font-family: var(--font-display); font-size: 30px; font-weight: 800; line-height: 1.05; letter-spacing: -0.025em; }
.op-as { align-self: flex-start; }
.op-idea { font-size: 15.5px; line-height: 1.5; }
.op-hero-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.op-record { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.op-record-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.op-record-score { font-family: var(--font-display); font-size: 28px; font-weight: 800; line-height: 1; color: var(--accent-2); }
.op-record-text { font-size: 13.5px; color: var(--text-2); }
.op-record .op-wdl { height: 8px; }
.op-record-sub { font-size: 13px; color: var(--text-2); }
.op-sec { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; }
.op-sec h2 { font-size: 18px; }
.op-tips { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--text-2); }
.op-tips li::marker { color: var(--accent); }
.op-viewer { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; }
.op-viewer-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.op-viewer-head b { font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-viewer-nav { display: flex; gap: 2px; flex: none; }
.op-viewer-moves { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 3px; font-size: 14px; line-height: 1.9; }
.op-mv { background: none; border: 0; padding: 1px 5px; border-radius: 5px; font: inherit; font-weight: 650; color: var(--text-2); cursor: pointer; }
.op-mv:hover { background: var(--surface-3); color: var(--text); }
.op-mv.cur { background: var(--accent-soft); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-accent); }
.op-viewer-note { min-height: 44px; font-size: 14.5px; line-height: 1.45; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--bg-2) 60%, transparent); }
.op-viewer-note b { color: var(--accent-2); margin-right: 4px; }
.op-viewer-book { display: flex; flex-direction: column; gap: 6px; }
.op-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.op-chip { height: auto; min-height: 30px; padding: 4px 10px; cursor: pointer; font: inherit; font-size: 12.5px; white-space: normal; text-align: left; transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast); }
.op-chip b { color: var(--text); }
.op-chip span { color: var(--text-3); font-weight: 550; }
.op-chip:hover { border-color: var(--line-accent); }
.op-chip.on { border-color: var(--line-accent); background: var(--accent-soft); }
.op-viewer-acts { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.op-counters { display: flex; flex-direction: column; gap: 10px; }
.op-counter { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); }
.op-counter-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* The name, "Practised" and "More on it" share one centre line. */
.op-counter-head h3 { font-size: 15.5px; font-weight: 700; flex: 1; min-width: 0; margin-bottom: 0; }
.op-counter-head .linkish { font-size: 13.5px; white-space: nowrap; }
.op-counter p { font-size: 14px; color: var(--text-2); }
.op-counter .op-counter-line { font-size: 12.5px; color: var(--text-3); overflow-wrap: anywhere; }
.op-counter-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.op-leaks { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.op-leaks .op-sub-title { margin-top: 4px; }
.op-sec > .op-leaks:first-of-type .op-sub-title { margin-top: 6px; }
.op-leak { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); }
.op-leak-board { width: 92px; flex: none; }
.op-leak-board .mini-board { box-shadow: 0 0 0 1px var(--line-2); }
.op-leak-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 14px; }
.op-bad { color: color-mix(in srgb, var(--c-mistake) 60%, var(--text)); }
.op-leak-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.op-recent { display: flex; flex-direction: column; }
.op-recent-row { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 4px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none !important; font-size: 14px; }
.op-recent-row:last-child { border-bottom: 0; }
.op-recent-row:hover { background: color-mix(in srgb, var(--text) 4%, transparent); border-radius: 8px; }
.op-recent-row .grow { flex: 1; min-width: 0; }
.op-recent-row > .icon { color: var(--text-3); }
.op-res { font-size: 12px; font-weight: 750; padding: 2px 8px; border-radius: 999px; min-width: 46px; text-align: center; }
.op-res.w { color: var(--win); background: color-mix(in srgb, var(--win) 14%, transparent); }
.op-res.d { color: var(--text-2); background: color-mix(in srgb, var(--text) 8%, transparent); }
.op-res.l { color: var(--loss); background: color-mix(in srgb, var(--loss) 14%, transparent); }
/* Practice */
.op-drill {
  --board: max(300px, min(680px, calc(100dvh - var(--topbar-h) - 140px)));
  display: grid; grid-template-columns: minmax(0, var(--board)) minmax(320px, 420px); grid-template-areas: "board side";
  gap: 24px; justify-content: center; align-items: start;
  max-width: var(--maxw); margin: 0 auto; padding: 18px var(--gutter) 40px;
}
.op-drill .op-board-col { position: static; }
.op-goal { min-height: 46px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-weight: 650; font-size: 15.5px; transition: border-color var(--t-med) var(--ease), color var(--t-med) var(--ease); }
.op-goal::before { content: ""; width: 14px; height: 14px; border-radius: 50%; flex: none; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-2); transition: background var(--t-med) var(--ease); }
.op-goal.turn-w::before { background: #ece6d6; }
.op-goal.turn-b::before { background: #1d1b16; box-shadow: inset 0 0 0 1px #8a836f; }
.op-goal.good { border-color: color-mix(in srgb, var(--win) 55%, transparent); color: var(--win); }
.op-goal.good::before { background: var(--win); }
.op-goal.bad { border-color: color-mix(in srgb, var(--loss) 55%, transparent); color: var(--danger-2); }
.op-goal.bad::before { background: var(--loss); }
.op-goal.alt { border-color: color-mix(in srgb, var(--c-inaccuracy) 60%, transparent); color: var(--warn); }
.op-goal.alt::before { background: var(--c-inaccuracy); }
/* The moves to find: a slot found fills from its left, the next one's
   outline pops in (js/motion.js). */
.op-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 12px; padding: 0 2px; }
.op-progress i { width: 22px; height: 8px; border-radius: 4px; background: var(--line-2); }
.op-progress i.good { background: var(--win); }
.op-progress i.helped { background: var(--c-inaccuracy); }
.op-progress i.cur { background: transparent; box-shadow: inset 0 0 0 2px var(--text-2); }
.op-progress span { font-size: 13px; }
.op-drill-card { display: flex; flex-direction: column; gap: 12px; padding: 18px; }
.op-drill-card .kicker { margin-bottom: 0; }
.op-mode { align-self: flex-start; }
.op-feedback { display: flex; flex-direction: column; gap: 6px; min-height: 64px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); font-size: 14.5px; line-height: 1.45; transition: border-color var(--t-med) var(--ease); }
.op-feedback.good { border-color: color-mix(in srgb, var(--win) 45%, transparent); }
.op-feedback.bad { border-color: color-mix(in srgb, var(--loss) 50%, transparent); }
.op-feedback.alt { border-color: color-mix(in srgb, var(--c-inaccuracy) 55%, transparent); }
.op-feedback.info, .op-feedback.done { border-color: var(--line-accent); }
.op-fb-title { font-weight: 750; }
.op-feedback.good .op-fb-title { color: var(--win); }
.op-feedback.bad .op-fb-title { color: var(--danger-2); }
.op-feedback.alt .op-fb-title { color: var(--warn); }
.op-fb-reply { color: var(--text-2); font-size: 13.5px; padding-top: 6px; border-top: 1px solid var(--line); }
.op-flaw { color: var(--text-2); font-style: italic; }
.op-fb-done { padding-top: 8px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.op-fb-done .op-fb-title { color: var(--accent-2); }
.op-moves { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; font-size: 14px; line-height: 1.8; min-height: 26px; }
.op-mv-static { font-weight: 650; color: var(--text-2); padding: 0 2px; border-radius: 4px; }
.op-mv-static.good { color: var(--win); }
.op-mv-static.helped { color: var(--warn); }
.op-btns { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 979px) {
  .op-detail { grid-template-columns: minmax(0, 640px); grid-template-areas: "hero" "board" "side"; grid-template-rows: none; --board: 640px; padding-top: 10px; padding-bottom: calc(var(--tabbar-h) + 28px + env(safe-area-inset-bottom, 0px)); gap: 14px; }
  .op-board-col { position: static; }
  .op-drill { grid-template-columns: minmax(0, 640px); grid-template-areas: "board" "side"; --board: 640px; padding-top: 10px; padding-bottom: calc(var(--tabbar-h) + 28px + env(safe-area-inset-bottom, 0px)); gap: 14px; }
  /* Under the board, the explanation of your move comes first; the choice
     between this line and the book moves below the buttons. */
  .op-drill-card .op-mode, .op-drill-card .op-modehelp { order: 1; }
}
@media (max-width: 767px) {
  .op-detail, .op-drill { padding: 6px 8px calc(var(--tabbar-h) + 28px + env(safe-area-inset-bottom, 0px)); }
  .op-title { font-size: 26px; }
  .op-grid { grid-template-columns: minmax(0, 1fr); }
  .op-card-board { width: 92px; }
  .op-row { padding: 10px 12px; gap: 10px; }
  .op-row-score { width: 60px; }
  .op-row-score b { font-size: 15.5px; }
  .op-head-side { width: 100%; }
}
@media (pointer: coarse) {
  .op-mv { min-height: 44px; padding: 0 8px; }
  .op-chip { min-height: 44px; }
  /* A 44 px tap area for the link, without making its line taller. */
  .op-counter-head .linkish { position: relative; }
  .op-counter-head .linkish::after { content: ""; position: absolute; inset: -12px -8px; }
}

/* ----- admin ----- */
.admin-gate { padding-top: 48px; }
.gate-card { max-width: 480px; margin: 0 auto; padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.gate-card h1 { font-size: 38px; }
.gate-hint { font-size: 13px; margin-top: 6px; }
.admin-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 22px; align-items: start; }
/* The chosen section's highlight is a layer of its own that slides from the
   old section to the new one (js/motion.js); the menu is its stacking
   context, so the highlight passes under every label. */
.admin-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: calc(var(--topbar-h) + 14px); isolation: isolate; }
.admin-nav button { position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 10px; border: 0; background: none; color: var(--text-2); font-weight: 600; text-align: left; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), scale var(--t-fast) var(--ease); }
.admin-nav button:active { scale: 0.97; }
.admin-nav button:hover { color: var(--text); }
.admin-nav button:not([aria-selected="true"]):hover { background: var(--surface); }
.admin-nav button[aria-selected="true"] { color: var(--text); }
.admin-nav button::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); opacity: 0; transition: opacity var(--t-fast) var(--ease); pointer-events: none; }
.admin-nav button[aria-selected="true"]::before { opacity: 1; }
.admin-nav.m-ink button::before { transition: none; }
.admin-body { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
/* Where the data is saved: the first line of the dashboard and the backup
   tab. Nothing in it can be pressed; a risk (files on Replit, the database
   not answering) gets the warning colour. */
.admin-store { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; }
.admin-store > .icon { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--win); }
.admin-store > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.admin-store b { font-weight: 650; line-height: 1.4; }
.admin-store small { font-size: 13px; line-height: 1.45; }
.admin-store.warn { border-color: color-mix(in srgb, var(--warn) 55%, transparent); }
.admin-store.warn > .icon { color: var(--warn); }
/* Eight tiles: four across on a wide screen, two across below that. */
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1099px) { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat-tile { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; }
/* Nothing in a tile can be pressed, so its icon is quiet, not the accent. */
.stat-tile > .icon { width: 18px; height: 18px; color: var(--text-3); margin-top: 1px; }
.stat-tile > div { display: flex; flex-direction: column; min-width: 0; }
.stat-tile span { font-size: 12.5px; font-weight: 650; letter-spacing: 0.01em; color: var(--text-3); }
.stat-tile b { font-size: 28px; font-weight: 700; line-height: 1.15; }
.stat-tile small { font-size: 12.5px; }
.admin-steps ol { margin: 0 0 14px; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; color: var(--text-2); }
.admin-steps { padding: 18px; }
.admin-section .kicker { margin-bottom: 10px; }
.admin-list { display: flex; flex-direction: column; gap: 8px; }
.admin-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; flex-wrap: wrap; }
.admin-tools { gap: 12px; }
/* Toolbar buttons match the 44 px filters and search fields beside them. */
.admin-tools > .btn { min-height: 44px; }
.admin-search { max-width: 320px; }
.admin-card { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.admin-card h3 { font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.admin-player { display: flex; align-items: center; gap: 10px; color: inherit; }
.admin-acts { white-space: nowrap; display: flex; gap: 6px; }
/* A finished tournament's champion: the trophy in gold beside the name. */
.admin-champ { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 13px; }
.admin-champ .icon { width: 15px; height: 15px; color: var(--gold); }
.dot-online { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--win); vertical-align: 1px; }
.table tr.is-banned td { opacity: 0.6; }
.admin-menu button.danger { color: var(--danger-2); }
.log-list { list-style: none; margin: 0; padding: 0; max-height: 70dvh; overflow-y: auto; font-size: 13px; }
.log-line { display: grid; grid-template-columns: 170px 56px minmax(0, 1fr); gap: 10px; padding: 7px 14px; border-bottom: 1px solid var(--line); }
.log-lv { font-weight: 650; font-size: 12.5px; color: var(--text-3); }
.lv-warn .log-lv { color: var(--warn); }
.lv-error .log-lv { color: var(--danger-2); }
.log-msg { min-width: 0; overflow-wrap: anywhere; }
.log-msg code { color: var(--text-3); font-size: 12px; }
/* Fair play: who the checks noticed, reports, and the evidence per game */
.fp-intro .fp-engine { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--text-2); }
.fp-intro .fp-engine .icon { color: var(--win); margin-top: 1px; }
.fp-intro .fp-engine.off .icon { color: var(--warn); }
.fp-how summary, .fp-table summary, .fp-pos summary { display: flex; align-items: center; min-height: 32px; cursor: pointer; font-size: 14px; font-weight: 650; color: var(--accent-2); }
.fp-how ul { margin: 6px 0 10px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--text-2); }
.fp-how p { font-size: 14px; color: var(--text-2); }
.fp-views { align-self: flex-start; }
.fp-count { opacity: 0.7; font-variant-numeric: tabular-nums; }
.fp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fp-row { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.fp-row-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fp-row-name { display: flex; flex-direction: column; flex: 1 1 160px; min-width: 0; }
.fp-row-name b { font-weight: 700; overflow-wrap: anywhere; }
.fp-row-name .faint { font-size: 13px; }
.fp-row-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.fp-reasons { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--text-2); }
.fp-row-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.chip.fp-lv-flagged { color: var(--danger-2); border-color: color-mix(in srgb, var(--danger) 45%, transparent); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.chip.fp-lv-watch { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.chip.fp-st-warned { color: var(--info); border-color: color-mix(in srgb, var(--info) 45%, transparent); }
/* The score: a thin meter from 0 to 100, cut at 30 (worth a look) and 60 (flagged). */
.fp-meter { --fp-m: var(--text-3); display: flex; align-items: center; gap: 12px; }
.fp-meter.lv-watch { --fp-m: var(--warn); }
.fp-meter.lv-flagged { --fp-m: var(--danger); }
.fp-meter-track { position: relative; flex: 1; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--fp-m) 16%, var(--surface-3)); }
.fp-meter-track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--fp-m); }
.fp-mark { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: var(--surface); }
.fp-meter-num { font-size: 13px; white-space: nowrap; }
.fp-meter-num b { font-size: 16px; font-weight: 750; }
.fp-head-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.fp-head-name { display: flex; flex-direction: column; gap: 4px; flex: 1 1 200px; min-width: 0; }
.fp-head-name h3 { margin: 0; font-size: 22px; overflow-wrap: anywhere; }
.fp-basis { font-size: 13px; }
.fp-warned { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; font-size: 14px; color: var(--text-2); background: color-mix(in srgb, var(--info) 8%, transparent); border: 1px solid color-mix(in srgb, var(--info) 25%, transparent); }
.fp-warned .icon { color: var(--info); margin-top: 1px; }
.fp-acts { gap: 8px; }
.fp-void-hint { font-size: 13px; margin-top: -6px; }
.fp-why { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fp-why li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; }
.fp-pts { flex: none; min-width: 44px; padding: 2px 8px; border-radius: 999px; text-align: center; font-size: 12.5px; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--text); background: color-mix(in srgb, var(--warn) 16%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); }
.fp-pts.zero { color: var(--text-3); background: none; border-color: var(--line-2); font-weight: 650; }
.fp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; }
@media (max-width: 520px) { .fp-tiles > .fp-tile:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.fp-tile { position: relative; padding: 14px; display: flex; flex-direction: column; gap: 2px; }
.fp-tile.adds { border-color: color-mix(in srgb, var(--warn) 35%, var(--line)); }
.fp-tile-label { font-size: 12.5px; font-weight: 650; color: var(--text-3); padding-right: 44px; }
.fp-tile-value { font-size: 24px; font-weight: 750; letter-spacing: -0.02em; line-height: 1.15; }
.fp-tile-sub { font-size: 12.5px; }
.fp-tile .fp-pts { position: absolute; top: 12px; right: 12px; min-width: 0; }
.fp-games .kicker { margin-bottom: 10px; }
.fp-game { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.fp-game.is-out { opacity: 0.75; }
.fp-game-top { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.fp-pick { min-height: 24px; margin-top: 1px; }
.fp-game-title { flex: 1 1 200px; min-width: 0; }
.fp-game-sub { font-size: 13px; margin-top: 2px; }
.fp-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px 18px; margin: 0; }
.fp-metrics div { min-width: 0; }
.fp-metrics dt { font-size: 12.5px; font-weight: 650; color: var(--text-3); }
.fp-metrics dd { margin: 2px 0 0; font-size: 14px; }
.fp-game-acts { gap: 6px; }
.fp-quote { margin: 0; padding: 8px 12px; border-left: 3px solid var(--line-2); border-radius: 0 8px 8px 0; font-size: 14px; color: var(--text-2); background: color-mix(in srgb, var(--text) 3%, transparent); overflow-wrap: anywhere; }
.fp-rep-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; flex: none; color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.fp-rep-game { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
.fp-plain { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.fp-plain li { display: flex; flex-direction: column; gap: 4px; }
.fp-pos ol { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.fp-pos li { display: flex; gap: 10px; }
.fp-pos li > .num { min-width: 62px; flex: none; }
.fp-same { font-weight: 650; color: var(--text); }
.fp-void-list { margin: 8px 0 0; padding-left: 18px; }
.fp-form .muted p + ul { color: var(--text); }
/* The thinking-time chart: one column per move. Two hues, validated for
   colour-blind readers in both themes; not-counted moves are grey; a dot in
   ink marks a move where the player left the page. */
.fp-think { --fp-bar: #3987e5; --fp-easy: #d95926; display: flex; flex-direction: column; gap: 8px; }
:root[data-theme="light"] .fp-think { --fp-bar: #2a78d6; --fp-easy: #eb6834; }
.fp-think-head { font-size: 14px; }
.fp-think-head .faint { display: block; margin-top: 2px; font-size: 13px; }
.fpc-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--text-2); }
.fpc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.fpc-legend .sw { width: 10px; height: 10px; border-radius: 2px; background: var(--fp-bar); flex: none; }
.fpc-legend .sw.easy { background: var(--fp-easy); }
.fpc-legend .sw.off { background: color-mix(in srgb, var(--text-3) 45%, transparent); }
.fpc-legend .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--text); box-shadow: 0 0 0 2px var(--surface); }
.fp-chart { position: relative; min-height: 136px; }
.fpc { display: block; overflow: visible; touch-action: pan-y; }
.fpc-grid { stroke: var(--line-2); stroke-width: 1; shape-rendering: crispEdges; }
.fpc-tick { fill: var(--text-3); font-family: var(--font-ui); font-size: 11px; font-variant-numeric: tabular-nums; }
.fpc-bar { transform-box: fill-box; transform-origin: 50% 100%; }
.fpc-bar.on { fill: var(--fp-bar); }
.fpc-bar.easy { fill: var(--fp-easy); }
.fpc-bar.off { fill: color-mix(in srgb, var(--text-3) 45%, transparent); }
.fpc-bar.hot { filter: brightness(1.2); }
.fpc-cut { fill: var(--surface); }
.fpc-away { fill: var(--text); stroke: var(--surface); stroke-width: 2; }
.fpc-hit { fill: transparent; }
.fpc-tip { position: absolute; z-index: 5; display: flex; flex-direction: column; gap: 1px; padding: 7px 10px; border-radius: 8px; pointer-events: none; white-space: nowrap; font-size: 12.5px; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--line-2); box-shadow: var(--shadow-2); }
.fpc-tip b { font-size: 14px; color: var(--text); }
.fp-table .table-wrap { max-height: 280px; overflow-y: auto; margin-top: 6px; }
.fp-table .table td, .fp-table .table th { padding: 7px 12px; }
@media (max-width: 899px) {
  .admin-layout { grid-template-columns: 1fr; }
  /* The section menu becomes a strip that runs to the screen edges; labels
     cut off at either end fade out in the page margin, so it reads as
     scrollable. The chosen section's underline sits on the strip's line. */
  .admin-nav {
    position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line);
    padding-bottom: 0; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
  }
  .admin-nav::-webkit-scrollbar { display: none; }
  .admin-nav button { flex: none; }
  .admin-nav button[aria-selected="true"] { border-radius: 10px 10px 0 0; }
  .admin-nav button::before { box-shadow: inset 0 -2px 0 var(--accent); }
  .log-line { grid-template-columns: 1fr; gap: 2px; }
}
/* Phones: the tables keep the columns needed to act, so the action buttons
   stay in view without scrolling sideways. */
@media (max-width: 520px) {
  .admin-body .hide-sm { display: none; }
  .admin-table th, .admin-table td { padding-left: 8px; padding-right: 8px; }
  .stat-tile { flex-direction: column; gap: 6px; padding: 12px 14px; }
  .stat-tile > .icon { margin-top: 0; }
}

/* ----- profile ----- */
.prof-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.prof-head .avatar-lg { box-shadow: 0 0 0 3px var(--line-accent); }
/* The buttons drop to a line of their own before the name gets narrow. */
.prof-id { flex: 1 1 260px; min-width: 0; }
.prof-id h1 { font-size: clamp(34px, 5vw, 52px); line-height: 1.05; overflow-wrap: anywhere; }
.prof-id p { margin-top: 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.prof-now { padding: 12px 16px; margin-bottom: 16px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.prof-now b { display: inline-flex; align-items: center; gap: 6px; }
.prof-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.prof-rating, .prof-side, .prof-stats { padding: 18px; }
.prof-big { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.prof-big b { font-size: 56px; font-weight: 600; line-height: 1; color: var(--accent-2); }
.prof-small { font-size: 13px; margin-top: 6px; }
.rating-graph { display: block; width: 100%; height: auto; margin-top: 12px; }
.rg-grid { stroke: var(--line); stroke-dasharray: 3 4; }
.rg-label { fill: var(--text-3); font-size: 12px; font-family: var(--font-ui); }
.rg-area { fill: color-mix(in srgb, var(--accent) 14%, transparent); }
.rg-line { fill: none; stroke: var(--accent-2); stroke-width: 2.4; stroke-linejoin: round; }
.rg-dot { fill: var(--accent-2); }
.rg-adj { fill: var(--c-brilliant); }
.rg-place { fill: var(--bg); stroke: var(--accent-2); stroke-width: 2.5; }
.prof-avg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.prof-avg > div { display: flex; flex-direction: column; padding: 10px; border-radius: 12px; background: var(--surface-2); }
.prof-avg b { font-size: 26px; font-weight: 600; line-height: 1.1; }
.prof-avg span { font-size: 12px; color: var(--text-3); }
.trophies { display: flex; flex-direction: column; gap: 8px; }
.trophy { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); color: inherit; }
.trophy > .icon { width: 26px; height: 26px; }
.trophy span { display: flex; flex-direction: column; min-width: 0; }
.trophy.t1 > .icon { color: #e8c34f; }
.trophy.t2 > .icon { color: #c9cdd2; }
.trophy.t3 > .icon { color: #c98a52; }
.prof-stats { margin-bottom: 16px; display: flex; flex-direction: column; gap: 12px; }
.wdl-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--surface-3); }
.wdl-bar i, .wdl-legend i { display: block; }
.wdl-bar .w, .wdl-legend .w { background: var(--win); }
.wdl-bar .d, .wdl-legend .d { background: var(--text-3); }
.wdl-bar .l, .wdl-legend .l { background: var(--loss); }
.wdl-legend { display: flex; gap: 16px; font-size: 13.5px; color: var(--text-2); }
.wdl-legend span { display: inline-flex; align-items: center; gap: 6px; }
.wdl-legend i { width: 10px; height: 10px; border-radius: 3px; }
.prof-games .kicker { margin-bottom: 10px; }
.game-archive .arch-row { padding: 10px 14px; gap: 10px; flex-wrap: wrap; }
.arch-color { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.arch-color.w { background: #ece6d6; box-shadow: inset 0 0 0 1px rgba(20, 20, 16, 0.28); }
.arch-color.b { background: #1d1b16; box-shadow: inset 0 0 0 1px #8a836f; }
.arch-main { min-width: 180px; }
.arch-meta { font-size: 12.5px; margin-top: 2px; }
.arch-badge { display: inline-flex; vertical-align: -3px; margin-left: 6px; color: var(--gold); }
.arch-badge .icon { width: 16px; height: 16px; }
.arch-badge.slam { color: var(--danger-2); }
.arch-acc { font-size: 13px; color: var(--text-2); }
.arch-acc b { color: var(--text); font-size: 15px; }
.pc-delta small { font-size: 10.5px; margin-left: 3px; color: var(--c-brilliant); }
.arch-acts { display: flex; gap: 6px; }
@media (max-width: 899px) { .prof-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .prof-avg { grid-template-columns: 1fr 1fr; }
  .prof-avg > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .prof-big b { font-size: 44px; }
  .arch-acts { width: 100%; justify-content: flex-end; }
  .arch-main .ellipsis { white-space: normal; }
  .prof-head .avatar-lg { width: 56px; height: 56px; font-size: 20px; }
  .prof-acts { width: 100%; }
  .prof-acts .btn { flex: 1 1 auto; }
  /* The results table fits the card, Score column included. */
  .prof-stats .table th, .prof-stats .table td { padding-left: 7px; padding-right: 7px; }
  .prof-stats .table th:first-child, .prof-stats .table td:first-child { padding-left: 12px; }
  .prof-stats .table th:last-child, .prof-stats .table td:last-child { padding-right: 12px; }
}

/* ----- leaderboard -----
   Medals are the only colour beyond the accent: gold, silver and bronze for
   the top three, with dark figures on them in both themes. */
/* A narrower column than other pages, so a name and its numbers stay close
   enough to read across. */
.leaderboard { max-width: 1040px; --medal-1: var(--gold); --medal-2: #c4c9cf; --medal-3: #c98a52; --medal-ink: #1b1608; }
:root[data-theme="light"] .leaderboard { --medal-1: #c4901f; --medal-2: #a3abb2; --medal-3: #bd7f43; }
.lb-tabs { margin-bottom: 12px; }
.lb-tabs button { display: inline-flex; align-items: center; gap: 7px; }
.lb-tabs button .icon { width: 17px; height: 17px; }
.lb-note { font-size: 13.5px; margin-bottom: 14px; max-width: 78ch; }
/* Your card, pinned at the top of every board: who you are, then your
   place and numbers (or how to get on the board), then the button. */
.lb-you { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "id stats btn"; align-items: center; gap: 14px 28px; padding: 16px 20px; margin-bottom: 26px; border-color: var(--line-accent); background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--surface); }
.lb-you.is-off { grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto; }
.lb-you > .btn { grid-area: btn; }
.lb-you-id { grid-area: id; display: flex; align-items: center; gap: 14px; min-width: 0; }
.lb-you-id .avatar-lg { width: 56px; height: 56px; font-size: 20px; box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--line-accent); }
.lb-anon { background: var(--surface-3); color: var(--text-3); }
.lb-anon .icon { width: 26px; height: 26px; }
.lb-you-name { min-width: 0; }
.lb-you-title { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 18px; font-weight: 750; letter-spacing: -0.01em; line-height: 1.25; }
.lb-you-title b { min-width: 0; }
.lb-you-title .chip { height: 22px; padding: 0 8px; font-size: 11.5px; flex: none; }
.lb-you-who { font-size: 13px; margin-top: 2px; }
.lb-you-stats { grid-area: stats; display: flex; margin: 0; }
.lb-you-stats > div { min-width: 84px; padding: 0 18px; border-left: 1px solid var(--line-2); }
.lb-you-stats > div:first-child { border-left: 0; padding-left: 0; }
.lb-you-stats dt { font-size: 12.5px; font-weight: 650; color: var(--text-3); }
.lb-you-stats dd { margin: 2px 0 0; display: flex; flex-direction: column; }
.lb-you-stats dd .num { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; white-space: nowrap; }
.lb-you-stats dd small { font-size: 12.5px; font-weight: 600; color: var(--text-3); white-space: nowrap; }
.lb-you-cta { grid-area: stats; min-width: 0; padding-left: 22px; border-left: 1px solid var(--line-2); }
.lb-you-msg { font-weight: 700; font-size: 15.5px; line-height: 1.3; }
.lb-you-cta .faint { font-size: 13.5px; margin-top: 3px; }
/* The podium: first in the middle and highest, a step each for second and third. */
.lb-podium { list-style: none; margin: 0 auto 18px; padding: 0; max-width: 620px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 0 12px; border-bottom: 1px solid var(--line-2); }
.lb-step { grid-row: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; --medal: var(--medal-3); }
.lb-pos1 { grid-column: 2; }
.lb-pos2 { grid-column: 1; }
.lb-pos3 { grid-column: 3; }
.lb-place1 { --medal: var(--medal-1); }
.lb-place2 { --medal: var(--medal-2); }
.lb-step-who { display: flex; flex-direction: column; align-items: center; gap: 9px; max-width: 100%; color: var(--text); text-decoration: none !important; }
.lb-step-face { position: relative; }
.lb-step .avatar { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--medal); transition: transform var(--t-med) var(--spring); }
.lb-step-who:hover .avatar { transform: translateY(-3px); }
.lb-place1 .avatar { width: 84px; height: 84px; font-size: 30px; }
.lb-medal { position: absolute; right: -6px; bottom: -4px; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; background: var(--medal); color: var(--medal-ink); font-size: 13px; font-weight: 800; box-shadow: 0 0 0 3px var(--bg); }
.lb-step-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 700; }
.lb-step-who:hover .lb-step-name { text-decoration: underline; text-underline-offset: 3px; }
.lb-step.is-me .lb-step-name { color: var(--accent-2); }
.lb-step-stat { margin-top: 2px; font-size: 13px; color: var(--text-2); white-space: nowrap; }
.lb-step-stat b { font-size: 15px; color: var(--text); }
.lb-plinth { transform-origin: 50% 100%; width: 100%; height: 44px; margin-top: 12px; border: 1px solid color-mix(in srgb, var(--medal) 38%, transparent); border-bottom: 0; border-radius: 10px 10px 0 0; background: linear-gradient(180deg, color-mix(in srgb, var(--medal) 24%, transparent), color-mix(in srgb, var(--medal) 4%, transparent)); }
.lb-place1 .lb-plinth { height: 76px; }
.lb-place2 .lb-plinth { height: 58px; }
.lb-also { margin: -8px 0 16px; text-align: center; font-size: 13px; }
/* The table: place, player, then the board's numbers; the ranking column in bold. */
.lb-table td.lb-place, .lb-table th.lb-place { width: 56px; text-align: center; }
.lb-rank { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 999px; font-weight: 700; color: var(--text-2); }
.lb-rank.lb-r1, .lb-rank.lb-r2, .lb-rank.lb-r3 { color: var(--medal-ink); }
.lb-rank.lb-r1 { background: var(--medal-1); }
.lb-rank.lb-r2 { background: var(--medal-2); }
.lb-rank.lb-r3 { background: var(--medal-3); }
.lb-table td.lb-player { width: 100%; max-width: 1px; }
.lb-table td.num, .lb-table th.num { white-space: nowrap; }
.lb-table td.lb-text { white-space: nowrap; }
.lb-who { display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit; text-decoration: none !important; }
.lb-who:hover b { text-decoration: underline; text-underline-offset: 3px; }
.lb-name { display: flex; flex-direction: column; min-width: 0; }
.lb-name-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.lb-name-line b { min-width: 0; font-weight: 650; }
.lb-name-line .tag-guest, .lb-name-line .chip { flex: none; }
.lb-name-line .chip { height: 20px; padding: 0 7px; font-size: 11px; }
.lb-sub { display: none; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-table th.is-sort { color: var(--text); }
.lb-table td.is-sort b { font-size: 15px; font-weight: 750; }
.lb-table tr.is-me td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.lb-table tr[data-me]:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.lb-table tr.lb-gap td { padding: 7px 12px; text-align: center; font-size: 12.5px; color: var(--text-3); background: color-mix(in srgb, var(--text) 2.5%, var(--surface)); }
.lb-dots::before { content: "\00B7\00a0\00B7\00a0\00B7"; margin: 0 10px; }
@keyframes lb-flash { from { background: color-mix(in srgb, var(--accent) 36%, var(--surface)); } to { background: var(--accent-soft); } }
.lb-table tr.lb-flash td { animation: lb-flash 1.8s var(--ease) both; }
.lb-foot { margin-top: 10px; font-size: 13px; text-align: center; }
@media (max-width: 899px) {
  .lb-you, .lb-you.is-off { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id id" "stats btn"; gap: 14px 20px; }
  .lb-you-id { padding-bottom: 14px; border-bottom: 1px solid var(--line-2); }
  .lb-you-cta { padding-left: 0; border-left: 0; }
}
@media (pointer: coarse) { .lb-who { min-height: 44px; } }
@media (max-width: 599px) {
  /* The tabs scroll sideways from screen edge to screen edge, so a cut-off
     tab reads as more to scroll to, not as clipped. */
  .lb-tabs { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
  .lb-you, .lb-you.is-off { grid-template-columns: minmax(0, 1fr); grid-template-areas: "id" "stats" "btn"; padding: 14px; margin-bottom: 22px; }
  .lb-you-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lb-you-stats > div { min-width: 0; padding: 0 10px; }
  .lb-you-stats dd .num { font-size: 22px; }
  .lb-you > .btn { justify-self: stretch; }
  .lb-podium { gap: 0 8px; }
  .lb-step .avatar { width: 56px; height: 56px; font-size: 20px; }
  .lb-place1 .avatar { width: 66px; height: 66px; font-size: 24px; }
  .lb-step-name { font-size: 14px; }
  .lb-step-stat { font-size: 12.5px; }
  .lb-plinth { height: 30px; }
  .lb-place1 .lb-plinth { height: 54px; }
  .lb-place2 .lb-plinth { height: 42px; }
  .lb-wide { display: none; }
  .lb-sub { display: block; }
  .lb-name-line .tag-guest { display: none; }
  .lb-table th, .lb-table td { padding: 10px 8px; }
  .lb-table td.lb-place, .lb-table th.lb-place { width: 30px; padding-left: 8px; padding-right: 2px; }
  .lb-table .avatar-sm { width: 26px; height: 26px; font-size: 11px; }
  .lb-who { gap: 8px; }
}

/* ----- game history ----- */
.hist-head { align-items: flex-start; }
.hist-intro { flex: 1 1 420px; min-width: 0; }
.hist-guest { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; font-size: 13.5px; color: var(--text-2); }
.hist-guest .icon { width: 16px; height: 16px; margin-top: 2px; color: var(--text-3); flex: none; }
.hist-me { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; min-height: 44px; padding: 5px 16px 5px 5px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); text-decoration: none !important; box-shadow: var(--shadow-1); transition: border-color var(--t-fast), transform var(--t-fast) var(--ease); }
.hist-me:hover { border-color: var(--line-accent); transform: translateY(-1px); }
.hist-me > span:last-child { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.hist-me b { font-size: 14px; font-weight: 650; }
.hist-me .faint { font-size: 12.5px; font-weight: 600; }
.hist-empty-acts { justify-content: center; }
.history .empty .btn .icon { width: 18px; height: 18px; margin: 0; opacity: 1; }
.hist-summary { padding: 16px 18px 18px; margin-bottom: 16px; }
.hist-summary .kicker { margin-bottom: 12px; }
.hist-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.hist-stat { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; min-width: 0; min-height: 68px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: inherit; text-align: left; }
button.hist-stat { cursor: pointer; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
button.hist-stat:hover { border-color: var(--line-2); transform: translateY(-1px); }
button.hist-stat:active { transform: none; }
.hist-stat[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.hist-stat b { font-family: var(--font-display); font-size: 27px; font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; }
.hist-stat span { font-size: 12.5px; font-weight: 650; color: var(--text-3); }
.hist-stat.is-win b { color: var(--win); }
.hist-stat.is-loss b { color: var(--loss); }
.hist-stat.is-draw b { color: var(--draw); }
/* Win rate is a figure, not a filter: an unfilled tile with a solid edge. */
.hist-stat.is-rate { background: transparent; border-style: solid; }
.hist-summary .wdl-bar { height: 8px; margin-top: 14px; }
.hist-tools { display: grid; grid-template-columns: minmax(220px, 1.7fr) repeat(3, minmax(124px, 1fr)); gap: 10px 12px; align-items: end; margin-bottom: 6px; }
.hist-selects { display: contents; }
.hist-filter-btn { display: none; }
.hist-fcount { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 750; }
.hist-fcount:empty { display: none; }
.hist-tools .field > span { font-size: 12.5px; }
.hist-tools .select { padding-right: 30px; background-position: right 11px center; }
.hist-count { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; min-height: 40px; font-size: 13.5px; color: var(--text-3); }
/* One grid for the column labels and every row, so they line up like a table. */
.hist-box { --hist-cols: 112px minmax(0, 1.1fr) minmax(0, 1.5fr) 72px 84px 76px 82px 18px; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); box-shadow: var(--shadow-1); overflow: hidden; }
.hist-cols { display: grid; grid-template-columns: var(--hist-cols); gap: 0 14px; padding: 9px 16px 9px 19px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--text) 3%, var(--surface)); font-size: 12.5px; font-weight: 650; color: var(--text-3); white-space: nowrap; }
.hist-cols span:nth-child(n+4):nth-child(-n+7) { text-align: right; }
.hist-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; transition: opacity var(--t-med) var(--ease); }
.hist-list.is-loading { opacity: 0.55; pointer-events: none; }
.hist-skel { padding: 10px 14px; border-bottom: 1px solid var(--line); }
.hist-skel .skel { height: 46px; }
.hist-row { border-bottom: 1px solid var(--line); box-shadow: inset 3px 0 0 var(--row-mark, transparent); transition: background var(--t-fast) var(--ease); }
.hist-row:last-child { border-bottom: 0; }
.hist-row.r-win { --row-mark: var(--win); }
.hist-row.r-loss { --row-mark: var(--loss); }
.hist-row.r-draw { --row-mark: var(--draw); }
.hist-row.is-open { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.hist-main {
  width: 100%; min-height: 66px; margin: 0; padding: 10px 16px 10px 19px;
  display: grid; grid-template-columns: var(--hist-cols);
  grid-template-areas: "res opp game acc gr delta when chev"; gap: 0 14px; align-items: center;
  border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.hist-main:hover { background: color-mix(in srgb, var(--text) 3.5%, transparent); }
.hist-main:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; border-radius: 4px; }
.hist-main small { display: block; font-size: 12.5px; font-weight: 550; line-height: 1.35; color: var(--text-3); }
.h-res { grid-area: res; display: flex; flex-direction: column; min-width: 0; }
.h-res b { font-size: 15px; font-weight: 750; letter-spacing: -0.005em; }
.r-win .h-res b { color: var(--win); }
.r-loss .h-res b { color: var(--loss); }
.r-draw .h-res b { color: var(--text-2); }
.h-opp { grid-area: opp; display: flex; align-items: center; gap: 10px; min-width: 0; }
.h-who { display: flex; flex-direction: column; min-width: 0; }
.h-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.h-name b { min-width: 0; font-weight: 650; }
.h-rating { flex: none; font-size: 13px; font-weight: 600; color: var(--text-3); }
.h-name .tag-bot { flex: none; }
.hist-main .h-side { display: flex; align-items: center; gap: 6px; min-width: 0; }
.h-side .ellipsis { min-width: 0; }
.side-sq { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 3px; }
.side-sq.w { background: #ece6d6; box-shadow: inset 0 0 0 1px rgba(20, 20, 16, 0.28); }
.side-sq.b { background: #1d1b16; box-shadow: inset 0 0 0 1px #8a836f; }
.h-game { grid-area: game; display: flex; flex-direction: column; min-width: 0; }
.h-opening { font-size: 14px; font-weight: 600; }
.hist-main .h-game small { display: flex; align-items: center; gap: 5px; min-width: 0; }
.h-game small .icon { width: 14px; height: 14px; flex: none; }
.h-stats { display: contents; }
.h-acc { grid-area: acc; }
.h-gr { grid-area: gr; }
.h-acc, .h-gr { display: flex; flex-direction: column; align-items: flex-end; text-align: right; white-space: nowrap; }
.h-acc b, .h-gr b { font-size: 15px; font-weight: 700; }
.hist-main .h-acc small, .hist-main .h-gr small { display: none; }
.h-acc.none b, .h-gr.none b { font-weight: 500; color: var(--text-3); }
.h-delta { grid-area: delta; display: flex; justify-content: flex-end; }
.h-delta .pc-delta { font-size: 14px; }
.h-place { font-size: 11.5px; font-weight: 650; color: var(--text-3); border: 1px solid var(--line-2); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.h-when { grid-area: when; display: flex; flex-direction: column; align-items: flex-end; text-align: right; white-space: nowrap; }
.h-when b { font-size: 13.5px; font-weight: 650; }
.h-chev { grid-area: chev; display: flex; justify-content: flex-end; color: var(--text-3); }
.h-chev .icon { width: 18px; height: 18px; transition: transform var(--t-med) var(--ease); }
.hist-row.is-open .h-chev .icon { transform: rotate(180deg); color: var(--text); }
.hist-detail { padding: 0 16px 16px 19px; animation: rise-in var(--t-med) var(--ease) both; }
.hd-in { display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 20px; padding: 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); }
.hd-board { display: block; align-self: start; border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 1px var(--line-2), var(--shadow-1); transition: transform var(--t-med) var(--ease); }
.hd-board:hover { transform: translateY(-2px); }
.hd-board .mini-board { border-radius: 0; }
.hd-board-skel { display: block; aspect-ratio: 1; border-radius: 0; }
.hd-info { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.hd-story { font-size: 16px; font-weight: 650; line-height: 1.35; }
.hd-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 7px 18px; margin: 0; font-size: 14px; }
.hd-facts > div { display: contents; }
.hd-facts dt { padding-top: 1px; font-size: 13px; font-weight: 600; color: var(--text-3); }
.hd-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.hd-facts dd small { display: block; margin-top: 2px; font-size: 12.5px; }
.hd-line { font-family: inherit; font-variant-numeric: tabular-nums; color: var(--text-3); }
.hd-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.hist-more { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 16px; }
.hist-more:empty { display: none; }
.hist-more > .empty { align-self: stretch; }
.hist-sentinel { width: 100%; height: 1px; }
.hist-end { font-size: 13px; }
.hist-error { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; padding: 12px 16px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); color: var(--text-2); }
/* The profile's "All games" link and the game-over card's "Your games". */
.prof-games-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.prof-games-head .kicker { margin: 0; }
.over-history { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; margin-top: 10px; font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.over-history:hover { color: var(--text); }
.over-history .icon { width: 16px; height: 16px; }
@media (max-width: 1099px) {
  .hist-cols { display: none; }
  /* Two lines per row: every column starts on the first line's top. */
  .hist-main { grid-template-columns: 104px minmax(0, 1fr) minmax(0, 1.3fr) 76px 18px; grid-template-areas: "res opp game when chev" "res stats stats when chev"; row-gap: 6px; align-items: start; }
  .h-chev { align-self: center; }
  .hd-in { grid-template-columns: 184px minmax(0, 1fr); }
  .h-stats { grid-area: stats; display: flex; align-items: baseline; gap: 14px; min-width: 0; }
  .hist-row:not(.has-stats) .h-stats { display: none; }
  .h-acc, .h-gr { flex-direction: row; align-items: baseline; gap: 5px; }
  .hist-main .h-acc small, .hist-main .h-gr small { display: block; }
  .h-acc.none, .h-gr.none { display: none; }
  .h-acc b, .h-gr b { font-size: 14px; }
  .h-delta { justify-content: flex-start; }
}
/* The second line starts under the name, not under the avatar (30 px avatar
   and its 10 px gap). */
@media (min-width: 768px) and (max-width: 1099px) { .h-stats { padding-left: 40px; } }
@media (max-width: 767px) {
  .hist-tools { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .hist-filter-btn { display: inline-flex; padding: 0 14px; min-height: 44px; }
  .hist-filter-btn[aria-expanded="true"] { border-color: var(--accent); }
  .hist-selects { display: none; grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .hist-tools.show-filters .hist-selects { display: grid; animation: rise-in var(--t-med) var(--ease) both; }
  .hist-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .hist-stat { min-height: 60px; padding: 8px 10px; }
  .hist-stat b { font-size: 23px; }
  .hist-stat.is-rate { grid-column: 1 / -1; flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 8px; min-height: 0; padding: 7px 10px; }
  .hist-stat.is-rate b { font-size: 17px; }
  .hist-main { grid-template-columns: minmax(0, 1fr) auto 18px; grid-template-areas: "opp res chev" "game when chev" "stats stats stats"; gap: 6px 10px; padding: 12px 12px 12px 15px; }
  .h-res { align-items: flex-end; text-align: right; }
  .h-res small { max-width: 132px; }
  .h-stats { padding-top: 2px; }
  .hist-detail { padding: 0 12px 12px 15px; }
  .hd-in { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 12px; }
  .hd-board { width: min(260px, 100%); justify-self: center; }
  .hd-facts { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .hd-facts dd { margin-bottom: 8px; }
  .hd-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 459px) {
  /* Three selects side by side would cut "Tournament" and "Classical" short. */
  .hist-selects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hist-selects .field:last-child { grid-column: 1 / -1; }
}
@media (max-width: 380px) {
  .hist-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (pointer: coarse) { .over-history { min-height: 44px; } }
@media (pointer: coarse) {
  .an-ev { height: 40px; min-width: 64px; }
  .an-pv { line-height: 40px; max-height: 80px; }
  .pv-mv { padding: 0 6px; }
}
.t-noacct { display: flex; align-items: flex-start; gap: 6px; font-size: 13.5px; color: var(--text-2); }
.t-noacct .icon { color: var(--win); width: 16px; height: 16px; flex: none; margin-top: 2px; }

/* seeds: everyone from the top seed down */
.seeds-access { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; margin-bottom: 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font-size: 14px; }
.seeds-access > .icon { color: var(--accent-2); width: 18px; height: 18px; flex: none; }
.seeds-access > span { flex: 1; min-width: 200px; }
.seeds-note { margin-bottom: 10px; font-size: 13.5px; }
.seeds-ends { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.seeds-end { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; min-height: 56px; padding: 8px 12px; text-align: left; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); cursor: pointer; }
.seeds-end:hover { border-color: var(--line-accent); }
.seeds-end .kicker { margin: 0; font-size: 10.5px; }
.seeds-end > span { max-width: 100%; }
.se-name { font-size: 16px; font-weight: 650; }
.se-pos { font-size: 12.5px; }
.seeds-tools { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin-bottom: 10px; }
.seeds-q { flex: 1; min-width: 180px; max-width: 320px; }
.seeds-empty { padding: 18px; border: 1px dashed var(--line-2); border-radius: 12px; color: var(--text-2); }
.seeds-legend { margin-top: 10px; font-size: 12.5px; }
.seed-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.seed-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface); }
.seed-row:last-child { border-bottom: 0; }
.seed-row.is-me { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.seed-row.is-focus { box-shadow: inset 3px 0 0 var(--accent); }
.seed-row.is-gone { background: color-mix(in srgb, var(--bg-2) 55%, var(--surface)); }
.seed-row.is-gone .sn-text { color: var(--text-2); }
.seed-num { width: 44px; height: 44px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--surface-2); border: 1px solid var(--line-2); line-height: 1; }
.seed-num span { font-family: var(--font-display); font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.seed-num small { font-size: 10px; font-weight: 650; color: var(--text-3); margin-top: 2px; }
.seed-num.top { border-color: color-mix(in srgb, var(--gold-2) 70%, transparent); background: var(--gold-soft); }
.seed-num.top span, .seed-num.top small { color: var(--gold); }
/* No elim seed: an open outline with a quiet dash, not an empty field. */
.seed-row.st-nobreak .seed-num { background: transparent; border-style: dashed; }
.seed-row.st-nobreak .seed-num span { font-size: 15px; font-weight: 650; color: var(--text-3); }
.seed-main { display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0; min-height: 56px; padding: 6px 8px; margin: 0; border: 0; border-radius: 10px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.seed-main:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.seed-main:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.seed-name { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 650; font-size: 15px; }
.seed-name .ellipsis { min-width: 0; }
.seed-rating { margin-left: auto; font-size: 13px; font-weight: 600; padding-left: 8px; }
/* Fair play: the small flag only the director sees */
.fp-flag { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; flex: none; color: var(--danger-2); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.fp-flag .icon { width: 14px; height: 14px; }
.seed-status { display: flex; align-items: flex-start; gap: 6px; font-size: 14px; color: var(--text-2); line-height: 1.35; }
.seed-status > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.seed-status .icon { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--text-3); }
.seed-status .medal-dot { width: 18px; height: 18px; font-size: 10px; flex: none; }
.st-champion .seed-status, .st-champion .seed-status .icon { color: var(--gold); font-weight: 700; }
.st-playing .seed-status { color: var(--text); font-weight: 650; }
.st-through .seed-status .icon, .st-starting .seed-status .icon, .st-final .seed-status .icon, .st-for-third .seed-status .icon { color: var(--accent); }
.st-tied .seed-status .icon { color: var(--warn); }
.st-dq .seed-status .icon { color: var(--loss); }
.seed-record { font-size: 12.5px; color: var(--text-3); font-weight: 650; }
.live-dot { display: inline-block; width: 9px; height: 9px; margin: 4px 3px 0; border-radius: 50%; background: var(--live); flex: none; animation: pulse 1.6s infinite; }
.seed-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.seed-chip { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border-radius: 7px; font-size: 12.5px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text); white-space: nowrap; max-width: 100%; overflow: hidden; }
.seed-chip .icon { width: 13px; height: 13px; flex: none; }
.seed-chip .live-dot { margin: 0; width: 8px; height: 8px; }
.sc-round { font-size: 10.5px; font-weight: 800; color: var(--text-3); }
.sc-text { overflow: hidden; text-overflow: ellipsis; }
.sc-upset { font-size: 10.5px; font-weight: 800; color: var(--on-gold); background: var(--gold-2); border-radius: 4px; padding: 0 5px; }
.seed-chip.k-won { border-color: color-mix(in srgb, var(--win) 55%, transparent); background: color-mix(in srgb, var(--win) 12%, var(--surface-2)); }
.seed-chip.k-won .icon, .seed-chip.k-won b { color: var(--win); }
.seed-chip.k-lost { border-color: color-mix(in srgb, var(--loss) 45%, transparent); background: color-mix(in srgb, var(--loss) 9%, var(--surface-2)); }
.seed-chip.k-lost .icon, .seed-chip.k-lost b { color: var(--loss); }
.seed-chip.k-playing { border-color: color-mix(in srgb, var(--live) 70%, transparent); }
.seed-chip.k-tied { border-color: var(--warn); }
.seed-chip.k-starting, .seed-chip.k-next, .seed-chip.k-waiting { border-color: var(--line-accent); color: var(--text-2); }
.seed-chip.k-starting .icon, .seed-chip.k-next .icon, .seed-chip.k-waiting .icon { color: var(--accent); }
.seed-chip.k-later, .seed-chip.k-stopped, .seed-chip.k-notplayed, .seed-chip.k-more { color: var(--text-3); background: transparent; }
.seed-chip.k-bye, .seed-chip.k-byeup, .seed-chip.k-notin, .seed-chip.k-nogame { border-style: dashed; color: var(--text-2); }
.seed-chip.unplayed { border-style: dotted; }
.seed-chip.k-more { border-style: dashed; }
.seed-acts { display: flex; align-items: center; gap: 4px; }
.seed-detail { grid-column: 1 / -1; margin: 2px 0 4px; padding: 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.sd-record { font-weight: 650; margin-bottom: 4px; }
.sd-note { font-size: 13px; margin-bottom: 4px; }
.sd-lines { list-style: none; margin: 8px 0 0; padding: 0; }
.sd-line { display: grid; grid-template-columns: 120px 96px minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 4px 10px; align-items: center; min-height: 44px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.sd-round { font-weight: 650; }
.sd-word { font-weight: 700; }
.sd-line.k-won .sd-word { color: var(--win); }
.sd-line.k-lost .sd-word { color: var(--loss); }
.sd-line.k-playing .sd-word { color: var(--live); }
.sd-line.unplayed .sd-word { color: var(--text-2); }
.sd-opp { min-width: 0; text-align: left; overflow-wrap: anywhere; min-height: 44px; display: inline-flex; align-items: center; }
.sd-score { min-width: 0; overflow-wrap: anywhere; }
.sd-link { justify-self: end; }
.sd-games { grid-column: 1 / -1; list-style: none; margin: 0 0 4px; padding: 0 0 0 12px; border-left: 2px solid var(--line-2); font-size: 12.5px; }
.sd-games li { padding: 2px 0; }
.sd-acts { margin-top: 10px; }
.path-banner { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; margin-bottom: 10px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border: 1px solid var(--line-accent); font-size: 14px; }
.path-banner:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.path-banner > .icon { color: var(--accent-2); }
.pb-text { flex: 1; min-width: 180px; }
.pb-acts { display: flex; flex-wrap: wrap; gap: 4px; }
.b-tools { flex-wrap: wrap; }
.b-find { width: auto; max-width: 240px; min-height: 36px; padding-top: 4px; padding-bottom: 4px; }
.b-caption { font-size: 13px; }
/* The zoom buttons sit in one bordered group, like a segmented control, the
   same height as the player picker. */
.b-zooms { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius); background: color-mix(in srgb, var(--text) 5%, var(--field)); }
.b-zooms .btn { min-height: 28px; min-width: 32px; padding: 0 10px; font-size: 16px; border-radius: 7px; }
.b-zooms .btn[data-zoom="fit"] { font-size: 13.5px; }
.b-match.is-path { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); z-index: 2; }
.b-match.is-dim { opacity: 0.38; }
.b-row.is-focus { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.b-row.is-me .b-name { color: var(--accent-2); font-weight: 750; }
.b-flag.upset { background: var(--gold-2); color: var(--on-gold); }
.b-lines path.path { stroke: var(--accent-2); stroke-width: 3.5; }
.b-seed.top { color: var(--gold); font-weight: 800; }
.pair-row.is-path { background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.pair-row.is-dim { opacity: 0.45; }
.p-seed { display: inline-block; min-width: 18px; margin: 0 6px; font-size: 11.5px; color: var(--text-3); text-align: center; }
.plist-row .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.plist-row.is-me { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
/* A bot that fills an empty place at the start: a quieter row, same grid. */
.plist-row.is-fill { color: var(--text-2); background: var(--surface-2); }
.plist-seed { display: inline-grid; place-items: center; min-width: 30px; height: 30px; border-radius: 8px; border: 1px dashed var(--line-2); font-weight: 700; color: var(--text-2); }
/* Only the name truncates; the guest or bot tag and "You" always show. */
.plist-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.plist-name > :not(.ellipsis) { flex: none; }
.plist-you { height: 18px; padding: 0 7px; font-size: 11.5px; }
.plist-first { font-size: 12.5px; }
@media (max-width: 599px) { .plist-row { gap: 10px; padding: 10px 12px; } .plist-rating { font-size: 13px; } }
.plist-fill { overflow-wrap: anywhere; }
.plist-num { display: flex; flex-direction: column; align-items: flex-end; flex: none; font-size: 13.5px; line-height: 1.3; white-space: nowrap; }
.plist-num b { font-weight: 700; }
.plist-join { margin-top: 12px; }
.t-join { display: flex; flex-direction: column; gap: 10px; }
.t-join .input { font-size: 16px; }
.t-join .form-error:empty { display: none; }
.t-login { font-size: 13.5px; }
.t-where { font-size: 13.5px; color: var(--text-2); }
.t-in-sub { font-weight: 500; color: var(--text-2); }
.champ-you { margin-top: 10px; display: flex; align-items: center; gap: 6px; color: var(--gold); font-weight: 650; }
.proj-caption { margin-top: 14px; font-size: clamp(16px, 1.6vw, 24px); color: #efe6d2; }
.proj-seeds { list-style: none; padding: 0; margin: 12px 0 0; font-size: clamp(15px, 1.5vw, 24px); line-height: 1.55; }
.proj-seeds b { display: inline-block; min-width: 2em; color: #ddb862; }
.proj-seeds .is-gone { opacity: 0.5; }
.proj-seeds .ps-champion { color: #f6dc95; font-weight: 800; }
.proj-seeds li { break-inside: avoid; }
@media (min-width: 1200px) { .proj-seeds.cols { columns: 2; column-gap: 32px; } }
@media (min-width: 1600px) { .proj-seeds.many { columns: 3; } }
@media (max-width: 767px) {
  .sd-line { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "round word link" "opp opp opp" "score score score"; }
  .sd-round { grid-area: round; }
  .sd-word { grid-area: word; }
  .sd-link { grid-area: link; }
  .sd-opp { grid-area: opp; min-height: 44px; }
  .sd-score { grid-area: score; }
  .sd-opp:empty, .sd-score:empty { display: none; }
}
@media (max-width: 599px) {
  .seed-row { grid-template-columns: 40px minmax(0, 1fr) 44px; padding: 8px 10px; gap: 8px; }
  .seed-num { width: 40px; height: 40px; }
  .seed-num span { font-size: 19px; }
  .seed-acts { flex-direction: column; }
  .seed-dir { display: none; }
  .seeds-q { max-width: none; }
  .seeds-filter { width: 100%; }
  .b-find { max-width: none; width: 100%; }
  /* The eye sits on the first line and Copy link moves to the right end. */
  .seeds-access { align-items: flex-start; }
  .seeds-access > .icon { margin-top: 2px; }
  .seeds-access > .btn { margin-left: auto; }
}
@media (pointer: coarse) {
  .seed-acts .btn-icon { width: 44px; height: 44px; }
  .seeds-end { min-height: 56px; }
  .b-zooms .btn { min-height: 44px; min-width: 44px; }
}

/* Results and standings: tighter cells on a phone, and the columns that
   Seeds already shows (seed, rating) or the long result line give way. */
.t-res-short { display: none; }
@media (max-width: 599px) {
  .t-table th, .t-table td { padding: 10px 8px; }
  .t-table tr.t-break td { padding: 0 8px; }
  .t-table .t-opt { display: none; }
  .t-res-long { display: none; }
  .t-res-short { display: inline; }
}

/* Prelims and elims: the break line in the tables, and the note above the
   prelim pairings once the elims have started. */
.table tr.t-break td { padding: 0 12px; border-bottom: 0; background: transparent; }
.table tbody tr.t-break:hover td { background: transparent; }
/* When a wide table scrolls sideways on a phone, the label stays in view. */
.t-break span { position: sticky; left: 8px; max-width: calc(100vw - 2 * var(--gutter) - 18px); display: flex; align-items: flex-start; gap: 8px; margin: 2px 0; padding: 7px 0 6px; border-top: 2px dashed var(--line-accent); color: var(--accent); font-size: 12.5px; font-weight: 650; letter-spacing: 0.01em; }
.t-break .icon { width: 14px; height: 14px; margin-top: 2px; transform: rotate(-90deg); }
/* It reads as one sentence: icon, words and link flow and wrap together. */
.pair-note { display: block; margin: 0 0 14px; padding: 11px 14px; border-radius: var(--radius); border: 1px solid var(--line-accent); background: var(--accent-soft); font-size: 14px; }
.pair-note .icon { width: 16px; height: 16px; color: var(--accent); margin-right: 6px; }
.pair-note .linkish { margin-left: 4px; white-space: nowrap; }