/* For The Love Of Darts — shared shell. Mobile-first: nearly everyone
   touching this is on a phone standing next to a dartboard. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Bebas+Neue&family=JetBrains+Mono:wght@600;700;800&display=swap');

:root {
  --bg: #f7efe2;
  --panel: rgba(255, 250, 241, 0.92);
  --panel-2: #f2e9db;
  --accent: #f43f93;
  --accent-text: #b91c5c;
  --accent-soft: rgba(244, 63, 147, 0.10);
  --green: #25c769;
  --green-text: #0f5f30;
  --red: #ef4444;
  --blue: #174ea6;
  --text: #172033;
  --muted: #5f6776;
  --border: rgba(23, 32, 51, 0.14);
  --radius: 20px;
  --display-font: 'Bebas Neue', sans-serif;
  --mono-font: 'JetBrains Mono', monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; }

/* Base link styling — there was none, so any plain <a> with no covering class
   (found: the "Find an event" / "Try again" / "Back to events" recovery links
   inside .empty states) fell through to the browser default blue-and-underline,
   the one spot of unbranded colour on an otherwise all-gold-and-dark page.
   Specific rules (.event-row, footer.site a) are more specific and still win. */
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-image:
    radial-gradient(900px 500px at 50% -120px, rgba(244, 63, 147, 0.13), transparent 70%),
    repeating-linear-gradient(45deg, rgba(94, 72, 45, 0.05) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, #fff7ed 0%, #f7efe2 100%);
  background-attachment: fixed;
  background-color: #f7efe2;
  color: var(--text);
  min-height: 100dvh;
  padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom);
  -webkit-text-size-adjust: 100%;
}

/* 96px clears the fixed bottom nav bar (~50px) plus notched-phone safe-area
   inset, on every page that has one. Pages without it (the scorer) just
   get a bit of unused breathing room at the bottom — harmless. */
main { max-width: 860px; margin: 0 auto; padding-bottom: 96px; }

/* ---- header ---------------------------------------------------------- */

header.site { position: relative; text-align: center; padding: 22px 0 6px; }

