/* ============================================================
   Kingside Lab — one token set, two themes.

   Look: a reference database, not an app. Flat surfaces, hairline rules,
   square corners, dense tables, condensed uppercase section heads — the
   house style of Pigskin Lab, with a wood-brown accent for chess.
   Motion eases out on an expo curve and staggers by --i; all of it stops
   under prefers-reduced-motion.
   ============================================================ */

:root {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f4f4f4;
  --surface-3: #e8e8e8;
  --row-alt: #fafafa;
  --row-hover: #fff4e0;
  --border: #d0d0d0;
  --border-strong: #9a9a9a;
  --grid: #e9e9e9;
  --frame: #111111;
  --text: #111111;
  --text-2: #3b3b3b;
  --muted: #5f5f5f;
  --link: #0b57d0;
  --focus: #0b57d0;
  --brand: #c8661c;
  --brand-ink: #9c4a0c;   /* the brand as small text: AA on white */
  --ink-btn: #111111;
  --ink-btn-text: #ffffff;
  --header-bg: #111111;
  --header-ink: #ffffff;
  --header-muted: #bdbdbd;

  /* Results. The --on-* inks are the letter on a filled result chip: each pair is at least 4.5:1.
     Win was #1f8a4c (4.4:1 as text); white on the dark theme's green was 2.0:1 and on its red 2.8:1. */
  --win: #1d7a44;
  --draw: #919191;   /* was #a3a3a3, 2.5:1 on white; a W/D/L bar needs 3:1 (fix.colour, labcolor.js themeSafe) */
  --loss: #c8322f;
  --on-win: #ffffff; --on-draw: #111111; --on-loss: #ffffff;
  /* --s3 and --s4 were #1baf7a (2.8:1) and #eda100 (2.2:1) on white: darkened to 3:1, hue kept (fix.colour). */
  --s1: #2a78d6; --s2: #eb6834; --s3: #08a974; --s4: #cb8100;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --font: "Roboto", "Helvetica Neue", Arial, system-ui, sans-serif;
  --display: "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #161616; --surface: #1d1d1d; --surface-2: #252525; --surface-3: #2f2f2f;
  --row-alt: #212121; --row-hover: #3a2f20;
  --border: #3a3a3a; --border-strong: #6a6a6a; --grid: #2c2c2c; --frame: #d6d6d6;
  --text: #ededed; --text-2: #cfcfcf; --muted: #a8a8a8;
  --link: #8ab4f8; --focus: #8ab4f8; --brand: #e0833a; --brand-ink: #f0a060;
  --ink-btn: #ededed; --ink-btn-text: #111111;
  --header-bg: #0c0c0c; --header-ink: #ededed; --header-muted: #a8a8a8;
  --win: #3ecf73; --draw: #8c8c8c; --loss: #ff6b61;
  --on-win: #111111; --on-draw: #111111; --on-loss: #111111;
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.5 var(--font); min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
p a:not(.btn), .site-footer a, .notice a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.15; margin: 0 0 .4em; }
h1 { font-size: 2rem; }
h2 { font-size: 1.15rem; text-transform: uppercase; letter-spacing: .02em; }
h3 { font-size: 1rem; }
p { margin: 0 0 .75em; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 16px; }
main { flex: 1; min-width: 0; padding-bottom: 48px; min-height: 100vh; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--surface); color: var(--text); padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- header ---------- */
.site-header { background: var(--header-bg); color: var(--header-ink); position: sticky; top: 0; z-index: 40; border-bottom: 3px solid var(--brand); }
.site-header .wrap { display: flex; align-items: center; gap: 18px; height: 50px; }
.brand { color: var(--header-ink); font: 700 1.3rem/1 var(--display); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; display: flex; align-items: center; gap: 10px; }
.brand:hover { text-decoration: none; }
.brand .logo { width: 24px; height: 24px; color: var(--header-ink); }
.beta-pill { font: 700 .62rem/1 var(--font); text-transform: uppercase; letter-spacing: .08em; color: var(--header-ink); border: 1px solid var(--brand); padding: 3px 6px; }
.nav { display: flex; flex: 1; height: 100%; }
.nav a { color: var(--header-muted); padding: 0 11px; font: 600 .8rem/50px var(--font); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; border-bottom: 3px solid transparent; }
.nav a:hover { color: var(--header-ink); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--header-ink); border-bottom-color: var(--header-ink); }
.header-tools { display: flex; align-items: center; gap: 8px; }
.icon-btn { background: transparent; border: 1px solid #4a4a4a; color: #ededed; height: 30px; padding: 0 9px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: 600 .74rem/1 var(--font); text-transform: uppercase; letter-spacing: .04em; }
.icon-btn:hover { background: #2a2a2a; }
.icon-btn svg { width: 14px; height: 14px; }
:root:not([data-theme="dark"]) .icon-btn .moon, :root[data-theme="dark"] .icon-btn .sun { display: none; }
@media (max-width: 560px) {
  .beta-pill, #theme-label { display: none; }
  .site-header .wrap { gap: 10px; }
  .nav a { padding: 0 7px; }
}

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--border); background: var(--surface-2); font-size: .8rem; color: var(--muted); padding: 18px 0 22px; }
.site-footer > .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; }
.site-footer a { color: var(--text-2); }
.site-family { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: baseline; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
.family-head { font: 700 .7rem/1 var(--display); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); width: 100%; }
.site-family a { text-decoration: none; display: grid; }
.site-family a b { color: var(--text); font-weight: 700; }
.site-family a small { color: var(--muted); }
.site-family a:hover b { text-decoration: underline; }

