/* =====================================================================
   Games — Design-System "Midnight Arcade"
   Reines CSS, keine Frameworks, kein Build-Step (läuft 1:1 auf lima-city).
   Mobile-first: das Spiel wird überwiegend am Handy gespielt.

   Bewusst DUNKEL statt im hellen iOS-Look von Hub/Fitness-App: ein Spiel
   soll sich wie ein Spiel anfühlen, nicht wie ein Formular. Die Verwandt-
   schaft zur Familie bleibt über dieselbe Formensprache erhalten (weiche
   Radien, Systemschrift, großzügige Tap-Ziele) — nur eben in dunkel.

   Systemschriften statt Webfonts: die CSP (s. .htaccess) erlaubt nur
   eigene Quellen, externe Fonts wären blockiert.

   Farbwelt pro Spiel: --accent* wird von .theme-<name> überschrieben
   (s. Games.php: 'theme'). Alles darunter — Buttons, Ringe, Verläufe,
   Glow — zieht automatisch mit, ohne eigene Regeln je Spiel.
   ===================================================================== */

:root {
    /* --- Flächen ------------------------------------------------------ */
    --bg: #080A11;
    --bg-2: #0E111A;
    --surface: rgba(255, 255, 255, 0.045);
    --surface-2: rgba(255, 255, 255, 0.075);
    --surface-3: rgba(255, 255, 255, 0.11);
    --border: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.18);

    /* --- Text --------------------------------------------------------- */
    --text: #F3F5F9;
    --text-2: #98A2B6;
    --text-3: #616B80;

    /* --- Akzent (Standard: Arcade-Violett→Cyan) ----------------------- */
    --accent: #8B5CFF;
    --accent-soft: rgba(139, 92, 255, 0.16);
    --accent-grad: linear-gradient(135deg, #8B5CFF 0%, #5B7CFA 55%, #22D3EE 100%);
    --accent-glow: rgba(139, 92, 255, 0.45);

    /* --- Status ------------------------------------------------------- */
    --green: #34D399;
    --green-soft: rgba(52, 211, 153, 0.14);
    --red: #FB7185;
    --red-soft: rgba(251, 113, 133, 0.14);
    --amber: #FBBF24;
    --amber-soft: rgba(251, 191, 36, 0.14);

    /* --- Maße --------------------------------------------------------- */
    --radius: 14px;
    --radius-lg: 20px;
    --radius-xl: 26px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --header-h: 58px;
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* History Guesser: Bernstein/Sepia — Archiv, altes Papier, Messing.
   Nur die Akzent-Token werden getauscht, der Rest des Systems bleibt. */
.theme-hg {
    --accent: #F0A83A;
    --accent-soft: rgba(240, 168, 58, 0.16);
    --accent-grad: linear-gradient(135deg, #FFD277 0%, #F0A83A 45%, #DC6437 100%);
    --accent-glow: rgba(240, 168, 58, 0.42);
}

/* Faktenschwindler: Türkis/Grün — bewusst deutlich von History Guessers
   Bernstein abgesetzt (s. Games.php: 'theme'). Nur die Akzent-Token werden
   getauscht, der Rest des Systems (Buttons, Ringe, Glow, Aurora) zieht
   automatisch mit. */
.theme-fs {
    --accent: #22D3A6;
    --accent-soft: rgba(34, 211, 166, 0.16);
    --accent-grad: linear-gradient(135deg, #6EE7D4 0%, #22D3A6 45%, #0EA5E9 100%);
    --accent-glow: rgba(34, 211, 166, 0.42);
}

/* Blitzparade: elektrisches Magenta/Violett — Reflex-Arcade, deutlich von
   History Guessers Bernstein und Faktenschwindlers Türkis abgesetzt (s.
   Games.php: 'theme'). Nur die Akzent-Token werden getauscht, der Rest des
   Systems (Buttons, Ringe, Glow, Aurora) zieht automatisch mit. */
.theme-bp {
    --accent: #F0398B;
    --accent-soft: rgba(240, 57, 139, 0.16);
    --accent-grad: linear-gradient(135deg, #FF6EC7 0%, #F0398B 45%, #8B5CFF 100%);
    --accent-glow: rgba(240, 57, 139, 0.45);
}

/* Stadt, Land, Fluss: kräftiges Blau/Indigo — Papier, Kugelschreiber,
   Atlas. Deutlich von History Guessers Bernstein, Faktenschwindlers Türkis
   und Blitzparades Magenta abgesetzt (s. Games.php: 'theme'). Nur die
   Akzent-Token werden getauscht, der Rest des Systems zieht automatisch mit. */
.theme-slf {
    --accent: #4C6EF5;
    --accent-soft: rgba(76, 110, 245, 0.16);
    --accent-grad: linear-gradient(135deg, #8AA0FF 0%, #4C6EF5 45%, #3B4FD8 100%);
    --accent-glow: rgba(76, 110, 245, 0.42);
}

/* Skizzenduell: frisches Grün/Limette — Blatt, Stift, Zeichnung. Deutlich
   von History Guessers Bernstein, Faktenschwindlers Türkis (das kühler/
   cyaniger ist), Blitzparades Magenta und Stadt-Land-Fluss' Blau abgesetzt
   (s. Games.php: 'theme'). Nur die Akzent-Token werden getauscht, der Rest
   des Systems zieht automatisch mit. */
.theme-sd {
    --accent: #8FD14F;
    --accent-soft: rgba(143, 209, 79, 0.16);
    --accent-grad: linear-gradient(135deg, #C6F68D 0%, #8FD14F 45%, #4CAF50 100%);
    --accent-glow: rgba(143, 209, 79, 0.42);
}

/* Burgherr: warmes Rostrot/Gold — Burg, Erde, Metall. Deutlich röter/
   gesättigter als History Guessers helleres Bernstein/Amber, damit die
   beiden Warmtöne im Kachelraster (pages/home.php) klar unterscheidbar
   bleiben. Nur die Akzent-Token werden getauscht, der Rest des Systems
   (Buttons, Ringe, Glow, Aurora) zieht automatisch mit. */
.theme-bh {
    --accent: #C2571F;
    --accent-soft: rgba(194, 87, 31, 0.16);
    --accent-grad: linear-gradient(135deg, #F2B84B 0%, #C2571F 50%, #7A2E1F 100%);
    --accent-glow: rgba(194, 87, 31, 0.45);
}

* { box-sizing: border-box; }

/* Grundfarbe bewusst auf <html>, nicht auf <body>: hätte nur body eine
   Hintergrundfarbe, würde sie auf die Zeichenfläche "hochgereicht" und body
   selbst gälte als transparent — das Zusammenspiel mit dem Aurora-
   Pseudoelement (z-index:-1) hinge dann an genau dieser Feinheit. So liegt
   die Farbe eindeutig unten, die Aurora sauber darüber, der Inhalt darauf. */
html {
    -webkit-text-size-adjust: 100%;
    background: var(--bg);
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font);
    background: transparent;
    color: var(--text);
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    overscroll-behavior-y: contain;
}

/* Aurora-Hintergrund: weiche Farbwolken hinter allem. Fixed +
   pointer-events:none, damit sie beim Scrollen stehen bleiben und nie
   Klicks abfangen. Rein dekorativ. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(58vw 42vh at 12% -6%, rgba(139, 92, 255, 0.20), transparent 62%),
        radial-gradient(52vw 40vh at 92% 8%, rgba(34, 211, 238, 0.14), transparent 60%),
        radial-gradient(70vw 50vh at 50% 108%, rgba(91, 124, 250, 0.13), transparent 65%),
        var(--bg);
}
body.theme-hg::before {
    background:
        radial-gradient(58vw 42vh at 12% -6%, rgba(240, 168, 58, 0.18), transparent 62%),
        radial-gradient(52vw 40vh at 92% 8%, rgba(220, 100, 55, 0.14), transparent 60%),
        radial-gradient(70vw 50vh at 50% 108%, rgba(160, 90, 40, 0.16), transparent 65%),
        var(--bg);
}
body.theme-fs::before {
    background:
        radial-gradient(58vw 42vh at 12% -6%, rgba(34, 211, 166, 0.18), transparent 62%),
        radial-gradient(52vw 40vh at 92% 8%, rgba(14, 165, 233, 0.14), transparent 60%),
        radial-gradient(70vw 50vh at 50% 108%, rgba(20, 160, 130, 0.16), transparent 65%),
        var(--bg);
}
body.theme-bp::before {
    background:
        radial-gradient(58vw 42vh at 12% -6%, rgba(240, 57, 139, 0.18), transparent 62%),
        radial-gradient(52vw 40vh at 92% 8%, rgba(139, 92, 255, 0.14), transparent 60%),
        radial-gradient(70vw 50vh at 50% 108%, rgba(200, 40, 120, 0.16), transparent 65%),
        var(--bg);
}
body.theme-slf::before {
    background:
        radial-gradient(58vw 42vh at 12% -6%, rgba(76, 110, 245, 0.18), transparent 62%),
        radial-gradient(52vw 40vh at 92% 8%, rgba(59, 79, 216, 0.14), transparent 60%),
        radial-gradient(70vw 50vh at 50% 108%, rgba(90, 124, 250, 0.16), transparent 65%),
        var(--bg);
}
body.theme-sd::before {
    background:
        radial-gradient(58vw 42vh at 12% -6%, rgba(143, 209, 79, 0.18), transparent 62%),
        radial-gradient(52vw 40vh at 92% 8%, rgba(76, 175, 80, 0.14), transparent 60%),
        radial-gradient(70vw 50vh at 50% 108%, rgba(120, 200, 90, 0.16), transparent 65%),
        var(--bg);
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
h1, h2, h3, p { margin: 0; }

::selection { background: var(--accent-soft); color: var(--text); }

/* --- Typo-Bausteine ---------------------------------------------------- */
.gradient-text {
    background: var(--accent-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-3);
}

/* --- Buttons ----------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    padding: 0 22px;
    border: none;
    border-radius: var(--radius);
    font-size: 16px;
    font-weight: 650;
    letter-spacing: -0.01em;
    cursor: pointer;
    color: var(--text);
    background: var(--surface-2);
    transition: transform 0.14s ease, filter 0.18s ease, background 0.18s ease;
}
.btn:active { transform: scale(0.975); }
.btn-block { width: 100%; }

.btn-primary {
    background: var(--accent-grad);
    color: #0A0C12;
    font-weight: 750;
    box-shadow: 0 6px 22px -6px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.btn-primary:active { filter: brightness(1.06); }

.btn-secondary {
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border);
}
.btn-secondary:active { background: var(--surface-3); }

.btn-danger { background: var(--red-soft); color: var(--red); border: 1px solid rgba(251, 113, 133, 0.24); }

.btn-plain {
    background: none;
    color: var(--text-2);
    padding: 0 10px;
    min-height: 40px;
    font-size: 14px;
    font-weight: 600;
}
.btn-plain:active { color: var(--text); }

.btn-sm { min-height: 34px; padding: 0 16px; font-size: 13px; border-radius: 100px; }
.btn-icon { width: 40px; height: 40px; min-height: 0; padding: 0; border-radius: 12px; }
.btn:disabled { opacity: 0.42; cursor: default; }
.btn:disabled:active { transform: none; }

/* --- Formulare ---------------------------------------------------------- */
.field { margin-bottom: 18px; }
.field label,
.login-form label {
    display: block;
    font-size: 12px;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 8px;
}

.field input[type="text"],
.field input[type="number"],
.field input[type="password"],
.field input[type="email"],
.field select,
.field textarea,
.login-form input,
.input {
    width: 100%;
    font-family: inherit;
    font-size: 16px; /* verhindert Auto-Zoom bei Fokus auf iOS Safari */
    font-weight: 500;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
.field textarea { resize: vertical; min-height: 88px; line-height: 1.55; }
.field input::placeholder, .input::placeholder { color: var(--text-3); }

.field input:focus,
.field select:focus,
.field textarea:focus,
.login-form input:focus,
.input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--surface-2);
    box-shadow: 0 0 0 4px var(--accent-soft);
}

/* Datei-Auswahl (Bild-Upload im Admin-Bereich) */
.field input[type="file"] {
    width: 100%;
    font-size: 14px;
    color: var(--text-2);
    padding: 12px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
}
/* Bewusst ZWEI getrennte Regeln statt einer mit Komma: kennt ein Browser
   einen Selektor aus einer Komma-Liste nicht, verwirft er die GANZE Regel —
   Firefox kennt die -webkit-Variante nicht und hätte dann gar kein Styling
   für den Datei-Button bekommen. */
.field input[type="file"]::file-selector-button {
    font-family: inherit;
    font-size: 13px;
    font-weight: 650;
    margin-right: 12px;
    padding: 8px 14px;
    border: none;
    border-radius: 100px;
    background: var(--surface-3);
    color: var(--text);
    cursor: pointer;
}
.field input[type="file"]::-webkit-file-upload-button {
    font-family: inherit;
    font-size: 13px;
    font-weight: 650;
    margin-right: 12px;
    padding: 8px 14px;
    border: none;
    border-radius: 100px;
    background: var(--surface-3);
    color: var(--text);
    cursor: pointer;
}

.field-hint { font-size: 12.5px; line-height: 1.5; color: var(--text-3); margin-top: 7px; }

.flex-between { display: flex; align-items: center; justify-content: space-between; }
.text-secondary { color: var(--text-2); }
.text-center { text-align: center; }

/* Toggle-Schalter (E-Mail-Kategorien in settings.php) — 1:1 nach dem Muster
   der Fitness-App, nur mit den Games-eigenen Farbvariablen statt --sep-light. */
.switch { position: relative; display: inline-block; width: 44px; height: 26px; flex-shrink: 0; }
.switch input[type="checkbox"] { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch-track {
    position: absolute;
    inset: 0;
    background: var(--surface-3);
    border-radius: 100px;
    transition: background 0.2s ease;
    pointer-events: none;
}
.switch-track::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.switch input:checked + .switch-track { background: var(--accent); }
.switch input:checked + .switch-track::before { transform: translateX(18px); }

/* Auswahl-Pfeil für <select> (appearance:none entfernt den nativen) */
.field select {
    background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
    background-position: calc(100% - 20px) center, calc(100% - 14px) center;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 42px;
}
/* .input statt .field select: die Nutzer-Auswahl in der Lobby (s.
   history-guesser.js invitableUsersHtml()) sitzt NICHT in einem .field-
   Wrapper, sondern trägt direkt class="input" — appearance:none/Hintergrund
   der GESCHLOSSENEN Auswahl bekommt sie darüber schon (s. gemeinsame Regel
   oben), aber <option>-Elemente in der GEÖFFNETEN Liste ignorieren das:
   Browser rendern die Optionsliste mit einer eigenen, meist hellen
   Systemfarbe, sofern <option> nicht selbst explizit gestylt ist — genau
   das Kontrastproblem aus dem Feedback (helle Schrift auf weißem Grund). */
.field select option, .input option { background: var(--bg-2); color: var(--text); }

/* --- Meldungen ---------------------------------------------------------- */
.flash {
    padding: 14px 16px;
    border-radius: var(--radius);
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 16px;
    border: 1px solid transparent;
    text-align: left;
}
.flash-error { background: var(--red-soft); color: #FFC2CC; border-color: rgba(251, 113, 133, 0.28); }
.flash-success { background: var(--green-soft); color: #9DF0CE; border-color: rgba(52, 211, 153, 0.28); }
.flash-info { background: var(--accent-soft); color: var(--text); border-color: var(--border-strong); }

.toast {
    position: fixed;
    left: 50%;
    bottom: calc(26px + var(--safe-bottom));
    transform: translate(-50%, 22px);
    max-width: calc(100vw - 36px);
    background: rgba(16, 19, 28, 0.94);
    border: 1px solid var(--border-strong);
    color: var(--text);
    padding: 13px 20px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.24s ease, transform 0.24s ease;
    z-index: 60;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 14px 40px -12px rgba(0, 0, 0, 0.8);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* --- Anmelde-Seiten (Login, Einladung, Passwort-Reset) ------------------ */
.login-body { display: flex; align-items: center; justify-content: center; padding: 24px 0; }
.login-wrap {
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    padding: calc(var(--safe-top) + 20px) 22px calc(var(--safe-bottom) + 32px);
    text-align: center;
    animation: fade-up 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* Logo-Badge mit weichem Schein darunter (s. helpers.php: games_logo()) */
.brand {
    position: relative;
    display: inline-flex;
    margin-bottom: 22px;
}
.brand::after {
    content: "";
    position: absolute;
    inset: 12% 12% -18%;
    background: var(--accent-glow);
    filter: blur(30px);
    opacity: 0.75;
    z-index: -1;
    border-radius: 50%;
}
.brand-logo { display: block; border-radius: 26px; }

.login-title { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; }
.login-subtitle { font-size: 14.5px; line-height: 1.55; color: var(--text-2); margin: 10px 0 30px; }
.login-form { text-align: left; }
.login-form label { margin-top: 16px; }
.login-form .btn { margin-top: 26px; }

/* .login-invite-link auf einem <button> statt <a> (z.B. setup-email.php
   "Überspringen" — braucht einen echten Form-Submit, kein reiner Link) —
   nimmt der nativen Button-Optik Rahmen/Hintergrund/Schrift, OHNE die
   :hover-Unterstreichung der Klasse selbst per Inline-Style zu überschreiben
   (Inline-Styles würden jede spätere :hover-Regel für dieselbe Eigenschaft
   unwiderruflich schlagen). */
button.login-invite-link {
    background: none;
    border: none;
    border-bottom: 1px solid transparent;
    font-family: inherit;
    cursor: pointer;
}
.login-invite-link {
    display: inline-block;
    margin-top: 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-3);
    border-bottom: 1px solid transparent;
}
.login-invite-link:hover { color: var(--accent); border-bottom-color: var(--accent-soft); }

/* --- Kopfzeile ---------------------------------------------------------- */
.app-header,
.hg-overview-header {
    position: sticky;
    top: 0;
    z-index: 25;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: calc(var(--header-h) + var(--safe-top));
    padding: calc(var(--safe-top) + 10px) 16px 10px;
    background: rgba(8, 10, 17, 0.72);
    backdrop-filter: saturate(160%) blur(16px);
    -webkit-backdrop-filter: saturate(160%) blur(16px);
    border-bottom: 1px solid var(--border);
}
.app-header-title {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 17px;
    font-weight: 750;
    letter-spacing: -0.02em;
}
.app-header-right { display: flex; align-items: center; gap: 4px; }
.app-header-user { font-size: 13px; color: var(--text-3); font-weight: 600; margin-right: 4px; }

.app-main {
    max-width: 560px;
    margin: 0 auto;
    padding: 22px 16px calc(32px + var(--safe-bottom));
}
.app-intro { font-size: 14px; color: var(--text-2); margin: 0 0 16px; }

/* Zahnrad für Admins — schwebt über dem Spielgeschehen, verdeckt nichts
   (s. Architektur-Plan Abschnitt 7). Fixed, weil die Spielseite bewusst
   keine Kopfzeile hat. */
.settings-fab {
    position: fixed;
    top: calc(var(--safe-top) + 12px);
    right: 14px;
    z-index: 40;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: rgba(16, 19, 28, 0.7);
    border: 1px solid var(--border);
    border-radius: 50%;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.9);
}
.settings-fab:active { background: var(--surface-3); }

/* --- Karten ------------------------------------------------------------- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 16px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.section-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 30px 0 12px; }
.section-header:first-child { margin-top: 6px; }
.section-title { font-size: 19px; font-weight: 750; letter-spacing: -0.02em; }
.section-subtitle { font-size: 13px; color: var(--text-3); margin-top: 4px; line-height: 1.5; }

/* Tab-Umschalter für die drei Spiel-Panels im Admin-Bereich (settings.php):
   jedes Panel bündelt Datenset UND Einstellungen eines Spiels. Ohne die Tabs
   stünde alles (inkl. der langen Bild-/Fragen-Listen) untereinander und die
   Seite wäre endlos zu scrollen. Reines CSS + ein kleines Inline-Skript in
   settings.php, das .is-active umhängt (Start-Tab kommt serverseitig). */
.game-settings-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    padding: 5px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.game-settings-tab {
    flex: 1;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    color: var(--text-2);
    font-family: inherit;
    font-size: clamp(11px, 3.1vw, 13px);
    font-weight: 650;
    letter-spacing: -0.01em;
    padding: 10px 4px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.game-settings-tab:hover { color: var(--text); }
.game-settings-tab.is-active { background: var(--accent-soft); color: var(--text); }
.game-settings-panel { display: none; }
.game-settings-panel.is-active { display: block; }

.select-on-click {
    width: 100%;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.32);
    color: var(--accent);
    margin-bottom: 12px;
}

/* =====================================================================
   Spielauswahl — große, plakative Karten statt kleiner Kacheln
   ===================================================================== */
.game-grid { display: grid; gap: 16px; }

.game-card {
    position: relative;
    display: block;
    width: 100%;
    text-align: left;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface);
    overflow: hidden;
    isolation: isolate;
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.18s ease;
    animation: fade-up 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.game-card:active { transform: scale(0.985); }
.game-card:hover { border-color: var(--border-strong); }

/* Farbwäsche: liegt hinter dem Inhalt, kommt aus dem Theme der Kachel */
.game-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--accent-grad);
    opacity: 0.16;
}
/* Lichtkegel oben rechts */
.game-card::after {
    content: "";
    position: absolute;
    top: -55%;
    right: -30%;
    width: 78%;
    height: 150%;
    z-index: -1;
    background: radial-gradient(closest-side, var(--accent-glow), transparent);
    opacity: 0.5;
    filter: blur(6px);
}

.game-card-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 31px;
    line-height: 1;
    border-radius: 18px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid var(--border-strong);
    margin-bottom: 16px;
    box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.9);
}
.game-card-tag {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 7px;
}
.game-card-name { font-size: 23px; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 7px; }
.game-card-desc { font-size: 14px; line-height: 1.55; color: var(--text-2); }
.game-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 18px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text);
}
.game-card-cta span { transition: transform 0.18s ease; }
.game-card:hover .game-card-cta span { transform: translateX(4px); }

.game-card.is-soon { opacity: 0.5; cursor: default; }
.game-card.is-soon:active { transform: none; }

/* --- Listen -------------------------------------------------------------- */
.list {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 17px;
    border-bottom: 1px solid var(--border);
}
.list-row:last-child { border-bottom: none; }
.list-row-main { flex: 1; min-width: 0; }
.list-row-title { font-size: 15px; font-weight: 650; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.list-row-subtitle { font-size: 13px; color: var(--text-3); margin-top: 3px; line-height: 1.5; }
.list-row-actions { display: flex; gap: 8px; flex-shrink: 0; }
.list-empty { padding: 40px 20px; text-align: center; color: var(--text-3); font-size: 14px; line-height: 1.6; }

.badge {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 750;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid transparent;
}
.badge-admin { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-soft); }
.badge-pending { background: var(--amber-soft); color: var(--amber); border-color: rgba(251, 191, 36, 0.26); }
.badge-success { background: var(--green-soft); color: var(--green); border-color: rgba(52, 211, 153, 0.26); }
.badge-progress { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-soft); }

/* =====================================================================
   History Guesser
   ===================================================================== */
.hg-page { min-height: 100vh; display: flex; flex-direction: column; }

/* Die Flex-Kette muss durchgehen: .hg-page → #hgRoot → .hg-panel. Ohne diese
   Regel ist #hgRoot ein gewöhnlicher Block, .hg-panel bekommt keine Resthöhe
   und das "margin-top:auto" am Absende-Button greift nicht — der Button säße
   dann direkt unter dem Eingabefeld statt unten in Daumenreichweite. */
#hgRoot { flex: 1; display: flex; flex-direction: column; }

/* --- Spiele-Übersicht ---------------------------------------------------- */
.hg-game-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    /* Vertikaler Innenabstand sitzt am Zeilen-Link darunter, NICHT hier: die
       Zeile ist seit dem Löschen-Button kein einziges <a> mehr, sondern ein
       Container mit Link + Button nebeneinander. Läge der Abstand am
       Container, wäre das obere/untere Sechzehntel der Zeile toter Rand statt
       Teil der Antippfläche — am Handy deutlich spürbar. */
    padding: 0 17px;
    transition: background 0.16s ease;
}
.hg-game-list-row > .list-row-main {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16px 0;
}
.hg-game-list-row + .hg-game-list-row { border-top: 1px solid var(--border); }
.hg-game-list-row:active { background: var(--surface-2); }
.hg-game-list-arrow { color: var(--text-3); font-size: 17px; }

