/* ==========================================================================
   WNFC — design system, from wnfc-restyle/mockups-reference.html (approved).
   Tokens and component classes are lifted from the reference verbatim except
   for two documented contrast fixes (see --red-text / --red-dot below).
   Fonts are self-hosted: no third-party requests at render time.
   ========================================================================== */

/* --- @font-face: Barlow, Barlow Condensed, IBM Plex Mono (see fonts/) ----- */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/barlow-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/barlow-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/barlow-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/barlow-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/barlow-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/barlow-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/barlow-condensed-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/barlow-condensed-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/barlow-condensed-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/barlow-condensed-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/barlow-condensed-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/barlow-condensed-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --night:#0D1411;        /* floodlit night, green-tinged */
  --panel:#151F1A;
  --panel-2:#1B2822;
  --chalk:#EEF2EC;        /* line markings + primary text */
  --chalk-dim:#93A29A;
  --grass:#3F7C50;
  --red:#E0342C;
  --red-deep:#8E1B16;
  --yellow:#F2C51D;
  --yellow-deep:#8F7208;
  --line:rgba(238,242,236,.16);
  --radius:10px;

  /* Contrast fixes over the reference (audited against WCAG AA):
     --red on --panel is 3.78:1 as *text*, below the 4.5 body-text floor, so
     text-only reds use --red-text (4.95:1). White on --red is 4.47:1 inside
     the 14px player dots, so those use --red-dot (4.91:1). Both are within a
     shade of the approved colour; --red itself is unchanged for bibs, borders
     and other non-text fills. */
  --red-text:#EC5A52;
  --red-dot:#D62E26;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--night);
  background-image:radial-gradient(ellipse 120% 60% at 50% -10%, rgba(238,242,236,.07), transparent 60%);
  background-attachment:fixed;
  color:var(--chalk);
  font-family:'Barlow',system-ui,-apple-system,sans-serif;
  font-size:15px;line-height:1.5;
  min-height:100vh;
}
a{color:inherit}

