/* Shared look for the pages people read: live game, team, player, scoreboard.
   The scorer app keeps its own copy of these tokens inline, because it has to
   render with no network at all. */
:root{
  --ink:#111827;
  --panel:#1A2334;
  --panel-2:#222D40;
  --line:#313E55;
  --text:#EDF2F6;
  --muted:#93A1B5;
  --home:#F7801F;
  --away:#49B6C6;
  --good:#5FD08A;
  --bad:#E4685D;
  --r:14px;
  box-sizing:border-box;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:inherit}
body{
  margin:0;background:var(--ink);color:var(--text);
  font-family:Archivo,"Helvetica Neue",Arial,sans-serif;
  font-size:15px;line-height:1.45;-webkit-text-size-adjust:100%;
}
a{color:var(--home)}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--home);outline-offset:2px}
.num{font-family:Anton,Impact,sans-serif;font-weight:400;letter-spacing:.01em}
.wrap{max-width:960px;margin:0 auto;padding:16px 16px 64px}

header.top{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
header.top a.brand{display:inline-flex;align-items:center;gap:8px;font-weight:800;text-decoration:none;
  color:var(--text);font-size:17px;letter-spacing:-.01em}
header.top a.brand img{width:28px;height:28px;border-radius:7px}
header.top a.brand b{font-weight:800}
.brand b span,.wordmark span{color:var(--home)}

/* The generic line icons in lib/icons.svg, sat in front of a heading. */
.ic{width:17px;height:17px;vertical-align:-3px;margin-right:7px;color:var(--home);flex:none}
header.top .spacer{flex:1}

.pill{display:inline-block;padding:3px 9px;border-radius:999px;background:var(--panel-2);
      border:1px solid var(--line);font-size:11px;font-weight:700;color:var(--muted)}
.pill.live{background:rgba(228,104,93,.16);border-color:rgba(228,104,93,.5);color:#F3B5AE}
.pill.final{background:rgba(95,208,138,.14);border-color:rgba(95,208,138,.45);color:#B7EBCB}

.scoreline{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;
           background:var(--panel);border-radius:var(--r);padding:16px;margin-bottom:14px}
.scoreline .t{font-size:13px;font-weight:700;color:var(--muted)}
.scoreline .t.h{color:var(--home)}
.scoreline .t.a{color:var(--away);text-align:right}
.scoreline .s{font-size:clamp(38px,12vw,62px);line-height:.95}
.scoreline .s.a{text-align:right}
.scoreline .mid{text-align:center;min-width:96px}
.scoreline .clock{font-size:clamp(18px,6vw,26px)}
.scoreline .per{font-size:12px;color:var(--muted);font-weight:600}

.tabs{display:flex;gap:4px;background:var(--panel);border-radius:12px;padding:4px;margin-bottom:14px;overflow-x:auto}
.tabs button{flex:1 0 auto;padding:9px 12px;border-radius:9px;font-weight:600;font-size:13px;color:var(--muted);white-space:nowrap}
.tabs button[aria-selected="true"]{background:var(--panel-2);color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}

.card{background:var(--panel);border-radius:var(--r);padding:14px;margin-bottom:12px}
.card h2{margin:0 0 10px;font-size:14px}
.card h3{margin:0 0 8px;font-size:13px;color:var(--muted)}

.pbp{list-style:none;margin:0;padding:0}
.pbp li{display:grid;grid-template-columns:52px 1fr auto;gap:8px;align-items:baseline;
        padding:7px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:13px}
.pbp li:last-child{border-bottom:0}
.pbp .t{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.pbp .sc{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.qhead{font-size:11px;font-weight:700;color:var(--muted);padding:10px 0 4px}
.pbp li.qhead{display:block}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:middle}
.dot.h{background:var(--home)}.dot.a{background:var(--away)}

table{width:100%;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums}
th,td{padding:6px 3px;text-align:right;white-space:nowrap}
th{color:var(--muted);font-weight:600;font-size:10px;border-bottom:1px solid var(--line)}
td:first-child,th:first-child{text-align:left}
tbody tr:nth-child(even){background:rgba(255,255,255,.025)}
tfoot td{border-top:1px solid var(--line);font-weight:700}
.scroller{overflow-x:auto;-webkit-overflow-scrolling:touch}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:8px}
.stat{background:var(--panel-2);border-radius:12px;padding:10px;text-align:center}
.stat .v{font-family:Anton,Impact,sans-serif;font-size:24px;line-height:1.1}
.stat .k{font-size:10px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}

.list{list-style:none;margin:0;padding:0}
.list li{display:flex;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:13px}
.list li:last-child{border-bottom:0}
.list .when{font-size:11px;color:var(--muted);min-width:64px}
.list .res{font-weight:700;font-variant-numeric:tabular-nums}
.list .res.w{color:var(--good)}
.list .res.l{color:var(--bad)}
.list a{text-decoration:none;color:inherit;flex:1}

.empty{color:var(--muted);font-size:13px;padding:16px 0;text-align:center}
.muted{color:var(--muted)}
.redacted{color:var(--muted);font-style:italic}
.err{background:rgba(228,104,93,.12);border:1px solid rgba(228,104,93,.4);border-radius:12px;padding:12px;font-size:13px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Crowd scoring: the "Something wrong?" sheet and the helper screens, shared by
   the live viewer and the helper page (lib/crowd.js). */
.cw-scrim{position:fixed;inset:0;background:rgba(8,12,16,.72);z-index:60}
.cw-sheet{position:fixed;left:0;right:0;bottom:0;z-index:70;max-height:88vh;overflow:auto;
  background:var(--panel);border-radius:18px 18px 0 0;padding:16px 16px calc(18px + env(safe-area-inset-bottom,0px));
  max-width:560px;margin:0 auto;box-shadow:0 -8px 30px rgba(0,0,0,.4)}
.cw-sheet h4{margin:0 0 2px;font-size:16px}
.cw-sheet .sub{margin:0 0 12px;font-size:12px;color:var(--muted)}
.cw-sheet label.opt{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;
  background:var(--panel-2);border:1px solid var(--line);margin-bottom:6px;font-size:14px}
.cw-sheet label.opt input[type=radio]{width:18px;height:18px;accent-color:var(--home)}
.cw-sheet select,.cw-sheet input[type=text],.cw-sheet input[type=number],.cw-field input,.cw-field select{
  padding:9px;border-radius:10px;background:var(--panel-2);border:1px solid var(--line);color:var(--text);font:inherit}
.cw-sheet .row{display:flex;gap:8px;align-items:center}
.cw-btn{width:100%;padding:12px;border-radius:12px;background:var(--home);color:#22160A;font-weight:700;margin-top:10px}
.cw-btn.ghost{background:var(--panel-2);color:var(--text);border:1px solid var(--line);font-weight:600}
.cw-btn.bad{background:#3A2A2A;border:1px solid #5A3A38;color:#F3B5AE;font-weight:600}
.cw-wrong{background:none;border:0;padding:0 0 0 6px;color:var(--muted);font-size:11px;text-decoration:underline;cursor:pointer}
.cw-chips{display:flex;flex-wrap:wrap;gap:6px}
.cw-chips button{min-width:44px;height:44px;padding:0 10px;border-radius:22px;background:var(--panel-2);
  border:2px solid var(--home);font-family:Anton,Impact,sans-serif;font-size:17px}
.cw-chips.away button{border-color:var(--away)}
.cw-chips button[disabled]{opacity:.35}
.cw-note{font-size:12px;color:var(--muted);background:var(--panel-2);border:1px dashed var(--line);
  border-radius:10px;padding:8px 10px;margin:0 0 12px}