/* --- Bild-Bühne ---------------------------------------------------------- */
.hg-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    max-height: 56vh;
    background: #05070C;
    overflow: hidden;
    flex-shrink: 0;
}
.hg-stage img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    animation: stage-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
/* Weicher Verlauf oben und unten: hält die Chips lesbar und bindet das
   Bild in die Seite ein, statt es hart abzuschneiden. */
.hg-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(to bottom, rgba(5, 7, 12, 0.85) 0%, transparent 26%),
        linear-gradient(to top, var(--bg) 1%, rgba(8, 10, 17, 0.35) 14%, transparent 34%);
}

.hg-topbar {
    position: absolute;
    top: var(--safe-top);
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
}
/* Platz für das Zahnrad NUR freihalten, wenn es auch da ist (Admins). Für
   normale Spieler wären das sonst 64px verschenkte Breite — auf einem
   schmalen Handy genug, um die drei Chips (Runde / getippt / Timer) in eine
   zweite Zeile über das Bild zu drücken. Die Klasse setzt history-guesser.php. */
body.has-fab .hg-topbar { padding-right: 64px; }
.hg-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(8, 10, 17, 0.62);
    border: 1px solid var(--border-strong);
    color: var(--text);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.01em;
    padding: 7px 13px;
    border-radius: 999px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.hg-chip-round { color: var(--accent); }
