/* cup.php — resultatside pr. cup. Genbruger style.css's farvevariabler/fonte og samme
   visuelle sprog som resten af sitet: cremefarvede "billet"-flader, mono-uppercase labels,
   serif-kursiv accenter, koral som eneste råbende farve — men skruet et hak op i liv:
   et rigtigt hero-bånd øverst, animeret podie, og et bracket der reagerer på hover. */

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

/* Holdnavne der linker til /team/{id} (podie, slutstilling, runde-for-runde-listen — IKKE
   selve bracket-visningen, se cup.php's cup_team_link()) — arver farven fra den omkringliggende
   klasse i stedet for browserens standard-blå, kun en let farvning ved hover afslører at det er et link. */
.cup-team-link { color: inherit; text-decoration: none; }
.cup-team-link:hover { color: var(--coral); }

/* cup.php's listevisning (/cup uden noget ID) — listen over alle afsluttede cups. Samme
   "billet-banner"-sprog som spillerprofilens cup-kort (.pp-cup-card i player.css): map-
   baggrund med blød maske langs venstre kant, GatherArena-logoet bløder ind i baggrunden på
   samme måde langs højre kant (zoomet ind på logoets "ansigt" via background-size:cover i
   stedet for at vise hele ikonet fladt) — men uden den udfoldelige kampliste, da dette er en
   ren oversigt (ikke én spillers deltagelse), bare et klikbart link til /cup/{public_id}. */
.cup-list { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.cup-list-card {
  position: relative; display: flex; overflow: hidden;
  background: var(--bg-cream); border: 1px solid var(--line-soft); border-radius: 16px;
  text-decoration: none; color: inherit;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.cup-list-card:hover {
  border-color: var(--line-med); transform: translateY(-2px);
  box-shadow: 0 10px 26px -16px rgba(11,19,32,0.35);
}
.cup-list-card-mapbg {
  position: absolute; top: 0; left: 0; bottom: 0; width: 55%;
  background-image: var(--cup-map-img); background-size: cover; background-position: center;
  -webkit-mask-image: linear-gradient(to left, transparent 0%, black 55%);
  mask-image: linear-gradient(to left, transparent 0%, black 55%);
  opacity: 0.38; pointer-events: none;
}
.cup-list-card-logo {
  position: absolute; top: 0; right: 0; bottom: 0; width: 42%; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 55%);
  mask-image: linear-gradient(to right, transparent 0%, black 55%);
  opacity: 0.45; pointer-events: none;
}
/* Billedet spejlvendes via en indre pseudo-element frem for direkte på .cup-list-card-logo —
   masken ovenfor skal blive i sit eget (u-spejlede) koordinatsystem, ellers ville udtoningen
   ende på den forkerte kant når hele elementet spejlvendes. */
.cup-list-card-logo::before {
  content: ""; position: absolute; inset: 0;
  background-image: url(/ga-icon.png); background-size: cover;
  background-repeat: no-repeat; background-position: center 8%;
  transform: scaleX(-1) scale(1.5);
}
/* To rækker i stedet for én smal linje — dato/navn/hold øverst, en fuld stat-stribe (samme
   ticker-sprog som .cup-stats i selve cup-hero'et) nedenunder giver et markant højere,
   mere "banner"-agtigt kort i stedet for en kompakt liste-række. */
.cup-list-card-body {
  position: relative; z-index: 1; flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 24px;
}
.cup-list-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.cup-list-card-info { min-width: 0; }
/* Datoen skal kunne skimmes lige så hurtigt som navnet — ikke gemt væk i lille, dæmpet mono. */
.cup-list-card-date {
  font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--coral);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.cup-list-card-name { font-weight: 800; font-size: 23px; color: var(--ink); margin-top: 4px; }
.cup-list-card-stats {
  display: flex; flex-wrap: wrap; gap: 4px 0;
  border-top: 1px solid var(--line-soft); padding-top: 10px;
}
.cup-list-card-stat {
  flex: 1 1 0; min-width: 60px; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 0 12px; border-left: 1px solid var(--line-soft);
}
.cup-list-card-stat:first-child { border-left: none; padding-left: 0; }
/* Samme greb som cup-detaljesidens .cup-stat-winner — vinder-cellen får en større andel af
   stribens bredde, så de andre (mindre) celler giver plads til det fulde holdnavn. */
.cup-list-card-stat-winner { flex: 2.4 1 0; min-width: 100px; }
.cup-list-card-stat .v { font-weight: 900; font-size: 22px; color: var(--ink); font-variant-numeric: tabular-nums; }
.cup-list-card-stat .k {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink);
}
/* Samme greb som cup-detaljesidens .cup-stat-winner — SAMME skriftstørrelse OG farve som de
   andre celler (arvet, ikke overskrevet). Ellipsis forhindrer at et langt holdnavn ombrækker
   til to linjer, hvilket ville skubbe "Vinder"-labellen ud af linje med "Kills"/"Runder"-
   labellerne ved siden af. */
