:root{--bg:#0f172a;--card:#111827;--text:#e5e7eb;--muted:#94a3b8;--accent:#22c55e;--danger:#ef4444;--border:#334155;--nav:#0b1220;--btn:#1f2937;--btn2:#374151;--radius:.5rem;--radius-sm:.35rem}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;margin:0}a{color:inherit}
.topnav{display:flex;gap:.5rem;align-items:center;padding:.75rem 1rem;border-bottom:1px solid var(--border);background:var(--nav);position:sticky;top:0;z-index:9}
.topnav .brand{font-weight:700;margin-right:.5rem;white-space:nowrap}
.topnav a{color:var(--text);text-decoration:none;padding:.35rem .6rem;border-radius:var(--radius-sm)}
.topnav a.btn{background:var(--btn)}.topnav a.btn.secondary{background:var(--btn2)}
.spacer{flex:1}
.user{color:var(--muted);font-size:1.2rem}
.container{max-width:1000px;margin:1rem auto;padding:0 1rem}
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 1rem;
}
.card {
  background: var(--card);
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: .5rem;
}
.btn{background:var(--accent);color:black;border:none;padding:.5rem .9rem;border-radius:.35rem;cursor:pointer}.btn.secondary{background:#64748b;color:#fff}.btn.danger{background:var(--danger);color:#000}.btn:active{transform:scale(0.99)}

.btn:disabled {
    background-color: #ccc;   /* grauer Hintergrund */
    color: #666;             /* graue Schrift */
    cursor: not-allowed;     /* zeigt an, dass Klick nicht möglich ist */
    opacity: 0.7;            /* leicht transparent */
    }

.inline{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:.5rem 0}
label{display:flex;flex-direction:column;font-size:1.1rem;gap:0.25rem}
.checkbox{flex-direction:row;align-items:center;gap:.5rem;margin-left:2rem}

input[type=text],
input[type=password],
input[type=number]{
  background:#0b1324;
  color:var(--text);
  border:1px solid var(--border);
  border-radius:.35rem;
  padding:.5rem .6rem;
  outline:none
}
input[type=number]{appearance:textfield}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{margin:0;appearance:none}
.score{width:4.5rem;text-align:center}

.login-page input[name="username"],
.login-page #username{
  background: #0b1324;      /* oder var(--input-bg) */
  color: #cbd5e1;           /* z. B. ruhiger als var(--text) */
  font-size: 1.5rem;       /* Textgröße erhöhen */
  border-color: var(--border);
}

.login-page input[name="username"]::placeholder,
.login-page #username::placeholder{
  color: #94a3b8;           /* dezenter Platzhalter */
  opacity: .9;
}

/* Falls Autofill grell ist (Chrome/Safari) */
.login-page input[name="username"]:-webkit-autofill,
.login-page #username:-webkit-autofill{
  -webkit-text-fill-color: #cbd5e1;
  box-shadow: 0 0 0 1000px #0b1324 inset;
}

/* Nur auf der Login-Seite – Nutzername: weißer BG + schwarzer Text */
.login-page input#username,
.login-page input[name="username"] {
  background: #ffffff;     /* weißer Hintergrund */
  color: #000000;          /* schwarze Schrift */
  font-size: 1.5rem;       /* deine aktuelle Größe beibehalten */
  border-color: var(--border);
}

/* Platzhalter-Ton (dezent grau) */
.login-page input#username::placeholder,
.login-page input[name="username"]::placeholder {
  color: #6b7280;          /* z. B. Slate-500 */
  opacity: .95;
}

/* WebKit-Autofill überschreiben (Chrome/Safari), sonst wird's wieder hellgelb/weiß mit anderer Textfarbe */
.login-page input#username:-webkit-autofill,
.login-page input[name="username"]:-webkit-autofill {
  -webkit-text-fill-color: #000000;
  box-shadow: 0 0 0 1000px #ffffff inset;
}

/* ===== Register-Seite: Nutzername & optional Passwort weiß/schwarz ===== */

