/* ── Head-to-Head (Website) — Stats-Paket Block S5 (Paket B) · BAUPLAN-WEBSITE ──────────────────────────────────────
   Figma YRUirscc0yHUgTS69n5bDU „✅ Fertig“ Section 236:12251 (W-V1 + Zustaende vz) + 📘 Spec 273:14459. Praefix `vg-`;
   Bausteine aus tw.css (Umschalter, Auswahl, Feld, Knopf, Leer, Skelett, Dialog). Main 1280 (80 Rand).
   Brueche: ≤ 1080 Feed-Zeile ohne MVP/Ø; ≤ 600 = 430-Fassung (Spieler untereinander mit „VS“, Summen einspaltig, Vergleich
   bleibt mit schmalen Balken, Feed als Karte). */

.vg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vg-fuell { flex: 1 1 0; min-width: 0; }
body.page-h2h { position: relative; }

/* Buehne: zwei Splashes (Banner je Spieler), in der Mitte ineinander, unten in die Seite */
.vg-held { position: absolute; left: 0; right: 0; top: 72px; height: 640px; z-index: -1; overflow: hidden; pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, rgba(0,0,0,.35) 85%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 60%, rgba(0,0,0,.35) 85%, transparent 100%); }
.vg-held[hidden] { display: none; }
.vg-held i { position: absolute; top: 0; bottom: 0; width: 62%; background: var(--erhoeht) center 20% / cover no-repeat; }
.vg-held i.l { left: 0; background-image: var(--vg-l, none);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 55%, transparent 100%); mask-image: linear-gradient(90deg, #000 0%, #000 55%, transparent 100%); }
.vg-held i.r { right: 0; background-image: var(--vg-r, none);
    -webkit-mask-image: linear-gradient(270deg, #000 0%, #000 55%, transparent 100%); mask-image: linear-gradient(270deg, #000 0%, #000 55%, transparent 100%); }
.vg-held::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,13,18,.45) 0%, rgba(13,13,18,.55) 50%, rgba(13,13,18,.85) 100%); }
.vg-held.ohne i { display: none; }
.vg-held.ohne { background: linear-gradient(180deg, rgba(117,85,251,.28) 0%, rgba(117,85,251,.1) 55%, rgba(117,85,251,0) 100%); }
.vg-held.ohne::after { display: none; }

.vg-main { padding-top: calc(72px + 168px); }
body.vg-leer .vg-main { padding-top: calc(72px + 48px); }
.vg-skel-kopf { margin-bottom: 32px; }

/* Duell-Kopf: Avatar 96 + Name 44 | VS | gespiegelt */
.vg-duell { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; }
.vg-sp { display: flex; align-items: center; gap: 22px; min-width: 0; }
.vg-sp.r { flex-direction: row-reverse; text-align: right; }
.vg-ava { width: 96px; height: 96px; flex: 0 0 96px; border-radius: 16px; object-fit: cover; background: var(--erhoeht);
    border: 2px solid var(--team-blau); box-sizing: border-box; }
.vg-sp.r .vg-ava { border-color: var(--team-rot); }
.vg-sp-t { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.vg-sp.r .vg-sp-t { align-items: flex-end; }
.vg-name { margin: 0; font: 700 44px/1.1 var(--font-brand); color: var(--w100); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.vg-name a { color: inherit; text-decoration: none; }
.vg-name a:hover { color: var(--violett-text); }
.vg-rang { margin: 0; display: flex; align-items: center; gap: 8px; font: 400 14px/18px var(--font-brand); color: var(--w70); min-width: 0; }
.vg-sp.r .vg-rang { flex-direction: row-reverse; }
.vg-rang img { width: 20px; height: 20px; flex: 0 0 20px; }
.vg-rang-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vg-wechsel { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0; cursor: pointer;
    font: 500 13px/16px var(--font-brand); color: var(--violett-text); }
.vg-wechsel:hover { color: var(--w100); }
.vg-wechsel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.vg-vs { font: 800 56px/1 var(--font-brand); color: var(--w25); letter-spacing: .02em; }

.vg-steuer { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 40px; flex-wrap: wrap; }
.vg-modi { background: rgba(13,13,18,.55); }
.vg-modi button { height: 30px; padding: 0 16px; font-size: 13px; }
.vg-season select { height: 38px; font-size: 13px; background: rgba(13,13,18,.55); }

/* Together · Against · Last met */
.vg-sum { display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr); align-items: center; margin-top: 44px; }
.vg-sum > i { align-self: stretch; background: var(--w08); }
.vg-sum-s { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 0 16px; min-width: 0; }
.vg-sum-w { font: 700 40px/1.1 var(--font-brand); color: var(--w100); }
.vg-sum-w.tw-gruen { color: var(--gruen); }
.vg-sum-u { margin: 0; font: 400 13px/17px var(--font-brand); color: var(--w55); overflow-wrap: anywhere; }

/* Vergleich je Kennzahl (Wert | Balken zur Mitte | Label | Balken | Wert) — Gewinner hell, Verlierer gedimmt */
.vg-vgl { margin-top: 56px; }
.vg-vgl-kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; padding-bottom: 12px;
    font: 600 11px/14px var(--font-brand); letter-spacing: .08em; text-transform: uppercase; }
