: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; }

body {
    margin: 0;
    min-height: 100vh;
    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;
}

.hidden { display: none !important; }

/* --- Zurueck-Link, auf jeder Unterseite oben links --- position:fixed statt
   normaler Flex-Fluss, weil body per justify-content:center vertikal
   zentriert - ein Flex-Kind wuerde die Zentrierung des Hauptinhalts
   verschieben, ein fixierter Link stoert sie nicht und bleibt beim Scrollen
   (z.B. lange Fragen-Vorschau) sichtbar. */
.back-link {
    position: fixed;
    top: 16px;
    left: 16px;
    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);
    z-index: 10;
    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;
}

.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;
}

/* --- 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;
    flex-direction: column;
    gap: 4px;
    text-align: left;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px 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);
}

.nav-link-title {
    font-family: 'Anton', 'Segoe UI', sans-serif;
    font-size: 1.3rem;
    color: var(--text);
    letter-spacing: 0.02em;
}

.nav-link-desc {
    color: var(--muted);
    font-size: 0.9rem;
}

/* --- Kategorie-Vorschlaege (fuellen nur das Freitextfeld) --- */
.chip-row {
    display: flex;
    flex-wrap: wrap;
    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);
}

/* --- 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;
}

.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) --- */
.tabs {
    display: flex;
    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); }
}