/* Sections: tokens · base · header · page furniture · tables · badges · tiles · players · charts ·
   teaming (cards, associates, reports, review) · accounts · phone. Rules for a phone sit with what they
   change, except the utilities at the very end, which have to come last. */

/* ---- tokens ---- */
:root {
  --bg: #f6f5f1; --panel: #fff; --ink: #1d1f23; --muted: #6b7078; --line: #e3e1da; --accent: #1f5fbf;
  --a: #d9480f; --b: #1971c2; --c: #2b8a3e; --d: #9c36b5; --e: #c2255c; --f: #0b7285; --ok: #2b8a3e; --warn: #c92a2a;
  --chart: #e8590c;
  /* fixed meanings, the same in light and dark: tier A / B / C, a cleared pair, medals */
  --red: #c92a2a; --orange: #e8590c; --grey: #868e96; --pale: #adb5bd; --green: #2b8a3e; --gold: #e8a600; --silver: #9aa3ad; --bronze: #b06d3b;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #14161a; --panel: #1c1f25; --ink: #e8e6e1; --muted: #9097a1; --line: #2c3038; --accent: #74a7ff; --a: #ff922b; --b: #4dabf7; --c: #69db7c; --d: #da77f2; --e: #f783ac; --f: #3bc9db; --ok: #69db7c; --warn: #ff8787; --chart: #ff922b; }
}

