:root {
    --bg: #f5f5f4;
    --surface: #ffffff;
    --border: #111827;
    --border-soft: #d4d4d8;
    --text: #111827;
    --text-muted: #525252;
    --accent-me: #2563eb;
    --accent-partner: #b45309;
    --error: #b91c1c;
    --radius: 14px;
    --radius-sm: 10px;
    --shadow-soft: 0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04);
    --shadow-pop: 0 6px 18px rgba(0,0,0,.08);
}

/* Manueller Theme-Override (html[data-theme="dark"] / [data-theme="light"]) hat
   Vorrang vor prefers-color-scheme. */
html[data-theme="dark"] {
    --bg: #0b0b0c;
    --surface: #18181b;
    --border: #e4e4e7;
    --border-soft: #3f3f46;
    --text: #f4f4f5;
    --text-muted: #a1a1aa;
    --accent-me: #60a5fa;
    --accent-partner: #fbbf24;
    --error: #f87171;
    --shadow-soft: 0 1px 2px rgba(0,0,0,.5);
    --shadow-pop: 0 6px 18px rgba(0,0,0,.6);
}
html[data-theme="light"] {
    --bg: #f5f5f4;
    --surface: #ffffff;
    --border: #111827;
    --border-soft: #d4d4d8;
    --text: #111827;
    --text-muted: #525252;
    --accent-me: #2563eb;
    --accent-partner: #b45309;
    --error: #b91c1c;
    --shadow-soft: 0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04);
    --shadow-pop: 0 6px 18px rgba(0,0,0,.08);
}
html[data-theme="lilac"] {
    --bg: #f5f0fb;
    --surface: #ffffff;
    --border: #4c1d95;
    --border-soft: #ddd6fe;
    --text: #3b0764;
    --text-muted: #6d28d9;
    --accent-me: #7c3aed;
    --accent-partner: #ec4899;
    --error: #b91c1c;
    --shadow-soft: 0 1px 2px rgba(76, 29, 149, 0.08), 0 1px 1px rgba(76, 29, 149, 0.05);
    --shadow-pop: 0 6px 18px rgba(76, 29, 149, 0.16);
}
html[data-theme="marine"] {
    --bg: #eff6ff;
    --surface: #ffffff;
    --border: #1e3a8a;
    --border-soft: #bfdbfe;
    --text: #172554;
    --text-muted: #1d4ed8;
    --accent-me: #0284c7;
    --accent-partner: #f59e0b;
    --error: #b91c1c;
    --shadow-soft: 0 1px 2px rgba(30, 58, 138, 0.08), 0 1px 1px rgba(30, 58, 138, 0.05);
    --shadow-pop: 0 6px 18px rgba(30, 58, 138, 0.16);
}
html[data-theme="rot"] {
    --bg: #fff5f5;
    --surface: #ffffff;
    --border: #7f1d1d;
    --border-soft: #fecaca;
    --text: #450a0a;
    --text-muted: #b91c1c;
    --accent-me: #cd5c5c;
    --accent-partner: #0d9488;
    --error: #7f1d1d;
    --shadow-soft: 0 1px 2px rgba(127, 29, 29, 0.08), 0 1px 1px rgba(127, 29, 29, 0.05);
    --shadow-pop: 0 6px 18px rgba(127, 29, 29, 0.16);
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme]) {
        --bg: #0b0b0c;
        --surface: #18181b;
        --border: #e4e4e7;
        --border-soft: #3f3f46;
        --text: #f4f4f5;
        --text-muted: #a1a1aa;
        --accent-me: #60a5fa;
        --accent-partner: #fbbf24;
        --error: #f87171;
        --shadow-soft: 0 1px 2px rgba(0,0,0,.5);
        --shadow-pop: 0 6px 18px rgba(0,0,0,.6);
    }
}

* { box-sizing: border-box; }

/* `hidden`-Attribut soll IMMER verbergen, auch bei Elementen mit eigener
   display-Regel (z.B. `.search-bar { display: flex }` würde sonst die
   UA-Default-Regel `[hidden] { display: none }` durch gleiche Spezifität
   überschreiben). */
[hidden] { display: none !important; }

/* Textmarker-Look für Suchtreffer. Linearer Gradient simuliert eine
   Markerspitze, die schräg über den Text gezogen wurde — nicht eckig
   überall hinten und vorn, sondern als breiter Streifen ungefähr im
   unteren 2/3-Bereich des Glyphen. */
:root { --search-marker: rgb(202 255 0 / 65%); }
html[data-theme="dark"] { --search-marker: rgb(202 255 0 / 45%); }
@media (prefers-color-scheme: dark) {
    html:not([data-theme]) { --search-marker: rgb(202 255 0 / 45%); }
}
mark.search-hit {
    background-image: linear-gradient(
        180deg,
        transparent 12%,
        var(--search-marker) 18%,
        var(--search-marker) 88%,
        transparent 94%
    );
    background-color: transparent;
    color: inherit;
    font-weight: bold;
    padding: 0 1px;
    border-radius: 1px;
    /* Marker-Ränder ein bisschen "abgerissen" — geringfügige Skew + leichte
       Box-Shadow täuschen unsaubere Auftragsränder vor. */
    box-shadow:
        -1px 0 0 0 color-mix(in srgb, var(--search-marker) 50%, transparent),
        1px 0 0 0 color-mix(in srgb, var(--search-marker) 50%, transparent);
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font: 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
}
/* Im Game-View darf nur der Stream-Container scrollen — Body fixiert die
   volle Viewport-Hoehe (dvh respektiert Adressleisten-Animationen). Sonst
   wandert die Topbar beim Wegblenden der mobilen Browser-UI weg. */
body[data-view="game"] {
    height: 100vh;
    height: 100dvh;
    /* JS misst visualViewport.height live und setzt --app-height. Das ist
       die einzig zuverlässige Höhe quer durch iOS / Android-Chrome / PWA
       inkl. Statusbar + Gesture-Bar. CSS-Variable überschreibt das dvh. */
    height: var(--app-height, 100dvh);
    overflow: hidden;
    /* overscroll-behavior NICHT auf 'none' — sonst killt's Pull-to-Refresh. */
    overscroll-behavior: contain;
}

button { font: inherit; cursor: pointer; }

.view { display: none; }
.view-active { display: block; }

#view-login, #view-change-pw {
    max-width: 420px;
    margin: 0 auto;
    padding: max(env(safe-area-inset-top, 0), 32px) 20px 32px;
}

.login-title {
    font-size: 32px;
    margin: 8px 0 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.hint {
    color: var(--text-muted);
    font-size: 14px;
    margin: -8px 0 16px;
}

.field { display: block; margin-bottom: 14px; }
.field-label {
    display: block;
    font-size: 13px;
    margin-bottom: 4px;
    color: var(--text-muted);
}
.field input {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--border-soft);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-size: 16px;
}
.field input:focus {
    outline: none;
    border-color: var(--accent-me);
}

.btn-primary {
    width: 100%;
    padding: 14px;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--text);
    color: var(--bg);
    font-weight: 600;
    font-size: 16px;
    margin-top: 6px;
}
.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-link {
    background: transparent;
    color: var(--text-muted);
    border: 0;
    font-size: 14px;
    padding: 4px 8px;
    text-decoration: none;
}
.btn-link:hover { color: var(--text); text-decoration: none; }

.form-error {
    color: var(--error);
    font-size: 14px;
    margin-top: 8px;
}

#view-game.view-active {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    height: var(--app-height, 100dvh);
    /* iOS-PWA fallback: env() für Geräte die das melden. Bei Android Chrome
       PWA wird --app-height per JS auf visualViewport.height gesetzt. */
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-sizing: border-box;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: max(env(safe-area-inset-top, 0), 10px) 16px 10px;
    background: var(--surface);
    border-bottom: 1.5px solid var(--border-soft);
    flex-shrink: 0;
}
.topbar-game .who { flex: 1 1 auto; min-width: 0; text-align: center; padding: 0 8px; }
.topbar-game .room-name {
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    max-width: 100%;
}
.topbar-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: color-mix(in srgb, var(--text) 5%, transparent);
    border-radius: 999px;
    padding: 2px 4px 2px 10px;
    /* Feste Hoehe -> kein Sprung beim Auf-/Zuklappen des Mobile-Menues. */
    min-height: 34px;
    box-sizing: border-box;
}
.topbar-actions > button.btn-link {
    font-size: 18px;
    padding: 4px 8px 4px 0;
    line-height: 1;
}
.topbar-actions > .topbar-actions-group > button.btn-link {
    font-size: 18px;
    padding: 4px 8px 4px 0;
    line-height: 1;
}

/* Badges sitzen klein oben rechts auf dem jeweiligen Icon und nehmen
   keine horizontale Breite mehr ein. */
