/* Statistik-Webapp fuer css_stats.
   Dunkles Schema, weil die Seite neben einem laufenden Spiel betrachtet wird
   und die Augen dann nicht auf helle Flaechen springen. Kein Framework,
   nur CSS-Grid - die Seite braucht keine Frontend-Toolchain. */

:root {
  --bg: #14171c;
  --panel: #1c2027;
  --panel-2: #232830;
  --line: #2f3541;
  --fg: #e6e9ef;
  --dim: #8b93a3;
  --accent: #4da3ff;
  --accent-2: #ffb454;
  --good: #57c98a;
  --bad: #e05c5c;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.5 "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* --- Kopfzeile --------------------------------------------------------- */

.topbar {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  margin-bottom: 26px;
}
.topbar .wrap {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-top: 14px;
  padding-bottom: 14px;
  flex-wrap: wrap;
}
.brand {
  font-weight: 700;
  font-size: 17px;
  color: var(--fg);
  text-decoration: none;
  letter-spacing: 0.3px;
}
.topbar nav { display: flex; gap: 4px; flex-wrap: wrap; }
.topbar nav a {
  color: var(--dim);
  text-decoration: none;
  padding: 6px 11px;
  border-radius: 6px;
  font-size: 14px;
}
.topbar nav a:hover { background: var(--panel-2); color: var(--fg); }
.topbar nav a.active { background: var(--accent); color: #0d1117; font-weight: 600; }

/* --- Werkzeugleiste: Zeitraum und Auto-Refresh -------------------------- */

/* Eigene Zeile unter der Navigation, eigene Farbe. Die Auswahl ist ein
   Zustand, keine Navigation - sie gehört nicht zwischen die Seitenlinks. */
.toolbar {
  background: var(--panel-2);
  border-top: 1px solid var(--line);
}
/* flex-wrap: nowrap auf der Zeile, damit der Zeitstempel nie umbricht. Das
   Umbrechen passiert innen in .tool-controls. */
.toolbar-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  padding-top: 9px;
  padding-bottom: 9px;
}
/* Die Schalter duerfen umbrechen, der Zeitstempel nicht. Deshalb die
   Zweiteilung: die linke Gruppe waechst und bricht bei Bedarf um, der
   Zeitstempel rechts ist flex-shrink-frei und bleibt auf der ersten Zeile.
   Vorher standen alle als Geschwister in einer brechenden Zeile, wodurch der
   Zeitstempel beim Einschalten des Auto-Refresh in die naechste Zeile
   rutschte - vier zusaetzliche Links sprengten die Breite. */
.tool-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
}
.tool-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--dim);
}
.tool-sep {
  flex: 0 0 1px;
  align-self: stretch;
  background: var(--line);
  margin: 0 4px;
}
.tool-stamp {
  margin-left: auto;
  font-size: 12px;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
  /* Nicht umbrechen und nicht schrumpfen: sonst stuende bei langem Text
     "updated" allein und die Uhrzeit eine Zeile darunter. */
  white-space: nowrap;
  flex: 0 0 auto;
}

/* Auf schmalen Fenstern ist die Uhrzeit das Erste, was weichen darf. Sie
   ist eine Bequemlichkeit, keine Information, auf die man wartet. */
@media (max-width: 560px) {
  .tool-stamp { display: none; }
}

/* Segmentierte Auswahl. Als Links gebaut, nicht als Radio-Inputs: funktioniert
   ohne JavaScript, ist mit der Tastatur bedienbar und laesst sich verlinken. */