.cup-list-card-stat-winner .v {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

@media (max-width: 640px) {
  .cup-list-card-logo { display: none; }
  .cup-list-card-body { padding: 16px; }
  .cup-list-card-name { font-size: 19px; }
  .cup-list-card-stat { flex: 1 1 33%; min-width: 0; }
  .cup-list-card-stat .v { font-size: 18px; }
  .cup-list-card-stat:nth-child(3n+1) { border-left: none; padding-left: 0; }
  .cup-list-card-stat:not(:nth-child(3n+1)) { border-left: 1px solid var(--line-soft); padding-left: 12px; }
  /* Samme rettelse som cup-detaljesidens .cup-stat-winner — egen fulde række på mobil, og
     streg-nulstillingen for de resterende 5 stats rettes manuelt i forhold til det. */
  .cup-list-card-stat-winner { flex: 1 1 100%; min-width: 0; }
  .cup-list-card-stat:nth-child(2), .cup-list-card-stat:nth-child(5) { border-left: none; padding-left: 0; }
  .cup-list-card-stat:nth-child(4) { border-left: 1px solid var(--line-soft); padding-left: 12px; }
}

/* HERO-BÅND — samme greb som forsidens .vb-hero-inner: én stor cremefarvet flade med rundede
   hjørner, titel i 900-vægt og en dæmpet "trofæ-glød" i hjørnet — i stedet for en nøgen
   overskrift på sidens baggrund. Stats-tickeren bor inde i båndet, adskilt af en tynd streg,
   så toppen af siden læses som ét resultattavle-kort. */
.cup-hero {
  position: relative; overflow: hidden;
  background: var(--bg-cream); border-radius: 28px;
  padding: 34px 32px 30px; margin-top: 4px;
}
/* ga_banner_pic.png som en dæmpet baggrund — samme "billede falmer ind i cremefarven"-greb
   som forsidens .vb-hero-inner (gradient hen over billedet + falmer ud forneden), i stedet
   for et fladt billede der konkurrerer med titel/stats-teksten ovenpå. */
.cup-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    /* Mørk scrim øverst, kun bag tekstblokken (eyebrow/titel/dato/meta) — uden den forsvinder
       den hvide tekst ind i billedet på lyse/farverige partier af banneret. Falmer helt væk
       inden midten, så den ikke lægger sig oven i podie/kort-indholdet nedenfor. */
    linear-gradient(180deg, rgba(20,16,10,0.5) 0%, rgba(20,16,10,0.24) 32%, rgba(20,16,10,0) 58%),
    linear-gradient(180deg, rgba(var(--bg-cream-rgb),0.32) 0%, rgba(var(--bg-cream-rgb),0.22) 45%, var(--bg-cream) 100%),
    url(/faceit_level/ga_banner_pic.png);
  background-size: cover; background-position: center top;
}
.cup-hero > * { position: relative; z-index: 1; }
/* GatherArena-logoet siddende oven i guld-gløden i øverste højre hjørne — samme fil som
   spillerprofilens cup-kort-vandmærke (.pp-cup-card-logo i player.css), let transparent så
   det læses som et vandmærke og ikke konkurrerer med titlen. To klasser i selectoren
   (".cup-hero .cup-hero-logo", ikke bare ".cup-hero-logo") med VILJE — .cup-hero > * ovenfor
   sætter position:relative på ALLE direkte børn med samme specificitet (0,1,0); uden den
   ekstra klasse her ville kildeordenen afgøre hvem der vinder i stedet for det tiltænkte
   position:absolute, og logoet ville falde ned i normal flow (venstre hjørne, presser
   hero-kortet højere). */