#btn-open-tasks,
#btn-patches,
.btn-notifications { position: relative; }
#btn-open-tasks .topbar-badge,
#btn-patches .topbar-badge,
.btn-notifications .topbar-badge {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    min-width: 14px;
    height: 14px;
    line-height: 14px;
    font-size: 9px;
    padding: 0 3px;
    border-radius: 999px;
    box-shadow: 0 0 0 1.5px var(--surface);
}
.topbar-actions-group {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.topbar-menu-toggle { display: none !important; }

/* Konstante Topbar-Hoehe: Buttons + Toggle haben identische Box-Dimensionen,
   damit sich beim Auf-/Zuklappen des Mobile-Menues nichts in der Höhe bewegt.
   font-size + padding gleich + min-height gleich → keine Layout-Sprünge. */
.topbar-actions > button.btn-link,
.topbar-actions > .topbar-actions-group > button.btn-link,
.topbar-menu-toggle {
    min-height: 30px;
    font-size: 18px;
    line-height: 1;
    padding: 4px 8px 4px 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
/* "..."-Toggle darf optisch etwas größer wirken, ohne die Box zu sprengen.
   Padding-left ergaenzt, weil die anderen Buttons keinen Left-Padding haben
   und der Toggle direkt an dem Container-Rand kleben wuerde. */
.topbar-menu-toggle { font-size: 22px; padding: 4px 8px 4px 4px; }

/* Mobile (<=768px): Action-Buttons hinter "..."-Toggle stecken.
   "..." bleibt fest rechts, Group rutscht von rechts ein wenn open. */
@media (max-width: 768px) {
    .topbar .topbar-menu-toggle { display: inline-flex !important; }
    .topbar .topbar-actions-group {
        max-width: 0;
        overflow: hidden;
        opacity: 0;
        gap: 0;
        transition: max-width 0.28s ease, opacity 0.18s ease, gap 0.2s ease;
    }
    body.is-menu-open .topbar .topbar-actions-group {
        max-width: 90vw;
        opacity: 1;
        gap: 2px;
    }
    /* Linke Topbar-Seite (Raumname / Eigener Name) kollabiert beim Menue-Open. */
    .topbar .room-name,
    .topbar .who {
        transition: max-width 0.28s ease, opacity 0.18s ease, padding 0.2s ease, flex 0.2s ease;
    }
    body.is-menu-open .topbar .who {
        max-width: 0;
        padding: 0;
        flex: 0 0 0;
        overflow: hidden;
    }
    body.is-menu-open .topbar .room-name,
    body.is-menu-open .topbar .me-name {
        max-width: 0;
        opacity: 0;
        padding: 0;
    }
}
.who { display: flex; align-items: baseline; gap: 6px; font-size: 14px; }
.me-name { color: var(--accent-me); font-weight: 600; }
.partner-name { color: var(--accent-partner); font-weight: 600; }
.vs { color: var(--text-muted); font-size: 12px; }

.stream {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px 14px 4px;
    display: flex;
    flex-direction: column;
    -webkit-overflow-scrolling: touch;
}

.load-more-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
}

#rounds {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: auto;
}

.round-card {
    background: var(--surface);
    border: 1.5px solid var(--border-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.round-question {
    padding: 12px 14px 6px;
    background: color-mix(in srgb, var(--text) 6%, transparent);
    font-weight: 600;
    font-size: 15px;
    white-space: pre-wrap;
    word-break: break-word;
}
.round-fav-btn {
    position: absolute;
    top: 6px;
    right: 8px;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    padding: 2px 4px;
    color: var(--text-muted);
    transition: transform 80ms ease, color 80ms ease;
    z-index: 2;
}
.round-fav-btn:hover { color: var(--accent-partner); }
.round-fav-btn:active { transform: scale(0.9); }
.round-fav-btn.is-on { color: var(--accent-partner); }
.round-card { position: relative; }
#btn-favorites.is-active { color: var(--accent-partner); }

.round-meta {
    padding: 0 14px 10px;
    background: color-mix(in srgb, var(--text) 6%, transparent);
    border-bottom: 1.5px solid var(--border-soft);
    font-size: 11px;
    font-style: italic;
    color: var(--text-muted);
    font-weight: 400;
}
.round-card > .round-question + .round-answers {
    /* Falls keine Meta-Zeile gerendert wird, den Trenner an die Frage haengen. */
    border-top: 1.5px solid var(--border-soft);
}
.round-card > .round-meta + .round-answers {
    border-top: 0;
}

.round-answers {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
/* Ab 3 Antworten untereinander statt nebeneinander. */
.round-answers:has(.round-answer:nth-child(n+3)) {
    grid-template-columns: 1fr;
}

.round-answer {
    padding: 10px 12px;
    font-size: 14px;
    white-space: pre-wrap;
    word-break: break-word;
    min-height: 48px;
    display: flex;
    flex-direction: column;
}
.round-answer-name {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.round-answer-name.is-me { color: var(--accent-me); }
.round-answer-body {
    white-space: pre-wrap;
    word-break: break-word;
    flex: 1 1 auto;
}

.round-answer + .round-answer {
    border-left: 1.5px solid var(--border-soft);
}

.round-answer.is-skipped {
    color: var(--text-muted);
    font-style: italic;
}
.round-answer.is-deferred {
    color: var(--text-muted);
    font-style: italic;
    opacity: 0.85;
}
/* Bei gestapeltem Layout (N>2) Trenner oben statt links. */
.round-answers:has(.round-answer:nth-child(n+3)) .round-answer + .round-answer {
    border-left: 0;
    border-top: 1.5px solid var(--border-soft);
}

.composer {
    /* Composer sitzt jetzt INNERHALB des #stream als letztes Element. Wenn der
       User in der Historie nach oben scrollt, scrollt der Composer ganz natürlich
       mit aus dem Sichtfeld — Slide-Away ohne JS. Beim Reinscrollen nach unten
       erscheint er wieder. */
    background: var(--surface);
    border-top: 1.5px solid var(--border-soft);
    padding: 12px 14px max(env(safe-area-inset-bottom, 0), 12px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: var(--shadow-pop);
    /* Stream hat 14px horizontalen Padding; wir ziehen den Composer mit
       negativem Margin auf volle Breite raus. Vertikal etwas Luft nach oben. */
    margin: 16px -14px 0;
}

.composer-status {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.3;
}
.composer-status .accent { color: var(--accent-partner); font-weight: 600; }
.composer-status .me-accent { color: var(--accent-me); font-weight: 600; }
.composer-status.is-warning { color: var(--accent-partner); font-weight: 500; }
.presence-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    background: #16a34a;
    border-radius: 999px;
    margin-right: 6px;
    box-shadow: 0 0 0 2px color-mix(in srgb, #16a34a 30%, transparent);
}
.player-chip.is-online { font-weight: 700; }

.typing-dots {
    display: inline-block;
    margin-left: 4px;
    letter-spacing: 1px;
    color: var(--accent-me);
    font-weight: 700;
}
.typing-dots span {
    display: inline-block;
    animation: typing-pulse 1.4s infinite ease-in-out both;
}
.typing-dots span:nth-child(1) { animation-delay: 0s; }
.typing-dots span:nth-child(2) { animation-delay: 0.18s; }
.typing-dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes typing-pulse {
    0%, 70%, 100% { opacity: 0.25; transform: translateY(0); }
    35% { opacity: 1; transform: translateY(-1px); }
}

.composer-status .countdown {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--text);
}

.composer-question-display {
    background: color-mix(in srgb, var(--accent-partner) 12%, transparent);
    border: 1.5px solid color-mix(in srgb, var(--accent-partner) 35%, transparent);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
}
.composer-question-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent-partner);
    font-weight: 600;
    margin-bottom: 4px;
}
.composer-question-text {
    font-size: 15px;
    font-weight: 500;
    white-space: pre-wrap;
    word-break: break-word;
}

.composer-input {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--border-soft);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font: inherit;
    resize: vertical;
    min-height: 44px;
    max-height: 180px;
}
.composer-input:focus {
    outline: none;
    border-color: var(--accent-me);
}

.composer-send { margin: 0; }
.composer-send:disabled { background: var(--border-soft); color: var(--text-muted); }

.composer-buttons {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: stretch;
}
.composer-buttons > .composer-send { flex: 1 1 auto; }
.composer-defer {
    flex: 0 0 auto;
    padding: 0 14px;
    border: 1px dashed var(--border-soft);
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    cursor: pointer;
}
.composer-defer:hover {
    color: var(--text);
    border-color: var(--accent-me);
}
.composer-defer:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Banner für eine noch offene Verschiebung (24-h-Fenster). */
.deferred-banner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    margin: 0 0 6px;
    border: 1px dashed var(--border-soft);
    border-radius: 8px;
    background: rgba(255, 196, 0, 0.10);
    color: var(--text);
    font-size: 0.92em;
    line-height: 1.35;
}
.deferred-banner-text {
    flex: 1 1 auto;
    min-width: 0;
}
.deferred-banner-btn {
    flex: 0 0 auto;
    color: var(--accent-me);
    font-weight: 600;
}

.deferred-modal-meta {
    margin: 0 0 4px;
    color: var(--text-muted);
    font-size: 0.92em;
}
.deferred-modal-question {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    white-space: pre-wrap;
    word-break: break-word;
}

#composer-form { display: flex; flex-direction: column; gap: 8px; }

