/* Sideline Stats. Court-side first: big targets, high contrast, numbers that line up. */
@font-face { font-family: Oswald; font-weight: 500; font-style: normal; font-display: swap; src: url(/fonts/oswald-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: Oswald; font-weight: 600; font-style: normal; font-display: swap; src: url(/fonts/oswald-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: Oswald; font-weight: 700; font-style: normal; font-display: swap; src: url(/fonts/oswald-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: Inter; font-weight: 400; font-style: normal; font-display: swap; src: url(/fonts/inter-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: Inter; font-weight: 500; font-style: normal; font-display: swap; src: url(/fonts/inter-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: Inter; font-weight: 600; font-style: normal; font-display: swap; src: url(/fonts/inter-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: Inter; font-weight: 700; font-style: normal; font-display: swap; src: url(/fonts/inter-latin-700-normal.woff2) format('woff2'); }
:root {
  /* Same ink, type and neon as goatreelz.com. One look, always dark: it is read courtside, at night, in a gym. */
  color-scheme: dark;
  --paper: #0b0f14;
  --panel: #1c2530;
  --panel-2: #24303e;
  --ink: #f5f7fa;
  --muted: #93a2b3;
  --line: #2c3948;
  --board: #1c2530;
  --board-2: #24303e;
  --led: #f5f7fa;
  --led-dim: #93a2b3;
  --green: #39ff88;
  --live: #ff6b35;
  --gold: #ffc93c;
  --home: #39ff88;
  --home-soft: #12301f;
  --away: #7dd3fc;
  --away-soft: #10303f;
  --good: #39ff88;
  --good-soft: #12301f;
  --bad: #ff8a6b;
  --bad-soft: #3a1d14;
  --warn: #ffc93c;
  --warn-soft: #3a2f0e;
  --focus: #7dd3fc;
  --radius: 16px;
  --num: Oswald, "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --body: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.5 var(--body); }
h1, h2, h3 { font-family: var(--num); line-height: 1.15; margin: 0 0 .5rem; letter-spacing: .01em; }
h1 { font-size: 2rem; } h2 { font-size: 1.35rem; } h3 { font-size: 1.1rem; }
p { margin: 0 0 .75rem; max-width: 66ch; }
a { color: inherit; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.wrap { max-width: 980px; margin: 0 auto; padding: 0 16px 64px; }
.narrow { max-width: 560px; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.num { font-family: var(--num); font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1 1 auto; }

/* Top bar */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; max-width: 980px; margin: 0 auto; }
.brand { font-family: var(--num); font-weight: 700; font-size: 1.15rem; text-decoration: none; letter-spacing: .02em; }
.topbar nav { display: flex; gap: 16px; font-size: .95rem; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 16px; border-radius: 8px; border: 1.5px solid var(--ink); background: var(--panel); cursor: pointer; font-weight: 600; text-decoration: none; }
.btn:hover { background: var(--line); }
.btn.primary { background: var(--ink); color: var(--paper); }
.btn.primary:hover { opacity: .88; }
.btn.danger { border-color: var(--bad); color: var(--bad); }
.btn.quiet { border-color: var(--line); font-weight: 500; }
.btn.small { min-height: 36px; padding: 4px 12px; font-size: .9rem; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* Forms */
label { display: block; font-weight: 600; margin-bottom: 4px; }
.field { margin-bottom: 16px; }
input[type=text], input[type=date], input[type=number], input[type=password], select, textarea {
  width: 100%; min-height: 44px; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--panel);
}
textarea { min-height: 150px; font-family: var(--num); font-size: 1.05rem; line-height: 1.4; }
.hint { color: var(--muted); font-size: .875rem; margin-top: 4px; }
.cols { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .cols.two { grid-template-columns: 1fr 1fr; } }
fieldset.team { border: 0; border-left: 6px solid var(--home); padding: 0 0 0 12px; margin: 0; }
fieldset.team.away { border-left-color: var(--away); }
fieldset.team legend { font-family: var(--num); font-weight: 700; font-size: 1.1rem; padding: 0; margin-bottom: 8px; }

/* The scoreboard: the one loud thing */
.board { background: var(--board); color: #f3efe6; border-radius: 14px; padding: 14px 16px 12px; margin: 8px 0 12px; }
.board-main { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.board .side { min-width: 0; }
.board .side.away { text-align: right; }
.board .tname { font-family: var(--num); font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 3px solid var(--home); padding-bottom: 2px; display: inline-block; max-width: 100%; }
.board .side.away .tname { border-bottom-color: var(--away); }
.board .digits { font-family: var(--num); font-variant-numeric: tabular-nums; font-size: clamp(3rem, 14vw, 5rem); line-height: 1; color: var(--led); text-shadow: 0 0 14px rgba(255, 180, 58, .35); font-weight: 700; }
.board .mid { text-align: center; padding: 0 4px; }
.board .period { font-family: var(--num); font-size: 1.2rem; color: var(--led); }
.board .status { font-size: .85rem; color: #cfc8b8; }
.board .status.live::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #ff5a4a; margin-right: 6px; vertical-align: baseline; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .board .status.live::before { animation: none; } }
.board .sub { margin-top: 8px; font-size: .85rem; color: #cfc8b8; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }

.linescore { width: 100%; border-collapse: collapse; margin: 0 0 12px; font-family: var(--num); font-variant-numeric: tabular-nums; }
.linescore th, .linescore td { text-align: center; padding: 6px 8px; border-bottom: 1px solid var(--line); min-width: 36px; }
.linescore th:first-child, .linescore td:first-child { text-align: left; width: 40%; font-family: var(--body); }
.linescore td.t { font-weight: 700; }
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Notices */
.notice { border-radius: 8px; padding: 10px 14px; margin: 0 0 10px; border-left: 6px solid var(--muted); background: var(--panel); }
.notice.good { border-color: var(--good); background: var(--good-soft); }
.notice.warn { border-color: var(--warn); background: var(--warn-soft); }
.notice.bad { border-color: var(--bad); background: var(--bad-soft); }
.notice b { font-weight: 700; }
.notice button { margin-left: 8px; }

/* Box score tables */
.teamhead { display: flex; align-items: baseline; gap: 10px; border-left: 6px solid var(--home); padding-left: 10px; margin: 20px 0 6px; }
.teamhead.away { border-left-color: var(--away); }
.teamhead h2 { margin: 0; }
.box { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; margin-bottom: 14px; background: var(--panel); border-radius: 8px; overflow: hidden; }
.box caption { text-align: left; font-weight: 700; padding: 4px 0 6px; font-family: var(--num); }
.box th, .box td { padding: 7px 8px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.box th { font-weight: 600; color: var(--muted); font-size: .85rem; }
.box th:nth-child(-n+2), .box td:nth-child(-n+2) { text-align: left; }
.box td:first-child { width: 2.6em; font-family: var(--num); font-weight: 700; }
.box td:nth-child(2) { white-space: normal; min-width: 7.5em; }
.box tfoot td { font-weight: 700; border-top: 2px solid var(--ink); border-bottom: 0; }
.flag { display: inline-block; font-size: .75rem; padding: 0 6px; border-radius: 99px; margin-left: 6px; background: var(--warn-soft); color: var(--warn); font-weight: 700; }
.flag.bad { background: var(--bad-soft); color: var(--bad); }

/* Tabs */
.tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--line); margin: 16px 0 8px; overflow-x: auto; }
.tabs button { background: none; border: 0; padding: 10px 14px; font-weight: 600; cursor: pointer; color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -2px; min-height: 44px; white-space: nowrap; }
.tabs button[aria-selected=true] { color: var(--ink); border-bottom-color: var(--ink); }

/* Play log */
.plays { list-style: none; margin: 0; padding: 0; }
.plays li { display: grid; grid-template-columns: 4.2em 1fr auto; gap: 8px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line); }
.plays .when { font-family: var(--num); color: var(--muted); }
.plays .tm { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; background: var(--home); }
.plays .tm.away { background: var(--away); }
.plays li.void { opacity: .6; }
.plays li.void .what { text-decoration: line-through; }
.plays .why { grid-column: 2 / 4; font-size: .85rem; color: var(--bad); }
.plays .pts { font-family: var(--num); font-weight: 700; color: var(--good); }

.audit { list-style: none; padding: 0; margin: 0; }
.audit li { padding: 9px 0; border-bottom: 1px solid var(--line); }
.audit .at { color: var(--muted); font-size: .85rem; }

/* Dialog */
dialog { border: 0; border-radius: 14px; padding: 20px; width: min(92vw, 460px); background: var(--panel); color: var(--ink); box-shadow: 0 10px 40px rgba(0,0,0,.35); }
dialog::backdrop { background: rgba(0, 0, 0, .55); }

/* Cards used on home + rules */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.gamelist { list-style: none; margin: 0; padding: 0; }
.gamelist li a { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 4px; border-bottom: 1px solid var(--line); text-decoration: none; }
.gamelist li a:hover { background: var(--line); }
.gamelist .score { font-family: var(--num); font-size: 1.2rem; font-variant-numeric: tabular-nums; text-align: right; }
.badge { display: inline-block; font-size: .78rem; font-weight: 700; padding: 1px 8px; border-radius: 99px; border: 1.5px solid currentColor; }
.badge.live { color: var(--bad); } .badge.final { color: var(--muted); }

table.rules { width: 100%; border-collapse: collapse; }
table.rules th, table.rules td { text-align: left; vertical-align: top; padding: 10px 8px; border-bottom: 1px solid var(--line); }
table.rules td:first-child { font-weight: 700; white-space: nowrap; }
table.rules ul { margin: 0; padding-left: 1.1em; }

/* Season pages and leaderboards */
.teamlink { color: inherit; text-decoration: none; border-bottom: 2px solid var(--line); }
.teamlink:hover { border-bottom-color: currentColor; }
.leadcard { margin: 14px 0; }
.leadcard h2 { margin: 0 0 2px; font-size: 1.1rem; }
.leadlist { list-style: none; margin: 8px 0 0; padding: 0; }
.leadlist li { display: grid; grid-template-columns: 2.6em 1fr auto; gap: 8px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--line); }
.leadlist li:last-child { border-bottom: 0; }
.leadlist .rank { font-family: var(--num); font-weight: 700; color: var(--muted); }
.leadlist .val { font-weight: 700; font-size: 1.1rem; }
.decisions ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; gap: 6px 18px; flex-wrap: wrap; }
.decisions h3 { margin: 0; font-size: 1rem; }
.panel.decisions { margin: 0 0 12px; }
@media (min-width: 720px) { #app .leadcard { display: inline-block; width: calc(50% - 8px); vertical-align: top; box-sizing: border-box; } #app .leadcard:nth-of-type(odd) { margin-right: 12px; } }

/* two books */
.check { display: flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; }
.check input { width: 20px; height: 20px; }
#book-field { border: 0; padding: 0; margin: 12px 0; }
#book-field legend { font-weight: 700; margin-bottom: 4px; }

/* ---- GoatReelz family look (overrides) ---- */
h1, h2, h3, .brand { text-transform: uppercase; letter-spacing: -.005em; }
h1 { font-weight: 700; } h2 { font-weight: 600; }
.topbar { border-bottom: 1px solid var(--line); max-width: none; padding: 12px max(16px, calc((100vw - 980px) / 2)); }
.brand { color: var(--ink); } .brand::first-letter { color: var(--ink); }
.topbar nav a { color: var(--muted); text-decoration: none; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.topbar nav a:hover { color: var(--green); }
.btn { border-radius: 14px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); min-height: 48px; }
.btn:hover { background: var(--panel-2); }
.btn.primary { background: var(--green); border-color: var(--green); color: #0b0f14; font-weight: 700; }
.btn.primary:hover { background: var(--green); opacity: .9; }
.btn.danger { background: transparent; }
.btn.quiet { background: transparent; border-color: var(--line); }
input[type=text], input[type=date], input[type=number], input[type=password], select, textarea { border: 1px solid var(--line); border-radius: 14px; background: var(--paper); color: var(--ink); }
.panel, .leadcard { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; }
.board { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; color: var(--ink); }
.board .digits { color: var(--ink); text-shadow: none; }
.board .period { color: var(--green); }
.board .status, .board .sub { color: var(--muted); }
.board .status.live { color: var(--live); } .board .status.live::before { background: var(--live); }
.notice { border-radius: 14px; background: var(--panel); border: 1px solid var(--line); border-left-width: 6px; }
.badge.live { color: var(--live); } .badge.final { color: var(--gold); }
.tabs [aria-selected=true], .tabs button[aria-selected=true] { color: var(--green); border-color: var(--green); }
table.box th { color: var(--muted); }
.leadlist .rank { color: var(--muted); }
.leadlist li:first-child .rank, .leadlist li:first-child .val { color: var(--green); }
.gamelist a { border-radius: 16px; }
dialog { border: 1px solid var(--line); }
.brand { white-space: nowrap; }
.topbar nav { gap: 4px 14px; flex-wrap: wrap; justify-content: flex-end; font-size: .875rem; }
.topbar nav a { min-height: 40px; }
main.wrap > h1:first-child { margin-top: 20px; }

/* team directory picker */
details.dir { margin: 0 0 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); padding: 0 12px; }
details.dir summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; color: var(--green); }
details.dir[open] { padding-bottom: 8px; }
.dirlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dirlist .btn { width: 100%; justify-content: flex-start; text-align: left; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 14px; }