.board {
  width: 56px; height: 56px; margin: 0 auto 8px;
  border-radius: 50%;
  background:
    conic-gradient(#172033 0 18deg, #2a3550 0 36deg),
    radial-gradient(circle, var(--accent) 0 14%, #ef4444 14% 26%, #2a3550 26% 100%);
  background-blend-mode: overlay;
  border: 3px solid #475569;
  box-shadow: 0 0 0 4px var(--bg), 0 8px 20px rgba(23, 32, 51, 0.25);
  display: grid; place-items: center;
  font-size: 22px;
  text-decoration: none;
}

header.site h1 {
  margin: 4px 0 2px; font-size: 2em; font-weight: 400;
  font-family: var(--display-font); letter-spacing: 0.03em; line-height: 0.95;
}
header.site h1 .love { color: var(--accent-text); }
header.site p { margin: 0; color: var(--muted); font-size: 13px; font-weight: 600; }

/* ---- cards ----------------------------------------------------------- */

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-top: 16px;
  box-shadow: 0 14px 36px rgba(23, 32, 51, 0.09);
}

.card > h2 {
  margin: 0 0 12px;
  font-size: 1.02em;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.card > h2 .sub { color: var(--muted); font-weight: 400; font-size: 0.85em; }

.section-title {
  margin: 26px 0 0;
  font-size: 0.78em; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted);
}

/* ---- forms ----------------------------------------------------------- */

label.field { display: block; margin-bottom: 12px; font-size: 13px; color: var(--muted); }
label.field > span { display: block; margin-bottom: 5px; }

input, select, textarea {
  width: 100%;
  font: inherit;
  font-size: 16px; /* keeps iOS from zooming on focus */
  color: var(--text);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 12px;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 12px; }
@media (max-width: 480px) { .grid-2 { grid-template-columns: 1fr; } }

.row { display: flex; gap: 8px; align-items: center; }
.row > input { flex: 1; }

/* ---- buttons --------------------------------------------------------- */

button {
  font: inherit; font-weight: 600;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  padding: 11px 15px;
  cursor: pointer;
  transition: filter 0.15s, transform 0.05s, background 0.15s, border-color 0.15s;
  min-height: 44px; /* thumb-sized */
}
button:hover:not(:disabled) { background: rgba(23, 32, 51, 0.1); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: 0.45; cursor: not-allowed; }

button.primary, a.primary {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #172033; border: 1px solid transparent;
  border-radius: 999px;
  font: inherit; font-weight: 700; padding: 11px 15px; min-height: 44px;
  text-decoration: none;
}
button.primary:hover:not(:disabled), a.primary:hover { background: #e02f83; text-decoration: none; }
button.danger { background: transparent; color: var(--red); border-color: rgba(239, 68, 68, 0.4); }
button.ghost { background: transparent; }
button.small { padding: 7px 11px; min-height: 44px; font-size: 13px; }
button.block, a.block { width: 100%; }

/* A link styled to match — e.g. the "Listen" link that sits next to
 * "Score live" but is real navigation, not a click handler. */
a.small.ghost {
  font: inherit; font-weight: 600; border-radius: 12px; border: 1px solid var(--border);
  background: transparent; color: var(--text); cursor: pointer;
  display: inline-flex; align-items: center; padding: 7px 11px; min-height: 44px; font-size: 13px;
  text-decoration: none;
}
a.small.ghost:hover { background: rgba(23, 32, 51, 0.1); }

button.choice-btn {
  display: flex; flex-direction: column; gap: 3px;
  text-align: center; padding: 13px 16px;
}
button.choice-btn .choice-title {
  font-size: 18.5px; font-weight: 650;
  text-transform: uppercase; letter-spacing: 0.02em;
}
button.choice-btn .choice-desc { font-size: 12.5px; font-weight: 400; color: var(--muted); }
button.primary.choice-btn .choice-desc { color: rgba(26, 21, 5, 0.65); }

/* The host-choice modal reads as a centered question with centered answers —
   Cancel below stays right-aligned via .actions.end, untouched. */
.choice-modal h3 { text-align: center; }

/* ---- badges ---------------------------------------------------------- */

.badge {
  display: inline-block;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  background: var(--panel-2); color: var(--muted);
  border: 1px solid var(--border);
}
.badge.signup   { background: rgba(47, 111, 237, 0.12); color: var(--blue);   border-color: rgba(47, 111, 237, 0.35); }
.badge.group    { background: var(--accent-soft);       color: var(--accent-text); border-color: var(--accent-text); }
.badge.knockout { background: rgba(239, 68, 68, 0.12);  color: #b42318;       border-color: rgba(239, 68, 68, 0.35); }
.badge.done     { background: rgba(37, 199, 105, 0.14);  color: var(--green-text); border-color: rgba(20, 122, 61, 0.4); }
.badge.board    { background: var(--panel-2); color: var(--blue); border-color: rgba(47, 111, 237, 0.3); }

/* ---- search + filter bar --------------------------------------------- */

.linkbtn {
  background: none;
  border: none;
  border-radius: 6px;
  min-height: 0;
  /* Padding, not a border, is what makes this a comfortable tap target. */
  padding: 10px 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent-text);
  transition: opacity 0.15s;
}
.linkbtn:hover:not(:disabled) { opacity: 0.8; filter: none; }
.linkbtn:active:not(:disabled) { transform: none; }
.linkbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.searchbox { margin-top: 22px; }

.listbar {
  display: flex; align-items: center; gap: 10px;
  margin: 16px 0 2px;
}
.listbar > button { flex: none; white-space: nowrap; }

.chips { display: flex; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; padding-bottom: 2px; }
.chips::-webkit-scrollbar { display: none; }

.chip {
  flex: none;
  padding: 6px 12px; min-height: 44px; min-width: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 600;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--muted);
}
.chip:hover:not(:disabled) { color: var(--text); border-color: var(--muted); }
.chip.is-on {
  background: var(--accent-soft);
  border-color: var(--accent-text);
  color: var(--accent-text);
}
.chip:disabled { opacity: 0.35; }


/* ---- event page tabs -------------------------------------------------- */

/* Underlined, not another pill — chips and status badges already own that
   shape on this page, and a tab is a different kind of control (it swaps the
   whole view) from either of them. */
.tabbar {
  display: flex; gap: 4px;
  margin-top: 18px;
  border-bottom: 1px solid var(--border);
}
.tab {
  background: none; border: none; border-radius: 0;
  min-height: 0;
  padding: 11px 4px;
  margin-bottom: -1px;
  font-size: 14.5px; font-weight: 600;
  color: var(--muted);
  border-bottom: 2px solid transparent;
}
.tab + .tab { margin-left: 14px; }
.tab:hover:not(.is-on) { color: var(--text); filter: none; }
.tab:active { transform: none; }
.tab.is-on { color: var(--accent-text); border-bottom-color: var(--accent-text); }

/* Matches' own second-level nav — chips, deliberately, so it reads as a
   subordinate view-switcher rather than another page-level tab bar. */
.subtabbar { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 16px; }
.subtabpanel { margin-top: 4px; }

/* ---- event list ------------------------------------------------------ */

a.event-row, button.event-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 14px; margin-top: 10px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-decoration: none; color: inherit;
  transition: border-color 0.15s, transform 0.05s;
}
/* Only the <button> version needs its native chrome undone — an <a> never
   had any to begin with. */