/* Nutzername auf der Register-Seite */
.register-page input#reg-username,
.register-page input[name="username"] {
  background-color: #ffffff;    /* weißer Hintergrund */
  color: #000000;               /* schwarze Schrift */
  border-color: var(--border);
  font-size: 1.5rem;            /* wenn du die größere Schrift hier auch willst */
}

/* Platzhalter etwas dezenter grau */
.register-page input#reg-username::placeholder,
.register-page input[name="username"]::placeholder,
.register-page input#reg-password::placeholder,
.register-page input[name="password"]::placeholder {
  color: #6b7280;               /* z. B. Slate-500 */
  opacity: .95;
}

/* WebKit-Autofill überschreiben (Chrome/Safari) */
.register-page input#reg-username:-webkit-autofill,
.register-page input[name="username"]:-webkit-autofill,
.register-page input#reg-password:-webkit-autofill,
.register-page input[name="password"]:-webkit-autofill {
  -webkit-text-fill-color: #000000;              /* Text bleibt schwarz */
  box-shadow: 0 0 0 1000px #ffffff inset;        /* Hintergrund bleibt weiß */
}

.table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--border)}
.table th,
.table td{border-bottom:1px solid var(--border);padding:.55rem .6rem;text-align:left;vertical-align:middle}

.table {background: var(--card); border: 1px solid var(--border); }
.table th,
.table td{background: var(--card); border-bottom: 1px solid var(--border); }

