/* Layout: stadium scoreboard header over a two-sided bracket (round tabs on phones). */
:root {
  --bg: #eceff3;
  --surface: #ffffff;
  --surface-2: #f5f6f9;
  --ink: #141922;
  --muted: #5a6372;
  --line: #c7cdd7;
  --tbd: #a7afbc;
  --accent: #a85d00;
  --accent-ink: #ffffff;
  --accent-soft: #fbe9cf;
  --win: #237a3b;
  --win-soft: #dcf2e1;
  --loss: #c22a2a;
  --loss-soft: #fbe1e1;
  --board: #141922;
  --board-ink: #f2b33d;

  --display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --data: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --radius: 6px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f131a; --surface: #171d27; --surface-2: #1d2430; --ink: #e8ecf2; --muted: #8c96a6; --line: #2d3644; --tbd: #4c5666;
    --accent: #f2b33d; --accent-ink: #1a1405; --accent-soft: #3a2c10; --win: #5fd27a; --win-soft: #15301d;
    --loss: #ff7676; --loss-soft: #3a1a1c; --board: #080b10; --board-ink: #f2b33d; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f131a; --surface: #171d27; --surface-2: #1d2430; --ink: #e8ecf2; --muted: #8c96a6; --line: #2d3644; --tbd: #4c5666;
  --accent: #f2b33d; --accent-ink: #1a1405; --accent-soft: #3a2c10; --win: #5fd27a; --win-soft: #15301d;
  --loss: #ff7676; --loss-soft: #3a1a1c; --board: #080b10; --board-ink: #f2b33d; color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.45 var(--body); }
.wrap { max-width: 1440px; margin: 0 auto; padding-inline: 16px; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Header */
.top { background: var(--board); color: #e8ecf2; padding-top: 20px; }
.top-row { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: flex-end; justify-content: space-between; padding-bottom: 16px; }
.brand h1 { margin: 0; font: 900 clamp(40px, 7vw, 64px)/0.9 var(--display); text-transform: uppercase; letter-spacing: 0.01em; text-wrap: balance; }
.brand h1 span { color: var(--board-ink); }
.sub { margin: 6px 0 0; color: #9aa4b4; font: 600 14px var(--data); letter-spacing: 0.08em; text-transform: uppercase; }
.board { display: flex; gap: 2px; background: #2a3240; border: 2px solid #2a3240; border-radius: var(--radius); overflow: hidden; }
.board-cell { display: flex; flex-direction: column; padding: 6px 14px; background: #000; min-width: 96px; }
.board-label { font: 600 11px var(--data); letter-spacing: 0.12em; text-transform: uppercase; color: #8c96a6; }
.board-value { font: 700 26px/1.1 var(--data); color: var(--board-ink); font-variant-numeric: tabular-nums; text-shadow: 0 0 10px rgba(242, 179, 61, 0.45); }
.tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.tabs button { background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 14px; color: #aab3c2; font: 600 15px var(--data); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; white-space: nowrap; }
.tabs button[aria-selected="true"] { color: #fff; border-bottom-color: var(--board-ink); }
.tabs button.org { color: var(--board-ink); }

main.wrap { padding-block: 20px 32px; display: flex; flex-direction: column; gap: 16px; }
.view { display: flex; flex-direction: column; gap: 16px; }
.banner { margin: 0; padding: 12px 16px; border-radius: var(--radius); background: var(--accent-soft); border: 1px solid var(--accent); }

/* Entry bar */
.entry-bar { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-end; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; border: 0; padding: 0; margin: 0; }
.field > span, .field legend { font: 600 12px var(--data); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding: 0; }
.field input, .teams-table input, textarea, .org-form input {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; min-width: 0; width: 100%;
}
.entry-bar .field { flex: 1 1 220px; max-width: 320px; }
.entry-bar .field.tiebreak { flex: 0 1 230px; }
.entry-bar .field.paste-field { flex: 1 1 100%; max-width: none; }
.paste-field textarea { font-size: 13px; resize: vertical; }
.paste-list { margin: 6px 0 0; padding-left: 18px; color: var(--ink); font-weight: 400; }
.paste-list li { font-variant-numeric: tabular-nums; }
.progress { display: flex; flex-direction: column; gap: 6px; flex: 0 1 180px; padding-bottom: 6px; }
.progress-text { font: 500 15px var(--data); font-variant-numeric: tabular-nums; }
.progress-track { display: block; height: 6px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.progress-track span { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.2s; }
.actions { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.msg { flex-basis: 100%; margin: 0; min-height: 0; font-weight: 500; }
.msg:empty { display: none; }
.msg.ok { color: var(--win); }
.msg.err { color: var(--loss); }
.hint { margin: 0; color: var(--muted); flex: 1 1 300px; }

.btn { border-radius: 4px; padding: 9px 16px; font: 700 15px var(--data); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; border: 1px solid var(--line); background: var(--surface); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.danger { background: none; border-color: var(--loss); color: var(--loss); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.ghost:hover:not(:disabled) { border-color: var(--ink); }
.link { background: none; border: 0; padding: 0; color: var(--muted); text-decoration: underline; cursor: pointer; }

.scoreline { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: baseline; padding: 4px 2px; }
.scoreline .big { font: 900 34px/1 var(--display); }
.scoreline .lbl { font: 600 12px var(--data); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-left: 6px; }

/* Bracket: desktop */
.bracket-scroll { overflow-x: auto; padding-bottom: 8px; }
.bracket { --gap: 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.15fr) repeat(4, minmax(0, 1fr)); column-gap: var(--gap); }
.col-head { text-align: center; white-space: nowrap; font: 600 12px var(--data); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding-bottom: 6px; }
.col-head b { color: var(--accent); font-weight: 700; }
.col { display: flex; flex-direction: column; min-height: 640px; }
.pair { flex: 1; display: flex; flex-direction: column; position: relative; }
.slot { flex: 1; display: flex; align-items: center; position: relative; padding: 3px 0; }
.slot > .game { width: 100%; }
.l .slot::after, .r .slot::before, .c .slot::before, .c .slot::after { content: ""; position: absolute; top: 50%; width: calc(var(--gap) / 2); border-top: 1px solid var(--line); }
.l .slot::after, .c .slot::after { right: calc(var(--gap) / -2); }
.r .slot::before, .c .slot::before { left: calc(var(--gap) / -2); }
.l:not(.first) .slot::before { content: ""; position: absolute; top: 50%; left: calc(var(--gap) / -2); width: calc(var(--gap) / 2); border-top: 1px solid var(--line); }
.r:not(.first) .slot::after { content: ""; position: absolute; top: 50%; right: calc(var(--gap) / -2); width: calc(var(--gap) / 2); border-top: 1px solid var(--line); }
.l .pair.two::after, .r .pair.two::after { content: ""; position: absolute; top: 25%; bottom: 25%; border-left: 1px solid var(--line); }
.l .pair.two::after { right: calc(var(--gap) / -2); }
.r .pair.two::after { left: calc(var(--gap) / -2); }

.champ { text-align: center; margin-bottom: 10px; }
.champ-label { font: 600 12px var(--data); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.champ-team { font: 900 26px/1.1 var(--display); text-transform: uppercase; display: flex; gap: 8px; align-items: center; justify-content: center; min-height: 34px; }
.champ-team img { width: 30px; height: 30px; object-fit: contain; }

/* Game card */
.game { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.game-meta { display: flex; justify-content: space-between; gap: 4px; padding: 2px 6px; white-space: nowrap; overflow: hidden; font: 500 11px var(--data); letter-spacing: 0.04em; color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.team { display: grid; grid-template-columns: 16px 18px minmax(0, 1fr) 12px; align-items: center; gap: 4px; width: 100%; min-height: 32px; padding: 4px 6px; border: 0; background: none; text-align: left; cursor: pointer; }
.team + .team { border-top: 1px solid var(--line); }
.team:disabled { cursor: default; }
.team:not(:disabled):hover { background: var(--surface-2); }
.team .seed { font: 600 12px var(--data); color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.team .logo { width: 18px; height: 18px; display: grid; place-items: center; font-size: 17px; line-height: 1; }
.team .logo img { width: 18px; height: 18px; object-fit: contain; }
.team .label { display: flex; flex-direction: column; min-width: 0; }
.team .abbr { font: 700 15px/1.1 var(--data); letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team .nm { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team .mark { font: 700 13px var(--data); text-align: center; }
.team.tbd { color: var(--tbd); }
.team.tbd .abbr { font-weight: 500; font-size: 13px; letter-spacing: 0.08em; }
.game.empty-game { background: var(--surface-2); border-style: dashed; }
.game.empty-game .game-meta { background: transparent; color: var(--tbd); }
.team.picked { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.team.picked .mark::before { content: "●"; color: var(--accent); font-size: 10px; }
.team.right { background: var(--win-soft); box-shadow: inset 3px 0 0 var(--win); }
.team.right .mark::before { content: "✓"; color: var(--win); }
.team.wrong { background: var(--loss-soft); box-shadow: inset 3px 0 0 var(--loss); }
.team.wrong .abbr { text-decoration: line-through; }
.team.wrong .mark::before { content: "✕"; color: var(--loss); }
.team.out .abbr { text-decoration: line-through; color: var(--muted); }
.team.won { background: var(--win-soft); box-shadow: inset 3px 0 0 var(--win); }
.team.won .mark::before { content: "W"; color: var(--win); }
.team.lost { opacity: 0.5; }
.actual { padding: 2px 8px; font: 500 11px var(--data); color: var(--muted); border-top: 1px dashed var(--line); }

/* Bracket: phones get one round at a time */
.round-tabs { display: none; }
@media (max-width: 1239px) {
  .bracket-scroll { overflow: visible; }
  .round-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin-bottom: 12px; }
  .round-tabs button { flex: 1 0 auto; padding: 8px 10px; border: 1px solid var(--line); background: var(--surface); border-radius: 4px; font: 600 14px var(--data); letter-spacing: 0.04em; cursor: pointer; }
  .round-tabs button small { display: block; font-size: 11px; color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
  .round-tabs button[aria-selected="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  .round-tabs button[aria-selected="true"] small { color: var(--bg); opacity: 0.75; }
  .bracket { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 10px; min-width: 0; }
  .bracket .col-head { display: none; }
  .bracket .pair, .bracket .slot { display: contents; }
  .bracket .col { display: contents; }
  .bracket .slot::before, .bracket .slot::after, .bracket .pair::after { display: none; }
  .bracket .game:not(.in-round) { display: none; }
  .bracket .champ { grid-column: 1 / -1; order: -1; }
  .bracket .champ:not(.in-round) { display: none; }
  .team { min-height: 42px; }
}

/* Leaderboard */
.table-scroll { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; }
th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { font: 600 12px var(--data); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--data); font-size: 17px; }
td.rank { font: 700 17px var(--data); color: var(--muted); width: 1%; }
tr.me td { background: var(--accent-soft); }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: var(--surface-2); }
.who { font-weight: 600; }
.champ-pick { display: inline-flex; gap: 6px; align-items: center; font: 700 15px var(--data); }
.champ-pick img { width: 18px; height: 18px; object-fit: contain; }
.champ-pick.out { text-decoration: line-through; color: var(--muted); }
.empty { padding: 28px 16px; text-align: center; color: var(--muted); background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); }
.names { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 4px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-weight: 500; }
.chip.me { border-color: var(--accent); background: var(--accent-soft); }
.viewing { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; margin-top: 8px; }
.h2 { margin: 8px 0 0; font: 900 26px var(--display); text-transform: uppercase; }

/* Season setup */
.season { display: flex; flex-direction: column; gap: 16px; }
.season-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.points #s-points { display: flex; gap: 6px; flex-wrap: wrap; }
.points label { display: flex; flex-direction: column; font: 500 12px var(--data); color: var(--muted); gap: 2px; }
.points input { width: 58px; }
.paste { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.paste[open] { gap: 10px; }
.paste summary { cursor: pointer; font-weight: 600; }
.paste textarea { margin: 8px 0; font-family: ui-monospace, Menlo, monospace; font-size: 13px; }
.teams-table td { padding: 4px 8px; }
.teams-table td:first-child { font: 600 15px var(--data); color: var(--muted); text-align: right; width: 1%; }
.teams-table input { padding: 5px 8px; }
.teams-table .in-abbr { width: 90px; }
.teams-table .in-name { min-width: 180px; }
.teams-table .in-logo { min-width: 260px; }
.season-actions { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.check { display: flex; gap: 8px; align-items: flex-start; max-width: 520px; color: var(--muted); }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.btn.small { padding: 4px 10px; font-size: 13px; }

.foot { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center; padding-block: 8px 32px; color: var(--muted); font-size: 13px; }
.foot-org { display: flex; gap: 8px; align-items: center; }
.org-form { display: flex; gap: 6px; }
.org-form input { width: 180px; }

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

/* The champion sits above the final without moving the final off the F4 line. */
@media (min-width: 1240px) {
  .c .champ { position: absolute; left: 0; right: 0; bottom: calc(50% + 56px); margin: 0; }
}
.off { color: var(--muted); font-size: 13px; margin-left: 4px; }
td.rd, th.rd { color: var(--muted); font-size: 15px; }
th.rd { font-size: 12px; }
td.total { font-weight: 700; }
.seed-sm { font: 600 12px var(--data); color: var(--muted); }