/* World Cup 2026 — Road to the Cup. Radial knockout bracket.
 * Design language: a pitch at night under floodlights. GOLD = still alive. */

:root {
  --pitch-0: #06120d;   /* deepest turf-black */
  --pitch-1: #0a1b13;   /* mid pitch */
  --pitch-2: #0f271c;   /* raised panel */
  --line: rgba(240, 255, 246, 0.06); /* faint pitch markings */

  --text: #eef6f0;
  --muted: #8aa596;

  --gold: #f6c445;      /* the trophy path — advancing / winners */
  --gold-soft: #ffe08a;
  --gold-deep: #caa02f;

  --live: #ff6a3d;      /* floodlight amber-red */
  --out: #3a4f45;       /* eliminated slate */
  --pending: #4a6357;   /* undecided feed */

  --font-display: "Anton", system-ui, sans-serif;
  --font-ui: "Barlow Condensed", system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 1.5rem 1rem 3rem;
  color: var(--text);
  font-family: var(--font-ui);
  text-align: center;
  background:
    radial-gradient(120% 90% at 50% -10%, #12362450 0%, transparent 55%),
    radial-gradient(90% 70% at 50% 120%, #0c2c1e60 0%, transparent 60%),
    var(--pitch-0);
  min-height: 100vh;
}

/* ------------------------------- header ------------------------------- */

header {
  max-width: 680px;
  margin: 0 auto 0.5rem;
}

.eyebrow {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-soft);
  font-weight: 600;
}

header h1 {
  margin: 0.15rem 0 0.1rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 8vw, 3.6rem);
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #ffffff 0%, #dfece4 55%, #9fc0ac 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 30px rgba(246, 196, 69, 0.12);
}

.subtitle {
  margin: 0.1rem 0 0.9rem;
  font-size: 1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Live/updated status pill. */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
  margin: 0 auto 0.5rem;
  padding: 0.28rem 0.85rem;
  border-radius: 999px;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}