.hg-chip-timer { font-variant-numeric: tabular-nums; min-width: 54px; justify-content: center; }
.hg-chip-timer.is-urgent {
    background: rgba(251, 113, 133, 0.9);
    border-color: transparent;
    color: #1A0409;
    animation: pulse 1s ease-in-out infinite;
}

/* --- Bedienfeld ---------------------------------------------------------- */
.hg-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 4px 22px calc(24px + var(--safe-bottom));
    max-width: 560px;
    width: 100%;
    margin: 0 auto;
}
.hg-prompt { text-align: center; font-size: 14px; color: var(--text-2); margin-bottom: 4px; }
/* "Schon getippt: X, Y" — leer/unsichtbar, solange niemand getippt hat
   (min-height verhindert ein Layout-Springen, sobald der erste Name
   erscheint und den Sudden-Death-Timer auslöst). */
.hg-guessed-hint { text-align: center; font-size: 12.5px; color: var(--accent); font-weight: 600; min-height: 16px; margin: 2px 0 8px; }
.hg-category {
    display: block;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 10px;
}

/* Die große Jahreszahl — das visuelle Zentrum der Eingabe */
.hg-year-display {
    text-align: center;
    font-size: clamp(52px, 17vw, 68px);
    font-weight: 850;
    line-height: 1;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    margin: 6px 0 20px;
    background: var(--accent-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 6px 26px var(--accent-glow));
}

/* Zeitstrahl-Slider. --pct wird von history-guesser.js gesetzt, damit die
   zurückgelegte Strecke gefüllt aussieht (rein mit CSS nicht möglich). */
.hg-slider {
    width: 100%;
    height: 42px;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    cursor: pointer;
}
/* Kein Rahmen auf der Schiene: sonst hinge die korrekte Zentrierung des
   Griffs (margin-top unten) daran, ob box-sizing für dieses Pseudoelement
   greift — die Rechnung ginge je nach Browser um 1–2px daneben. Ohne Rahmen
   ist die Schiene exakt 8px hoch und die Zentrierung eindeutig: (8-30)/2. */
.hg-slider::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent) 0 var(--pct, 50%), rgba(255, 255, 255, 0.13) var(--pct, 50%) 100%);
}
.hg-slider::-moz-range-track {
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent) 0 var(--pct, 50%), rgba(255, 255, 255, 0.13) var(--pct, 50%) 100%);
}
.hg-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 30px;
    height: 30px;
    margin-top: -11px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--accent);
    box-shadow: 0 3px 14px -2px var(--accent-glow), 0 1px 4px rgba(0, 0, 0, 0.5);
}
.hg-slider::-moz-range-thumb {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--accent);
    box-shadow: 0 3px 14px -2px var(--accent-glow), 0 1px 4px rgba(0, 0, 0, 0.5);
}
.hg-slider:focus { outline: none; }
.hg-slider:focus::-webkit-slider-thumb { box-shadow: 0 0 0 6px var(--accent-soft); }

.hg-scale {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 650;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
    margin: -2px 2px 16px;
}

.hg-year-input {
    display: block;
    width: 150px;
    margin: 0 auto 18px;
    text-align: center;
    font-family: inherit;
    font-size: 19px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    appearance: none;
    -webkit-appearance: none;
}
.hg-year-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
}
/* Spinner ausblenden — die Zahl wird per Slider oder Tastatur gesetzt */
.hg-year-input::-webkit-outer-spin-button,
.hg-year-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hg-year-input { -moz-appearance: textfield; }

/* Bewusst KEIN margin-top:auto (früher hier) — das schob den Button ans
   Ende der Flex-Fläche, oft unterhalb des sichtbaren Bereichs, sodass man
   erst scrollen musste, um zu bestätigen. Er soll direkt der Eingabe
   folgen, in Daumenreichweite. */
.hg-submit { margin-top: 6px; }

