/* cup.php — resultatside pr. cup. Genbruger style.css's farvevariabler/fonte og samme
   visuelle sprog som resten af sitet (rene lister med tynde skillelinjer i stedet for
   ensartede ikon-kort, "billet"-kort-stilen fra forsidens tidslinje til kampene, samme
   guld/sølv/bronze-badge som spillerprofilens cup-historik). */

.cup-notfound { text-align: center; padding: 60px 20px; }
.cup-notfound .muted { margin: 10px 0 20px; }

.cup-meta-line {
  display: flex; align-items: center; gap: 8px; margin-top: 6px;
  font-size: 13px; font-weight: 600; color: var(--ink-2);
}
.cup-meta-dot { color: var(--line-med); }

/* Slutstilling — ren liste, ikke kort, samme princip som .vb-stats/.vb-wof-meta-row */
.cup-standings { display: flex; flex-direction: column; margin-top: 20px; }
.cup-standing-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 4px; border-bottom: 1px solid var(--line-soft);
}
.cup-standing-row:last-child { border-bottom: none; }
.cup-standing-team { font-weight: 700; font-size: 15px; color: var(--ink); }
/* Holdnavnet farves efter placering, samme familie som badgen ved siden af — ikke kun
   badgen der skifter farve mens navnet altid ser ens (mørkt) ud uanset 1./2./3. plads. Lidt
   mørkere/mættede nuancer end selve badge-baggrundene, så teksten er læsbar på den lyse side. */
