/* Shared by index.html (leaderboard) and compare.html. */
/* ---- colours ----
Every colour on the site is one of these tokens. Light is the default. Dark
applies when the visitor flips the toggle (data-theme="dark" on ), or
when their device prefers dark and they haven't chosen light. The dark set
is listed twice because CSS can't share one block between a media query and
an attribute selector. */
:root{
color-scheme:light;
--bg:#d4d4d4;
--chrome:#e6e6e6;
--line:#b9b9b9;
--track:#e2e2e2;
--trackline:#cfcfcf;
--green:#93dd93;
--blue:#5b8db8;
--ink:#1c1c1c;
--muted:#5b5b5b;
--boxbg:#fbfbfb;
--boxline:#7ba7cc;
--boxborder:#9a9a9a; /* player name box */
--rowline:#d0d0d0; /* leaderboard dividers */
--surface:#fff; /* menus and buttons */
--surface-hover:#f3f3f3;
--na:#9a9a9a;
--why:#8a4b00; /* "needs 10 games" notes */
--link:#2c5d8a;
--badge-bg:#2f6b2f;
--badge-ink:#e3f6e3;
--warn-bg:#f6d9d9;
--warn-line:#c07a7a;
--warn-ink:#6d1f1f;
--code-bg:#ededed;
--code-line:#cfcfcf;
--shadow:rgba(0,0,0,.25);
--backdrop:rgba(0,0,0,.45);
--drop-zone:rgba(123,167,204,.14);
--serif:Georgia,"Times New Roman",serif;
--sans:Arial,Helvetica,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
color-scheme:dark;
--bg:#1b1d20; --chrome:#26292d; --line:#3d4147; --track:#33373d; --trackline:#42474e;
--green:#7fd08a; --blue:#6b9fcd; --ink:#e4e6e8; --muted:#a4a9af;
--boxbg:#1d2023; --boxline:#6b9fcd; --boxborder:#565b62; --rowline:#34383e;
--surface:#1d2023; --surface-hover:#2d3136; --na:#737980; --why:#e3a35a; --link:#8cb8e0;
--badge-bg:#2f6b2f; --badge-ink:#e3f6e3;
--warn-bg:#3b2326; --warn-line:#7c3f43; --warn-ink:#f4c7c9;
--code-bg:#2d3136; --code-line:#42474e;
--shadow:rgba(0,0,0,.6); --backdrop:rgba(0,0,0,.65); --drop-zone:rgba(107,159,205,.16);
}
}
:root[data-theme="dark"]{
color-scheme:dark;
--bg:#1b1d20; --chrome:#26292d; --line:#3d4147; --track:#33373d; --trackline:#42474e;
--green:#7fd08a; --blue:#6b9fcd; --ink:#e4e6e8; --muted:#a4a9af;
--boxbg:#1d2023; --boxline:#6b9fcd; --boxborder:#565b62; --rowline:#34383e;
--surface:#1d2023; --surface-hover:#2d3136; --na:#737980; --why:#e3a35a; --link:#8cb8e0;
--badge-bg:#2f6b2f; --badge-ink:#e3f6e3;
--warn-bg:#3b2326; --warn-line:#7c3f43; --warn-ink:#f4c7c9;
--code-bg:#2d3136; --code-line:#42474e;
--shadow:rgba(0,0,0,.6); --backdrop:rgba(0,0,0,.65); --drop-zone:rgba(107,159,205,.16);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px}
.wrap{max-width:1440px;margin:0 auto;padding:22px 24px 60px}
header h1{font-family:var(--serif);font-weight:400;font-size:30px;margin:0 0 4px}
header h1 b{font-weight:700}
.meta{color:var(--muted);font-size:12.5px;margin:0 0 12px;line-height:1.6}
/* Inline, not inline-block: an inline element's vertical padding doesn't grow
the line, so a FINAL pill and plain IN PROGRESS text take the same height
and compare cards stay row-aligned across seasons. */
.badge{display:inline;background:var(--badge-bg);color:var(--badge-ink);font-size:11px;font-weight:700;
padding:2px 9px;border-radius:20px;margin-left:6px;line-height:1}
.badge.live{background:none;color:inherit;padding:0;border-radius:0}
/* ---- title row and dark mode switch ---- */
.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.theme-toggle{flex:none;display:inline-flex;align-items:center;gap:8px;margin-top:7px;
background:none;border:1px solid transparent;padding:4px 6px;color:var(--muted);
font-family:var(--sans);font-size:11px;text-transform:uppercase;letter-spacing:.7px;
cursor:pointer}
.theme-toggle:hover{color:var(--ink)}
.tt-track{position:relative;width:38px;height:20px;border-radius:10px;background:var(--track);
border:1px solid var(--line);transition:background-color .15s,border-color .15s}
.tt-knob{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
background:var(--muted);transition:transform .15s,background-color .15s}
.theme-toggle[aria-checked="true"] .tt-track{background:var(--blue);border-color:var(--blue)}
.theme-toggle[aria-checked="true"] .tt-knob{transform:translateX(18px);background:#fff}
@media (prefers-reduced-motion: reduce){ .tt-track,.tt-knob{transition:none} }
/* ---- page tabs ---- */
.tabs{display:flex;gap:4px;margin:0 0 16px;border-bottom:1px solid var(--line)}
.tabs a{padding:7px 15px;color:var(--ink);text-decoration:none;font-size:13.5px;
border:1px solid transparent;border-bottom:none;margin-bottom:-1px}
.tabs a[aria-current="page"]{background:var(--chrome);border-color:var(--line);font-weight:700}
.tabs a:not([aria-current]):hover{text-decoration:underline}
.tabs a:focus-visible{outline:2px solid var(--boxline);outline-offset:1px}
/* ---- controls ---- */
.controls{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;
background:var(--chrome);border:1px solid var(--line);padding:13px 16px;margin-bottom:18px}
.controls label{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;
letter-spacing:.7px;margin-bottom:5px}
.controls select{background:var(--surface);color:var(--ink);border:1px solid var(--line);
padding:7px 9px;font-size:14px;font-family:var(--sans);min-width:210px}
select:focus-visible,button:focus-visible{outline:2px solid var(--boxline);outline-offset:1px}
.btn{background:var(--surface);color:var(--ink);border:1px solid var(--line);padding:7px 14px;
font-size:14px;font-family:var(--sans);cursor:pointer;line-height:1.3}
.btn:hover:not(:disabled){background:var(--surface-hover)}
.btn:disabled{color:var(--na);cursor:default}
/* ---- metric definitions dialog ---- */
dialog.defs{border:1px solid var(--line);padding:0;width:calc(100% - 32px);max-width:680px;
background:var(--chrome);color:var(--ink);box-shadow:0 12px 40px var(--shadow)}
dialog.defs::backdrop{background:var(--backdrop)}
.defs-inner{padding:18px 24px 24px;max-height:calc(100vh - 80px);overflow:auto}
.defs-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.defs-head h2{font-family:var(--serif);font-weight:400;font-size:25px;margin:0}
.defs-close{background:none;border:1px solid transparent;font-size:26px;line-height:1;
width:36px;height:36px;cursor:pointer;color:var(--muted)}
.defs-close:hover{color:var(--ink);border-color:var(--line)}
.defs-note{color:var(--muted);font-size:12.5px;line-height:1.55;margin:6px 0 4px}
.defs h3{font-family:var(--serif);font-weight:400;font-size:21px;margin:20px 0 4px;
padding-bottom:5px;border-bottom:1px solid var(--line)}
.defs dl{margin:0}
.defs dt{font-weight:700;font-size:13.5px;margin-top:12px}
.defs dd{margin:3px 0 0;font-size:13px;line-height:1.5}
.defs-rule{display:block;color:var(--muted);font-size:12px;margin-top:2px}
/* ---- season / tournament picker ---- */
.picker{position:relative;display:block}
.picker-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
background:var(--surface);color:var(--ink);border:1px solid var(--line);padding:7px 9px;
font-size:14px;font-family:var(--sans);cursor:pointer;text-align:left}
.picker-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.picker-caret{flex:none;color:var(--muted);font-size:12px}
.picker-panel{position:absolute;z-index:40;top:calc(100% + 4px);left:0;width:max-content;min-width:100%;
max-width:min(440px, calc(100vw - 24px));max-height:min(62vh, 480px);overflow:auto;
background:var(--chrome);border:1px solid var(--line);box-shadow:0 10px 30px var(--shadow);
padding:6px 0 8px;text-transform:none;letter-spacing:0}
.picker-hint{margin:4px 12px 6px;font-size:12px;line-height:1.45;color:var(--muted)}
.picker-hint.picker-warn{color:var(--why)}
.picker-group-title{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);padding:9px 12px 3px}
.picker-row{display:flex;align-items:center;gap:8px;padding:2px 12px}
.picker-row:hover{background:var(--surface-hover)}
.picker-row input{margin:0;flex:none;accent-color:var(--blue)}
.picker-name{background:none;border:0;padding:4px 0;font-family:var(--sans);font-size:13.5px;color:var(--ink);
cursor:pointer;text-align:left}
.picker-name:hover{text-decoration:underline}
.picker-meta{margin-left:auto;padding-left:16px;font-size:11.5px;color:var(--muted);white-space:nowrap}
/* ---- tournament note (no minimums) ---- */
.mode-note{background:var(--chrome);border:1px solid var(--line);border-left:4px solid var(--why);
padding:9px 14px;margin:-6px 0 18px;font-size:13px;line-height:1.5;color:var(--ink)}
.mode-note b{color:var(--why)}
.defs-tournament{border-left:3px solid var(--why);padding-left:10px}
.panel{background:var(--chrome);border:1px solid var(--line);padding:16px 18px 18px}
.panel h2{font-family:var(--serif);font-weight:400;font-size:21px;margin:0 0 2px}
.panel .sub{color:var(--muted);font-size:12px;margin:0 0 12px}
/* ---- slider pieces ---- */
.grp{font-family:var(--serif);font-size:23px;margin:24px 0 13px}
.grp:first-of-type{margin-top:4px}
.raw{display:block;font-weight:400;font-size:11.5px;color:var(--muted);
font-variant-numeric:tabular-nums;margin-top:1px}
.why{display:block;font-weight:400;font-size:11px;color:var(--why);margin-top:1px}
.strack{background:var(--track);border:1px solid var(--trackline);height:31px;min-width:0}
.strack>i{display:block;height:100%}
.sval{background:var(--boxbg);border:2px dashed var(--boxline);height:47px;
display:flex;align-items:center;justify-content:center;font-size:21px;
font-variant-numeric:tabular-nums}
.sval.na{color:var(--na);font-size:15px}
footer{color:var(--muted);font-size:12px;margin-top:24px;line-height:1.65;max-width:100ch}
footer a{color:var(--link)}
.warn{background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn-ink);padding:11px 15px;
margin-bottom:15px;font-size:13.5px}
code{font-family:Consolas,"Courier New",monospace;font-size:.9em;background:var(--code-bg);
border:1px solid var(--code-line);padding:.5px 4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0,0,0,0);white-space:nowrap;border:0}