/* ageofbackgammon */

:root {
  --ground: #101419;
  --panel: #171c22;
  --panel-2: #1d232a;
  --raise: #252d35;
  --line: #2e3841;
  --line-soft: #232a32;
  --text: #eaf0f5;
  --text-dim: #a4b1bd;
  --text-mute: #74828f;
  --brass: #4a9ae8;
  --brass-deep: #2a6ba8;
  --wood: #c08f5a;
  --nacre: #e9b44c;
  --nacre-deep: #8d6a1f;
  --good: #3fbf8f;
  --crit: #e06a5c;
  --crit-soft: rgba(224, 106, 92, .15);
  --shadow: 0 16px 36px -22px rgba(0, 0, 0, .75);
  --topH: 56px;

  --frame-a: #3a434c; --frame-b: #242b32; --inlay: #cfd9e0;
  --felt: #1a2027; --felt-2: #151a20; --pt-a: #e6e0d1; --pt-b: #2f6f9e;
  --bar: #232a32; --tray: #1d242a;
  --chk-l: #f2ece0; --chk-l-rim: #b9b2a0; --chk-l-ink: #8a8171;
  --chk-d: #262d35; --chk-d-rim: #6b7a86; --chk-d-ink: #a9bac6;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ground: #eef1f4; --panel: #ffffff; --panel-2: #f4f7f9; --raise: #e8edf1;
    --line: #d6dde4; --line-soft: #e6ebef;
    --text: #141a20; --text-dim: #51606c; --text-mute: #78858f;
    --brass: #1565c0; --brass-deep: #0f4c91; --wood: #8a5a2b; --nacre: #a0761c; --nacre-deep: #78570f;
    --good: #16936a; --crit: #c0483a; --crit-soft: rgba(192, 72, 58, .12);
    --shadow: 0 16px 36px -26px rgba(20, 40, 60, .35);
  }
}
:root[data-theme="light"] {
    --ground: #eef1f4; --panel: #ffffff; --panel-2: #f4f7f9; --raise: #e8edf1;
  --line: #d6dde4; --line-soft: #e6ebef;
  --text: #141a20; --text-dim: #51606c; --text-mute: #78858f;
  --brass: #1565c0; --brass-deep: #0f4c91; --wood: #8a5a2b; --nacre: #a0761c; --nacre-deep: #78570f;
  --good: #16936a; --crit: #c0483a; --crit-soft: rgba(192, 72, 58, .12);
  --shadow: 0 16px 36px -26px rgba(20, 40, 60, .35);
}

/* board sets */
[data-board="ivory"] {
  --frame-a: #3a434c; --frame-b: #242b32; --inlay: #cfd9e0;
  --felt: #1a2027; --felt-2: #151a20; --pt-a: #e6e0d1; --pt-b: #2f6f9e;
  --bar: #232a32; --tray: #1d242a;
}
[data-board="sand"] {
  --frame-a: #c8bda6; --frame-b: #a89a7e; --inlay: #fffaf0;
  --felt: #f3eee2; --felt-2: #e9e2d2; --pt-a: #ffffff; --pt-b: #e0a04a;
  --bar: #ddd3bf; --tray: #e6ddcb;
  --chk-l: #ffffff; --chk-l-rim: #b9b2a0; --chk-l-ink: #8a8171;
  --chk-d: #3b4650; --chk-d-rim: #6b7a86; --chk-d-ink: #cfd9e0;
}
[data-board="stone"] {
  --frame-a: #5d6670; --frame-b: #363d45; --inlay: #e4ecf1;
  --felt: #2a3138; --felt-2: #222930; --pt-a: #dfe4e8; --pt-b: #c0724a;
  --bar: #343c44; --tray: #2d343b;
}
[data-board="midnight"] {
  --frame-a: #2a2f35; --frame-b: #14181d; --inlay: #cfe6e4;
  --felt: #121619; --felt-2: #0d1013; --pt-a: #cfe0e2; --pt-b: #1c5f6b;
  --bar: #1d2429; --tray: #181e22;
}
[data-board="emerald"] {
  --frame-a: #2f3b36; --frame-b: #1b2420; --inlay: #dcebe2;
  --felt: #1e3b2e; --felt-2: #172e24; --pt-a: #ece4cf; --pt-b: #0f7a52;
  --bar: #2b2219; --tray: #26201a;
}