.composer-attach {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: -4px;
}
.composer-attach-btn {
    align-self: flex-start;
    font-size: 13px;
    padding: 4px 8px;
}
/* Reihe fuer Attach + Naechster: Attach links, Naechster rechts. */
.composer-attach-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.composer-attach-row .composer-attach-btn { align-self: center; }
.composer-next-btn {
    margin-left: auto;
    font-size: 13px;
    padding: 4px 8px;
    color: var(--accent-me);
    font-weight: 600;
}
.composer-next-btn:hover { background: color-mix(in srgb, var(--accent-me) 10%, transparent); border-radius: 6px; }
.composer-next-btn[hidden] { display: none; }

/* Skip-Round-Marker im Stream — kompakte zentrierte Zeile. */
.round-card-skip {
    background: transparent;
    border: 0;
    box-shadow: none;
    margin: 6px 0;
    padding: 0;
}
.round-skip-line {
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.4;
    font-style: italic;
}
.round-skip-icon { font-style: normal; margin-right: 4px; }
.round-skip-ts { opacity: 0.6; }

/* Strafmodus-Banner zwischen Topbar und Stream — bleibt immer sichtbar. */
.penalty-banner {
    margin: 0;
    padding: 12px 14px;
    background: color-mix(in srgb, var(--error) 14%, var(--surface));
    border-bottom: 2px solid color-mix(in srgb, var(--error) 60%, var(--surface));
    color: var(--text);
    flex-shrink: 0;
}
.penalty-banner[hidden] { display: none; }
.penalty-banner-title {
    font-weight: 700;
    color: var(--error);
    margin-bottom: 4px;
}
.penalty-banner-text {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.penalty-banner-subtitle {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin: 6px 0 4px;
}
.penalty-banner-section { margin-bottom: 8px; }
.penalty-banner-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    padding: 6px 0;
    font-size: 13px;
    border-top: 1px dashed color-mix(in srgb, var(--error) 30%, transparent);
}
.penalty-banner-section .penalty-banner-row:first-of-type { border-top: 0; }
.penalty-banner-who {
    flex: 1 1 240px;
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.penalty-banner-give-btn.btn-primary {
    /* Override des globalen .btn-primary width: 100% */
    width: auto;
    flex: 0 0 auto;
    padding: 6px 14px;
    font-size: 13px;
    margin-top: 0;
}
.penalty-banner-waiting { font-size: 12px; color: var(--text-muted); font-style: italic; }

/* Stream-Filter im Strafmodus:
   - ungestraft (body.is-penalty-mode ohne .has-open-penalty): sehe Strafen
     UND meine eigenen offenen Aufgaben.
   - gestraft (body.is-penalty-mode.has-open-penalty): sehe NUR Strafen. */
body.is-penalty-mode .round-card {
    display: none;
}
/* Ungestraft: Strafrunden + eigene Open-Tasks zeigen.
   Gestraft: keine Stream-Karten zeigen — Self-Block im Banner reicht. */
body.is-penalty-mode:not(.has-open-penalty) .round-card[data-is-penalty="1"],
body.is-penalty-mode:not(.has-open-penalty) .round-card[data-my-open-task="1"] {
    display: block;
}
/* Skip-Marker-Karten + Lade-Buttons + Load-More verstecken wir im Strafmodus
   ebenfalls — der Stream soll ausschliesslich Aufgaben zeigen. */
body.is-penalty-mode .round-card-skip,
body.is-penalty-mode .load-more-wrap { display: none; }
/* Composer im Strafmodus komplett unsichtbar — neue Fragen sind blockiert. */
body.is-penalty-mode .composer { display: none; }

/* Strafrunden im Stream: dauerhaft rot getoent, 1 Antwortspalte volle Breite. */
.round-card.round-card-penalty {
    background: color-mix(in srgb, var(--error) 10%, var(--surface));
    border: 1.5px solid color-mix(in srgb, var(--error) 45%, var(--border-soft));
}
.round-card-penalty .round-question {
    color: color-mix(in srgb, var(--error) 85%, var(--text));
}
.round-card-penalty .round-answers {
    grid-template-columns: 1fr;
}
.round-card-penalty .round-answer {
    background: color-mix(in srgb, var(--error) 6%, transparent);
}

/* Strafaufgabe-Pill in der Open-Tasks-Card. */
.open-task-deadline-penalty {
    color: var(--error);
    background: color-mix(in srgb, var(--error) 14%, transparent);
    font-weight: 700;
}

/* Eigene Strafe — vollständiges Submit-UI im Banner. */
.penalty-self-block {
    margin-top: 14px;
    padding: 14px;
    background: var(--surface);
    border: 1.5px solid color-mix(in srgb, var(--error) 40%, var(--border-soft));
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.penalty-self-block[hidden] { display: none; }
.penalty-self-subtitle {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: var(--error);
}
.penalty-self-meta { font-size: 13px; color: var(--text-muted); }
.penalty-self-question {
    font-size: 15px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.penalty-self-attach { margin: 0; }
.penalty-self-submit {
    /* Globales .btn-primary width:100% behalten — das ist hier gewollt. */
    margin-top: 4px;
}

/* Wenn ich gestraft bin: Banner streckt sich bis ans Stream-Bottom, der
   versteckte Stream nimmt keinen Platz mehr ein. */
body.is-penalty-mode.has-open-penalty .penalty-banner {
    flex: 1 1 auto;
    overflow-y: auto;
    border-bottom: 0;
}
body.is-penalty-mode.has-open-penalty .stream { display: none; }

/* 7/14-Tage-Radios fuer Frist-Auswahl. */
.composer-deadline-days-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: -4px;
}
.composer-deadline-days-row[hidden] { display: none; }
.composer-deadline-days-label { font-size: 13px; color: var(--text-muted); }
.composer-deadline-days-radio { font-size: 13px; }

/* "Übersprungen"-Hinweis als kleine Zeile unter den Antworten. */
.round-skip-note {
    margin-top: 8px;
    padding: 4px 8px;
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
    border-top: 1px dashed var(--border-soft);
    padding-top: 8px;
}
.composer-attach-preview {
    position: relative;
    display: inline-block;
    max-width: 200px;
}
.composer-attach-preview img {
    width: 100%;
    height: auto;
    max-height: 140px;
    object-fit: contain;
    background: var(--bg);
    border: 1.5px solid var(--border-soft);
    border-radius: var(--radius-sm);
    display: block;
}
.composer-attach-remove {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: var(--text);
    color: var(--bg);
    border: 0;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    box-shadow: var(--shadow-soft);
}

/* Bilder in der Antwort-Body und Frage-Bar im Stream */
.round-image,
.dare-review-img,
.composer-my-answer-image,
#lightbox-img {
    image-orientation: from-image;
}
.round-image {
    width: auto;
    height: 64px;
    max-width: 100%;
    object-fit: cover;
    border-radius: var(--radius-sm);
    margin-top: 8px;
    cursor: zoom-in;
    background: color-mix(in srgb, var(--text) 4%, transparent);
    border: 1.5px solid var(--border-soft);
    /* Bild immer auf eigener Zeile — auch wenn die Antwort einen Text vor sich hat. */
    display: block;
}
.round-question-image {
    margin-top: 8px;
}
.composer-question-image,
.composer-my-answer-image {
    width: auto;
    height: 64px;
    max-width: 100%;
    object-fit: cover;
    border-radius: var(--radius-sm);
    margin-top: 6px;
    background: color-mix(in srgb, var(--text) 4%, transparent);
    border: 1.5px solid var(--border-soft);
    cursor: zoom-in;
    /* Bild immer auf eigener Zeile, auch wenn Text davor steht. */
    display: block;
}

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.92);
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    cursor: zoom-out;
}
.lightbox[hidden] { display: none; }
.lightbox img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.lightbox img[hidden] { display: none; }

/* Raum-Sperre: Game-View bleibt initial unsichtbar bis Modal verifiziert. */
body.is-room-locked .stream,
body.is-room-locked .composer,
body.is-room-locked .topbar { visibility: hidden; }

/* Schloss-Icon vor "Öffnen"-Button in der Lobby. */
.room-lock-icon { margin-right: 4px; }

/* Bildergalerie ---------------------------------------------------------- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
    padding: 8px 0;
}
.gallery-tile {
    position: relative;
    background: var(--bg);
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    display: block;
}
.gallery-tile-content {
    position: absolute;
    inset: 0;
    cursor: zoom-in;
    background: transparent;
    border: 0;
    padding: 0;
    display: block;
}
.gallery-tile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.gallery-tile-label {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 4px 6px;
    background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0));
    color: #fff;
    font-size: 11px;
    line-height: 1.25;
    text-align: left;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
/* Favoriten-Stern: oben rechts, dezent abgesetzt. Bei Favorit gefuellt und
   leicht groesser/leuchtender. */