/* ---- base ---- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; }
code { font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); }
main { max-width: 1240px; margin: 0 auto; padding: 24px; }
h1 { font-size: 24px; margin: 8px 0; overflow-wrap: anywhere; } h1 small, h3 small { font-weight: 400; font-size: 13px; color: var(--muted); } h2 { font-size: 16px; margin: 28px 0 8px; }
dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0 0 8px; } dt { color: var(--muted); } dd { margin: 0; }
.lede { color: var(--muted); margin: 0 0 16px; max-width: 80ch; } .lede.wide { max-width: none; } .lede.after { margin-top: 14px; }
.note { margin: 0 0 12px; padding: 8px 12px; border-left: 3px solid var(--orange); background: var(--bg); border-radius: 0 6px 6px 0; max-width: 90ch; }
.plain { padding-left: 18px; }
.amp { color: var(--muted); } .empty { color: var(--muted); padding: 16px 0; } .warn { color: var(--warn); }
.muted { color: var(--muted); font-weight: 400; }
.up { color: var(--ok); } .down { color: var(--warn); }
.n { text-align: right; font-variant-numeric: tabular-nums; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 24px; align-items: start; }

/* ---- header ---- */
.top { display: flex; align-items: center; gap: 8px 24px; padding: 12px 24px; background: var(--panel); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.brand { font-weight: 700; color: var(--ink); white-space: nowrap; }
.top nav { display: flex; gap: 16px; } .top nav a { white-space: nowrap; } .top nav a[aria-current] { color: var(--ink); font-weight: 600; }
.search { margin-left: auto; }
.search input { width: 210px; max-width: 100%; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); }
/* on a wide screen the header is one row, whatever is in it: the search box gives way first, then the gaps */
@media (min-width: 961px) { .top { flex-wrap: nowrap; } .top nav { flex: none; } .search { flex: 0 1 210px; min-width: 96px; } .search input { width: 100%; } }
@media (min-width: 961px) and (max-width: 1100px) { .top { gap: 8px 14px; } .top nav { gap: 14px; } .account .email { max-width: 8ch; } }
/* dropdown menus in the header: the Review menu and the signed-in user's */
.menu { position: relative; } .top nav { align-items: center; }
.menu > button { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; cursor: pointer; white-space: nowrap; } .menu > button:hover { text-decoration: underline; }
.menu > button[aria-current] { color: var(--ink); font-weight: 600; } .menu .caret { font-size: 12px; opacity: .7; } .account.menu > button { color: var(--ink); font-size: 13px; }
.menu-panel { position: absolute; z-index: 20; top: calc(100% + 10px); left: -10px; min-width: 190px; padding: 4px; display: grid; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 32px rgb(0 0 0 / .16), 0 2px 6px rgb(0 0 0 / .08); }
.menu.placeholder { visibility: hidden; white-space: nowrap; }
.menu-panel[hidden] { display: none; } .menu-panel.right { left: auto; right: 0; }
.menu-panel a, .menu-panel form button { display: block; width: 100%; padding: 7px 10px; border: 0; border-radius: 6px; background: none; color: var(--ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; white-space: nowrap; }
.menu-panel a:hover, .menu-panel form button:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); text-decoration: none; }
.menu-panel a[aria-current] { font-weight: 600; } .review-mode nav .menu > button { color: var(--orange); }
/* suggestions under the search box */
.search { position: relative; }
.suggestions { position: absolute; z-index: 20; top: calc(100% + 6px); right: 0; width: 340px; max-width: calc(100vw - 32px); max-height: min(420px, 70vh); overflow-y: auto; padding: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 32px rgb(0 0 0 / .16), 0 2px 6px rgb(0 0 0 / .08); }
.suggestions[hidden] { display: none; }
.suggestion { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 6px; color: var(--ink); }
.suggestion:hover, .suggestion[aria-selected=true] { background: color-mix(in srgb, var(--accent) 12%, transparent); text-decoration: none; }
.suggestion .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.suggestion mark { background: none; color: inherit; font-weight: 800; }
.suggestion .bracket { font-size: 11px; padding: 0 7px; } .suggestion .muted { font-size: 11px; }
.suggestion .elo { min-width: 4ch; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.suggestion.all { margin-top: 4px; padding-top: 9px; border-top: 1px solid var(--line); border-radius: 0 0 6px 6px; color: var(--muted); font-size: 13px; } .suggestion.all .elo { margin-left: auto; font-weight: 400; }
.account { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); min-width: 0; }
.account .email { display: inline-block; vertical-align: bottom; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* trusted users: the Ratings / Review switch; review mode wears a stripe so nobody forgets which one they are in */
.mode button { padding: 3px 12px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; } .mode button:hover { color: var(--ink); }
.mode button.on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / .18); }
.review-mode .top { box-shadow: inset 0 3px 0 var(--orange); } .review-mode .mode button.on { background: var(--orange); color: #fff; }
.trusted-pill { padding: 0 8px; border-radius: 999px; border: 1px solid var(--ok); color: var(--ok); font-size: 12px; }
p.flash { margin: 12px 24px 0; padding: 8px 12px; border-radius: 6px; background: var(--panel); border: 1px solid var(--line); }
p.flash.alert { border-color: var(--warn); color: var(--warn); }
@media (max-width: 960px) { /* phones and narrow windows */
  /* brand and account on the first line, the sections as a strip that scrolls sideways, the search across the bottom */
  .top { padding: 10px 16px; gap: 8px 12px; }
  .top .account { order: 1; margin-left: auto; } .account .email { max-width: 24vw; } .top .mode { order: 1; }
  .top nav { order: 2; flex: 0 0 calc(100% + 32px); margin: 0 -16px; padding: 0 16px; gap: 20px; overflow-x: auto; scrollbar-width: none; } .top nav::-webkit-scrollbar { display: none; }
  .top nav a { padding: 6px 0; }
  /* a dropdown would be clipped by the strip: on a phone the Review links simply join it */
  .top nav .menu > button, .top nav .menu.placeholder { display: none; } .top nav .menu, .top nav .menu-panel, .top nav .menu-panel[hidden] { display: contents; } .top nav .menu-panel a { display: inline; width: auto; padding: 6px 0; color: var(--orange); font-size: inherit; }
  .top .search { order: 3; flex: 0 0 100%; margin: 0; } .search input { width: 100%; padding: 8px 12px; }
  .suggestions { left: 0; width: auto; } .suggestion { padding: 10px; }
  p.flash { margin: 12px 16px 0; }
}
@media (max-width: 420px) { .top nav { gap: 11px; font-size: 14px; } } /* six sections on one line of a phone */

/* ---- page furniture: title row, switches, filter chips ---- */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; } .page-head h1 { margin-bottom: 4px; }
.seg { display: inline-flex; padding: 3px; border-radius: 8px; background: var(--line); }
.seg a { padding: 4px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; } .seg a:hover { text-decoration: none; color: var(--ink); }
.seg a.on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / .18); }
.tiers { display: flex; gap: 6px; margin: 0 0 12px; flex-wrap: wrap; }
.tiers a { padding: 4px 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--panel); color: var(--ink); }
.tiers a.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.tiers a.strong { border-color: var(--gold); } .tiers a.strong.on { background: var(--gold); border-color: var(--gold); color: #1d1f23; }
.tiers .sep { flex: 1; }
.chip-label { align-self: center; margin-right: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.legend { margin: 0 0 12px; max-width: 80ch; color: var(--muted); }
.legend summary { cursor: pointer; color: var(--accent); }
.legend ul { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 4px; } .legend p { margin: 8px 0; }

/* ---- tables ----
   One real table, so header and body share their column widths. On a narrow screen a table becomes a block
   that scrolls sideways (its rows then sit in one anonymous table, which still keeps the columns aligned),
   unless it is marked .fit: those have been slimmed down for a phone (.hide-s, td.wrap) and stay full width. */
table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
@media (max-width: 900px) { table:not(.fit) { display: block; overflow-x: auto; } }
th, td { padding: 7px 12px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { white-space: normal; vertical-align: bottom; line-height: 1.25; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; } th[title] { cursor: help; text-decoration: underline dotted; }
tbody tr:last-child td { border-bottom: 0; }
td.wrap { white-space: normal; overflow-wrap: break-word; } /* break-word, not anywhere: a wrapping cell must not be squeezed to one letter a line */
td.wrap .member { display: inline-block; margin: 1px 4px 1px 0; font-weight: 500; padding: 1px 8px; }
td small.show-s { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.bar { width: 30%; } td.bar span { display: block; height: 10px; border-radius: 3px; background: var(--accent); min-width: 2px; }
.replay { white-space: nowrap; }
button.viewed { margin-left: 4px; padding: 0 7px; border: 1px solid var(--ok); border-radius: 99px; background: transparent; color: var(--ok); font: inherit; font-size: 11px; white-space: nowrap; cursor: pointer; }
button.viewed:hover { text-decoration: line-through; }
/* on a game card the mark's place is kept while it is off, so marking a game viewed cannot nudge the card's height */
.card button.viewed[hidden] { display: inline-block; visibility: hidden; }
@media (max-width: 640px) { button.viewed:not([hidden]) { display: block; margin: 2px 0 0; } } /* under the link, or it widens the table */
/* the "?" after a heading: the explanation is on the FAQ page */
a.what { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 4px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: 11px; font-weight: 700; line-height: 1; vertical-align: middle; text-transform: none; letter-spacing: 0; }
a.what:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }
/* FAQ: how to join as three steps, then the questions, one open at a time if you like */
.steps { list-style: none; counter-reset: step; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.steps li { counter-increment: step; display: grid; gap: 4px; align-content: start; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 24px; height: 24px; margin-bottom: 4px; border-radius: 50%; background: var(--ink); color: var(--bg); font-size: 12px; font-weight: 700; }
.steps span { color: var(--muted); font-size: 13px; } .steps a { font-size: 13px; font-weight: 600; margin-top: 4px; }
.faq { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; } .faq details { border-bottom: 1px solid var(--line); } .faq details:last-child { border-bottom: 0; }
.faq summary { padding: 12px 16px; font-weight: 600; cursor: pointer; } .faq summary:hover { color: var(--accent); } .faq p { margin: 0; padding: 0 16px 14px; max-width: 80ch; color: var(--muted); } .faq details:target summary { color: var(--accent); }
/* compare: the two players either side of a "vs", each with its own finder; then the numbers, a label between them */
.versus { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px 20px; align-items: end; margin: 0 0 20px; }
.versus .side { min-width: 0; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--a); border-radius: 10px; } .versus .side-b { border-top-color: var(--b); }
.versus h2 { margin: 0 0 10px; font-size: 20px; overflow-wrap: anywhere; } .versus h2 .bracket { font-size: 11px; vertical-align: middle; }
.versus .vs { align-self: center; color: var(--muted); font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: .08em; }
.versus input { width: 100%; padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); }
table.tape { margin-bottom: 24px; } .tape td { width: 42%; font-size: 17px; font-variant-numeric: tabular-nums; color: var(--muted); } .tape th { width: 16%; text-align: center; white-space: nowrap; border-bottom: 1px solid var(--line); } .tape th, .tape td { vertical-align: middle; } .tape tr:last-child th { border-bottom: 0; }
.tape td.best, .score b.best, td.position.best b { color: var(--ink); } .tape td.best { font-weight: 700; } .tape td.n.best::after, .tape td.best:not(.n)::before { content: "●"; font-size: 8px; vertical-align: middle; margin: 0 8px; color: var(--ok); }
.elo-chart.compare-chart { height: 320px; } .elo-chart.compare-chart .line { stroke-width: 2.25; stroke-linejoin: round; } .elo-chart.compare-chart .line-a { stroke: var(--a); } .elo-chart.compare-chart .line-b { stroke: var(--b); }
.compare-chart .end-dot { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; border: 2px solid var(--panel); background: var(--a); } .compare-chart .end-dot.end-b { background: var(--b); } .elo-chart.compare-chart .dot-a { background: var(--a); box-shadow: 0 0 0 1px var(--a); } .elo-chart.compare-chart .dot-b { background: var(--b); box-shadow: 0 0 0 1px var(--b); }
.compare-chart .end-label { position: absolute; transform: translate(10px, -50%); max-width: 13%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--a); } .compare-chart .end-label.end-b { color: var(--b); } .compare-chart .end-label b { font-variant-numeric: tabular-nums; margin-right: 2px; }
.compare-chart .tip .row { display: flex; align-items: center; gap: 6px; } .compare-chart .tip .row b { margin-left: auto; padding-left: 14px; font-size: 14px; font-variant-numeric: tabular-nums; } .compare-chart .tip i { width: 8px; height: 8px; border-radius: 50%; background: var(--a); } .compare-chart .tip i.key-b { background: var(--b); }
@media (max-width: 640px) { .compare-chart .end-label { max-width: 14%; font-size: 0; } .compare-chart .end-label b { font-size: 12px; } p.chart-key.show-s { display: flex; } }
.chart-key { display: flex; gap: 18px; margin: 8px 0 0; font-size: 13px; } .chart-key span::before { content: ""; display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; background: var(--a); } .chart-key .key-b::before { background: var(--b); }
.score { margin: 0 0 12px; font-size: 14px; } .score b { font-size: 26px; font-variant-numeric: tabular-nums; color: var(--muted); } .score b + .muted { margin: 0 4px; } td.position.best { background: color-mix(in srgb, var(--ok) 8%, transparent); }
@media (max-width: 640px) { .versus { grid-template-columns: 1fr; gap: 6px; } .versus .vs { justify-self: center; } .tape td { font-size: 15px; } }
/* the signed-in player's own row */
.players tr.me td { background: color-mix(in srgb, var(--accent) 10%, transparent); font-weight: 600; } .players tr.me td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
/* on a case's own page: the way into reviewing it */
.review-this { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; font-size: 13px; } .review-this .button-link { padding: 8px 16px; border-radius: 8px; background: var(--orange); color: #fff; font-weight: 600; } .review-this .button-link:hover { opacity: .9; text-decoration: none; }
/* above a list: how many, and the way to take it away as a file */
.export-line { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; font-size: 13px; color: var(--muted); } .export-line b { color: var(--ink); }
.export-line .download { padding: 3px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink); font-weight: 600; } .export-line .download:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
/* a case's short number, first in the associates table */
td.case-id { width: 1%; font-variant-numeric: tabular-nums; } td.case-id a { color: var(--muted); }
/* the account page: two panels side by side, one under the other on a phone */
.account-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 16px; align-items: start; max-width: 960px; }
.panel { padding: 18px 20px 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; } .panel h2 { margin: 0 0 14px; } .panel h3 { margin: 22px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0 0 18px; font-size: 14px; } .facts dt { color: var(--muted); } .facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.panel .hint { margin: 0 0 12px; max-width: 62ch; font-size: 13px; color: var(--muted); } .panel .hint b { color: var(--ink); }
.panel button, .panel input[type=submit], .panel .button-link { display: inline-block; padding: 8px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.panel button:hover, .panel .button-link:hover { border-color: var(--ink); text-decoration: none; } .panel input[type=submit] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.panel button.danger { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); background: none; } .panel button.danger:hover { background: var(--warn); border-color: var(--warn); color: #fff; }
.player-card { display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); }
.player-card:hover { border-color: var(--accent); text-decoration: none; } .player-card .who b { font-size: 18px; } .player-card .verified { margin: 0 6px 0 4px; color: var(--ok); font-weight: 700; } .player-card code { color: var(--muted); font-size: 12px; }
.player-card .numbers { display: flex; align-items: center; gap: 8px; font-size: 13px; } .player-card .numbers b { font-size: 18px; font-variant-numeric: tabular-nums; }
.name-picker { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; } .name-picker input[type=text] { flex: 1 1 200px; min-width: 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font: inherit; }
.name-picker input[type=text]:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; } .code-line { margin: 0 0 14px; } .code-line .code { padding: 3px 10px; border-radius: 6px; background: var(--ink); color: var(--bg); font-size: 17px; font-weight: 700; letter-spacing: .12em; }
.panel.wide { grid-column: 1 / -1; } .panel.wide .page-head { margin-bottom: 10px; } .panel.wide h2 { margin: 0; } .panel.wide h2 small { margin-left: 4px; font-weight: 400; } .panel.wide table { box-shadow: none; }
.panel button.bookmark, .panel button.bookmark:hover { padding: 0 2px; border: 0; background: none; font-size: 17px; font-weight: 400; } /* the star keeps its own look inside a panel */
@media (max-width: 760px) { .account-page { grid-template-columns: 1fr; } }
/* on the player's own page: a quiet line that leads to the account page */
.claim.yours { display: flex; align-items: center; gap: 10px; } .claim .pill { padding: 2px 10px; border-radius: 99px; background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); font-weight: 600; font-size: 12px; }
/* a player's other names: chips with how often each was used; past the first few they fold away */
.aliases { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -4px 0 14px; }
.alias { padding: 2px 10px; border-radius: 99px; background: var(--panel); border: 1px solid var(--line); font-size: 13px; white-space: nowrap; } .alias small { margin-left: 5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.aliases details { display: contents; } .aliases summary { list-style: none; padding: 2px 10px; border-radius: 99px; border: 1px dashed var(--line); color: var(--muted); font-size: 13px; cursor: pointer; } .aliases summary::-webkit-details-marker { display: none; }
.aliases details[open] summary { display: none; } small.as { margin-left: 2px; }
/* places gained or lost since yesterday, next to the place itself */
.players th.move, .players td.move { width: 1%; padding-left: 4px; white-space: nowrap; font-size: 12px; font-variant-numeric: tabular-nums; }
.players td.move .up { color: var(--ok); } .players td.move .down { color: var(--warn); } .players td.move .new { padding: 0 6px; border-radius: 99px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-weight: 600; font-size: 11px; }
/* the numbers on the leaderboard: evenly spaced columns, the player's name takes what is left */
.players th.n:not(:first-child), .players td.n:not(:first-child) { width: 11%; font-variant-numeric: tabular-nums; } .players th.medal { font-size: 14px; }
@media (max-width: 640px) { .players th.n:not(:first-child), .players td.n:not(:first-child) { width: 13%; padding-left: 4px; padding-right: 8px; } }
/* the place on the leaderboard: a narrow column, not a share of the table's width */
.players th.n:first-child, .players td.n:first-child { width: 1%; padding-right: 4px; color: var(--muted); }
/* under a long list: where you are in it, and the way on */
.pager { display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap; margin: 14px 0 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.pager .range { color: var(--muted); } .pager .pages { display: flex; align-items: center; gap: 4px; }
.pager a, .pager b, .pager .off, .pager .gap { min-width: 32px; padding: 5px 10px; border-radius: 6px; text-align: center; }
.pager a { border: 1px solid var(--line); background: var(--panel); color: var(--ink); } .pager a:hover { border-color: var(--ink); text-decoration: none; }
.pager b { background: var(--ink); color: var(--bg); } .pager .off, .pager .gap { color: var(--pale); }
/* a row's way out (the replay link): at the right edge, no wider than it needs */
td.go { width: 1%; text-align: right; white-space: nowrap; }
/* a player's games, scalps, the games to watch */
.history td.elo span, td.elo { font-variant-numeric: tabular-nums; } .history td.elo span { font-weight: 600; }
.history tr.place-1 td { background: color-mix(in srgb, var(--gold) 9%, transparent); } .history tr.place-2 td { background: color-mix(in srgb, var(--silver) 9%, transparent); } .history tr.place-3 td { background: color-mix(in srgb, var(--bronze) 8%, transparent); }
.history .podium { color: #b8860b; }
/* a game's standings: the verdict as a bar, the class each player brought into the game */
td.verdict-bar { width: 90px; } td.verdict-bar span { display: block; height: 6px; border-radius: 3px; background: var(--chart); min-width: 2px; opacity: .8; }
.standings td.place { font-weight: 700; } .standings .bracket { font-size: 11px; padding: 0 7px; margin-left: 4px; }
.standings small { color: var(--muted); }
@media (max-width: 640px) { th, td { padding: 8px; } th:first-child, td:first-child { padding-left: 12px; } th:last-child, td:last-child { padding-right: 12px; } }

/* ---- badges ---- */
.tier { display: inline-block; min-width: 22px; padding: 1px 6px; border-radius: 4px; text-align: center; font-weight: 700; font-size: 12px; color: #fff; background: var(--muted); vertical-align: middle; }
.tier-a { background: var(--red); } .tier-b { background: var(--orange); } .tier-c { background: var(--grey); } .tier-d { background: var(--pale); }
.tier-pending { background: transparent; color: var(--muted); border: 1px dashed var(--muted); font-weight: 500; }
.star { color: var(--gold); margin-left: 4px; font-size: 14px; vertical-align: middle; }
.new { margin-left: 6px; padding: 0 5px; border-radius: 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; color: #fff; background: var(--ok); }
.renamed { padding: 0 6px; border-radius: 99px; background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); font-size: 11px; font-weight: 600; white-space: nowrap; }
.label { padding: 1px 8px; border-radius: 99px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #fff; }
.label-teamed { background: var(--red); } .label-fought { background: var(--green); } .label-apart { background: var(--grey); }
.labels { margin: 0 0 6px; }
.verdict { margin-left: 8px; padding: 2px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #fff; vertical-align: middle; background: var(--muted); }
.verdict-confirmed { background: var(--red); } .verdict-cleared { background: var(--green); } .verdict-unsure { background: var(--grey); }
/* rating classes: one colour each (--rung), worn by the badge, the ladder on the player list and the chart */
.bracket-world, .rung-world { --rung: #b8860b; } .bracket-gm, .rung-gm { --rung: #d6336c; } .bracket-master, .rung-master { --rung: #9c36b5; } .bracket-expert, .rung-expert { --rung: var(--red); }
.bracket-strong, .rung-strong { --rung: var(--orange); } .bracket-club, .rung-club { --rung: #1971c2; } .bracket-amateur, .rung-amateur { --rung: #0b7285; }
.bracket-average, .rung-average { --rung: var(--green); } .bracket-beginner, .rung-beginner { --rung: var(--grey); } .bracket-novice, .rung-novice { --rung: var(--pale); }
.bracket { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; color: #fff; background: var(--rung, var(--muted)); white-space: nowrap; }
a.bracket:hover { text-decoration: none; filter: brightness(1.1); }
.bracket-provisional { background: transparent; color: var(--muted); border: 1px dashed var(--muted); font-weight: 500; }
/* teaming flag on the player list, trusted users only: tier A red, B orange, C grey */
.teaming-flag { margin-left: 6px; font-size: 16px; line-height: 1; text-decoration: none; vertical-align: middle; }
.teaming-flag-a { color: var(--red); } .teaming-flag-b { color: var(--orange); } .teaming-flag-c { color: var(--grey); }
/* one of the best players with their rank: scalps on the player page, who is playing on the games page */
.top-player { display: inline-flex; align-items: center; gap: 5px; margin: 1px 14px 1px 0; white-space: nowrap; }
.top-player .rank { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--chart); }
@media (max-width: 640px) { .top-player { display: block; margin-right: 0; white-space: normal; } } /* one to a line, and a long name may wrap */

/* ---- games: the save star, the day's bangers ---- */
.bookmark { padding: 0 2px; border: 0; background: none; font: inherit; font-size: 17px; line-height: 1; color: var(--muted); cursor: pointer; text-decoration: none; vertical-align: middle; }
.bookmark:hover { color: var(--gold); text-decoration: none; } .bookmark[aria-pressed=true] { color: var(--gold); }
td.star { width: 1%; padding-right: 0; } h1 .bookmark { font-size: 22px; }
.bangers { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin: 0 0 8px; }
.banger { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--chart); border-radius: 10px; min-width: 0; }
.banger header { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .banger .map-name { font-size: 16px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.banger .lobby-elo { margin-left: auto; padding: 1px 8px; border-radius: 99px; background: var(--bg); border: 1px solid var(--line); color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; } /* in the header row: the card stays its size */
.banger p { margin: 0; } .banger .heat b { font-size: 22px; color: var(--chart); font-variant-numeric: tabular-nums; margin-right: 2px; }
.banger .cast { flex: 1; font-size: 13px; line-height: 1.7; } .banger .cast .top-player { margin-right: 12px; }
.banger footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 13px; }
.banger .won { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .banger .won small { margin-left: 4px; }
@media (max-width: 640px) { .banger .cast .top-player { display: inline-flex; margin-right: 12px; white-space: nowrap; } }

/* ---- tiles ---- */
/* the dashboards: a number over a caption */
.stats { display: grid; align-items: start; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 0 0 24px; }
.stats div { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.stats b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; } .stats span { color: var(--muted); font-size: 12px; }
.stats b.ok { color: var(--ok); } .stats b.off { color: var(--warn); }
.stats .alarm { grid-column: 1 / -1; border-color: var(--warn); }
/* a player's page: label, number, small print */
.tiles { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin: 0 0 8px; }
.stat { flex: 1 1 130px; display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.stat .label { padding: 0; border-radius: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; display: flex; gap: 8px; align-items: center; }
.stat .label .bracket { text-transform: none; letter-spacing: 0; }
.stat b { font-size: 24px; line-height: 1.2; font-variant-numeric: tabular-nums; } .stat-main b { font-size: 34px; } .stat-main { flex: 1.5 1 190px; }
.stat b.name { font-size: 26px; overflow-wrap: anywhere; } .stat b.name a { color: inherit; }
.stat .sub { font-size: 12px; color: var(--muted); }
.stat .progress { display: block; height: 6px; margin-top: 6px; border-radius: 3px; background: var(--line); overflow: hidden; } .stat .progress span { display: block; height: 100%; background: var(--accent); }
.stat .cups { display: flex; gap: 12px; font-size: 20px; } .stat .cups small { font-size: 15px; margin-left: 3px; } .stat .cups .none { opacity: .3; }
@media (max-width: 640px) { .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .stat-main { grid-column: 1 / -1; } .stat .cups { gap: 8px; font-size: 17px; } .stat .cups small { font-size: 14px; } }

/* ---- players list: the class ladder ---- */
.ladder { display: flex; margin: 0 0 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); overflow-x: auto; }
.ladder a { flex: 1 0 auto; display: flex; flex-direction: column; gap: 1px; padding: 8px 14px 7px; border-top: 3px solid var(--rung, var(--ink)); border-left: 1px solid var(--line); color: var(--ink); font-weight: 600; font-size: 13px; white-space: nowrap; }
.ladder a:first-child { border-left: 0; } .ladder a:hover { text-decoration: none; background: color-mix(in srgb, var(--rung, var(--ink)) 9%, transparent); }
.ladder a small { font-weight: 400; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ladder a.on { background: color-mix(in srgb, var(--rung, var(--ink)) 18%, transparent); }
.players td.elo { font-weight: 600; }

/* ---- charts: the SVG stretches, so labels and dots are HTML laid over it ---- */
/* Elo chart: a smooth area line with a hover crosshair */
.elo-chart { position: relative; height: 300px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; touch-action: pan-y; }
.elo-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.elo-chart .line { fill: none; stroke: var(--chart); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.elo-chart .grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.elo-chart .floor { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 5; opacity: .45; vector-effect: non-scaling-stroke; }
.elo-chart .tick { position: absolute; left: 8px; transform: translateY(-50%); font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; background: var(--panel); padding-right: 4px; }
.elo-chart .day { position: absolute; bottom: 7px; transform: translateX(-50%); font-size: 11px; color: var(--muted); white-space: nowrap; }
.elo-chart .class-line { position: absolute; right: 8px; transform: translateY(-50%); font-size: 10px; padding: 0 6px; opacity: .85; }
.elo-chart .cup-dot { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; border: 2px solid var(--panel); }
.elo-chart .cup-dot.place-1 { background: var(--gold); } .elo-chart .cup-dot.place-2 { background: var(--silver); } .elo-chart .cup-dot.place-3 { background: var(--bronze); }
.elo-chart .guide { position: absolute; top: 0; bottom: 30px; width: 1px; background: var(--muted); opacity: .4; pointer-events: none; }
.elo-chart .dot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--chart); border: 3px solid var(--panel); box-shadow: 0 0 0 1px var(--chart); pointer-events: none; }
.elo-chart .tip { position: absolute; transform: translate(14px, -50%); display: grid; gap: 1px; padding: 8px 12px; border-radius: 8px; background: var(--ink); color: var(--bg); font-size: 12px; white-space: nowrap; pointer-events: none; box-shadow: 0 6px 20px rgb(0 0 0 / .18); z-index: 2; }
.elo-chart .tip.flip { transform: translate(calc(-100% - 14px), -50%); } .elo-chart .tip b { font-size: 16px; } .elo-chart .tip small { opacity: .7; }
.elo-chart .tip .up { color: #69db7c; } .elo-chart .tip .down { color: #ff8787; }
.elo-chart [hidden] { display: none; }
@media (max-width: 640px) {
  .elo-chart { height: 240px; }
  /* no room for a pill beside the line: the class is named in its colour, sitting on its dashed line */
  .elo-chart .class-line { right: 6px; padding: 0; background: none; color: var(--rung); opacity: 1; transform: translateY(-100%); }
}
/* race to the top: bump chart of the best players' positions; on a phone it keeps its width and scrolls, starting at "now" */
.race-scroll { margin: 0 0 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow-x: auto; }
.race { position: relative; min-width: 720px; }
.race svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.race .grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.race .lane { fill: none; stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; transition: opacity .12s; }
.race .hit { fill: none; stroke: transparent; stroke-width: 14; vector-effect: non-scaling-stroke; pointer-events: stroke; }
.race .dot { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; box-shadow: 0 0 0 2px var(--panel); transition: opacity .12s; }
.race .name { position: absolute; transform: translateY(-50%); font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .12s; }
.race .name small { font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
.race .tick { position: absolute; left: 10px; transform: translateY(-50%); font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.race .when { position: absolute; bottom: 5px; transform: translateX(-50%); font-size: 11px; color: var(--muted); white-space: nowrap; }
.race.focus .lane:not(.on), .race.focus .dot:not(.on), .race.focus .name:not(.on) { opacity: .12; }
.race.focus .lane.on { stroke-width: 4; }
/* dropped out of the top since: grey and thin behind the rest, named only when pointed at */
.race .lane.former { stroke-width: 1.5; opacity: .55; } .race .dot.former { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; opacity: .7; }
.race .name.former { display: none; padding: 1px 6px; border-radius: 5px; background: var(--ink); color: var(--bg); z-index: 3; overflow: visible; } .race .name.former small { color: inherit; opacity: .7; }
.race.focus .name.former.on { display: block; } .race.focus .lane.former.on, .race.focus .dot.former.on { opacity: 1; }
.leaders td.n { font-weight: 600; } .leaders td.muted { font-weight: 400; }
.swatch { display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; }

/* ---- teaming: game cards with their spawn maps ---- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); gap: 12px; }
.card { display: flex; gap: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px; }
.card h3 { margin: 0 0 6px; font-size: 15px; } .card .body { min-width: 0; flex: 1; }
.card.in-run { border-color: var(--a); box-shadow: inset 3px 0 0 var(--a); }
.card.off-run { opacity: .6; }
.card:has(.pick-game[aria-pressed="true"]) { outline: 2px solid var(--accent); outline-offset: -1px; }
.map { background: var(--bg); border: 1px solid var(--line); border-radius: 6px; flex: none; align-self: flex-start; max-width: 100%; height: auto; }
.map.empty { width: 220px; height: 120px; display: grid; place-items: center; color: var(--muted); }
.map .dot { fill: var(--muted); opacity: .55; } .mark { stroke: var(--panel); stroke-width: 4; }
.map .grid { stroke: var(--muted); stroke-width: 1; opacity: .25; vector-effect: non-scaling-stroke; }
.grid-label { fill: var(--muted); opacity: .55; font-family: ui-monospace, Menlo, monospace; }
.mark-gold { fill: var(--gold); } .mark-silver { fill: var(--silver); } .mark-bronze { fill: var(--bronze); }
.mark-a { fill: var(--a); } .mark-b { fill: var(--b); } .mark-c { fill: var(--c); } .mark-d { fill: var(--d); } .mark-e { fill: var(--e); } .mark-f { fill: var(--f); }
.mark-a-text { color: var(--a); } .mark-b-text { color: var(--b); } .mark-c-text { color: var(--c); } .mark-d-text { color: var(--d); } .mark-e-text { color: var(--e); } .mark-f-text { color: var(--f); }
.game-sort { margin: 0 0 10px; color: var(--muted); font-size: 13px; } .game-sort button { margin-left: 4px; padding: 2px 12px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--muted); font: inherit; cursor: pointer; }
.game-sort button:hover { border-color: var(--accent); color: var(--accent); } .game-sort button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 600; }
.game-sort button.help { margin-left: 12px; border-style: dashed; }
.pick-game { margin-left: 10px; padding: 3px 12px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.pick-game[hidden] { display: none; } .pick-game:hover { border-color: var(--accent); color: var(--accent); }
.pick-game[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 600; }
.help-dialog { max-width: 720px; width: calc(100% - 32px); max-height: 85vh; padding: 20px 24px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); }
.help-dialog::backdrop { background: rgb(0 0 0 / .45); }
.help-dialog h2 { margin: 0 0 12px; } .help-dialog dt { font-weight: 700; margin-top: 10px; } .help-dialog dd { margin: 2px 0 0; color: var(--muted); } .help-dialog dd b { color: var(--ink); }
.help-dialog .close { position: absolute; top: 10px; right: 12px; border: 0; background: none; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; }
@media (max-width: 560px) { .card { flex-direction: column; } .cards, .cols { grid-template-columns: 1fr; } }

/* ---- teaming: latest flags, associates ---- */
.latest { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; margin-bottom: 8px; }
.flag { display: grid; gap: 2px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); min-width: 0; }
.flag:hover { text-decoration: none; border-color: var(--accent); }
.flag .when { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.flag .who { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flag .what { font-size: 12px; color: var(--muted); }
.group { margin: 0 0 28px; padding: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.group h2 { margin: 0 0 8px; } .group h2 small { font-weight: 400; font-size: 13px; color: var(--muted); }
.group table { background: var(--bg); }
.members { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.member { padding: 3px 10px; border: 1px solid var(--line); border-radius: 99px; background: var(--bg); font-weight: 600; }
.member small { font-weight: 400; color: var(--muted); } h1 .member { font-size: 18px; }
.matrix-wrap { margin: 0 0 16px; overflow-x: auto; }
/* folded away until asked for: the summary line stays, a marker says there is more */
.fold { margin: 0 0 12px; } .fold summary { color: var(--muted); cursor: pointer; list-style: none; } .fold summary::-webkit-details-marker { display: none; }
.fold summary b { color: var(--ink); } .fold .fold-hint { margin-left: 6px; padding: 1px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--accent); font-size: 12px; white-space: nowrap; }
.fold .fold-hint::before { content: "▸ show the "; } .fold[open] .fold-hint::before { content: "▾ hide the "; } .fold[open] summary { margin-bottom: 10px; }
table.matrix { display: table; width: auto; border-collapse: separate; border-spacing: 3px; background: none; border: 0; overflow: visible; }
table.matrix thead { display: table-header-group; } table.matrix tbody { display: table-row-group; }
.matrix th { padding: 4px 10px; font-weight: 700; font-size: 13px; text-align: center; white-space: nowrap; background: none; border: 0; }
.matrix th, .matrix th code { text-transform: none; letter-spacing: 0; }
.matrix tbody th { text-align: right; } .matrix tbody th a { color: inherit; } .matrix tbody th code { display: block; font-weight: 400; }
.matrix td { padding: 0; min-width: 118px; text-align: center; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.matrix td a { display: block; padding: 7px 10px; color: var(--ink); text-decoration: none; } .matrix td a:hover { outline: 2px solid var(--accent); border-radius: 6px; }
.matrix td b { display: block; font-size: 17px; font-variant-numeric: tabular-nums; } .matrix td small { display: block; color: var(--muted); font-size: 11px; white-space: nowrap; }
.matrix td span { display: block; font-size: 12px; white-space: nowrap; }
.matrix .cell-a { background: rgba(201, 42, 42, .22); border-color: rgba(201, 42, 42, .55); } .matrix .cell-b { background: rgba(232, 89, 12, .16); border-color: rgba(232, 89, 12, .45); }
.matrix .self { background: none; border: 0; } .matrix .none, .matrix .weak { color: var(--muted); border-style: dashed; } .matrix .weak a { color: var(--muted); } .matrix .none { padding: 7px 10px; }
.matrix-key { margin: 8px 0 0; color: var(--muted); font-size: 12px; max-width: 110ch; }

/* ---- teaming: a pair's report, the review queue ---- */
.checklist { margin: 0 0 16px; padding: 14px 18px 14px 36px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; max-width: 110ch; display: grid; gap: 6px; }
.checklist .result { list-style: none; margin: 4px 0 4px -20px; padding: 8px 12px; background: var(--bg); border-left: 3px solid var(--a); border-radius: 0 6px 6px 0; }
.export { margin: 0 0 16px; max-width: 110ch; } .export summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.export textarea { width: 100%; margin: 8px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical; }
.export button { padding: 5px 16px; border: 1px solid var(--line); border-radius: 6px; background: var(--ink); color: var(--bg); cursor: pointer; font: inherit; }
.verdict-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 20px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.verdict-form span { color: var(--muted); }
.verdict-form button { padding: 5px 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); cursor: pointer; font: inherit; text-transform: capitalize; }
.verdict-form button:hover { border-color: var(--accent); } .verdict-form button.on { color: #fff; border-color: transparent; } .verdict-form button.quiet { border: 0; background: none; color: var(--muted); }
.verdict-form button.on.verdict-confirmed { background: var(--red); } .verdict-form button.on.verdict-cleared { background: var(--green); } .verdict-form button.on.verdict-unsure { background: var(--grey); }
.verdict-form input { flex: 1; min-width: 180px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); font: inherit; }
.standing { margin: 0 0 14px; max-width: 110ch; } .standing .verdict { margin: 0 8px 0 0; }
form.inline { display: inline; } .quiet-button { padding: 3px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; } .quiet-button:hover { border-color: var(--accent); color: var(--accent); }
.queue-position { margin: 0; color: var(--muted); font-size: 13px; white-space: nowrap; } .queue-position a { margin-left: 10px; }
/* the teaming side works with wide tables and rows of game cards: it gets the whole window */
.teaming main { max-width: none; } .teaming .lede, .teaming .legend, .teaming .checklist, .teaming .export, .teaming .pairings, .teaming .matrix-key, .teaming .standing, .teaming .note { max-width: none; }
.case-head h1 { margin: 0; } .case-head .piles { margin-left: auto; } /* the pile chooser sits with the position, on the right */ .case-head { margin-bottom: 4px; } .lede.tight { margin-bottom: 10px; }
.stats.compact { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 12px; } .stats.compact div { padding: 7px 12px; } .stats.compact b { font-size: 17px; }
.games-head { align-items: baseline; margin: 14px 0 8px; } .games-head h2 { margin: 0; } .games-head h2 small { font-weight: 400; font-size: 12px; color: var(--muted); } .games-head .game-sort { margin: 0; }
.teaming .cards { grid-template-columns: repeat(auto-fill, minmax(430px, 1fr)); gap: 10px; } .teaming .card { padding: 10px; gap: 12px; } .teaming .card dl { gap: 1px 10px; margin-bottom: 6px; font-size: 13px; }
.card dl.roster { grid-template-columns: 1fr auto; } .card dl.roster dd { white-space: nowrap; text-align: right; } /* who, then where they spawned and finished, on one line each */
/* the queue, or the chosen pile, is empty: a panel that says so and points on */
.nothing-left { margin: 12px 0 28px; padding: 36px 20px; text-align: center; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.nothing-left .tick { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); font-size: 22px; font-weight: 700; }
.nothing-left h2 { margin: 12px 0 4px; } .nothing-left p { margin: 0 auto 14px; max-width: 52ch; color: var(--muted); } .nothing-left p:last-child { margin-bottom: 0; }
.nothing-left a.button { display: inline-block; margin: 0 4px 6px; padding: 7px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font-weight: 600; font-size: 13px; }
.nothing-left a.button:hover { border-color: var(--ink); text-decoration: none; }
.recent-verdicts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 4px 24px; } .recent-verdicts .verdict { margin-left: 4px; font-size: 11px; padding: 1px 8px; }
/* a verdict takes a few watched replays: until then the buttons are locked and the count says why */
.verdict-form button[disabled] { opacity: .4; cursor: not-allowed; } .verdict-form button.on[disabled] { background: var(--muted); }
.verdict-form .gate { padding: 2px 10px; border-radius: 999px; border: 1px dashed var(--muted); font-size: 12px; white-space: nowrap; } .verdict-form .gate b { color: var(--ink); }
.verdict-form .gate.open, .verdict-form .gate[data-open] { border: 1px solid var(--ok); color: var(--ok); } .verdict-form .gate.open b { color: inherit; }
.pairings { list-style: none; margin: 0 0 16px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 6px; max-width: 120ch; }
/* what just happened in the queue: a toast at the bottom that fades by itself after a few seconds */
.toast { position: fixed; z-index: 30; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; max-width: min(900px, calc(100vw - 32px)); padding: 10px 16px; border-radius: 10px; background: var(--ink); color: var(--bg); font-size: 14px; box-shadow: 0 10px 30px rgb(0 0 0 / .3); animation: toast 9s ease-in forwards; }
.toast:hover { animation-play-state: paused; } .toast a, .toast button { color: inherit; font: inherit; font-weight: 700; text-decoration: underline; background: none; border: 0; padding: 0; cursor: pointer; white-space: nowrap; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, 12px); } 4%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; visibility: hidden; transform: translate(-50%, 0); } }
/* the review controls: on top of the case and staying there while the games scroll underneath */
.review-bar { position: sticky; top: 8px; z-index: 5; margin: 0 0 14px; border-color: var(--orange); box-shadow: 0 6px 18px rgb(0 0 0 / .12); }
.review-bar .watch-next { background: var(--ink); color: var(--bg); border-color: var(--ink); font-weight: 600; text-transform: none; } .review-bar .watch-next[disabled] { background: var(--muted); border-color: var(--muted); }
.review-bar.ready .watch-next { background: var(--bg); color: var(--ink); border-color: var(--line); font-weight: 400; }
.review-bar .prompt { color: var(--ink); font-weight: 600; }
.review-bar input { flex: 1 1 110px; min-width: 90px; } .review-bar .skip { margin-left: auto; white-space: nowrap; }
.card.current { outline: 2px solid var(--orange); outline-offset: -1px; }
/* Pointed out from the controls: the card's colours change for a moment and ease back. Nothing else does: no
   ring around it, no size, no position. */
/* (not named .flash: that is the notice banner) */
.card.pointed-out { animation: card-pointed-out 1.6s ease-in-out; }
@keyframes card-pointed-out {
  0%, 100% { background-color: var(--panel); border-color: var(--line); }
  30%, 50% { background-color: color-mix(in srgb, var(--orange) 20%, var(--panel)); border-color: var(--orange); }
}
.cards .card { scroll-margin: 84px 0 16px; } /* when scrolled to, clear of the review controls stuck to the top */
/* the grid cell to look at in the replay: a chip by the game's name and in the controls, a box on the spawn map */
.cell-chip { display: inline-block; padding: 0 7px; margin-left: 4px; border-radius: 5px; background: var(--ink); color: var(--bg); font: 700 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; vertical-align: 1px; }
.map .cell-focus { fill: color-mix(in srgb, var(--orange) 22%, transparent); stroke: var(--orange); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.verdict-form button.next-up { padding: 3px 8px; border: 1px solid transparent; background: none; text-transform: none; } .verdict-form button.next-up:hover { border-color: var(--orange); } .verdict-form button.next-up:empty { display: none; }
.review-bar .next-up { font-weight: 600; white-space: nowrap; color: var(--ink); }
/* fixed slots, so the buttons after them stay where they are as the label and the game's name change */
.review-bar .watch-next { flex: 0 0 158px; text-align: left; } .verdict-form button.next-up { flex: 0 0 250px; overflow: hidden; text-overflow: ellipsis; text-align: left; } .review-bar .gate { flex: 0 0 auto; min-width: 140px; text-align: center; } .review-bar .prompt { flex: 0 0 auto; }
@media (max-width: 1500px) { .verdict-form button.next-up { flex-basis: 200px; } .review-bar > small { display: none; } } /* narrower windows: the bar keeps to one row by dropping its words */ .review-bar .next-up .cell-chip { font-size: 16px; padding: 1px 9px; background: var(--orange); color: #fff; }
.card .pick { padding: 1px 7px; border-radius: 5px; border: 1px solid var(--orange); color: var(--orange); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; vertical-align: 2px; }
.review-bar button { text-transform: none; font-weight: 600; } .review-bar kbd { opacity: .7; font-size: 11px; margin-right: 2px; }
.review-bar .skip { color: var(--muted); }

/* ---- accounts: claiming a player, the Devise forms ---- */
.verified { margin-left: 6px; font-size: 15px; color: var(--ok); vertical-align: middle; cursor: help; }
.claim { margin: -8px 0 16px; font-size: 13px; } .claim form.inline { display: inline; }
.claim button { padding: 3px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink); font: inherit; cursor: pointer; } .claim button:hover { border-color: var(--accent); color: var(--accent); }
.claim.pending { max-width: 80ch; padding: 10px 14px; border: 1px solid var(--accent); border-radius: 8px; background: color-mix(in srgb, var(--accent) 7%, var(--panel)); font-size: 14px; } .claim.pending p { margin: 0 0 4px; }
.claim .code { padding: 1px 8px; border-radius: 5px; background: var(--ink); color: var(--bg); font-size: 15px; font-weight: 700; letter-spacing: .12em; }
/* sign in, sign up: one card in the middle of the page, what an account is for underneath */
.auth { max-width: 380px; margin: 6vh auto 0; padding: 26px 28px 22px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 30px rgb(0 0 0 / .06); }
.auth h1 { margin: 0 0 14px; } .auth .lede { margin-bottom: 18px; }
.auth .field { margin-bottom: 14px; } .auth label { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.auth .field small { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
.auth input:not([type=checkbox]):not([type=submit]) { width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font: inherit; }
.auth input:not([type=checkbox]):focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.auth .check { display: flex; align-items: center; gap: 8px; } .auth .check label { margin: 0; font-weight: 400; font-size: 13px; }
.auth input[type=submit], button.discord { width: 100%; padding: 10px 16px; border: 0; border-radius: 8px; background: var(--ink); color: var(--bg); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.auth input[type=submit]:hover { opacity: .88; }
button.discord { background: #5865f2; color: #fff; } button.discord:hover { background: #4752c4; }
.auth .switch { margin: 16px 0 0; text-align: center; font-size: 13px; color: var(--muted); }
.auth .dev-note { margin: 14px 0 0; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 8px; font-size: 12px; color: var(--muted); }
.form-errors { margin: 0 0 14px; padding: 8px 12px 8px 28px; border-radius: 8px; background: color-mix(in srgb, var(--warn) 10%, transparent); color: var(--warn); font-size: 13px; }
.auth-perks { max-width: 380px; margin: 18px auto 0; padding: 0 6px; list-style: none; display: grid; gap: 6px; font-size: 13px; color: var(--muted); } .auth-perks b { color: var(--ink); }
/* "which player are you?": the same card, with the search box's suggestions under its own field */
.auth.wide { max-width: 460px; } .auth ol { margin: 0 0 18px; padding-left: 20px; display: grid; gap: 6px; color: var(--muted); } .auth ol b { color: var(--ink); }
.finder { position: relative; } .finder .suggestions { left: 0; right: 0; width: auto; max-width: none; }
/* the account page Devise still renders by itself */
form.edit_user { max-width: 340px; } form.edit_user .field { margin-bottom: 12px; } form.edit_user label { display: block; font-size: 13px; color: var(--muted); }
form.edit_user input:not([type=checkbox]):not([type=submit]) { width: 100%; padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); }
form.edit_user input[type=submit] { padding: 7px 16px; border: 0; border-radius: 6px; background: var(--accent); color: #fff; font-weight: 600; cursor: pointer; }
@media (max-width: 640px) { .auth { margin-top: 8px; padding: 20px 18px 18px; } }

/* ---- phone: utilities, last so they win ---- */
.show-s { display: none; }
@media (max-width: 640px) {
  main { padding: 16px; }
  h1 { font-size: 22px; }
  .hide-s { display: none; }
  .show-s { display: block; }
  input, textarea, select { font-size: 16px !important; } /* iOS zooms the page into any field with smaller type */
  .seg a { padding: 6px 14px; }
}