button.event-row { font: inherit; text-align: left; cursor: pointer; min-height: 0; }
a.event-row:hover, button.event-row:hover { border-color: var(--accent); }
a.event-row:active, button.event-row:active { transform: translateY(1px); }
.event-row .meta { flex: 1; min-width: 0; }
.event-row .name { font-weight: 700; margin-bottom: 3px; }
.event-row .when { font-size: 12.5px; color: var(--muted); }
.event-row .chev { color: var(--muted); font-size: 20px; }

/* ---- players --------------------------------------------------------- */

ul.players { list-style: none; margin: 0; padding: 0; }
ul.players li {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin-top: 8px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
ul.players li .num {
  width: 24px; height: 24px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--bg); color: var(--muted);
  font-size: 12px; font-weight: 700;
}
ul.players li .pname { flex: 1; font-weight: 600; word-break: break-word; }
ul.players li.you { border-color: var(--accent); }
ul.players li.here { box-shadow: inset 3px 0 0 var(--green); }
ul.players li:not(.here) .pname { color: var(--muted); }

ul.players li.tappable { cursor: pointer; user-select: none; }
ul.players li.tappable:hover, ul.players li.tappable:focus-visible { border-color: var(--accent-text); outline: 2px solid var(--accent-soft); }
ul.players li.tappable:active { transform: translateY(1px); }

.listtools {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 10px; font-size: 12.5px;
}

/* ---- collapsed settings ---------------------------------------------- */

details.settings { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 4px; }
/* Our own display rules on labels/grids beat the UA's collapse behaviour, so
   hide the contents explicitly rather than trusting it. */
details.settings:not([open]) > *:not(summary) { display: none; }
details.settings > summary {
  cursor: pointer; list-style: none;
  padding: 10px 2px; margin: 0;
  font-size: 13px; font-weight: 600; color: var(--muted);
  display: flex; align-items: center; gap: 7px;
}
details.settings > summary::-webkit-details-marker { display: none; }
details.settings > summary::before { content: '⚙'; font-size: 14px; }
details.settings > summary::after { content: '▾'; margin-left: auto; transition: transform 0.15s; }
details.settings[open] > summary::after { transform: rotate(180deg); }
details.settings > summary:hover { color: var(--text); }
details.settings[open] > summary { margin-bottom: 10px; }

hr.rule { border: none; border-top: 1px solid var(--border); margin: 16px 0 12px; }
ul.players li.you .pname::after {
  content: 'you'; margin-left: 8px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent);
}

/* ---- standings ------------------------------------------------------- */

table.standings { width: 100%; border-collapse: collapse; font-size: 14px; }
table.standings th {
  text-align: left; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--muted); font-weight: 600;
  padding: 6px 6px; border-bottom: 1px solid var(--border);
}
table.standings td { padding: 9px 6px; border-bottom: 1px solid rgba(51, 65, 85, 0.5); }
table.standings td.num, table.standings th.num { text-align: center; width: 38px; }
table.standings tr.qualifies td { background: rgba(37, 199, 105, 0.1); }
table.standings td.num, table.standings th.num,
.stepper .val, .scorer-final-row .sc, .qr-code { font-family: var(--mono-font); }
table.standings tr.qualifies td:first-child { box-shadow: inset 3px 0 0 var(--green); }
table.standings .pos { color: var(--muted); width: 22px; }
table.standings .pname { font-weight: 600; }

/* ---- matches --------------------------------------------------------- */