.cup-hero .cup-hero-logo {
  position: absolute; z-index: 0; top: 18px; right: 55px;
  width: 110px; height: 110px; object-fit: contain;
  opacity: 0.55; pointer-events: none;
}
.cup-hero .vb-sec-head { margin-bottom: 0; }
.cup-hero .vb-sec-title {
  font-size: clamp(30px, 4vw, 46px); line-height: 0.98; letter-spacing: -0.04em;
  text-wrap: balance;
}

/* Hvid tekst i heroen — nu der ligger et banner-billede i baggrunden (.cup-hero::before)
   ville den normale mørke tekstfarve drukne i billedet. Skal scopes til .cup-hero, da
   .vb-sec-eye/.vb-sec-title/.cup-meta-line er delte klasser brugt andre steder på sitet. */
.cup-hero .vb-sec-eye,
.cup-hero .vb-sec-title,
.cup-hero .cup-meta-line,
.cup-hero .cup-meta-line span {
  color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.45);
}
.cup-hero .cup-meta-line span:not(:last-child)::after { color: rgba(255,255,255,0.55); }

/* Ren tekstlinje med midtprikker mellem hvert element — ikke piller, matcher sitets øvrige
   meta-linjer (fx forsidens .vb-tl-meta). */
.cup-meta-line {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px;
  font-size: 13px; font-weight: 600; color: var(--ink-2);
}
.cup-meta-line span:not(:last-child)::after { content: "·"; margin-left: 8px; color: var(--line-med); }
.cup-meta-dot { display: none !important; }

/* Slutstilling — ren liste, ikke kort, samme princip som .vb-stats/.vb-wof-meta-row */
.cup-standings { display: flex; flex-direction: column; margin-top: 20px; }
/* Grid i stedet for flex — tag-badgen har varierende bredde alt efter placeringstekst
   ("Vinder" vs "3.-4. plads"), så en fast venstre-indrykning på spiller-linjen ville aldrig
   ramme rigtigt under hold-navnet. Med grid deler hold-navnet og spillerne samme kolonne
   (kolonne 2), så de altid flugter lodret uanset tag-bredden. */
.cup-standing-row {
  display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 8px;
  padding: 12px 14px; border-radius: 12px;
  border-bottom: 1px solid var(--line-soft);
  transition: background .15s, transform .15s;
}
.cup-standing-row:hover { background: var(--bg-cream); transform: translateX(3px); }
.cup-standing-row:last-child { border-bottom: none; }
/* display:contents fjerner selve .cup-standing-head som gridboks — dens to børn (tag +
   hold-navn) placeres direkte i forælderens grid, i kolonne 1 og 2. */
.cup-standing-head { display: contents; }
.cup-standing-row .cup-tag { grid-column: 1; align-self: center; }
.cup-standing-row .cup-standing-rank { grid-column: 1; align-self: center; }
.cup-standing-team { grid-column: 2; align-self: center; 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; }

/* Spillerne for holdet, lige under hold-navnet — samme grid-kolonne som navnet (se ovenfor),
   så venstrekanten altid flugter præcist, uanset tag-badgens bredde. */
.cup-standing-players {
  grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
}
.cup-standing-player {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: var(--ink-2); text-decoration: none;
}
a.cup-standing-player:hover { color: var(--coral); }
.cup-standing-player-avatar { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

.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; }
/* "Øvrige placeringer"-badge: stort/fed placeringstal ("5.-8.") med et lille, dæmpet "plads"-
   ord under — i stedet for en ensfarvet pille der druknede visuelt i resten af rækken. Tallet
   får samme vægt som podiets guld/sølv/bronze-tal, uden at bruge farve (kun podiet er farvet). */