.gallery-tile-fav {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 2;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 0;
    background: rgba(0,0,0,0.45);
    color: rgba(255,255,255,0.85);
    font-size: 18px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.gallery-tile-fav:hover {
    background: rgba(0,0,0,0.65);
    color: #fff;
    transform: scale(1.08);
}
.gallery-tile.is-fav .gallery-tile-fav {
    background: rgba(0,0,0,0.6);
    color: #ffd24a;
}
.gallery-tile.is-fav {
    box-shadow: 0 0 0 2px #ffd24a inset;
}

/* Comment-Reactions (an der Speechbubble) -------------------------------- */
.comment-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}
.comment-reaction {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--bg);
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    padding: 2px 6px 2px 4px;
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    line-height: 1;
    color: var(--text-muted);
}
.comment-reaction:hover { background: color-mix(in srgb, var(--accent-me) 8%, var(--bg)); }
.comment-reaction.is-mine {
    background: color-mix(in srgb, var(--accent-me) 16%, var(--bg));
    border-color: var(--accent-me);
    color: var(--text);
}
.comment-reaction img { width: 16px; height: 16px; object-fit: contain; display: block; }
.comment-reaction-count { font-weight: 600; }

/* Floating Emote-Picker fuer Comment-Reactions */
.comment-emote-picker {
    position: fixed;
    z-index: 90;
    background: var(--surface);
    border-radius: var(--radius);
    border: 1.5px solid var(--border-soft);
    padding: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-width: 260px;
}
.comment-emote-picker[hidden] { display: none; }
.comment-emote-picker-empty {
    color: var(--text-muted);
    padding: 6px 8px;
    font-size: 13px;
}
.comment-emote-pick-btn {
    background: transparent;
    border: 0;
    padding: 4px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
}
.comment-emote-pick-btn:hover { background: color-mix(in srgb, var(--accent-me) 12%, transparent); }
.comment-emote-pick-btn img { width: 28px; height: 28px; object-fit: contain; display: block; }
.round-comment-bubble[data-action="comment-bubble"] { cursor: pointer; }

/* Scroll-to-Bottom-Button — taucht auf, sobald der User mehr als 1000 px
   hochgescrollt ist. Floating Pill rechts unten, sanft animiert. */
.scroll-bottom-btn {
    position: fixed;
    right: max(env(safe-area-inset-right, 0px), 16px);
    bottom: max(env(safe-area-inset-bottom, 0px), 20px);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 0;
    background: var(--text);
    color: var(--bg);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    z-index: 40;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px) scale(0.9);
    transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1.2);
}
.scroll-bottom-btn[hidden] {
    /* HTML hidden überschreibt unsere Display-Defaults sonst nicht — wir
       wollen den Button immer im DOM behalten und nur fade-in/out. */
    display: flex;
}
.scroll-bottom-btn.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}
.scroll-bottom-btn:hover { transform: translateY(0) scale(1.06); }
.scroll-bottom-btn:active { transform: translateY(0) scale(0.94); }
.scroll-bottom-btn:focus-visible {
    outline: 3px solid var(--accent-me);
    outline-offset: 3px;
}
.scroll-bottom-arrow { transform: translateY(1px); }

/* Passwort-Gate fuer Bild-Sperre — sitzt anstelle des Bildes. */
.lightbox-pw-form {
    background: var(--surface);
    color: var(--text);
    border-radius: var(--radius);
    padding: 20px 22px;
    width: min(360px, 100%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: auto;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}
.lightbox-pw-form[hidden] { display: none; }
.lightbox-pw-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}
.lightbox-pw-hint {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.4;
    margin-bottom: 4px;
}
.lightbox-pw-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1.5px solid var(--border-soft);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: 14px;
}
.lightbox-pw-input:focus { outline: none; border-color: var(--accent-me); }
.lightbox-pw-error {
    color: var(--error);
    font-size: 13px;
}
.lightbox-pw-actions {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}
.lightbox-pw-actions .btn-primary { padding: 10px 16px; }

/* Switch in den Einstellungen — Toggle-Slider Look. */
.settings-switch {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    cursor: pointer;
    user-select: none;
}
.settings-switch input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.settings-switch-slider {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    background: var(--border-soft);
    border-radius: 999px;
    transition: background 0.2s ease;
    flex: 0 0 auto;
}
.settings-switch-slider::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: var(--surface);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
}
.settings-switch input:checked + .settings-switch-slider {
    background: var(--accent-me);
}
.settings-switch input:checked + .settings-switch-slider::after {
    transform: translateX(20px);
}
.settings-switch input:focus-visible + .settings-switch-slider {
    outline: 2px solid var(--accent-me);
    outline-offset: 2px;
}
.settings-switch-label {
    flex: 1 1 auto;
    font-size: 14px;
    color: var(--text);
}

/* Toggle-Button im Composer-Status — sieht aus wie ein btn-link. */
.composer-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.composer-status { flex: 1 1 auto; min-width: 0; }
.queue-toggle-btn {
    flex-shrink: 0;
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
}
.nudge-btn {
    flex-shrink: 0;
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
    color: var(--accent-me);
}
.nudge-btn:disabled,
.nudge-btn.is-cooldown {
    color: var(--text-muted);
    cursor: not-allowed;
}

/* Settings-Modal (Full-Page) */
.settings-modal {
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 60;
    display: flex;
    flex-direction: column;
}
.settings-modal[hidden] { display: none; }
.settings-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: max(env(safe-area-inset-top, 0), 12px) 14px 12px;
    border-bottom: 1.5px solid var(--border-soft);
    background: var(--surface);
    flex-shrink: 0;
}
.settings-modal-title { margin: 0; font-size: 18px; font-weight: 700; color: var(--text); }
.settings-modal-close { font-size: 28px; line-height: 1; padding: 4px 12px; }
.settings-modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px 14px max(env(safe-area-inset-bottom, 0), 14px);
}
.settings-section {
    background: var(--surface);
    border: 1.5px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 12px 14px;
    margin-bottom: 14px;
}
.settings-section-title {
    margin: 0 0 10px;
    font-size: 14px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.settings-theme-options {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.settings-radio {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 14px;
}
.settings-radio:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.settings-radio input[type="radio"] { width: 18px; height: 18px; accent-color: var(--accent-me); }
.settings-section .btn-primary { display: inline-block; width: auto; padding: 8px 16px; text-decoration: none; }
.settings-section .settings-logout {
    background: transparent;
    color: var(--error);
    border: 1.5px solid color-mix(in srgb, var(--error) 35%, transparent);
}
.settings-section .settings-logout:hover { background: color-mix(in srgb, var(--error) 10%, transparent); }
.form-success {
    color: var(--accent-me);
    font-size: 14px;
    margin-top: 8px;
}

/* Stats-Modal (Full-Page wie Queue-Modal) */
.stats-modal {
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 60;
    display: flex;
    flex-direction: column;
}
.stats-modal[hidden] { display: none; }
.stats-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: max(env(safe-area-inset-top, 0), 12px) 14px 12px;
    border-bottom: 1.5px solid var(--border-soft);
    background: var(--surface);
    flex-shrink: 0;
}
.stats-modal-title { margin: 0; font-size: 18px; font-weight: 700; color: var(--text); }
.stats-modal-close { font-size: 28px; line-height: 1; padding: 4px 12px; }
.stats-modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px 14px max(env(safe-area-inset-bottom, 0), 14px);
}
.stats-room-summary {
    background: var(--surface);
    border: 1.5px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 12px 14px;
    margin-bottom: 14px;
}
.stats-room-summary h3 { margin: 0 0 8px; font-size: 14px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.stats-room-summary dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; font-size: 14px; }
.stats-room-summary dt { color: var(--text-muted); }
.stats-room-summary dd { margin: 0; font-weight: 600; text-align: right; }
.stats-asked-label {
    margin-top: 14px;
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    margin-bottom: 6px;
}
.stats-asked-bar {
    display: flex;
    width: 100%;
    height: 34px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg);
    border: 1.5px solid var(--border-soft);
}
.stats-asked-segment {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    overflow: hidden;
    min-width: 0;
    padding: 0 4px;
}
.stats-asked-segment + .stats-asked-segment {
    border-left: 1.5px solid rgba(255,255,255,0.4);
}
.stats-asked-segment span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.stats-player-card {
    background: var(--surface);
    border: 1.5px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 12px 14px;
    margin-bottom: 12px;
}
.stats-player-name { font-size: 16px; font-weight: 700; margin: 0 0 8px; color: var(--accent-me); }
.stats-player-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; font-size: 14px; }
.stats-player-grid dt { color: var(--text-muted); }
.stats-player-grid dd { margin: 0; font-weight: 600; text-align: right; }
.stats-top-emoji {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.stats-top-emoji img { width: 22px; height: 22px; object-fit: contain; vertical-align: middle; }

/* Search-Bar oben über dem Stream */
.search-bar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--surface);
    border-bottom: 1.5px solid var(--border-soft);
}
.search-bar input[type="search"] {
    flex: 1 1 auto;
    padding: 8px 10px;
    border: 1.5px solid var(--border-soft);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: 14px;
}
.search-bar input[type="search"]:focus { outline: none; border-color: var(--accent-me); }
.search-bar .btn-link { font-size: 22px; line-height: 1; padding: 4px 8px; }

/* Räume-umbenennen Edit-Icon auf der Raumkarte */
.room-name-edit {
    background: transparent;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 4px;
    font-size: 13px;
    margin-left: 4px;
}
.room-name-edit:hover { color: var(--text); }

