/* status.css — nur fuer /status. Die Seite hat eine eigene Aufteilung (Leiste, Mitte,
   rechte Spalte) und ein paar Zeilenformen, die es sonst nirgends gibt. Alles andere
   kommt aus ui.css und web.css — Karten, Kacheln, Balken, Abzeichen sind schon gebaut. */

.stat-page { padding-bottom: 20px; }

/* Die Leiste springt per `#…` zu den Abschnitten. Ohne diesen Abstand landet der Titel
   des Ziels unter dem mitlaufenden Seitenkopf — man springt und sieht nichts. */
#uebersicht, #spieler, #modi, #top10, #runden, #server, #infra, #entwicklung {
  scroll-margin-top: calc(var(--head-h) + 18px);
}

/* Das kleine graue Abzeichen im Seitenkopf darf die Ueberschrift nicht mitwachsen lassen. */
.stat-seed { vertical-align: middle; transform: translateY(-4px); }

/* ---------------------------------------------------------------- Kennzahlen */

.stat-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.stat-kpis .kpi-val small { font-size: 14px; font-weight: 700; color: var(--txt-2); letter-spacing: 0; }

/* ---------------------------------------------------------------- Aufteilung */

.stat-grid { display: grid; grid-template-columns: 200px 1fr 300px; gap: 22px;
             align-items: start; margin-top: 22px; }