.cup-standing-rank {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1; min-width: 44px;
}
.cup-standing-rank-num {
  font-family: var(--mono); font-weight: 800; font-size: 18px; color: var(--ink);
  letter-spacing: -0.02em;
}
.cup-standing-rank-word {
  font-family: var(--mono); letter-spacing: 0.08em; text-transform: uppercase; font-size: 9px;
  color: var(--ink-3); font-weight: 700; margin-top: 2px;
}

/* Cup-stats — "ticker"-udtryk (tynde lodrette streger, ingen kort/ikoner) som forsidens
   .vb-stats. Ligger nu i bunden af hero-båndet, adskilt af en streg. */
.cup-stats {
  display: flex; flex-wrap: wrap; margin-top: 26px; padding-top: 22px;
  border-top: 1px solid var(--line-med);
}
.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; }
/* Holdnavnet skal have mere plads end en 2-3-cifret talcelle for at slippe for at blive
   afkortet med "…" — de andre celler gør bevidst plads ved selv at fylde mindre (flex:1),
   mens vinder-cellen tager en større andel (flex:2.6) af stribens samlede bredde. */
.cup-stat-winner { flex: 2.6 1 0; min-width: 140px; }
.cup-stat .v {
  font-weight: 900; font-size: 28px; letter-spacing: -0.03em; color: var(--ink);
  font-variant-numeric: tabular-nums; line-height: 1; transition: color .15s;
}
.cup-stat:hover .v { color: var(--coral); }
/* Vinderholdets navn i stats-stribens første celle — SAMME skriftstørrelse/vægt OG farve som
   de andre celler (arvet fra .cup-stat .v ovenfor, ikke overskrevet her). En mindre
   skriftstørrelse fik tidligere denne celles indhold til at fylde mindre lodret end naboerne,
   så "Vinder"-labellen endte højere oppe end "Kills"/"Runder"-labellerne ved siden af — hele
   stribens bundlinje stod ikke lige. white-space:nowrap + ellipsis forhindrer at et langt
   holdnavn ombrækker til to linjer, hvilket ville give samme problem igen. */
.cup-stat-winner .v {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.cup-stat-winner:hover .v { color: #E8A020; }
.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); margin-top: 6px;
}

/* PODIE — bogstaveligt podie: holdnavnet "står" ovenpå en massiv, farvet blok med fast højde
   pr. plads. Blokkene vokser op fra bunden ved sideload (scaleY, transform-origin bottom),
   guld-kortet har en lille krone og en dæmpet glød — nok bevægelse til at toppen af siden
   føles levende, uden at blive en animeret forside. */