.vg-vgl-kopf .l { color: var(--team-blau); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vg-vgl-kopf .m { color: var(--w45); text-align: center; }
.vg-vgl-kopf .r { color: var(--team-rot); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vg-z { display: grid; grid-template-columns: 90px minmax(0, 1fr) 180px minmax(0, 1fr) 90px; align-items: center; gap: 16px;
    height: 44px; border-top: 1px solid var(--border); }
.vg-z:last-child { border-bottom: 1px solid var(--border); }
.vg-w { font: 600 18px/22px var(--font-brand); color: var(--w55); white-space: nowrap; }
.vg-w.r { text-align: right; }
.vg-w.sieg { color: var(--w100); font-weight: 700; }
.vg-lbl { text-align: center; font: 500 13px/16px var(--font-brand); color: var(--w70); }
.vg-bahn { height: 4px; border-radius: 2px; background: var(--w04); display: flex; overflow: hidden; }
.vg-bahn.l { justify-content: flex-end; }
.vg-bahn em { display: block; height: 100%; border-radius: 2px; }
.vg-bahn.l em { background: rgba(77, 143, 255, .7); }
.vg-bahn.r em { background: rgba(237, 87, 97, .85); }
.vg-bahn.l.sieg em { background: var(--team-blau); }
.vg-bahn.r.sieg em { background: var(--team-rot); }
.vg-bahn.l.verl em { background: rgba(77, 143, 255, .35); }
.vg-bahn.r.verl em { background: rgba(237, 87, 97, .4); }

/* Shared champions */
.vg-champs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; margin-top: 48px; }
.vg-ch { display: flex; gap: 12px; min-width: 0; }
.vg-ch.r { justify-content: flex-end; }
.vg-ch-k { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.vg-ch-k img { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; background: var(--erhoeht); border: 2px solid transparent; box-sizing: border-box; }
.vg-ch-k.geteilt img { border-color: var(--gold2); }
.vg-ch-k small { font: 500 11px/14px var(--font-brand); color: var(--w55); white-space: nowrap; }
.vg-ch-k.geteilt small { color: var(--gold2); }
.vg-ch-m { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; max-width: 360px; }
.vg-ch-m b { font: 600 18px/22px var(--font-brand); color: var(--gold2); }
.vg-ch-m small { font: 400 12px/16px var(--font-brand); color: var(--w55); }

/* Partien mit beiden (Feed-Zeile wie Matches S4) */
.vg-feed { margin-top: 56px; }
.vg-feed-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 12px; }
.vg-mehr { font-size: 13px; }
.vg-zeilen { display: flex; flex-direction: column; gap: 4px; }
.vg-nie { margin: 0; padding: 18px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    font: 400 14px/18px var(--font-brand); color: var(--w70); }
.vg-zeile { position: relative; display: flex; align-items: center; gap: 16px; height: 64px; padding: 0 16px 0 20px; border-radius: 10px;
    background: var(--w03); text-decoration: none; color: inherit; transition: background-color .12s ease; }
.vg-zeile:hover { background: var(--w06); }
.vg-zeile:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.vg-mark { display: none; position: absolute; left: 0; top: 16px; width: 3px; height: 32px; border-radius: 2px; background: var(--violett); }
.vg-zeile.ich .vg-mark { display: block; }
.vg-modus { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 6px; background: var(--w06);
    font: 600 12px/15px var(--font-brand); color: var(--w100); white-space: nowrap; flex: 0 0 auto; }
.vg-modus i { width: 6px; height: 6px; border-radius: 50%; background: var(--vg-q, var(--gruen)); }
.vg-avg { width: 56px; flex: 0 0 56px; font: 400 12px/15px var(--font-brand); color: var(--w45); white-space: nowrap; }
.vg-teams { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }
.vg-icons { display: flex; gap: 4px; }
.vg-icons img { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; background: var(--erhoeht); }
.vg-icons.verl img { opacity: .45; }
.vg-score { display: flex; align-items: center; gap: 8px; }
.vg-score b { width: 30px; font: 600 20px/24px var(--font-brand); color: var(--w45); }
.vg-score b:first-child { text-align: right; }
.vg-score b.blau { color: var(--team-blau); } .vg-score b.rot { color: var(--team-rot); }
.vg-score em { font: 400 16px/1 var(--font-brand); font-style: normal; color: var(--w25); }
.vg-art { padding: 3px 8px; border-radius: 6px; background: rgba(184,168,255,.14); color: var(--violett-text); font: 600 12px/15px var(--font-brand);
    white-space: nowrap; flex: 0 0 auto; }
.vg-mvp { display: flex; align-items: center; gap: 8px; width: 140px; flex: 0 0 140px; min-width: 0; }
.vg-mvp > span { display: flex; flex-direction: column; min-width: 0; }
.vg-mvp small { font: 600 10px/13px var(--font-brand); letter-spacing: .08em; color: var(--gold2); }
.vg-mvp b { font: 600 13px/16px var(--font-brand); color: var(--w100); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vg-rund { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%; object-fit: cover; background: var(--erhoeht); }
.vg-clips { display: flex; align-items: center; gap: 4px; width: 28px; flex: 0 0 28px; color: var(--violett-text); }
.vg-clips b { font: 600 12px/15px var(--font-brand); }
.vg-dauer { width: 48px; flex: 0 0 48px; text-align: right; font: 500 13px/16px var(--font-brand); color: var(--w70); }
.vg-datum { width: 52px; flex: 0 0 52px; text-align: right; font: 400 13px/16px var(--font-brand); color: var(--w45); white-space: nowrap; }
.vg-caret { display: flex; color: var(--w45); }
/* kompakt (Partie nicht im Matches-Abruf): beide Champions + KDA */
.vg-paar { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 0 1 220px; }
.vg-paar > span { display: flex; flex-direction: column; min-width: 0; }
.vg-paar b { font: 600 13px/16px var(--font-brand); color: var(--w100); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vg-paar small { font: 400 12px/15px var(--font-brand); color: var(--w55); }
.vg-pk { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 7px; object-fit: cover; background: var(--erhoeht); }

/* Leere Zustaende (vz): Tafel mittig */
.vg-lkopf { margin-bottom: 32px; }
.vg-unter { margin: 0; font: 400 14px/18px var(--font-brand); color: var(--w55); }
.vg-box { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 56px 24px 64px;
    border: 1px solid var(--border); border-radius: 16px; background: var(--flaeche); }
.vg-box h2 { margin: 0; font: 600 20px/26px var(--font-brand); color: var(--w100); }
.vg-box > p { margin: 0; font: 400 14px/20px var(--font-brand); color: var(--w70); max-width: 52ch; }
.vg-box .tw-btn { margin-top: 8px; }
.vg-box-ic { color: var(--w55); display: flex; }
.vg-box.warn .vg-box-ic { color: var(--w55); }
.vg-box-p { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border: 1px solid var(--border); border-radius: 12px;
    margin-bottom: 18px; text-align: left; }
.vg-box-p > span { display: flex; flex-direction: column; }
.vg-box-p small { font: 600 10px/13px var(--font-brand); letter-spacing: .08em; text-transform: uppercase; color: var(--w45); }
.vg-box-p b { font: 600 14px/18px var(--font-brand); color: var(--w100); }
.vg-box-p .tw-link { font-size: 13px; margin-left: 8px; }
.vg-vorschlag { margin-top: 28px; display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 760px; }
.vg-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.vg-chip { display: inline-flex; align-items: baseline; gap: 6px; height: 34px; padding: 0 12px; border-radius: 17px; cursor: pointer;
    border: 1px solid var(--w12); background: transparent; color: var(--w100); font: 500 13px/32px var(--font-brand); }
.vg-chip:hover { border-color: var(--w25); background: var(--w04); }
.vg-chip b { font-weight: 600; }
.vg-chip small { font-size: 12px; color: var(--w45); }

/* Spielersuche im Dialog */
.vg-suche { position: relative; display: flex; align-items: center; }
.vg-suche svg { position: absolute; left: 12px; color: var(--w45); pointer-events: none; }
.vg-suche .tw-feld { padding-left: 36px; }
.vg-suche .tw-feld::-webkit-search-cancel-button { filter: invert(1); opacity: .5; }
.vg-treffer { display: flex; flex-direction: column; gap: 2px; min-height: 120px; }
.vg-treffer-cap { padding: 4px 0 6px; }
.vg-treffer-z { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border-radius: 10px; border: 0; background: none;
    cursor: pointer; text-align: left; color: var(--w100); }
.vg-treffer-z:hover, .vg-treffer-z:focus-visible { background: var(--w06); outline: none; }
.vg-treffer-z > span { display: flex; align-items: baseline; gap: 4px; min-width: 0; flex: 1 1 auto; }
.vg-treffer-z b { font: 600 14px/18px var(--font-brand); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vg-treffer-z small { font: 400 12px/16px var(--font-brand); color: var(--w45); }
.vg-treffer-z em { font: 600 11px/14px var(--font-brand); font-style: normal; color: var(--violett-text); }
.vg-treffer-leer { margin: 0; padding: 18px 4px; font: 400 13px/18px var(--font-brand); color: var(--w55); }

@media (max-width: 1280px) {
    .vg-name { font-size: 36px; }
    .vg-mvp { display: none; }
}
@media (max-width: 1080px) {
    .vg-avg, .vg-clips { display: none; }
    .vg-z { grid-template-columns: 76px minmax(0, 1fr) 140px minmax(0, 1fr) 76px; }
    .vg-sum-w { font-size: 32px; }
}
@media (max-width: 900px) {
    .vg-teams .vg-icons { display: none; }
}

/* ═════════════ 430 (W-V1 430): Spieler untereinander, Summen einspaltig, Vergleich schmal ═════════════ */
@media (max-width: 600px) {
    .vg-main { padding-top: calc(72px + 40px); }
    .vg-held { height: 520px; }
    .vg-held i { width: 100%; height: 55%; }
    .vg-held i.l { top: 0; bottom: auto; -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 60%, transparent 100%); }
    .vg-held i.r { top: auto; bottom: 0; -webkit-mask-image: linear-gradient(0deg, #000 50%, transparent 100%); mask-image: linear-gradient(0deg, #000 50%, transparent 100%); }
    .vg-duell { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .vg-sp, .vg-sp.r { flex-direction: row; text-align: left; gap: 14px; }
    .vg-sp.r .vg-sp-t { align-items: flex-start; }
    .vg-sp.r .vg-rang { flex-direction: row; }
    .vg-ava { width: 64px; height: 64px; flex-basis: 64px; border-radius: 12px; }
    .vg-name { font-size: 28px; }
    .vg-vs { font-size: 22px; padding-left: 22px; }
    .vg-steuer { margin-top: 24px; justify-content: stretch; }
    .vg-steuer .vg-modi { width: 100%; }
    .vg-season { width: 100%; }
    .vg-season select { width: 100%; }
    .vg-sum { grid-template-columns: minmax(0, 1fr); margin-top: 24px; gap: 0; }
    .vg-sum > i { height: 1px; align-self: auto; }
    .vg-sum-s { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: baseline; text-align: left; padding: 14px 0; gap: 2px 12px; }
    .vg-sum-s .tw-cap { flex: 0 0 100%; }
    .vg-sum-w { font-size: 26px; }
    .vg-sum-u { text-align: right; flex: 1 1 140px; }
    .vg-vgl { margin-top: 32px; }
    .vg-z { grid-template-columns: 52px minmax(0, 1fr) 96px minmax(0, 1fr) 52px; gap: 8px; height: 40px; }
    .vg-w { font-size: 15px; }
    .vg-lbl { font-size: 12px; line-height: 14px; }
    .vg-bahn { height: 3px; }
    .vg-champs { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 32px; }
    .vg-ch-m { order: -1; max-width: none; }
    .vg-ch { justify-content: space-between; }
    .vg-ch.r { justify-content: space-between; }
    .vg-ch-k img { width: 44px; height: 44px; }
    .vg-feed { margin-top: 36px; }
    .vg-zeile { display: grid; height: auto; gap: 10px 8px; padding: 12px 14px; border: 1px solid var(--border);
        grid-template-columns: auto 1fr auto auto; grid-template-areas: "modus . dauer datum" "teams teams teams teams" "art art art art"; }
    .vg-zeile .vg-modus { grid-area: modus; justify-self: start; }
    .vg-teams { grid-area: teams; justify-content: space-between; gap: 6px; }
    .vg-teams .vg-icons { display: flex; gap: 3px; }
    .vg-icons img { width: 22px; height: 22px; border-radius: 5px; }
    .vg-zeile > .vg-fuell, .vg-caret, .vg-avg, .vg-clips, .vg-mvp { display: none; }
    .vg-art { grid-area: art; justify-self: start; }
    .vg-dauer { grid-area: dauer; width: auto; }
    .vg-datum { grid-area: datum; width: auto; }
    .vg-zeile.kompakt { grid-template-areas: "modus . dauer datum" "p1 p1 p2 p2" "art art art art"; }
    .vg-zeile.kompakt .vg-paar.a { grid-area: p1; }
    .vg-zeile.kompakt .vg-paar.b { grid-area: p2; }
    .vg-box { padding: 40px 16px 44px; }
}