.status--ok { color: #7fd1b0; }
.status--error { color: #ff8f7a; }
.status--live {
  color: var(--live);
  border-color: rgba(255, 106, 61, 0.45);
  background: rgba(255, 106, 61, 0.1);
  font-weight: 600;
}
.status--live::before { animation: blink 1.1s ease-in-out infinite; }

@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* ------------------------------- bracket ------------------------------- */

main {
  max-width: 620px;
  margin: 0.5rem auto 0;
}

#bracket {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.pitch-glow {
  fill: radial-gradient(#000, #000); /* fallback ignored; use presentation attr */
  fill: #0c2419;
  opacity: 0.55;
}

/* Faint concentric "orbit" guides — the only geometry left visible. */
.orbit {
  fill: none;
  stroke: var(--line);
  stroke-width: 1;
}

/* --------------------------- connectors --------------------------- */

.connector {
  stroke-linecap: round;
  transition: stroke 0.3s ease;
}
.connector--pending {
  stroke: var(--pending);
  stroke-width: 1.4;
  opacity: 0.5;
  stroke-dasharray: 3 4;
}
.connector--out {
  stroke: var(--out);
  stroke-width: 1.4;
  opacity: 0.45;
}
.connector--win {
  stroke: var(--gold);
  stroke-width: 2.6;
  opacity: 0.95;
  filter: drop-shadow(0 0 4px rgba(246, 196, 69, 0.55));
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  animation: draw-in 0.9s ease-out both;
}

.connector--live-feed {
  stroke: var(--live);
  stroke-width: 1.4;
  opacity: 0.55;
  stroke-dasharray: 3 4;
}

@keyframes draw-in {
  from { stroke-dashoffset: 1; opacity: 0; }
  to { stroke-dashoffset: 0; opacity: 0.95; }
}

/* ------------------------------ nodes ------------------------------ */

.node .chip {
  fill: var(--pitch-2);
  stroke: rgba(255, 255, 255, 0.14);
  stroke-width: 1.5;
  transition: stroke 0.3s ease, fill 0.3s ease;
}
.node .flag {
  clip-path: circle(50%);
  transition: opacity 0.3s ease, filter 0.3s ease;
}
.node-code {
  fill: var(--text);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-anchor: middle;
  dominant-baseline: middle;
  paint-order: stroke;
  stroke: var(--pitch-0);
  stroke-width: 2.5px;
}
.score-bg {
  fill: var(--pitch-0);
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 1;
}
.node-score {
  fill: var(--text);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 11px;
  text-anchor: middle;
  dominant-baseline: central;
}

/* Empty / TBD slots recede. */
.node--empty .chip,
.node--upcoming .chip {
  fill: rgba(255, 255, 255, 0.03);
  stroke: rgba(255, 255, 255, 0.08);
}
.node--empty .node-code { opacity: 0; }
.node--upcoming .flag { opacity: 0.85; }
.node--upcoming .node-code { fill: var(--muted); }

/* Winner — the emotional core. Gold ring, glow, full-strength flag. */
.node--winner .chip {
  fill: rgba(246, 196, 69, 0.12);
  stroke: var(--gold);
  stroke-width: 2.5;
  filter: drop-shadow(0 0 6px rgba(246, 196, 69, 0.5));
}
.node--winner .node-code { fill: var(--gold-soft); }
.node--winner .score-bg { stroke: var(--gold-deep); }
.node--winner .node-score { fill: var(--gold-soft); }

/* Eliminated — desaturated and dimmed. */
.node--out .chip {
  fill: rgba(58, 79, 69, 0.35);
  stroke: var(--out);
}
.node--out .flag { filter: grayscale(1); opacity: 0.4; }
.node--out .node-code { fill: var(--muted); opacity: 0.7; }
.node--out .node-score { fill: var(--muted); }
.node--out .score-bg { opacity: 0.6 !important; }

/* Live — floodlight amber pulse. */
.node--live .chip {
  fill: rgba(255, 106, 61, 0.16);
  stroke: var(--live);
  stroke-width: 2.5;
  animation: pulse 1.4s ease-in-out infinite;
}
.node--live .node-code { fill: #ffb39c; }
.node--live .node-score { fill: #ffb39c; }

@keyframes pulse {
  0%, 100% { stroke-opacity: 1; }
  50% { stroke-opacity: 0.4; }
}

/* ----------------------------- champion ----------------------------- */

.champ-halo {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.5;
  opacity: 0.35;
}
.champ-disc {
  fill: url(#champGrad);
  fill: #12271d;
  stroke: var(--gold);
  stroke-width: 2;
}
.champ-flag { clip-path: circle(48%); }
.champ-icon {
  font-size: 26px;
  text-anchor: middle;
  dominant-baseline: middle;
}
.champ-name {
  fill: var(--gold-soft);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-anchor: middle;
  dominant-baseline: middle;
}

.champion--crowned .champ-disc {
  filter: drop-shadow(0 0 14px rgba(246, 196, 69, 0.7));
  fill: rgba(246, 196, 69, 0.14);
}
.champion--crowned .champ-halo {
  opacity: 0.8;
  animation: crown-pulse 2s ease-in-out infinite;
}
.champion--crowned .champ-icon { font-size: 20px; }
.champion--tbd .champ-name { fill: var(--muted); }

@keyframes crown-pulse {
  0%, 100% { r: 50; opacity: 0.7; }
  50% { r: 56; opacity: 0.2; }
}

/* ------------------------------- legend ------------------------------- */

.legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  padding: 0;
  margin: 1.75rem auto 0;
  max-width: 620px;
}
.legend li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.32rem 0.8rem;
  border-radius: 999px;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.swatch {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}
.swatch--winner { background: var(--gold); box-shadow: 0 0 6px rgba(246, 196, 69, 0.6); }
.swatch--live { background: var(--live); }
.swatch--out { background: var(--out); }
.swatch--upcoming { background: rgba(255, 255, 255, 0.14); }

@media (prefers-reduced-motion: reduce) {
  .connector--win,
  .node--live .chip,
  .champion--crowned .champ-halo,
  .status--live::before { animation: none; }
  .connector--win { stroke-dashoffset: 0; opacity: 0.95; }
}