/* Full-Page Warteschlangen-Modal */
.queue-modal {
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 60;
    display: flex;
    flex-direction: column;
}
.queue-modal[hidden] { display: none; }
.queue-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: max(env(safe-area-inset-top, 0), 12px) 14px 12px;
    border-bottom: 1.5px solid var(--border-soft);
    background: var(--surface);
    flex-shrink: 0;
}
.queue-modal-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
}
.queue-modal-close {
    font-size: 28px;
    line-height: 1;
    padding: 4px 12px;
}
.queue-modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px 14px max(env(safe-area-inset-bottom, 0), 14px);
}
.queue-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.queue-add-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--bg);
    border: 1.5px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 12px;
    margin-bottom: 16px;
}
.queue-add-form .btn-primary { padding: 10px 16px; }
.queue-modal-section-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 8px;
    font-weight: 600;
}

/* Composer-Form in reinen Wartemodi (queue) ausblenden — Eingabe lebt im Modal. */
body[data-composer-mode="queue"] #composer-form { display: none; }
/* Nur in ask-Mode ist die "Verwenden"-Aktion sinnvoll. */
body:not([data-composer-mode="ask"]) .queue-item-actions .btn-use { display: none; }
.queue-item {
    background: var(--bg);
    border: 1.5px solid var(--border-soft);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.queue-item-text {
    font-size: 14px;
    line-height: 1.35;
    word-break: break-word;
    white-space: pre-wrap;
}
.queue-item-text .qa-q { font-weight: 600; }
.queue-item-text .qa-a { color: var(--text-muted); }
.queue-item-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.queue-item-actions button {
    font: inherit;
    border: 1.5px solid var(--border-soft);
    background: var(--surface);
    color: var(--text);
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
}
.queue-item-actions .btn-use {
    border-color: var(--text);
    background: var(--text);
    color: var(--bg);
}
.queue-item-actions .btn-delete { color: var(--error); border-color: color-mix(in srgb, var(--error) 35%, transparent); }
.queue-item-actions .btn-edit { color: var(--text); }
.queue-item-edit {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.queue-item-edit textarea {
    font: inherit;
    width: 100%;
    box-sizing: border-box;
    border: 1.5px solid var(--border-soft);
    border-radius: 8px;
    padding: 8px 10px;
    background: var(--surface);
    color: var(--text);
    resize: vertical;
    min-height: 38px;
}
.queue-item-edit textarea:focus-visible {
    outline: none;
    border-color: var(--text);
}

.composer-hint {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
}

/* --- Lobby --------------------------------------------------------------- */
.lobby {
    padding: 16px;
    max-width: 640px;
    margin: 0 auto;
}
.lobby-section { margin-bottom: 28px; }
.lobby-section h2 {
    font-size: 17px;
    margin: 0 0 12px;
    font-weight: 600;
}
.lobby-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.lobby-section-header h2 { margin: 0; }
.btn-inline { width: auto; margin: 0; padding: 8px 14px; font-size: 14px; }

.rooms-list { display: flex; flex-direction: column; gap: 10px; }
.room-card {
    background: var(--surface);
    border: 1.5px solid var(--border-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    padding: 14px;
}
.room-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.room-card-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    word-break: break-word;
}
.badge {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 3px 8px;
    border-radius: 999px;
    font-weight: 600;
    flex-shrink: 0;
}
.badge-open { background: color-mix(in srgb, var(--accent-partner) 18%, transparent); color: var(--accent-partner); }
.badge-started { background: color-mix(in srgb, var(--accent-me) 18%, transparent); color: var(--accent-me); }
.badge-paused { background: color-mix(in srgb, var(--error) 18%, transparent); color: var(--error); font-weight: 700; }

.room-my-status {
    font-size: 13px;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 999px;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--text) 8%, transparent);
    text-align: right;
    white-space: normal;
    line-height: 1.3;
}
.room-my-status-answer {
    background: color-mix(in srgb, var(--accent-me) 22%, transparent);
    color: var(--accent-me);
    font-weight: 700;
}
.room-my-status-ask {
    background: color-mix(in srgb, var(--accent-partner) 22%, transparent);
    color: var(--accent-partner);
    font-weight: 700;
}
.room-my-status-penalty {
    background: color-mix(in srgb, var(--error) 22%, transparent);
    color: var(--error);
    font-weight: 700;
}
.room-card-answer { border-color: color-mix(in srgb, var(--accent-me) 45%, var(--border-soft)); }
.room-card-ask { border-color: color-mix(in srgb, var(--accent-partner) 45%, var(--border-soft)); }

.room-players {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.player-chip {
    display: inline-flex;
    align-items: center;
    background: color-mix(in srgb, var(--text) 7%, transparent);
    color: var(--text);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 13px;
    line-height: 1.4;
}
.player-chip.is-me {
    background: color-mix(in srgb, var(--accent-me) 15%, transparent);
    color: var(--accent-me);
    font-weight: 600;
}
.room-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
}
.room-actions .btn-primary { width: auto; padding: 8px 14px; font-size: 14px; margin: 0; flex-shrink: 0; }
.room-actions .hint { font-size: 13px; }
.room-actions .room-my-status { margin-left: auto; }

.topbar-back {
    font-size: 18px;
    padding: 4px 10px;
}
.room-name { font-weight: 600; font-size: 15px; }

/* --- Modal --------------------------------------------------------------- */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 50;
}
.modal[hidden] { display: none; }
.modal-card {
    background: var(--surface);
    color: var(--text);
    border-radius: var(--radius);
    padding: 20px;
    width: 100%;
    max-width: 380px;
    box-shadow: var(--shadow-pop);
}
.modal-card h3 { margin: 0 0 14px; }
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}
.modal-actions .btn-primary { width: auto; padding: 10px 16px; margin: 0; }
.modal-card-wide {
    max-width: 560px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.modal-header h3 { margin: 0; }
.modal-header .btn-link { font-size: 24px; padding: 0 4px; line-height: 1; }

/* --- Patch Notes ----------------------------------------------------------- */
.topbar-badge {
    display: inline-block;
    min-width: 18px;
    padding: 0 5px;
    margin-left: 4px;
    background: var(--accent-partner);
    color: var(--bg);
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
    text-align: center;
    line-height: 18px;
    vertical-align: middle;
}
.topbar-badge[hidden] { display: none; }
#btn-patches { font-weight: 600; }

/* --- In-App-Toast (eingehende Pushes wenn Tab fokussiert) ----------------- */
.toast-layer {
    position: fixed;
    top: max(env(safe-area-inset-top, 0), 12px);
    right: 12px;
    left: 12px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    pointer-events: none;
}
.toast {
    position: relative;
    display: block;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border-soft);
    border-left: 4px solid var(--accent-me);
    border-radius: 12px;
    padding: 12px 36px 12px 14px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    max-width: 380px;
    min-width: 240px;
    width: 100%;
    pointer-events: auto;
    text-decoration: none;
    cursor: pointer;
    transform: translateY(-12px);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
}
@media (min-width: 480px) {
    .toast { width: auto; }
}
a.toast:hover {
    border-left-color: var(--accent-partner);
    background: color-mix(in srgb, var(--accent-me) 4%, var(--surface));
}
.toast.is-visible { transform: translateY(0); opacity: 1; }
.toast.is-leaving { transform: translateY(-12px); opacity: 0; }
.toast-title {
    font-weight: 700;
    font-size: 14px;
    line-height: 1.3;
    color: var(--text);
    margin-bottom: 2px;
}
.toast-body {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.4;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.toast-close {
    position: absolute;
    top: 4px;
    right: 6px;
    background: none;
    border: 0;
    color: var(--text-muted);
    font-size: 20px;
    line-height: 1;
    padding: 4px 8px;
    cursor: pointer;
    border-radius: 6px;
}
.toast-close:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }

/* Glocke + Patches sitzen rechts in einem gemeinsamen Container, nur per
   Margin getrennt — kein Flex-Layout. */
.topbar-right { white-space: nowrap; }
.topbar-right > .btn-link { display: inline-block; vertical-align: middle; }
.topbar-right > .btn-notifications { margin-right: 10px; }
.topbar-right > .btn-secret-ping { margin-right: 10px; font-size: 18px; line-height: 1; text-decoration: none; }
.btn-secret-ping:disabled { opacity: 0.5; cursor: not-allowed; }