/* Visible keyboard focus on everything interactive. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--chalk);
  outline-offset:2px;
  border-radius:4px;
}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:99;background:var(--chalk);color:var(--night);padding:8px 12px;border-radius:6px}

.wrap{max-width:430px;margin:0 auto;padding:0 0 64px}
.screen{padding:0 16px}

/* ---------- app chrome ---------- */
header.app{padding:22px 2px 6px;display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.wordmark{font-family:'Barlow Condensed',system-ui,sans-serif;font-weight:700;font-size:34px;letter-spacing:.02em;line-height:1;text-decoration:none;color:var(--chalk)}
.wordmark small{display:block;font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:400;font-size:9px;letter-spacing:.28em;color:var(--chalk-dim);margin-top:3px}
.kickoff{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;color:var(--chalk-dim);text-align:right;line-height:1.7;flex:none}
.kickoff b{color:var(--chalk);font-weight:500}
.kickoff a{color:var(--chalk-dim)}

/* ---------- panels: chalk borders like pitch markings ---------- */
.panel{border:1.5px solid var(--line);border-radius:var(--radius);background:var(--panel);margin-top:14px;overflow:hidden}
.panel .hd{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.panel .hd h2{font-family:'Barlow Condensed',system-ui,sans-serif;font-weight:600;font-size:17px;letter-spacing:.08em;text-transform:uppercase}
.panel .hd .tag{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;color:var(--chalk-dim);letter-spacing:.08em;text-align:right}
.panel .bd{padding:14px}

/* ---------- signature: peg board counter ---------- */
.count-row{display:flex;align-items:flex-end;justify-content:space-between;padding:18px 2px 4px}
.bigcount{font-family:'Barlow Condensed',system-ui,sans-serif;font-weight:700;font-size:64px;line-height:.9;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.bigcount span{font-size:28px;color:var(--chalk-dim);font-weight:600}
.count-label{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.2em;color:var(--chalk-dim);text-transform:uppercase;padding-bottom:8px;text-align:right;line-height:1.8}
.pegs{display:grid;grid-template-columns:repeat(9,1fr);gap:7px;padding:10px 2px 2px}
.peg{aspect-ratio:1;border-radius:50%;border:1.5px solid var(--line);position:relative}
.peg.full{background:var(--chalk);border-color:var(--chalk);box-shadow:0 0 10px rgba(238,242,236,.25)}
.peg.wait{border-style:dashed;border-color:var(--chalk-dim)}

/* ---------- roster ---------- */
.roster{list-style:none}
.roster li{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px dashed rgba(238,242,236,.08)}
.roster li:last-child{border-bottom:none}
.num{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;color:var(--chalk-dim);width:20px;text-align:right;flex:none}
.pname{font-weight:500}
.ptime{margin-left:auto;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;color:var(--chalk-dim);flex:none}
.badge{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9px;letter-spacing:.1em;padding:2px 7px;border-radius:99px;border:1px solid var(--line);color:var(--chalk-dim);flex:none}
.badge.wl{border-color:var(--yellow-deep);color:var(--yellow)}
.badge.out{border-color:var(--red-deep);color:var(--red-text)}

/* ---------- pitch team sheet ---------- */
.pitch{position:relative;border:1.5px solid var(--line);border-radius:var(--radius);margin-top:14px;background:
  linear-gradient(rgba(238,242,236,.03) 1px, transparent 1px);
  background-size:100% 25%;overflow:hidden}
.half{padding:16px 10px 20px;position:relative}
.half+.half{border-top:1.5px solid var(--line)}
.half::before{content:"";position:absolute;left:50%;transform:translateX(-50%);width:110px;height:55px;border:1.5px solid var(--line);border-radius:0 0 90px 90px;border-top:none;top:0;opacity:.6}
.half.bottom::before{top:auto;bottom:0;border-radius:90px 90px 0 0;border-top:1.5px solid var(--line);border-bottom:none}
.teamname{display:flex;align-items:center;gap:8px;font-family:'Barlow Condensed',system-ui,sans-serif;font-weight:700;font-size:19px;letter-spacing:.12em;text-transform:uppercase;padding:0 6px 10px;position:relative;z-index:2}
.teamname.end{justify-content:flex-end;padding-top:12px;padding-bottom:0}
.bib{width:13px;height:15px;border-radius:3px 3px 5px 5px;position:relative;flex:none}
.bib::before,.bib::after{content:"";position:absolute;top:-3px;width:4px;height:5px;border-radius:2px;background:inherit}
.bib::before{left:1px}.bib::after{right:1px}
.bib.r{background:var(--red)}.bib.y{background:var(--yellow)}
.row{display:flex;justify-content:space-evenly;margin-top:12px;position:relative;z-index:2}
.pl{text-align:center;width:76px;max-width:33%}
.dot{width:34px;height:34px;border-radius:50%;margin:0 auto 4px;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',system-ui,sans-serif;font-weight:700;font-size:14px}
.dot.r{background:var(--red-dot);color:#fff;box-shadow:0 3px 10px rgba(224,52,44,.4)}
.dot.y{background:var(--yellow);color:#3A2E00;box-shadow:0 3px 10px rgba(242,197,29,.35)}
.pl b{display:block;font-size:12px;font-weight:600;line-height:1.2;overflow-wrap:anywhere}
.pl b.empty{color:var(--chalk-dim);font-weight:500}
.pl i{font-family:'IBM Plex Mono',ui-monospace,monospace;font-style:normal;font-size:9px;color:var(--chalk-dim);letter-spacing:.08em}

/* ---------- buttons ---------- */
.btn{display:block;width:100%;text-align:center;border:none;border-radius:var(--radius);
  font-family:'Barlow Condensed',system-ui,sans-serif;font-weight:700;font-size:22px;letter-spacing:.12em;text-transform:uppercase;
  padding:16px;cursor:pointer;margin-top:12px;text-decoration:none;color:var(--chalk);background:var(--panel-2)}
.btn.in{background:var(--grass);color:var(--chalk);box-shadow:0 4px 18px rgba(63,124,80,.35)}
.btn.out{background:transparent;color:var(--chalk-dim);border:1.5px solid var(--line);font-size:16px;padding:13px}
.btn.chalkline{background:var(--chalk);color:var(--night)}
.btn.small{font-size:15px;padding:11px;letter-spacing:.1em}
.btn.ghost{background:transparent;border:1.5px solid var(--line);color:var(--chalk)}
.btn.danger{background:transparent;border:1.5px solid var(--red-deep);color:var(--red-text);font-size:15px;padding:11px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.flat{margin:0}

/* ---------- confirm / one-tap ---------- */
.confirm-card{text-align:center;padding:34px 18px}
.fixture{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.16em;color:var(--chalk-dim);text-transform:uppercase}
.confirm-card h1{font-family:'Barlow Condensed',system-ui,sans-serif;font-weight:700;font-size:40px;line-height:1;margin:10px 0 4px;letter-spacing:.02em}
.confirm-card p{color:var(--chalk-dim);font-size:14px}
.spots{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;color:var(--yellow);margin-top:14px;letter-spacing:.08em}
.confirm-card form{margin:0}

/* ---------- admin ---------- */
.kpis{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:14px}
.kpi{border:1.5px solid var(--line);border-radius:var(--radius);padding:12px 10px;background:var(--panel)}
.kpi b{font-family:'Barlow Condensed',system-ui,sans-serif;font-weight:700;font-size:26px;display:block;line-height:1}
.kpi span{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9px;letter-spacing:.12em;color:var(--chalk-dim);text-transform:uppercase}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.actions .btn{margin:0}
.timeline{list-style:none}
.timeline li{display:flex;gap:12px;padding:10px 2px;border-bottom:1px dashed rgba(238,242,236,.08);font-size:13px;align-items:flex-start}
.timeline li:last-child{border-bottom:none}
.tdot{width:8px;height:8px;border-radius:50%;background:var(--grass);margin-top:6px;flex:none}
.tdot.pending{background:transparent;border:1.5px solid var(--chalk-dim)}
.timeline b{font-weight:600}
.timeline .when{margin-left:auto;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;color:var(--chalk-dim);white-space:nowrap;padding-left:8px}
.rowline{display:flex;align-items:center;gap:10px;padding:10px 2px;border-bottom:1px dashed rgba(238,242,236,.08)}
.rowline:last-child{border-bottom:none}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--panel-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',system-ui,sans-serif;font-weight:700;font-size:13px;flex:none}
.meta{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9.5px;color:var(--chalk-dim);letter-spacing:.04em}
.chip{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9px;letter-spacing:.08em;padding:3px 8px;border-radius:99px;flex:none}
.rowline .chip:first-of-type{margin-left:auto}
.chip.annual{background:rgba(63,124,80,.18);color:#8FD3A2}
.chip.irr{background:rgba(242,197,29,.12);color:var(--yellow)}
.chip.committee{border:1px solid var(--line);color:var(--chalk-dim)}
.chip.off{border:1px solid var(--red-deep);color:var(--red-text)}
.searchbar{display:flex;gap:8px;margin-top:14px}
.searchbar input{flex:1;background:var(--panel);border:1.5px solid var(--line);border-radius:var(--radius);color:var(--chalk);padding:11px 13px;font-family:'Barlow',sans-serif;font-size:14px}
.searchbar input::placeholder{color:var(--chalk-dim)}
.searchbar .add{width:46px;border-radius:var(--radius);border:none;background:var(--chalk);color:var(--night);font-size:22px;font-weight:600;cursor:pointer;flex:none}

/* history bars */
.hrow{display:flex;align-items:center;gap:10px;padding:8px 2px}
.hname{width:104px;font-size:13px;font-weight:500;flex:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbar{flex:1;height:8px;border-radius:99px;background:var(--panel-2);overflow:hidden}
.hbar i{display:block;height:100%;background:var(--grass);border-radius:99px}
.hpct{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;color:var(--chalk-dim);width:56px;text-align:right;flex:none}

/* ---------- picker ---------- */
.pool{display:flex;flex-wrap:wrap;gap:8px}
.pooltag{font-family:'Barlow Condensed',system-ui,sans-serif;font-weight:600;font-size:14px;letter-spacing:.05em;border:1.5px solid var(--line);border-radius:99px;padding:6px 13px;cursor:pointer;user-select:none;background:transparent;color:var(--chalk)}
.pooltag.sel{background:var(--chalk);color:var(--night);border-color:var(--chalk)}
.pooltag em{font-family:'IBM Plex Mono',ui-monospace,monospace;font-style:normal;font-size:9px;color:var(--chalk-dim);margin-left:5px}
.pooltag.sel em{color:rgba(13,20,17,.6)}
.pooltag.placed{display:none}
.slotgrid .row .pl .dot.empty{background:transparent;border:1.5px dashed var(--line);color:var(--chalk-dim);font-size:10px;font-family:'IBM Plex Mono',ui-monospace,monospace;cursor:pointer;box-shadow:none}
.slotgrid .dot{cursor:pointer}
.slotgrid .dot.target{border:1.5px solid var(--chalk);box-shadow:0 0 0 3px rgba(238,242,236,.18)}
.pickhint{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;color:var(--chalk-dim);text-align:center;padding:10px 0 2px;letter-spacing:.05em}

/* ---------- notes, forms ---------- */
.note{border:1.5px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:12px 14px;margin-top:12px;font-size:13px;color:var(--chalk-dim)}
.note b{color:var(--chalk)}
.note.flash{border-color:var(--grass);color:var(--chalk)}
.note.warn{border-color:var(--yellow-deep);color:var(--chalk)}

textarea,input[type=text],input[type=email],input[type=tel],input[type=number],input[type=search],select{
  width:100%;background:var(--panel);border:1.5px solid var(--line);border-radius:var(--radius);
  color:var(--chalk);padding:11px 13px;font-family:'Barlow',sans-serif;font-size:14px;margin-top:6px}
textarea{resize:vertical;margin-top:12px}
textarea::placeholder,input::placeholder{color:var(--chalk-dim)}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--chalk-dim) 50%),linear-gradient(135deg,var(--chalk-dim) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}
select option{background:var(--panel);color:var(--chalk)}
label{display:block;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--chalk-dim);margin-top:12px}
label.inline{display:flex;align-items:center;gap:8px;text-transform:none;font-size:13px;font-family:'Barlow',sans-serif;letter-spacing:0;color:var(--chalk)}
label.inline input{width:auto;margin:0}
.fieldrow{display:flex;gap:10px}
.fieldrow>*{flex:1;min-width:0}
fieldset{border:none}

/* game-by-game log */
.logtable{width:100%;border-collapse:collapse;font-size:13px}
.logtable th{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--chalk-dim);text-align:left;padding:6px 8px 8px;font-weight:400}
.logtable td{padding:8px;border-top:1px dashed rgba(238,242,236,.08);white-space:nowrap}
.logtable td.n{font-family:'IBM Plex Mono',ui-monospace,monospace;color:var(--chalk-dim);font-size:11px}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

.foot{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9px;letter-spacing:.14em;color:var(--chalk-dim);text-align:center;padding:26px 0 0;text-transform:uppercase}
.foot a{color:var(--chalk-dim)}
.stack>.btn:first-child{margin-top:16px}

/* ---------- narrow phones ---------- */
@media (max-width:380px){
  .wordmark{font-size:29px}
  .bigcount{font-size:54px}
  .pegs{gap:5px}
  .pl{width:64px}
  .dot{width:30px;height:30px;font-size:13px}
  .btn{font-size:19px;letter-spacing:.08em}
  .hname{width:82px}
}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
}

/* ---------- expandable player rows ---------- */
.playerRow{border-bottom:1px dashed rgba(238,242,236,.08)}
.playerRow:last-of-type{border-bottom:none}
.playerRow summary{list-style:none;cursor:pointer}
.playerRow summary::-webkit-details-marker{display:none}
.playerRow summary::marker{content:''}
.playerRow summary .rowline{border-bottom:none}
.playerRow[open] summary .rowline{border-bottom:1px dashed rgba(238,242,236,.08)}
.playerRow form{padding:2px 2px 16px}
.playerRow[hidden]{display:none}