.segmented { display: flex; gap: 3px; flex-wrap: wrap; }
.segmented a {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--panel);
  color: var(--dim);
  text-decoration: none;
  font-size: 13px;
  white-space: nowrap;
}
.segmented a:hover { background: var(--line); color: var(--fg); }
.segmented a.on { background: var(--accent); color: #0d1117; font-weight: 600; }
.segmented.small a { padding: 3px 7px; font-size: 12px; }

.btn-toggle {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 6px;
  background: var(--panel);
  color: var(--dim);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.btn-toggle:hover { background: var(--line); color: var(--fg); }
.btn-toggle.on { background: var(--good); color: #0d1117; }

/* --- Ueberschriften und Text ------------------------------------------- */

h1 { font-size: 25px; margin: 0 0 6px; }
h2 { font-size: 17px; margin: 0 0 12px; color: var(--fg); }
.sub { color: var(--dim); margin: 0 0 20px; font-size: 14px; }
/* .hint ist entfernt: die Erklaerungen, die frueher als Absatz unter den
   Tabellen standen, stehen jetzt in title="…" an den Spaltenkoepfen. Sie
   sind dort sichtbar, wo sie gebraucht werden, statt als Block unter jeder
   Tabelle. .foot lebt noch. */
.foot { color: var(--dim); font-size: 13px; }
.empty {
  color: var(--dim);
  background: var(--panel);
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 18px;
  text-align: center;
}
/* Der Fuss sitzt in einem eigenen <footer> mit einem inneren .wrap. Grund:
   .wrap setzt margin: 0 auto zum Zentrieren, und eine .foot-Regel mit
   margin ueberschrieb das. Genau so stand der Fuss linksbuendig statt wie
   Kopfzeile und Inhalt. Getrennte Elemente, deshalb kann die Fuss-Regel jetzt
   nur noch den Abstand nach oben setzen. */
.foot {
  margin-top: 34px;
  margin-bottom: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.foot p { margin: 0; color: var(--dim); font-size: 13px; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

code {
  background: var(--panel-2);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 13px;
}

/* --- Kennzahl-Kacheln -------------------------------------------------- */

section { margin-bottom: 28px; }
.cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 24px;
  margin-bottom: 28px;
}

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}

/* Spielerseite: sieben Kacheln in einer Zeile.
   Feste Spaltenzahl statt auto-fit, weil auto-fit die Breite aus der
   Fensterbreite ableitet: bei sieben Kacheln passte es knapp, und an einer
   andern Stelle waere eine achte allein umgebrochen. minmax(0, 1fr) statt
   1fr zwingt die Spalten, auch bei langen Zahlen ("2.334") zu schrumpfen,
   statt das Layout zu sprengen. */
.tiles-seven { grid-template-columns: repeat(7, minmax(0, 1fr)); }

/* Ab hier passt eine Kachel nicht mehr zur Beschriftung bei lesbarer Breite;
   die Zeile bricht dann bewusst um, statt zu ueberlaufen. */
@media (max-width: 1000px) {
  .tiles-seven { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .tiles-seven { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.tile {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 15px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tile-num { font-size: 25px; font-weight: 700; line-height: 1.1; }
.tile-label { color: var(--dim); font-size: 13px; }
.tile-live { border-color: var(--good); }
.tile-live .tile-num { color: var(--good); }

/* --- Balkenchart ohne JavaScript ---------------------------------------- */

.chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 130px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
}
.chart-col {
  flex: 1;
  min-width: 4px;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
  position: relative;
}
/* Bei 0 Kills ist die Hoehe 0%, der Balken ist unsichtbar. Das ist gewollt:
   der Tag existiert, hatte aber keine Kills. */
.chart-val {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--dim);
}

/* --- Tabellen ---------------------------------------------------------- */

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line); }
th {
  background: var(--panel-2);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--dim);
  font-weight: 600;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--panel-2); }

.num { text-align: right; font-variant-numeric: tabular-nums; }
th.num { text-align: right; }
.dim { color: var(--dim); }
.strong { font-weight: 600; }

/* --- Negativwertung ----------------------------------------------------- */

/* Teamkills und Selbstmoerde: kein Kill, aber ein Abzug. Bewusst kein rotes
   Alarmrot - das waere bei jedem einzelnen Treffer (Friendly Fire) zu
   streng und wuerde die Seite wie eine Fehlerliste aussehen lassen. */
.pen {
  color: var(--accent-2);
  font-weight: 700;
}

.penalties {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-2);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 28px;
}
.penalties-clean { border-left-color: var(--good); }

.pen-head { display: flex; align-items: baseline; gap: 10px; }
.pen-num { font-size: 22px; font-weight: 700; color: var(--accent-2); }
.penalties-clean .pen-num { color: var(--good); }
.pen-label { color: var(--dim); font-size: 14px; }

.pen-items {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: 14px;
}
.pen-items strong { font-size: 16px; }



/* "61 / 176" in einer Kachel: der Nenner gehoert daneben, nicht darunter.
   Etwas kleiner und matter, damit die Kachel optisch nicht zweipellig ist. */
.tile-of { font-size: 14px; color: var(--dim); font-weight: 400; }

/* Bei sieben Spalten ist die Kachel schmal (~140 px), darum kleineres Label
   und ein Wort pro Zeile statt zwei. */
.tiles-seven .tile { padding: 13px 12px; }
.tiles-seven .tile-label { font-size: 12px; }
/* Ohne das wuerde ein Label wie "Kills / deaths" die schmale Kachel
   sprengen und die Grid-Spalte auf ihre Mindestbreite aufziehen. */
.tiles-seven .tile-num { white-space: nowrap; }

/* --- Matches ----------------------------------------------------------- */

.crumbs { margin: 0 0 10px; font-size: 14px; }

