/* ─────────────────────────────────────────────────────────────────
   League-specific styles: POTW + Crown, charts, player cards,
   tables, brackets, league videos, insights.
   ───────────────────────────────────────────────────────────────── */

/* ─── Page header ──────────────────────────────────────────────── */

/* The site-wide ambient background lives in main.css (applied to body). No
   per-page override needed here. */

.league-hero {
  position: relative;
  padding: clamp(72px, 10vw, 130px) var(--gutter) clamp(56px, 8vw, 96px);
  text-align: center;
  overflow: hidden;
}
.league-hero h1 {
  /* inherits site-wide h1 clamp(44, 7vw, 80) from main.css */
  margin: 0;
  letter-spacing: 0.02em;
  line-height: 1.02;
}
.league-hero .eyebrow { color: var(--gold); margin-bottom: 14px; }

.league-hero .hero-desc {
  max-width: 60ch;
  margin: 28px auto 0;
  color: var(--text-dim);
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.6;
}
.league-hero .hero-desc strong { color: var(--text); font-weight: 700; }

.league-hero .hero-prompt {
  max-width: 56ch;
  margin: 28px auto 0;
  color: var(--text);
  font-size: clamp(16px, 1.6vw, 19px);
  font-weight: 600;
  position: relative;
  padding-top: 28px;
}
.league-hero .hero-prompt::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.league-hero .hero-prompt span { color: var(--gold); }

.league-hero .hero-ctas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 180px));
  justify-content: center;
  gap: 12px;
  margin-top: 36px;
}

/* Iron Gauntlet hero has only 2 CTAs — use a 2-column grid so they match
   the league page's button format, just with two tracks instead of four. */
body.page-gauntlet .league-hero .hero-ctas {
  grid-template-columns: repeat(2, minmax(0, 180px));
}

/* Iron Gauntlet event mark — sits at the very top of the hero, centred. */
.league-hero .ig-mark {
  display: block;
  width: auto;
  height: clamp(120px, 16vw, 200px);
  margin: 0 auto 22px;
  filter: drop-shadow(0 14px 40px rgba(0,0,0,0.5));
}
.league-hero .hero-ctas .btn {
  min-width: 0;
  width: 100%;
  padding: 14px 24px;
  text-align: center;
}
@media (max-width: 820px) {
  .league-hero .hero-ctas {
    grid-template-columns: repeat(2, minmax(0, 220px));
    gap: 10px;
  }
  .league-hero .hero-ctas .btn { padding: 12px 16px; }
}
@media (max-width: 440px) {
  .league-hero .hero-ctas {
    grid-template-columns: minmax(0, 260px);
  }
}

.section-label {
  font-family: var(--font-display);
  /* matches the site-wide h2 scale (main.css) */
  font-size: clamp(30px, 4vw, 48px);
  text-align: center;
  margin: 0 0 28px;
  letter-spacing: 0.04em;
  text-wrap: balance;
}

