/* ============================================================================
   Code World Cup 2026 — responsive knockout bracket
   ----------------------------------------------------------------------------
   Modelled on FIFA's `tournament-brackets` component:
   - ONE set of DOM nodes (stage columns + match boxes).
   - Geometry is computed in JS and handed to CSS as custom properties
     (--box-w, --box-h, --col-gap, --canvas-h, --active-index, per-box --top/--dy).
   - Desktop (>=1024px): all stages laid side-by-side, boxes sit at their
     bracket-tree Y, SVG paths connect them.
   - Small screen (<1024px): the `.track` is a carousel — translateX slides
     one stage into view, and each box translateY's to re-center for the
     narrow column. A scrollable pill rail picks the active stage.
   ========================================================================== */

:root {
  --bg:          #020f2a;
  --bg-alt:      #0a1c3f;
  --box:         #0e2350;
  --box-2:       #12294f;
  --border-low:  #24386b;
  --border-mid:  #35508f;
  --text:        #eaf0ff;
  --text-dim:    #9fb0d6;
  --accent:      #36d399; /* winner / active connector  */
  --accent-2:    #4f9bff;
  --loser:       #5c6b8f;

  /* Geometry — overwritten per breakpoint by app.js */
  --box-w: 240px;
  --box-h: 86px;
  --vs-gap: 8px;
  --col-gap: 72px;
  --canvas-h: 560px;
  --active-index: 0;
  --anim-ms: 420ms;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 50% -10%, #103063 0%, transparent 60%),
    var(--bg);
  color: var(--text);
  font-family: "Poppins", "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Page chrome -------------------------------------------------- */
.page-head { padding: 2.5rem 1rem 0.5rem; }
.page-head__inner { max-width: 1180px; margin: 0 auto; text-align: center; }
.page-head__kicker {
  display: inline-block;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .72rem;
  color: var(--accent);
  border: 1px solid var(--border-mid);
  border-radius: 100px;
  padding: .3rem .8rem;
  margin-bottom: .9rem;
}
.page-head__title { margin: 0; font-size: clamp(1.8rem, 5vw, 3rem); font-weight: 600; line-height: 1.05; }
.page-head__title span { color: var(--accent); }
.page-head__sub { color: var(--text-dim); max-width: 640px; margin: .8rem auto 0; font-size: .95rem; line-height: 1.5; }
.page-head__sub strong { color: var(--text); }

.page-foot {
  text-align: center;
  color: var(--text-dim);
  font-size: .8rem;
  padding: 1.5rem 1rem 2.5rem;
  line-height: 1.6;
}
.page-foot code { color: var(--accent-2); }

.bracket-view { max-width: 1180px; margin: 0 auto; padding: 1.5rem 1rem 0; }

.hint { text-align: center; color: var(--text-dim); font-size: .82rem; margin: 1rem 0 0; min-height: 1.2em; }

/* ---------- Stage selector rail (mobile) -------------------------------- */
.rail {
  display: none; /* shown < 1024px */
  gap: .5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: .25rem .25rem 1rem;
  margin: 0 0 .25rem;
  scroll-snap-type: x proximity;
}
.rail::-webkit-scrollbar { display: none; }
.rail__btn {
  flex: 0 0 auto;
  scroll-snap-align: center;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  height: 2.5rem;
  min-width: 6rem;
  padding: 0 1rem;
  border-radius: 100px;
  border: 2px solid var(--border-low);
  background: var(--bg-alt);
  color: var(--text-dim);
  font: inherit;
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.rail__btn .dot {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--border-mid);
  transition: background .2s;
}
.rail__btn[aria-selected="true"] {
  color: var(--text);
  border-color: var(--accent);
  background: #0b2a3f;
}
.rail__btn[aria-selected="true"] .dot { background: var(--accent); }

/* ---------- The clipping window ----------------------------------------- */
.cols-outer {
  position: relative;
  overflow-x: clip;       /* small screens: hide off-stage columns          */
  overflow-y: visible;
}

/* The sliding row of stage columns */
.track {
  display: inline-flex;
  gap: var(--col-gap);
  position: relative;
  min-height: var(--canvas-h);
  transition: transform var(--anim-ms) var(--ease);
  will-change: transform;
}
.track.no-anim { transition: none !important; }

/* One stage = one column */
.column {
  position: relative;
  flex: 0 0 auto;
  width: var(--box-w);
  height: var(--canvas-h);
}
.column__label {
  position: absolute;
  top: -1.9rem; left: 0; right: 0;
  text-align: center;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ---------- A match box ------------------------------------------------- */
.box {
  position: absolute;
  left: 0;
  top: var(--top);
  width: var(--box-w);
  height: var(--box-h);
  transform: translateY(0);
  transition: transform var(--anim-ms) var(--ease);
  will-change: transform;
}
/* A match = two stacked team boxes + the "]" bracket that pairs them */
.match {
  display: flex;
  align-items: center;
  width: var(--box-w);
  height: var(--box-h);
}
.match__teams {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--vs-gap, 8px);
}

/* one team = one box */
.team {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: 0 .65rem;
  background: linear-gradient(180deg, var(--box) 0%, var(--box-2) 100%);
  border: 1px solid var(--border-low);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
  font-size: .9rem;
}
.team.win  { color: var(--text); font-weight: 600; border-color: var(--border-mid); }
.team.lose { color: var(--loser); }

/* The connector that gives the "vs" feeling: a "]" bracket whose top and
   bottom caps land on the two team-box centres, joining them into one match. */
.match__bracket {
  position: relative;
  flex: 0 0 14px;
  width: 14px;
  align-self: center;
  /* span = centre of top box → centre of bottom box = 50% + half the gap */
  height: calc(50% + var(--vs-gap, 8px) / 2);
  border: 1.5px solid var(--border-mid);
  border-left: none;
  border-top-right-radius: 9px;
  border-bottom-right-radius: 9px;
}

.crest {
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  flex: 0 0 auto;
  display: grid; place-items: center;
  font-size: .68rem; font-weight: 700; color: #04101f;
}
.match__name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.match__score {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  min-width: 1.2rem;
  text-align: center;
}
.team.win .match__score { color: var(--accent); }

/* champion */
.match.champion .team.win {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 10px 26px rgba(54, 211, 153, .25);
}
.match.champion .match__bracket { border-color: var(--accent); }

/* ---------- SVG connectors (desktop only) ------------------------------- */
.connectors {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.connectors path {
  fill: none;
  stroke: var(--border-mid);
  stroke-width: 1.5;
}
.connectors path.active {
  stroke: var(--accent);
  stroke-width: 2.5;
  transition: stroke .3s ease, stroke-width .3s ease;
}

/* ===========================================================================
   BREAKPOINT — this single line is the whole "collapse" trick.
   Below 1024px we swap from "all stages visible tree" to "one-stage carousel".
   =========================================================================== */
@media (max-width: 1023px) {
  .rail { display: flex; }

  .connectors { display: none; }       /* one stage on screen → no joins   */

  /* Slide the track so the active stage fills the viewport */
  .track {
    transform: translateX(
      calc(var(--active-index) * -1 * (var(--box-w) + var(--col-gap)))
    );
  }

  /* Re-center each match in its now full-width column */
  .box { transform: translateY(var(--dy, 0px)); }

  /* keep the "]" bracket off the clipped right edge */
  .match { width: calc(var(--box-w) - 10px); }

  .column__label { display: none; }    /* the pill rail already labels it  */
}

/* On wide screens the track never translates and boxes keep their tree-Y */
@media (min-width: 1024px) {
  .track { transform: none !important; }
  .box   { transform: translateY(0) !important; }
}