/* Statistik (#/statistik) – Präfix stats-. Farben nur über Variablen aus app.css (DESIGN.md 4.5). */

/* ---------- Kopf und Statuszeile ---------- */

.stats-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-2);
  min-height: 20px;
  color: var(--text-2);
}
.stats-status-line { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--s-1) var(--s-2); min-width: 0; }
.stats-status-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.stats-status-sep { color: var(--muted); }

/* Einlese-Pille: Türkis = läuft gerade (wie der Turnier-Status) */
.stats-sync {
  height: 20px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--accent-2) 12%, transparent);
  color: var(--accent-2);
  font-weight: 600;
}
/* hell: Türkis auf Türkis-soft nur ~4,1:1 → Text dunkel, Punkt bleibt türkis */
:root[data-theme="light"] .stats-sync { color: var(--text); }
.stats-sync-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-2);
  animation: stats-pulse 1.6s ease-in-out infinite;
}
@keyframes stats-pulse { 50% { opacity: .35; transform: scale(.75); } }
.stats-refresh { margin-left: var(--s-1); height: 24px; padding: 0 8px; color: var(--accent-2); }
.stats-refresh:hover { color: var(--accent-2); }

/* ---------- Filterleiste ---------- */

.stats-fbar { display: flex; align-items: center; gap: var(--s-2); min-width: 0; margin-top: calc(-1 * var(--s-2)); }
.stats-flist { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); flex: 1 1 auto; min-width: 0; }

/* Breiten nach Plan; die Auswahl trägt ihr Label im Text („Alle Ligen“, „ab 3 Spielen“) und ein aria-label */
.stats-f { flex: none; }
.stats-f-league { width: 200px; }
.stats-f-tournament { width: 240px; }
.stats-f-patch { width: 150px; }
.stats-f-role { width: 150px; }
.stats-f-min { width: 140px; }
.stats-f[hidden] { display: none; }
.stats-f.is-active { color: var(--accent); } /* Pfeil in Gold, zusätzlich zum Gold-Rahmen aus app.css */
.stats-reset { margin-left: auto; }

/* Filter-Knopf mit Zähler – nur auf dem Handy. Zähler als Pille oben rechts am Knopf (wie der Live-Zähler
   in der Tab-Leiste), Knopf bleibt quadratisch; Gold, weil Gold hier „aktiver Filter“ heißt */
.stats-fbtn { position: relative; display: none; flex: none; color: var(--text-2); }
.stats-fbtn.is-active { border-color: color-mix(in srgb, var(--accent) 60%, transparent); color: var(--accent); }
.stats-fbtn-count {
  position: absolute;
  top: -7px;
  right: -7px;
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--bg); /* Spalt zum Knopfrand */
  color: var(--on-accent);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  animation: pop-in var(--dur-2) var(--ease);
}
.stats-fbtn-count[hidden] { display: none; }

/* ---------- Inhalt ---------- */

.stats-body { position: relative; display: flex; flex-direction: column; gap: var(--s-6); min-width: 0; }
.stats-body > * { transition: opacity var(--dur-2) var(--ease); }
.stats-busy { pointer-events: none; }
.stats-busy > * { opacity: .45; }
/* Ladeleiste (2 px Gold), während neue Daten kommen – alte Tabelle bleibt gedimmt stehen */
.stats-busy::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent) no-repeat;
  background-size: 40% 100%;
  animation: stats-load 1.1s var(--ease) infinite;
}
@keyframes stats-load { from { background-position: -60% 0; } to { background-position: 160% 0; } }

.stats-section { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.stats-tablehead { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--s-1) var(--s-3); }
.stats-count { color: var(--muted); }

.stats-note { color: var(--muted); }

/* ---------- Highlight-Karten ---------- */