/* Decorative separator at the bottom of every page hero */
.league-hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(60px, 12vw, 100px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* First content section gets a bit more air above so it doesn't crowd the hero */
.league-hero + .section { padding-top: clamp(56px, 7vw, 100px); }

/* ─── Spotlight: POTW + Crown Race ─────────────────────────────── */

.infinity-spotlight {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: var(--max);
  margin: 0 auto;
  align-items: stretch;
}
@media (max-width: 781px) {
  .infinity-spotlight { grid-template-columns: 1fr; }
}

/* POTW hugs its natural content height — it's the "anchor" that sets the row. */
.potw-card { align-self: start; }

/* Crown Race stretches to match the row (= POTW height) and scrolls internally. */
.crown-race {
  align-self: stretch;
  min-height: 0;
  overflow: hidden;
}

.potw-card, .crown-race {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
}
.potw-card h3, .crown-race h3 {
  font-family: var(--font-display);
  font-size: 26px;
  margin: 0 0 16px;
  letter-spacing: 0.04em;
}

.potw-card {
  display: grid;
  grid-template-columns: minmax(180px, 36%) 1fr;
  gap: 20px;
  align-items: center;
}
.potw-card .potw-title { grid-column: 1 / -1; }
.potw-card img {
  width: 100%;
  border-radius: var(--radius);
  aspect-ratio: 2 / 3;
  object-fit: cover;
  background: #111;
}
.potw-body { display: flex; flex-direction: column; gap: 8px; }
.potw-body .potw-name { font-family: var(--font-display); font-size: 28px; letter-spacing: 0.03em; }
.potw-body .potw-division { color: var(--gold); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px; }
.potw-stats {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.potw-stat {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 14px;
}
.potw-stat span:first-child { color: var(--text-mute); }
.potw-stat span:last-child { font-weight: 700; }
.potw-stat .val-up { color: var(--green); }

.crown-race { display: flex; flex-direction: column; min-height: 0; }
#crownList {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  /* give the scrollbar its own gutter so it isn't kissing the points column */
  padding-right: 10px;
  margin-right: -10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.18) transparent;
}
#crownList::-webkit-scrollbar { width: 6px; }
#crownList::-webkit-scrollbar-track { background: transparent; }
#crownList::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.18);
  border-radius: 3px;
}
#crownList::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.3); }

.crown-row {
  display: grid;
  grid-template-columns: 32px 42px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 4px 10px 8px;
  border-bottom: 1px solid var(--border-soft);
  transition: background .15s;
}
.crown-row:last-child { border-bottom: 0; }
.crown-row:hover { background: rgba(255,255,255,0.03); }
.crown-row .rank {
  text-align: center;
  color: var(--text-mute);
  font-weight: 700;
  font-size: 14px;
}
.crown-row .img-crop {
  width: 42px;
  aspect-ratio: 2 / 3;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #111;
  border: 1px solid var(--border-soft);
}
.crown-row .img-crop img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top;
}
.crown-row .main .name { font-weight: 700; font-size: 14px; }
.crown-row .main .sub { color: var(--text-mute); font-size: 12px; }
.crown-row .pts { font-weight: 800; color: var(--gold); font-size: 16px; }

/* ─── Insights ─────────────────────────────────────────────────── */

.league-insights {
  max-width: var(--max);
  margin: 0 auto;
}
.insights-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 16px;
  counter-reset: insight;
  align-items: stretch;
}
@media (max-width: 1000px) {
  .insights-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .insights-list { grid-template-columns: 1fr; }
}
.insights-list li {
  position: relative;
  display: flex;
  align-items: center;
  padding: 22px 24px 22px 78px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
  height: 100%;
  counter-increment: insight;
}
.insights-list li::before {
  content: counter(insight, decimal-leading-zero);
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: 34px;
  letter-spacing: 0.04em;
  color: var(--gold);
  opacity: 0.9;
}

/* ─── Player flip cards grid ───────────────────────────────────── */

/* 4×2 grid on desktop, 2×4 on mobile. Flex so odd counts center without trailing gaps. */
.player-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  max-width: var(--max);
  margin: 0 auto;
}
.player-grid > .player-flip {
  flex: 0 0 calc((100% / 4) - 12px); /* 4 across, 12 = gap*(n-1)/n */
  max-width: calc((100% / 4) - 12px);
}
@media (max-width: 820px) {
  .player-grid {
    padding: 0 clamp(24px, 10vw, 100px);
  }
  .player-grid > .player-flip {
    flex: 0 0 calc((100% / 2) - 8px); /* 2 across */
    max-width: calc((100% / 2) - 8px);
  }
}
.player-flip {
  position: relative;
}
.player-flip-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ─── Division charts (Swiper) ─────────────────────────────────── */

