:root {
    --bg: #0a0c10;
    --panel: rgba(24, 27, 35, 0.72);
    --panel-border: rgba(255, 204, 51, 0.25);
    --accent: #ffcc33;
    --accent-glow: rgba(255, 204, 51, 0.35);
    --correct: #2ecc71;
    --wrong: #e74c3c;
    --timeout: #a7acb8;
    --text: #f5f5f5;
    --muted: #a7acb8;
}

* { box-sizing: border-box; }

/* html braucht denselben dunklen Grundton wie body - auf mobilen Browsern
   weicht 100vh vom tatsaechlichen sichtbaren Viewport ab (Adressleiste
   ein-/ausblendend), wodurch ein paar Pixel des UNGESTYLTEN html-
   Hintergrunds unten durchscheinen konnten (Nutzer: Footer "ragt ins graue
   rein"). min-height:100dvh (dynamic viewport height) zusaetzlich zu 100vh
   als Fallback behebt das zusaetzlich fuer Browser, die es unterstuetzen. */
html {
    background: var(--bg);
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    color: var(--text);
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;

    background:
        radial-gradient(ellipse at center, rgba(10, 12, 16, 0.35) 0%, rgba(6, 7, 10, 0.88) 75%),
        url('assets/bg.jpg') center center / cover no-repeat fixed;
}

/* Waehrend einer laufenden Solo-Runde (siehe solo.js) von oben statt
   zentriert ausrichten - sonst rechnet body die vertikale Mitte neu, sobald
   die native Tastatur den Viewport von unten schrumpft (bis zu einem
   Drittel des Bildschirms), was den kompletten Inhalt inkl. Timer sichtbar
   nach oben "rutschen" laesst. Von oben ausgerichteter Inhalt bewegt sich
   dagegen gar nicht erst, wenn der Viewport von UNTEN kleiner wird. */
body.solo-playing {
    justify-content: flex-start;
}

.hidden { display: none !important; }

/* --- Zurueck-Link, auf jeder Unterseite oben links --- urspruenglich
   position:fixed ueber dem Inhalt, hat aber auf kurzen/mobilen Viewports
   das Logo im h1 verdeckt (body zentriert vertikal, bei wenig Inhalt landet
   das h1 nahe am fixierten Link). Jetzt normaler Flex-Fluss-Bestandteil VOR
   dem h1 (align-self:flex-start haelt es trotzdem linksbuendig, waehrend
   der Rest der Spalte zentriert bleibt) - kein Overlap mehr moeglich, auf
   Kosten des "bleibt beim Scrollen sichtbar"-Verhaltens (bei einem simplen
   Zurueck-Link verschmerzbar). */
.back-link {
    align-self: flex-start;
    color: var(--muted);
    text-decoration: none;
    font-size: 0.9rem;
    background: rgba(24, 27, 35, 0.6);
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    margin-bottom: 20px;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.back-link:hover {
    color: var(--accent);
    border-color: var(--accent);
}

h1 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    font-family: 'Anton', 'Segoe UI', sans-serif;
    font-weight: 400;
    letter-spacing: 0.03em;
    font-size: clamp(2.2rem, 5vw, 4rem);
    margin: 0 0 8px;
    color: var(--accent);
    text-shadow: 0 0 18px var(--accent-glow), 0 4px 12px rgba(0, 0, 0, 0.6);
    text-transform: uppercase;
}

/* Deutlich groesser als die Textzeile und nur sanft (statt kreisrund)
   abgerundet - ein voller Kreis hat bei diesem Motiv (Professor samt
   wegfliegender Perruecke, die bis an die Bildraender reicht) zu viel vom
   eigentlichen Bild weggeschnitten und nur den dunklen Hintergrund stehen
   lassen. */
.logo-icon {
    height: clamp(3.6rem, 10vw, 6.5rem);
    width: auto;
    border-radius: 18px;
    box-shadow: 0 0 20px var(--accent-glow);
}

.subtitle {
    color: var(--muted);
    margin-bottom: 32px;
    font-size: 1.1rem;
}

