:root{box-sizing:border-box;
--bg:#fdfbf7;--fg:#1c1a17;--dim:#736c62;--line:#e6ded1;--card:#fff;
--acc:#a8431f;--acc2:#1d5c7a;--chip:#f4efe6;--good:#1d7a45;
--p0:#e8a33d;--p1:#4a9a5c;--p2:#4a7fbd;--p3:#c65a90;
--pick0:#ffe9c9;--pick1:#d4ecd6;--pick2:#d9e6f7;--pick3:#f6d9e6;--bad:#b3341f}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
--bg:#15130f;--fg:#efe9e0;--dim:#9b9287;--line:#2f2a24;--card:#1e1b16;
--acc:#e08a5f;--acc2:#6fb5d4;--chip:#262019;--good:#4fbf7f;--bad:#e07a5f;
--p0:#e8a33d;--p1:#5bbd72;--p2:#6fa8dc;--p3:#d98cb3;
--pick0:#40300f;--pick1:#16301f;--pick2:#152738;--pick3:#331526}}
:root[data-theme="dark"]{--bg:#15130f;--fg:#efe9e0;--dim:#9b9287;--line:#2f2a24;--card:#1e1b16;
--acc:#e08a5f;--acc2:#6fb5d4;--chip:#262019;--good:#4fbf7f;--bad:#e07a5f;
--p0:#e8a33d;--p1:#5bbd72;--p2:#6fa8dc;--p3:#d98cb3;
--pick0:#40300f;--pick1:#16301f;--pick2:#152738;--pick3:#331526}
*{box-sizing:border-box}html,body{margin:0}
body{background:var(--bg);color:var(--fg);
font:16px/1.5 ui-rounded,"Segoe UI",system-ui,-apple-system,sans-serif;
padding-top:env(safe-area-inset-top,0);padding-bottom:env(safe-area-inset-bottom,0)}
.wrap{max-width:900px;margin:0 auto;padding:16px}
h1{font-size:23px;margin:0 0 3px;letter-spacing:-.02em}
.sub{color:var(--dim);font-size:13.5px;margin-bottom:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:15px;margin-bottom:14px}
h2{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--acc);margin:0 0 12px;font-weight:700}
/* scoreboard */
.score{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;text-align:center}
.who{font-size:15px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:7px;
 min-height:44px;line-height:1.2}
.pts{font-size:54px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.vs{font-size:12px;color:var(--dim);letter-spacing:.1em;text-transform:uppercase}
.dot{width:12px;height:12px;border-radius:50%;flex:0 0 auto}
.lead .pts{color:var(--good)}
.verdict{text-align:center;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);
 font-size:14px;color:var(--dim)}
.verdict b{color:var(--fg)}
/* category table */
table{border-collapse:collapse;width:100%;font-size:14px;font-variant-numeric:tabular-nums}
th{text-align:right;padding:7px 6px;border-bottom:1px solid var(--line);font-size:11px;
 color:var(--dim);font-weight:700;letter-spacing:.05em;text-transform:uppercase}
th:first-child{text-align:left}
td{padding:7px 6px;border-bottom:1px solid var(--line);text-align:right}
td:first-child{text-align:left}
td.win{font-weight:800;color:var(--good)}
.wt{font-size:10.5px;font-weight:700;color:var(--acc);margin-left:5px}
tr.total td{border-bottom:0;padding-top:12px;font-weight:800;font-size:17px}
.bar{height:4px;border-radius:2px;background:var(--line);overflow:hidden;display:flex}
.bar i{display:block;height:100%}
/* boxes */
.grp{margin-top:18px}
.grp h3{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);
 margin:0 0 7px;font-weight:700}