/* Geheim-Seite (?secret) — schlicht und unauffällig. */
.secret-main {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.secret-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.secret-trigger {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.secret-trigger:disabled { opacity: 0.5; cursor: not-allowed; }
.secret-trigger .duck-icon {
    width: 78%;
    height: auto;
    display: block;
    /* Sanfter Schatten unter der Ente, damit sie aus dem Navy-Kreis "schwebt". */
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
}
.secret-status {
    font-size: 22px;
    color: var(--text-muted);
    min-height: 28px;
}
.btn-notifications {
    font-size: 18px;
    line-height: 1;
    position: relative;
}
/* Badge-Positionierung wird zentral weiter oben gehandhabt. */

/* --- Notifications-Modal (Full-Screen) ----------------------------------- */
.notifications-modal {
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 60;
    display: flex;
    flex-direction: column;
}
.notifications-modal[hidden] { display: none; }
.notifications-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: max(env(safe-area-inset-top, 0), 12px) 14px 12px;
    border-bottom: 1.5px solid var(--border-soft);
    background: var(--surface);
    flex-shrink: 0;
}
.notifications-modal-title { margin: 0; font-size: 18px; font-weight: 700; color: var(--text); }
.notifications-modal-close { font-size: 28px; line-height: 1; padding: 4px 12px; }
.notifications-modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px 14px max(env(safe-area-inset-bottom, 0), 14px);
}
.notifications-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.notification-item {
    display: block;
    text-decoration: none;
    background: var(--surface);
    border: 1.5px solid var(--border-soft);
    border-left: 4px solid var(--border-soft);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    color: inherit;
    transition: border-color 0.15s ease, background 0.15s ease;
}
a.notification-item:hover {
    border-color: color-mix(in srgb, var(--accent-me) 40%, var(--border-soft));
    background: color-mix(in srgb, var(--accent-me) 4%, var(--surface));
}
.notification-item.is-unread {
    border-left-color: var(--accent-me);
    background: color-mix(in srgb, var(--accent-me) 6%, var(--surface));
}
.notification-item-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.notification-item-title {
    font-weight: 700;
    color: var(--text);
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.notification-item.is-unread .notification-item-title { color: var(--accent-me); }
.notification-item-time {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.notification-item-body {
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-muted);
    margin-top: 2px;
    white-space: pre-wrap;
    word-break: break-word;
}
.notifications-empty {
    text-align: center;
    padding: 64px 24px;
    color: var(--text-muted);
}
.notifications-empty-emoji {
    font-size: 48px;
    line-height: 1;
    margin-bottom: 12px;
}
.notifications-empty-text {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
}
.notifications-empty-hint {
    font-size: 13px;
    line-height: 1.5;
    max-width: 360px;
    margin: 0 auto;
}
.patches-list,
.open-tasks-list {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-right: 4px;
}

/* Pflicht-Opt-out-Toggle im Composer (nur sichtbar wenn next_is_dare). */
.composer-skip-dare {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    padding: 6px 8px;
    border: 1px dashed var(--border-soft);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--accent-me) 6%, transparent);
}
.composer-skip-dare input[type="checkbox"] { accent-color: var(--accent-me); }
.composer-skip-dare-hint {
    flex-basis: 100%;
    font-size: 11px;
    color: var(--text-muted);
}

/* Beweispflicht-Toggle im Composer (nur sichtbar wenn der Asker eine Pflicht stellt). */
.composer-requires-proof {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    padding: 6px 8px;
    border: 1px dashed var(--border-soft);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--accent-partner) 6%, transparent);
}
.composer-requires-proof input[type="checkbox"] { accent-color: var(--accent-me); }
.composer-requires-proof-hint {
    flex-basis: 100%;
    font-size: 11px;
    color: var(--text-muted);
}

/* --- Offene Aufgaben Modal (Full-Screen, analog Queue/Comments) ----------- */
.open-tasks-modal {
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 60;
    display: flex;
    flex-direction: column;
}
.open-tasks-modal[hidden] { display: none; }
.open-tasks-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: max(env(safe-area-inset-top, 0), 12px) 14px 12px;
    border-bottom: 1.5px solid var(--border-soft);
    background: var(--surface);
    flex-shrink: 0;
}
.open-tasks-modal-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
}
.open-tasks-modal-close {
    font-size: 28px;
    line-height: 1;
    padding: 4px 12px;
}
.open-tasks-modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px 14px max(env(safe-area-inset-bottom, 0), 14px);
}
.open-tasks-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Einzelne Aufgaben-Karte */
/* Aufgaben-Karte: Single-Row-Header, Frage groß, Anerkennung + Status-Pill,
   "Erledigen"-Button breit unten. */
.open-task {
    background: var(--surface);
    border: 1.5px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.open-task.is-overdue {
    border-color: color-mix(in srgb, var(--error) 35%, var(--border-soft));
    background: color-mix(in srgb, var(--error) 3%, var(--surface));
}
.open-task.is-mine-done {
    background: color-mix(in srgb, var(--accent-me) 3%, var(--surface));
}
.open-task-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.open-task-head-left {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
}
.open-task-avatar {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--avatar-bg, var(--accent-partner));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    user-select: none;
}
.open-task-asker-meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.open-task-asker-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.open-task-room {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.open-task-deadline {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
    color: #cf7900;
    background: color-mix(in srgb, #f0a020 18%, transparent);
    white-space: nowrap;
}
.open-task-deadline.is-overdue {
    color: var(--error);
    background: color-mix(in srgb, var(--error) 14%, transparent);
}
.open-task-deadline.is-done {
    color: var(--accent-me);
    background: color-mix(in srgb, var(--accent-me) 14%, transparent);
}

/* Mitspieler-Sektion innerhalb einer Aufgaben-Karte */
.open-task-coplayers {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg);
    border: 1px dashed var(--border-soft);
    border-radius: var(--radius-sm);
}
.open-task-coplayer {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.open-task-co-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}
.open-task-co-avatar { width: 28px; height: 28px; font-size: 12px; }
.open-task-co-name {
    flex: 1 1 auto;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}
.open-task-co-status {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.open-task-co-status.is-pending { color: var(--accent-partner); background: color-mix(in srgb, var(--accent-partner) 12%, transparent); }
.open-task-co-status.is-done    { color: var(--accent-me);      background: color-mix(in srgb, var(--accent-me) 12%, transparent); }
.open-task-co-ack,
.open-task-co-proof {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
}
.open-task-co-ack-label,
.open-task-co-proof-label {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 10px;
    margin-right: 4px;
}
.open-task-question {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text);
    margin: 2px 0;
}
.open-task-image {
    margin-top: 0;
    height: 96px;
}

/* Anerkennungs-Zeile: kompakt mit Status-Pill rechts. */
.open-task-ackrow {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--bg);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
}
.open-task-ack {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text);
    word-break: break-word;
    /* KEIN pre-wrap hier — sonst werden die Zeilenumbrüche aus dem
       Template-Literal sichtbar und Label + Text rutschen auseinander.
       Inhalt mit User-Newlines kommt schon ueber nlToBr() als <br> rein. */
}
.open-task-ack-empty { color: var(--text-muted); font-style: italic; }
.open-task-ack-label {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 11px;
    color: var(--text-muted);
    margin-right: 6px;
}
.open-task-ack-img-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    box-sizing: border-box;
    padding: 0 0 4px;
    background: var(--surface);
    border: 1.5px solid var(--border-soft);
    border-radius: 999px;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    margin-left: 6px;
    vertical-align: middle;
}
.open-task-ack-img-btn:hover { color: var(--text); }
.open-task-mine-status {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}
.open-task-mine-status.is-pending {
    color: #cf7900;
    background: color-mix(in srgb, #f0a020 14%, transparent);
}
.open-task-mine-status.is-done {
    color: var(--accent-me);
    background: color-mix(in srgb, var(--accent-me) 14%, transparent);
}
.open-task-mine-status.is-waiting {
    color: var(--text-muted);
    background: color-mix(in srgb, var(--text) 8%, transparent);
}
/* Mitspieler-Zeilen optisch dezenter als die eigene, damit der Blick
   sofort auf die eigene Anerkennung faellt. */
.open-task-corow {
    opacity: 0.85;
    font-size: 13px;
    margin-top: 4px;
}
.open-task-corow .open-task-ack-label { font-weight: 500; }

/* Aktionen-Reihe: Zur-Aufgabe-Link links (auto-Breite), Erledigen breit rechts. */
.open-task-actions {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 12px;
    margin-top: 2px;
}
.open-task-jumplink {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    background: none;
    border: 0;
    color: var(--text-muted);
    font: inherit;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
    padding: 0 4px;
    white-space: nowrap;
}
.open-task-jumplink:hover { color: var(--accent-me); }
.open-task-mainaction {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--text);
    color: var(--bg);
    border: 0;
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    padding: 12px 16px;
    cursor: pointer;
    line-height: 1;
    text-align: center;
}
.open-task-mainaction.is-waiting {
    background: var(--bg);
    color: var(--text-muted);
    border: 1.5px dashed var(--border-soft);
    font-style: italic;
    cursor: default;
}
.open-task-mainaction:not(.is-waiting):hover {
    background: color-mix(in srgb, var(--text) 88%, var(--accent-me));
}

/* Empty-State */
.open-tasks-empty {
    text-align: center;
    padding: 64px 24px;
    color: var(--text-muted);
}
.open-tasks-empty-emoji {
    font-size: 48px;
    line-height: 1;
    margin-bottom: 12px;
}
.open-tasks-empty-text {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
}
.open-tasks-empty-hint {
    font-size: 13px;
    line-height: 1.5;
    max-width: 360px;
    margin: 0 auto;
}

.task-overdue { color: var(--error); font-weight: 700; }