/* --- Warten -------------------------------------------------------------- */
.hg-waiting { text-align: center; padding: 30px 20px; color: var(--text-2); font-size: 14.5px; line-height: 1.6; }
.hg-waiting-spinner {
    width: 30px;
    height: 30px;
    margin: 0 auto 16px;
    border: 3px solid var(--surface-3);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
.hg-waiting strong { color: var(--accent); font-size: 17px; }

/* --- Auflösung ------------------------------------------------------------ */
.hg-reveal { animation: fade-up 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.hg-reveal-label { text-align: center; margin-bottom: 2px; }
.hg-reveal-year {
    font-size: clamp(48px, 15vw, 62px);
    font-weight: 850;
    line-height: 1.05;
    letter-spacing: -0.04em;
    text-align: center;
    font-variant-numeric: tabular-nums;
    background: var(--accent-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 6px 26px var(--accent-glow));
    animation: reveal-pop 0.55s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
.hg-reveal-title { font-size: 17px; font-weight: 750; text-align: center; margin: 10px 0 8px; letter-spacing: -0.02em; }
.hg-reveal-desc { font-size: 14px; line-height: 1.65; color: var(--text-2); text-align: center; }
.hg-reveal-source { font-size: 11px; color: var(--text-3); text-align: center; margin-top: 10px; }
.hg-reveal-source a { color: var(--text-2); border-bottom: 1px solid var(--border-strong); }

/* Eigenes Ergebnis: drei Werte nebeneinander */
.hg-my-result {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 20px 0 18px;
}
.hg-my-result-item {
    flex: 1;
    max-width: 120px;
    text-align: center;
    padding: 13px 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.hg-my-result-value { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.hg-my-result-value.is-hit { color: var(--green); }
.hg-my-result-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin-top: 5px; }
.hg-no-guess { text-align: center; color: var(--text-3); font-size: 14px; margin: 20px 0 18px; }

.hg-guess-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}
.hg-guess-row:last-child { border-bottom: none; }
.hg-guess-row-name { font-weight: 650; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hg-guess-row-meta { color: var(--text-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.hg-guess-row-points {
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
    min-width: 46px;
    text-align: right;
}
.hg-guess-row.is-me { background: linear-gradient(90deg, var(--accent-soft), transparent); margin: 0 -12px; padding-left: 12px; padding-right: 12px; border-radius: 10px; }

.hg-next-hint { text-align: center; color: var(--text-3); font-size: 13px; margin-top: 18px; }

/* --- Lobby ---------------------------------------------------------------- */
.hg-lobby-list { margin: 20px 0 4px; text-align: left; }
.hg-lobby-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.hg-lobby-row:last-child { border-bottom: none; }
.hg-lobby-name { font-weight: 600; font-size: 15px; flex: 1; min-width: 0; }
/* "Ersteller"-Badge in der Lobby-Spielerliste (s. Feedback: alle sollen auf
   einen Blick sehen, wer die Partie startet) — gleiche Optik wie badge-admin. */
.hg-badge-host { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-soft); flex-shrink: 0; }

/* Eingeladen, aber noch nicht beigetreten (s. Feedback: "sichtbar sein,
   dass er nicht gejoint ist") — eigener Zeilentyp mit gedämpftem Avatar und
   zweizeiligem Namensblock (Name + "Wartet auf Beitritt …"), damit er sich
   klar von einer echten Spieler-Zeile abhebt, ohne unlesbar zu werden. */
.hg-avatar-pending { opacity: 0.55; }
.hg-lobby-name-block { flex: 1; min-width: 0; }
.hg-lobby-invited-hint { font-size: 12px; color: var(--text-3); margin-top: 2px; }

/* Aufklappbare Kurzanleitung unter dem Start-Button in der Lobby. */
.hg-howto-toggle {
    display: block;
    width: 100%;
    background: none;
    border: none;
    color: var(--accent);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 650;
    text-align: center;
    padding: 16px 0 0;
    cursor: pointer;
}
.hg-howto-toggle::after { content: " ▾"; }
.hg-howto-toggle[aria-expanded="true"]::after { content: " ▴"; }
.hg-howto {
    text-align: left;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-2);
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.hg-howto p + p { margin-top: 8px; }

.hg-avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 15px;
    color: #0A0C12;
    background: var(--accent-grad);
    box-shadow: 0 4px 14px -4px var(--accent-glow);
}

/* --- Endauswertung / Rangliste --------------------------------------------- */
.hg-leaderboard-row {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
    text-align: left;
}
.hg-leaderboard-row:last-child { border-bottom: none; }
.hg-leaderboard-rank {
    width: 26px;
    flex-shrink: 0;
    text-align: center;
    font-weight: 800;
    font-size: 15px;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
}
.hg-leaderboard-row.is-winner .hg-leaderboard-rank { color: var(--amber); }
.hg-leaderboard-row.is-winner .hg-avatar {
    background: linear-gradient(135deg, #FFE082, #F0A83A 55%, #D97706);
    box-shadow: 0 4px 18px -4px rgba(251, 191, 36, 0.6);
}
.hg-leaderboard-name { flex: 1; min-width: 0; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hg-leaderboard-score { margin-left: auto; font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

.hg-trophy { font-size: 46px; line-height: 1; filter: drop-shadow(0 8px 22px rgba(251, 191, 36, 0.45)); }

/* --- Animationen ----------------------------------------------------------- */
@keyframes fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}
@keyframes stage-in {
    from { opacity: 0; transform: scale(1.045); }
    to { opacity: 1; transform: none; }
}
@keyframes reveal-pop {
    0% { opacity: 0; transform: scale(0.72); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.07); }
}

/* Gestaffelter Auftritt der Auswahl-Karten */
.game-card:nth-child(1) { animation-delay: 0.04s; }
.game-card:nth-child(2) { animation-delay: 0.1s; }
.game-card:nth-child(3) { animation-delay: 0.16s; }
.game-card:nth-child(4) { animation-delay: 0.22s; }

/* Wer Bewegung reduziert haben möchte, bekommt sie nicht. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* =====================================================================
   Offene Lobbys (Übersichtsseite) — öffentlich sichtbare, noch nicht
   gestartete Partien, denen jeder eingeloggte Nutzer direkt beitreten kann
   (ohne Einladungslink). Gestartete/beendete Partien tauchen hier nie auf.
   ===================================================================== */
.hg-open-lobby-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 17px;
}
.hg-open-lobby-row + .hg-open-lobby-row { border-top: 1px solid var(--border); }

/* --- "Direkt einladen"-Auswahl in der Lobby ------------------------------ */
.hg-invite-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 14px;
    color: var(--text-3);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.hg-invite-divider::before, .hg-invite-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* Durchsuchbare "Nutzer direkt einladen"-Liste (löst das alte <select> ab —
   ab mehr als ein paar Namen reicht eine einfache Auswahl nicht mehr zum
   schnellen Finden, s. Feedback). */
.hg-user-search-list {
    max-height: 240px;
    overflow-y: auto;
    margin-top: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.hg-user-search-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 14px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}
.hg-user-search-row:last-child { border-bottom: none; }
.hg-user-search-row:active { background: var(--surface-2); }
.hg-user-search-row:disabled { opacity: 0.5; }
.hg-user-search-row .hg-avatar { width: 32px; height: 32px; font-size: 12.5px; }
.hg-user-search-name { flex: 1; min-width: 0; font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hg-user-search-hint { font-size: 11.5px; color: var(--text-3); flex-shrink: 0; }
.hg-user-search-empty { text-align: center; color: var(--text-3); font-size: 13px; padding: 16px 14px; margin: 0; }
/* Eigene Regel statt in .hg-user-search-list verschachtelt: die "niemand
   mehr einladbar"-Meldung ersetzt die ganze Liste, braucht also denselben
   Rahmen, ohne selbst scrollbar zu sein. */
p.hg-user-search-empty { border: 1px solid var(--border); border-radius: var(--radius); margin-top: 10px; }

/* =====================================================================
   In-App-Einladungs-Popup ("X hat dich zu einer Lobby eingeladen")
   ===================================================================== */
.hg-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 0 calc(20px + var(--safe-bottom));
    background: rgba(5, 7, 12, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}
.hg-popup-overlay.is-visible { opacity: 1; pointer-events: auto; }
.hg-popup-card {
    width: calc(100% - 32px);
    max-width: 420px;
    background: var(--bg-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-xl);
    padding: 24px 22px;
    text-align: center;
    box-shadow: 0 -12px 50px -12px rgba(0, 0, 0, 0.7);
    transform: translateY(16px);
    transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hg-popup-overlay.is-visible .hg-popup-card { transform: translateY(0); }
.hg-popup-card .hg-avatar { width: 52px; height: 52px; font-size: 19px; margin: 0 auto 14px; }
.hg-popup-title { font-size: 18px; font-weight: 750; letter-spacing: -0.02em; margin-bottom: 6px; }
.hg-popup-desc { font-size: 13.5px; color: var(--text-2); line-height: 1.5; margin-bottom: 20px; }
.hg-popup-actions { display: flex; gap: 10px; }
.hg-popup-actions .btn { flex: 1; }

/* =====================================================================
   Großer Countdown in den letzten Sekunden — sitzt ÜBER dem Bild, damit
   Slider und Jahres-Eingabe darunter frei bedienbar bleiben (man soll ja
   gerade noch schnell etwas eintippen können, nicht ausgesperrt werden).
   ===================================================================== */
.hg-countdown-big {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;
    transform: translate(-50%, -50%);
    font-size: clamp(84px, 30vmin, 168px);
    font-weight: 900;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: #fff;
    text-shadow: 0 0 44px rgba(251, 113, 133, 0.85), 0 6px 24px rgba(0, 0, 0, 0.65);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}
.hg-countdown-big.is-visible { opacity: 1; animation: countdown-pulse 1s ease-in-out infinite; }
/* Für .hg-countdown-big: das translate(-50%, -50%) gehört zur Zentrierung
   (position:absolute, top/left:50%) und muss in JEDEM Keyframe stehen. */
@keyframes countdown-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.14); }
}
/* Reiner Puls ohne Versatz — für Elemente, die schon anders zentriert sind
   (z.B. .hg-start-number als Flex-Kind). Ohne diese eigene Keyframe-Gruppe
   erbte die große Start-Zahl das translate(-50%, -50%) von oben und säße um
   ihre halbe Breite nach links / halbe Höhe nach oben verschoben. */
@keyframes start-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.14); }
}

/* =====================================================================
   Vorlauf-Countdown vor Runde 1 ("Los geht's in ...") — legt sich über die
   GESAMTE Seite (Bild + leeres Bedienfeld darunter, s. renderStarting()),
   nicht nur über die Bild-Bühne wie .hg-countdown-big, und blurt den
   Hintergrund sichtbar, statt nur ein Overlay-Feld zu sein (s. Feedback
   "Hintergrund unscharf, dann scharf zum Losraten").
   ===================================================================== */
.hg-start-overlay {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(5, 7, 12, 0.55);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    transition: opacity 0.4s ease;
}
.hg-start-overlay.is-clearing { opacity: 0; }
.hg-start-number {
    font-size: clamp(72px, 26vmin, 140px);
    font-weight: 900;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: #fff;
    text-shadow: 0 0 44px var(--accent-glow), 0 6px 24px rgba(0, 0, 0, 0.65);
    animation: start-pulse 1s ease-in-out infinite;
}
.hg-start-label { font-size: 14.5px; font-weight: 650; color: rgba(255, 255, 255, 0.85); }

/* =====================================================================
   Endauswertung — volle Seite statt kleiner Box (s. Feedback: soll nach
   dem Spielende das ganze Handy füllen, nicht wie eine Karte wirken).
   ===================================================================== */