.panel {
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 20px;
    padding: 36px 44px;
    max-width: 720px;
    width: 100%;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.timer {
    font-family: 'Anton', 'Segoe UI', sans-serif;
    font-weight: 400;
    font-size: clamp(3.2rem, 11vw, 6.5rem);
    color: var(--accent);
    text-shadow: 0 0 24px var(--accent-glow);
    line-height: 1;
    margin: 8px 0 24px;
    font-variant-numeric: tabular-nums;
    transition: color 0.2s ease, text-shadow 0.2s ease;
}

.timer.low {
    color: var(--wrong);
    text-shadow: 0 0 28px rgba(231, 76, 60, 0.55);
}

.score {
    font-size: 1.6rem;
    margin-bottom: 24px;
}

.score strong {
    font-family: 'Anton', 'Segoe UI', sans-serif;
    font-weight: 400;
    font-size: 2.4rem;
    color: var(--correct);
}

.question {
    font-size: clamp(1.6rem, 4.5vw, 2.6rem);
    font-weight: 600;
    margin: 24px 0;
    line-height: 1.3;
}

/* Nur im Solo-Modus (siehe solo.html) - dort teilt sich die Frage den
   Bildschirm mit der (nativen, mobilen) Tastatur und dem Antwortfeld;
   kleiner + weniger Rand drumherum, damit beides gemeinsam auf einen
   Bildschirm passt (Nutzeranforderung). Quizmaster/Kandidat behalten die
   groessere Standardgroesse (dort gibt es kein konkurrierendes
   Tastatur-Problem). */
.question-compact {
    font-size: clamp(1.1rem, 3.2vw, 1.6rem);
    margin: 10px 0;
}

.answer {
    font-size: clamp(1.4rem, 3.5vw, 2rem);
    color: var(--correct);
    font-weight: 700;
    margin: 8px 0 32px;
}

.controls {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

button {
    font-family: 'Anton', 'Segoe UI', sans-serif;
    font-weight: 400;
    letter-spacing: 0.02em;
    font-size: 1.3rem;
    padding: 18px 36px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    color: #fff;
    transition: transform 0.08s ease, box-shadow 0.15s ease;
}

button:hover { transform: translateY(-2px); }
button:active { transform: scale(0.96); }

.btn-correct { background: var(--correct); box-shadow: 0 6px 20px rgba(46, 204, 113, 0.35); }
.btn-wrong { background: var(--wrong); box-shadow: 0 6px 20px rgba(231, 76, 60, 0.35); }
.btn-secondary { background: #3a3f4b; }
.btn-primary { background: var(--accent); color: #1a1a1a; box-shadow: 0 6px 20px var(--accent-glow); }

.btn-twitch {
    display: inline-block;
    background: #9146ff;
    color: #fff;
    box-shadow: 0 6px 20px rgba(145, 70, 255, 0.35);
    font-family: 'Anton', 'Segoe UI', sans-serif;
    font-size: 1.2rem;
    padding: 16px 32px;
    border-radius: 12px;
    text-decoration: none;
}

.btn-twitch:hover { transform: translateY(-2px); }

.btn-primary:disabled, button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.form-row {
    text-align: left;
    margin-bottom: 20px;
}

.form-row label {
    display: block;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 0.95rem;
}

.form-row input[type="text"] {
    width: 100%;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(10, 12, 16, 0.6);
    color: var(--text);
    font-size: 1.05rem;
}

.form-row input[type="text"]:focus {
    outline: none;
    border-color: var(--accent);
}

.form-row select {
    width: 100%;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(10, 12, 16, 0.6);
    color: var(--text);
    font-size: 1.05rem;
}

.form-row select:focus {
    outline: none;
    border-color: var(--accent);
}

.radio-group {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.radio-group label {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(10, 12, 16, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 10px 16px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text);
    font-size: 1rem;
}

.status-line {
    margin-top: 16px;
    font-size: 0.95rem;
    color: var(--muted);
}

.status-line.connected { color: var(--correct); }
.status-line.disconnected { color: var(--wrong); }

.error-banner {
    background: rgba(231, 76, 60, 0.15);
    border: 1px solid var(--wrong);
    color: #ffb3ab;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: left;
}

.hint {
    color: var(--muted);
    font-size: 0.9rem;
    margin-top: 24px;
}

/* Links in .hint/.status-line hatten bisher KEINE eigene Farbe und fielen
   auf die Browser-Standardfarbe (dunkelblau) zurueck - auf dem dunklen
   Hintergrund schlecht lesbar (Nutzeranforderung). */
.hint a, .status-line a {
    color: var(--accent);
}

.hint a:hover, .status-line a:hover {
    text-decoration: underline;
}

/* --- Marken-Verknuepfung zu den Twitch-Kanaelen (siehe index.html etc.) -
   NICHT auf overlay.html, das ist eine transparente OBS-Browser-Source und
   soll keine zusaetzlichen sichtbaren Elemente ins Stream-Bild bringen. --- */
.site-footer {
    margin-top: 32px;
    color: var(--muted);
    font-size: 0.85rem;
}

.site-footer a {
    color: #9146ff;
    text-decoration: none;
    font-weight: 600;
}

.site-footer a:hover {
    text-decoration: underline;
}

/* --- Landingpage-Navigation (index.html) --- */
.nav-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 22px 20px;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}

.nav-link:hover {
    background: var(--accent-glow);
    border-color: var(--accent);
    transform: translateY(-2px);
}

/* Groesser dargestellt, seit die erklaerenden Untertitel (Nutzeranforderung)
   entfallen sind - die Links tragen jetzt allein den Titel. */
.nav-link-title {
    font-family: 'Anton', 'Segoe UI', sans-serif;
    font-size: 1.7rem;
    color: var(--text);
    letter-spacing: 0.02em;
}

/* --- Kategorie-Vorschlaege (fuellen nur das Freitextfeld) --- */
.chip-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.chip {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--text);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.chip:hover {
    background: var(--accent-glow);
    border-color: var(--accent);
}

/* --- Solo-Modus, laufende Runde: Timer/Punkte/Frage bleiben oben "kleben"
   (position:sticky), statt mit dem Rest zu scrollen - soll zusammen mit
   interactive-widget=resizes-content (siehe solo.html) verhindern, dass die
   native mobile Tastatur die Frage verdeckt (Nutzeranforderung: "im Spiel
   muss die Frage... dauerhaft sichtbar sein"). Kein 100%-iges Versprechen -
   das haengt am Ende vom jeweiligen mobilen Browser ab. */
/* Timer + Punkte + Frage stecken zusammen in EINEM sticky-Block (siehe
   solo.html: .running-header), statt jedes Element einzeln mit top:0 zu
   versehen - mehrere Geschwister mit identischem top:0 wuerden sich beim
   tatsaechlichen Scrollen ueberlagern statt sich zu stapeln. So bleibt die
   ganze Kopfzeile (inkl. Zeit) auch bei geoeffneter Tastatur im Blick. */
.running-header {
    position: sticky;
    top: 0;
    background: var(--panel);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding-bottom: 6px;
}

/* Timer/Punkte sind sonst riesig ausgelegt (fuer Quizmaster/Kandidat auf
   grossem Bildschirm/Stream gedacht) - im Solo-Modus muessen sie zusammen
   mit Frage + Tastatur auf einen (durch die Tastatur bereits verkleinerten)
   Bildschirm passen, deutlich kompakter und mit minimalem Abstand
   dazwischen (Nutzeranforderung: "insbesondere Zeit und Punkte müssen
   kleiner werden und enger zusammenrücken"). eigene margin/gap-Werte statt
   der Basis-Klassen, damit sich die Abstaende nicht addieren. */
.running-header .timer {
    font-size: clamp(1.6rem, 5vw, 2.2rem);
    margin: 0;
}

.running-header .score {
    font-size: 0.9rem;
    margin: 0;
}

.running-header .score strong {
    font-size: 1.1rem;
}

.running-header .question-compact {
    margin: 4px 0 0;
}

/* Restliche Innenabstaende der laufenden Solo-Runde ebenfalls knapper - jede
   eingesparte Zeile hilft, wenn die Tastatur schon ein Drittel des
   Bildschirms wegnimmt. */
#view-running {
    padding-top: 16px;
    padding-bottom: 16px;
}

#view-running #feedback-banner {
    margin-top: 6px;
}

/* --- Fragen-Vorschau vor Rundenstart (Qualitaetssicherung) --- */
.queue-preview {
    margin-top: 20px;
    text-align: left;
    max-height: 320px;
    overflow-y: auto;
}

.queue-preview-check {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* --- Rückblick (Recap) am Rundenende --- */
.recap {
    margin-top: 28px;
    text-align: left;
    max-height: 340px;
    overflow-y: auto;
}

.recap-title {
    margin: 0 0 12px;
    font-size: 1.1rem;
    color: var(--accent);
}

/* --- Admin-Statusseite (siehe admin.html tab-status) --- */
.status-list {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    text-align: left;
}

.status-list li {
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.recap-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.recap-list li {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    gap: 10px;
    align-items: center;
    background: rgba(10, 12, 16, 0.5);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.95rem;
}

.recap-question { color: var(--text); }
.recap-answer { color: var(--correct); font-weight: 700; white-space: nowrap; }
.recap-wrong .recap-answer { color: var(--wrong); }
.recap-timeout .recap-answer { color: var(--timeout); }

/* --- Tabellen (Scoreboard, Admin-Fragenliste) --- */
.scoreboard-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.scoreboard-table th {
    color: var(--muted);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.scoreboard-table td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    vertical-align: middle;
}

/* Eigener Score auf dem oeffentlichen Scoreboard hervorgehoben (siehe
   scoreboard.js: landing:whoami) - Nutzeranforderung, damit man sich in
   einer langen Liste sofort findet. */
.scoreboard-table tr.my-score td {
    font-weight: 700;
    color: var(--accent);
    background: rgba(255, 204, 51, 0.1);
}

.scoreboard-table input[type="text"] {
    width: 100%;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(10, 12, 16, 0.6);
    color: var(--text);
    font-size: 0.95rem;
}

/* --- Scroll-Wrapper fuer Tabellen: auf schmalen Bildschirmen (Smartphone)
   reicht der Platz nicht fuer alle Spalten nebeneinander, ohne Spaltenbreiten
   bis zur Unlesbarkeit zusammenzuquetschen (z.B. die Frage/Antwort-
   Eingabefelder im Admin-Bereich, oder die Datum-Spalte im Scoreboard, die
   sonst ueber den Seitenrand hinaus lief). min-width auf der Tabelle
   erzwingt eine nutzbare Mindestbreite pro Spalte, der Wrapper macht den
   Rest per Wischgeste horizontal scrollbar statt den Seitenrahmen zu
   sprengen. Auf breiten Bildschirmen ist das ein No-Op (kein Overflow, also
   auch kein Scrollbalken). */
.table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-scroll .scoreboard-table {
    min-width: 480px;
}

/* Frage+Antwort sind freie Texteingaben (nicht nur kurze Zahlen/Namen wie
   bei den anderen Tabellen) - brauchen mehr Mindestbreite, um nutzbar zu
   bleiben. */
.table-scroll #questions-table {
    min-width: 560px;
}

/* --- Oeffentliches Scoreboard: Spaltenstruktur sauberer als eine flache
   linksbuendige Tabelle - Zahlen zentriert und schmal, Name bekommt den
   meisten Platz, Datum dezent/rechtsbuendig am Rand. Bewusst per ID statt
   ueber .scoreboard-table, damit die (anders aufgebauten) Admin-Tabellen
   unberuehrt bleiben. */
#scoreboard-table th:nth-child(1),
#scoreboard-table td:nth-child(1) {
    width: 56px;
    text-align: center;
    font-size: 1.1rem;
}

#scoreboard-table th:nth-child(2),
#scoreboard-table td:nth-child(2) {
    text-align: left;
    font-weight: 600;
}

#scoreboard-table th:nth-child(3),
#scoreboard-table td:nth-child(3),
#scoreboard-table th:nth-child(4),
#scoreboard-table td:nth-child(4),
#scoreboard-table th:nth-child(6),
#scoreboard-table td:nth-child(6),
#scoreboard-table th:nth-child(7),
#scoreboard-table td:nth-child(7) {
    width: 90px;
    text-align: center;
}