.stats-highlights { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--grid-gap); }
@media (min-width: 860px) {
  .stats-highlights { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* .card ohne Verlauf und Farbkante; Raster: Bild links über alle Zeilen, Überschrift über Name und Zahl */
.stats-hl {
  --hl: var(--accent);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "vis label label"
    "vis name value"
    "vis sub value";
  align-items: center;
  align-content: center;
  column-gap: var(--s-4);
  min-height: 88px;
}
.stats-hl-teal { --hl: var(--accent-2); }
.stats-hl-blue { --hl: var(--blue); }

/* 2-px-Ring in der Kennfarbe, durch einen schmalen Spalt vom Bild abgesetzt */
.stats-hl-visual { grid-area: vis; display: flex; padding: 4px; }
.stats-hl-visual > * {
  border-radius: var(--r-sm);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px color-mix(in srgb, var(--hl) 70%, transparent);
}
.stats-hl-img { width: 44px; height: 44px; object-fit: cover; background: var(--surface-3); }

.stats-hl-label {
  grid-area: label;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-bottom: 4px;
  color: var(--hl);
  line-height: 14px; /* .eyebrow hat 1 – Umlaute (Ö) würden im overflow-Ausschnitt abgeschnitten */
  white-space: nowrap;
}
.stats-hl-label-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.stats-hl-name {
  grid-area: name;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stats-hl-sub {
  grid-area: sub;
  align-self: start;
  min-width: 0;
  overflow: hidden;
  color: var(--text-2);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  text-overflow: ellipsis;
  /* darf zweizeilig umbrechen statt früh abgeschnitten zu werden („Anteil am Teamschaden · 3 Picks“) */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.stats-hl-value { grid-area: value; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding-left: var(--s-2); }
.stats-hl-num { color: var(--text); font-size: 28px; font-weight: 800; line-height: 1.05; letter-spacing: -.025em; white-space: nowrap; }
.stats-hl-unit { color: var(--muted); white-space: nowrap; }

.stats-hl-skel { height: 88px; border-radius: var(--r-md); }

/* Tablet: drei schmale Karten nebeneinander – Bild und Wert oben, Text darunter */
@media (min-width: 640px) and (max-width: 859.98px) {
  .stats-highlights { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats-hl {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "vis value" "label label" "name name" "sub sub";
    align-content: start;
    column-gap: var(--s-3);
  }
  .stats-hl-visual, .stats-hl-value { margin-bottom: var(--s-2); }
  .stats-hl-value { min-width: 0; }
  .stats-hl-num { font-size: 24px; }
  .stats-hl-skel { height: 144px; }
}

/* ---------- Tabellen (Grundform aus app.css: Kopf 40, Zeilen 44, Kopf klebrig in der Hülle) ---------- */

.stats-table .table td { padding-top: 6px; padding-bottom: 6px; }
.stats-table .table td:first-child,
.stats-table .table th:first-child .th-btn { padding-left: var(--s-4); }
.stats-table .table td:last-child,
.stats-table .table th:last-child .th-btn,
.stats-table .table th:last-child:not(.sortable) { padding-right: var(--s-4); }

/* Erste Spalte bleibt beim waagrechten Scrollen stehen */
.stats-table th:first-child,
.stats-table td:first-child { position: sticky; left: 0; z-index: 1; }
.stats-table td:first-child { background: var(--surface); }
.stats-table th:first-child { z-index: 2; background: var(--surface-2); }
.stats-table tbody tr:hover td:first-child { background: var(--surface-2); }
.stats-table th:first-child,
.stats-table td:first-child { transition: box-shadow var(--dur-2); }
.stats-scrolled th:first-child,
.stats-scrolled td:first-child {
  box-shadow: inset -1px 0 0 var(--border), 8px 0 12px -10px color-mix(in srgb, var(--text) 45%, transparent);
}

.stats-entity { display: inline-flex; align-items: center; gap: 10px; max-width: 240px; min-width: 0; vertical-align: middle; }
.stats-entity-name { min-width: 0; overflow: hidden; color: var(--text); font-weight: 600; text-overflow: ellipsis; }
.stats-team-short { display: none; }
.stats-team-mini { gap: var(--s-2); color: var(--text-2); font-size: var(--fs-small); font-weight: 600; }

.stats-player { color: var(--text); font-weight: 700; }

.stats-champ {
  display: inline-block;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--r-xs);
  background: var(--surface-3);
  object-fit: cover;
}
.stats-champ-fallback {
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  color: var(--text-2);
  font-size: 11px; /* Minimum für fette Kürzel (Abnahme R1) */
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}
.stats-champs { display: inline-flex; gap: 4px; vertical-align: middle; }
.stats-champs .stats-champ { width: 24px; height: 24px; }

/* inline-flex mit Symbol vorn hätte die Grundlinie unten am Symbol → Text säße höher als in den Nachbarzellen */
.stats-role { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); vertical-align: middle; }
.stats-role-icon { flex: none; color: var(--accent); }
.stats-role-frame { stroke: var(--muted); stroke-width: 1.2; opacity: .55; }

/* Siegquote: neutral --text, gefärbt + fett erst ab 5 Spielen, darunter zurückhaltend */
.stats-wr { color: var(--text); font-weight: 500; }
.stats-wr.stats-good, .stats-wr.stats-bad { font-weight: 700; }
.stats-wr-few { color: var(--text-2); }
.stats-good { color: var(--win); }
.stats-bad { color: var(--loss); }
.stats-diff { font-weight: 700; }
.stats-diff-few { color: var(--text-2); font-weight: 500; } /* unter 5 Spielen: wie .stats-wr-few, ohne Vorzeichenfarbe */

.stats-kda { color: var(--text); font-weight: 700; }
.stats-kda-top { color: var(--accent); }
.stats-kda3 { color: var(--text-2); }
.stats-sep { margin: 0 3px; color: var(--muted); }
.stats-d { color: color-mix(in srgb, var(--loss) 65%, var(--text-2)); }

/* Pick-Rate mit Gold-Balken 40 × 4 */
.stats-rate { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--s-2); vertical-align: middle; }
.stats-bar {
  position: relative;
  width: 40px;
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--surface-3);
}
.stats-bar::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--w, 0%);
  border-radius: inherit;
  background: var(--accent);
  transition: width var(--dur-3) var(--ease);
}