.division-charts-wrap {
  max-width: var(--max);
  margin: 0 auto;
}
#divisionChartTitle {
  text-align: center;
  font-family: var(--font-display);
  /* matches .section-label / site-wide h2 scale */
  font-size: clamp(30px, 4vw, 48px);
  letter-spacing: 0.04em;
  margin: 0 0 20px;
  transition: opacity .15s;
}
#divisionChartTitle.er-fade { opacity: 0; }
.infinityCharts { padding: 0 8px 40px; }
.er-panel {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  height: 520px;
}
.er-panel canvas { width: 100% !important; height: 100% !important; }
.infinityCharts .swiper-button-prev,
.infinityCharts .swiper-button-next {
  color: var(--gold);
  --swiper-navigation-size: 22px;
}
.infinityCharts .swiper-pagination-bullet {
  background: var(--text-mute);
  opacity: 1;
}
.infinityCharts .swiper-pagination-bullet-active {
  background: var(--gold);
}

/* Single chart on homepage/league hub */
#divisionChart_gid0 {
  width: 100% !important;
  max-width: var(--max);
  height: 460px !important;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ─── Schedule / team live tables ──────────────────────────────── */

.liveTableWrap {
  max-width: var(--max);
  margin: 0 auto;
  overflow-x: auto;
}
table.liveTable {
  width: 100%;
  border-collapse: collapse;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
table.liveTable th, table.liveTable td {
  padding: 14px 14px;
  text-align: center;
  border-bottom: 1px solid var(--border-soft);
  font-size: 14px;
  white-space: nowrap;
  vertical-align: middle;
}
/* Player name column: hug content + sit flush next to the stats instead of
   spreading across half the table. */
table.liveTable:not(.full-tvguide) th.rowHeader {
  width: 1%;
  text-align: left;
  padding-left: 22px;
  padding-right: 32px;
}
table.liveTable tbody tr:last-child th,
table.liveTable tbody tr:last-child td { border-bottom: 0; }
table.liveTable thead th.colHeader {
  font-size: 11px;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--text-mute);
  padding-top: 16px;
  padding-bottom: 16px;
}
table.liveTable thead th.colHeader.rowHeader {
  color: var(--text);
}

/* ─── TV Guide: card-based broadcast layout (replaces the table for .full-tvguide) ─── */

.tvg-layout {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.tvg-week {
  margin-bottom: 48px;
}
.tvg-week:last-child { margin-bottom: 0; }

.tvg-week-label {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.6vw, 30px);
  letter-spacing: 0.06em;
  color: var(--gold);
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(212,175,55,0.25);
  text-transform: uppercase;
}

.tvg-day {
  margin-bottom: 24px;
}
.tvg-day:last-child { margin-bottom: 0; }
.tvg-day-label {
  font-size: 12px;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin: 0 0 10px;
  padding-left: 2px;
  font-weight: 700;
}

.tvg-matches {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tvg-match {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 24px;
  align-items: center;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 22px;
  transition: border-color .15s, transform .15s ease;
}
.tvg-match:hover {
  border-color: rgba(212,175,55,0.35);
}

.tvg-slot {
  text-align: center;
  padding-right: 22px;
  border-right: 1px solid var(--border);
}
.tvg-time {
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 24px);
  letter-spacing: 0.03em;
  color: var(--gold);
  line-height: 1;
}

.tvg-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.tvg-division {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.7vw, 20px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1.15;
}

.tvg-streamer {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
}
.tvg-streamer span {
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
}
.tvg-streamer strong {
  color: var(--gold);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
}

.tvg-players {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tvg-player {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}
.tvg-player.is-streamer {
  background: rgba(212,175,55,0.12);
  border-color: rgba(212,175,55,0.5);
  color: var(--gold);
  font-weight: 600;
}

.tvg-tbd {
  font-size: 13px;
  font-style: italic;
  color: var(--text-mute);
}

.tvg-empty {
  max-width: 520px;
  margin: 0 auto;
  padding: 36px 28px;
  text-align: center;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-dim);
  font-size: 15px;
  font-style: italic;
}

@media (max-width: 640px) {
  .tvg-match {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px 18px;
  }
  .tvg-slot {
    padding-right: 0;
    padding-bottom: 10px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    text-align: left;
  }
}
table.liveTable th.colHeader {
  background: rgba(255,255,255,0.04);
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 12px;
  font-weight: 700;
}
table.liveTable th.rowHeader {
  text-align: left;
  color: var(--text);
  font-weight: 700;
}
table.liveTable tbody tr:hover { background: rgba(255,255,255,0.02); }
table.liveTable .div-row td, table.liveTable .div-row th {
  background: rgba(212,175,55,0.08);
  font-weight: 700;
}