.match {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; margin-top: 8px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 11px;
}
.match.done { opacity: 0.72; }
.match .sides { flex: 1; min-width: 0; }
.match .side { display: flex; justify-content: space-between; gap: 10px; padding: 1px 0; }
.match .side .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match .side .sc { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 700; }
.match .side.win .nm { font-weight: 700; color: var(--accent-text); }
.match .side.win .sc { color: var(--accent-text); }
.match .side.bye { color: var(--muted); font-style: italic; }

/* ---- board call cards ------------------------------------------------- */
/* Board number as a header, both players on one line — built to be scanned
   down a long list at a glance, unlike .match's stacked two-row layout. */

.callcard {
  padding: 10px 12px; margin-top: 8px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 11px;
}
.callcard.done { opacity: 0.72; }

.callcard-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; min-height: 20px; margin-bottom: 6px;
}
.callcard-board {
  font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--blue);
}
.callcard-actions { display: flex; align-items: center; gap: 6px; }

.callcard-line {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 15px; font-weight: 600;
}
.callcard-line .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 42%; }
.callcard-line .nm.win { color: var(--accent-text); font-weight: 800; }
.callcard-line .sc { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 700; }
.callcard-line .sc.win { color: var(--accent-text); }
.callcard-line .vs { color: var(--muted); font-weight: 500; font-size: 12.5px; }

.round-head {
  display: flex; align-items: center; gap: 10px;
  margin: 18px 0 2px;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--muted);
}
.round-head::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ---- bracket --------------------------------------------------------- */

.bracket { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 12px; }
.bracket .col { min-width: 190px; flex: none; display: flex; flex-direction: column; justify-content: space-around; gap: 10px; }
.bracket .col h4 {
  margin: 0 0 2px; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--muted); text-align: center;
}
.bracket .match { margin-top: 0; }

/* ---- modal ----------------------------------------------------------- */

.modal-back {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(23, 32, 51, 0.55);
  backdrop-filter: blur(3px);
  display: grid; place-items: center;
  padding: 16px;
}
.modal {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  width: 100%; max-width: 400px;
  box-shadow: 0 24px 60px rgba(23, 32, 51, 0.22);
}
.modal h3 { margin: 0 0 14px; font-size: 1.05em; }

