/* Gemeinsame Basis-Styles für die Quiz-Seiten (public/quiz/*.php).
   Enthält nur Regeln, die auf allen Seiten byte-identisch waren — Seiten
   dürfen einzelne Eigenschaften lokal überschreiben (z.B. abweichende
   Spinner-/Timer-Leisten-Größe), CSS-Ladereihenfolge (dieses File zuerst,
   dann das Seiten-<style>) sorgt dafür, dass lokale Regeln gewinnen. */

:root {
    --bg: #1a1a2e;
    --card-bg: #16213e;
    --input-bg: #0f172a;
    --border: #2d3748;
    --primary: #7c3aed;
    --primary2: #a855f7;
    --accent: #a78bfa;
    --link: #7c5fd4;
    --text: #fff;
    --muted: #9aa3c4;
    --success: #4ade80;
    --danger: #f87171;
    --warning: #fbbf24;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Segoe UI', system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100dvh;
}

/* ── Ladeindikator ──────────────────────────────────────────────── */
.spinner {
    width: 44px; height: 44px;
    border: 4px solid rgba(124, 58, 237, 0.2);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Frage-Countdown-Leiste ─────────────────────────────────────── */
.timer-track { height: 6px; background: rgba(255, 255, 255, 0.08); flex-shrink: 0; overflow: hidden; }
.timer-fill  { height: 100%; width: 100%; background: linear-gradient(90deg, var(--primary), #ec4899); transition: width 1s linear, background 0.5s; }
.timer-fill.danger { background: linear-gradient(90deg, #dc2626, #f97316); }

/* ── Zoom-/Ton-/Weiter-Buttons unter der Countdown-Leiste ────────── */
.play-controls {
    display: flex; justify-content: flex-end; align-items: center;
    gap: 0.4em; padding: 0.35em 0.85em 0; flex-shrink: 0;
}
.play-controls [hidden] { display: none; } /* sonst überschreibt .zoom-btn { display: inline-flex } das [hidden]-Attribut */
.zoom-btn {
    background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15);
    color: #aaa; width: 2em; height: 2em; border-radius: 6px; font-size: 1.1em;
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.zoom-btn:hover { background: rgba(255,255,255,0.14); color: #fff; }
.zoom-btn:disabled { opacity: 0.35; cursor: default; }
.play-next-btn {
    width: auto; padding: 0 0.9em; font-size: 0.82em; font-weight: 700;
    color: #fff; background: rgba(124,58,237,0.35); border-color: rgba(124,58,237,0.5);
}
.play-next-btn:hover { background: rgba(124,58,237,0.55); }
.zoom-lbl { font-size: 0.72em; color: var(--muted); min-width: 2.5em; text-align: center; }

/* ── Kahoot-Stil Antwortfarben (4 Multiple-Choice-Optionen) ─────── */
.ans-btn:nth-child(1), .h-ans-btn:nth-child(1), .preview-ans-btn:nth-child(1) { background: #e21b3c; }
.ans-btn:nth-child(2), .h-ans-btn:nth-child(2), .preview-ans-btn:nth-child(2) { background: #1368ce; }
.ans-btn:nth-child(3), .h-ans-btn:nth-child(3), .preview-ans-btn:nth-child(3) { background: #d89e00; }
.ans-btn:nth-child(4), .h-ans-btn:nth-child(4), .preview-ans-btn:nth-child(4) { background: #26890c; }

/* ── Topbar-Link ("Eingeloggt als …") ────────────────────────────── */
.topbar a, .quiz-topbar a { color: var(--link); text-decoration: none; }
.topbar a:hover, .quiz-topbar a:hover { text-decoration: underline; }