.box{border:1px solid var(--line);border-radius:9px;padding:10px 11px;margin-bottom:8px;background:var(--bg)}
.bx{font-size:14.5px;font-weight:700;color:var(--acc2);margin-bottom:6px}
.pk{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:3px 0;font-size:14px}
.pk .nm{display:flex;align-items:baseline;gap:7px;min-width:0}
.pk .nm span.dot{width:9px;height:9px;position:relative;top:-1px}
.pk .v{font-variant-numeric:tabular-nums;color:var(--dim);flex:0 0 auto}
.pk.top .v{color:var(--good);font-weight:700}
.note{font-size:12.5px;color:var(--dim);line-height:1.5}
.err{background:#b3341f;color:#fff;padding:12px 14px;border-radius:9px;font-size:14px}
@media(max-width:560px){.pts{font-size:42px}.wrap{padding:14px}}

/* player colours as classes -- style="" attributes are blocked by CSP */
.c0{background:var(--p0)}.c1{background:var(--p1)}.c2{background:var(--p2)}.c3{background:var(--p3)}
.dot.inl{display:inline-block;margin-right:5px}
.barwrap{margin-top:14px}
td.who{color:var(--dim);font-size:13px}

/* ---- draft page ---- */
.ctrl{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
input,button,.btn{font:inherit;background:var(--card);color:var(--fg);border:1px solid var(--line);
 border-radius:8px;padding:7px 11px;text-decoration:none;display:inline-block}
button,.btn{cursor:pointer}
button.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
button[disabled]{opacity:.45;cursor:not-allowed}
.sync{font-size:12.5px;color:var(--dim);display:inline-flex;align-items:center;gap:6px;padding:7px 2px}
.dot.ok{background:var(--good)}.dot.warn{background:#d9a021}.dot.err{background:var(--bad,#b3341f)}
.pinrow{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
.pinrow label{font-size:13px;color:var(--dim)}
.pinrow input{width:130px}
.hide{display:none}
.who{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
.who input{width:140px;border-left-width:5px}
.who input.sel{border-color:var(--acc);border-width:2px;border-left-width:5px}
.who .e0{border-left-color:var(--p0)}.who .e1{border-left-color:var(--p1)}
.who .e2{border-left-color:var(--p2)}.who .e3{border-left-color:var(--p3)}
.boxes{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.dbox{border:1px solid var(--line);border-radius:10px;padding:11px;background:var(--bg)}
.dbox h4{font-size:14.5px;font-weight:700;color:var(--acc2);margin:0 0 7px;
 display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.dbox h4 span{font-size:11px;color:var(--dim);font-weight:500;letter-spacing:.04em}
.wide{grid-column:1/-1}
.cand{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;
 padding:6px 8px;border-radius:7px;font-size:14.5px}
.editable .cand{cursor:pointer}
.editable .cand:hover{background:var(--chip)}
.cand.o0{background:var(--pick0)}.cand.o1{background:var(--pick1)}
.cand.o2{background:var(--pick2)}.cand.o3{background:var(--pick3)}
.cand .tm{color:var(--dim);font-size:11.5px;font-weight:600;letter-spacing:.04em}
.cand .val{color:var(--dim);font-size:12.5px;font-variant-numeric:tabular-nums;flex:0 0 auto}
.cand .rn{font-size:12.5px;color:var(--dim);line-height:1.35;display:block;margin-top:2px;max-width:60ch}
.flag{position:relative;display:inline-block;font-size:10px;font-weight:800;letter-spacing:.06em;
 padding:1px 5px;border-radius:4px;margin-left:5px;vertical-align:1px;cursor:help}
.flag.out{background:#b3341f;color:#fff}.flag.watch{background:#d9a021;color:#2b1d00}
.flag .tip{display:none;position:absolute;left:0;top:calc(100% + 6px);z-index:40;width:max-content;
 max-width:min(270px,68vw);background:var(--fg);color:var(--bg);font-size:12px;font-weight:500;
 letter-spacing:0;line-height:1.4;padding:7px 9px;border-radius:7px;text-align:left}
.flag:hover .tip,.flag:focus .tip,.flag.open .tip{display:block}
.dimtxt{color:var(--dim)}
.tag{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.err{background:var(--bad);color:#fff}

.toplink{margin:0 0 14px}
.stale{border-color:#d9a021;border-left:5px solid #d9a021;font-size:13.5px;line-height:1.5}
.stale code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--chip);
 padding:1px 5px;border-radius:4px;font-size:12.5px}
.chip{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.03em;
 padding:1px 6px;border-radius:9px;margin-left:7px;background:var(--chip);color:var(--dim);
 vertical-align:1px;white-space:nowrap}
.chip.good{background:var(--good);color:#fff}
.bestrow{border-top:1px dashed var(--line);margin-top:5px;padding-top:7px;color:var(--dim);font-size:13px}
.bestrow b{color:var(--fg)}
.of{font-size:11px;color:var(--dim);font-weight:500;margin-left:2px}