/* ─── Bracket widgets ───────────────────────────────────────────
   Three bracket components share this file:
     • Division bracket  — 3-team (.b3-*),  rendered by bracket-3team.js
     • Eternal Table    — 4-team (.b4-*),   rendered by bracket-4team.js
     • Iron Gauntlet    — 16-team (.team-pill, .pill-name-1/2, .r1/.r2/.sf,
                                   .bracket/.b-side/.conn-col/.center-col,
                                   .finalist, .champion-card),
                          rendered by bracket-big.js.

   Pill content styling differs intentionally between the three:
     • b3/b4 show a seed + partner with first-line bold, second-line muted
     • Iron Gauntlet pills are two teammates with equal visual weight
   Keep those blocks separate so changes to one don't leak into the others.
*/

.b3-loading, .b4-loading,
.b3-error, .b4-error, .error-msg {
  text-align: center;
  padding: 40px;
  color: var(--text-mute);
}

/* ── Pill base (shared by all three brackets) ── */
.b3-pill, .b4-pill, .team-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  min-height: 52px;
}
.b3-pill.is-winner, .b4-pill.is-winner, .team-pill.is-winner {
  background: linear-gradient(135deg, rgba(212,175,55,0.12) 0%, rgba(212,175,55,0.05) 100%);
  border-color: var(--gold);
  color: var(--text);
}
.b3-pill.is-tbd, .b4-pill.is-tbd, .team-pill.is-tbd {
  opacity: 0.45;
  border-style: dashed;
}
.b3-pill-row, .b4-pill-row {
  display: flex;
  align-items: center;
}
.b3-pill-names, .b4-pill-names, .pill-names {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* ── Division (b3) + Eternal Table (b4): seed + partner, hierarchical ── */
.b3-name1, .b4-name {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.b3-name2 {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.b4-name2 {
  font-size: 12px;
}
.b4-division {
  color: var(--gold);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.b3-seed, .b4-seed {
  display: inline-block;
  color: var(--text-mute);
  font-size: 11px;
  font-weight: 700;
  margin-right: 6px;
  min-width: 18px;
}
.b3-score, .b4-score {
  color: var(--gold);
  font-weight: 800;
  font-size: 13px;
  white-space: nowrap;
}

/* ── Iron Gauntlet (.team-pill): two teammates, equal visual weight ──
   Both players share the same font weight, size, and color. No hierarchy
   between line 1 and line 2 — they're partners, not seed+player.
   Pills here size to content (no min-height) so the R1 column stays compact
   enough for R2 slots to sit at visually correct midpoints. */
.bracket .team-pill {
  min-height: 0;
  padding: 8px 12px;
  gap: 8px;
}
.pill-name-1, .pill-name-2 {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.3;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pill-score {
  color: var(--gold);
  font-weight: 800;
  font-size: 13px;
  white-space: nowrap;
}

/* ── Champions card — Division (b3) & Eternal Table (b4) ──
   Wide card sitting on its own row above/below the bracket. */
.b4-champ-wrap {
  display: flex;
  justify-content: center;
  margin: 0 auto 28px;
}
.b3-champ-card, .b4-champ-card {
  background: var(--card-bg);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  padding: 14px 22px 16px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(212,175,55,0.15);
  max-width: 340px;
  min-width: 240px;
  width: 100%;
}
.b3-champ-label, .b4-champ-label {
  font-size: 10px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  margin-bottom: 6px;
}
.b3-champ-name, .b4-champ-name {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: 0.03em;
  line-height: 1.15;
}
.b4-champ-score {
  color: var(--gold);
  font-weight: 800;
  margin-top: 4px;
  font-size: 13px;
  letter-spacing: 0.04em;
}

/* ── Champions card — Iron Gauntlet ──
   Now lives in .b-champ-wrap above the bracket. Wider + larger type. */
.b-champ-wrap {
  display: flex;
  justify-content: center;
  margin: 0 auto 24px;
}
.b-champ-wrap .champion-card {
  max-width: 340px;
  min-width: 220px;
  width: auto;
  padding: 16px 24px 18px;
}
.b-champ-wrap .champ-name {
  font-size: clamp(20px, 2vw, 26px);
}
.champion-card {
  width: 100%;
  background: var(--card-bg);
  border: 1px solid var(--gold);
  border-radius: 10px;
  padding: 14px 12px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(212,175,55,0.12);
}
.champ-label {
  font-size: 10px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 700;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.champ-name {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.2;
  color: var(--text);
  letter-spacing: 0.03em;
}
.champ-score {
  color: var(--gold);
  font-weight: 700;
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: 0.08em;
}

.b3-m-section, .b4-m-section { margin-bottom: 32px; }
.b3-m-champ, .b4-m-champ { margin: 0 auto; }
.b3-m-header, .b4-m-header {
  font-family: var(--font-display);
  font-size: 18px;
  text-align: center;
  margin-bottom: 12px;
  color: var(--text-dim);
}
.b3-m-match, .b4-m-match { display: flex; flex-direction: column; gap: 4px; max-width: 340px; margin: 0 auto; }
.b4-m-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.b4-m-cols .b4-m-match { max-width: none; margin: 0; }
.b4-m-cols .b4-m-match:first-child { padding-right: 16px; border-right: 1px solid rgba(255,255,255,0.12); }
.b4-m-cols .b4-m-match:last-child  { padding-left:  16px; }

#bracket3-root, #bracket4-root, #bracket-root {
  max-width: var(--max);
  margin: 0 auto;
  /* no inner padding — .section provides gutter */
}
.b4-canvas, .b3-canvas { margin: 0 auto; }

/* ── Iron Gauntlet layout — desktop ──
   Columns flex to fill the viewport; connectors are fixed-narrow; pills
   stretch to 100% of their column down to an 80px floor. Matches the
   production euchreverse.com layout. */
.bracket-scroll {
  width: 100%;
  overflow-x: auto;
  padding-bottom: 12px;
}
.bracket-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.bracket-frame .bracket {
  width: 100%;
}
.champion-card--empty {
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: none;
}
.champion-card--empty .champ-name {
  color: var(--text-dim);
}
.bracket {
  display: flex;
  align-items: flex-start;
  width: 100%;
  position: relative;
}
.bracket--has-champ {
  padding-top: 96px;
}
.bracket-half {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.bracket-half-label {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mute);
  text-align: center;
  margin-bottom: 14px;
}
.mobile-col-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
  text-align: center;
  margin-bottom: 8px;
}

.b-side {
  display: flex;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
}

.r1,
.r2,
.sf {
  display: flex;
  flex-direction: column;
  padding: 0 3px;
  flex: 1;
  min-width: 0;
}
.r1 { gap: 40px; }  /* R1 has 4 matches stacked; R2/SF are JS-positioned via .r2-slot/.sf-slot */
.r1 .team-pill,
.r2 .team-pill,
.sf .team-pill { width: 100%; min-width: 80px; }
.r1 .match,
.r2 .match,
.sf .match { width: 100%; }
.r2-slot,
.sf-slot,
.fin-slot { display: flex; align-items: center; }
.sf-slot,
.fin-slot { width: 100%; }

.fin {
  display: flex;
  flex-direction: column;
  padding: 0 3px;
  flex: 1;
  min-width: 0;
}
.fin .team-pill { width: 100%; min-width: 80px; }
.fin .match { width: 100%; }

.conn-col {
  width: 24px;
  flex-shrink: 0;
  align-self: stretch;
  position: relative;
}
.conn-col svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Clip to the conn-col bounds. Connectors should always land within
     [0, 24] on the x-axis; this ensures any rounding/stale-render artifact
     can't leak into adjacent columns. */
  overflow: hidden;
}
.match {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
}

.center-col {
  width: 10px;
  flex-shrink: 0;
}
.bracket-outer {
  position: relative;
}
.bracket-champ-float {
  position: absolute;
  z-index: 10;
  width: 180px;
  transform: translateX(-50%);
}
.bracket-champ-float .b-champ-wrap {
  margin: 0;
  width: 100%;
}
.bracket-champ-float .champion-card {
  max-width: none;
  width: 100%;
}
.bracket-champ-outer { display: none; }
.bracket-center { display: none; }
.finalist {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 7px;
  text-align: center;
  font-size: 13px;
  color: var(--text-mute);
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.finalist.filled {
  color: var(--text);
  border-color: var(--gold);
  font-style: normal;
}

/* ── Iron Gauntlet layout — mobile (two stacked halves, narrow viewports) ──
   Below the breakpoint, the desktop .bracket-scroll is hidden and we render
   .mobile-layout instead: left-half + right-half brackets stacked vertically,
   each as a mini horizontal tree (R1 | R2 | SF), mirrored on the right half. */
.mobile-layout { display: none; }
.mobile-section { margin-bottom: 32px; }
.mobile-section-label {
  font-family: var(--font-display);
  text-align: center;
  font-size: 20px;
  margin-bottom: 16px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}

.mobile-stack-matches {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.mobile-stack-matches .match {
  width: 100%;
  gap: 4px;
}
.mobile-stack-matches .team-pill { width: 100%; }

.mobile-stack-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.mobile-stack-cols .mobile-stack-matches:first-child { padding-right: 16px; border-right: 1px solid rgba(255,255,255,0.12); }
.mobile-stack-cols .mobile-stack-matches:last-child  { padding-left:  16px; }
@media (max-width: 400px) {
  .mobile-stack-cols { grid-template-columns: 1fr; }
  .mobile-stack-cols .mobile-stack-matches:first-child { padding-right: 0; border-right: none; padding-bottom: 16px; }
  .mobile-stack-cols .mobile-stack-matches:last-child  { padding-left: 0; padding-top: 16px; }
}

.mobile-half { overflow-x: auto; }
.mobile-half-inner {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  position: relative;
  min-width: 0;
}
.mobile-half-inner.mirrored { flex-direction: row; }
.mobile-half-inner .r1 {
  flex: 1 1 40%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 0 4px;
}
.mobile-half-inner .r2 {
  flex: 1 1 30%;
  position: relative;
  min-width: 0;
  padding: 0 4px;
}
.mobile-half-inner .sf {
  flex: 1 1 30%;
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 0 4px;
}
.mobile-half-inner .sf-slot { width: 100%; }
.mobile-half-inner .conn-col {
  flex: 0 0 18px;
  position: relative;
  align-self: stretch;
}
.mobile-half-inner .match {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Pills inside the mobile halves are compact but pill-name-1/pill-name-2
   keep the same size — teammates, equal visual weight, matches desktop. */
.mobile-half-inner .team-pill {
  min-height: 44px;
  padding: 8px 10px;
  gap: 8px;
  font-size: 12px;
}
.mobile-half-inner .team-pill .pill-name-1,
.mobile-half-inner .team-pill .pill-name-2 { font-size: 12px; }
.mobile-half-inner .pill-score { font-size: 12px; }

/* Breakpoint: swap desktop bracket for the stacked mobile layout. Chosen so
   each round column has ≥~140px — enough for "Firstname" / "Lastname" on two
   lines without ellipsis. Below this the mobile two-half layout is cleaner. */
@media (max-width: 1200px) {
  .bracket-champ-float { display: none; }
  .bracket-scroll { display: none; }
  .mobile-layout { display: block; }
}

/* Very narrow: drop SVG connectors; let R2 slots flow as a 3-column grid. */
@media (max-width: 560px) {
  .mobile-half-inner .conn-col { display: none; }
  .mobile-half-inner .r1 { flex: 1 1 38%; }
  .mobile-half-inner .r2 { flex: 1 1 32%; }
  .mobile-half-inner .sf { flex: 1 1 30%; }
  .mobile-half-inner .r2-slot {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    margin-top: 0;
  }
  .mobile-half-inner .team-pill {
    min-height: 40px;
    padding: 6px 8px;
    font-size: 11px;
  }
}

/* ─── Meet the Teams grid (league hub) ──────────────────────────── */

.teams-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: 20px;
  max-width: var(--max);
  margin: 0 auto;
}
@media (max-width: 640px) {
  .teams-grid { grid-template-columns: 1fr; }
}

.team-card {
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  height: 100%;
  transition: transform .15s ease, border-color .18s;
}
.team-card:hover {
  transform: translateY(-2px);
  border-color: rgba(212,175,55,0.45);
}
.team-card-img {
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}
.team-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.team-card-body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.team-card-body h3 {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 28px);
  margin: 0;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.15;
}
.team-card-body p {
  margin: 0;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.5;
}
.team-card-night {
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ─── League videos carousel (il-videos) ───────────────────────── */

.il-videos { max-width: var(--max); margin: 0 auto; }
.il-videos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.il-video-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.il-video-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  cursor: pointer;
  background: #000;
}
.il-video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.il-video-thumb .il-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.25);
  transition: background .15s;
}
.il-video-thumb:hover .il-play { background: rgba(0,0,0,0.1); }
.il-video-thumb .il-play::before {
  content: '';
  width: 0; height: 0;
  border-left: 18px solid #fff;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  margin-left: 4px;
}
.il-video-meta { padding: 12px 14px; }
.il-video-title { margin: 0; font-size: 14px; color: var(--text-dim); }

/* League-mode carousel: video on left, meta on right — unified card */
.lb-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: 0;
  align-items: stretch;
  max-width: var(--max);
  margin: 0 auto;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
/* Left cell children must fill their cell so the 16:9 aspect sizes the whole row */
.lb-layout > .il-videos-league { display: block; width: 100%; max-width: none; margin: 0; }
@media (max-width: 820px) {
  .lb-layout { grid-template-columns: 1fr; }
}

/* In league mode the inner grid stops being a grid — it's just a block
   wrapping the sized .lb-carousel. Otherwise the nested-grid auto-fit
   rule leaks through from the default .il-videos-grid and squeezes the carousel. */
.il-videos-league .il-videos-grid {
  display: block;
  width: 100%;
  padding: 0;
  gap: 0;
}

.lb-carousel {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  margin: 0;
  background: #000;
  overflow: hidden;
  display: block;
}

/* Slides are stacked; crossfade with opacity so there's no flash */
.lb-carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
}
.lb-carousel-slide.lb-active {
  opacity: 1;
  visibility: visible;
  transition: opacity .25s ease, visibility 0s linear 0s;
}
.lb-carousel-slide .il-video-thumb {
  aspect-ratio: unset;
  width: 100%;
  height: 100%;
}
.lb-carousel-slide .il-video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dots */
.lb-carousel-dots {
  position: absolute;
  bottom: 12px;
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 2;
}
.lb-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  border: 0;
  cursor: pointer;
  padding: 0;
  transition: background .15s, transform .15s;
}
.lb-dot:hover { background: rgba(255,255,255,0.7); }
.lb-dot-active { background: var(--gold); transform: scale(1.15); }

/* Meta panel on the right — lives inside the unified card */
.lb-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 28px;
  border-left: 1px solid var(--border);
}
.lb-meta .lb-eyebrow {
  color: var(--gold);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 12px;
  min-height: 1em;
}
.lb-meta .lb-division {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.12;
  margin: 0;
  min-height: 1em;
}
.lb-meta .lb-streamer {
  color: var(--text-mute);
  font-size: 15px;
  font-style: italic;
  margin: 0;
  min-height: 1em;
}
@media (max-width: 820px) {
  .lb-meta {
    text-align: center;
    align-items: center;
    padding: 20px 20px 24px;
    border-left: 0;
    border-top: 1px solid var(--border);
  }
}