/* checker sets */
[data-checkers="pearl"] {
  --chk-l: #f2ece0; --chk-l-rim: #b9b2a0; --chk-l-ink: #8a8171;
  --chk-d: #262d35; --chk-d-rim: #6b7a86; --chk-d-ink: #a9bac6;
}
[data-checkers="bone"] {
  --chk-l: #f5efe0; --chk-l-rim: #bdae90; --chk-l-ink: #8d7d5e;
  --chk-d: #231f1c; --chk-d-rim: #6d6a66; --chk-d-ink: #a9a49c;
}
[data-checkers="olive"] {
  --chk-l: #dfc48d; --chk-l-rim: #a8843f; --chk-l-ink: #7a5c25;
  --chk-d: #4a3216; --chk-d-rim: #8a6027; --chk-d-ink: #c08f3c;
}
[data-checkers="brass"] {
  --chk-l: #e8c979; --chk-l-rim: #a5801f; --chk-l-ink: #7c5f12;
  --chk-d: #9c5a2c; --chk-d-rim: #5e3315; --chk-d-ink: #f0c58a;
}
[data-checkers="enamel"] {
  --chk-l: #f2f2ef; --chk-l-rim: #9aa0a6; --chk-l-ink: #6d7479;
  --chk-d: #21262b; --chk-d-rim: #4a90d9; --chk-d-ink: #7fb6ef;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: Archivo, "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
:root[lang="he"] body { font-family: Heebo, "Segoe UI", system-ui, sans-serif; }
body.at-table { overflow: hidden; }

/* clicking the board should never look like selecting text */
body { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
input, textarea, .lesson-body, .moves, .race, .banner, table.lb { -webkit-user-select: text; user-select: text; }
.board-svg { touch-action: none; }
.board-svg text, .board-svg rect, .board-svg circle, .board-svg path { -webkit-user-select: none; user-select: none; }

h1, h2, h3, h4 { font-family: Amiri, "Times New Roman", serif; font-weight: 700; margin: 0; text-wrap: balance; }
:root[lang="he"] h1, :root[lang="he"] h2, :root[lang="he"] h3, :root[lang="he"] h4 {
  font-family: "Frank Ruhl Libre", Georgia, serif;
}
h1 { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.12; }
h2 { font-size: clamp(19px, 2.2vw, 25px); line-height: 1.2; }
h3 { font-size: 17px; }
p { margin: 0 0 .7em; }
.lead { color: var(--text-dim); max-width: 52ch; }
.muted { color: var(--text-dim); }
.sm { font-size: 13px; }
.eyebrow { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); font-weight: 600; }
.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; border-radius: 4px; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 14px;
  padding: 0 14px; height: var(--topH);
  background: var(--panel); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 9px; cursor: pointer; border: 0; background: none; padding: 0; color: inherit; }
.brand .mark { width: 34px; height: 31px; flex: none; }
.brand b { font-family: Amiri, serif; font-size: 19px; font-weight: 700; white-space: nowrap; color: var(--text); letter-spacing: .005em; }
.brand b .hi { font-size: 1.26em; line-height: 0; color: var(--brass); }