/* --- Aufgabe erledigen Modal (Full-Screen, sticky Footer) ---------------- */
.complete-task-form {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.complete-task-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.complete-task-question-card {
    background: var(--surface);
    border-left: 4px solid var(--accent-partner);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.complete-task-question-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.complete-task-question {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
}
.complete-task-attach {
    border: 1.5px dashed var(--border-soft);
    border-radius: var(--radius-sm);
    padding: 12px;
    background: var(--bg);
}
.complete-task-footer {
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    gap: 12px;
    justify-content: flex-end;
    align-items: center;
    border-top: 1.5px solid var(--border-soft);
    background: var(--surface);
    padding: 12px 14px max(env(safe-area-inset-bottom, 0), 12px);
}
.complete-task-footer .btn-primary { padding: 10px 18px; }

/* Task-Status-Chip im Antwort-Footer (Pflicht-ohne-Beweispflicht). */
.round-task-status {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 999px;
    line-height: 1.4;
    white-space: nowrap;
}
/* Im seltenen Fall einer Body-Variante: kleiner Abstand nach oben. */
.round-answer-body > .round-task-status { margin-top: 6px; display: inline-block; }
/* Chip sitzt als eigene Zeile zwischen Body und Footer (statt im Footer), damit
   schmale Zellen ihn nicht über den Kommentieren-Link / Reaktions-Plus draufschieben. */
.round-answer > .round-task-status {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 8px 0 0;
    white-space: normal;
}
.round-task-status.is-open { color: var(--accent-partner); background: color-mix(in srgb, var(--accent-partner) 12%, transparent); }
.round-task-status.is-overdue { color: var(--error); background: color-mix(in srgb, var(--error) 12%, transparent); }
.round-task-status.is-done { color: var(--accent-me); background: color-mix(in srgb, var(--accent-me) 12%, transparent); }

/* Sprung-Highlight: kurzer Outline-Pulse, sobald via "Zur Aufgabe" oder #round-X
   angesprungen. Outline beeinflusst Layout nicht. */
.round-card.is-jumped {
    animation: roundJumpFlash 1.6s ease-out;
    scroll-margin: 80px;
}
@keyframes roundJumpFlash {
    0%   { outline: 3px solid var(--accent-me); outline-offset: 4px; }
    100% { outline: 3px solid transparent;     outline-offset: 4px; }
}

/* --- Antwort-Footer: Reaktionen links, Kommentar-Link rechts -------------- */
.round-answer-footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    /* Aus dem Cell-Padding herausragen, damit es den Hintergrund bis zum Rand spannt — analog reaction-bar. */
    margin: 8px -12px -10px;
    padding: 6px 12px 8px;
    border-top: 1px dashed var(--border-soft);
    background: color-mix(in srgb, var(--text) 2%, transparent);
    height: 45px;
    box-sizing: border-box;
}
.round-answer-footer-spacer { flex: 1 1 auto; }
/* Innerhalb des Footers nehmen die Reaktionen den linken Bereich ohne eigenen Hintergrund. */
.round-answer-footer .round-reactions {
    background: transparent;
    border-top: 0;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
    min-height: 0;
}
.comments-link {
    flex: 0 0 auto;
    background: none;
    border: 0;
    color: var(--text-muted);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    padding: 0;
}
.comments-link.has-comments { color: var(--accent-partner); font-weight: 600; }
.comments-link:hover { color: var(--accent-me); }

/* --- Kommentare-Modal (Full-Screen, analog Queue/Stats/Settings) ---------- */
.comments-modal {
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 60;
    display: flex;
    flex-direction: column;
}
.comments-modal[hidden] { display: none; }
.comments-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: max(env(safe-area-inset-top, 0), 12px) 14px 12px;
    border-bottom: 1.5px solid var(--border-soft);
    background: var(--surface);
    flex-shrink: 0;
}
.comments-modal-title { margin: 0; font-size: 18px; font-weight: 700; color: var(--text); }
.comments-modal-close { font-size: 28px; line-height: 1; padding: 4px 12px; }
.comments-modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px 14px 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Frage-Karte oben — wie ein Zitat-Block */
.comments-modal-question-card {
    background: var(--surface);
    border-left: 4px solid var(--accent-partner);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.comments-modal-question {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
}
.comments-modal-asker {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-top: 6px;
}

/* Antwort-Karte — eine Bubble mit Avatar */
.comments-modal-answer-card {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: flex-start;
    background: color-mix(in srgb, var(--accent-partner) 8%, var(--surface));
    border-radius: 12px;
    padding: 10px 12px;
}
.comments-modal-answer-card.is-me {
    background: color-mix(in srgb, var(--accent-me) 8%, var(--surface));
}
.comments-modal-answer-content { flex: 1 1 auto; min-width: 0; }
.comments-modal-answer-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-partner);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}
.comments-modal-answer-name.is-me { color: var(--accent-me); }
.comments-modal-answer-body {
    font-size: 14px;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text);
}
.comments-modal-answer-body.is-skipped { color: var(--text-muted); font-style: italic; }

/* Avatar-Kreis (Initiale) */
.comments-modal-avatar,
.round-comment-avatar {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--avatar-bg, var(--accent-partner));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    user-select: none;
}

/* Kommentar-Liste — Chat-Bubble-Look */
.comments-modal-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 4px;
    margin-top: 4px;
    border-top: 1px dashed var(--border-soft);
}
.comments-modal-empty {
    padding: 32px 12px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}
.round-comment {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    max-width: 100%;
    position: relative;
}
.round-comment.is-mine {
    flex-direction: row-reverse;
    align-self: flex-end;
}
.round-comment-bubble {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    border-top-left-radius: 4px;
    padding: 8px 12px;
    max-width: min(100%, 540px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.round-comment.is-mine .round-comment-bubble {
    background: color-mix(in srgb, var(--accent-me) 12%, var(--surface));
    border-color: color-mix(in srgb, var(--accent-me) 35%, var(--border-soft));
    border-radius: 14px;
    border-top-right-radius: 4px;
}
.round-comment-author {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-partner);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}
.round-comment.is-mine .round-comment-author { color: var(--accent-me); }
.round-comment-text {
    font-size: 14px;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text);
}
.comment-delete {
    align-self: flex-start;
    margin-top: 4px;
    background: none;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 6px;
    font-size: 14px;
    line-height: 1;
    border-radius: 4px;
}
.comment-delete:hover { color: var(--error); background: color-mix(in srgb, var(--error) 8%, transparent); }

/* Sticky-Eingabe unten */
.comments-modal-form {
    flex-shrink: 0;
    border-top: 1.5px solid var(--border-soft);
    background: var(--surface);
    padding: 10px 14px max(env(safe-area-inset-bottom, 0), 12px);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.comments-modal-form .form-error { margin: 0; }
.comments-modal-form-row {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 8px;
}
.comments-modal-input {
    flex: 1 1 auto;
    min-width: 0;
    resize: none;
    background: var(--bg);
    border: 1.5px solid var(--border-soft);
    border-radius: 22px;
    padding: 10px 16px;
    font: inherit;
    font-size: 14px;
    color: var(--text);
    line-height: 1.4;
    max-height: 160px;
    min-height: 44px;
}
.comments-modal-input:focus {
    outline: none;
    border-color: var(--accent-me);
}
.comments-modal-send {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 0;
    background: var(--accent-me);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: transform 0.1s ease, opacity 0.15s ease;
}
.comments-modal-send:hover { transform: scale(1.05); }
.comments-modal-send:active { transform: scale(0.95); }
.comments-modal-send:disabled { opacity: 0.4; cursor: not-allowed; }
.comments-modal-send-arrow { transform: translateX(1px); }

/* Bild-Anhang im Comments-Modal — kleiner Pill links neben Textarea. */
.comments-modal-attach {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid var(--border-soft);
    background: var(--bg);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
}
.comments-modal-attach:hover { color: var(--text); }
.comments-attach { margin: 0 0 6px; }
.comments-attach .composer-attach-preview {
    margin: 0;
    max-width: 200px;
}

/* Bild innerhalb einer Kommentar-Bubble. */
.round-comment-image {
    margin-top: 6px;
    max-width: 100%;
    max-height: 220px;
    border-radius: 8px;
    border: 1.5px solid var(--border-soft);
    cursor: zoom-in;
    display: block;
}
/* Bild-Button im Comments-Modal sitzt in eigener Block-Zeile unter dem Text. */
.comments-modal-image-row {
    margin-top: 8px;
    display: block;
}
.comments-modal-image-row .round-answer-image-btn {
    display: inline-flex;
}

.patch-entry {
    background: var(--bg);
    border: 1.5px solid var(--border-soft);
    border-left-width: 4px;
    border-radius: var(--radius-sm);
    padding: 10px 12px;
}
.patch-feature { border-left-color: var(--accent-me); }
.patch-fix     { border-left-color: var(--error); }
.patch-change  { border-left-color: var(--accent-partner); }
.patch-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
.patch-kind { font-weight: 700; }
.patch-feature .patch-kind { color: var(--accent-me); }
.patch-fix     .patch-kind { color: var(--error); }
.patch-change  .patch-kind { color: var(--accent-partner); }
.patch-date { font-variant-numeric: tabular-nums; }
.patch-title {
    margin: 4px 0 6px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
}
.patch-desc {
    font-size: 13px;
    color: var(--text);
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
}

/* --- Eigene Antwort beim Warten (im composer-question-display) ------------- */
.composer-my-answer {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed color-mix(in srgb, var(--accent-partner) 35%, transparent);
}
.composer-my-answer-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}
.composer-my-answer-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent-me);
    font-weight: 700;
}
.composer-my-answer-edit-btn {
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
}
.composer-my-answer-edit-btn:hover {
    color: var(--accent-me);
}
.composer-my-answer-edit {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.composer-my-answer-edit-buttons {
    display: flex;
    flex-direction: row;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
}
.composer-my-answer-text {
    font-size: 14px;
    font-weight: 500;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text);
}