.stat-side, .stat-mid, .stat-right { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
/* Die Leiste laeuft mit: wer unten bei "Gerade online" steht, soll ohne Zurueckscrollen
   zum naechsten Abschnitt springen koennen. */
.stat-side { position: sticky; top: calc(var(--head-h) + 16px); }

.stat-nav { padding: 6px 8px 10px; }
.stat-nav .snav-sec { padding-top: 8px; }

.stat-promo { display: flex; flex-direction: column; }
.stat-promo-art { height: 110px; background-size: cover; background-position: center;
                  border-bottom: 1px solid var(--line-soft); }
.stat-promo-txt { padding: 14px 15px 16px; display: flex; flex-direction: column; gap: 8px; }
.stat-promo-txt b { font-family: var(--f-head); font-size: 15px; font-weight: 800; }
.stat-promo-txt p { font-size: 12px; line-height: 1.5; color: var(--txt-3); }

/* ---------------------------------------------------------------- Modus-Quadrat */

/* Dasselbe Quadrat in drei Groessen: Runde, Server, Modusanteil. Die Farbe kommt aus
   `data-mode` am Vorfahren — hier steht deshalb keine einzige Farbe. */
.stat-mi { width: 36px; height: 36px; border-radius: var(--r-xs); display: grid; place-items: center; flex: none;
           background: color-mix(in srgb, var(--m, var(--blue)) 18%, transparent);
           border: 1px solid color-mix(in srgb, var(--m, var(--blue)) 34%, transparent);
           color: var(--m, var(--blue)); }
.stat-mi svg { width: 18px; height: 18px; }
.stat-mi-sm { width: 30px; height: 30px; }
.stat-mi-sm svg { width: 15px; height: 15px; }

/* ---------------------------------------------------------------- Diagramm */

.stat-zeit { flex-wrap: nowrap; }
.stat-zeit .pill { height: 30px; padding: 0 12px; font-size: 12.5px; }
.stat-zeit-note { display: flex; align-items: center; gap: 7px; margin-top: 10px;
                  font-size: 12px; color: var(--txt-4); }
.stat-zeit-note svg { width: 14px; height: 14px; }

/* ---------------------------------------------------------------- Letzte Runden */

.stat-games, .stat-srvs, .stat-modes, .stat-feed, .stat-toplist, .stat-online {
  display: flex; flex-direction: column; }

.stat-game { display: flex; align-items: center; gap: 12px; padding: 11px 0; }
.stat-game + .stat-game { border-top: 1px solid var(--line-soft); }
/* Jede Runde ist ein Link auf /spiel/<id> (27.09.2026) — beim Darueberfahren zeigt der Kartenname das an. */
a.stat-game:hover .stat-game-txt b, a.stat-game:focus-visible .stat-game-txt b { color: var(--blue-lite); }
.stat-game-txt { min-width: 0; flex: 1; }
.stat-game-txt b { display: block; font-size: 13.5px; font-weight: 600; overflow: hidden;
                   text-overflow: ellipsis; white-space: nowrap; }
.stat-game-txt i { display: block; font-style: normal; font-size: 12px; color: var(--m, var(--txt-3)); font-weight: 600; }
.stat-game-dur { font-size: 12.5px; font-weight: 700; color: var(--txt-2); white-space: nowrap; }

/* ---------------------------------------------------------------- Server je Modus */

.stat-srvs { margin-top: 16px; }
.stat-srv { display: flex; align-items: center; gap: 12px; padding: 11px 0; }
.stat-srv + .stat-srv { border-top: 1px solid var(--line-soft); }
.stat-srv-txt { min-width: 0; flex: 1; }
.stat-srv-txt b { display: block; font-size: 13.5px; font-weight: 700; }
.stat-srv-txt i { display: block; font-style: normal; font-size: 12px; color: var(--txt-3); }
.stat-srv-bar { width: 108px; flex: none; }

/* ---------------------------------------------------------------- Modusanteile */

.stat-mode { display: flex; align-items: center; gap: 11px; padding: 10px 0; }
.stat-mode + .stat-mode { border-top: 1px solid var(--line-soft); }
.stat-mode-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.stat-mode-top b { font-size: 13px; font-weight: 700; }
.stat-mode-top span { font-size: 11.5px; color: var(--txt-3); }
.stat-mode-pct { font-size: 12.5px; font-weight: 800; color: var(--m, var(--txt-2)); width: 38px; text-align: right; flex: none; }

/* ---------------------------------------------------------------- Zuletzt passiert */

.stat-feed .lrow-t1 { font-size: 12.5px; line-height: 1.45; white-space: normal; }

/* ---------------------------------------------------------------- Infrastruktur */

.stat-infra { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
/* Fuenf Zellen in zwei Spalten: die letzte bekommt die ganze Zeile, sonst steht da eine Luecke. */
.stat-infra > :last-child { grid-column: 1 / -1; }
.stat-cell { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: var(--r-sm);
             background: rgba(255,255,255,.022); border: 1px solid var(--line-soft); min-width: 0; }
.stat-cell b { display: block; font-size: 12.5px; font-weight: 700; overflow: hidden;
               text-overflow: ellipsis; white-space: nowrap; }
.stat-cell i { display: block; font-style: normal; font-size: 11px; color: var(--txt-4); }
.stat-cell-ico { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; flex: none;
                 background: var(--blue-ghost); border: 1px solid var(--blue-line); color: var(--blue); }
.stat-cell-ico svg { width: 15px; height: 15px; }
.stat-cell-ico-g { background: color-mix(in srgb, var(--green) 12%, transparent);
                    border-color: color-mix(in srgb, var(--green) 30%, transparent); color: var(--green); }

.stat-budget { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); }

/* ---------------------------------------------------------------- Bots */

.stat-bots { gap: 12px; display: flex; flex-direction: column; }
.stat-bot-row { display: flex; align-items: flex-start; gap: 11px; }
.stat-bot-row b { display: block; font-size: 13px; font-weight: 700; }
.stat-bot-row p { font-size: 12px; line-height: 1.55; color: var(--txt-3); margin-top: 3px; }

/* ---------------------------------------------------------------- Top 10 */

.stat-top-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.stat-toprow { display: flex; align-items: center; gap: 10px; padding: 9px 0; }
.stat-toprow + .stat-toprow { border-top: 1px solid var(--line-soft); }
.stat-place { width: 22px; text-align: center; font-size: 12px; font-weight: 800; color: var(--txt-4); flex: none; }
.stat-place-1 { color: var(--gold); }
.stat-place-2 { color: var(--txt-2); }
.stat-place-3 { color: var(--amber); }
.stat-topname { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis;
                white-space: nowrap; transition: color var(--t); }
.stat-topname:hover { color: var(--blue-lite); }
.stat-topval { margin-left: auto; font-size: 13.5px; font-weight: 800; flex: none; }

/* ---------------------------------------------------------------- Gerade online */

.stat-online { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 20px; }
.stat-who { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.stat-who-name { font-size: 13.5px; font-weight: 600; transition: color var(--t); }
.stat-who-name:hover { color: var(--blue-lite); }
.stat-who-srv { margin-left: auto; font-size: 11.5px; color: var(--txt-4); white-space: nowrap; }
/* Das Rang-Abzeichen ist fuer die Profilseite gebaut (32 px hoch). In einer Liste ist das
   eine Zeile zu viel — hier bleibt es bei Abzeichengroesse. */
.stat-rank { height: 20px; padding: 0 8px; font-size: 10.5px; border-radius: var(--r-xs); }

/* ---------------------------------------------------------------- Schmale Fenster */

@media (max-width: 1220px) {
  .stat-kpis { grid-template-columns: repeat(3, 1fr); }
  .stat-grid { grid-template-columns: 1fr 300px; }
  .stat-side { position: static; grid-column: 1 / -1; flex-direction: row; }
  .stat-side > * { flex: 1; }
  .stat-nav { display: grid; grid-template-columns: repeat(4, 1fr); }
  .stat-nav .snav-sec { display: none; }
}
@media (max-width: 900px) {
  .stat-grid { grid-template-columns: 1fr; }
  .stat-top-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .stat-kpis { grid-template-columns: 1fr 1fr; }
  .stat-side { flex-direction: column; }
  .stat-nav { grid-template-columns: repeat(2, 1fr); }
  .stat-infra { grid-template-columns: 1fr; }
  .stat-infra > :last-child { grid-column: auto; }
  .stat-srv-bar { display: none; }
  .stat-zeit { flex-wrap: wrap; }
}