:root {
  --paper: #F4F5F7;
  --board: #12182B;
  --board-alt: #171C2C;
  --board-text: #EEF0F5;
  --ink-soft: #8B93A8;
  --gold: #D9A233;
  --gold-strong: #B9791A;
  --line: #2A3044;
  --good: #3AA66B;
  --bad: #C0392B;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--board);
  color: var(--board-text);
  font-family: "Segoe UI", Arial, sans-serif;
  min-height: 100vh;
}
h1, h2, h3 { letter-spacing: 0.01em; text-wrap: balance; }
button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  border-radius: 6px;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 700;
  background: var(--gold);
  color: #1A1200;
}
button:hover { filter: brightness(1.08); }
button:disabled { opacity: 0.35; cursor: not-allowed; }
button.secondary { background: #2A3044; color: var(--board-text); }
button.danger { background: var(--bad); color: white; }
input[type="text"], textarea {
  font-family: inherit;
  font-size: 15px;
  padding: 8px 10px;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: #1A2036;
}
.card {
  background: var(--board-alt);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px;
}
.pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(217, 162, 51, 0.18);
  color: var(--gold);
  vertical-align: middle;
}
.pill-final { background: rgba(192, 57, 43, 0.22); color: #E4756A; }

.team-label { white-space: nowrap; }
.vs-sm { color: var(--gold); font-weight: 700; margin: 0 4px; font-size: 0.85em; }

.bracket-panel-wrap {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.bracket-panel-wrap h2 {
  font-size: 32px;
  font-weight: 800;
  color: var(--board-text);
  margin: 0 0 20px;
  text-align: center;
}

/* Page is full width so the bracket gets the whole screen; the game board /
   host panel stay capped at 1200px. If the bracket is still wider than the
   screen, fitBrackets() (ui.js) zooms it down — never a scrollbar. */
#app > .card, #app > .board { max-width: 1200px; margin-left: auto; margin-right: auto; }
.bracket-tree-wrap { overflow: hidden; padding-bottom: 8px; }
.bracket-tree { position: relative; flex: none; }
.bracket-col-header {
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 12px;
  color: var(--gold);
  font-weight: 700;
}
.bracket-slot { position: absolute; display: flex; align-items: stretch; padding: 4px; box-sizing: border-box; overflow: hidden; }
.bracket-slot-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.bracket-slot-inner.active .bracket-team { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.bracket-slot-inner.tbd { opacity: 0.5; }
.bracket-team {
  min-height: 0;
  display: flex;
  align-items: center;
  padding: 6px 10px;
  background: var(--board-alt);
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bracket-team.winner { color: var(--gold); font-weight: 700; }
.bracket-team.bye-label { color: var(--ink-soft); font-style: italic; font-size: 11px; }
.bracket-team.tbd-row { color: var(--ink-soft); font-style: italic; opacity: 0.6; }
.bracket-connector { position: absolute; width: 2px; background: var(--gold); opacity: 0.6; }

.strike-indicator { display: inline-flex; gap: 6px; vertical-align: middle; }
.strike-box {
  width: 16px;
  height: 16px;
  border: 2px solid var(--bad);
  border-radius: 4px;
  display: inline-block;
  background: transparent;
}
.strike-box.used { background: var(--bad); }

.fm-table { width: 100%; border-collapse: collapse; }
.fm-table th {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 12px;
  color: var(--gold);
  padding: 6px 10px;
  border-bottom: 2px solid var(--gold);
  text-align: left;
}
.fm-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.fm-table td:first-child { width: 32px; color: var(--ink-soft); font-weight: 700; text-align: center; }
.fm-table td:last-child { text-align: right; color: var(--gold); font-weight: 800; width: 90px; }

/* Crowd Round table standings — shared by Host and Display (ui.js crowdStandingsHTML) */
.crowd-standings { max-width: 640px; margin: 24px auto 0; text-align: left; }
.crowd-standings h3 {
  margin: 0 0 10px; text-align: center; color: var(--gold);
  font-size: 22px; text-transform: uppercase; letter-spacing: 0.08em;
}
.crowd-standings table { width: 100%; border-collapse: collapse; font-size: 20px; }
.crowd-standings th {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gold);
  padding: 6px 10px; border-bottom: 2px solid var(--gold); text-align: left;
}
.crowd-standings td { padding: 8px 10px; border-bottom: 1px solid var(--line); }
.crowd-standings .cs-rank { width: 36px; color: var(--ink-soft); font-weight: 700; text-align: center; }
.crowd-standings .cs-round { width: 110px; color: var(--good); font-weight: 700; text-align: right; }
.crowd-standings .cs-total { width: 90px; color: var(--gold); font-weight: 800; text-align: right; }
.crowd-standings-empty { text-align: center; color: var(--ink-soft); }

/* Join-by-phone QR (qrcode-generator SVG, see ui.js qrSvg) */
.crowd-qr { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; }
.crowd-qr .qr-box { background: #fff; padding: 8px; border-radius: 10px; line-height: 0; }
.crowd-qr .qr-box svg { width: 100%; height: auto; display: block; }
.crowd-qr .qr-caption { color: var(--board-text); font-weight: 700; text-align: center; }