.cup-podium-section { max-width: 760px; margin-left: auto; margin-right: auto; }
.cup-podium { display: flex; align-items: flex-end; gap: 12px; }
.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: 13.5px; color: var(--ink); margin-bottom: 8px; text-wrap: balance; }
.cup-podium-gold .cup-podium-team { font-size: 17px; letter-spacing: -0.02em; color: #B8860B; }
.cup-podium-silver .cup-podium-team { color: #6B7684; }
.cup-podium-bronze .cup-podium-team { color: #8B5A2B; }
/* Kronen står altid i markup'et (samme kort-struktur for alle tre pladser), men skjules for
   sølv/bronze her — enklere end at holde tre forskellige kort-varianter i cup.php. */
/* svg er som standard et inline element med lidt "descender"-luft under sig selv (samme
   slags usynlig baseline-plads som får billeder til at have et par px luft under sig i en
   almindelig tekstblok) — display:block på selve ikonet fjerner den, ellers ser det ud som
   unødvendigt mellemrum ned mod "Vinder"-teksten, uanset margin/gap på wrapperen. */
.cup-podium-crown { display: block; color: #E8A020; margin-bottom: 0; }
.cup-podium-crown svg { display: block; margin: 0 auto; }
.cup-podium-card:not(.cup-podium-gold) .cup-podium-crown { display: none; }

/* Selve "blokken" — massiv farve, kun rangtallet, centreret. Fast, forskellig højde pr. plads
   giver trin-siluetten. Rejser sig fra bunden ved load (scaleY fra transform-origin:bottom)
   i stedet for bare at stå der fra første frame — guld sidst/tydeligst forsinket, så øjet
   følger 3-2-1 rækkefølgen op mod vinderen. */
.cup-podium-block {
  width: 100%; box-sizing: border-box; border-radius: 12px 12px 4px 4px;
  display: flex; align-items: center; justify-content: center;
  transform-origin: bottom center;
  animation: cupPodiumRise .55s cubic-bezier(.16,1,.3,1) both;
}
@keyframes cupPodiumRise { from { transform: scaleY(0.05); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
.cup-podium-block::before {
  content: attr(data-rank); font-family: var(--mono); font-weight: 900; line-height: 1;
  color: rgba(255,255,255,0.8);
}
.cup-podium-gold   .cup-podium-block { background: linear-gradient(180deg, #F1B23C, #E8A020); height: 88px; box-shadow: 0 10px 26px -10px rgba(232,160,32,0.75); animation-delay: .18s; }
.cup-podium-silver .cup-podium-block { background: linear-gradient(180deg, #AEB7C1, #9EA8B3); height: 58px; box-shadow: 0 8px 20px -10px rgba(158,168,179,0.65); animation-delay: .06s; }
.cup-podium-bronze .cup-podium-block { background: linear-gradient(180deg, #B07E58, #A0714F); height: 38px; box-shadow: 0 8px 20px -10px rgba(160,113,79,0.6); animation-delay: .3s; }
.cup-podium-gold   .cup-podium-block::before { font-size: 34px; }
.cup-podium-silver .cup-podium-block::before { font-size: 25px; }
.cup-podium-bronze .cup-podium-block::before { font-size: 18px; }

/* 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 (prefers-reduced-motion: reduce) {
  .cup-podium-block { animation: none; }
}

@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; }
  /* Vinder-cellen får sin egen fulde række på mobil (nok plads til hele navnet uden "…"),
     hvilket forskyder hvor de resterende 6 stats' 3-kolonne-rækker reelt starter — ret derfor
     streg-nulstillingen manuelt i stedet for det generelle 3n+1-mønster ovenfor. */
  .cup-stat-winner { flex: 1 1 100%; min-width: 0; }
  .cup-stat:nth-child(2), .cup-stat:nth-child(5) { border-left: none; padding-left: 0; }
  .cup-stat:nth-child(4), .cup-stat:nth-child(7) { border-left: 1px solid var(--line-soft); padding-left: 18px; }
}

.cup-highlights { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.cup-highlight-card {
  flex: 1 1 130px; min-width: 0; display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 2px; padding: 16px 12px 14px; border-radius: 16px;
  background: var(--bg-card); border: 1px solid var(--line-soft);
  box-shadow: 0 2px 8px -6px rgba(11,19,32,0.12);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.cup-highlight-card:hover {
  transform: translateY(-3px); border-color: rgba(255,106,61,0.35);
  box-shadow: 0 14px 28px -14px rgba(255,106,61,0.45);
}
.cup-highlight-icon {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; margin-bottom: 4px;
  background: linear-gradient(150deg, var(--coral), var(--coral-2)); color: #fff;
  box-shadow: 0 4px 12px -4px rgba(255,106,61,0.55);
}
.cup-highlight-icon svg { width: 17px; height: 17px; }
.cup-highlight-value { font-weight: 900; font-size: 22px; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.cup-highlight-label {
  font-family: var(--mono); font-size: 8.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-3); margin-bottom: 2px;
}
.cup-highlight-who {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 5px;
  font-size: 12.5px; font-weight: 800; color: var(--ink); text-decoration: none;
}
a.cup-highlight-who:hover { color: var(--coral); }
.cup-highlight-who img {
  width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 3px var(--line-soft);
}
.cup-highlight-context { font-size: 9.5px; color: var(--ink-3); margin-top: 2px; }
.cup-highlight-matchup { font-size: 10px; color: var(--ink-3); margin-top: 3px; }
.cup-highlight-matchup .own { font-weight: 800; color: var(--ink); }
.cup-highlight-matchup .sep { margin: 0 3px; opacity: .55; }
.cup-highlight-matchup .vs { font-weight: 500; }

@media (max-width: 560px) {
  .cup-highlight-card { flex: 1 1 45%; }
}

/* Kampe, grupperet pr. runde */
.cup-rounds { display: flex; flex-direction: column; gap: 30px; margin-top: 20px; }
/* Rundelabel som en linje med streg efter, samme greb som .vb-sec-eye's streg-før — giver
   runderne en tydelig rytme i stedet for en løs lille mono-tekst. */
.cup-round-lbl {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--ink-3); margin-bottom: 12px;
}
.cup-rounds .cup-round-lbl::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }
.cup-round-matches { display: flex; flex-direction: column; gap: 10px; }

/* "Billet"-kort som forsidens tidslinje (.vb-tl-row) — cremefarvet, rundet, løftes ved hover.
   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;
  transition: transform .15s, box-shadow .15s;
  color: inherit; text-decoration: none; /* kortet i bracket-visningen er nu et <a>-link til FACEIT-kampen */
}
.cup-rounds .cup-match:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -14px rgba(11,19,32,0.35); }
.cup-match-final { background: var(--surface-dark); color: #fff; }
/* Samme --surface-dark-problem som bracket-visningens finale (se dér for den fulde
   forklaring) — kortet skal stadig fremstå som et fremhævet "billet"-kort i mørkt tema, ikke
   smelte sammen med den i forvejen mørke side. Teksten er allerede hvid/rgba(255,255,255,x),
   så kun baggrunden skal løftes en tand lysere. */
html[data-theme="dark"] .cup-match-final { background: #2d3648; }

.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: 5px; }
.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 a:hover { color: var(--coral); }
.cup-match-final .cup-match-top a:hover { color: var(--sunny); }
.cup-match-top-kills { font-family: var(--mono); font-size: 10px; }

.cup-match-meta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.cup-match-score {
  font-weight: 900; font-size: 22px; letter-spacing: -0.03em; color: var(--coral);
  font-variant-numeric: tabular-nums;
}
.cup-match-map {
  font-family: var(--mono); font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-3);
  border: 1px solid var(--line-soft); border-radius: 999px; padding: 3px 10px;
}
.cup-match-final .cup-match-map { color: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.2); }

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

/* "Spor et holds vej"-fremhævning — hover et holdnavn hvor som helst (bracket eller
   rundeliste), og cup.js sætter denne klasse på <body> + team-highlight på hver forekomst af
   samme hold. Alt andet dæmpes, så holdets vej gennem hele turneringen springer i øjnene.
   Bracket-linjerne dæmpes/fremhæves på samme måde — kun de linjer der reelt er en del af
   det hoverede holds vej (data-from-match-id, se cup.js) bliver grønne, resten dæmpes væk. */
body.has-team-highlight .cup-match-team { opacity: 0.35; transition: opacity .15s; }
body.has-team-highlight .cup-match-team.team-highlight { opacity: 1; }
body.has-team-highlight .cup-bracket-line { opacity: 0.2; transition: opacity .15s, stroke .15s; }
body.has-team-highlight .cup-bracket-line.line-highlight { opacity: 1; stroke: var(--sage); stroke-width: 2.5; }

/* 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 { justify-content: center; color: var(--coral); }
.cup-bracket-col-final .cup-bracket-col-matches {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
}
.cup-replay-cta {
  display: flex; align-items: center; gap: 14px; margin-top: 20px; padding: 16px 20px;
  border-radius: 18px; background: var(--surface-dark); color: #fff; text-decoration: none;
  box-shadow: 0 10px 30px -14px rgba(11,19,32,0.5);
  transition: transform .18s, box-shadow .18s;
}
.cup-replay-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -14px rgba(11,19,32,0.6); }
.cup-replay-cta-icon {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(150deg, var(--coral), var(--coral-2)); color: #fff;
  box-shadow: 0 4px 14px -4px rgba(255,106,61,0.6);
}
.cup-replay-cta-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cup-replay-cta-eyebrow {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: rgba(255,255,255,0.55);
}
.cup-replay-cta-beta {
  font-size: 9px; font-weight: 800; color: #fff; background: var(--coral);
  border-radius: 999px; padding: 1px 7px; letter-spacing: 0.04em;
}
.cup-replay-cta-title { font-weight: 800; font-size: 16px; letter-spacing: -0.01em; }
.cup-replay-cta-vs { font-weight: 600; font-size: 12px; text-transform: uppercase; opacity: .5; margin: 0 2px; }
.cup-replay-cta-arrow { flex-shrink: 0; margin-left: auto; opacity: .6; transition: transform .18s, opacity .18s; }
.cup-replay-cta:hover .cup-replay-cta-arrow { transform: translateX(4px); opacity: 1; }
@media (max-width: 480px) {
  .cup-replay-cta-title { font-size: 14px; }
  .cup-replay-cta-icon { width: 38px; height: 38px; }
}
/* 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 { justify-content: flex-start; }
.cup-bracket-col-right .cup-round-lbl { justify-content: flex-end; }
.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; }

.cup-bracket-col .cup-match {
  position: absolute; left: 0; right: 0;
  flex-direction: column; align-items: stretch; gap: 0;
  padding: 0; border-radius: 12px; overflow: hidden;
  background: var(--bg-card); border: 1px solid var(--line-soft);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.cup-bracket-col .cup-match:hover {
  border-color: var(--line-med); box-shadow: 0 8px 22px -12px rgba(11,19,32,0.45); transform: translateY(-1px);
}
.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;
  transition: background-color .12s, opacity .15s;
}
.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); }
/* Taberen dæmpes aktivt (ikke bare "ikke fremhævet") — vinderlinjen springer i øjnene når
   man scanner træet. */
.cup-bracket-col .cup-match-team:not(.won) .cup-match-team-name { color: var(--ink-3); }
.cup-bracket-col .cup-match-team.won .cup-match-team-name { color: var(--ink); font-weight: 800; }
/* 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;
  transition: color .12s;
}
/* 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); }

/* Mouse-over-fremhævning (.team-highlight, sat af cup.js's wireTeamHighlight() når man
   holder musen over et holdnavn) — hvid tekst på en mørk "chip"-baggrund, uanset om holdet
   vandt eller tabte kampen. Kun en midlertidig hover-tilstand, derfor er en garanteret mørk
   baggrund nødvendig (i modsætning til bare at farve teksten hvid direkte oven på kortets
   almindelige lyse baggrund, som ville gøre teksten usynlig). Skal stå EFTER .won-reglerne
   ovenfor for at vinde ved samme specificitet, uanset om rækken også er vinderen. */
.cup-bracket-col .cup-match-team.team-highlight { background: var(--surface-dark); }
.cup-bracket-col .cup-match-team.team-highlight .cup-match-team-name { color: #fff; }
.cup-bracket-col .cup-match-team.team-highlight .cup-match-team-score { color: #fff; }
/* --surface-dark er selv næsten sort og bruges overalt på sitet til aktive/hover-tilstande
   (nav, knapper osv.) — den kan ikke bare ændres globalt for mørkt tema uden at ramme alt det
   andet. I mørkt tema er kortets egen baggrund (--bg-card) allerede mørk, så samme
   --surface-dark-baggrund forsvinder næsten i stedet for at fremhæve holdet — derfor en lokal
   override her: samme "spotlight"-idé som i lyst tema, bare vendt om (lys boks/mørk tekst i
   stedet for mørk boks/lys tekst), så den stadig springer tydeligt frem mod den mørke side. */
html[data-theme="dark"] .cup-bracket-col .cup-match-team.team-highlight { background: var(--ink); }
html[data-theme="dark"] .cup-bracket-col .cup-match-team.team-highlight .cup-match-team-name,
html[data-theme="dark"] .cup-bracket-col .cup-match-team.team-highlight .cup-match-team-score {
  color: var(--surface-dark);
}

/* 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; }

/* Finalekortet er sidens højdepunkt — men lyst, ikke mørkt: et hvidt "certifikat" med kraftig
   ink-kant, hævet et hak over de andre kort (scale) så det læses som selve præmien i midten af
   træet. Ingen fast guldstribe hen over toppen — det gav guld i toppen af kortet UANSET hvilket
   hold der vandt, hvilket er misvisende når vinderen faktisk sidder nederst. Guld ved toppen
   vises nu KUN når vinderrækken selv er den øverste (se .cup-match-team.won:first-child
   nedenfor). Ikke absolut positioneret (kun ét kort i kolonnen, intet JS-beregnet "top"
   nødvendigt) — 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%;
  background: var(--bg-card);
  border: 2px solid var(--ink); border-radius: 14px;
  transform: scale(1.06) translateY(-52px);
  box-shadow: 0 16px 36px -20px rgba(11,19,32,0.55);
}
.cup-bracket-col-final .cup-match:hover {
  border-color: var(--ink); transform: scale(1.06) translateY(-56px);
  box-shadow: 0 22px 44px -20px rgba(11,19,32,0.6);
}
.cup-bracket-col-final .cup-match-team { padding: 11px 12px; border-left-width: 3px; }
.cup-bracket-col-final .cup-match-team + .cup-match-team { border-top-color: var(--line-soft); }
.cup-bracket-col-final .cup-match-team-name { color: var(--ink-3); font-size: 13px; }
/* Vinderrækken er den eneste guld-flade på hele siden ud over podiet — taberrækken holdes
   helt neutral/hvid, så kontrasten gør arbejdet i stedet for endnu en farve. Guld-accenten
   følger stadig venstre kant (som resten af bracket-kortene), men "knækker om hjørnet" op
   til topkanten hvis vinderen står øverst i kortet, eller ned til bundkanten hvis vinderen
   står nederst — et lille L-formet hjørne i stedet for en ren lige streg. */
.cup-bracket-col-final .cup-match-team.won {
  background: linear-gradient(90deg, rgba(232,160,32,0.20), rgba(232,160,32,0.05));
  border-left-color: #E8A020;
}
.cup-bracket-col-final .cup-match-team.won:first-child { border-top: 3px solid #E8A020; }
.cup-bracket-col-final .cup-match-team.won:last-child { border-bottom: 3px solid #E8A020; }
.cup-bracket-col-right .cup-match-team.won { border-right-color: var(--sage); }
.cup-bracket-col-final .cup-match-team.won .cup-match-team-name { color: var(--ink); font-weight: 900; letter-spacing: -0.01em; }
/* Rundetallet holder sig til samme grønne "vundet"-sprog som resten af bracket-kortene
   (.cup-bracket-col .cup-match-team.won .cup-match-team-score) i stedet for guld — guldet er
   forbeholdt selve finale-kortets baggrund/kant/navn, så rundetallet stadig er umiddelbart
   genkendeligt som "vandt denne runde" uanset hvilken runde man kigger på. */
.cup-bracket-col-final .cup-match-team.won .cup-match-team-score { background: var(--sage); color: #fff; }
.cup-bracket-col-final .cup-match-team:not(.won) .cup-match-team-score { color: var(--ink-3); }
/* Selve vinder-guldflaget (den translucente gradient) er samme rgba() i begge temaer, men en
   20%→5% guld-tint over hvid (lyst tema) giver en tydelig varm glød — samme tint over den
   mørke kort-baggrund bliver nærmest usynlig. Styrket opacitet i mørkt tema, så finale-kortet
   reelt ser lige så guldent ud som i lyst tema. */
html[data-theme="dark"] .cup-bracket-col-final .cup-match-team.won {
  background: linear-gradient(90deg, rgba(232,160,32,0.34), rgba(232,160,32,0.08));
}
/* Vinderens navn brugte --ink (nær-hvid i mørkt tema, #e7ebf3) — rigtig hvid mod den nu
   stærkere guld-baggrund giver den klassiske "hvid tekst på guld"-kontrast. */
html[data-theme="dark"] .cup-bracket-col-final .cup-match-team.won .cup-match-team-name { color: #fff; }

/* 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); box-shadow: none; }
.cup-bracket-col .cup-match-empty:hover { transform: none; box-shadow: none; border-color: 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;
  }
}

@media (max-width: 860px) {
  .cup-hero { padding: 18px 18px 16px; border-radius: 20px; }
  .cup-hero .vb-sec-title { font-size: clamp(26px, 8vw, 36px); }
  .cup-hero .cup-hero-logo { width: 70px; height: 70px; top: 12px; right: 14px; opacity: 0.45; }
  .cup-stats { margin-top: 20px; padding-top: 18px; }
  .cup-stat .v { font-size: 22px; }
}