/* Direction: pitch-side scoreboard — white paper, near-black ink, deep pitch green, a condensed display face */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #ffffff;
  --surface: #f3f6f4;
  --surface-2: #f2f3f3;
  --border: #b9c6be;
  --border-strong: #b3b7b5;
  --ink: #0b1410;
  --muted: #3d4a43;
  --accent: #0b6b38;
  --accent-hover: #095b30;
  --accent-ink: #ffffff;
  --accent-text: #0b6b38;
  --accent-strong: #0b6b38;
  --accent-soft: #ddeae3;
  --accent-border: #91bca5;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #e3f0e8;
  --success-strong: #137638;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f6eae1;
  --warning-strong: #a64c08;
  --danger: #b3261e;
  --danger-ink: #ffffff;
  --danger-soft: #f6e5e4;
  --danger-strong: #b3261e;
  --chart-1: #0b6b38;
  --chart-2: #128193;
  --chart-3: #374493;
  --chart-4: #984d8d;
  --chart-5: #852917;
  --chart-6: #866d05;

  --x-live: #c4161c;
  --x-on-live: #ffffff;
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --display-weight: 700;
  --radius-card: 12px;
  --radius-btn: 10px;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Inter", system-ui, sans-serif;
  --display-tracking: -0.02em;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #020f08;
  --surface: #1b2721;
  --surface-2: #0f1b14;
  --border: #25312b;
  --border-strong: #4e5752;
  --ink: #ffffff;
  --muted: #9a9f9c;
  --accent: #0b6b38;
  --accent-hover: #308156;
  --accent-ink: #ffffff;
  --accent-text: #5e9d7b;
  --accent-strong: #509570;
  --accent-soft: #042313;
  --accent-border: #06381e;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #062814;
  --success-strong: #499c68;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #291e08;
  --warning-strong: #c57a40;
  --danger: #b3261e;
  --danger-ink: #ffffff;
  --danger-soft: #29140d;
  --danger-strong: #c9645e;
  --chart-1: #277d49;
  --chart-2: #1e94a9;
  --chart-3: #8170c7;
  --chart-4: #b95c8a;
  --chart-5: #bc662d;
  --chart-6: #989b2b;
}

.band { background: var(--surface); border-bottom: 3px solid var(--accent); }
footer.band { border-bottom: 0; border-top: 3px solid var(--accent); }
.grp-head { background: var(--accent); color: var(--accent-ink); letter-spacing: .03em; }
.std th, .std td { text-align: center; padding: .6rem .35rem; font-variant-numeric: tabular-nums; border-top: 1px solid var(--border); }
.std th { font-size: .8rem; font-weight: 800; color: var(--muted); background: var(--surface); border-top: 0; }
.std th:first-child, .std td:first-child { padding-left: .75rem; }
.std td.team { font-weight: 700; white-space: nowrap; }
.std .pos { display: inline-block; width: 1.4rem; color: var(--muted); font-weight: 700; }
.std .pts { font-weight: 800; font-size: 1.1em; }
.std tr.qual td { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.badge-live { background: var(--x-live); color: var(--x-on-live); display: inline-flex; align-items: center; gap: .25rem; font-weight: 800; animation: livepulse 1.6s ease-in-out infinite; }
.live-text { color: var(--x-live); }
.match-live { border-color: var(--x-live); border-width: 2px; }
.score { font-family: var(--font-display); font-size: 2.1rem; font-weight: 700; line-height: 1; padding: 0 .5rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pulse-dot { width: .7rem; height: .7rem; border-radius: 999px; background: var(--x-live); animation: livepulse 1.6s ease-in-out infinite; }
@keyframes livepulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
html.reduced-motion .pulse-dot, html.reduced-motion .badge-live { animation: none; }
.adm-row { display: flex; width: 100%; align-items: center; gap: .75rem; padding: .85rem 1rem; border: 2px solid var(--border); border-radius: var(--radius-card); background: var(--canvas); cursor: pointer; min-height: 4rem; }
.adm-row:hover { border-color: var(--accent); background: var(--surface); }
.adm-row:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.adm-row:active { transform: scale(.99); }
.adm-row .num { font-family: var(--font-display); font-size: 1.4rem; min-width: 2.8rem; color: var(--accent-text); }
.score-in { font-size: 2rem; font-weight: 800; text-align: center; height: 4rem; }
.tie-row { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .6rem .75rem; border-top: 1px solid var(--border); font-weight: 600; }
.tie-row.win { font-weight: 800; background: color-mix(in srgb, var(--accent) 12%, transparent); }
.tie-row.lose { color: var(--muted); }
.tbd { color: var(--muted); font-style: italic; }
.tie-row .sc { font-family: var(--font-display); font-size: 1.5rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.champion { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; border: 2px solid var(--accent); border-radius: var(--radius-card); background: var(--accent-soft); font-size: 1.15rem; }
.cat-tabs { display: flex; gap: .5rem; max-width: 28rem; }
.cat-tab { flex: 1; text-align: center; padding: .7rem 1rem; border: 3px solid var(--accent); border-radius: var(--radius-btn); font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; line-height: 1.1; color: var(--accent-text); background: var(--canvas); }
.cat-tab:hover { background: var(--accent-soft); }
.cat-tab.on { background: var(--accent); color: var(--accent-ink); }
.cat-tab:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.cat-switch { display: flex; align-items: center; gap: .5rem; }
.fx-row { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border: 2px solid var(--border); border-radius: var(--radius-card); background: var(--canvas); }
.fx-row .num { font-family: var(--font-display); font-size: 1.4rem; min-width: 2.8rem; color: var(--accent-text); }
dialog.modal { max-height: calc(100dvh - 1.5rem); overflow-y: auto; }
dialog.modal { width: min(32rem, calc(100vw - 1.5rem)); padding: 1.25rem; }