.hg-finished {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    max-width: 560px;
    width: 100%;
    margin: 0 auto;
    padding: calc(var(--safe-top) + 44px) 22px calc(28px + var(--safe-bottom));
    animation: fade-up 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.hg-finished-hero { text-align: center; }
.hg-finished .hg-trophy { font-size: 76px; animation: trophy-bounce 0.7s cubic-bezier(0.3, 1.4, 0.4, 1) both; }
@keyframes trophy-bounce {
    0% { opacity: 0; transform: scale(0.4) translateY(-16px); }
    60% { opacity: 1; transform: scale(1.12) translateY(0); }
    100% { transform: scale(1); }
}
.hg-finished-title { font-size: clamp(26px, 7.5vw, 36px); font-weight: 850; letter-spacing: -0.03em; margin-top: 16px; }
.hg-finished-board { flex: 1; margin: 30px 0 10px; }
.hg-finished-actions { display: flex; flex-direction: column; gap: 10px; }

/* --- Etwas mehr Luft auf großen Schirmen ------------------------------------ */
@media (min-width: 640px) {
    .game-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

    /* Bühne auf dieselbe Breite wie das Bedienfeld darunter bringen. Ohne das
       liefe das Bild randlos über den ganzen Schirm, während Slider und Button
       darunter bei 560px enden — das sah aus wie zwei verschiedene Seiten. */
    .hg-stage {
        max-width: 560px;
        margin: 0 auto;
        border-radius: var(--radius-xl);
        max-height: 52vh;
    }
    .hg-stage::after { border-radius: var(--radius-xl); }
    .hg-topbar { padding-left: 18px; padding-right: 18px; }
    body.has-fab .hg-topbar { padding-right: 18px; }
}

/* --- Echte Desktop-Breite: alles deutlich größer, vor allem das Bild ------
   (s. Feedback: "besonders die Bilder... dass man auf kleine Details achten
   kann") — die 640px-Stufe oben war für schmale Fenster/Tablets gedacht und
   blieb bewusst konservativ; ab hier ist wirklich Platz auf dem Bildschirm,
   den die App bisher ungenutzt ließ (Inhalt blieb überall bei 560px stehen,
   egal wie breit das Browserfenster war). */
@media (min-width: 900px) {
    .app-main, .hg-finished {
        max-width: 720px;
    }
    .hg-panel {
        max-width: 640px;
    }
    .hg-stage {
        max-width: 880px;
        max-height: 66vh;
    }
}

/* =====================================================================
   Faktenschwindler — Bluff-Party, 2–8 Spieler.

   Wiederverwendbare Bausteine aus History Guesser werden HIER NICHT
   dupliziert: .hg-avatar, .hg-popup-*, .hg-leaderboard-*, .hg-waiting*,
   .hg-lobby-*, .hg-invite-divider, .hg-user-search-*, .hg-howto*,
   .hg-game-list-row, .hg-open-lobby-row, .hg-finished*, .hg-trophy,
   .hg-next-hint, .hg-start-overlay/-number/-label, .hg-reveal-label/-desc/
   -source, .hg-my-result*, .hg-no-guess sind strukturell allgemein (Lobby-
   Chrome, Popups, Auflösungs-Rahmen) und werden von faktenschwindler.js
   direkt wiederverwendet — sie sind an keiner Stelle History-Guesser-
   spezifisch benannt oder gestylt. Nur die spielspezifischen Bausteine
   unten (Frage-Karte, Lügen-Eingabe, Optionsliste) sind neu, weil sie
   inhaltlich anders funktionieren als bei History Guesser (kein Bild, kein
   Zahlen-Slider).
   ===================================================================== */
#fsRoot { flex: 1; display: flex; flex-direction: column; }

/* --- Runden-Kopf: Runden-/Timer-Chip + Frage-Karte ------------------------
   Anders als hg-chip (transparent, für über einem Bild schwebende Chips
   gedacht) sitzen diese Chips auf normalem Seitenhintergrund — deshalb
   eine eigene, deutlich weniger transparente Optik statt hg-chip zu
   missbrauchen. */
.fs-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 14px;
}
.fs-chip {
    display: inline-flex;
    align-items: center;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.01em;
    padding: 7px 13px;
    border-radius: 999px;
}
.fs-chip-round { color: var(--accent); }
.fs-chip-timer { font-variant-numeric: tabular-nums; min-width: 46px; justify-content: center; }
.fs-chip-timer.is-urgent {
    background: rgba(251, 113, 133, 0.9);
    border-color: transparent;
    color: #1A0409;
    animation: pulse 1s ease-in-out infinite;
}

.fs-question-card { text-align: center; }
.fs-category {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 10px;
}
.fs-question { font-size: 18px; font-weight: 650; line-height: 1.5; letter-spacing: -0.01em; }

.fs-prompt { text-align: center; font-size: 14px; color: var(--text-2); margin: 18px 0 14px; }

/* "X von Y haben abgegeben/abgestimmt" — dieselbe Rolle wie
   hg-guessed-hint, hier ohne feste min-height, weil sie auf mehreren
   Screens (Eingabe, Warten, Abstimmen) unterschiedlich weit oben sitzt. */
.fs-hint { text-align: center; font-size: 12.5px; color: var(--accent); font-weight: 600; margin: 14px 0 0; }

/* --- Lügen-Eingabe --------------------------------------------------------- */
.fs-input-card { margin-top: 16px; }
.fs-lie-textarea {
    width: 100%;
    font-family: inherit;
    font-size: 16px; /* verhindert Auto-Zoom bei Fokus auf iOS Safari */
    font-weight: 500;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    resize: vertical;
    min-height: 64px;
    line-height: 1.5;
    margin-bottom: 4px;
}
.fs-lie-textarea:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--surface-2);
    box-shadow: 0 0 0 4px var(--accent-soft);
}
.fs-input-card .btn { margin-top: 14px; }

/* --- Abstimmung -------------------------------------------------------------
   Eine Liste antippbarer Karten statt Radiobuttons — größere Tap-Fläche,
   und die eigene (gesperrte) Antwort fällt durch .is-mine optisch ab, ohne
   aus der Liste zu verschwinden (s. Spielregeln: "sichtbar, aber nicht
   wählbar"). */
.fs-vote-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.fs-vote-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 15px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 15px;
    font-weight: 550;
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease, transform 0.14s ease;
}
.fs-vote-option:not(:disabled):active { transform: scale(0.985); background: var(--surface-2); }
.fs-vote-option:not(:disabled):hover { border-color: var(--accent); }
.fs-vote-option.is-mine { opacity: 0.55; cursor: default; }
.fs-vote-option:disabled:not(.is-mine) { opacity: 0.6; cursor: default; }
.fs-vote-option-text { flex: 1; min-width: 0; }

/* --- Auflösung --------------------------------------------------------------
   Text statt Zahl im "großen Reveal" — dieselbe Gradient-Text-Behandlung
   wie hg-reveal-year (bewusst textgerecht statt eine eigene Regel für
   dieselbe Optik zu duplizieren). */
.fs-reveal-answer {
    font-size: clamp(24px, 6.5vw, 34px);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-align: center;
    background: var(--accent-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 6px 26px var(--accent-glow));
    animation: reveal-pop 0.55s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}

.fs-reveal-option {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-top: 12px;
}
.fs-reveal-option.is-truth { border-color: rgba(52, 211, 153, 0.4); background: var(--green-soft); }
.fs-reveal-option-head { margin-bottom: 6px; }
.fs-reveal-option-author { font-size: 12px; font-weight: 700; color: var(--accent); letter-spacing: 0.02em; }
.fs-reveal-option-text { font-size: 15px; font-weight: 600; line-height: 1.4; }
.fs-reveal-option-meta { font-size: 12.5px; color: var(--text-3); margin-top: 6px; line-height: 1.5; }

/* =====================================================================
   Blitzparade — Mikrospiel-Marathon, Solo + Tageslauf + Duell.

   Wiederverwendbare Bausteine aus History Guesser werden HIER NICHT
   dupliziert: .hg-avatar, .hg-popup-*, .hg-leaderboard-*, .hg-waiting*,
   .hg-lobby-*, .hg-invite-divider, .hg-user-search-*, .hg-howto*,
   .hg-game-list-row, .hg-open-lobby-row, .hg-finished*, .hg-trophy,
   .hg-next-hint, .hg-my-result* sind strukturell allgemein und werden von
   blitzparade.js direkt wiederverwendet — für die Duell-Lobby/
   Ergebnisseite UND für die Solo-/Tageslauf-Endauswertung (dieselbe
   "drei Werte nebeneinander"-Kachel wie bei History Guesser). Nur die
   Bausteine der eigentlichen ENGINE (Bühne, Anweisungskarte, Herzen,
   Minispiel-Grundformen) sind unten neu — dafür gibt es bei den anderen
   Spielen keine Entsprechung.
   ===================================================================== */
#bpRoot { flex: 1; display: flex; flex-direction: column; }

/* --- "So gehen die 8 Minispiele" — aufklappbare Übersicht auf der
   Blitzparade-Startseite. Natives <details>/<summary>, kein JS nötig; die
   Kurz-Rufe der Engine (bp-instruction-*) erklären ja nur im Sekundentakt. */
.bp-minigames-help {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 4px 18px;
    margin-bottom: 16px;
}
.bp-minigames-help > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}
.bp-minigames-help > summary::-webkit-details-marker { display: none; }
.bp-minigames-help-chevron { color: var(--accent); transition: transform 0.15s ease; }
.bp-minigames-help[open] .bp-minigames-help-chevron { transform: rotate(90deg); }
.bp-minigames-help-intro {
    font-size: 12.5px;
    color: var(--text-3);
    line-height: 1.5;
    margin: 0 0 12px;
}
.bp-minigames-help-item {
    padding: 10px 0;
    border-top: 1px solid var(--border);
    font-size: 13px;
    line-height: 1.5;
}
.bp-minigames-help-item strong { display: block; color: var(--accent); font-weight: 700; margin-bottom: 2px; }
.bp-minigames-help-item span { color: var(--text-2); }

/* --- Kopfzeile während eines Laufs: Runde · Herzen · Punkte --------------- */
.bp-topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.bp-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.01em;
    padding: 7px 13px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.bp-chip-round { color: var(--accent); }
.bp-chip-lives { font-size: 14px; letter-spacing: 0.08em; }
.bp-chip-score { margin-left: auto; }

/* --- Bühne: Canvas + DOM-Ebene übereinander --------------------------------
   Feste Seitenverhältnis-Box statt einer vom Inhalt abhängigen Höhe —
   dieselbe Überlegung wie beim Skizzenduell-Canvas im Implementierungsplan:
   die Fläche darf sich nicht verschieben, während gerade etwas fällt,
   blinkt oder verschwindet. */