.nav { display: flex; gap: 2px; margin-inline-start: auto; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav button {
  background: none; border: 0; color: var(--text-dim); font: inherit; font-weight: 500;
  padding: 7px 11px; border-radius: 8px; cursor: pointer; white-space: nowrap;
}
.nav button:hover { background: var(--raise); color: var(--text); }
.nav button[aria-current="true"] { color: var(--text); background: var(--raise); box-shadow: inset 0 -2px 0 var(--brass); }

.topright { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.nav:not([hidden]) ~ .topright { margin-inline-start: 0; }
.langsw { display: flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.langsw button {
  border: 0; background: none; color: var(--text-mute); font: inherit; font-size: 12px; font-weight: 600;
  padding: 5px 9px; cursor: pointer;
}
.langsw button[aria-pressed="true"] { background: var(--raise); color: var(--brass); }
.iconbtn {
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text-dim);
  width: 32px; height: 32px; border-radius: 8px; cursor: pointer; display: grid; place-items: center; padding: 0;
}
.iconbtn[aria-pressed="true"] { color: var(--brass); border-color: var(--brass-deep); }
.iconbtn svg { width: 17px; height: 17px; }

.me { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-2); cursor: pointer; color: inherit; font: inherit; }
.me .av { width: 25px; height: 25px; border-radius: 50%; background: linear-gradient(140deg, var(--brass), var(--nacre-deep)); display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #17120c; }
.me .who { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.me .who span { font-size: 13px; }
.me .rt { color: var(--brass); font-weight: 600; font-size: 11px; }

main { max-width: 1400px; margin: 0 auto; padding: 20px 16px 48px; }
.screen[hidden] { display: none !important; }

/* ---------- landing ---------- */
.landing { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: center; }
.feats { list-style: none; margin: 14px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.feats li { color: var(--text-dim); font-size: 14px; padding-inline-start: 18px; position: relative; }
.feats li::before { content: "◆"; position: absolute; inset-inline-start: 0; color: var(--brass); font-size: 10px; top: 3px; }
.counts { font-size: 12px; color: var(--text-mute); }
.land-art { margin-top: 22px; }
.land-art svg { display: block; width: 100%; height: min(44dvh, 480px); }

.authcard { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.tabs { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.tab { border: 0; background: none; font: inherit; font-weight: 600; color: var(--text-mute); padding: 8px 10px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab.on { color: var(--text); border-bottom-color: var(--brass); }
.hint { font-size: 12px; color: var(--text-mute); margin: 6px 0 10px; min-height: 16px; }
.hint.bad { color: var(--crit); }
.linklike { display: block; width: 100%; margin-top: 10px; background: none; border: 0; color: var(--text-mute); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }

label.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
label.field > span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); font-weight: 600; }
input[type="text"], input[type="email"], input[type="password"], select {
  font: inherit; color: var(--text); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; width: 100%;
}

/* ---------- buttons ---------- */
.btn {
  font: inherit; font-weight: 600; cursor: pointer; border-radius: 8px;
  padding: 9px 14px; border: 1px solid var(--line); background: var(--raise); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
.btn:hover { border-color: var(--brass); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--brass); border-color: var(--brass); color: #1a1206; }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--crit); border-color: color-mix(in srgb, var(--crit) 45%, var(--line)); background: var(--crit-soft); }
.btn.sm { padding: 6px 10px; font-size: 13px; }
.btn.wide { width: 100%; }
.btnrow { display: flex; gap: 8px; flex-wrap: wrap; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.switch { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.switch:last-child { border-bottom: 0; }
.switch span { font-size: 14px; }
.switch select { width: auto; }
.toggle { position: relative; width: 42px; height: 24px; flex: none; border-radius: 999px; background: var(--raise); border: 1px solid var(--line); cursor: pointer; }
.toggle::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-mute); transition: .16s; }
.toggle[aria-pressed="true"] { background: color-mix(in srgb, var(--brass) 35%, var(--raise)); border-color: var(--brass); }
.toggle[aria-pressed="true"]::after { inset-inline-start: 20px; background: var(--brass); }

/* ---------- home ---------- */
.modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.mode {
  text-align: start; cursor: pointer; font: inherit; color: inherit;
  background: var(--panel); border: 1px solid var(--line); border-radius: 11px;
  padding: 14px; display: flex; flex-direction: column; gap: 4px; min-height: 104px;
}
.mode:hover { border-color: var(--brass); }
.mode b { font-size: 16px; }
.mode span { color: var(--text-dim); font-size: 13px; }
.mode .tag { margin-top: auto; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); font-weight: 600; }

.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 11px; padding: 14px; }
.card > h3 { margin-bottom: 10px; }

.statrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.stat { display: flex; flex-direction: column; }
.stat .v { font-size: 21px; font-weight: 600; }
.stat .k { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--text-mute); }

table.lb { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.lb th { text-align: start; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--text-mute); font-weight: 600; padding: 5px 7px; border-bottom: 1px solid var(--line); }
table.lb td { padding: 6px 7px; border-bottom: 1px solid var(--line-soft); }
table.lb tr:last-child td { border-bottom: 0; }
table.lb .num, table.lb th.num { text-align: end; font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; }
table.lb tr.self td { background: color-mix(in srgb, var(--brass) 12%, transparent); }
.tbl-wrap { overflow-x: auto; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font-size: 11.5px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text-dim); }
.chip.on { border-color: var(--brass); color: var(--brass); }
.chip.live { border-color: var(--good); color: var(--good); }

/* ---------- the table: fits the viewport, never scrolls ---------- */
.table {
  display: grid; grid-template-columns: minmax(0, 1fr) 268px; gap: 10px;
  height: calc(100dvh - var(--topH) - 12px);
}
body.at-table main { max-width: none; padding: 6px 10px; }
.boardcol { display: flex; flex-direction: column; gap: 5px; min-height: 0; min-width: 0; }
.board-wrap { flex: 1 1 auto; min-height: 0; min-width: 0; }
.board-svg { width: 100%; height: 100%; display: block; }

.seat {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px; padding: 4px 9px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 9px;
}
.seat .av { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; font-weight: 700; font-size: 11px; flex: none; }
.seat .av.light { background: var(--chk-l); color: #2a2118; border: 1px solid var(--chk-l-rim); }
.seat .av.dark { background: var(--chk-d); color: var(--chk-d-ink); border: 1px solid var(--chk-d-rim); }
.seat .who { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.seat .who b { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat .who small { color: var(--text-mute); font-size: 11px; white-space: nowrap; }
.seat .pips { margin-inline-start: auto; font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.clock {
  position: relative; overflow: hidden;
  font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums;
  padding: 3px 11px 6px; border-radius: 8px; min-width: 76px;
  background: var(--panel-2); border: 1px solid var(--line); text-align: center; flex: none;
  display: flex; flex-direction: column; align-items: center; line-height: 1.05;
}
.clock b { font-size: 17px; font-weight: 600; }
.clock small { font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; opacity: .6; font-weight: 600; }
.clock i {
  position: absolute; inset-inline-start: 0; bottom: 0; height: 3px; width: 100%;
  transform-origin: left; transform: scaleX(var(--p, 1));
  background: var(--line); border-radius: 0;
}
[dir="rtl"] .clock i { transform-origin: right; }
.clock.live { background: color-mix(in srgb, var(--brass) 14%, var(--panel-2)); border-color: var(--brass); }
.clock.live i { background: var(--brass); }
.clock.turn { background: color-mix(in srgb, var(--brass) 16%, var(--panel-2)); border-color: var(--brass); }
.clock.turn b { font-size: 23px; color: var(--brass); }
.clock.turn i { background: var(--brass); }
.clock.urgent { background: var(--crit-soft); border-color: var(--crit); }
.clock.urgent b { color: var(--crit); animation: clockpulse 1s ease-in-out infinite; }
.clock.urgent i { background: var(--crit); }
.clock.low { background: var(--crit-soft); border-color: var(--crit); }
.clock.low b { color: var(--crit); }
.clock.low i { background: var(--crit); }
@keyframes clockpulse { 50% { opacity: .45; } }

.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: 11px;
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
.panel > header { padding: 7px 11px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; flex: none; }
.panel > header b { font-weight: 600; font-size: 13.5px; }
.panel .body { padding: 10px; display: flex; flex-direction: column; gap: 9px; overflow-y: auto; min-height: 0; }
.status { font-size: 14px; color: var(--text-dim); min-height: 20px; }

.race { border: 1px solid var(--line-soft); border-radius: 9px; overflow: hidden; }
.race table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.race th { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); font-weight: 600; padding: 5px 8px; text-align: end; }
.race th:first-child { text-align: start; }
.race td { padding: 4px 8px; border-top: 1px solid var(--line-soft); font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; text-align: end; }
.race td:first-child { font-family: inherit; text-align: start; color: var(--text-dim); }
.race .lead { padding: 6px 8px; border-top: 1px solid var(--line-soft); font-size: 12.5px; background: var(--panel-2); }
.race .lead b { color: var(--brass); }

.moves { max-height: 180px; overflow-y: auto; font-family: "IBM Plex Mono", monospace; font-size: 12px; }
.moves div { display: flex; gap: 7px; padding: 2px 0; border-bottom: 1px solid var(--line-soft); }
.moves div:last-child { border-bottom: 0; }
.moves i { color: var(--text-mute); font-style: normal; width: 20px; text-align: end; flex: none; }
.moves em { font-style: normal; width: 13px; flex: none; }

.coachbox { border: 1px solid var(--nacre-deep); background: color-mix(in srgb, var(--nacre) 10%, var(--panel-2)); border-radius: 9px; padding: 10px; font-size: 13px; }
.coachbox h4 { font-family: Archivo, sans-serif; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--nacre); margin-bottom: 5px; font-weight: 700; }
.coachbox ul { margin: 5px 0 0; padding-inline-start: 16px; color: var(--text-dim); }

.banner { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 9px; font-size: 13.5px; border: 1px solid var(--line); background: var(--panel-2); flex-wrap: wrap; }
.banner.win { border-color: var(--good); background: color-mix(in srgb, var(--good) 14%, var(--panel-2)); }
.banner.lose { border-color: var(--crit); background: var(--crit-soft); }
.delta { font-family: "IBM Plex Mono", monospace; font-weight: 600; }
.delta.up { color: var(--good); }
.delta.down { color: var(--crit); }
.share { display: flex; gap: 7px; align-items: center; }
.share input { font-family: "IBM Plex Mono", monospace; font-size: 12px; }

/* ---------- learn ---------- */
.lessons { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 16px; }
.lesson-list { display: flex; flex-direction: column; gap: 5px; max-height: calc(100dvh - var(--topH) - 120px); overflow-y: auto; }
.rank-head { display: flex; align-items: baseline; gap: 8px; margin: 12px 0 3px; }
.rank-head:first-child { margin-top: 0; }
.lesson-item {
  display: flex; align-items: center; gap: 9px; text-align: start; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font: inherit; color: inherit;
}
.lesson-item:hover { border-color: var(--brass); }
.lesson-item[aria-current="true"] { border-color: var(--brass); background: var(--panel-2); }
.lesson-item .n { font-size: 11.5px; color: var(--text-mute); width: 18px; flex: none; }
.lesson-item .tl { font-size: 13.5px; font-weight: 500; }
.lesson-item .done { margin-inline-start: auto; color: var(--good); flex: none; }
.lesson-body { background: var(--panel); border: 1px solid var(--line); border-radius: 11px; padding: 18px; }
.lesson-body p { color: var(--text-dim); max-width: 62ch; }
.lesson-body .key { border-inline-start: 3px solid var(--brass); padding: 3px 0; padding-inline-start: 11px; margin: 12px 0; color: var(--text); }
.quiz { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
.quiz button { text-align: start; justify-content: flex-start; }
.quiz button.right { border-color: var(--good); background: color-mix(in srgb, var(--good) 14%, var(--raise)); }
.quiz button.wrong { border-color: var(--crit); background: var(--crit-soft); }

/* ---------- cups ---------- */
.bracket { display: flex; gap: 22px; overflow-x: auto; padding-bottom: 6px; }
.round { display: flex; flex-direction: column; justify-content: space-around; gap: 12px; min-width: 190px; }
.tie { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.tie .p { display: flex; align-items: center; gap: 8px; padding: 6px 9px; font-size: 13px; }
.tie .p + .p { border-top: 1px solid var(--line); }
.tie .p.w { background: color-mix(in srgb, var(--good) 14%, transparent); font-weight: 600; }
.tie .p .r { margin-inline-start: auto; font-size: 11.5px; color: var(--text-mute); }
.tie .p.empty { color: var(--text-mute); font-style: italic; }

/* ---------- swatches ---------- */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 9px; }
.swatch { cursor: pointer; border: 1px solid var(--line); border-radius: 9px; padding: 7px; background: var(--panel-2); font: inherit; color: inherit; display: flex; flex-direction: column; gap: 6px; }
.swatch[aria-pressed="true"] { border-color: var(--brass); box-shadow: inset 0 0 0 1px var(--brass); }
.swatch svg { width: 100%; height: 46px; border-radius: 5px; display: block; }
.swatch b { font-size: 12.5px; }

/* ---------- overlays ---------- */
.scrim { position: fixed; inset: 0; background: rgba(10, 7, 4, .68); display: grid; place-items: center; z-index: 60; padding: 16px; }
.scrim[hidden] { display: none; }
.modal { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 20px; max-width: 440px; width: 100%; box-shadow: var(--shadow); max-height: 86dvh; overflow-y: auto; }
.modal h2 { margin-bottom: 8px; }
.toast { position: fixed; inset-inline: 0; bottom: 20px; margin: auto; width: max-content; max-width: 90vw; background: var(--raise); border: 1px solid var(--brass); color: var(--text); padding: 9px 15px; border-radius: 999px; z-index: 70; box-shadow: var(--shadow); font-size: 14px; }
.toast[hidden] { display: none; }
.spinner { width: 13px; height: 13px; border: 2px solid var(--line); border-top-color: var(--brass); border-radius: 50%; animation: spin .8s linear infinite; display: inline-block; vertical-align: -1px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .landing { grid-template-columns: minmax(0, 1fr); }
  .lessons { grid-template-columns: minmax(0, 1fr); }
  .lesson-list { max-height: none; }
  .table { grid-template-columns: minmax(0, 1fr) 244px; }
}
@media (max-width: 820px) {
  .modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .table { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .panel { max-height: 33dvh; }
  .panel > header { display: none; }
  .moves { max-height: 90px; }
}
@media (max-width: 560px) {
  :root { --topH: 52px; }
  .topbar { gap: 8px; padding: 0 10px; }
  .brand b { display: none; }
  .nav { flex: 1 1 auto; min-width: 0; }
  .topright { flex: 0 0 auto; gap: 6px; }
  .topbar .langsw { display: none; }
  .modes { grid-template-columns: minmax(0, 1fr); }
  .statrow { grid-template-columns: repeat(2, 1fr); }
  main { padding: 14px 12px 36px; }
  .seat .who small { display: none; }
  .clock { min-width: 66px; padding: 2px 8px 5px; }
  .clock b { font-size: 15px; }
  .clock.turn b { font-size: 20px; }
}
/* phones held sideways: the board takes the height, the panel goes narrow */
.pclocks { display: none; }
@media (max-height: 560px) and (orientation: landscape) {
  :root { --topH: 46px; }
  .table { grid-template-columns: minmax(0, 1fr) 230px; grid-template-rows: none; }
  .panel { max-height: none; }
  .panel > header { display: none; }
  .boardcol > .seat { display: none; }
  .pclocks { display: flex; flex-direction: column; gap: 5px; }
  .pclocks .seat { padding: 4px 7px; }
  .pclocks .seat .av { width: 20px; height: 20px; font-size: 10px; }
  .pclocks .seat .who b { font-size: 12px; }
  .pclocks .seat .who small { display: none; }
  .pclocks .seat .pips { font-size: 10px; }
  .clock { min-width: 58px; padding: 1px 7px 4px; }
  .clock b { font-size: 14px; }
  .clock.turn b { font-size: 18px; }
  .moves { max-height: 64px; }
  .race td, .race th { padding: 2px 7px; }
}

/* the checker that follows the pointer while dragging */
.drag-ghost {
  position: fixed; inset-block-start: 0; inset-inline-start: 0; width: 46px; height: 46px;
  border-radius: 50%; pointer-events: none; z-index: 80; display: none;
  background: var(--chk-l); border: 3px solid var(--chk-l-rim);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .45);
}
.drag-ghost[data-side="b"] { background: var(--chk-d); border-color: var(--chk-d-rim); }