/* ---------- page furniture ---------- */
.page-head { padding: 18px 0 12px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.page-head h1 { margin: 0 0 4px; }
.page-head p { color: var(--text-2); max-width: 72em; margin: 0; }
.section { margin-top: 28px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-bottom: 2px solid var(--text); padding-bottom: 3px; margin-bottom: 10px; }
.section-head h2 { margin: 0; }
.section-head .more { font-size: .8rem; color: var(--muted); }
.box { background: var(--surface); border: 1px solid var(--border); padding: 12px 14px; }
.grid { display: grid; gap: 16px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 5px 12px; height: 34px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: 600 .82rem/1.2 var(--font); cursor: pointer; white-space: nowrap; transition: transform .15s var(--ease), background .15s, opacity .15s; }
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn:active { transform: scale(.96); }
.btn.primary { background: var(--ink-btn); color: var(--ink-btn-text); border-color: var(--ink-btn); }
.btn.primary:hover { opacity: .88; }
.btn.small { height: 26px; padding: 3px 8px; font-size: .75rem; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.linkish { background: none; border: 0; padding: 0; color: var(--link); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
input[type="text"], input[type="search"] { font: inherit; font-size: .95rem; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 0; padding: 6px 10px; min-width: 0; height: 38px; }
input::placeholder { color: var(--muted); }
.notice { border-left: 3px solid var(--brand); background: var(--surface-2); padding: 8px 12px; font-size: .88rem; color: var(--text-2); }
.notice.warn { border-color: var(--loss); }
.error { color: var(--loss); }
.loading { color: var(--muted); padding: 24px 0; }
.eyebrow { margin: 0 0 8px; font: 700 .78rem/1 var(--display); text-transform: uppercase; letter-spacing: .12em; color: var(--brand-ink); }

/* KPI strip */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); border: 1px solid var(--border); background: var(--surface); }
.kpi { padding: 10px 14px; border-right: 1px solid var(--border); min-width: 0; }
.kpi:last-child { border-right: 0; }
.kpi .v { font: 700 1.7rem/1.1 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi .l { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.kpi .sub { font-size: .75rem; color: var(--text-2); }
.kpi.lead .v { color: var(--brand-ink); font-size: 2.2rem; }
@media (max-width: 640px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi:nth-child(2n) { border-right: 0; } .kpi:nth-child(n+3) { border-top: 1px solid var(--border); } }

/* W/D/L */
.w { color: var(--win); } .d { color: var(--muted); } .l { color: var(--loss); }
.wdl { display: inline-flex; gap: 6px; font-variant-numeric: tabular-nums; }

/* ---------- tables ---------- */
.tbl-wrap { overflow: auto; border: 1px solid var(--border); max-width: 100%; background: var(--surface); }
table.stats { border-collapse: collapse; width: 100%; font-size: .82rem; font-variant-numeric: tabular-nums; }
table.stats th, table.stats td { padding: 5px 8px; border-bottom: 1px solid var(--grid); white-space: nowrap; text-align: right; }
table.stats th.l, table.stats td.l { text-align: left; }
table.stats td.l { color: var(--text); }
table.stats thead th { position: sticky; top: 0; background: var(--surface-2); font-weight: 700; border-bottom: 1px solid var(--border-strong); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); }
table.stats tbody tr:nth-child(even) td { background: var(--row-alt); }
table.stats tbody tr:hover td { background: var(--row-hover); }
table.stats td.name { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
table.stats tr.click { cursor: pointer; }
.tag { display: inline-block; font: 700 .62rem/1 var(--font); text-transform: uppercase; letter-spacing: .06em; padding: 3px 5px; border: 1px solid var(--border-strong); color: var(--text-2); }
.tag.cc { border-color: #7a9a4a; color: #5b7a2e; }
.tag.li { border-color: #777; color: var(--text-2); }
:root[data-theme="dark"] .tag.cc { color: #a8c878; border-color: #6d8a44; }
.res { display: inline-block; width: 18px; text-align: center; font-weight: 700; color: var(--on-win); font-size: .7rem; line-height: 18px; }
.res.win { background: var(--win); color: var(--on-win); } .res.draw { background: var(--draw); color: var(--on-draw); } .res.loss { background: var(--loss); color: var(--on-loss); }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 120; background: var(--text); color: var(--bg); padding: 10px 14px; font-size: .85rem; max-width: calc(100% - 32px); box-shadow: 0 4px 18px rgba(0, 0, 0, .25); animation: toast-in .25s var(--ease); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 10px); } }

/* ============================================================
   Home
   ============================================================ */
.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 36px; align-items: center; padding: 38px 0 26px; }
@media (max-width: 1020px) { .hero { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-top: 22px; } }
.hero-title { font-size: clamp(2.3rem, 5vw, 3.8rem); line-height: 1; margin: 0 0 16px; text-transform: uppercase; letter-spacing: -.01em; }
.hero-title .line { display: block; overflow: hidden; padding-bottom: .05em; }
.hero-title .line > span { display: inline-block; animation: line-up .9s var(--ease) both; }
.hero-title .line + .line > span { animation-delay: .09s; }
.hero-title .line + .line + .line > span { animation-delay: .18s; }
.hero-title .accent { color: var(--brand); }
@keyframes line-up { from { transform: translateY(105%); } }
.lede { font-size: 1.07rem; color: var(--text-2); margin: 0 0 18px; max-width: 46ch; }
.load-form { border: 2px solid var(--frame); padding: 14px; background: var(--surface); animation: rise .8s var(--ease) .25s both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
.load-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .load-fields { grid-template-columns: 1fr; } }
.field { display: grid; gap: 4px; }
.field > span { font: 700 .68rem/1 var(--display); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.field input { width: 100%; }
.load-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.load-foot .muted { font-size: .82rem; }
.load-form .error { margin: 10px 0 0; font-size: .88rem; }
.try { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .8rem; margin-top: 12px; color: var(--muted); }
.try-chip { border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); padding: 4px 9px; font: 500 .8rem/1.2 var(--font); cursor: pointer; transition: border-color .15s, background .15s, transform .15s var(--ease); }
.try-chip:hover { border-color: var(--brand); background: var(--row-hover); }
.try-chip:active { transform: scale(.96); }

/* Demo window: decorative (aria-hidden); a hidden paragraph describes it. */
.demo-wrap { position: relative; min-width: 0; padding-bottom: 26px; animation: rise .9s var(--ease) .15s both; }
.demo { position: relative; border: 2px solid var(--frame); background: var(--surface); box-shadow: 8px 8px 0 var(--surface-3); overflow: hidden; }
.demo-chrome { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; background: var(--header-bg); color: var(--header-muted); font-size: .72rem; }
.demo-chrome i { width: 9px; height: 9px; border-radius: 50%; background: #555; }
.demo-url { margin-left: 8px; padding: 2px 10px; background: #2a2a2a; color: #cfcfcf; flex: 1 1 auto; min-width: 0; max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-ask { display: flex; align-items: center; gap: 8px; margin: 12px 12px 0; padding: 7px 9px; border: 1px solid var(--frame); font-size: .9rem; }
.demo-mark { font: 700 .72rem/1 var(--display); text-transform: uppercase; letter-spacing: .06em; color: var(--brand-ink); white-space: nowrap; }
.demo-field { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; display: flex; align-items: center; }
.demo-caret { display: inline-block; flex: none; width: 2px; height: 1.1em; margin-left: 1px; background: var(--text); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.demo-btn { padding: 4px 10px; background: var(--ink-btn); color: var(--ink-btn-text); font-weight: 600; font-size: .75rem; white-space: nowrap; transition: transform .15s; }
.demo-btn.pressed { transform: scale(.9); }
.demo-body { margin: 10px 12px 14px; min-height: 300px; }
.demo-chips { display: flex; gap: 6px; flex-wrap: wrap; min-height: 24px; }
.demo-chips span { font-size: .72rem; padding: 3px 8px; border: 1px solid var(--border-strong); background: var(--surface-2); opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .5s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.demo.on .demo-chips span { opacity: 1; transform: none; }
.demo-kpis { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--border); margin: 10px 0; }
.demo-kpis > div { padding: 6px 10px; border-right: 1px solid var(--border); opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .6s var(--ease); transition-delay: calc(120ms + var(--i, 0) * 80ms); }
.demo-kpis > div:last-child { border-right: 0; }
.demo.on .demo-kpis > div { opacity: 1; transform: none; }
.demo-kpis b { display: block; font: 700 1.35rem/1.1 var(--display); font-variant-numeric: tabular-nums; }
.demo-kpis small { font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.demo-kpis .lead b { color: var(--brand-ink); }
.demo-rows { display: grid; gap: 7px; }
.demo-row { display: grid; grid-template-columns: 118px 1fr 44px; gap: 8px; align-items: center; font-size: .75rem; opacity: 0; transform: translateX(-8px); transition: opacity .3s, transform .5s var(--ease); transition-delay: calc(260ms + var(--i, 0) * 70ms); }
.demo.on .demo-row { opacity: 1; transform: none; }
.demo-row .lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-row .pct { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.demo-status { height: 20px; margin: 6px 12px 0; font-size: .75rem; color: var(--text-2); opacity: 0; transition: opacity .25s; }
.demo-status.on { opacity: 1; }
.demo-dots { display: inline-flex; gap: 4px; vertical-align: middle; margin-right: 6px; }
.demo-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: dot-bob 1.1s ease-in-out infinite; }
.demo-dots i:nth-child(2) { animation-delay: .15s; }
.demo-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot-bob { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
.demo-foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center; font-size: .75rem; color: var(--muted); }
.demo-pause { border: 0; background: none; color: var(--muted); font-size: .75rem; cursor: pointer; text-decoration: underline; padding: 4px 0; }
.demo-pause:hover { color: var(--text); }
.demo.held, .demo.held * { animation-play-state: paused !important; }
@media (max-width: 520px) { .demo-row { grid-template-columns: 90px 1fr 40px; } .demo-body { min-height: 280px; } }

/* Stacked W/D/L bar (demo and real answers) */
.stack { display: flex; height: 16px; background: var(--surface-2); overflow: hidden; }
.stack i { display: block; height: 100%; transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s var(--ease); transition-delay: calc(var(--d, 0ms)); }
.stack i.w { background: var(--win); } .stack i.d { background: var(--draw); } .stack i.l { background: var(--loss); }
.grown .stack i, .demo.on .stack i { transform: scaleX(1); }

/* Home sections below the fold */
.home-sec { margin-top: 52px; }
.home-h { font-size: 1.5rem; text-transform: uppercase; letter-spacing: .01em; margin: 0 0 14px; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s, transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.reveal.in { opacity: 1; transform: none; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--frame); }
.how-step { padding: 16px 18px 18px 0; }
.how-step + .how-step { padding-left: 18px; border-left: 1px solid var(--border); }
.step-n { display: block; font: 700 2.6rem/1 var(--display); color: var(--brand); margin-bottom: 6px; }
.how-step h3 { font-size: 1.15rem; text-transform: uppercase; margin: 0 0 4px; }
.how-step p { margin: 0; color: var(--text-2); }
@media (max-width: 800px) { .steps { grid-template-columns: minmax(0, 1fr); } .how-step, .how-step + .how-step { padding: 14px 0; border-left: 0; border-bottom: 1px solid var(--border); } }
.examples { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; }
.example { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 12px; border: 1px solid var(--frame); border-left: 4px solid var(--frame); background: var(--surface); transition: opacity .6s, transform .5s var(--ease), border-color .2s, box-shadow .3s var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }
.example q { font: 700 1.05rem/1.2 var(--display); quotes: "\201C" "\201D"; }
.example span { color: var(--muted); font-size: .82rem; }
.example.in:hover { border-left-color: var(--brand); transform: translateY(-3px); box-shadow: 4px 4px 0 var(--surface-3); transition-delay: 0ms; }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 2px solid var(--frame); background: var(--surface); }
.fact { padding: 16px 18px; }
.fact + .fact { border-left: 1px solid var(--border); }
.fact b { display: block; font: 700 2.4rem/1 var(--display); margin-bottom: 4px; }
.fact span { color: var(--text-2); font-size: .85rem; }
@media (max-width: 800px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fact:nth-child(3) { border-left: 0; } .fact:nth-child(n+3) { border-top: 1px solid var(--border); } }

/* ============================================================
   Player page
   ============================================================ */
.player-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.player-head h1 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; animation: rise .6s var(--ease) both; }
.player-head h1 .who { display: inline-flex; align-items: center; gap: 8px; }
.player-head h1 .plus { color: var(--muted); font-weight: 400; }
.head-tools { display: flex; gap: 8px; }

.imports { display: grid; gap: 8px; margin-top: 12px; }
.import { display: grid; grid-template-columns: 110px 1fr auto; gap: 12px; align-items: center; font-size: .82rem; }
.import .bar { height: 6px; background: var(--surface-3); overflow: hidden; position: relative; }
.import .bar i { position: absolute; inset: 0; background: var(--brand); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); transition: transform .8s var(--ease); }
.import.running .bar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transform: translateX(-100%); animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
.import.done .bar i { background: var(--win); }
.import.failed .bar i { background: var(--loss); }
.import .state { color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .import { grid-template-columns: 1fr; gap: 4px; } }

.ask { position: sticky; top: 53px; z-index: 20; background: var(--bg); padding: 12px 0 10px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.ask-row { display: flex; gap: 8px; align-items: stretch; border: 2px solid var(--frame); background: var(--surface); padding: 5px; transition: box-shadow .3s var(--ease); }
.ask-row:focus-within { box-shadow: 5px 5px 0 var(--surface-3); }
.ask-row .mark { align-self: center; padding: 0 4px 0 6px; font: 700 .75rem/1 var(--display); text-transform: uppercase; letter-spacing: .08em; color: var(--brand-ink); }
.ask-row input { flex: 1; border: 0; height: 40px; font-size: 1.02rem; padding: 0 6px; background: transparent; }
.ask-row input:focus { outline: none; }
.ask-row .btn { height: 40px; padding: 0 18px; }
.thread { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 8px; font-size: .8rem; color: var(--muted); align-items: center; }
.thread .turn { color: var(--text-2); }
.thread .turn + .turn::before { content: "→ "; color: var(--muted); }
.ask .try { margin-top: 8px; }

.answer { animation: rise .5s var(--ease) both; }
.answer-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; padding: 3px 4px 3px 9px; border: 1px solid var(--border-strong); background: var(--surface-2); animation: chip-in .4s var(--ease) both; animation-delay: calc(var(--i, 0) * 50ms); }
.chip button { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 4px; }
.chip button:hover { color: var(--loss); }
.chip.all { padding-right: 9px; color: var(--muted); }
@keyframes chip-in { from { opacity: 0; transform: translateY(6px); } }
.answer-note { font-size: .8rem; color: var(--muted); margin: 8px 0 0; }
/* What the last question or chip kept, changed and dropped (FR-01), under the chips. */
.answer-kept { font-size: .8rem; color: var(--text); margin: 2px 0 10px; line-height: 1.45; }
.answer-kept b { font-weight: 700; }
.answer-kept .muted { color: var(--muted); }
.answer-def { font-size: .9rem; color: var(--text); margin: 4px 0 10px; padding: 6px 10px; border-left: 3px solid var(--brand); background: var(--surface); }
.story-table tr.pick { cursor: pointer; }
.story-table tr.pick:hover, .story-table tr.pick:focus-visible { background: var(--row-hover); }

.rows { display: grid; gap: 0; border: 1px solid var(--border); background: var(--surface); }
.row { display: grid; grid-template-columns: minmax(120px, 2.2fr) minmax(0, 4fr) 60px 70px 100px; gap: 12px; align-items: center; padding: 7px 12px; border-bottom: 1px solid var(--grid); font-size: .84rem; opacity: 0; transform: translateX(-8px); transition: opacity .35s, transform .6s var(--ease), background .15s; transition-delay: calc(var(--i, 0) * 35ms); }
.grown .row { opacity: 1; transform: none; }
.row:last-child { border-bottom: 0; }
.row.head { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; background: var(--surface-2); opacity: 1; transform: none; }
.row .lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.row .n { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2); }
.row .pct { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.row.click { cursor: pointer; }
.row.click:hover { background: var(--row-hover); }
/* Phones: label, games and % on one line, the bar full width under them. */
@media (max-width: 700px) {
  .row { grid-template-columns: minmax(0, 1fr) auto 58px; gap: 4px 10px; }
  .row.head { display: none; }
  .row .stack { grid-column: 1 / -1; order: 5; height: 10px; }
  .row .wdl-cell { display: none; }
  .chart svg { height: 200px; }
}

/* Line charts */
.chart { position: relative; border: 1px solid var(--border); background: var(--surface); padding: 12px 12px 6px; }
.chart svg { display: block; width: 100%; height: 260px; overflow: visible; }
.chart .axis { stroke: var(--border-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart .gridl { stroke: var(--grid); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart .tick { font-size: 10px; fill: var(--muted); font-family: var(--font); }
.chart .col { fill: var(--surface-3); transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); transition: transform .8s var(--ease); transition-delay: var(--d, 0ms); }
.grown .chart .col { transform: scaleY(1); }
.chart .ln { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; clip-path: inset(0 100% 0 0); transition: clip-path 1.3s var(--ease) .2s; }
.grown .chart .ln { clip-path: inset(0 0 0 0); }
.chart .hit { fill: transparent; cursor: crosshair; }
.chart .mid { stroke: var(--border-strong); stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .78rem; color: var(--text-2); margin-bottom: 6px; }
.legend i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; vertical-align: -1px; }
.tip { position: fixed; z-index: 90; pointer-events: none; background: var(--text); color: var(--bg); font-size: .78rem; padding: 6px 9px; max-width: 260px; opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .2s var(--ease); }
.tip.on { opacity: 1; transform: none; }
.tip b { display: block; }
/* A tapped mark pins its tip with a button that narrows to it; the tip takes taps only then. */
.tip.pinned { pointer-events: auto; }
.tip-act { display: block; width: 100%; min-height: 44px; margin-top: 8px; padding: 8px 10px; border: 0; background: var(--bg); color: var(--text); font: 700 .8rem/1.2 var(--font); text-align: left; cursor: pointer; }
.tip-act:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Recent games */
.games-list td.res-cell { width: 26px; }
.games-list .mv { color: var(--muted); }

/* Overview */
.form-strip { display: flex; gap: 3px; flex-wrap: wrap; }
.form-strip i { width: 14px; height: 14px; display: inline-block; opacity: 0; transform: scale(.4); animation: pop .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 25ms); }
.form-strip i.W { background: var(--win); } .form-strip i.D { background: var(--draw); } .form-strip i.L { background: var(--loss); }
@keyframes pop { to { opacity: 1; transform: none; } }
.rating-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0; border: 1px solid var(--border); }
.rating-list > div { padding: 8px 12px; border-right: 1px solid var(--border); }
.rating-list b { display: block; font: 700 1.5rem/1.1 var(--display); font-variant-numeric: tabular-nums; }
.rating-list small { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.empty { border: 1px dashed var(--border-strong); padding: 26px; text-align: center; color: var(--text-2); }
.cant { border: 1px solid var(--border); border-left: 4px solid var(--loss); padding: 12px 14px; background: var(--surface); }
.cant ul { margin: 8px 0 0; padding-left: 18px; }

/* About / legal */
.prose { max-width: 760px; }
.prose h2 { margin-top: 26px; }
.prose p, .prose li { color: var(--text-2); line-height: 1.6; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; transition-delay: 0s !important; }
  .reveal, .row, .demo-row, .demo-kpis > div, .demo-chips span { opacity: 1; transform: none; }
  .stack i, .chart .col { transform: none; }
  .chart .ln { clip-path: none; }
}

/* ============================================================
   Chess dress (2026-09-29): a serif display face for the big words,
   a checker rule under the header, board motifs. Orange stays the accent.
   ============================================================ */
:root { --serif: "Playfair Display", Georgia, "Times New Roman", serif; --sq-light: #f0d9b5; --sq-dark: #b58863; --s5: #8e5bd6; --s6: #c2410c; }
:root[data-theme="dark"] { --sq-light: #8a7358; --sq-dark: #4f3d2a; --s5: #a47be6; --s6: #f07b3f; }
.site-header { border-bottom: 0; }
.site-header::after { content: ""; display: block; height: 6px; background: repeating-linear-gradient(90deg, var(--brand) 0 12px, var(--header-bg) 12px 24px); }
.brand { font-family: var(--serif); text-transform: none; letter-spacing: .01em; font-size: 1.45rem; font-weight: 800; }
.brand .logo { width: 28px; height: 28px; }
.hero-title, .page-head h1, .load-title, .home-h { font-family: var(--serif); text-transform: none; letter-spacing: -.01em; }
.hero-title { font-weight: 900; font-size: clamp(2.4rem, 5.2vw, 4.1rem); }
.hero-title .accent { font-style: italic; }
.page-head h1 { font-weight: 800; font-size: 2.1rem; }
.home-h { font-weight: 800; font-size: 1.8rem; }
.piece { font-size: 1.05em; line-height: 1; }
/* A faint board in the hero's corner. */
.hero { position: relative; isolation: isolate; }
.hero::before { content: ""; position: absolute; right: -20px; top: 8px; width: 260px; height: 260px; z-index: -1; opacity: .1;
  background: conic-gradient(var(--text) 25%, transparent 0 50%, var(--text) 0 75%, transparent 0) 0 0 / 65px 65px;
  -webkit-mask-image: radial-gradient(circle at 70% 30%, #000 30%, transparent 70%); mask-image: radial-gradient(circle at 70% 30%, #000 30%, transparent 70%); }
.ask-row .mark { display: inline-flex; align-items: center; gap: 6px; }
.knight { display: inline-flex; width: 18px; height: 18px; color: var(--brand); }
.knight svg { width: 100%; height: 100%; }

/* ---------- loading screen ---------- */
.loading-screen { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 36px; align-items: center; padding: 28px 0 40px; animation: rise .6s var(--ease) both; }
@media (max-width: 820px) { .loading-screen { grid-template-columns: minmax(0, 1fr); gap: 20px; } .load-board { width: 100%; max-width: 240px; margin: 0 auto; } }
.load-board { display: grid; grid-template-columns: repeat(8, 1fr); aspect-ratio: 1; border: 3px solid var(--frame); box-shadow: 8px 8px 0 var(--surface-3); }
.load-board i { background: var(--sq-light); animation: sq 3.2s var(--ease) infinite; animation-delay: calc(var(--i) * 45ms); }
.load-board i.dk { background: var(--sq-dark); }
@keyframes sq { 0%, 60%, 100% { box-shadow: none; } 30% { box-shadow: inset 0 0 0 40px rgba(200, 102, 28, .55); } }
.load-title { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 800; margin: 0 0 8px; }
.load-main .muted { max-width: 60ch; }
.load-bars { display: grid; gap: 10px; margin: 18px 0 6px; }
.load-eta { font-size: .85rem; color: var(--text-2); margin: 4px 0 18px; font-variant-numeric: tabular-nums; }
.tip-card { position: relative; border: 2px solid var(--frame); border-left: 6px solid var(--brand); background: var(--surface); padding: 14px 18px 16px; min-height: 104px; }
.tip-kind { display: block; font: 700 .7rem/1 var(--display); text-transform: uppercase; letter-spacing: .1em; color: var(--brand-ink); margin-bottom: 8px; opacity: 0; transition: opacity .3s; }
.tip-text { font-family: var(--serif); font-size: 1.2rem; line-height: 1.4; margin: 0; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .5s var(--ease); }
.tip-kind.in, .tip-text.in { opacity: 1; transform: none; }
.load-try { margin-top: 16px; }
.load-try ul { margin: 4px 0 0; padding-left: 18px; color: var(--text-2); font-size: .9rem; }
.import .bar { height: 10px; }

/* ---------- basics card ---------- */
.summary-card { border: 2px solid var(--frame); background: var(--surface); padding: 14px 16px 16px; margin-bottom: 16px; animation: rise .5s var(--ease) both; box-shadow: 6px 6px 0 var(--surface-3); }
.sum-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--border); }
.sum-grid .kpi { border-right: 1px solid var(--border); }
.sum-grid .kpi:last-child { border-right: 0; }
@media (max-width: 700px) { .sum-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sum-grid .kpi:nth-child(2n) { border-right: 0; } .sum-grid .kpi:nth-child(n+3) { border-top: 1px solid var(--border); } }
.wdl-bar { margin-top: 12px; }
.stack.big { height: 14px; }
.wdl-legend { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: .8rem; color: var(--text-2); margin-top: 6px; }
.wdl-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; }
.wdl-legend i.w { background: var(--win); } .wdl-legend i.d { background: var(--draw); } .wdl-legend i.l { background: var(--loss); }
.rating-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.rating-card { display: grid; gap: 2px; text-align: left; border: 1px solid var(--border); background: var(--surface); color: var(--text); padding: 10px 12px; font: inherit; cursor: pointer; transition: transform .2s var(--ease), border-color .2s, box-shadow .25s var(--ease); }
.rating-card:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: 3px 3px 0 var(--surface-3); }
.rc-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.rc-name { font: 700 .72rem/1 var(--display); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.rc-num { display: flex; align-items: baseline; gap: 8px; }
.rc-num b { font: 700 1.8rem/1.05 var(--display); font-variant-numeric: tabular-nums; }
.rating-card small { font-size: .72rem; color: var(--muted); }
.chg { font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.chg.up { color: var(--win); } .chg.down { color: var(--loss); }
.form-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; }

/* ---------- answers ---------- */
.answer-tools { display: flex; gap: 14px; align-items: center; }
.top-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; padding: 9px 12px; border: 1px solid var(--brand); background: var(--row-hover); font-size: .92rem; animation: rise .5s var(--ease) .2s both; }
.top-pick b { font-family: var(--serif); font-size: 1.05rem; }
.answer > .top-pick { margin: 10px 0 12px; font-size: 1.05rem; font-weight: 600; }
.top-pick.flat { border-color: var(--border-strong); background: var(--surface-2); }
.crown { display: inline-flex; width: 18px; height: 18px; color: var(--brand); }
.crown svg { width: 100%; }
.rows.with-delta .row { grid-template-columns: minmax(120px, 2.2fr) minmax(0, 4fr) 60px 70px 56px 110px; }
.row .pct .pm { font-weight: 400; color: var(--muted); font-size: .72rem; margin-left: 5px; }
.delta-cell.up { color: var(--win); font-weight: 700; } .delta-cell.down { color: var(--loss); font-weight: 700; }
.row.thin { color: var(--muted); } .row.thin .stack { opacity: .5; }
.row.now { opacity: 1; transform: none; transition: none; }
.sort-h { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; text-align: inherit; }
.sort-h.n, .sort-h.pct { text-align: right; }
.sort-h:hover { color: var(--text); text-decoration: underline; }
@media (max-width: 700px) { .rows.with-delta .row { grid-template-columns: minmax(0, 1fr) auto 48px 76px; } .row .bar-h { display: none; } }
details.sql { margin-top: 12px; font-size: .8rem; }
details.sql summary { cursor: pointer; color: var(--link); }
details.sql pre { overflow: auto; max-height: 320px; background: var(--surface-2); border: 1px solid var(--border); padding: 10px 12px; font: 12px/1.45 ui-monospace, Consolas, monospace; white-space: pre; }

/* ---------- heat map ---------- */
.heat-wrap { overflow-x: auto; border: 1px solid var(--border); background: var(--surface); padding: 10px; }
.heat { display: grid; grid-template-columns: minmax(70px, max-content) repeat(var(--cols), minmax(30px, 1fr)); gap: 2px; min-width: min-content; font-variant-numeric: tabular-nums; }
.heat-col { font-size: .66rem; color: var(--muted); text-align: center; white-space: nowrap; align-self: end; padding-bottom: 2px; }
.heat-row { font-size: .75rem; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; align-self: center; padding-right: 6px; }
.heat-cell { height: 30px; border: 0; font: 600 .7rem/30px var(--font); text-align: center; padding: 0; color: var(--text); cursor: pointer; transform: scale(.4); opacity: 0; transition: transform .5s var(--ease), opacity .3s; transition-delay: var(--d, 0ms); }
.grown .heat-cell { transform: none; opacity: 1; }
.heat-cell.hi { background: color-mix(in srgb, var(--brand) calc(var(--t) * 85%), var(--surface-2)); }
.heat-cell.lo { background: color-mix(in srgb, #6b6b6b calc(var(--t) * 75%), var(--surface-2)); }
.heat-cell:hover { outline: 2px solid var(--text); outline-offset: -2px; }
.heat-cell.empty { background: repeating-linear-gradient(45deg, var(--surface-2) 0 3px, transparent 3px 6px); cursor: default; transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .heat-cell { transform: none; opacity: 1; } .load-board i { animation: none; } }

/* ============================================================
   Dashboard layout (2026-09-29): wider pages, the basics card in two
   halves, the breakdown as a grid of panels, hover everywhere.
   ============================================================ */
.wrap { max-width: 1520px; padding: 0 24px; }
@media (max-width: 640px) { .wrap { padding: 0 16px; } }
/* The hero title's descenders and the italic "anything." sat outside the clipping line box. */
.hero-title { line-height: 1.02; }
.hero-title .line { padding: .1em .12em .16em 0; margin: -.1em 0 -.16em; }

.summary-card { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px 26px; align-items: start; }
@media (max-width: 1100px) { .summary-card { grid-template-columns: minmax(0, 1fr); } }
.sum-right .section-head { margin-bottom: 8px; }
.sum-right .rating-cards { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.summary-card .kpi { cursor: default; }
.form-strip a { width: 14px; height: 14px; display: inline-block; opacity: 0; transform: scale(.4); animation: pop .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 25ms); transition: transform .15s var(--ease); }
.form-strip a.W { background: var(--win); } .form-strip a.D { background: var(--draw); } .form-strip a.L { background: var(--loss); }
.form-strip a:hover { transform: scale(1.35); outline: 2px solid var(--text); outline-offset: 1px; }
.stack.big i { cursor: default; }
.stack.big i:hover { filter: brightness(1.12); }

.panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1250px) { .panels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .panels { grid-template-columns: minmax(0, 1fr); } }
.panel { border: 1px solid var(--border); background: var(--surface); padding: 10px 12px 12px; transition: box-shadow .3s var(--ease), border-color .2s; min-width: 0; }
.panel:hover { border-color: var(--border-strong); box-shadow: 4px 4px 0 var(--surface-3); }
.panel.wide { grid-column: 1 / -1; }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; border-bottom: 2px solid var(--text); padding-bottom: 3px; margin-bottom: 8px; }
.panel-head h3 { margin: 0; font-family: var(--display); text-transform: uppercase; letter-spacing: .03em; font-size: .95rem; }
.panel-head .more { font-size: .75rem; color: var(--muted); }
/* Panels are narrow: drop the W-D-L column, keep bar, games and %. */
.panel .rows { border: 0; }
.panel .row { grid-template-columns: minmax(90px, 1.5fr) minmax(0, 2fr) 54px 58px; gap: 10px; padding: 6px 4px; }
.panel .row .wdl-cell { display: none; }
.panel .heat-wrap { border: 0; padding: 0; }
.row.click:hover .lbl { color: var(--brand-ink); }

/* ---------- loading screen with a replayed game ---------- */
.loading-screen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 18px 0 30px; align-items: stretch; }
.load-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px 32px; align-items: end; }
@media (max-width: 900px) { .load-head { grid-template-columns: minmax(0, 1fr); } }
.load-head .load-title { margin-bottom: 4px; }
.load-progress .load-bars { margin: 0; }
.load-progress .load-eta { margin: 6px 0 0; }
.famous { display: grid; grid-template-columns: minmax(260px, 520px) minmax(0, 1fr); gap: 28px; align-items: start; border: 2px solid var(--frame); background: var(--surface); padding: 18px; box-shadow: 8px 8px 0 var(--surface-3); }
@media (max-width: 900px) { .famous { grid-template-columns: minmax(0, 1fr); } }
.fb-board { display: grid; grid-template-columns: repeat(8, 1fr); aspect-ratio: 1; border: 3px solid var(--frame); width: 100%; }
.fb-sq { position: relative; display: grid; place-items: center; }
.fb-sq.lt { background: var(--sq-light); } .fb-sq.dk { background: var(--sq-dark); }
.fb-sq.last::after { content: ""; position: absolute; inset: 0; background: rgba(200, 102, 28, .42); }
.fb-pc { position: relative; z-index: 1; font-size: clamp(22px, 4.6vw, 48px); line-height: 1; animation: land .35s var(--ease); font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "DejaVu Sans", serif; }
.fb-pc.w { color: #fff; text-shadow: 0 0 2px #000, 0 0 1px #000, 0 1px 0 #000; }
.fb-pc.b { color: #111; text-shadow: 0 0 1px #fff; }
@keyframes land { from { transform: scale(1.25); opacity: .4; } }
.fb-rank, .fb-file { position: absolute; font: 700 10px/1 var(--font); color: rgba(0, 0, 0, .55); z-index: 2; }
.fb-rank { left: 3px; top: 3px; } .fb-file { right: 3px; bottom: 2px; }
.fb-story { display: flex; flex-direction: column; min-height: 0; max-height: 520px; }
.fb-title { font-family: var(--serif); font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 800; margin: 0 0 2px; }
.fb-who { color: var(--text-2); font-weight: 500; margin: 0 0 10px; }
.fb-blurb { color: var(--text-2); line-height: 1.55; margin: 0 0 12px; max-width: 62ch; }
.fb-moves { list-style: none; counter-reset: mv; margin: 0; padding: 6px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2px 14px; overflow: auto; flex: 1; min-height: 120px; font: 500 .9rem/1.6 ui-monospace, Consolas, monospace; }
.fb-moves li { counter-increment: mv; display: grid; grid-template-columns: 30px 1fr 1fr; }
.fb-moves li::before { content: counter(mv) "."; color: var(--muted); }
.fb-moves span.now { background: var(--brand); color: #fff; padding: 0 4px; margin-left: -4px; }
.fb-result { margin: 10px 0 0; font-weight: 700; color: var(--brand-ink); min-height: 1.4em; }
.loading-screen .tip-card { min-height: 0; }
@media (prefers-reduced-motion: reduce) { .fb-pc { animation: none; } .form-strip a { animation: none; opacity: 1; transform: none; } }

.more-row { display: flex; justify-content: center; margin-top: 10px; }
.more-btn { min-width: 180px; }
.more-btn[hidden] { display: none; }

.scope { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: -2px 0 12px; padding: 8px 12px; border-left: 4px solid var(--brand); background: var(--row-hover); font-size: .85rem; }
.scope.all { border-left-color: var(--border-strong); background: var(--surface-2); color: var(--text-2); }
.scope .chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.eyebrow.lifetime { color: var(--muted); margin: 4px 0 6px; }

.load-fields.one { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.load-fields.one .btn { height: 38px; }
.profile-link { font: 500 .8rem/1 var(--font); margin-left: 12px; vertical-align: middle; }

.share { display: inline-flex; gap: 6px; align-items: center; }
.answer-tools { flex-wrap: wrap; }

/* Breakdown grid without gaps (2026-09-29): panels in a row share its height and their rows
   spread to fill it; the last panel stretches across whatever columns its row has left. */
.panels { align-items: stretch; }
.panel { display: flex; flex-direction: column; }
.panel > .rows { flex: 1; display: flex; flex-direction: column; }
.panel > .rows > .row:not(.head) { flex: 1; min-height: 34px; }
@media (min-width: 1251px) {
  .panels > .panel:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
  .panels > .panel:last-child:nth-child(3n+2) { grid-column: span 2; }
}
@media (min-width: 761px) and (max-width: 1250px) {
  .panels > .panel:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.panel.wide.section { margin-top: 16px; }

.colour-panel { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.sides { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.side { display: flex; flex-direction: column; gap: 6px; text-align: left; font: inherit; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); padding: 12px 14px; cursor: pointer; transition: border-color .2s, transform .2s var(--ease), box-shadow .25s var(--ease); }
.side:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: 3px 3px 0 var(--surface-3); }
.side.none { cursor: default; justify-content: center; align-items: center; }
.side-top { display: flex; align-items: center; gap: 8px; }
.side-glyph { font-size: 2rem; line-height: 1; }
.side-name { font: 700 .8rem/1 var(--display); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.side-score { font: 700 2.4rem/1 var(--display); color: var(--brand-ink); font-variant-numeric: tabular-nums; margin-top: 6px; }
.side-l { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.side .stack { height: 12px; margin-top: auto; }
.side-wdl { display: flex; gap: 10px; font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.side-sub { font-size: .78rem; color: var(--text-2); }
.side-diff { margin: 0; font-size: .85rem; color: var(--text-2); border-top: 1px solid var(--grid); padding-top: 8px; }
@media (max-width: 420px) { .sides { grid-template-columns: 1fr; } }

/* ---------- /admin/usage ---------- */
.admin-login { max-width: 460px; padding-top: 12vh; }
.admin-login h1 { font-family: var(--serif); margin-bottom: 14px; }
.admin-login .field input { width: 100%; }
.adm-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px; }
.adm-kpis { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.adm-kpis .kpi { border-bottom: 1px solid var(--border); }
.adm-bars { display: grid; gap: 5px; }
.adm-bar { display: grid; grid-template-columns: 120px 1fr 60px; gap: 8px; align-items: center; font-size: .8rem; }
.adm-bar .lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-bar .track { height: 12px; background: var(--surface-2); }
.adm-bar .track i { display: block; height: 100%; background: var(--brand); }
.adm-bar .n { text-align: right; font-variant-numeric: tabular-nums; }
.adm-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1000px) { .adm-two { grid-template-columns: minmax(0, 1fr); } }
.adm-two .panel { max-height: 560px; overflow: auto; }
.adm-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; align-items: center; }
.adm-filters select { height: 38px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); padding: 0 8px; }
body.admin table.stats td.l { white-space: normal; max-width: 420px; }
/* The replay board: fixed rows as well as columns, so a square holding a piece never grows. */
.fb-board { grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(8, minmax(0, 1fr)); }
.fb-sq { min-width: 0; min-height: 0; overflow: hidden; }
.fb-pc { position: absolute; inset: 0; display: grid; place-items: center; font-size: min(4.6vw, 48px); }
/* ---------- radar and donut ---------- */
.radar-wrap { display: grid; justify-items: center; gap: 6px; }
.radar { width: 100%; max-width: 360px; overflow: visible; }
.radar-ring { fill: none; stroke: var(--grid); }
.radar-spoke { stroke: var(--grid); }
.radar-label { font: 700 11px var(--display); text-transform: uppercase; letter-spacing: .05em; fill: var(--text-2); }
.radar-area { fill: var(--c); fill-opacity: .18; stroke: var(--c); stroke-width: 2.5; stroke-linejoin: round; transform-origin: center; transform-box: fill-box; transform: scale(0); transition: transform .9s var(--ease); transition-delay: var(--d, 0ms); }
.grown .radar-area { transform: scale(1); }
.radar-dot { fill: var(--c); stroke: var(--surface); stroke-width: 2; cursor: default; }
.donut-wrap { display: grid; grid-template-columns: minmax(120px, 180px) 1fr; gap: 14px; align-items: center; }
.donut { width: 100%; }
.donut-arc { stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset 1.1s var(--ease); transition-delay: var(--d, 0ms); }
.grown .donut-arc { stroke-dashoffset: 0; }
.donut-n { font: 700 26px var(--display); fill: var(--text); }
.donut-l { font: 12px var(--font); fill: var(--muted); }
.donut-legend { display: grid; gap: 4px; font-size: .8rem; color: var(--text-2); }
.donut-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; }
@media (prefers-reduced-motion: reduce) { .radar-area { transform: none; } .donut-arc { stroke-dashoffset: 0; } }

/* ---------- findings ---------- */
.findings { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 16px; align-items: stretch; }
@media (max-width: 980px) { .findings { grid-template-columns: minmax(0, 1fr); } }
.finding-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.finding { display: grid; gap: 4px; text-align: left; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--brand); padding: 10px 12px; cursor: pointer; transition: transform .2s var(--ease), box-shadow .25s var(--ease), border-color .2s; animation: rise .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
.finding:hover { transform: translateY(-2px); box-shadow: 3px 3px 0 var(--surface-3); border-color: var(--brand); }
.finding .ft { font: 700 .7rem/1.2 var(--display); text-transform: uppercase; letter-spacing: .07em; color: var(--brand-ink); }
.finding .fx { font-family: var(--serif); font-size: 1.05rem; line-height: 1.3; }
.finding .fs { font-size: .78rem; color: var(--text-2); }
.finding .fq { font-size: .75rem; color: var(--link); }
.plan { border: 2px solid var(--frame); border-left: 6px solid var(--brand); background: var(--surface); padding: 14px 18px; box-shadow: 6px 6px 0 var(--surface-3); }
.plan .headline { font-family: var(--serif); font-size: 1.45rem; font-weight: 800; line-height: 1.25; margin: 0 0 8px; }
.plan ul { margin: 0; padding-left: 18px; color: var(--text-2); }
.undo { margin-right: 4px; }
.form-count { font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- compare ---------- */
.player-head h1 .vs { font-style: italic; color: var(--brand); font-weight: 700; margin: 0 14px; }
.compare-hero .compare-list { display: grid; gap: 8px; }
.compare-hero .example q { font-size: 1rem; }
.tape td, .tape th { font-size: .9rem; }
.tape td.lead { color: var(--brand-ink); font-weight: 700; }
.finding.static { cursor: default; }
.finding.static:hover { transform: none; box-shadow: none; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-bottom: 12px; }
.slot { display: grid; gap: 2px; text-align: left; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--brand); padding: 10px 12px; cursor: pointer; animation: rise .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); transition: transform .2s var(--ease), box-shadow .25s; }
.slot:hover { transform: translateY(-2px); box-shadow: 3px 3px 0 var(--surface-3); }
.slot b { font-family: var(--serif); font-size: 1.15rem; }
.slot span { color: var(--win); font-weight: 700; font-size: .85rem; }
.slot small { color: var(--muted); font-size: .75rem; }
.vs-rows { display: grid; gap: 8px; }
.vs-row { display: grid; grid-template-columns: minmax(90px, 1.3fr) 1fr 52px 1fr 52px; gap: 8px; align-items: center; font-size: .82rem; }
.vs-row .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-row b { text-align: right; font-variant-numeric: tabular-nums; }
.vs-bar { height: 12px; background: var(--surface-2); }
.vs-bar i { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0); transition: transform .9s var(--ease); }
.grown .vs-bar i { transform: scaleX(1); }
.vs-bar i.you { background: var(--brand); } .vs-bar i.them { background: var(--s1); }
ul.h2h { list-style: none; padding: 0; margin: 10px 0 0; font-size: .82rem; display: grid; gap: 4px; }
@media (prefers-reduced-motion: reduce) { .vs-bar i { transform: none; } }

.btn.continue { border-color: var(--brand); color: var(--brand-ink); margin-right: 8px; }

/* ---------- accounts ---------- */
.account-link { text-decoration: none; }
.account-grid { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 860px) { .account-grid { grid-template-columns: minmax(0, 1fr); } }
.account-form .seg { margin-bottom: 12px; }
.account-form .field { margin-bottom: 10px; }
.account-form .field input { width: 100%; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
ul.benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
ul.benefits li { display: grid; gap: 2px; padding: 10px 14px; border-left: 4px solid var(--brand); background: var(--surface-2); }
ul.benefits b { font-family: var(--serif); font-size: 1.1rem; }
ul.benefits span { color: var(--text-2); font-size: .9rem; }
.inline { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.goals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.goal { display: grid; gap: 3px; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.goal input { width: 100%; }
ul.plain { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; font-size: .9rem; }
.btn.danger { border-color: var(--loss); color: var(--loss); }
.btn.pin { border-color: var(--brand); color: var(--brand-ink); }
.since { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-bottom: 14px; padding: 10px 14px; border: 1px solid var(--brand); border-left: 6px solid var(--brand); background: var(--row-hover); font-size: .9rem; animation: rise .5s var(--ease) both; }
.since-h { font: 700 .72rem/1 var(--display); text-transform: uppercase; letter-spacing: .08em; color: var(--brand-ink); width: 100%; }
.since-cta { margin-left: auto; font-weight: 700; }
.pins { margin-top: 8px; }
.pins > span { color: var(--brand-ink); font-weight: 700; }
.goal-bar { display: block; height: 5px; background: var(--surface-3); margin-top: 6px; }
.goal-bar i { display: block; height: 100%; background: var(--brand); }
.goal-t { font-size: .7rem; color: var(--brand-ink); }
.cta-line { grid-column: 1 / -1; margin: 10px 0 0; font-size: .85rem; color: var(--text-2); }

/* ---------- locks, feedback ---------- */
.lock-card { border: 2px solid var(--frame); border-left: 6px solid var(--brand); background: var(--surface); padding: 16px 18px; display: grid; gap: 10px; }
.lock-h { font-family: var(--serif); font-size: 1.35rem; font-weight: 800; margin: 0; }
label.check.news { height: auto; align-items: flex-start; font-size: .82rem; margin: 4px 0 8px; }
dialog.feedback { border: 2px solid var(--frame); padding: 18px 20px; width: min(520px, calc(100vw - 32px)); background: var(--surface); color: var(--text); box-shadow: 8px 8px 0 var(--surface-3); }
dialog.feedback::backdrop { background: rgba(0, 0, 0, .45); }
dialog.feedback h2 { font-family: var(--serif); text-transform: none; font-size: 1.5rem; }
dialog.feedback .field { margin-bottom: 10px; }
dialog.feedback textarea, dialog.feedback input[type=email] { width: 100%; font: inherit; padding: 8px 10px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); }
/* Phones: the menu gets its own row under the brand and the account/theme buttons. */
@media (max-width: 700px) {
  .site-header .wrap { flex-wrap: wrap; height: auto; padding-top: 8px; gap: 6px 10px; }
  .nav { order: 3; flex-basis: 100%; height: auto; justify-content: space-between; }
  .nav a { line-height: 38px; padding: 0 4px; font-size: .78rem; }
  .header-tools { margin-left: auto; }
  .brand { font-size: 1.25rem; }
  .brand .logo { width: 24px; height: 24px; }
}
/* The faint board behind the hero stays inside the page; header buttons wrap on narrow phones. */
.hero::before { right: 0; }
@media (max-width: 700px) { .hero::before { display: none; } }
.head-tools { flex-wrap: wrap; justify-content: flex-end; }

/* The strip under the header (public/js/tipbar.js), in the site's orange. */
.tip-strip { background: #1c1712; border-bottom: 1px solid #3a2b1c; color: #e3d6c6; font-size: .85rem; }
.tip-strip .wrap { display: flex; align-items: center; justify-content: center; gap: 12px; padding-top: 6px; padding-bottom: 6px; flex-wrap: wrap; }
.tip-strip-link { color: #f0a060; font-weight: 700; text-decoration: none; border: 1px solid #7a4a22; padding: 3px 10px; }
.tip-strip-link:hover { background: #2e2216; text-decoration: none; }
.tip-strip-feedback { color: #e3d6c6; text-decoration: underline; text-underline-offset: 2px; }
.tip-strip-close { background: none; border: 0; color: #a8998a; font-size: 1.1rem; cursor: pointer; padding: 0 4px; line-height: 1; }
.tip-strip-close:hover { color: #fff; }
@media (max-width: 520px) { .tip-strip-say { display: none; } }
.tip-nudge { position: fixed; right: 16px; bottom: 16px; z-index: 60; max-width: 340px; background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-top: 3px solid var(--brand); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); padding: 12px 14px; animation: rise .3s var(--ease); }
.tip-nudge p { margin: 0 0 10px; font-size: .88rem; line-height: 1.4; }
.tip-nudge-row { display: flex; gap: 8px; }
.tip-nudge.leaving { opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; }
@media (max-width: 520px) { .tip-nudge { left: 12px; right: 12px; max-width: none; } }
.tip-thanks-back { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, .55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.tip-thanks { background: var(--surface); color: var(--text); border-top: 5px solid var(--brand); box-shadow: 0 24px 60px rgba(0, 0, 0, .4); max-width: 520px; width: 100%; padding: 32px 32px 28px; text-align: center; animation: rise .3s var(--ease); }
.tip-thanks-icon { font-size: 3rem; line-height: 1; margin-bottom: 10px; color: var(--brand); }
.tip-thanks h2 { font-family: var(--serif); font-size: 2rem; margin: 0 0 10px; text-transform: none; }
.tip-thanks p { font-size: 1.05rem; margin: 0 0 22px; color: var(--text-2); }

/* ---------- should I play another? ---------- */
.tilt { margin-top: 16px; border: 1px solid var(--border); border-left: 5px solid var(--win); background: var(--surface); padding: 10px 14px; animation: rise .5s var(--ease) both; }
.tilt.careful { border-left-color: var(--s4); } .tilt.stop { border-left-color: var(--loss); } .tilt.fresh { border-left-color: var(--s1); }
.tilt-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.tilt-head .eyebrow { margin: 0; }
.tilt-verdict { font-family: var(--serif); font-size: 1.2rem; }
.tilt p { margin: 4px 0 0; color: var(--text-2); }
.tilt-why { margin: 6px 0 0; padding-left: 18px; font-size: .84rem; color: var(--text-2); }
.tilt-why li.bad { color: var(--loss); }

/* ---------- achievements, people, tools ---------- */
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.badge { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 8px 10px; border: 1px dashed var(--border); color: var(--muted); opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .6s var(--ease), border-color .2s; transition-delay: calc(var(--i, 0) * 40ms); }
.grown .badge { opacity: 1; transform: none; }
.badge .bi { grid-row: 1 / 3; font-size: 1.5rem; text-align: center; filter: grayscale(1); opacity: .45; }
.badge b { font: 700 .82rem/1.2 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.badge small { font-size: .72rem; }
.badge.got { border: 1px solid var(--brand); color: var(--text); background: var(--surface); }
.badge.got .bi { filter: none; opacity: 1; }
.badge.got small { color: var(--brand-ink); }
.badge:hover, .badge:focus-visible { border-color: var(--brand); }
.people, .tools { display: grid; gap: 8px; }
.person, .tool { display: grid; gap: 2px; text-align: left; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--brand); padding: 8px 10px; cursor: pointer; text-decoration: none; transition: transform .2s var(--ease), box-shadow .25s var(--ease); }
.person:hover, .tool:hover { transform: translateY(-2px); box-shadow: 3px 3px 0 var(--surface-3); text-decoration: none; }
.person .eyebrow { margin: 0; }
.person b { font-family: var(--serif); font-size: 1.15rem; }
.person small, .tool small { color: var(--text-2); font-size: .78rem; }
.person .fq { font-size: .75rem; color: var(--link); }
.tool b { font: 700 .9rem/1.2 var(--display); text-transform: uppercase; letter-spacing: .03em; }

/* ---------- Chess Wrapped ---------- */
.wrapped-pick { max-width: 520px; margin: 32px auto; }
.wrapped-shell { display: grid; justify-items: center; gap: 14px; padding: 20px 0 40px; }
.wdeck { position: relative; width: min(420px, 100%); aspect-ratio: 9 / 15; background: #111; color: #fff; overflow: hidden; cursor: pointer; user-select: none; box-shadow: 8px 8px 0 var(--surface-3); outline-offset: 4px; }
.wbars { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 4px; z-index: 2; }
.wbars i { flex: 1; height: 3px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.wbars i b { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: 0 50%; }
.wbars i.done b { transform: scaleX(1); }
.wbars i.now b { animation: wfill 7s linear forwards; }
@keyframes wfill { to { transform: scaleX(1); } }
.wcard { position: absolute; inset: 0; padding: 48px 26px 26px; display: flex; flex-direction: column; justify-content: center; gap: 12px; opacity: 0; transform: scale(.97); transition: opacity .45s, transform .6s var(--ease); pointer-events: none; }
.wcard.on { opacity: 1; transform: none; pointer-events: auto; }
.wcard.c1 { background: linear-gradient(160deg, #c8661c, #5a2606); }
.wcard.c2 { background: linear-gradient(160deg, #1d3b6e, #0b1426); }
.wcard.c3 { background: linear-gradient(160deg, #b58863, #3d2a18); }
.wcard.c4 { background: linear-gradient(160deg, #7a1f1d, #1c0707); }
.wcard.c5 { background: linear-gradient(160deg, #146b4a, #04211a); }
.wcard.c6 { background: linear-gradient(160deg, #3b2f73, #120d2a); }
.wcard.c7 { background: linear-gradient(160deg, #c2410c, #3a1204); }
.wcard.c8 { background: linear-gradient(160deg, #111, #3a2f20); }
.wcard.c9 { background: linear-gradient(160deg, #c8661c, #111 70%); }
.wcard h2 { margin: 0; font-family: var(--serif); font-size: 2.2rem; line-height: 1.1; }
.wcard p { margin: 0; font-size: 1rem; line-height: 1.45; color: rgba(255, 255, 255, .88); }
.wcard p.weye { font: 700 .75rem/1 var(--display); text-transform: uppercase; letter-spacing: .14em; color: #ffd2a8; }
.wcard p.wlead { font-family: var(--serif); font-size: 1.2rem; }
.wbig { display: grid; }
.wbig b { font: 800 4.2rem/1 var(--display); font-variant-numeric: tabular-nums; }
.wbig span { font-size: .9rem; color: rgba(255, 255, 255, .75); }
.wcard.on .wbig b, .wcard.on h2 { animation: rise .7s var(--ease) both; }
.wrow { display: grid; gap: 2px; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .2); }
.wrow span { font: 700 .72rem/1 var(--display); text-transform: uppercase; letter-spacing: .1em; color: rgba(255, 255, 255, .65); }
.wrow b { font-family: var(--serif); font-size: 1.35rem; line-height: 1.2; }
.wrow small { color: rgba(255, 255, 255, .75); }
.wraw { color: rgba(255, 255, 255, .6); }
.wcard p.wsite { font: 700 .8rem/1 var(--display); letter-spacing: .1em; text-transform: uppercase; margin-top: auto; }
.wmonths { display: flex; align-items: flex-end; gap: 4px; height: 90px; margin: 10px 0 16px; }
.wmonths i { flex: 1; height: var(--h); background: rgba(255, 255, 255, .8); position: relative; transform-origin: 50% 100%; }
.wcard.on .wmonths i { animation: wgrow .8s var(--ease) both; }
@keyframes wgrow { from { transform: scaleY(0); } }
.wmonths span { position: absolute; bottom: -16px; left: 0; right: 0; text-align: center; font-size: .6rem; color: rgba(255, 255, 255, .6); }
.wtools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.wyears { display: flex; gap: 2px; }
.wyears a { padding: 3px 8px; font-size: .78rem; border: 1px solid var(--border); color: var(--text-2); }
.wyears a.on { background: var(--text); color: var(--bg); border-color: var(--text); }

/* ---------- league ---------- */
table.league td.lead { font-weight: 700; }
table.stats td.up { color: var(--win); } table.stats td.down { color: var(--loss); }
table.h2h-grid td, table.h2h-grid th { text-align: center; }
table.h2h-grid td.self { background: var(--surface-3); }
table.h2h-grid td.none { color: var(--muted); }
table.h2h-grid td.up a { color: var(--win); font-weight: 700; } table.h2h-grid td.down a { color: var(--loss); font-weight: 700; }

/* ---------- opening tree ---------- */
.tree-crumbs { display: flex; flex-wrap: wrap; gap: 2px 6px; font: 600 .9rem/1.4 var(--font); margin-bottom: 12px; }
.tree-crumbs a:last-child { color: var(--brand-ink); }
.tree-list { display: grid; border: 1px solid var(--border); background: var(--surface); }
.tree-row { display: grid; grid-template-columns: 70px minmax(0, 1.4fr) 110px minmax(0, 2fr) 54px; gap: 12px; align-items: center; padding: 7px 12px; border-bottom: 1px solid var(--grid); color: var(--text); text-decoration: none; font-size: .86rem; opacity: 0; transform: translateX(-8px); transition: opacity .35s, transform .6s var(--ease), background .15s; transition-delay: calc(var(--i, 0) * 30ms); }
.grown .tree-row { opacity: 1; transform: none; }
a.tree-row:hover { background: var(--row-hover); text-decoration: none; }
.tree-row.end { color: var(--muted); }
.tree-move { font: 700 1rem/1 var(--display); }
.tree-bar { height: 8px; background: var(--surface-2); }
.tree-bar i { display: block; height: 100%; background: var(--brand); }
.tree-row .n { text-align: right; color: var(--text-2); font-variant-numeric: tabular-nums; }
.tree-row .pct { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .tree-row { grid-template-columns: 56px minmax(0, 1fr) 54px; } .tree-row .tree-bar, .tree-row .n { display: none; } }

/* ---------- opening pages ---------- */
.opening-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.opening-index .example { opacity: 1; transform: none; text-decoration: none; color: var(--text); }
.opening-index .example:hover { border-left-color: var(--brand); transform: translateY(-3px); box-shadow: 4px 4px 0 var(--surface-3); }
.crumbs { margin: 0 0 4px; font-size: .8rem; }
.orow { display: grid; grid-template-columns: minmax(80px, 1.2fr) minmax(0, 2fr) 48px 52px; gap: 10px; align-items: center; padding: 6px 2px; border-bottom: 1px solid var(--grid); font-size: .84rem; }
.orow span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orow b { text-align: right; font-variant-numeric: tabular-nums; }
.orow small { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .badge, .tree-row { opacity: 1; transform: none; transition: none; }
  .wcard, .wcard.on .wbig b, .wcard.on h2, .wcard.on .wmonths i, .tilt { animation: none; transition: none; }
  .wbars i.now b { animation: none; transform: scaleX(1); }
}

/* segmented toggle (league period, tree colour, account tabs) */
.seg { display: inline-flex; border: 1px solid var(--border-strong); }
.seg button { border: 0; border-right: 1px solid var(--border); background: var(--surface); color: var(--text-2); font: 600 .78rem/1 var(--font); padding: 7px 11px; cursor: pointer; transition: background .15s; }
.seg button:last-child { border-right: 0; }
.seg button:hover { background: var(--surface-2); }
.seg button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
table.h2h-grid tbody th { color: var(--text); text-align: left; font-weight: 600; }
.wmonths i span { font-style: normal; }
.tree-row { grid-template-columns: 96px minmax(0, 1.4fr) 110px minmax(0, 2fr) 54px; }
.orow { grid-template-columns: minmax(110px, 2fr) minmax(0, 1.4fr) 48px 44px; }
.panel.span2 { grid-column: span 2; }
.panel.span2 .tools, .panel.wide .tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .panel.span2 { grid-column: auto; } .panel.span2 .tools, .panel.wide .tools { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Wrapped fills the screen: a full-width band in the card's colour, chapters left, numbers right ---------- */
.wrapped-shell { display: block; padding: 0; --tone-a: #c8661c; --tone-b: #5a2606; background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--tone-a) 55%, #111), #0c0c0c 70%); transition: background .8s var(--ease); color: #fff; min-height: calc(100vh - 170px); }
.wrapped-shell[data-tone="c2"] { --tone-a: #1d3b6e; } .wrapped-shell[data-tone="c3"] { --tone-a: #b58863; }
.wrapped-shell[data-tone="c4"] { --tone-a: #7a1f1d; } .wrapped-shell[data-tone="c5"] { --tone-a: #146b4a; }
.wrapped-shell[data-tone="c6"] { --tone-a: #3b2f73; } .wrapped-shell[data-tone="c7"] { --tone-a: #c2410c; }
.wrapped-shell[data-tone="c8"] { --tone-a: #3a2f20; } .wrapped-shell[data-tone="c9"] { --tone-a: #c8661c; }
.wstage { max-width: 1400px; margin: 0 auto; padding: 28px 24px 36px; display: grid; grid-template-columns: minmax(180px, 1fr) auto minmax(220px, 1fr); gap: 40px; align-items: center; }
.wcenter { display: grid; justify-items: center; gap: 14px; }
.wrapped-shell .wdeck { width: auto; height: min(calc(100vh - 260px), 860px); min-height: 520px; aspect-ratio: 9 / 15; box-shadow: 0 30px 80px rgba(0, 0, 0, .55); }
.wchapters { display: grid; gap: 2px; align-self: center; }
.wchapters .weye { margin: 0 0 10px; font: 700 .75rem/1 var(--display); text-transform: uppercase; letter-spacing: .14em; color: #ffd2a8; }
.wchapters button { display: flex; gap: 12px; align-items: baseline; text-align: left; background: none; border: 0; border-left: 2px solid rgba(255, 255, 255, .15); color: rgba(255, 255, 255, .6); font: 600 .95rem/1.2 var(--font); padding: 8px 12px; cursor: pointer; transition: color .2s, border-color .2s, padding .3s var(--ease); }
.wchapters button span { font: 700 .72rem/1 var(--display); color: rgba(255, 255, 255, .4); }
.wchapters button:hover { color: #fff; }
.wchapters button[aria-current="true"] { color: #fff; border-left-color: #ffd2a8; padding-left: 18px; }
.wtiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-self: center; }
.wtile { display: grid; gap: 3px; padding: 12px 14px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); animation: rise .6s var(--ease) both; }
.wtile:nth-child(2) { animation-delay: 60ms; } .wtile:nth-child(3) { animation-delay: 120ms; } .wtile:nth-child(4) { animation-delay: 180ms; }
.wtile:nth-child(5) { animation-delay: 240ms; } .wtile:nth-child(6) { animation-delay: 300ms; } .wtile:nth-child(n+7) { animation-delay: 360ms; }
.wtile span { font: 700 .66rem/1.2 var(--display); text-transform: uppercase; letter-spacing: .1em; color: rgba(255, 255, 255, .6); }
.wtile b { font: 800 1.35rem/1.15 var(--display); color: #fff; overflow-wrap: anywhere; }
.wtile small { font-size: .76rem; color: rgba(255, 255, 255, .7); }
.wrapped-shell .wyears a { border-color: rgba(255, 255, 255, .25); color: rgba(255, 255, 255, .8); }
.wrapped-shell .wyears a.on { background: #fff; color: #111; border-color: #fff; }
.wrapped-shell .btn:not(.primary) { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.wrapped-shell .btn.primary { background: #fff; color: #111; border-color: #fff; }
.wcard.c9 { justify-content: center; }
.wcard p.wsite { position: absolute; left: 26px; bottom: 22px; margin: 0; }
.wwdl { display: flex; height: 12px; gap: 2px; margin-top: 8px; }
.wwdl i { display: block; min-width: 2px; } .wwdl i.w { background: #3ecf73; } .wwdl i.d { background: #cfcfcf; } .wwdl i.l { background: #ff6b61; }
.wcard.on .wwdl i { animation: wgrowx .9s var(--ease) both; transform-origin: 0 50%; }
@keyframes wgrowx { from { transform: scaleX(0); } }
.wtrio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px; }
.wtrio div { display: grid; }
.wtrio b { font: 800 1.8rem/1 var(--display); }
.wtrio span { font-size: .78rem; color: rgba(255, 255, 255, .7); }
@media (max-width: 1100px) {
  .wstage { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 18px 16px 28px; }
  .wchapters { display: none; }
  .wtiles { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .wrapped-shell .wdeck { height: auto; min-height: 0; width: min(440px, 100%); }
}
@media (prefers-reduced-motion: reduce) { .wtile, .wcard.on .wwdl i { animation: none; } .wrapped-shell { transition: none; } }
main:has(> .wrapped-page) { padding-bottom: 0; }

/* ---------- private leagues ---------- */
.league-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
@media (max-width: 960px) { .league-layout { grid-template-columns: minmax(0, 1fr); } }
.league-side { position: sticky; top: 16px; display: grid; gap: 10px; }
.member-list { list-style: none; margin: 0; padding: 0; display: grid; }
.member-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 6px 2px; border-bottom: 1px solid var(--grid); font-size: .88rem; }
.member-list small { color: var(--muted); }
.invite-form { display: grid; gap: 8px; }
.invite-form input { width: 100%; }
.league-home { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 860px) { .league-home { grid-template-columns: minmax(0, 1fr); } }
.league-list { display: grid; gap: 8px; }
.league-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-left: 4px solid var(--brand); background: var(--surface); color: var(--text); text-decoration: none; animation: rise .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 50ms); transition: transform .2s var(--ease), box-shadow .25s var(--ease); }
a.league-item:hover { transform: translateY(-2px); box-shadow: 3px 3px 0 var(--surface-3); text-decoration: none; }
.league-item div { display: grid; gap: 2px; }
.league-item b { font-family: var(--serif); font-size: 1.15rem; }
.league-item small { color: var(--muted); }
.league-item .fq { font-size: .8rem; color: var(--link); }
.league-item .cta-line { margin: 0; display: flex; gap: 6px; }
.invite-card { max-width: 640px; margin: 48px auto; padding: 28px 30px; border: 1px solid var(--frame); border-left: 6px solid var(--brand); background: var(--surface); box-shadow: 6px 6px 0 var(--surface-3); animation: rise .6s var(--ease) both; }
.invite-card h1 { font-family: var(--serif); margin: 0 0 8px; font-size: 1.9rem; line-height: 1.15; }
.invite-card .cta-line { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }
.hero .cta-line { display: flex; gap: 10px; margin-top: 16px; }

/* Comparison rows whose labels are long (opening names): the name on its own line, the bars below it. */
.vs-rows.stacked .vs-row { grid-template-columns: 1fr 52px 1fr 52px; row-gap: 4px; }
.vs-rows.stacked .vs-row .lbl { grid-column: 1 / -1; white-space: normal; overflow: visible; font-weight: 600; }
.vs-row .lbl small { display: block; font-weight: 400; font-size: .72rem; color: var(--muted); }

/* The hidden attribute always wins: .btn and other display rules otherwise showed "hidden" buttons as empty boxes. */
[hidden] { display: none !important; }

/* ---------- proving a chess.com username ---------- */
.cc-proof { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--border); border-left: 4px solid var(--brand); background: var(--surface-2); font-size: .86rem; }
.cc-proof p { margin: 0 0 8px; }
.cc-proof ol { margin: 0 0 6px; padding-left: 20px; display: grid; gap: 6px; }
.cc-proof.ok { border-left-color: var(--win); color: var(--win); font-weight: 600; }
.cc-proof .cta-line { display: flex; gap: 12px; align-items: center; margin: 6px 0 0; }
.cc-code { font: 700 1rem/1 ui-monospace, Consolas, monospace; letter-spacing: .08em; padding: 5px 9px; border: 1px dashed var(--brand); background: var(--surface); color: var(--text); cursor: pointer; }
.warn-text { color: var(--loss); }

/* ============================================================
   UI/UX audit fixes (2026-09-29): cut-off labels, dead space, phone layouts.
   Kept together at the end so they win over the rules they correct.
   ============================================================ */

/* The page is exactly as tall as it needs to be: body is the full-height column, main takes what is left.
   main's own 100vh pushed the footer below the fold on every short page. */
main { min-height: 0; }

/* Every text-like input looks the same (email and password were browser-default). */
input[type="email"], input[type="password"], input[type="number"] { font: inherit; font-size: .95rem; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 0; padding: 6px 10px; min-width: 0; height: 38px; }

/* Breakdown rows: long opening names wrap instead of being cut; rows grow to share a panel's height but
   no further than a comfortable row, so short panels do not spread three rows over 300px. */
.panel .row .lbl { white-space: normal; line-height: 1.2; overflow-wrap: anywhere; }
.panel .row { grid-template-columns: minmax(120px, 1.7fr) minmax(0, 1.6fr) 54px 58px; }
.panel > .rows > .row:not(.head) { max-height: 58px; }
/* A last panel left alone on a full-width row lays its rows out in two columns instead of one 740px bar. */
@media (min-width: 1251px) {
  .panels > .panel:last-child:nth-child(3n+1) > .rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; align-content: start; }
  .panels > .panel:last-child:nth-child(3n+1) > .rows > .row.head { display: none; }
}
@media (max-width: 700px) {
  /* On a phone the bar moves to its own line (see the 700px rule above), so the label gets the width. */
  .panel .row { grid-template-columns: minmax(0, 1fr) auto 58px; }
}

/* Section and panel heads: the title never wraps; the hint drops underneath on a phone. */
.section-head h2, .panel-head h3 { flex: 0 0 auto; }
@media (max-width: 600px) {
  .section-head, .panel-head { flex-wrap: wrap; }
  .section-head .more, .panel-head .more { flex: 1 1 100%; }
}

/* Compare: tale of the tape fits a phone; slot cards and findings fill their rows. */
@media (max-width: 700px) { table.tape td, table.tape th { white-space: normal; font-size: .8rem; padding: 5px 4px; } }
.slots { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.finding-list { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.panels.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .panels.two { grid-template-columns: minmax(0, 1fr); } }

/* Opening tree: the phone rule must come after the desktop columns; games count stays visible. */
@media (max-width: 640px) {
  .tree-row { grid-template-columns: 56px minmax(0, 1fr) auto 54px; }
  .tree-row .tree-bar { display: none; }
  .tree-row .n { display: block; font-size: .78rem; }
}
.tree-row.head { opacity: 1; transform: none; font: 700 .68rem/1 var(--display); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); background: var(--surface-2); }
.tree-row.end .stack i { background: var(--draw); }

/* Opening pages: line names wrap (the cut-off part is what tells lines apart); colour and time control
   stack in one column beside the longer list of lines. */
.orow span:first-child { white-space: normal; overflow: visible; line-height: 1.25; }
.opening-panels { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.opening-panels .stack-col { display: grid; gap: 16px; }
@media (max-width: 860px) { .opening-panels { grid-template-columns: minmax(0, 1fr); } }

/* Home demo: the opening name fits on a phone. */
@media (max-width: 520px) { .demo-row { grid-template-columns: 110px 1fr 40px; } .demo-row .lbl { white-space: normal; line-height: 1.15; } }

/* Achievements: 13 badges break 7 + 6 instead of 9 + 4. */
.badges { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

/* Feature lists (league, compare) are statements, not questions or links: no quote marks, no hover lift. */
.feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.feature-list li { padding: 12px 14px; border: 1px solid var(--border); border-left: 4px solid var(--brand); background: var(--surface); font: 700 1rem/1.3 var(--display); animation: rise .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
.opening-index .example b { font: 700 1.05rem/1.2 var(--display); }

/* Wrapped: the dark stage runs to the footer. */
main:has(.wrapped-shell) { padding-bottom: 0; background: #0c0c0c; }
.wrapped-shell { min-height: 0; }

/* Two-up rows are already balanced: the "last panel fills the row" rules above must not apply to them. */
.panels.two > .panel:last-child { grid-column: auto; }
.panels.two > .panel:last-child > .rows { display: flex; }
.panels.two > .panel:last-child > .rows > .row.head { display: grid; }

/* Tree on a phone: move | games | results bar | score; the "how often" column (second child) is dropped. */
@media (max-width: 640px) {
  .tree-row { grid-template-columns: 52px auto minmax(60px, 1fr) 50px; gap: 8px; padding: 7px 10px; }
  .tree-row > :nth-child(2) { display: none; }
  .tree-row.head { font-size: .6rem; }
}

/* Answer tables: long opening names wrap rather than end in an ellipsis. */
table.stats td.name { white-space: normal; min-width: 180px; max-width: 420px; line-height: 1.25; }

/* Footer: each sister site boxed in its own colour, the same boxes as Pigskin Lab and Batter Lab. */
.site-family { align-items: stretch; gap: 10px 12px; }
.site-family .family-head { flex-basis: 100%; font-size: .72rem; letter-spacing: .06em; color: var(--text-2); }
.site-family a { --fam: var(--text-2); display: grid; align-content: start; gap: 2px; flex: 1 1 140px; padding: 8px 12px; border: 1px solid var(--border); border-left: 4px solid var(--fam); border-radius: 6px; background: var(--surface); text-decoration: none; color: var(--text); transition: border-color .15s; }
.site-family a b { font-size: .86rem; color: var(--fam); }
.site-family a small { font-size: .74rem; color: var(--muted); }
.site-family a:hover, .site-family a:focus-visible { border-color: var(--fam); }
.site-family a:hover b { text-decoration: none; }
.site-family .fam-football { --fam: #c8102e; }
.site-family .fam-baseball { --fam: #15803d; }
.site-family .fam-basketball { --fam: #c2410c; }
.site-family .fam-hockey { --fam: #1d4ed8; }
.site-family .fam-mason { --fam: #6d28d9; }
:root[data-theme="dark"] .site-family .fam-football { --fam: #f87171; }
:root[data-theme="dark"] .site-family .fam-baseball { --fam: #4ade80; }
:root[data-theme="dark"] .site-family .fam-basketball { --fam: #fb923c; }
:root[data-theme="dark"] .site-family .fam-hockey { --fam: #93c5fd; }
:root[data-theme="dark"] .site-family .fam-mason { --fam: #c4b5fd; }

/* Radar: shapes let taps through to the points; each point has a larger invisible target. */
.radar-area { pointer-events: none; }
.radar-hit { fill: transparent; cursor: pointer; }
.radar-hit:focus-visible { outline: none; stroke: var(--focus); stroke-width: 2; }
.donut-hit { cursor: default; }
.donut-hit:focus-visible { outline: none; stroke: var(--focus); stroke-opacity: .45; }
.donut-legend span[tabindex] { cursor: default; }

/* Player page, tablet (761–1250px, two columns): "Your people" and "More for you" share a row instead of
   "More for you" spanning both columns and leaving "Your people" beside empty space. */
@media (min-width: 761px) and (max-width: 1250px) {
  .panels > .panel.span2.span2:last-child { grid-column: auto; }
  .panel.span2 .tools { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Ask about several players (Compare, leagues) ---------- */
.multi-panel { border-left: 4px solid var(--brand); }
.multi-ask .ask-row { display: flex; gap: 8px; }
.multi-ask input { flex: 1; font-size: 1rem; height: 42px; }
.multi-panel .try { margin-top: 8px; }
.multi-out:empty { display: none; }
.multi-out { margin-top: 12px; }
.multi-answer { display: grid; gap: 10px; }
.multi-answer .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mp-name { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--text); text-decoration: none; }
.mp-name i { width: 10px; height: 10px; background: var(--c); display: inline-block; }
.mp-name:hover { text-decoration: underline; }
.mp-bars { display: grid; gap: 8px; }
.mp-bar { display: grid; grid-template-columns: minmax(110px, 180px) minmax(0, 1fr) 90px minmax(0, 220px); gap: 12px; align-items: center; opacity: 0; transform: translateX(-8px); transition: opacity .35s, transform .6s var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }
.grown .mp-bar, .mp-bars.grown .mp-bar { opacity: 1; transform: none; }
.mp-track { height: 14px; background: var(--surface-2); overflow: hidden; }
.mp-track i { display: block; height: 100%; transform-origin: 0 50%; animation: wgrowx .9s var(--ease) both; }
.mp-bar b { text-align: right; font-variant-numeric: tabular-nums; }
.mp-bar small { color: var(--muted); }
@media (max-width: 700px) { .mp-bar { grid-template-columns: minmax(0, 1fr) auto; } .mp-bar .mp-track { grid-column: 1 / -1; order: 3; } .mp-bar small { grid-column: 1 / -1; order: 4; } }
.mp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.mp-card { border: 1px solid var(--border); padding: 10px 12px; background: var(--surface); display: grid; gap: 4px; }
.mp-card p { margin: 0; }
.mp-verdicts { margin: 0; padding-left: 18px; font-size: .86rem; color: var(--text-2); display: grid; gap: 3px; }
table.multi-grid td { text-align: right; }
table.multi-grid td.lead .mv { font-weight: 800; }
table.multi-grid td small { color: var(--muted); }
table.multi-grid th .mp-name { justify-content: flex-end; }
/* Wrapped: ask about the year, under the cards. */
.wask { display: flex; gap: 6px; width: min(520px, 100%); }
.wask input { flex: 1; background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .35); }
.wask input::placeholder { color: rgba(255, 255, 255, .6); }
.wtools { flex-direction: column; }
.wtools > :not(.wask) { }
.mp-rank { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; counter-reset: r; }
.mp-rank li { counter-increment: r; display: grid; grid-template-columns: 22px minmax(0, 1fr) 54px 50px; gap: 6px; align-items: baseline; padding: 4px 2px; border-bottom: 1px solid var(--grid); font-size: .84rem; }
.mp-rank li::before { content: counter(r); color: var(--muted); font: 700 .72rem/1 var(--display); }
.mp-rank li span { overflow-wrap: anywhere; line-height: 1.2; }
.mp-rank li b { text-align: right; font-variant-numeric: tabular-nums; }
.mp-rank li small { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.demo-row.demo-head { font: 700 .62rem/1 var(--display); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }

/* ---------- first visit: results filling in while the history imports (2026-10-01) ---------- */
.so-far { border: 2px solid var(--frame); background: var(--surface); padding: 14px 16px 16px; box-shadow: 8px 8px 0 var(--surface-3); animation: rise .6s var(--ease) both; min-width: 0; }
.so-far[hidden], .early[hidden] { display: none; }
.so-far-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.so-far-title { font-family: var(--serif); text-transform: none; letter-spacing: -.01em; font-size: clamp(1.35rem, 2.6vw, 1.9rem); font-weight: 800; margin: 0 0 2px; font-variant-numeric: tabular-nums; }
.so-far-span { margin: 0; font-size: .85rem; color: var(--text-2); }
.so-far .kpis { margin-bottom: 14px; }
.so-far .panels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .so-far .panels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .so-far .panels { grid-template-columns: minmax(0, 1fr); } .so-far { padding: 12px; box-shadow: 4px 4px 0 var(--surface-3); } }
.so-far-sub { margin: 4px 0 2px; font: 700 .72rem/1.2 var(--display); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.so-far .panel .rows + .so-far-sub { margin-top: 12px; }
.partial-tag { flex: none; display: inline-block; padding: 3px 8px; border: 1px solid var(--brand-ink); color: var(--brand-ink); font: 700 .7rem/1.2 var(--display); text-transform: uppercase; letter-spacing: .1em; background: var(--row-hover); }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); margin-right: 7px; vertical-align: 1px; animation: live 1.6s ease-in-out infinite; }
@keyframes live { 50% { opacity: .25; } }
.early-ask { position: static; border-bottom: 0; padding-top: 0; margin-bottom: 8px; }
.early-h { margin: 0 0 8px; font-size: .88rem; color: var(--text-2); }
.early-h b { color: var(--text); font-family: var(--display); text-transform: uppercase; letter-spacing: .05em; }
.partial-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 10px; padding: 8px 12px; border-left: 4px solid var(--brand); background: var(--row-hover); font-size: .88rem; color: var(--text); }
.partial-note .btn[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } .so-far { animation: none; } }

/* A question Ask could not read is never a dead end (views/player.js, lib/nearest.js): what Kingside keeps, the nearest
   questions that read, and another Lab's link when the words are a sport's. */
.cant .near-keeps { margin: 6px 0 0; }
.near-row { margin-top: 8px; }
a.try-chip.near-lab { text-decoration: none; display: inline-flex; align-items: center; border-color: var(--brand); }
.answer-note a.try-chip.near-lab { margin-left: 4px; }
.handed { margin: 10px 0 0; padding: 8px 12px; border-left: 3px solid var(--brand); background: var(--surface); font-size: .9rem; }
/* ---------- scouting (scout.js): @name suggestions and the scouting table ---------- */
.ask-row.has-ac { position: relative; }
.ac { position: absolute; left: -2px; right: -2px; top: calc(100% + 2px); z-index: 30; margin: 0; padding: 4px 0; list-style: none; background: var(--surface); border: 2px solid var(--frame); box-shadow: 5px 5px 0 var(--surface-3); max-height: min(340px, 50vh); overflow-y: auto; overscroll-behavior: contain; }
.ac-head { padding: 6px 12px 4px; font: 700 .7rem/1.2 var(--display); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ac-none { padding: 8px 12px; font-size: .85rem; color: var(--muted); }
.ac-opt { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; padding: 6px 12px; cursor: pointer; font-size: .92rem; }
.ac-opt[aria-selected="true"], .ac-opt:hover { background: var(--row-hover); box-shadow: inset 3px 0 0 var(--brand); }
.ac-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-name b { color: var(--brand-ink); }
.ac-meta { flex: none; color: var(--muted); font-size: .78rem; font-variant-numeric: tabular-nums; }

.scout-sum { margin: 6px 0 10px; font-size: .9rem; font-variant-numeric: tabular-nums; }
table.scout { font-size: .84rem; }
table.scout th, table.scout td { vertical-align: top; padding: 8px 10px; }
table.scout td.l { white-space: normal; min-width: 120px; }
table.scout .sticky { position: sticky; left: 0; z-index: 1; background: var(--surface); text-align: left; box-shadow: 1px 0 0 var(--grid); }
table.scout thead th.sticky { z-index: 3; background: var(--surface-2); }
table.scout tbody tr:nth-child(even) .sticky { background: var(--row-alt); }
table.scout tbody tr:hover .sticky { background: var(--row-hover); }
table.scout tbody th { font-weight: 400; }
.scout-who { display: flex; align-items: center; gap: 6px; }
.scout-name { font-weight: 700; font-size: .95rem; color: var(--link); text-align: left; min-height: 32px; }
.scout-who .ext { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; min-height: 28px; color: var(--muted); }
.scout-rec { min-width: 110px; }
.scout-rec .stack { height: 8px; margin-top: 5px; }
.scout-rec .wdl { gap: 0; }
.scout-rec .wdl span + span::before { content: "–"; color: var(--muted); margin: 0 4px; }
table.scout .pm { color: var(--muted); font-weight: 400; }
table.scout .delta { color: var(--text-2); font-variant-numeric: tabular-nums; }
table.scout .delta.up { color: var(--win); } table.scout .delta.down { color: var(--loss); }
table.scout .fam { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.scout tr.thin td, table.scout tr.thin .scout-rec { color: var(--muted); }
table.scout tr.thin .stack { opacity: .5; }
table.scout td.act { width: 48px; text-align: center; }
.scout-x { width: 36px; height: 36px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.scout-x:hover { color: var(--loss); border-color: var(--loss); }
.scout-wrap { position: relative; }
.scout-hint { font-size: .78rem; color: var(--muted); margin: 4px 0 0; text-align: right; }
.scout-next { margin-top: 10px; }
.scout-miss { margin: 10px 0; padding: 9px 12px; border: 1px solid var(--border); border-left: 3px solid var(--s4); background: var(--surface-2); font-size: .88rem; }
.scout-miss .sug { font-weight: 700; padding: 6px 2px; }
@media (pointer: coarse) { .scout-x, .scout-name, .scout-who .ext { min-width: 44px; min-height: 44px; } }
/* Phones: one card per opponent; every value keeps its label (LAYOUT-05). */
@media (max-width: 700px) {
  .scout-wrap { overflow: visible; border: 0; background: none; }
  table.scout, table.scout tbody { display: block; width: 100%; }
  table.scout thead { display: none; }
  table.scout tbody tr { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px; padding: 12px; margin-bottom: 10px; border: 1px solid var(--border); background: var(--surface); }
  table.scout tbody tr:nth-child(even) td, table.scout tbody tr:nth-child(even) .sticky, table.scout tbody tr:hover td, table.scout tbody tr:hover .sticky { background: none; }
  table.scout th.sticky { position: static; grid-column: 1 / -1; padding: 0 48px 0 0; box-shadow: none; background: none; border: 0; white-space: normal; }
  table.scout td { display: block; padding: 0; border: 0; text-align: left; white-space: normal; min-width: 0; }
  table.scout td.l { min-width: 0; }
  table.scout td::before { content: attr(data-l); display: block; margin-bottom: 2px; font: 700 .66rem/1.2 var(--display); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
  table.scout td.act { position: absolute; top: 8px; right: 8px; width: auto; }
  table.scout td.act::before { content: none; }
  table.scout .fam { max-width: none; white-space: normal; }
}
.scout-wrap.more { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
/* The sample under an answer (lib/query.js windowOf): games counted and the real dates of the first and the last, and a
   small-sample mark in words, not colour alone. */
.sample-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 6px 0 0; font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.sample-line .wthin { font-style: normal; font-weight: 600; font-size: .72rem; letter-spacing: .02em; color: var(--brand-ink); border: 1px solid currentColor; padding: 0 5px; line-height: 1.4; white-space: nowrap; }
/* A small sample never shouts (design system CTX-05): the lead number keeps its size but loses the brand colour. */
.answer.thin .kpi.lead .v { color: var(--text-2); }

/* ---------- touch screens: every control is a 44 x 44 target (lane touch, 2026-10-01; INT-02, INT-12) ----------
   Measured at 390 px and on a 1024 px touch tablet (user-research/tools/capture/touch): 790 of 1,418 controls were
   under 44 px: the W/D/L form letters 14 px, heat-map cells 30 px tall, Try chips 25 px, small buttons 26 px, the
   header's Sign in and theme buttons 30 px, the tip strip's close 18 px, sortable headers and the result rows' ends.
   Each keeps its drawn size and gets an invisible hit area at least 44 px each way, centred on it (::before, which
   no control here draws with). Neighbours closer than 44 px overlap, and the nearer one takes the tap. :where() keeps
   the position rule weaker than any rule that already places a control (absolute, sticky). The spider's points and
   the donut's slices get theirs in charts.js. */
@media (pointer: coarse) {
  :where(.btn, .icon-btn, .brand, .nav a, .try-chip, .chip button, .sort-h, .delta-cell, .linkish, .more-btn, .tip-strip-feedback, .tip-strip-link, .tip-strip-close, .profile-link, .form-strip a, .donut-legend span[tabindex], .heat-cell, .row.click, .tip-act, summary) { position: relative; }
  :where(.btn, .icon-btn, .brand, .nav a, .try-chip, .chip button, .sort-h, .delta-cell, .linkish, .more-btn, .tip-strip-feedback, .tip-strip-link, .tip-strip-close, .profile-link, .form-strip a, .donut-legend span[tabindex], .heat-cell, .row.click, .tip-act, summary)::before {
    content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%);
  }
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]), select { min-height: 44px; }
  .donut { overflow: visible; }   /* the slices' wider touch ring reaches past the drawing's edge */
  /* Dense grids (INT-12): the form letters sit 17 px apart and the heat map's hour columns 12-30 px, so a 44 px square
     round each would cover its neighbours' own centres. Their targets tile the grid instead, edge to edge with no dead
     gap, so a tap anywhere on the strip or grid opens the nearest one; the heat map's rows are 44 px tall. */
  :where(.form-strip a, .heat-cell)::before { left: -2px; right: -2px; top: -2px; bottom: -2px; width: auto; height: auto; transform: none; }
  .heat-cell { height: 44px; line-height: 44px; }
  /* A thin text control above a block that is drawn after it ("Wrong answer?" over the answer, a sortable heading over
     the first row): its target is lifted over that block so its lower half is not lost. */
  :where(.linkish, .sort-h, .delta-cell) { z-index: 1; }
  .nav a { line-height: 44px; }
}
/* A tooltip never taller than the screen: a long one scrolls inside itself (INT-04; place() in charts.js keeps it 8 px
   inside every edge). */
.tip { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; overscroll-behavior: contain; }
/* ---------- plain-English definitions (public/js/defs.js, jargon.js, views/glossary.js) ---------- */
.jargon { text-decoration: underline dotted; text-decoration-color: var(--muted); text-underline-offset: 3px; cursor: help; }
.jargon-i { border: 0; background: none; color: var(--link); font-size: .95em; padding: 0 2px 0 4px; margin: 0; cursor: pointer; line-height: 1; vertical-align: baseline; min-width: 22px; min-height: 22px; position: relative; text-transform: none; letter-spacing: 0; }
.jargon-i::after { content: ''; position: absolute; inset: -11px; }
.jargon-pop { position: absolute; z-index: 90; background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); box-shadow: 0 6px 20px rgba(0, 0, 0, .25); border-radius: 8px; padding: 10px 12px; font: 400 .86rem/1.4 var(--font); text-transform: none; letter-spacing: 0; text-align: left; white-space: normal; }
.jargon-pop b { display: block; margin-bottom: 4px; }
.jargon-pop p { margin: 0 0 6px; }
.jargon-pop .jargon-how, .jargon-pop .jargon-src, .jargon-pop .jargon-chart { color: var(--text-2); font-size: .82rem; }
.jargon-k { color: var(--muted); font-weight: 600; }
.jargon-pop a { display: inline-block; padding: 6px 0 2px; }
.define-answer .define-h { font-size: 1.05rem; margin: 0 0 8px; }
.define-answer .define-more { color: var(--text-2); margin: 0 0 6px; font-size: .9rem; }
.define-answer .inline { margin-top: 10px; }
.answer-gloss { margin: 6px 0 0; }
.gloss-index { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 4px 0 18px; font-size: .9rem; }
.gloss-index a { display: inline-flex; align-items: center; min-height: 32px; }
.gloss-group { margin-top: 26px; max-width: 760px; }
.gloss { margin: 0; }
.gloss dt { font: 700 1.1rem/1.3 var(--display); margin-top: 18px; padding-top: 10px; border-top: 1px solid var(--border); }
.gloss dd { margin: 4px 0 0; }
.gloss dd p { margin: 0 0 6px; color: var(--text-2); line-height: 1.5; }
.gloss-k { color: var(--muted); font-weight: 600; }
.gloss-how, .gloss-src { font-size: .92rem; }
.gloss-try a { display: inline-block; padding: 8px 0; min-height: 44px; box-sizing: border-box; }
.gloss-filter { width: 100%; max-width: 420px; min-height: 44px; margin: 4px 0 12px; font-size: 1rem; }
.gloss dt[hidden], .gloss dd[hidden] { display: none; }