.bp-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    max-height: 62vh;
    margin: 0 auto;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    touch-action: none;
}
.bp-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Countdown-Leiste am oberen Rand der Bühne — eine der von der Engine
   garantierten Bausteine (s. Implementierungsplan, Vertragsmodell): läuft
   als CSS-Animation statt per rAF-getriebener Breitenänderung, damit sie
   sich bei einer Pause sauber über animation-play-state anhalten lässt
   (s. blitzparade.js: pauseRound()/resumeFromPause()) — eine reine
   CSS-transition ließe sich dafür nicht mitten im Ablauf einfrieren. */
.bp-timebar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    z-index: 4;
    background: var(--surface-3);
}
.bp-timebar-fill {
    height: 100%;
    width: 100%;
    background: var(--accent-grad);
    transform-origin: left;
    /* Bewusst KEIN animation-name hier: blitzparade.js setzt die komplette
       Kurzschreibweise inkl. Dauer bei jedem Rundenstart selbst. Stünde der
       Name schon hier, liefe die Animation mit der Vorgabedauer 0s und die
       Leiste stünde durch animation-fill-mode: forwards schon während der
       Anweisungskarte auf leer. */
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
@keyframes bp-timebar-drain {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}
/* Für Minispiele, die lieber mit echten DOM-Buttons arbeiten (even, count,
   stroop, sequence) statt selbst auf den Canvas zu zeichnen — die Engine
   leert und befüllt diese Ebene bei jeder neuen Runde frisch (s.
   assets/js/blitzparade.js: ctx.root). */
.bp-dom-layer {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    touch-action: none;
}

/* --- Anweisungskarte ("AUSWEICHEN!"), kurz vor jeder Runde ---------------- */
.bp-instruction-overlay {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    background: rgba(5, 7, 12, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}
.bp-instruction-overlay.is-visible { opacity: 1; }
.bp-instruction-text {
    font-size: clamp(28px, 9vw, 42px);
    font-weight: 900;
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: #fff;
    text-shadow: 0 0 34px var(--accent-glow), 0 6px 20px rgba(0, 0, 0, 0.6);
    animation: bp-pop 0.4s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
@keyframes bp-pop {
    0% { opacity: 0; transform: scale(0.7); }
    100% { opacity: 1; transform: scale(1); }
}

/* --- "SCHNELLER!"-Zwischenbild, alle paar Runden -------------------------- */
.bp-level-overlay {
    position: absolute;
    inset: 0;
    z-index: 7;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-grad);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}
.bp-level-overlay.is-visible { opacity: 1; }
.bp-level-text {
    font-size: clamp(24px, 8vw, 36px);
    font-weight: 900;
    letter-spacing: 0.02em;
    color: #0A0C12;
    animation: bp-pop 0.35s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}

/* --- Ergebnisblitz nach jeder Runde (grün/rot, ~400ms) -------------------- */
.bp-flash-overlay {
    position: absolute;
    inset: 0;
    z-index: 8;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
}
.bp-flash-overlay.is-win { opacity: 1; background: rgba(52, 211, 153, 0.4); }
.bp-flash-overlay.is-lose { opacity: 1; background: rgba(251, 113, 133, 0.45); }

/* --- Pause (Tab weggeschaltet, s. blitzparade.js: visibilitychange) ------- */
.bp-pause-overlay {
    position: absolute;
    inset: 0;
    z-index: 9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
    padding: 20px;
    background: rgba(5, 7, 12, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
/* display:flex oben stammt aus dem Autoren-Stylesheet und schlägt in der
   Kaskade das [hidden] { display: none } des Browsers — ohne diese Zeile
   läge das Pause-Overlay dauerhaft über der Bühne, obwohl blitzparade.js
   es per hidden-Attribut wegschaltet. */
.bp-pause-overlay[hidden] { display: none; }
.bp-pause-overlay p { font-size: 14px; color: var(--text-2); line-height: 1.5; max-width: 240px; margin: 0; }

/* --- Minispiel-Grundformen (DOM-Ebene) -------------------------------------
   Ein kleiner, gemeinsamer Baukasten für die Minispiele, die lieber mit
   echten Tap-Zielen arbeiten als selbst auf den Canvas zu zeichnen (even,
   count, stroop, sequence) — jedes setzt nur --bp-cols und füllt die
   Kacheln, statt eigene Grid-Regeln zu duplizieren. */
.bp-tile-grid {
    display: grid;
    grid-template-columns: repeat(var(--bp-cols, 2), 1fr);
    gap: 10px;
    width: 100%;
}
.bp-tile {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-size: clamp(15px, 5.5vw, 22px);
    font-weight: 750;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: transform 0.1s ease, background 0.12s ease, border-color 0.12s ease;
}
.bp-tile:active { transform: scale(0.92); background: var(--surface-3); }
.bp-tile.is-lit { background: var(--accent-grad); color: #0A0C12; border-color: transparent; }

/* Großer, verlockend pulsierender Knopf ("NICHT TIPPEN!") */
.bp-big-button {
    width: min(56vw, 220px);
    height: min(56vw, 220px);
    border-radius: 50%;
    border: none;
    background: var(--accent-grad);
    color: #0A0C12;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: 0 10px 34px -8px var(--accent-glow), inset 0 2px 0 rgba(255, 255, 255, 0.3);
    animation: bp-tempt 1s ease-in-out infinite;
}
@keyframes bp-tempt {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.07); }
}

/* Reflex-Leiste: ein Zeiger saust über eine Zone, im richtigen Moment antippen */
.bp-bar {
    position: relative;
    width: 100%;
    height: 56px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
}
.bp-bar-zone {
    position: absolute;
    top: 0;
    bottom: 0;
    background: var(--green-soft);
    border-left: 2px solid var(--green);
    border-right: 2px solid var(--green);
}
.bp-bar-pointer {
    position: absolute;
    top: -6px;
    bottom: -6px;
    width: 6px;
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.75);
}

/* --- Bewegungsreduzierte Darstellung ---------------------------------------
   Blitzparade lebt von Bewegung (Pulsieren, Blitzen, ein hüpfender Zeiger)
   — bei prefers-reduced-motion bleibt das Spiel bedienbar, aber ruhiger:
   Pulsieren entfällt, der Ergebnisblitz wechselt ohne Überblendung. */
@media (prefers-reduced-motion: reduce) {
    .bp-instruction-text, .bp-level-text { animation: none; }
    .bp-big-button { animation: none; box-shadow: 0 10px 34px -8px var(--accent-glow), inset 0 2px 0 rgba(255, 255, 255, 0.3), 0 0 0 3px var(--accent-soft); }
    .bp-flash-overlay, .bp-instruction-overlay, .bp-level-overlay { transition: none; }
}

/* --- Größere Bühne + Bedienelemente ab echter Desktop-Breite --------------
   Dasselbe Anliegen wie beim hg-stage-900px-Sprung weiter oben ("besonders
   die Bilder... damit man auf kleine Details achten kann") — mobil bleibt
   .bp-stage bewusst kompakt (Daumenreichweite, wenig Bildschirmfläche), ab
   900px ist genug Platz da, den die App bisher liegen ließ.

   .bp-stage steht HOCHKANT (aspect-ratio 3/4, anders als hg-stage 4/3) —
   die Breite deshalb NICHT so aggressiv hochziehen wie bei hg-stage (880px
   Breite bräuchte hier ~1173px Höhe, weit über jedes normale Browser-
   fenster). Stattdessen zieht max-height den Bug, max-width liegt
   großzügig darüber, damit die aus der Höhe abgeleitete Breite (über
   aspect-ratio) nie selbst zur Bremse wird.

   ctx.scale (s. blitzparade.js: playRound()) trägt denselben Größensprung
   in die rein CANVAS-gezeichneten Minispiele (dodge, swat) und in count.js'
   fest inline gestylte Punkte — deren Formen haben keine CSS-Größe, die
   hier automatisch mitwachsen würde. */
@media (min-width: 640px) {
    .bp-stage { max-width: 480px; }
}
@media (min-width: 900px) {
    .bp-stage { max-width: 560px; max-height: 74vh; }

    .bp-chip { font-size: 14.5px; padding: 9px 17px; }
    .bp-chip-lives { font-size: 17px; }

    .bp-instruction-text { font-size: clamp(34px, 5vw, 58px); }
    .bp-level-text { font-size: clamp(30px, 4.5vw, 50px); }

    .bp-dom-layer { padding: 26px; }
    .bp-tile-grid { gap: 14px; }
    .bp-tile { font-size: clamp(19px, 3vw, 30px); }

    /* min(): Prozentanteil bleibt die Bremse auf mittleren Breiten, der
       Pixel-Deckel verhindert einen absurd großen Knopf auf sehr breiten
       Fenstern — dieselbe Konstruktion wie beim mobilen Wert, nur beide
       Zahlen angehoben. */
    .bp-big-button { width: min(26vw, 300px); height: min(26vw, 300px); font-size: 21px; }

    .bp-bar { height: 72px; }
    .bp-bar-pointer { width: 8px; }
}

/* =====================================================================
   Stadt, Land, Fluss — Klassiker, 2–8 Spieler.

   Wiederverwendbare Bausteine aus History Guesser werden HIER NICHT
   dupliziert: .hg-avatar, .hg-popup-*, .hg-leaderboard-*, .hg-waiting*,
   .hg-lobby-*, .hg-invite-divider, .hg-user-search-*, .hg-howto*,
   .hg-game-list-row, .hg-open-lobby-row, .hg-finished*, .hg-trophy,
   .hg-next-hint, .hg-start-overlay/-number/-label, .hg-reveal-label,
   .hg-my-result*, .hg-no-guess werden von stadt-land-fluss.js direkt
   wiederverwendet. Nur die spielspezifischen Bausteine unten (Buchstaben-
   Karte, Zettel, Prüfkarten, Abstimmliste, Auflösung) sind neu.
   ===================================================================== */
#slfRoot { flex: 1; display: flex; flex-direction: column; }

/* --- Kategorienauswahl auf der Übersichtsseite -------------------------- */
.slf-cat-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.slf-cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 13px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}
.slf-cat-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.slf-cat-chip.is-on {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--text);
}

.slf-cat-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 12px; }
.slf-cat-tag {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
}

/* --- Runden-Kopf: Chips + große Buchstaben-Karte --------------------------
   Gleiche Chip-Optik wie bei Faktenschwindler (auf normalem Seiten-
   hintergrund, nicht über einem Bild schwebend). */
.slf-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 14px;
}
.slf-chip {
    display: inline-flex;
    align-items: center;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.01em;
    padding: 7px 13px;
    border-radius: 999px;
}
.slf-chip-round { color: var(--accent); }
.slf-chip-timer { font-variant-numeric: tabular-nums; min-width: 46px; justify-content: center; }
.slf-chip-timer.is-urgent {
    background: rgba(251, 113, 133, 0.9);
    border-color: transparent;
    color: #1A0409;
    animation: pulse 1s ease-in-out infinite;
}

