:root{
--bg:#0b0d10; /* sehr dunkles Grau */
--card:#12161c; /* dunkle Card */
--muted:#8a8f98; /* graue Labels */
--text:#e9eef4; /* fast weiß */
--accent:#d43a2f; /* Apex-Rot */
--accent-2:#f5a623; /* warmes Orange */
--ok:#35c28a; /* grün */
--danger:#c23a35; /* rot */
--shadow: 0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;color:var(--text);background:var(--bg)}


.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:1px 20px;background:linear-gradient(90deg,#141a21, #0b0d10);border-bottom:1px solid #1e2630;box-shadow:var(--shadow)}
.brand{font-weight:800;letter-spacing:.5px}
.btn{display:inline-block;padding:10px 14px;border:1px solid #2a323e;background:#1a2029;border-radius:12px;text-decoration:none;color:var(--text);transition:transform .05s ease}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:linear-gradient(180deg, #e04b40, #b92f27);border-color:#a72821}
.btn.danger{border-color:#6a2020;background:#291516}


.container{display:grid;grid-template-columns: 1fr 340px;gap:18px;max-width:1400px;margin:24px 0 24px 60px;padding:0 12px}
.card{background: radial-gradient(120% 120% at 100% 0%, rgba(239,88,69,.05) 0%, transparent 40%), var(--card);border:1px solid #1e2630;border-radius:20px;box-shadow:var(--shadow);padding:18px}
.card h2{margin:0 0 12px 0;font-weight:800}


.input-card .row-form{display:grid;width: 120px;grid-template-columns: repeat(3, minmax(150px,1fr));gap:12px;align-items:end}
.field-group{display:flex;flex-direction:column;gap:6px}
.field-group label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.field-group input{padding:10px 12px;border:1px solid #27303b;background:#0f1318;color:var(--text);border-radius:12px;outline:none}
.field-group input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(212,58,47,.25)}


.hint{color:var(--muted);font-size:12px;margin-top:10px}
.toast{margin:8px 0 0 0;background:#13251b;border:1px solid #1b5036;color:#c7f3de;padding:8px 12px;border-radius:10px;display:inline-block}


/*.stats-card{position:sticky;top:86px;height:max-content}
.stats-grid{display:grid;grid-template-columns: 1fr;gap:16px}*/
.alert{background:#291516;border:1px solid #5b2424;color:#ffb3b3;padding:10px 12px;border-radius:12px;margin-bottom:10px}

/* ===== Tabellen: lesbarer, zentriert, responsive ===== */
.table {
  width: 100%;
  border-collapse: separate; /* bessere Abstände als collapse */
  border-spacing: 0;
  table-layout: auto;        /* verhindert „Zusammenquetschen“ */
}
.table thead th,
.table td {
  padding: 10px 12px;
  border-bottom: 1px solid #202936;
  text-align: center;        /* zentriert */
  vertical-align: middle;    /* mittig ausgerichtet */
  white-space: nowrap;       /* keine Zeilenbrüche in Zellen */
}
.table thead th {
  font-size: 12px;
  color: #a9b1bb;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid #2a3443;
}
.table.compact thead th,
.table.compact td {
  padding: 8px 10px;         /* etwas kompakter */
}
.table tr:hover { background: #0f141a; }

/* Hilfsklassen, falls du punktuell ausrichten willst */
.text-left   { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right  { text-align: right !important; }

/* Scroll-Hülle für schmale Screens */
.table-wrap {
  width: 100%;
  overflow: auto;
}
.table-wrap::-webkit-scrollbar { height: 10px; }
.table-wrap::-webkit-scrollbar-thumb {
  background: #2a323e; border-radius: 10px;
}
.table-wrap::-webkit-scrollbar-track {
  background: #0f1318; border-radius: 10px;
}

/* Liste: leichter Hover-Kontrast */
.list-card table tr:hover { background: #0f141a; }

/* --- Fix: Tabellen sauber innerhalb der runden Stats-Karte anzeigen --- */
.stats-card {
  overflow: hidden;               /* schneidet Linien an den Ecken sauber ab */
}

/* kleiner Seitenpuffer, damit die Linien nicht „am Rand kleben“ */
.stats-card .table-wrap {
  padding: 0 8px;                 /* horizontale Innenabstände */
}

/* optional: minimal mehr Luft in den Zellen der Stats-Tabellen */
.stats-card .table thead th,
.stats-card .table td {
  padding-left: 8px;
  padding-right: 8px;
}

/* Rückgängig: nicht die ganze Karte clippen – sonst schneidet es rechts ab */
.stats-card {
  overflow: visible; /* statt hidden */
}

/* Die Tabelle selbst bekommt die „Rundung/Clip“, nicht die ganze Karte */
.stats-card .table-wrap {
  overflow-x: auto;          /* horizontal scrollen, nichts wird abgeschnitten */
  overflow-y: hidden;
  border-radius: 14px;       /* Linien an den rechten/ linken Ecken sauber */
  padding: 0;                /* kein Puffer, damit nichts gegen den Rand gequetscht wird */
  margin: 0;                 /* keine negativen Margins nötig */
}

/* Tabelle darf breiter als die Box werden → scroll statt cut */
.stats-card .table {
  min-width: 100%;
  width: max-content;        /* wächst so breit wie nötig, bleibt aber scrollbar */
}

/* Lesbarkeit: etwas Luft innen */
.stats-card .table thead th,
.stats-card .table td {
  padding-left: 12px;
  padding-right: 12px;
}

/* Wenn die Trennlinien optisch zu weit bis an den Rand gehen, hier leicht einrücken */
.stats-card .table thead th:first-child,
.stats-card .table td:first-child { padding-left: 16px; }
.stats-card .table thead th:last-child,
.stats-card .table td:last-child  { padding-right: 16px; }

.input-card {
  grid-column: 1;
  background: #1b1f26;
  border: 1px solid #333;
  border-radius: 12px;
  padding: 24px 28px;
  max-width: 100%;
  width: 600px;
  box-shadow: 0 0 12px rgba(0,0,0,0.4);
}

/* --- Layout-Optimierung: Eingabe & Statistik nebeneinander --- */
.input-card {
  grid-column: 1;
  grid-row: 1;
}

.stats-card {
  grid-column: 2;       /* in rechte Spalte verschieben */
  grid-row: 1;          /* gleiche Zeile wie Eingabe */
  align-self: start;    /* oben bündig mit Eingabe */
}

/* Tabelle unten bleibt unterhalb der Eingabe */
.list-card {
  grid-column: 1;
  grid-row: 2;
}

/* Grid-Einstellungen anpassen: mehr Platz zwischen links/rechts */
.container {
  display: grid;
  grid-template-columns: 1fr 340px; /* linke Spalte flexibel, rechte fix */
  gap: 24px;                        /* Abstand zwischen den Spalten */
  max-width: 1400px;                /* etwas breiter für mehr Platz */
  margin: 24px 0 24px 60px;         /* Seite leicht nach links rücken */
  padding: 0 12px;
}

/* --- Spieler-Gruppierung in der Ergebnistabelle --- */

/* Vertikale Trennlinien zwischen Spielern */
.list-card .table tr td:nth-child(8),
.list-card .table tr th:nth-child(8),
.list-card .table tr td:nth-child(13),
.list-card .table tr th:nth-child(13),
.list-card .table tr td:nth-child(18),
.list-card .table tr th:nth-child(18) {
  border-right: 2px solid #2f2f2f;
}

/* Hintergrundfarben pro Spielerblock */
.list-card .table tr td:nth-child(4),
.list-card .table tr td:nth-child(5),
.list-card .table tr td:nth-child(6),
.list-card .table tr td:nth-child(7),
.list-card .table tr td:nth-child(8) {
  background-color: rgba(255, 99, 99, 0.7); /* Fred - leicht rötlich */
}

.list-card .table tr td:nth-child(9),
.list-card .table tr td:nth-child(10),
.list-card .table tr td:nth-child(11),
.list-card .table tr td:nth-child(12),
.list-card .table tr td:nth-child(13) {
  background-color: rgba(99, 255, 170, 0.7); /* Korre - leicht grünlich */
}

.list-card .table tr td:nth-child(14),
.list-card .table tr td:nth-child(15),
.list-card .table tr td:nth-child(16),
.list-card .table tr td:nth-child(17),
.list-card .table tr td:nth-child(18) {
  background-color: rgba(99, 170, 255, 0.7); /* Daniel - leicht bläulich */
}

/* Kopfzeilen angleichen */
.list-card .table thead th {
  background-color: #1f1f1f;
  border-bottom: 2px solid #333;
  text-align: center;
}

/* Einheitliche Zelloptik */
.list-card .table td, .table th {
  padding: 6px 8px;
  text-align: center;
  vertical-align: middle;
}

/* soll das Scoreboard verbessern */
/* Default: responsive (fällt auf 1–3 Spalten zurück) */
.board {
  display: grid;
  gap: 20px;
  align-items: start;
  justify-content: start;
  padding: 20px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Basis */
}

/* --- Einheitliche Höhe der Scoreboard-Kacheln pro Zeile --- */
.board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  align-items: stretch;    /* ✨ sorgt für gleiche Höhe */
  justify-content: start;
  padding: 20px;
}

/* Karten füllen nun automatisch die volle Höhe ihrer Grid-Zelle */
.board-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* verteilt Inhalte sauber vertikal */
  height: 100%;                   /* nimmt volle Zeilenhöhe ein */
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}


/* Groß: zuverlässig 3 Spalten */
@media (min-width: 1400px) {
  .board {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Mittel: 3 Spalten */
@media (max-width: 1399px) and (min-width: 1100px) {
  .board {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Klein: 2 Spalten */
@media (max-width: 1099px) and (min-width: 740px) {
  .board {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Very small: 1 Spalte */
@media (max-width: 739px) {
  .board {
    grid-template-columns: 1fr;
  }
}

/* Board-Container: nicht zentrieren, nach links rücken, breiter erlauben */
.board-container {
  max-width: 1600px;     /* mehr Platz als 1200px, sonst bleiben's 3 Spalten */
  width: 100%;
  margin: 24px 0 24px 20px;  /* linksbündig (nicht mehr auto-zentriert) */
  padding: 0 16px;
  text-align: left;
}

/* Karten gleichmäßiger gestalten */
.board-card {
  background-color: #1a1a1a;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 0 10px rgba(0,0,0,0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}

.board-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 14px rgba(255,255,255,0.1);
}

/* Toolbar */
.toolbar {
  display:flex; gap:8px; align-items:center;
  padding:10px 16px; border-bottom:1px solid #1e2630;
  background:linear-gradient(90deg,#141a21,#0b0d10);
}
.toolbar .spacer { flex:1 }

/* Karten */
.board-card {
  background: radial-gradient(120% 120% at 100% 0%, rgba(239,88,69,.05) 0%, transparent 40%), var(--card);
  border:1px solid #1e2630; border-radius:20px; box-shadow:var(--shadow); padding:18px;
}
.board-card h2 { margin: 0 0 12px; font-weight: 800; }

/* Metrik-Kacheln in Karten */
.metrics { display:grid; grid-template-columns: repeat(2,1fr); gap:12px; margin-top:12px }
.metric { background:linear-gradient(180deg,#161c24,#101419); border:1px solid #232d3a; border-radius:16px; padding:12px 14px }
.metric-label { font-size:12px; color:#a9b1bb; text-transform:uppercase; letter-spacing:.06em }
.metric-value { font-size:28px; font-weight:800 }
.footer-bar { text-align:center; color:#a9b1bb; font-size:12px; margin-top:8px }

/* ===== Oberer Statistikbalken ===== */
.top-metrics {
  display: flex;
  gap: 24px;
  align-items: center;
  margin-top: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;             /* bei kleinen Bildschirmen umbrechen */
}

.top-metrics .metric {
  background: linear-gradient(180deg, #161c24, #101419);
  border: 1px solid #232d3a;
  border-radius: 16px;
  padding: 10px 14px;
  min-width: 160px;
  text-align: center;
  box-shadow: 0 0 6px rgba(0,0,0,0.3);
}

.top-metrics .metric-label {
  font-size: 11px;
  color: #a9b1bb;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.top-metrics .metric-value {
  font-size: 20px;
  font-weight: 800;
  color: #e9eef4;
}

/* Tabellen in Karten */
.board-card .table-wrap { overflow:auto; border-radius:14px }
.board-card .table { min-width:100%; width:max-content }
.board-card .table thead th, .board-card .table td { padding-left:12px; padding-right:12px }
/* Nur in Scoreboard-Kacheln dürfen Zellen umbrechen */
.board-card .table thead th,
.board-card .table td {
  white-space: normal;
}

/* Wenn Tabellen trotzdem zu breit werden → horizontal scrollen, nicht das Grid sprengen */
.board-card .table-wrap {
  overflow-x: auto;
}


/* Controls/Badges */
.controls .btn { padding:8px 12px; }
.select { background:#1a2029; border:1px solid #2a323e; color:#e9eef4; border-radius:12px; padding:8px 10px; }
.badge { display:inline-block; padding:4px 8px; border:1px solid #2a323e; border-radius:999px; color:#a9b1bb; font-size:12px; }

/* Balken (Bars) */
.bars { display:grid; gap:6px; margin-top:8px }
.bar-row { display:flex; align-items:center; gap:8px }
.bar-row .label { width:80px; text-align:right; color:#a9b1bb; font-size:12px }
.bar-row .bar { flex:1; height:10px; background:#1a2029; border:1px solid #2a323e; border-radius:999px; overflow:hidden }
.bar-row .bar > div { height:100%; background:linear-gradient(180deg,#e04b40,#b92f27) }
.bar-row .val { width:70px; text-align:left; font-variant-numeric: tabular-nums }

/* Trend-Farben */
.up { color:#35c28a; display:inline-flex; vertical-align:middle }
.down { color:#c23a35; display:inline-flex; vertical-align:middle }
.neutral { color:#a9b1bb; display:inline-flex; vertical-align:middle }

/* Line-Charts */
.chart { width:100%; height:160px; }
.chart svg { width:100%; height:100%; display:block; }
.chart .grid line { stroke: #2a323e; opacity: .6; }
.chart .axis text { fill: #a9b1bb; font-size: 10px }
.chart .line { fill: none; stroke-width: 2.5 } 

/* ---- Schaden pro Kill Box kleiner darstellen ---- */
.spk-card {
  max-width: 400px;       /* Breite begrenzen */
  flex: 0 0 280px;        /* feste Breite im Grid */
  justify-self: start;    /* bleibt linksbündig */
}

/* Für kleine Bildschirme trotzdem vollbreit anzeigen */
@media (max-width: 1200px) {
  .spk-card {
    max-width: 100%;
    flex: 1 1 auto;
  }
}

/* ---- Schaden pro Kill Box kleiner darstellen ---- */
.platz {
  max-width: 400px;       /* Breite begrenzen */
  flex: 0 0 280px;        /* feste Breite im Grid */
  justify-self: start;    /* bleibt linksbündig */
}

/* Für kleine Bildschirme trotzdem vollbreit anzeigen */
@media (max-width: 1200px) {
  .platz {
    max-width: 100%;
    flex: 1 1 auto;
  }
}

/* === Gold-Akzent für bestimmte Kacheln === */
.board-card.gold{
  border-color: #8a6b1f; /* dunkles Gold */
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(245,166,35,.08) 0%, transparent 45%),
    var(--card);
  box-shadow:
    0 0 0 1px rgba(245,166,35,.12),
    0 10px 30px rgba(245,166,35,.12);
}
.board-card.gold h2{
  color: #f5c453; /* Überschrift leicht gold */
}

/* Tabellen in Gold-Kacheln minimal betonen */
.board-card.gold .table thead th{
  border-bottom-color: rgba(245,166,35,.35);
}
.board-card.gold .table tr:hover{
  background: rgba(245,166,35,.06);
}

/* Balken-Farbe in Gold-Kacheln (nur dort) */
.board-card.gold .bar-row .bar > div{
  background: linear-gradient(180deg,#f5c453,#b88a2c);
}

/* dezentes Hover-Glow */
.board-card.gold:hover{
  box-shadow:
    0 0 0 1px rgba(245,166,35,.18),
    0 12px 34px rgba(245,166,35,.18);
}

.board-card.gold h2 {
  text-align: center;
}

/*  Trendlinien für alle drei Spieler und Kategorien pro Spieler eine Kachel */ 
.player-trend .controls { margin: 6px 0 10px; }
.player-trend .controls select {
  background:#1a2029; border:1px solid #2a323e; color:#e9eef4;
  border-radius:12px; padding:6px 10px;
}

/* === Spieler-Trend-Kacheln: 3 große Mini-Charts untereinander === */

/* Container für jeden Mini-Chart-Block */
.player-trend {
  display: block !important;      /* statt grid/flex mit Spalten */
}

.player-trend .mini-chart {
  display: block;
  width: 100%;
  margin: 6px 0 10px 0;
}

/* Der eigentliche Chart-Bereich */
.player-trend .chart {
  display: block;
  width: 100% !important;   /* zwingt volle Breite innerhalb der Kachel */
  height: 130px;            /* hier kannst du später 110–150 testen */
  margin: 2px 0 0 0;
}

/* SVG im Chart immer vollflächig */
.player-trend .chart svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Titel über jedem Mini-Chart (Kills / Schaden / Teamplayer) */
.player-trend .mini-chart-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  color: #a9b1bb;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.chart .line {
  stroke-width: 0.9;
}

.chart .axis text {
  font-size: 5.5px;
  opacity: 0.8;
}

.chart .grid line {
  opacity: 0.25;
}