/* =============================================================================
   1891 Arena — Brackets page
   ============================================================================
   Real visual SVG brackets + round-robin grid + pool→bracket layout.

   Hover-highlight: hovering any team-name `<text>` element fades the
   bracket and lights the path of that team through the SVG via a
   data attribute set by brackets.js.
   ============================================================================= */

.bracket-section-head {
  margin-bottom: var(--c-space-5);
}

.bracket-viewer {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 16px;
  padding: var(--c-space-5);
  overflow-x: auto;
  position: relative;
}

.bracket-svg {
  width: 100%;
  height: auto;
  min-width: 720px;
  display: block;
  font-family: inherit;
}

.bracket-card {
  fill: var(--c-paper-warm);
  stroke: var(--c-line);
  stroke-width: 1;
  transition: fill 200ms ease, stroke 200ms ease;
}
.bracket-card--final {
  fill: #fff8e6;
  stroke: var(--c-bloom);
  stroke-width: 1.4;
}

.bracket-seed {
  font-family: var(--c-font-mono, ui-monospace, monospace);
  font-size: 10px;
  fill: var(--c-fog);
  letter-spacing: 0.06em;
}
.bracket-team {
  font-size: 13px;
  fill: var(--c-ink);
  cursor: default;
  transition: fill 160ms ease, font-weight 160ms ease;
}
.bracket-team.winner { font-weight: 600; }
.bracket-team.champion { font-weight: 700; fill: var(--c-bloom); }

.bracket-score {
  font-family: var(--c-font-mono, ui-monospace, monospace);
  font-size: 13px;
  fill: var(--c-ink-soft);
}
.bracket-score.winner {
  fill: var(--c-bloom);
  font-weight: 700;
}

.bracket-lines path {
  fill: none;
  stroke: var(--c-line);
  stroke-width: 1.5;
}

.bracket-round-labels text {
  font-family: var(--c-font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  fill: var(--c-fog);
}

.bracket-champion rect {
  fill: var(--c-bloom);
  stroke: var(--c-bloom);
  filter: drop-shadow(0 4px 14px rgba(244, 163, 0, 0.35));
}
.bracket-champion path {
  fill: none;
  stroke: var(--c-bloom);
  stroke-width: 2;
}
.bracket-champion-label {
  font-family: var(--c-font-mono, ui-monospace, monospace);
  font-size: 9px;
  letter-spacing: 0.18em;
  fill: rgba(255,255,255,0.85);
}
.bracket-champion-name {
  font-size: 12px;
  font-weight: 700;
  fill: #fff;
}

/* ── Hover-highlight: brackets.js sets data-active-team on .bracket-viewer ── */

.bracket-viewer[data-active-team] .bracket-team:not([data-team=""]) { opacity: 0.35; }
.bracket-viewer[data-active-team] .bracket-team.is-active { opacity: 1; fill: var(--c-bloom); font-weight: 700; }
.bracket-viewer[data-active-team] .bracket-card { opacity: 0.55; }
.bracket-viewer[data-active-team] .bracket-match.has-active .bracket-card { opacity: 1; stroke: var(--c-bloom); stroke-width: 1.4; }
.bracket-viewer[data-active-team] .bracket-lines path { opacity: 0.3; }
.bracket-viewer[data-active-team] .bracket-score { opacity: 0.55; }
.bracket-viewer[data-active-team] .bracket-match.has-active .bracket-score { opacity: 1; }

.bracket-viewer__hint {
  margin-top: var(--c-space-3);
  font-size: 0.85rem;
}

/* ── Round-robin grid ──────────────────────────────────────────── */

.rr-wrap { overflow-x: auto; }
.rr-grid {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 600px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  overflow: hidden;
}
.rr-grid th, .rr-grid td {
  padding: 12px 14px;
  text-align: center;
  border-bottom: 1px solid var(--c-line);
  border-right: 1px solid var(--c-line);
  font-size: 0.92rem;
  font-family: var(--c-font-mono, ui-monospace, monospace);
}
.rr-grid thead th {
  background: var(--c-paper-warm);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-fog);
}
.rr-grid tbody th {
  text-align: left;
  font-family: inherit;
  font-weight: 600;
  background: var(--c-paper-warm);
  color: var(--c-ink);
}
.rr-grid__diag { background: repeating-linear-gradient(45deg, var(--c-paper-warm) 0 6px, transparent 6px 12px); color: var(--c-fog); }
.rr-grid__win  { color: var(--sport-acid-ink); background: rgba(15,184,106,0.08); }
.rr-grid__loss { color: var(--c-fog); }
.rr-grid__totals { background: #fffaee; font-weight: 700; color: var(--c-ink); }
.rr-grid tr:last-child th, .rr-grid tr:last-child td { border-bottom: 0; }
.rr-grid th:last-child, .rr-grid td:last-child { border-right: 0; }

/* ── Pool → bracket ────────────────────────────────────────────── */

.pool-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--c-space-5);
  margin-bottom: var(--c-space-4);
}
@media (min-width: 700px) { .pool-grid { grid-template-columns: 1fr 1fr; } }

.pool-card {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 16px;
  padding: var(--c-space-5);
}
.pool-list {
  list-style: none;
  margin: var(--c-space-3) 0 var(--c-space-3);
  padding: 0;
}
.pool-list li {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--c-line);
  font-size: 0.95rem;
}
.pool-list li:last-child { border-bottom: 0; }
.pool-list li:nth-child(-n+2) .pool-team { font-weight: 700; color: var(--c-bloom); }
.pool-rank {
  font-family: var(--c-font-mono, ui-monospace, monospace);
  font-size: 12px;
  background: var(--c-bloom);
  color: #fff;
  border-radius: 8px;
  text-align: center;
  font-weight: 700;
  padding: 4px 0;
}
.pool-list li:not(:nth-child(-n+2)) .pool-rank { background: transparent; color: transparent; }
.pool-team { color: var(--c-ink); }
.pool-record {
  font-family: var(--c-font-mono, ui-monospace, monospace);
  color: var(--c-ink-soft);
  font-size: 0.9rem;
}
.pool-foot {
  margin: 0;
  font-family: var(--c-font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-bloom);
}

.pool-arrow {
  text-align: center;
  font-family: var(--c-font-mono, ui-monospace, monospace);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--c-ink-soft);
  margin: var(--c-space-3) 0 0;
}