.slf-letter-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 18px 16px;
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    margin-bottom: 16px;
}
.slf-letter-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-3);
}
.slf-letter {
    font-size: clamp(52px, 18vw, 88px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    background: var(--accent-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 6px 26px var(--accent-glow));
}

/* --- Zettel (Schreibphase) ------------------------------------------------ */
.slf-sheet { display: flex; flex-direction: column; gap: 12px; }
.slf-field { display: flex; flex-direction: column; gap: 5px; }
.slf-field label {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-2);
}
.slf-cell {
    width: 100%;
    font-family: inherit;
    font-size: 16px; /* verhindert Auto-Zoom bei Fokus auf iOS Safari */
    font-weight: 550;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
}
.slf-cell:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--surface-2);
    box-shadow: 0 0 0 4px var(--accent-soft);
}
.slf-cell:disabled { opacity: 0.55; }

.slf-progress { text-align: center; font-size: 12.5px; color: var(--text-3); margin: 14px 0 12px; min-height: 16px; }
.slf-hint { text-align: center; font-size: 12.5px; color: var(--accent); font-weight: 600; margin: 12px 0 0; min-height: 16px; }
.slf-phase-title { text-align: center; font-size: 16px; font-weight: 750; letter-spacing: -0.01em; margin-top: 4px; }
.slf-phase-sub { text-align: center; font-size: 12.5px; color: var(--text-3); line-height: 1.5; margin: 6px 0 14px; }

/* --- Prüfphase: eine Karte je Kategorie -------------------------------- */
.slf-check-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 12px 14px;
    margin-bottom: 12px;
}
.slf-check-cat {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 8px;
}
.slf-answer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 0;
    border-top: 1px solid var(--border);
}
.slf-answer:first-of-type { border-top: none; }
.slf-answer.is-invalid { opacity: 0.5; }
.slf-answer.is-mine .slf-answer-text { color: var(--accent); }
.slf-answer-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.slf-answer-author { font-size: 11px; font-weight: 700; color: var(--text-3); letter-spacing: 0.02em; }
.slf-answer-text { font-size: 14.5px; font-weight: 600; line-height: 1.35; word-break: break-word; }
.slf-answer-note { font-size: 11px; color: var(--text-3); text-align: right; flex-shrink: 0; max-width: 40%; }

.slf-challenge-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-2);
    cursor: pointer;
    transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}
.slf-challenge-btn:disabled { opacity: 0.5; cursor: default; }
.slf-challenge-btn.is-on {
    border-color: rgba(251, 113, 133, 0.6);
    background: rgba(251, 113, 133, 0.16);
    color: #FCA5B4;
}
.slf-challenge-count {
    font-variant-numeric: tabular-nums;
    background: rgba(251, 113, 133, 0.22);
    color: #FCA5B4;
    border-radius: 999px;
    padding: 0 6px;
    min-width: 18px;
    text-align: center;
}

/* --- Abstimmphase ---------------------------------------------------------- */
.slf-vote-list { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.slf-vote-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 13px 14px;
}
.slf-vote-item.is-locked { opacity: 0.6; }
.slf-vote-item.is-voted { border-color: var(--accent); }
.slf-vote-item-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.slf-vote-cat { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.slf-vote-answer { font-size: 16px; font-weight: 700; line-height: 1.3; word-break: break-word; }
.slf-vote-author { font-size: 12px; color: var(--text-3); }
.slf-vote-note { font-size: 12px; color: var(--text-3); font-style: italic; }
.slf-vote-actions { display: flex; gap: 8px; }
.slf-vote-actions .btn { flex: 1; }
.slf-vote-btn.is-chosen { border-color: var(--accent); color: var(--accent); }

/* --- Auflösung ----------------------------------------------------------- */
.slf-reveal-cat { margin-top: 16px; }
.slf-reveal-cat-name {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 6px;
}
.slf-reveal-answer {
    display: grid;
    grid-template-columns: 22px 1fr auto auto;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    margin-bottom: 6px;
    font-size: 14px;
}
.slf-reveal-answer.is-out { opacity: 0.5; }
.slf-reveal-answer.is-alone { border-color: var(--accent); background: var(--accent-soft); }
.slf-reveal-mark { text-align: center; }
.slf-reveal-who { font-size: 11px; color: var(--text-3); font-weight: 700; }
.slf-reveal-word { font-weight: 650; word-break: break-word; }
.slf-reveal-pts { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--accent); }

.slf-standings {
    margin-top: 22px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 12px 16px;
}
.slf-standings-title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 8px;
}
.slf-standings-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 14px;
    border-top: 1px solid var(--border);
}
.slf-standings-row:first-of-type { border-top: none; }
.slf-standings-row.is-me { color: var(--accent); font-weight: 700; }
.slf-standings-row span:last-child { font-variant-numeric: tabular-nums; font-weight: 700; }

@media (min-width: 900px) {
    .slf-letter { font-size: 104px; }
}

/* =====================================================================
   Skizzenduell — Zeichnen & Raten, 2–8 Spieler.

   Wiederverwendbare Bausteine aus History Guesser werden HIER NICHT
   dupliziert: .hg-avatar, .hg-popup-*, .hg-leaderboard-*, .hg-waiting*,
   .hg-lobby-*, .hg-invite-divider, .hg-user-search-*, .hg-howto*,
   .hg-game-list-row, .hg-open-lobby-row, .hg-finished*, .hg-trophy,
   .hg-next-hint, .hg-reveal-label, .hg-my-result* werden von
   skizzenduell.js direkt wiederverwendet. Nur die spielspezifischen
   Bausteine unten (Canvas, Werkzeugleiste, Palette, Rate-Stream,
   Wortmaske, Wortauswahl, Auflösung) sind neu.
   ===================================================================== */
#sdRoot { flex: 1; display: flex; flex-direction: column; }

/* --- Runden-Kopf: Chips (gleiche Optik wie bei Stadt, Land, Fluss) ------ */
.sd-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 14px;
}
.sd-chip {
    display: inline-flex;
    align-items: center;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.01em;
    padding: 7px 13px;
    border-radius: 999px;
}
.sd-chip-round { color: var(--accent); }
.sd-chip-timer { font-variant-numeric: tabular-nums; min-width: 46px; justify-content: center; }
.sd-chip-timer.is-urgent {
    background: rgba(251, 113, 133, 0.9);
    border-color: transparent;
    color: #1A0409;
    animation: pulse 1s ease-in-out infinite;
}

.sd-phase-title { text-align: center; font-size: 16px; font-weight: 750; letter-spacing: -0.01em; margin-top: 4px; }
.sd-phase-sub { text-align: center; font-size: 12.5px; color: var(--text-3); line-height: 1.5; margin: 6px 0 14px; }
.sd-draw-word { text-align: center; font-size: 14px; color: var(--text-2); margin: 2px 0 10px; }
.sd-draw-word strong { color: var(--accent); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 800; }

/* --- Wortauswahl (choose-Phase, nur der Zeichner) ---------------------- */
.sd-word-choices { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.sd-word-choice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    font-family: inherit;
    text-align: left;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.14s ease, background 0.14s ease, transform 0.1s ease;
}
.sd-word-choice:disabled { opacity: 0.5; cursor: default; }
.sd-word-choice.is-chosen { border-color: var(--accent); background: var(--accent-soft); }
.sd-word-choice-word { font-size: 18px; font-weight: 750; letter-spacing: -0.01em; }
.sd-word-choice-diff {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-3);
    flex-shrink: 0;
}

/* --- Zeichenfläche ---------------------------------------------------------
   Feste Seitenverhältnis-Box: das Canvas darf nicht in einem Container
   liegen, der bei offener Bildschirmtastatur seine Höhe ändert — sonst
   springt beim Tippen im Rate-Stream die Zeichnung (s. Plan D.6.3). Das
   Papier ist bewusst hell und THEME-UNABHÄNGIG (ein Skizzenblock), die
   Tinte dunkel — deshalb hier feste Farben statt der --surface-Token. */
.sd-canvas-wrap {
    position: relative;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #F7F5EF;
    border: 1px solid var(--border);
    box-shadow: 0 10px 34px -14px rgba(0, 0, 0, 0.5);
}
/* Fallback für WebViews ohne aspect-ratio (< iOS 15). */
@supports not (aspect-ratio: 1 / 1) {
    .sd-canvas-wrap::before { content: ''; display: block; padding-bottom: 100%; }
}
.sd-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;   /* Wischgesten nicht die Seite scrollen lassen */
}

/* --- Werkzeugleiste (nur der Zeichner) --------------------------------- */
.sd-tools { margin-top: 12px; }
.sd-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 10px;
}
.sd-swatch {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid var(--border);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: transform 0.1s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.sd-swatch.is-active {
    border-color: var(--accent);
    transform: scale(1.12);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.sd-eraser {
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sd-tools-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.sd-widths { display: flex; gap: 6px; }
.sd-width {
    width: 34px;
    height: 34px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.sd-width.is-active { border-color: var(--accent); background: var(--accent-soft); }
.sd-width-dot { display: block; border-radius: 50%; background: var(--text); }

/* --- Wortmaske (Rater) --------------------------------------------------- */
.sd-mask {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 4px;
    justify-content: center;
    margin: 4px 0 12px;
}
.sd-mask-box {
    min-width: 20px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-bottom: 2px solid var(--text-3);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--accent);
    text-transform: uppercase;
}
.sd-mask-box.is-fixed { color: var(--text-3); border-bottom-color: transparent; }
.sd-mask-box.is-shown { border-bottom-color: var(--accent); }
.sd-mask-gap { width: 12px; }

/* --- Rate-Stream ------------------------------------------------------- */
.sd-guess-stream {
    max-height: 168px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 10px 0;
    padding: 4px 0;
}
.sd-guess-row {
    display: flex;
    gap: 8px;
    font-size: 13.5px;
    line-height: 1.4;
    padding: 4px 8px;
    border-radius: 8px;
    background: var(--surface);
}
.sd-guess-row.is-mine { background: var(--surface-2); }
.sd-guess-row.is-correct { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.sd-guess-row.is-close { color: #F2C21E; }
.sd-guess-name { font-weight: 700; color: var(--text-3); flex-shrink: 0; }
.sd-guess-text { word-break: break-word; min-width: 0; }

.sd-guess-form { display: flex; gap: 8px; margin-top: 4px; }
.sd-guess-input {
    flex: 1;
    min-width: 0;
    font-family: inherit;
    font-size: 16px; /* verhindert Auto-Zoom bei Fokus auf iOS Safari */
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
}
.sd-guess-input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--surface-2);
    box-shadow: 0 0 0 4px var(--accent-soft);
}
.sd-guess-send { flex-shrink: 0; }
.sd-guess-locked {
    text-align: center;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--accent);
    padding: 12px;
    border: 1px dashed var(--accent);
    border-radius: var(--radius);
    background: var(--accent-soft);
    margin-top: 4px;
}

/* --- „X hat es!"-Liste ------------------------------------------------- */
.sd-solved { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.sd-solved-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    font-weight: 650;
    padding: 5px 10px;
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--accent);
}
.sd-solved-row span:last-child { font-variant-numeric: tabular-nums; }

/* --- Auflösung -------------------------------------------------------- */
.sd-reveal-word {
    text-align: center;
    font-size: clamp(26px, 8vw, 40px);
    font-weight: 800;
    letter-spacing: -0.02em;
    background: var(--accent-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 6px 26px var(--accent-glow));
    margin-bottom: 12px;
}
.sd-reveal-none { text-align: center; font-size: 13px; color: var(--text-3); padding: 8px; }

.sd-standings {
    margin-top: 22px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 12px 16px;
}
.sd-standings-title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 8px;
}
.sd-standings-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 14px;
    border-top: 1px solid var(--border);
}
.sd-standings-row:first-of-type { border-top: none; }
.sd-standings-row.is-me { color: var(--accent); font-weight: 700; }
.sd-standings-row span:last-child { font-variant-numeric: tabular-nums; font-weight: 700; }