.table-wrap{width:auto;overflow-x:auto;border-radius:.5rem;border:1px solid var(--border);background:var(--card)}
.alert{background:#1f2937;border-left:4px solid var(--danger);padding:.6rem .8rem;margin:.6rem 0;border-radius:.35rem}

.footer{padding:1rem;text-align:center;color:var(--muted)}.stats{display:flex;gap:.5rem;flex-wrap:wrap;margin:.5rem 0}.chip{background:#1f2937;border:1px solid var(--border);padding:.3rem .6rem;border-radius:999px}
.stack-vertical{display:grid;grid-template-columns:1fr;gap:1rem}
.btn.btn-sm{padding:.35rem .55rem;border-radius:.3rem;font-size:.92rem}
@media (max-width:640px){.table.games td.matchtext{white-space:normal}}
.ko{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.match{display:flex;justify-content:space-between;align-items:center;background:var(--card);border:1px solid var(--border);padding:.45rem;border-radius:.35rem;margin:.45rem 0}
@media (max-width:900px){.ko{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.ko{grid-template-columns:1fr}}

/* Einspaltiges Layout wie bei Gruppen */
.stack-vertical { display:grid; grid-template-columns:1fr; gap:1rem; }

/* Kompakte KO-Tabellen wie bei Gruppenspielen */
.table.games {table-layout:fixed; font-size:inherit; }
.table.games th,
.table.games td { padding:.55rem .6rem; line-height:1.2; }
.table.games td.scoretext { text-align:center; white-space:nowrap; }
.table.games td.entry .inline-compact { gap:.4rem; margin:0; }
.score.score-sm { width:3.2rem; padding:.35rem .45rem; font-size:1.3rem; }
.btn.btn-sm { padding:.35rem .55rem; border-radius:.3rem; font-size:1.3rem; }
@media (max-width:640px){ .table.games td.matchtext{ white-space:normal; } }

/* Kopf-/Zellenzentrierung für Punktespalten und Ergebnis */
.th-center { text-align: center; }
.td-center { text-align: center; }

/* Ergebnis-Header mittig über den Zahlen in der Spiele-Tabelle */
.table.games th:last-child {
  text-align: left;}

/* (Besteht schon, hier nur zur Sicherheit mit gleicher Spezifität)
   Ergebnis-Zellen mittig */
.table.games td.scoretext {
  text-align: center;
}
/* In der Ranglisten-Tabelle: ab der 3. Spalte (Pkt, +/- und + : -) zentrieren */
.table:not(.games) th:nth-child(n+3),
.table:not(.games) td:nth-child(n+3) {
  text-align: center;
}

.vs {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin: 0 .4rem;
  color: var(--muted);
  font-weight: 1200;
}
.vs::before,
.vs::after {
  content: "•";
  color: var(--muted);
  opacity: .8;
}
.round-badge {
  display: inline-block;
  min-width: 1.8rem;
  padding: 0.06rem 0.4rem;
  margin-left: .35rem;
  text-align: center;
  font-weight: 700;
  color: var(--text);
  background: #1f3937;             /* passend zu deinem Theme */
  border: 1px solid var(--border);
  border-radius: .35rem;
}
/* Erste Spalte in der Rangliste schmaler machen */
.table:not(.games) th:first-child,
.table:not(.games) td:first-child {
  width: 2rem;      /* kannst du bei Bedarf weiter verkleinern: 2.5rem oder 2rem */
  padding-right: .3rem;
  text-align: center; /* optional: Nummern mittig */
}
.stage-title.stage-underline {
  position: relative;
  display: inline-block;
  margin: .75rem 0 .75rem;
  padding-bottom: .25rem;
  font-weight: 800;
  color: var(--text);
}
.stage-title.stage-underline::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--border));
  border-radius: 2px;
  opacity: .85;
}
.amp {
  color: var(--accent, #0a84ff); /* fallback falls keine CSS-Variable definiert ist */
  font-weight: 700;
  padding: 0 0.25rem;
}
/* Action-Zelle: Buttons nebeneinander */
.table td.actions {
  display: flex;
  gap: .5rem;           /* Abstand zwischen Buttons */
  align-items: center;  /* vertikal zentriert */
  flex-wrap: wrap;      /* falls wenig Platz, umbrechen statt überlaufen */
}
/* Forms in der Action-Zelle ohne Zusatzabstände */
.table td.actions form {
  margin: 0;
  display: inline-block;
}
/* Buttons etwas kompakter (optional) */
.table td.actions .btn {
  padding: .35rem .6rem;
  font-size: 0.875rem;
}

/* Spiele-Tabellen: deterministische Spaltenbreiten */
.table.games {
  table-layout: fixed; /* kann bleiben, wird jetzt von colgroup gelenkt */
}

/* Breitensteuerung über colgroup */
.table.games col.col-score  { width: 18%; }   /* Ergebnis schmal & fix */
.table.games col.col-entry  { width: 18%; }  /* Eingabe fix, genug für Formular */
.table.games col.col-match  { width: auto; }   /* Match bekommt den Rest */

/* Match-Text: kein hartes Abschneiden */
.table.games td.matchtext {
  white-space: normal;      /* Umbruch erlauben */
  overflow: visible;        /* nicht abschneiden */
  text-overflow: clip;      /* keine "..." */
  word-break: normal;   /* lange Namen umbrechen */
}

/* Ergebnis mittig und kompakt – wie gehabt */
.table.games th:nth-child(2),
.table.games td:nth-child(2) {
  text-align: center;
  white-space: nowrap; /* einzeilig ok */
}

/* Eingabe kompakt – passt zu deinen .score/.btn-sm Klassen */
.table.games td.entry .inline-compact {
  gap: .4rem;
}


/* Eingabe-Zelle in der Spiele-Tabelle: Inhalte nebeneinander */
.table.games td.entry {
  white-space: nowrap;              /* verhindert automatische Zeilenumbrüche */
}

/* Falls mehrere Formulare/Container in der Zelle stehen: inline & kompakt */
.table.games td.entry form,
.table.games td.entry .inline-compact {
  display: inline-flex;             /* nebeneinander statt untereinander */
  align-items: center;              /* vertikal mittig */
  gap: .4rem;                       /* Abstand zwischen S1, –, S2, Button */
  margin: 0;                        /* keine Zusatzabstände */
}

/* Die Input-Felder selbst eher schmal halten, damit nichts umbricht */
.table.games td.entry .score,
.table.games td.entry input[type="number"],
.table.games td.entry input[type="text"] {
  width: 3.6rem;                    /* ggf. 3.6rem, je nach Schriftgröße */
  text-align: center;
  font-size: 1.3rem;                  /* nicht zu groß, sonst sprengt die Zeile */
  box-sizing: border-box;
}

/* Der "Speichern"-Button kompakt */
.table.games td.entry .btn {
  padding: .35rem .6rem;            /* kompakt, damit die Zeile nicht > 1 Zeile wird */
  font-size: .92rem;
}