.scorepick { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; }
.scorepick .nm { font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; }
.stepper { display: flex; align-items: center; gap: 8px; }
.stepper button { width: 40px; padding: 0; min-height: 40px; font-size: 18px; }
.stepper .val { min-width: 28px; text-align: center; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---- venue QR --------------------------------------------------------- */

.qr-modal { max-width: 360px; }

.qr-sheet {
  background: #fff;
  color: #0f172a;
  border-radius: 12px;
  padding: 20px 18px 16px;
  text-align: center;
}
.qr-title { font-size: 19px; font-weight: 800; line-height: 1.2; }
.qr-venue { font-size: 13px; color: #475569; margin-top: 2px; }
.qr-img { margin: 14px 0 10px; }
.qr-img svg { width: 100%; height: auto; max-width: 260px; }
.qr-hint { font-size: 13px; color: #475569; letter-spacing: 0.04em; text-transform: uppercase; }
.qr-code {
  font-size: 30px; font-weight: 800; letter-spacing: 0.14em;
  margin-top: 4px; font-variant-numeric: tabular-nums;
}
.qr-url { font-size: 12px; color: #64748b; margin-top: 2px; word-break: break-all; }

/* Printing shows the sheet alone, filling the page. */
@media print {
  body { background: #fff !important; padding: 0; }
  body > main, .no-print, .toast { display: none !important; }
  .modal-back {
    position: static; background: none; backdrop-filter: none;
    display: block; padding: 0;
  }
  .modal {
    max-width: none; width: auto;
    border: none; box-shadow: none; background: none; padding: 0;
  }
  .qr-sheet { border-radius: 0; padding: 0; }
  .qr-title { font-size: 34pt; }
  .qr-venue { font-size: 15pt; margin-top: 6px; }
  .qr-img svg { max-width: none; width: 60vw; }
  .qr-hint { font-size: 15pt; }
  .qr-code { font-size: 52pt; }
  .qr-url { font-size: 12pt; }
}

/* ---- player card ------------------------------------------------------ */

.statgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 420px) { .statgrid { grid-template-columns: repeat(2, 1fr); } }

.statgrid .stat {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 12px 8px;
  text-align: center;
}
.statgrid .stat .v {
  font-size: 21px; font-weight: 800; color: var(--accent-text);
  font-family: var(--mono-font);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.statgrid .stat .l {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); margin-top: 4px;
}

.trophies {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 13.5px; font-weight: 600;
}

/* ---- misc ------------------------------------------------------------ */

.empty { color: var(--muted); font-size: 14px; text-align: center; padding: 22px 10px; }
.muted { color: var(--muted); }
.err { color: #b42318; font-size: 13px; margin-top: 8px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.actions.end { justify-content: flex-end; }

.sharebox {
  display: flex; gap: 8px; align-items: center;
  background: var(--panel-2); border: 1px dashed var(--border);
  border-radius: 10px; padding: 10px 12px; margin-top: 10px;
}
.sharebox code { flex: 1; font-size: 12.5px; color: var(--accent); overflow-x: auto; white-space: nowrap; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--panel); border: 1px solid var(--accent);
  color: var(--text); padding: 11px 18px; border-radius: 999px;
  font-size: 14px; font-weight: 600; z-index: 100;
  box-shadow: 0 12px 32px rgba(23, 32, 51, 0.18);
  animation: toastin 0.2s ease-out;
}
@keyframes toastin { from { opacity: 0; transform: translate(-50%, 8px); } }

.champion {
  text-align: center; padding: 26px 16px;
  background: linear-gradient(180deg, var(--accent-soft), transparent);
  border: 1px solid rgba(244, 63, 147, 0.4);
  border-radius: var(--radius);
}
.champion .trophy { font-size: 42px; }
.champion .who {
  font-size: 1.7em; font-family: var(--display-font); font-weight: 400;
  letter-spacing: 0.03em; color: var(--accent); margin-top: 6px;
}

footer.site { text-align: center; padding: 12px 0 10px; color: var(--muted); font-size: 12.5px; }
/* The only underlined text on the page otherwise, which made it shout.
   inline-flex + min-height gives the link a real touch target without
   visually growing the text — the footer's own padding shrinks to match
   so this doesn't just add dead space above it. */
footer.site a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 4px 8px;
  color: var(--muted); text-decoration: none;
}

/* --------------------------------------------------------------- scorer (dark) */

/* The scorer is the screen someone stares at mid-match, often at a dim bar —
   it stays dark (matching the reference scorer everyone already knows)
   while the rest of the site is the warm light theme. Scoped entirely to
   this one class so nothing else on the site is affected. --gold is a
   second accent, only used here, for the low-run quick-score column. */
body.scorer-dark {
  --bg: #0a0f1c;
  --panel: #16213a;
  --panel-2: #1c2a45;
  --accent: #f43f93;
  --accent-text: #ff70b5;
  --accent-soft: rgba(244, 63, 147, 0.16);
  --green: #22c55e;
  --green-text: #4ade80;
  --red: #ef4444;
  --blue: #38bdf8;
  --text: #f8fafc;
  --muted: #8b96b3;
  --border: #2a3655;
  --gold: #facc15;
  --gold-soft: rgba(250, 204, 21, 0.14);
  background-image:
    radial-gradient(900px 500px at 50% -120px, rgba(244, 63, 147, 0.16), transparent 70%),
    linear-gradient(180deg, #0c1424 0%, #080c16 100%);
  background-color: #080c16;
}

.scorer-main { padding-top: 14px; }

/* A dedicated top bar replaces the site's usual logo header on this page —
   this is the screen a scorer stares at mid-match, so it matches the
   layout of the reference scorer everyone already knows: back button,
   centered leg/game info, board number in the corner. */
.scorer-topbar {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 8px; padding: 4px 2px 16px;
}
.scorer-back {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--panel-2); border: 1px solid var(--border);
  color: var(--text); font-size: 1.1em; flex: none;
}
.scorer-back:hover { border-color: var(--accent); color: var(--accent); }
.scorer-topbar-center { text-align: center; min-width: 0; }
.scorer-topbar-title {
  font-size: 1.7em; font-family: var(--display-font); font-weight: 400;
  letter-spacing: 0.03em;
}
.scorer-topbar-sub {
  font-size: 11px; color: var(--muted); margin-top: 2px;
  letter-spacing: 0.03em; text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.scorer-topbar-corner {
  min-width: 38px; text-align: right; font-size: 11px; font-weight: 700;
  color: var(--blue); text-transform: uppercase; letter-spacing: 0.03em;
  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
}
.scorer-topbar-board { flex: none; }
.scorer-listen-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%; background: var(--panel-2); border: 1px solid var(--border);
  font-size: 1.05em; flex: none; line-height: 1;
}
.scorer-listen-toggle[aria-pressed="true"] {
  border-color: var(--accent); background: var(--accent-2, var(--panel-2));
}

.scorer-board { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.scorer-side {
  min-width: 0; text-align: center; padding: 14px 8px 10px;
  border-radius: 12px; border: 2px solid transparent; background: var(--panel-2);
  position: relative;
}
.scorer-side.is-active {
  border-color: var(--accent); background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent), 0 8px 24px rgba(244, 63, 147, 0.18);
}
.scorer-nowthrowing {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #fff; font-size: 10px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px;
  white-space: nowrap;
}
.scorer-name {
  font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; text-transform: uppercase; letter-spacing: 0.02em;
}
.scorer-side.is-active .scorer-name { color: var(--accent); }
/* Only present for a doubles side — the roster under the team name, with
   whoever's actually up this turn picked out from their teammate. */
.scorer-roster { font-size: 10.5px; margin-top: 1px; }
.scorer-roster .is-up { color: var(--accent); font-weight: 700; }
.scorer-remaining {
  font-size: 2.6em; font-weight: 800; font-variant-numeric: tabular-nums;
  font-family: var(--mono-font); color: var(--text);
  line-height: 1.15; margin: 4px 0 6px;
}
/* The score itself stays white for both sides, matching the reference —
   only the name label picks up the accent color when active (below). The
   side not currently up dims down — matches the reference's inactive
   greyed-out player, so the active side reads at a glance. */
.scorer-side:not(.is-active) { opacity: 0.55; }
.scorer-substats {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.scorer-substats .lbl { color: var(--blue); }
.scorer-substats .val { color: var(--gold); font-family: var(--mono-font); }

.scorer-hint { text-align: center; color: var(--blue); font-size: 12.5px; margin-top: 10px; }

.scorer-controls {
  display: grid; grid-template-columns: auto 1fr auto; align-items: stretch;
  gap: 8px; margin-top: 14px;
}
.scorer-controls .scorer-display {
  text-align: center; font-size: 1.6em; font-weight: 800; cursor: pointer;
  font-family: var(--display-font); letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums; background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 10px;
  display: flex; align-items: center; justify-content: center; padding: 6px 8px;
  min-height: 44px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Undo (blue outline) / Miss (pink outline) flank the display, matching the
   reference scorer's pill-shaped control row. */
.scorer-controls button[data-undo] {
  background: transparent; border-color: var(--blue); color: var(--blue);
  border-radius: 999px; min-width: 58px;
}
.scorer-controls button[data-quick="0"] {
  background: transparent; border-color: var(--accent); color: var(--accent);
  border-radius: 999px; min-width: 58px;
}

.scorer-keypad {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin-top: 10px;
}
.scorer-keypad button, .scorer-key-spacer { min-height: 46px; }
.scorer-keypad button {
  font-size: 1.05em; font-weight: 700; border-radius: 10px;
}
.scorer-keypad button[data-digit] {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
}
/* "x" / "+" — brdc's calculator operators, same tile as a digit but a
   brighter accent color so they read as functions, not numbers. */
.scorer-key-op {
  background: var(--panel-2); color: var(--accent);
  border: 1px solid var(--accent); font-family: var(--mono-font);
}
/* Two-tone quick-score columns, same as the reference: gold for the
   low-run column (26–100), pink for the high-run column (81–180) — an
   at-a-glance split, not just decoration. */
.scorer-key-quick {
  background: transparent; font-weight: 800; font-family: var(--mono-font);
  border-width: 2px;
}
.scorer-key-quick.lo { border-color: var(--gold); color: var(--gold); }
.scorer-key-quick.hi { border-color: var(--accent); color: var(--accent); }

/* button.scorer-enter (element+class) to out-specificity button.primary's
   own background rule — .scorer-enter alone loses that fight and silently
   stays pink instead of the green this button is supposed to be. */
button.scorer-enter {
  display: block; width: 100%; margin-top: 10px; font-size: 1.15em; padding: 14px;
  background: var(--green); color: #052e16; border-color: transparent;
  letter-spacing: 0.04em; text-transform: uppercase;
}
button.scorer-enter:hover:not(:disabled) { background: #16a34a; }

.scorer-checkout-prompt { text-align: center; margin-top: 14px; }
.scorer-checkout-prompt p { margin: 0 0 10px; font-weight: 600; }
.scorer-dart-count { display: flex; gap: 10px; justify-content: center; }
.scorer-dart-count button { min-width: 64px; min-height: 54px; font-size: 1.3em; }

.scorer-log { list-style: none; padding: 0; margin: 0; font-size: 13px; }
.scorer-log li { padding: 6px 0; border-bottom: 1px solid var(--border); color: var(--muted); }
.scorer-log li.bust { color: var(--red); }

.scorer-final-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 0; font-size: 15px;
}
.scorer-final-row .nm { font-weight: 600; }
.scorer-final-row .sc { font-variant-numeric: tabular-nums; font-weight: 800; }
.scorer-final-row .avg { color: var(--muted); font-size: 12.5px; }
.scorer-final-row.win .nm, .scorer-final-row.win .sc { color: var(--accent); }

.scorer-cork-winner { font-size: 1.15em; margin: 4px 0 2px; }

/* ------------------------------------------------------------- scorer (cricket) */

.cricket-targets { margin-top: 4px; }
.cricket-row {
  display: grid; grid-template-columns: 30px 44px 1fr 44px 30px;
  align-items: center; gap: 6px; margin-bottom: 6px;
}
.cricket-mark {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono-font); font-weight: 700; font-size: 13px;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--muted);
}
.cricket-mark-a.closed { background: var(--gold-soft); border-color: var(--gold); color: var(--gold); }
.cricket-mark-b.closed { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.cricket-mark.dead { opacity: 0.4; }

.cricket-tap {
  min-height: 44px; padding: 0; border-radius: 10px;
  background: var(--panel-2); border: 1px solid var(--border);
  color: var(--text); font-weight: 800; font-size: 0.95em;
}
.cricket-tap:disabled { opacity: 0.35; }
/* D and T flank the number the same way on every row, color-coded the same
   way every row too — pink for double, blue for triple — matching the
   reference. The center number stays neutral (see .cricket-tap-num). */
.cricket-tap-d { border-color: var(--accent); color: var(--accent); }
.cricket-tap-t { border-color: var(--blue); color: var(--blue); }
.cricket-tap-num {
  font-family: var(--display-font); font-size: 1.5em; font-weight: 400; letter-spacing: 0.02em;
  border-width: 2px; border-color: var(--muted);
}
.cricket-row.is-closed-both .cricket-tap-num { border-color: var(--muted); opacity: 0.55; }
.cricket-tap-spacer { min-height: 44px; }

.cricket-dartrow {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  margin-top: 14px;
}
.cricket-dart {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--panel-2); border: 1px solid var(--border);
}
.cricket-dart.filled { background: var(--accent-soft); border-color: var(--accent); }
.cricket-marks-total {
  margin-left: 10px; font-family: var(--mono-font); font-weight: 800; font-size: 1.2em;
  color: var(--gold);
}
.cricket-marks-total span {
  display: block; font-family: inherit; font-size: 9px; font-weight: 700;
  color: var(--muted); letter-spacing: 0.08em; text-align: center;
}

.cricket-actions {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px;
}
.cricket-actions button { min-height: 46px; font-size: 0.9em; }
.cricket-actions [data-cricket-undo] { background: transparent; border-color: var(--border); color: var(--muted); }
.cricket-actions [data-cricket-miss] { background: transparent; border-color: var(--red); color: var(--red); }
.cricket-actions [data-cricket-clear] { background: transparent; border-color: var(--gold); color: var(--gold); }
.cricket-actions [data-cricket-next] { background: var(--green); color: #052e16; border-color: transparent; }
.scorer-cork .actions { flex-direction: column; margin-top: 12px; }
footer.site a:hover { color: var(--accent); }

/* --------------------------------------------------------------- chat */

.chat-wrap { display: flex; flex-direction: column; }

.chat-list {
  display: flex; flex-direction: column; gap: 10px;
  max-height: 55vh; overflow-y: auto; padding: 4px 2px;
}

.chat-msg {
  align-self: flex-start; max-width: 82%;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 12px; padding: 8px 12px;
}
.chat-msg.mine {
  align-self: flex-end; background: var(--accent-soft);
  border-color: rgba(244, 63, 147, 0.35);
}
.chat-msg-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.chat-msg-name { font-size: 12px; font-weight: 700; color: var(--accent-text); }
.chat-msg.mine .chat-msg-name { color: var(--text); }
.chat-msg-time { font-size: 10.5px; color: var(--muted); flex: 1; }
.chat-msg-del {
  border: none; background: none; padding: 0; color: var(--muted);
  font-size: 16px; min-width: 44px; min-height: 44px; cursor: pointer;
}
.chat-msg-del:hover { color: var(--red); }
.chat-msg-text { font-size: 14px; word-break: break-word; white-space: pre-wrap; }

.chat-form { display: flex; gap: 8px; margin-top: 12px; }
.chat-form input { flex: 1; width: auto; }
.chat-form .form-label { flex: 1; display: grid; gap: 4px; text-align: left; font-size: 13px; font-weight: 700; }
.chat-form .form-label input { width: 100%; }
.email-link-form { justify-content: center; align-items: end; max-width: 460px; margin-left: auto; margin-right: auto; text-align: left; }

/* ---------------------------------------------------------- bottom nav bar */

.bottombar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; justify-content: center; gap: 4px;
  background: var(--panel); border-top: 1px solid var(--border);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
}

/* Sits just above the bottom nav, on top of whatever page is showing —
   an incoming challenge has to be visible no matter where in the app it
   arrives, same reasoning as the nav itself being on every page. */
#challengeBanner:empty { display: none; }
.challenge-banner {
  position: fixed; left: 10px; right: 10px;
  bottom: calc(70px + env(safe-area-inset-bottom));
  z-index: 61;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: 0 10px 30px rgba(23, 32, 51, 0.16);
}
.challenge-banner-text { font-size: 13px; flex: 1 1 auto; min-width: 160px; }
.challenge-banner-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.bottombar-tab {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  flex: 1; max-width: 140px;
  padding: 4px 8px; border-radius: 10px;
  color: var(--muted); font-size: 10.5px; font-weight: 700;
  text-decoration: none;
}
.bottombar-tab:hover { text-decoration: none; color: var(--text); }
/* The Host tab is a <button> (it opens a modal, doesn't navigate), unlike
   every other tab here — undo the global button chrome so it matches. */
button.bottombar-tab { border: none; background: none; cursor: pointer; min-height: 0; font: inherit; }
.bottombar-tab.is-on { color: var(--accent-text); }
.bottombar-icon { font-size: 20px; line-height: 1; }

.bottombar-fab {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  width: 48px; height: 48px; margin-top: -16px;
  border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: 26px; font-weight: 800; line-height: 1;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(23, 32, 51, 0.3), 0 0 0 4px var(--panel);
}
.bottombar-fab:hover, .bottombar-fab.is-on { filter: brightness(1.1); text-decoration: none; }

/* ------------------------------------------------------------- wizard (league) */

.wizard-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 14px; }
.wizard-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); }
.wizard-dot.is-done { background: var(--accent); opacity: 0.5; }
.wizard-dot.is-on { background: var(--accent); }

.review-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 0; border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}
.review-row:last-child { border-bottom: none; }
.review-label { color: var(--muted); flex: 0 0 40%; }
.review-value { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Component state must win over the generic .field display declaration. */
[hidden] { display: none !important; }

.hub-page .searchbox, .hub-page .listbar { display: none; }
.hub-section { margin: 20px 0; }
.hub-head { display:flex; justify-content:space-between; align-items:end; gap:12px; margin:0 0 8px; }
.hub-head h2 { margin:0; font-size:20px; }
.eyebrow { margin:0 0 2px; color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.hub-post { padding:13px 0; border-bottom:1px solid var(--line); }
.hub-post:last-child { border-bottom:0; }
.hub-post div { display:flex; gap:8px; align-items:baseline; }
.hub-post span { color:var(--muted); font-size:11px; }
.hub-post p { margin:6px 0; white-space:pre-wrap; }
.hub-list { margin-top:12px; }