/* ============================================================================
   KNOCKOUT BRACKET — visual tournament bracket for edition detail pages
   ============================================================================
   Grid layout: [left half] [center/final] [right half]
   Left flows L→R toward center, right flows R→L (mirrored).
   Connecting lines via pseudo-elements on round columns.
   ============================================================================ */

.kb-bracket {
  --kb-match-w: 148px;
  --kb-gap-h: 2rem;     /* horizontal gap between rounds */
  --kb-gap-v: 0.4rem;   /* vertical gap between matches */
  --kb-line: var(--hi-border-lit, rgba(255,255,255,0.12));
  --kb-accent: var(--hi-accent, #e9c46a);

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0;
  margin: 1rem 0 2rem;
  overflow-x: auto;
  padding: 0.5rem 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.kb-bracket::-webkit-scrollbar { display: none; }

/* ===== HALVES ===== */
.kb-half {
  display: flex;
  align-items: center;
}
.kb-left { justify-content: flex-end; }
.kb-right { justify-content: flex-start; }

/* Each round is a vertical column of matches */
.kb-round {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: var(--kb-gap-v);
  padding: 0 calc(var(--kb-gap-h) / 2);
  position: relative;
}

/* ===== CENTER (Final + 3rd place) ===== */
.kb-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 0 1rem;
  min-width: calc(var(--kb-match-w) + 2rem);
}
.kb-final-label {
  font-size: 0.5rem;
  font-weight: 900;
  color: var(--kb-accent);
  text-transform: uppercase;
  letter-spacing: 2.5px;
  margin-bottom: 0.2rem;
}
.kb-third-label {
  font-size: 0.42rem;
  font-weight: 700;
  color: var(--hi-text-dim, rgba(255,255,255,0.3));
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-top: 0.5rem;
}

/* ===== MATCH CARD ===== */
.kb-match {
  width: var(--kb-match-w);
  background: var(--hi-surface, #1a1f2e);
  border: 1px solid var(--hi-border, rgba(255,255,255,0.06));
  border-radius: 6px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
  position: relative;
}
.kb-match:hover {
  border-color: color-mix(in srgb, var(--kb-accent) 30%, transparent);
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

.kb-match-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Team row inside match card */
.kb-team {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3.5px 7px;
  font-size: 0.65rem;
  transition: background 0.15s;
}
.kb-team + .kb-team {
  border-top: 1px solid var(--hi-border, rgba(255,255,255,0.06));
}

/* Winner highlight */
.kb-winner {
  background: color-mix(in srgb, var(--kb-accent) 8%, transparent);
}
.kb-winner .kb-code {
  color: var(--kb-accent);
  font-weight: 800;
}

/* Flag — rectangular variant (hidden when badge is present) */
.kb-flag {
  width: 17px;
  height: 12px;
  border-radius: 1.5px;
  object-fit: cover;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
  flex-shrink: 0;
}

/* Country badge — uses chess badge structure with silhouette shape */
.kb-badge {
  flex-shrink: 0;
  display: inline-flex;
}
/* Size the wrapper to fit in the match row */
.kb-badge .country-badge-wrapper.badge-xs {
  width: 24px;
  height: 24px;
}
.kb-badge .country-badge.badge-xs {
  width: 20px;
  height: 20px;
}
.kb-badge .country-badge-glass.badge-xs {
  width: 20px;
  height: 20px;
}
/* When badge is present, hide the rectangular flag */
.kb-team:has(.kb-badge) .kb-flag { display: none; }

/* Team code */
.kb-code {
  font-weight: 700;
  color: var(--hi-text, #f0f0f0);
  min-width: 28px;
  font-size: 0.62rem;
  letter-spacing: 0.3px;
}
.kb-slot {
  color: var(--hi-accent, #e9c46a);
  font-size: 0.52rem;
  font-weight: 800;
  opacity: 0.75;
  letter-spacing: 0.5px;
}

/* Score */
.kb-score {
  margin-left: auto;
  font-weight: 900;
  font-size: 0.62rem;
  font-variant-numeric: tabular-nums;
  color: var(--hi-text, #f0f0f0);
  min-width: 12px;
  text-align: right;
}

/* Penalty badge */
.kb-pens {
  font-size: 0.48rem;
  font-weight: 700;
  color: var(--hi-text-sec, #9ca3af);
  text-align: center;
  padding: 1px 0;
  background: rgba(0,0,0,0.15);
  border-top: 1px solid var(--hi-border, rgba(255,255,255,0.06));
  letter-spacing: 0.3px;
}

/* ===== CONNECTING LINES ===== */
/* Horizontal connector from match to next round */
.kb-left .kb-round:not(:last-child) .kb-match::after {
  content: '';
  position: absolute;
  top: 50%;
  right: calc(-1 * var(--kb-gap-h) / 2);
  width: calc(var(--kb-gap-h) / 2);
  height: 1px;
  background: var(--kb-line);
  pointer-events: none;
}
.kb-right .kb-round:not(:first-child) .kb-match::after {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(-1 * var(--kb-gap-h) / 2);
  width: calc(var(--kb-gap-h) / 2);
  height: 1px;
  background: var(--kb-line);
  pointer-events: none;
}

/* Vertical merge lines between match pairs */
.kb-left .kb-round:not(:last-child) .kb-match:nth-child(odd)::before {
  content: '';
  position: absolute;
  top: 50%;
  right: calc(-1 * var(--kb-gap-h) / 2);
  height: calc(100% + var(--kb-gap-v));
  width: 1px;
  background: var(--kb-line);
  pointer-events: none;
}
.kb-right .kb-round:not(:first-child) .kb-match:nth-child(odd)::before {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(-1 * var(--kb-gap-h) / 2);
  height: calc(100% + var(--kb-gap-v));
  width: 1px;
  background: var(--kb-line);
  pointer-events: none;
}

/* ===== FINAL MATCH — slightly larger ===== */
.kb-center .kb-match {
  width: calc(var(--kb-match-w) + 10px);
}
.kb-center .kb-match.kb-match-final {
  border-color: color-mix(in srgb, var(--kb-accent) 25%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--kb-accent) 10%, transparent);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .kb-bracket {
    --kb-match-w: 128px;
    --kb-gap-h: 1.2rem;
    font-size: 0.9em;
  }
}
/* ============================================================
   Mobile bracket — keep desktop horizontal grid, scale down,
   and make touch-scrollable. Finger-drag left/right to navigate.
   ============================================================ */
@media (max-width: 768px) {
  .kb-bracket {
    --kb-match-w: 115px;
    --kb-gap-h: 1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.5rem 1rem;
    margin: 0.6rem 0 1.4rem;
    font-size: 0.85em;
  }

  /* final_only — already centered, just cap width on mobile. */
  .kb-bracket--final_only .kb-match-final {
    max-width: 300px;
  }
}

/* Winner score gets accent color too */
.kb-winner .kb-score {
  color: var(--kb-accent);
}

/* Penalty badge — winner team's side gets a subtle accent */
.kb-pens {
  font-variant-numeric: tabular-nums;
}

/* Smooth scroll behavior for the bracket */
.kb-bracket {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  .kb-match { transition: none; }
  .kb-bracket { scroll-behavior: auto; }
}

/* ===== MATCH-DETAIL CONTEXT — faded / empty / current states ===== */
/* Used when the bracket is shown inside a match detail qualifying tab. */

/* Faded rounds (earlier stages already played) */
.kb-vis-faded .kb-match,
.kb-match.kb-vis-faded {
  opacity: 0.35;
  filter: saturate(0.3);
}
.kb-vis-faded .kb-match:hover,
.kb-match.kb-vis-faded:hover {
  opacity: 0.55;
  filter: saturate(0.5);
}

/* Empty placeholders (later stages not yet played) */
.kb-vis-empty .kb-match,
.kb-match.kb-vis-empty,
.kb-placeholder {
  opacity: 0.2;
  pointer-events: none;
}
.kb-placeholder .kb-match-link {
  cursor: var(--cur-default, default);
}
.kb-placeholder .kb-code {
  color: var(--hi-text-dim, rgba(255,255,255,0.2));
  font-weight: 400;
}

/* Current match highlight */
.kb-match.kb-current {
  border-color: var(--kb-accent, var(--hi-accent, #e9c46a));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--kb-accent, var(--hi-accent, #e9c46a)) 40%, transparent),
    0 0 8px color-mix(in srgb, var(--kb-accent, var(--hi-accent, #e9c46a)) 20%, transparent);
}

/* Faded round labels */
.kb-vis-empty .kb-final-label,
.kb-vis-empty .kb-third-label {
  opacity: 0.2;
}

/* ============================================================
   Active-stage highlight — used when arriving from a match_detail
   qualifying-tab link like ?view=knockout&stage=Quarter-finals.
   The matched round / final / third-place is emphasized while the
   rest of the bracket fades back so the user immediately sees the
   stage they clicked through to.
   ============================================================ */

/* When ANY round is flagged active, gently fade the non-active siblings
   so the active column reads as the focus. The match cards inside the
   active column get a stronger gold accent. */
.kb-bracket--has-active .kb-half .kb-round:not(.kb-round--active),
.kb-bracket--has-active .kb-center:not(:has(.kb-final-active)):not(:has(.kb-third-active)) {
  opacity: 0.55;
  filter: saturate(0.85);
  transition: opacity 0.25s ease, filter 0.25s ease;
}

.kb-round--active {
  position: relative;
  /* Faint backplate so the active column visually pops out of the row */
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--kb-accent, var(--hi-accent, #e9c46a)) 10%, transparent) 0%,
    transparent 70%
  );
  border-radius: 12px;
  animation: kbRoundActivePulse 2.4s ease-in-out infinite;
}

.kb-round--active .kb-match {
  border-color: color-mix(in srgb, var(--kb-accent, var(--hi-accent, #e9c46a)) 55%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--kb-accent, var(--hi-accent, #e9c46a)) 35%, transparent),
    0 0 14px color-mix(in srgb, var(--kb-accent, var(--hi-accent, #e9c46a)) 22%, transparent);
}

/* Final / third-place active variants — the center column doesn't live
   inside .kb-half, so it needs its own hooks. */
.kb-final-active {
  border-color: color-mix(in srgb, var(--kb-accent, var(--hi-accent, #e9c46a)) 70%, transparent) !important;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--kb-accent, var(--hi-accent, #e9c46a)) 45%, transparent),
    0 0 22px color-mix(in srgb, var(--kb-accent, var(--hi-accent, #e9c46a)) 30%, transparent) !important;
  animation: kbRoundActivePulse 2.4s ease-in-out infinite;
}
.kb-third-active {
  border-color: color-mix(in srgb, var(--kb-accent, var(--hi-accent, #e9c46a)) 60%, transparent) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--kb-accent, var(--hi-accent, #e9c46a)) 40%, transparent),
    0 0 16px color-mix(in srgb, var(--kb-accent, var(--hi-accent, #e9c46a)) 25%, transparent) !important;
  animation: kbRoundActivePulse 2.4s ease-in-out infinite;
}
.kb-final-label--active,
.kb-third-label--active {
  color: var(--kb-accent, var(--hi-accent, #e9c46a));
  text-shadow: 0 0 8px color-mix(in srgb, var(--kb-accent, var(--hi-accent, #e9c46a)) 50%, transparent);
}

/* Fallback list view (1950 final round, etc.) — highlight the matched
   stage card the same way the bracket round is highlighted. */
.kb-block-active {
  border-color: color-mix(in srgb, var(--kb-accent, var(--hi-accent, #e9c46a)) 55%, transparent) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--kb-accent, var(--hi-accent, #e9c46a)) 35%, transparent),
    0 0 16px color-mix(in srgb, var(--kb-accent, var(--hi-accent, #e9c46a)) 22%, transparent) !important;
}
.kb-block-active .card-header {
  color: var(--kb-accent, var(--hi-accent, #e9c46a));
}

@keyframes kbRoundActivePulse {
  0%, 100% {
    filter: drop-shadow(0 0 0 transparent);
  }
  50% {
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--kb-accent, var(--hi-accent, #e9c46a)) 22%, transparent));
  }
}

@media (prefers-reduced-motion: reduce) {
  .kb-round--active,
  .kb-final-active,
  .kb-third-active {
    animation: none;
  }
}

/* ============================================================
   r32 format — used by the 2026+ World Cup (48 teams → 32-team
   knockout). Four rounds per side (R32 → R16 → QF → SF) plus
   the centre Final + 3rd-place. The default match width and
   gap would push the bracket way past the viewport, so we
   compress both — the match cards are still legible at this
   size and the horizontal scroll fallback (already on the
   parent .kb-bracket) catches anything that overflows.
   ============================================================ */
.kb-bracket--r32 {
  --kb-match-w: 116px;
  --kb-gap-h: 1.1rem;
  --kb-gap-v: 0.25rem;
}
.kb-bracket--r32 .kb-team {
  font-size: 0.58rem;
  padding: 2.5px 5px;
  gap: 4px;
}
.kb-bracket--r32 .kb-flag {
  width: 14px;
  height: 10px;
}
.kb-bracket--r32 .kb-pens {
  font-size: 0.5rem;
}
.kb-bracket--r32 .kb-final-label {
  font-size: 0.45rem;
  letter-spacing: 1.8px;
}
.kb-bracket--r32 .kb-third-label {
  font-size: 0.38rem;
  letter-spacing: 1.2px;
}
.kb-bracket--r32 .kb-center {
  min-width: calc(var(--kb-match-w) + 1rem);
  padding: 0 0.5rem;
}
/* QF + SF columns need to stretch so space-around can distribute
   their 1-2 matches across the full bracket height. */
.kb-bracket--r32 .kb-round--qf,
.kb-bracket--r32 .kb-round--sf {
  align-self: stretch;
}

/* ============================================================
   final_only format — used by 1974/1978 where the second group
   stage winners advance straight to the final. The bracket
   collapses to a single centered Final card (plus optional 3rd
   place), with a dashed "feed" caption above explaining where
   the finalists came from.
   ============================================================ */
.kb-bracket--final_only {
  /* Override the default 3-col grid: only the center column exists.
     Single auto column, centered horizontally on the page. */
  grid-template-columns: auto;
  justify-content: center;
  padding: 1.2rem 0 1.6rem;
  gap: 0.4rem;
}

.kb-bracket--final_only .kb-center {
  /* Slightly wider final card so the centered layout doesn't feel
     stranded. */
  --kb-match-w: 200px;
  padding: 0;
  gap: 1.4rem;
}

.kb-bracket--final_only .kb-match-final {
  width: 200px;
}

.kb-bracket--final_only .kb-match-final .kb-team {
  font-size: 0.78rem;
  padding: 6px 10px;
}

.kb-bracket--final_only .kb-final-label {
  font-size: 0.6rem;
  letter-spacing: 3px;
}

/* "Second Group Stage winners" caption above the centered final */
.kb-final-only-feed {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  margin: 0 auto 0.4rem;
  max-width: 360px;
  color: var(--bl-teal, #2a9d8f);
  font-size: 0.55rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  opacity: 0.85;
}
.kb-final-only-feed-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--bl-teal, #2a9d8f) 55%, transparent),
    transparent
  );
}
.kb-final-only-feed-text {
  white-space: nowrap;
}