#scoreboard-table td:nth-child(3) strong {
    font-size: 1.15rem;
    color: var(--accent);
}

/* Kategorie/Thema ist freier Text (Katalog-Kategorie ODER KI-Thema),
   braucht mehr Platz als die kurzen, festen Schwierigkeits-/Laengenwerte. */
#scoreboard-table th:nth-child(5),
#scoreboard-table td:nth-child(5) {
    width: 130px;
    text-align: center;
}

#scoreboard-table td:nth-child(4),
#scoreboard-table td:nth-child(5),
#scoreboard-table td:nth-child(6),
#scoreboard-table td:nth-child(7) {
    color: var(--muted);
    font-size: 0.9rem;
}

#scoreboard-table th:nth-child(8),
#scoreboard-table td:nth-child(8) {
    width: 180px;
    text-align: right;
    color: var(--muted);
    font-size: 0.85rem;
    white-space: nowrap;
}

#scoreboard-table tbody tr:nth-child(odd) {
    background: rgba(255, 255, 255, 0.025);
}

#scoreboard-table tbody tr:nth-child(1) td:nth-child(1) { color: #ffd700; }
#scoreboard-table tbody tr:nth-child(2) td:nth-child(1) { color: #c0c0c0; }
#scoreboard-table tbody tr:nth-child(3) td:nth-child(1) { color: #cd7f32; }

.btn-small {
    padding: 8px 14px;
    font-size: 1rem;
}

/* --- Tabs (Admin/Scoreboard) --- flex-wrap fehlte bisher: auf schmalen
   Bildschirmen (Smartphone) sprengte eine Reihe langer Tab-Labels (z.B.
   "🎙️ Quizmaster-Runden") den Viewport und erzwang horizontales Scrollen
   der GESAMTEN Seite statt nur der Tabellen (siehe .table-scroll). */
.tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
}

.tab-btn {
    background: rgba(24, 27, 35, 0.7);
    color: var(--muted);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-family: 'Segoe UI', sans-serif;
    font-size: 1rem;
    padding: 12px 20px;
}

.tab-btn.active {
    background: var(--accent);
    color: #1a1a1a;
}

/* --- Schmale Bildschirme (Smartphone) --- */
@media (max-width: 480px) {
    body { padding: 12px; }
    .panel { padding: 24px 18px; }
    h1 { font-size: clamp(1.8rem, 8vw, 2.6rem); }
}