/* --- Reaktionen ------------------------------------------------------------ */
.round-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px 10px;
    background: color-mix(in srgb, var(--text) 3%, transparent);
    border-top: 1px dashed var(--border-soft);
    /* In Flex-Column-Cell ans untere Ende kleben und über die Cell-Padding hinausragen,
       damit der Footer-Hintergrund bis zu den Cell-Rändern reicht. */
    margin: 12px -12px -10px;
    /* Mindesthöhe wie ein Reaktions-Button (30) + Padding (18) = 48, damit die
       Zeile auch bei leerem Bar (eigene Antwort ohne Reaktionen) konsistent
       hoch bleibt. */
    min-height: 48px;
    box-sizing: border-box;
    align-items: center;
}
.round-reaction-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    padding: 3px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    line-height: 0;
    cursor: pointer;
    transition: transform 80ms ease, background-color 80ms ease;
}
.round-reaction-btn:hover {
    background: color-mix(in srgb, var(--text) 8%, transparent);
}
.round-reaction-btn:active { transform: scale(0.9); }
.round-reaction-btn.is-mine {
    background: color-mix(in srgb, var(--accent-me) 14%, transparent);
}
.round-reaction-btn.is-readonly {
    cursor: default;
}
.round-reaction-btn.is-readonly:hover { background: transparent; }
.round-reaction-btn img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: block;
}
.round-reaction-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    padding: 0 0 2px;
    background: var(--surface);
    border: 1.5px dashed var(--border-soft);
    border-radius: 999px;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
}
.round-reaction-add:hover { color: var(--text); }

/* Bild-Button im round-answer-footer — gleiche Geometrie wie .round-reaction-add,
   aber durchgezogener (statt gestrichelter) Border, damit man "Bild ansehen"
   und "Reaktion hinzufügen" auf einen Blick auseinanderhält. */
.round-answer-image-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    padding: 0 0 8px;
    background: var(--surface);
    border: 1.5px solid var(--border-soft);
    border-radius: 999px;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
}
.round-answer-image-btn:hover { color: var(--text); }
.round-answer-image-btn:focus-visible {
    outline: 2px solid var(--accent-me);
    outline-offset: 2px;
}

/* --- Emoji Picker (Bottom Sheet) ------------------------------------------- */
.emoji-picker {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 60;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.emoji-picker[hidden] { display: none; }
.emoji-picker-card {
    width: 100%;
    max-width: 640px;
    background: var(--surface);
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
    padding: 14px 14px max(env(safe-area-inset-bottom, 0), 14px);
    box-shadow: var(--shadow-pop);
}
.emoji-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.emoji-picker-header .btn-link { font-size: 24px; padding: 0 4px; line-height: 1; }
.emoji-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 10px;
    max-height: 50vh;
    overflow-y: auto;
}
.emoji-picker-item {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    border: 1.5px solid var(--border-soft);
    border-radius: var(--radius-sm);
    padding: 8px;
    cursor: pointer;
    min-height: 64px;
}
.emoji-picker-item:hover { border-color: var(--accent-me); }
.emoji-picker-item.is-mine {
    border-color: var(--accent-me);
    background: color-mix(in srgb, var(--accent-me) 12%, transparent);
}
.emoji-picker-item img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    display: block;
}

/* --- Admin Center ---------------------------------------------------------- */
.admin-main { padding: 16px; }

/* Impersonate-Bar oben über allen Views. */
.impersonate-bar {
    position: sticky;
    top: 0;
    z-index: 95;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #5a3b00;
    color: #ffd24a;
    font-size: 13px;
    border-bottom: 2px solid #ffd24a;
}
.impersonate-bar-stop {
    color: #ffd24a;
    font-weight: 600;
}
.impersonate-bar-stop:hover { color: #fff; }

/* Impersonate-Liste im Admin-Center. */
.impersonate-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.impersonate-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1.5px solid var(--border-soft);
    border-radius: var(--radius-sm);
}
.impersonate-name { flex: 1 1 auto; min-width: 0; }
.impersonate-username { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.impersonate-action { flex: 0 0 auto; }
.impersonate-go-btn.btn-primary {
    /* Globales width:100% überschreiben. */
    width: auto;
    padding: 8px 14px;
    font-size: 13px;
    margin-top: 0;
}
.impersonate-mark {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
}
.impersonate-admin-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    background: color-mix(in srgb, var(--accent-me) 18%, transparent);
    color: var(--accent-me);
    font-size: 10px;
    letter-spacing: 0.05em;
    font-weight: 700;
    border-radius: 999px;
    vertical-align: middle;
}
#form-emoji-upload {
    background: var(--surface);
    border: 1.5px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 14px;
    margin-bottom: 16px;
}
#form-emoji-upload .btn-primary { width: auto; padding: 10px 18px; }
.emoji-admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
}
.emoji-admin-card {
    background: var(--surface);
    border: 1.5px solid var(--border-soft);
    border-radius: var(--radius-sm);
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.emoji-admin-card img {
    width: 96px;
    height: 96px;
    object-fit: contain;
    background: var(--bg);
    border-radius: var(--radius-sm);
    padding: 4px;
}
.emoji-admin-slug {
    font-size: 11px;
    color: var(--text-muted);
    word-break: break-all;
    text-align: center;
}
.emoji-admin-card .btn-leave { width: 100%; font-size: 12px; padding: 4px 8px; }

/* --- Raum verlassen -------------------------------------------------------- */
.btn-leave {
    color: var(--error);
    border: 1.5px solid color-mix(in srgb, var(--error) 30%, transparent);
    border-radius: 8px;
    padding: 6px 10px;
    background: transparent;
    margin-left: 4px;
    font-size: 13px;
}
.btn-leave:hover { background: color-mix(in srgb, var(--error) 10%, transparent); }

/* ---------------- Pflicht / Truth-or-Dare --------------------------------- */

/* Pflicht-Modus: Composer kriegt eine deutliche Warnung-Akzentlinie. */
body.is-dare .composer { box-shadow: inset 0 3px 0 0 var(--accent-partner), var(--shadow-pop); }
body.is-dare-rejected .composer { box-shadow: inset 0 3px 0 0 var(--error), var(--shadow-pop); }

/* Status-Text-Hervorhebung im Pflicht-Modus etwas kraeftiger. */
body.is-dare .composer-status.is-warning { color: var(--accent-partner); font-weight: 600; }
body.is-dare-rejected .composer-status.is-warning { color: var(--error); font-weight: 600; }

/* Asker-Review-Panel ueber dem Composer. */
.dare-review {
    background: color-mix(in srgb, var(--accent-partner) 8%, var(--surface));
    border-top: 1.5px solid var(--accent-partner);
    border-bottom: 1.5px solid color-mix(in srgb, var(--accent-partner) 25%, transparent);
    padding: 12px 14px 14px;
    max-height: 70vh;
    overflow-y: auto;
}
.dare-review[hidden] { display: none; }
.dare-review-title {
    font-weight: 700;
    font-size: 15px;
    color: var(--accent-partner);
    margin-bottom: 8px;
}
.dare-review-hint { margin-top: 8px; font-size: 12px; }
.dare-review-list { display: flex; flex-direction: column; gap: 10px; }

.dare-review-item {
    background: var(--surface);
    border: 1.5px solid var(--border-soft);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.dare-review-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.dare-review-name { font-weight: 600; font-size: 14px; }
.dare-review-state {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 3px 8px;
    border-radius: 999px;
    font-weight: 700;
}
.dare-review-state.is-pending {
    background: color-mix(in srgb, var(--accent-partner) 20%, transparent);
    color: var(--accent-partner);
}
.dare-review-state.is-accepted {
    background: color-mix(in srgb, var(--accent-me) 20%, transparent);
    color: var(--accent-me);
}
.dare-review-state.is-rejected {
    background: color-mix(in srgb, var(--error) 18%, transparent);
    color: var(--error);
}
.dare-review-img {
    width: auto;
    height: 64px;
    max-width: 100%;
    object-fit: cover;
    display: inline-block;
    vertical-align: middle;
    border-radius: 8px;
    border: 1.5px solid var(--border-soft);
    cursor: zoom-in;
    background: var(--bg);
}
.dare-review-noimage {
    padding: 12px;
    text-align: center;
    background: color-mix(in srgb, var(--error) 8%, transparent);
    border-radius: 8px;
}
.dare-review-text {
    font-size: 14px;
    line-height: 1.35;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text);
}
.dare-review-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.dare-review-actions .dare-accept-btn { padding: 8px 14px; font-size: 14px; }
.dare-review-actions .dare-reject-btn {
    color: var(--error);
    border: 1.5px solid color-mix(in srgb, var(--error) 40%, transparent);
    border-radius: 8px;
    padding: 6px 10px;
    background: transparent;
}