@media (min-width: 640px) {
    .sd-canvas-wrap { max-width: 520px; }
}

@media (prefers-reduced-motion: reduce) {
    .sd-chip-timer.is-urgent { animation: none; }
    .sd-swatch.is-active { transform: none; }
}

/* =====================================================================
   Burgherr — Aufbau-Strategie als Dauerwelt.
   Anders als bei den Partie-Spielen kein Phasenwechsel-Screen, sondern ein
   dauerhaftes Dashboard mit vier Reitern (Burg/Karte/Truppen/Berichte,
   clientseitig umgeschaltet, s. assets/js/burgherr.js). .bh-progress ist
   bewusst generisch (Bau, Ausbildung UND Marsch teilen sich dieselbe
   Balken-Optik) statt drei fast identische Varianten anzulegen.
   ===================================================================== */

.bh-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    margin: 0 0 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.bh-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 6px;
    border-radius: calc(var(--radius-lg) - 4px);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-2);
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
}
.bh-tab.is-active { background: var(--accent-soft); color: var(--accent); }
.bh-tab-badge {
    position: absolute;
    top: 2px;
    right: 10px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--red);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* --- Ressourcenleiste --------------------------------------------------- */
.bh-resources {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}
.bh-resource {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
}
.bh-resource-head { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); font-weight: 700; }
.bh-resource-value { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; margin-top: 2px; }
.bh-resource-rate { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.bh-resource-bar { margin-top: 7px; height: 4px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.bh-resource-bar-fill { height: 100%; background: var(--accent-grad); border-radius: 999px; }
.bh-resource-bar-fill.is-full { background: var(--amber); }

.bh-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--text-2);
    margin: -6px 0 16px;
    padding: 0 2px;
}
.bh-summary-row strong { color: var(--text); font-weight: 750; }
.bh-shield-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--green-soft);
    color: var(--green);
    font-size: 12px;
    font-weight: 700;
}

/* --- Fortschrittsbalken (Bau/Ausbildung/Marsch teilen sich das) -------- */
.bh-progress-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-soft);
    border-radius: var(--radius);
    padding: 10px 14px;
    margin-bottom: 14px;
}
.bh-progress-icon { font-size: 22px; flex: 0 0 auto; }
.bh-progress-body { flex: 1; min-width: 0; }
.bh-progress-label { font-size: 13px; font-weight: 700; color: var(--text); display: flex; justify-content: space-between; gap: 8px; }
.bh-progress-label span:last-child { color: var(--accent); font-variant-numeric: tabular-nums; }
.bh-progress-track { margin-top: 6px; height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.bh-progress-fill { height: 100%; background: var(--accent-grad); border-radius: 999px; transition: width 0.4s linear; }
.bh-progress-cancel { flex: 0 0 auto; }

/* --- Gebäuderaster ------------------------------------------------------ */
.bh-buildings { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 480px) { .bh-buildings { grid-template-columns: repeat(3, 1fr); } }
.bh-building-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: center;
}
.bh-building-card.is-locked { opacity: 0.55; }
.bh-building-icon { font-size: 26px; }
.bh-building-name { font-size: 13px; font-weight: 750; }
.bh-building-level { font-size: 11.5px; color: var(--accent); font-weight: 700; }
.bh-building-effect { font-size: 11px; color: var(--text-3); min-height: 14px; }
.bh-building-card .btn { margin-top: 4px; width: 100%; }
.bh-building-cost { font-size: 10.5px; color: var(--text-3); line-height: 1.4; }
.bh-building-cost .is-short { color: var(--red); }

.bh-building-detail {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 14px;
}
.bh-building-detail-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.bh-building-detail-head .bh-building-icon { font-size: 30px; }
.bh-building-detail-title { font-size: 16px; font-weight: 800; }
.bh-building-detail-sub { font-size: 12.5px; color: var(--text-2); }
.bh-building-detail-desc { font-size: 13px; color: var(--text-2); line-height: 1.5; margin: 8px 0 12px; }

/* --- Truppen ------------------------------------------------------------- */
.bh-troops-summary { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--text-2); margin-bottom: 12px; }
.bh-troop-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.bh-troop-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 9px 12px;
}
.bh-troop-icon { font-size: 19px; flex: 0 0 auto; }
.bh-troop-name { flex: 1; font-size: 13.5px; font-weight: 650; }
.bh-troop-amount { font-weight: 800; font-variant-numeric: tabular-nums; }
.bh-troop-empty { text-align: center; color: var(--text-3); font-size: 13px; padding: 14px; }

.bh-train-grid { display: flex; flex-direction: column; gap: 8px; }
.bh-train-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
}
.bh-train-row.is-locked { opacity: 0.5; }
.bh-train-row-main { flex: 1; min-width: 0; }
.bh-train-row-name { font-size: 13.5px; font-weight: 700; }
.bh-train-row-stats { font-size: 11px; color: var(--text-3); }
.bh-train-row input[type="number"] { width: 64px; text-align: center; padding: 6px 4px; }

/* --- Karte ---------------------------------------------------------------- */
.bh-map-toolbar { display: flex; gap: 8px; margin-bottom: 12px; }
.bh-map-toolbar .btn { flex: 1; }
.bh-map-grid {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 3px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 8px;
}
.bh-map-cell {
    aspect-ratio: 1;
    border-radius: 6px;
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    cursor: default;
    position: relative;
}
.bh-map-cell.is-empty { background: transparent; }
.bh-map-cell.is-camp, .bh-map-cell.is-base { cursor: pointer; }
.bh-map-cell.is-mine { background: var(--accent-soft); border: 1px solid var(--accent); }
.bh-map-cell.is-camp { background: var(--amber-soft); }
.bh-map-cell.is-shielded::after {
    content: "🛡";
    position: absolute;
    bottom: 1px;
    right: 1px;
    font-size: 8px;
}
.bh-map-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; font-size: 11.5px; color: var(--text-2); }
.bh-map-legend span { display: inline-flex; align-items: center; gap: 4px; }

/* --- Ausgehende Märsche -------------------------------------------------- */
.bh-march-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.bh-march-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 12px;
    font-size: 12.5px;
}
.bh-march-row .bh-march-dir { font-size: 16px; }
.bh-march-row-main { flex: 1; }
.bh-march-row-time { font-variant-numeric: tabular-nums; color: var(--text-2); }

/* --- Angriffs-/Marschdialog ----------------------------------------------- */
.bh-dialog-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(3, 4, 8, 0.72);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 60;
    padding: 0;
}
@media (min-width: 560px) { .bh-dialog-backdrop { align-items: center; padding: 20px; } }
.bh-dialog {
    background: var(--bg-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    width: 100%;
    max-width: 460px;
    max-height: 88vh;
    overflow-y: auto;
    padding: 20px 18px calc(18px + var(--safe-bottom));
}
@media (min-width: 560px) { .bh-dialog { border-radius: var(--radius-xl); } }
.bh-dialog-title { font-size: 17px; font-weight: 800; margin-bottom: 4px; }
.bh-dialog-sub { font-size: 12.5px; color: var(--text-2); margin-bottom: 14px; }
.bh-dialog-troop-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid var(--border);
}
.bh-dialog-troop-row:first-of-type { border-top: none; }
.bh-dialog-troop-row input[type="number"] { width: 68px; text-align: center; padding: 6px 4px; }
.bh-dialog-hint { font-size: 12px; color: var(--text-3); margin: 10px 0; line-height: 1.5; }
.bh-dialog-hint.is-warning { color: var(--amber); }
.bh-dialog-actions { display: flex; gap: 10px; margin-top: 14px; }
.bh-dialog-actions .btn { flex: 1; }

/* --- Berichte -------------------------------------------------------------- */
.bh-report-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 12px 14px;
    margin-bottom: 8px;
    cursor: pointer;
}
.bh-report-card.is-unread { border-color: var(--accent-soft); background: var(--accent-soft); }
.bh-report-head { display: flex; align-items: center; gap: 8px; }
.bh-report-icon { font-size: 17px; flex: 0 0 auto; }
.bh-report-title { flex: 1; font-size: 13.5px; font-weight: 700; }
.bh-report-time { font-size: 11px; color: var(--text-3); white-space: nowrap; }
.bh-report-outcome { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.bh-report-outcome.is-win { color: var(--green); }
.bh-report-outcome.is-loss { color: var(--red); }
.bh-report-body { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-2); line-height: 1.6; }
.bh-report-body-row { display: flex; justify-content: space-between; gap: 8px; }
.bh-report-empty { text-align: center; color: var(--text-3); font-size: 13px; padding: 30px 14px; }

/* --- Saison-Banner --------------------------------------------------------- */
.bh-season-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 9px 14px;
    margin-bottom: 14px;
    font-size: 12.5px;
    color: var(--text-2);
}
.bh-season-banner strong { color: var(--accent); font-variant-numeric: tabular-nums; }