/* Kopfzeile eines Matches: T | Endstand | CT.
   Der Endstand steht bewusst in der Mitte, er ist die Zahl, um die es geht. */
.score {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 22px;
  margin-bottom: 16px;
}
.side { display: flex; flex-direction: column; gap: 2px; }
.side-ct { text-align: right; }
.side-name { font-size: 13px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.5px; }
.side-rounds { font-size: 30px; font-weight: 700; line-height: 1.1; }
/* Dieselben Farben wie die Klassen team-t und team-ct, damit die Kopfzeile
   des Matches und die Badges in der Rundentabelle nicht auseinanderlaufen. */
.side-t .side-rounds   { color: #ffbfae; }
.side-ct .side-rounds  { color: #bcd8f7; }
.side-label { font-size: 12px; color: var(--dim); }

.mid { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.score-colon { font-size: 20px; color: var(--dim); line-height: 1; }

/* Kompaktes Punkteverhaeltnis in Listen. */
.scorebox { font-variant-numeric: tabular-nums; }
/* Dieselben Farben wie team-t und team-ct: T rot, CT blau. */
.scorebox .t  { color: #ffbfae; font-weight: 600; }
.scorebox .ct { color: #bcd8f7; font-weight: 600; }
.scorebox .sep { color: var(--dim); padding: 0 3px; }

/* Kleiner Hinweis in der Spaltenueberschrift, normal formatiert. */
.th-hint {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  opacity: 0.75;
}

.note-abort {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 13px;
  font-size: 13px;
  color: var(--dim);
  margin: 0 0 14px;
}
.note-abort { border-left: 3px solid var(--accent-2); }

/* Abgebrochene Runden: kein Ergebnis vorhanden, deshalb gedämpft. */
.row-aborted td { opacity: 0.62; }

/* Ereignisspalte einer Runde. */
.events { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.tag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
}
.tag-bomb    { background: #4a3a22; color: #ffd9a0; }
.tag-ok      { background: #24472f; color: #b6e8c8; }
.tag-bad     { background: #5c2a2a; color: #ffbfbf; }
.tag-hostage { background: #3a3350; color: #d6ccf0; }

/* --- Kleinteile -------------------------------------------------------- */

/* Volle Teamnamen ("Counter-Terrorist") statt "T"/"CT": die Kachel darf
   schmaler sein als der Text, deshalb kein min-width-Festwert und kein
   Zentrieren mehr. */
.team {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
}
/* Klassen heissen team-t und team-ct, nicht team-2 und team-3. Mit der
   Nummer haette die CSS-Regel die Kennung der Engine festhalten muessen
   (2 = T, 3 = CT) - und ein Zahlendreher in der Anzeige haette T blau und
   CT farblos gemacht. Genau das war kurzzeitig der Fall. */
.team-t {
  background: #7a3b2e;   /* Terrorists: rot */
  color: #ffbfae;
}
.team-ct {
  background: #2f4a6b;   /* Counter-Terrorists: blau */
  color: #bcd8f7;
}
.team-unknown { background: var(--panel-2); color: var(--dim); }

/* --- Kill-Feed ---------------------------------------------------------- */

/* Waffenspalte: kein Umbruch.
   Das "HS"-Zeichen stand als eigenes Wort neben der Waffe und wurde
   umgebrochen, sobald die Spalte knapp war. nowrap verhindert das.

   Damit die Tabelle dabei NICHT breiter wird, darf die Kartenspalte
   daneben umbrechen: nowrap auf der Waffenspalte zwingt den Browser, die
   Breite zuerst dort zu suchen, wo er sie findet. Waere auch die Kartenspalte
   nowrap, muesste das Table-Element wachsen. */
.killfeed td.weapon,
.killfeed th.weapon {
  white-space: nowrap;
}

/* Zeitspalten: "1:44 pm" ist zwei Zeichen breiter als "13:44". Ohne nowrap
   bricht genau diese Zelle um, sobald die Spalte knapp wird - und sie ist
   die schmalste in der Zeile, also die, die zuerst leidet.
   Das Karten-Spalte daneben darf weiter umbrechen, damit die Tabelle nicht
   wächst; dasselbe Prinzip wie bei der Waffenspalte. */
.killfeed td.when,
.killfeed th.when,
table td.when,
table th.when {
  white-space: nowrap;
}

/* Kompakter als vorher (padding 0 5px, 11px). Zusammen mit nowrap kostet die
   Spalte dadurch deutlich weniger, und die Halbspalte auf der Startseite
   traegt wieder Fuenf Spalten ohne Umbruch. */
.hs {
  background: var(--accent-2);
  color: #14171c;
  padding: 0 3px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  margin-left: 3px;
  /* Ohne vertical-align sitzt das Kuerzel auf der Grundlinie und hebt die
     Zeilenhoehe der ganzen Tabelle. */
  vertical-align: 1px;
}

/* Teamkill in einem Kill. Steht als Marker VOR dem Namen, damit die Zeile
   beim Lesen von links nach rechts auffaellt - ein Teamkill liest sich
   sonst wie ein Erfolg.
   Die Zelle traegt ohnehin den laengsten Inhalt der Zeile, der Marker
   verbreitert die Tabelle also nicht messbar. */
.tk {
  background: var(--accent-2);
  color: #14171c;
  padding: 0 4px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  margin-right: 4px;
  white-space: nowrap;
}
.tk-note {
  margin-left: 5px;
  font-size: 11px;
  white-space: nowrap;
}

/* Zeile mit Strafe: getoentet, aber nur so schwach, dass der Text lesbar
   bleibt. Kein Rot - der Server laeuft weiter, es war nur ein Fehlgriff. */
.row-friendly-fire { background: rgba(255, 180, 120, 0.07); }
.row-friendly-fire td:first-child { box-shadow: inset 3px 0 0 var(--accent-2); }
.row-friendly-fire a { color: var(--dim); }

.badge {
  background: var(--good);
  color: #0d1117;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}

/* Fuer Datensaetze, die unvollstaendig sind: eine unterbrochene Session
   (Server gestoppt, waehrend der Spieler verbunden war) ist kein Erfolg und
   auch kein Fehler, sondern eine Luecke. */
.badge-warn {
  background: var(--accent-2);
  color: #14171c;
  white-space: nowrap;
}

/* --- Serverstatus (A2S) ------------------------------------------------- */

/* Eine Zeile ueber den Kacheln: Name, Adresse, Belegung, Karte, VAC.
   Bewusst kein Panel wie die Kacheln - das ist eine Statuszeile, keine Zahl.
   Der Punkt links ist der Zustand in einem Blick; die Farbe traegt die
   Bedeutung, nicht eine Nummer, wie .team-t / .team-ct bei den Teams. */
.serverbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 9px 12px;
  margin-bottom: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
}
.serverbar code { font-size: 13px; }
/* .grow schiebt alles nachfolgende nach rechts; ohne sie klebt "checked …"
   direkt hinter der Karte. */
.serverbar .grow { flex: 1 1 auto; }
.serverbar .sep { color: var(--dim); }
.serverbar .sname { font-weight: 600; }
.serverbar .saddr { color: var(--dim); }
.serverbar .scount {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}
.serverbar .slabels,
.serverbar .smap { color: var(--dim); }
.serverbar .smap { font-style: italic; }
.serverbar .sfacts { display: flex; gap: 5px; }
.serverbar .swhen { font-size: 12px; color: var(--dim); white-space: nowrap; }

/* VAC ist ein Merkmal, kein Fehler. badge-warn (orange) waere hier eine
   falsche Warnung;/badge-ok gibt es deshalb eigens. */
.badge-ok {
  background: var(--dim);
  color: #0d1117;
  white-space: nowrap;
}

.serverbar .dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--good);
}
/* Grau statt Rot: der Server koennte gewartet werden. Rot wuerde "kaputt"
   behaupten, was man nicht weiss. */
.serverbar-down { border-color: var(--line); }
.serverbar-down .dot { background: var(--dim); }
.serverbar-down .sname { color: var(--dim); font-weight: 500; }

/* --- Suche und Sortierung ---------------------------------------------- */

.search { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.search input {
  flex: 1;
  min-width: 220px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--fg);
  padding: 9px 12px;
  border-radius: 7px;
  font-size: 14px;
}
.search input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.search button, .btn-reset {
  background: var(--accent);
  color: #0d1117;
  border: none;
  padding: 9px 16px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.btn-reset { background: var(--panel-2); color: var(--dim); font-weight: 400; }
.search button:hover, .btn-reset:hover { filter: brightness(1.1); text-decoration: none; }

.sortbar { margin-bottom: 12px; color: var(--dim); font-size: 13px; }
.sortbar a {
  margin-left: 6px;
  padding: 3px 9px;
  border-radius: 5px;
  background: var(--panel-2);
  color: var(--dim);
}
.sortbar a:hover { color: var(--fg); text-decoration: none; }
.sortbar a.on { background: var(--accent); color: #0d1117; font-weight: 600; }

@media (max-width: 640px) {
  .topbar .wrap { gap: 12px; }
  th, td { padding: 7px 8px; font-size: 13px; }
  .chart { height: 90px; }
}