.cup-standing-row-gold   .cup-standing-team { color: #B8860B; }
.cup-standing-row-silver .cup-standing-team { color: #6B7684; }
.cup-standing-row-bronze .cup-standing-team { color: #8B5A2B; }

.cup-tag { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.cup-tag-gold    { background: #E8A020; color: #fff; }
.cup-tag-silver  { background: #9EA8B3; color: #fff; }
.cup-tag-bronze  { background: #A0714F; color: #fff; }
.cup-tag-neutral { background: var(--bg-cream); color: var(--ink-3); }

/* Cup-stats — samme "ticker"-udtryk (tynde lodrette streger, ingen kort/ikoner) som
   forsidens .vb-stats, i stedet for endnu et grid af ens ikon-kort. */
.cup-stats { display: flex; flex-wrap: wrap; margin-top: 22px; }
.cup-stat {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px;
  padding: 0 18px; border-left: 1px solid var(--line-soft); flex: 1 1 0; min-width: 80px;
}
.cup-stat:first-child { border-left: none; padding-left: 0; }
.cup-stat .v { font-weight: 900; font-size: 24px; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.cup-stat .k {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3);
}

/* Podie — bogstaveligt podie-udtryk: hold-navnet "står" ovenpå en massiv, farvet blok (1./2./3.
   plads), ligesom en fysisk sejrspodie, i stedet for tre ens infokort. Blokken viser rangtallet
   og har en fast, tydeligt forskellig højde pr. plads (guld højst) for trin-silhuetten. Sidder
   OVER selve brackets (kun top 3), holdt smalt/kompakt. Resten af slutstillingen (4. plads og
   nedefter) vises som en almindelig liste under brackets. */
.cup-podium-section { max-width: 720px; margin-left: auto; margin-right: auto; }
.cup-podium { display: flex; align-items: flex-end; gap: 10px; }
.cup-podium-card { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; }
.cup-podium-label {
  font-family: var(--mono); font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-3);
}
.cup-podium-team { font-weight: 800; font-size: 13px; color: var(--ink); margin-bottom: 6px; }
.cup-podium-gold .cup-podium-team { font-size: 15px; color: #B8860B; }
.cup-podium-silver .cup-podium-team { color: #6B7684; }
.cup-podium-bronze .cup-podium-team { color: #8B5A2B; }

/* Selve "blokken" — massiv farve, kun rangtallet, centreret. Fast, forskellig højde pr. plads
   giver trin-siluetten. Ingen indhold der kan vokse/klippes, så højden er altid præcis. */
.cup-podium-block {
  width: 100%; box-sizing: border-box; border-radius: 10px 10px 4px 4px;
  display: flex; align-items: center; justify-content: center;
}
.cup-podium-block::before {
  content: attr(data-rank); font-family: var(--mono); font-weight: 900; line-height: 1;
  color: rgba(255,255,255,0.75);
}
.cup-podium-gold   .cup-podium-block { background: #E8A020; height: 76px; box-shadow: 0 6px 16px -8px rgba(232,160,32,0.55); }
.cup-podium-silver .cup-podium-block { background: #9EA8B3; height: 52px; box-shadow: 0 6px 16px -8px rgba(158,168,179,0.5); }
.cup-podium-bronze .cup-podium-block { background: #A0714F; height: 34px; box-shadow: 0 6px 16px -8px rgba(160,113,79,0.5); }
.cup-podium-gold   .cup-podium-block::before { font-size: 30px; }
.cup-podium-silver .cup-podium-block::before { font-size: 24px; }
.cup-podium-bronze .cup-podium-block::before { font-size: 17px; }

/* Delt 3. plads (ingen bronzekamp) — stadig ÉT podie-trin/kasse med ét rangtal, men de to holds
   navne står side om side ovenpå, i stedet for to selvstændige kasser. */
.cup-podium-split-names { display: flex; width: 100%; gap: 8px; }
.cup-podium-split-name { flex: 1 1 0; min-width: 0; }
.cup-podium-split-name .cup-podium-team { font-size: 11.5px; }

@media (max-width: 560px) {
  .cup-podium { flex-wrap: wrap; }
  .cup-podium-card { flex: 1 1 45%; }
  .cup-podium-gold { flex: 1 1 100%; order: -1; }
  .cup-podium-split-names { flex-direction: column; gap: 4px; }
  /* 6 stats ville ellers ombryde til to rækker med kun ÉN streg-nulstilling (den allerførste),
     så tredje/fjerde stat fik en overflødig venstre-streg midt i den nye række. */
  .cup-stat { flex: 1 1 33%; min-width: 0; }
  .cup-stat:nth-child(3n+1) { border-left: none; padding-left: 0; }
  .cup-stat:not(:nth-child(3n+1)) { border-left: 1px solid var(--line-soft); padding-left: 18px; }
}

/* Kampe, grupperet pr. runde */
.cup-rounds { display: flex; flex-direction: column; gap: 28px; margin-top: 20px; }
.cup-round-lbl {
  font-family: var(--mono); font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--ink-3); margin-bottom: 10px;
}
.cup-round-matches { display: flex; flex-direction: column; gap: 10px; }

/* Samme "billet"-kort-udtryk som forsidens tidslinje (.vb-tl-row) — cremefarvet, afrundede
   hjørner, ingen skygge. Finalen får samme mørke fremhævning som tidslinjens featured-kort. */
.cup-match {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  background: var(--bg-cream); border-radius: 16px; padding: 16px 20px;
}
.cup-match-final { background: var(--ink); color: #fff; }

.cup-match-teams { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cup-match-team { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cup-match-team-label { display: inline-flex; align-items: center; gap: 4px; }
.cup-match-team-name { font-weight: 700; font-size: 14px; color: var(--ink-2); }
.cup-match-final .cup-match-team-name { color: rgba(255,255,255,0.55); }
.cup-match-team.won .cup-match-team-name { color: var(--ink); }
.cup-match-final .cup-match-team.won .cup-match-team-name { color: #fff; }
.cup-match-win-mark { color: var(--sage); font-weight: 900; }
.cup-trophy-ico { color: #E8A020; flex-shrink: 0; }

.cup-match-top { display: inline-flex; align-items: baseline; gap: 5px; font-size: 12px; color: var(--ink-3); }
.cup-match-final .cup-match-top { color: rgba(255,255,255,0.45); }
.cup-match-top a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cup-match-top-kills { font-family: var(--mono); font-size: 10px; }

.cup-match-meta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.cup-match-score {
  font-weight: 900; font-size: 20px; letter-spacing: -0.02em; color: var(--coral);
  font-variant-numeric: tabular-nums;
}
.cup-match-map {
  font-family: var(--mono); font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-3);
}
.cup-match-final .cup-match-map { color: rgba(255,255,255,0.5); }

@media (max-width: 640px) {
  .cup-match { padding: 14px 16px; }
  .cup-match-meta { width: 100%; justify-content: space-between; }
}

/* Bracket-visning (kun Single Elimination med >1 runde, se cup.php's $isBracket) — to-sidet:
   venstre halvdel af trækket vokser mod højre, højre halvdel vokser mod venstre, og de mødes
   ved finalen i midten (--cup-bracket-cols = 2×(antal runder-1)+1, sat fra PHP). Grid med
   lige mange 1fr-kolonner i stedet for faste pixel-bredder + vandret scroll, så hele træet
   altid passer inden for siden. Enkle kort (kun hold + evt. score) i stedet for rundelistens
   fyldigere kort, så det læses som et rigtigt, overskueligt turneringstræ. */
.cup-bracket {
  position: relative; display: grid;
  grid-template-columns: repeat(var(--cup-bracket-cols, 4), minmax(0, 1fr));
  gap: clamp(10px, 1.6vw, 22px);
  padding: 4px 4px 20px; margin-top: 20px;
}
.cup-bracket-col-final { justify-content: center; }
.cup-bracket-col-final .cup-round-lbl { text-align: center; }
.cup-bracket-col-final .cup-bracket-col-matches { flex: 1; display: flex; align-items: center; }
/* Højre halvdel vokser visuelt mod venstre (ind mod finalen) — rundenavnene spejles med, så de
   står til højre i deres kolonne ligesom holdnavnene/kortene i samme kolonne. Venstre halvdel
   beholder normal venstrejustering. Eksplicit her for at være sikker, uanset arve-rækkefølge. */
.cup-bracket-col-left .cup-round-lbl { text-align: left; }
.cup-bracket-col-right .cup-round-lbl { text-align: right; }
.cup-bracket-lines { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 0; overflow: visible; }
.cup-bracket-line { fill: none; stroke: var(--line-med); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.cup-bracket-col {
  position: relative; z-index: 1; min-width: 0;
  display: flex; flex-direction: column;
}
.cup-bracket-col .cup-round-lbl { flex-shrink: 0; }
/* Højde + hver kamps "top" sættes af cup.js (layoutBracket) ud fra de faktiske kamp-højder,
   så en kamp altid ender lodret centreret mellem sine to "forældre"-kampe i runden før. */
.cup-bracket-col-matches { position: relative; }

/* Enkelt kort: hold stablet ovenpå hinanden med en farvet kant for vinderen (samme greb som
   .vb-tl-dotseg.filled bruger sage til "vundet/gennemført" andre steder på sitet), i stedet
   for rundelistens fyldigere kort med topscorer/map. */
.cup-bracket-col .cup-match {
  position: absolute; left: 0; right: 0;
  flex-direction: column; align-items: stretch; gap: 0;
  padding: 0; border-radius: 10px; overflow: hidden;
  background: var(--bg-cream);
}
.cup-bracket-col .cup-match-teams { gap: 0; }
.cup-bracket-col .cup-match-team {
  flex-direction: row; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; border-left: 4px solid transparent; min-width: 0;
}
.cup-bracket-col .cup-match-team + .cup-match-team { border-top: 1px solid var(--line-soft); }
.cup-bracket-col .cup-match-team.won { border-left-color: var(--sage); background: rgba(52,163,122,0.07); }
/* Ellipse i stedet for at lange holdnavne gør kortet højere (ombrydning blev prøvet, men
   gjorde kortene ujævnt store) — holdes ét kompakt kort pr. kamp. Fulde navn står i
   title-attributten (native tooltip ved hover), så man stadig kan læse det. */
.cup-bracket-col .cup-match-team-label { flex: 1 1 0; min-width: 0; }
.cup-bracket-col .cup-match-team-name {
  font-size: 12.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Scoren er et lille tal-badge (samme piller-sprog som .cup-tag/.vb-tl-countdown andre steder
   på sitet) i stedet for bare farvet tekst — vinderens score får en udfyldt sage-pille, så det
   læses som et rigtigt resultat-chip, ikke kun en trykt talkolonne. */
.cup-bracket-col .cup-match-team-score {
  font-family: var(--mono); font-size: 12px; font-weight: 800; color: var(--ink-3); flex-shrink: 0;
  font-variant-numeric: tabular-nums; min-width: 20px; text-align: center;
  border-radius: 5px; padding: 1px 6px;
}
.cup-bracket-col .cup-match-team.won .cup-match-team-score { color: #fff; background: var(--sage); }

/* Højre halvdel af trækket er spejlvendt: score/navn bytter DOM-rækkefølge (sat i cup.php's
   cup_render_match($mirror=true), ikke CSS row-reverse — mere robust), og vinder-kanten
   sidder på højre kant i stedet for venstre — så alt visuelt "peger" ind mod finalen i midten. */
.cup-bracket-col-right .cup-match-team { border-left: none; border-right: 4px solid transparent; }
.cup-bracket-col-right .cup-match-team.won { border-right-color: var(--sage); border-left-color: transparent; }
.cup-bracket-col-right .cup-match-team-label { justify-content: flex-end; }

/* Finale-kortet er ikke absolut positioneret ligesom de andre (ingen JS-beregnet "top"
   nødvendig — der er kun ét kort i den kolonne) — centreres i stedet med almindelig
   flexbox/align-items (se .cup-bracket-col-final ovenfor). Skal stå EFTER den generelle
   .cup-bracket-col .cup-match-regel (samme specificitet, position:absolute ville ellers vinde
   på kildeorden). */
.cup-bracket-col-final .cup-match {
  position: static; width: 100%;
}
/* .cup-match-final (klassen kortet også har, delt med den mørke rundeliste-finale) sætter
   hvid/gennemsigtig NAVNE-tekst højere oppe i filen — usynligt på dette kort's lyse baggrund.
   Overskriver eksplicit tilbage til PRÆCIS de samme farver som de andre bracket-kort bruger
   (ikke bare én ensfarvet tekst) — så tabt/vundet hold stadig skiller sig ud her ligesom alle
   andre steder i trækket. Scoren har IKKE en tilsvarende .cup-match-final-regel at overskrive
   (kun navn/top/map) — en "override" her ville faktisk vinde over .cup-bracket-col's pille-stil
   (samme specificitet, senere i filen) og gøre vinderens tal usynligt (samme farve som pillens
   baggrund) — så den er bevidst UDELADT, scoren arver bare den almindelige pille-stil. */
.cup-bracket-col-final .cup-match-team-name { color: var(--ink-2); }
.cup-bracket-col-final .cup-match-team.won .cup-match-team-name { color: var(--ink); }

/* Tom plads-holder — en kamp der mangler i databasen (se cup_build_two_sided_bracket i
   cup.php). Samme to-rækkers holdstruktur som et rigtigt kort (bare tomt), så den får
   nøjagtig samme højde — vigtigt for cup.js's højde-måling, se cup_render_match(). Stiplet/
   dæmpet, samme sprog som "Flere cups på vej"-pladsen i tidslinjen på forsiden. */
.cup-bracket-col .cup-match-empty { background: transparent; border: 1.5px dashed var(--line-soft); }
.cup-bracket-col .cup-match-empty .cup-match-team { border-top-color: var(--line-soft); color: transparent; }

/* Under ~700px bliver 1fr-kolonner for smalle til at være læsbare uanset ellipse (fx 4
   runder = under 90px pr. kolonne) — her tillades vandret scroll med en fast, læsbar
   kolonnebredde i stedet, ligesom "Top spillere"-tabellen gør andre steder på mobil. */
@media (max-width: 700px) {
  .cup-bracket {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 170px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
}