/* „Weitere anzeigen“ (nur Handy): Fußzeile der Tabelle, schließt die Hülle unten ab */
.stats-more { display: none; }

/* Lade-Platzhalter in Tabellenform */
.stats-skel-head { height: 40px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.stats-skel-row { display: flex; align-items: center; gap: var(--s-3); height: 44px; padding: 0 var(--s-4); border-bottom: 1px solid var(--border); }
.stats-skel-row:last-child { border-bottom: 0; }
.stats-skel-img { flex: none; width: 28px; height: 28px; }
.stats-skel-name { height: 12px; }
.stats-skel-nums { flex: 1 1 auto; height: 12px; max-width: 60%; margin-left: auto; opacity: .6; }

/* ---------- Handy ---------- */

@media (max-width: 759.98px) {
  /* Reiter klebrig über die volle Breite (Inhalt scrollt nicht seitlich darunter hervor) */
  .stats-tabs { margin-inline: -16px; padding-inline: var(--s-4); }

  /* Filter: Knopf mit Zähler + waagrechte Scroll-Reihe (wie Chips) */
  .stats-fbar { margin-top: calc(-1 * var(--s-1)); margin-right: -16px; }
  .stats-fbtn { display: inline-flex; }
  .stats-flist {
    flex-wrap: nowrap;
    padding: 4px 16px 4px 4px; /* Platz für den Fokus-Ring */
    margin: -4px 0;
    scroll-padding-inline: 4px 16px;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
  }
  .stats-flist::-webkit-scrollbar { display: none; }
  /* Weicher Rand wie .scroll-fade (app.css), aber 48 statt 32 px: die Selects sind breite, gleichförmige
     Flächen – bei 32 px wirkte der Anschnitt am Bildschirmrand noch hart */
  .stats-flist.scroll-fade.can-right:not(.can-left) {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
  }
  .stats-flist.scroll-fade.can-left:not(.can-right) {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent);
  }
  .stats-flist.scroll-fade.can-left.can-right {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 48px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 48px), transparent);
  }
  .stats-flist > * { scroll-snap-align: start; }
  .stats-f-league { width: 168px; }
  .stats-f-tournament { width: 208px; }
  .stats-f-patch, .stats-f-role { width: 138px; }
  .stats-f-min { width: 132px; }
  .stats-reset { margin-left: 0; }

  .stats-body { gap: var(--s-5); }
  .stats-table:not(.stats-scrolled) th:first-child,
  .stats-table:not(.stats-scrolled) td:first-child { box-shadow: inset -1px 0 0 var(--border); }
  .stats-table .table td:first-child,
  .stats-table .table th:first-child .th-btn { padding-left: var(--s-3); }
  .stats-entity { max-width: 150px; gap: var(--s-2); }
  .stats-bar { display: none; }

  /* Zeilen in Schritten zu 30 (stats.js) – sonst 5000 px ohne Tabellenkopf */
  .stats-table .stats-row-more { display: none; }
  .stats-tablebox.is-limited > .table-wrap {
    border-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  /* die letzte sichtbare Zeile ist kein :last-child → ihre Hairline trennt Tabelle und Fußzeile */
  .stats-more {
    display: flex;
    width: 100%;
    height: 48px;
    gap: var(--s-2);
    padding: 0 var(--s-4) 0 var(--s-3); /* Pfeil fluchtet mit den Champion-Bildern */
    border-top: 0;
    border-radius: 0 0 var(--r-md) var(--r-md);
    background: var(--surface);
    color: var(--text);
    font-weight: 600;
  }
  .stats-more:hover { border-color: var(--border); background: var(--surface-2); }
  .stats-more > .icon { color: var(--accent); }
  .stats-more-count { margin-left: auto; color: var(--text-2); font-weight: 500; }
}

@media (max-width: 639.98px) {
  .stats-team-long { display: none; }
  .stats-team-short { display: inline; }
  /* Highlights als wischbare Reihe, damit die Tabelle früher sichtbar ist */
  .stats-highlights {
    display: flex;
    gap: var(--grid-gap);
    margin: 0 -16px;
    padding: 0 16px 2px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .stats-highlights::-webkit-scrollbar { display: none; }
  .stats-highlights > * { flex: 0 0 84%; scroll-snap-align: start; }
  .stats-hl { column-gap: var(--s-3); padding: 14px; }
  .stats-hl-num { font-size: 26px; }
}