/* ═══════════════════════════════════════════════════════════════════
   CHATIVITY – Twitch-Chat-Coop-Begriffsspiel
   Layout-Logik:
   • LINKS  = private Streamer-Zone (Cam-Box mit Wortkarten/aktivem Begriff,
              Scoreboard, Live-Chat) – im Stream liegt OBS-Cam darüber.
   • MITTE  = öffentliches Spiel: schlanke Statusleiste + Brettspiel-Pfad.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    --cv-primary:    var(--pink-500, #ff4191);
    --cv-secondary:  var(--purple-500, #a855f7);
    --cv-accent:     #f9a826;
    --cv-danger:     #ef4444;
    --cv-success:    #22c55e;
    --cv-warning:    #eab308;
    --cv-bg:         var(--cream, #fff5f9);
    --cv-card:       #ffffff;
    --cv-text:       var(--text, #5b2148);
    --cv-text-light: var(--text-light, #8b4573);

    --cv-mode-draw:    #6366f1;
    --cv-mode-explain: #14b8a6;
    --cv-mode-mime:    #f97316;

    /* Brettfarben – bewusst reduziert: ruhige Grundfarbe + 2 Akzente + Ziel */
    --cv-field-normal-bg:   #ffffff;
    --cv-field-normal-ring: rgba(255, 140, 190, 0.5);
    --cv-field-bonus:       #fde68a;
    --cv-field-risk:        #fecaca;
    --cv-field-goal:        #bbf7d0;
    --cv-board-path:        rgba(255, 140, 190, 0.45);
    --cv-board-path-done:   var(--pink-500, #ff4191);
}

/* ──────────────────────────────────────────────────────────────────
   LOBBY – SETTINGS UI (kompaktes Grid wie Wavelength)
   ────────────────────────────────────────────────────────────────── */
.cv-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.6rem 0.7rem;
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
}
.cv-settings-section {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 12px;
    padding: 0.6rem 0.75rem;
    box-shadow: 0 2px 10px rgba(255, 105, 168, 0.06);
    border: 1px solid rgba(255, 140, 190, 0.3);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    transition: border-color 0.18s, box-shadow 0.18s;
}
.cv-settings-section:hover {
    border-color: rgba(255, 105, 165, 0.55);
    box-shadow: 0 4px 14px rgba(255, 65, 145, 0.10);
}
/* volle Breite über alle Spalten (Presets, Erweitert-Toggle, Footer) */
.cv-settings-section--full,
.cv-settings-section[data-cv-only="adventure"][data-cv-full="1"] {
    grid-column: 1 / -1;
}
.cv-settings-section h3 {
    font-size: 0.78rem;
    color: var(--cv-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-weight: 800;
}
.cv-settings-section h3 small {
    margin-left: auto;
    font-size: 0.66rem;
    color: var(--cv-text-light);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.cv-settings-section h3 small .cv-toggle { transform: scale(0.85); }
.cv-settings-row {
    display: grid;
    grid-template-columns: minmax(120px, 200px) 1fr;
    align-items: center;
    gap: 0.5rem 0.8rem;
}
.cv-row-label {
    font-weight: 600;
    color: var(--cv-text);
    font-size: 0.82rem;
}
.cv-row-hint {
    font-size: 0.7rem;
    color: var(--cv-text-light);
    margin: -0.15rem 0 0 0;
    line-height: 1.35;
}

.cv-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.cv-chip {
    appearance: none;
    border: 1.5px solid rgba(255, 180, 210, 0.45);
    background: var(--cv-bg);
    color: var(--cv-text);
    border-radius: var(--radius-full);
    padding: 0.32rem 0.75rem;
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
    font-family: inherit;
}
.cv-chip:hover { transform: translateY(-1px); }
.cv-chip[aria-pressed="true"],
.cv-chip.is-active {
    background: linear-gradient(135deg, var(--pink-400), var(--pink-500));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(255, 105, 168, 0.35);
}
.cv-chip[disabled],
.cv-chip[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
}

.cv-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.cv-preset-btn {
    appearance: none;
    border: 0;
    border-radius: var(--radius-full);
    padding: 0.4rem 0.95rem;
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
    font-family: inherit;
    color: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    transition: transform 0.15s, box-shadow 0.2s;
}
.cv-preset-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(0, 0, 0, 0.12); }
.cv-preset-locker  { background: linear-gradient(135deg, #4ade80, #14b8a6); }
.cv-preset-normal  { background: linear-gradient(135deg, #ff8cbe, #a855f7); }
.cv-preset-hard    { background: linear-gradient(135deg, #f97316, #ef4444); }

.cv-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
    gap: 0.3rem;
}

.cv-toggle {
    appearance: none;
    border: 0;
    cursor: pointer;
    background: rgba(255, 180, 210, 0.4);
    border-radius: var(--radius-full);
    width: 44px;
    height: 24px;
    position: relative;
    transition: background 0.2s;
    flex-shrink: 0;
}
.cv-toggle::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    transition: transform 0.2s;
}
.cv-toggle[aria-pressed="true"] {
    background: linear-gradient(135deg, var(--pink-400), var(--pink-500));
}
.cv-toggle[aria-pressed="true"]::after { transform: translateX(20px); }

.cv-num-input,
.cv-text-input {
    border: 1.5px solid rgba(255, 180, 210, 0.45);
    background: var(--cv-bg);
    color: var(--cv-text);
    border-radius: var(--radius-sm);
    padding: 0.45rem 0.7rem;
    font-family: inherit;
    font-size: 0.85rem;
    width: 100px;
}
.cv-num-input:focus,
.cv-text-input:focus { outline: 2px solid var(--pink-400); outline-offset: 1px; }

.cv-settings-foot {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.cv-advanced-toggle {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--cv-text-light);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.3rem 0;
    text-decoration: underline;
    text-underline-offset: 4px;
}
.cv-advanced-toggle:hover { color: var(--cv-text); }
.cv-advanced { display: none !important; }
.cv-advanced.is-open { display: flex !important; }

.cv-flex {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

/* Zugeklappte Settings-Sektion */
.cv-collapse {
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 140, 190, 0.3);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.8rem;
}
.cv-collapse > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.cv-collapse > summary::-webkit-details-marker { display: none; }
.cv-collapse > summary::before {
    content: "▸";
    transition: transform 0.15s ease;
    font-size: 0.85rem;
    color: var(--cv-text-light);
}
.cv-collapse[open] > summary::before { transform: rotate(90deg); }
.cv-collapse > summary h3 {
    margin: 0;
    font-size: 1rem;
}
.cv-collapse > *:not(summary) {
    margin-top: 0.5rem;
}

/* Spezialfeld-Wahrscheinlichkeit (Slider-Reihen) */
.cv-special-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.45rem 1rem;
    margin-top: 0.4rem;
}
.cv-special-row {
    display: grid;
    grid-template-columns: 1.4rem 6rem 1fr 2.8rem;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 140, 190, 0.25);
    border-radius: var(--radius-sm);
}
.cv-special-icon { font-size: 1.05rem; text-align: center; }
.cv-special-name { font-weight: 600; font-size: 0.88rem; }
.cv-special-range { width: 100%; }
.cv-special-val {
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
}

/* ──────────────────────────────────────────────────────────────────
   PRIVATE STREAMER-ZONE (linke Spalte, Cam-Box)
   ────────────────────────────────────────────────────────────────── */
.cv-private {
    position: relative;
}
.cv-private .zj-widget-head {
    background: linear-gradient(135deg, rgba(255, 140, 190, 0.18), rgba(168, 85, 247, 0.10));
}
.cv-private .zj-widget-title {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.cv-private[data-phase="active"] .zj-widget-title::before,
.cv-private[data-phase="choosing"] .zj-widget-title::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cv-success);
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18);
    animation: cv-blink 1.5s ease-in-out infinite;
}
@keyframes cv-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}

.cv-private-stage[hidden] { display: none !important; }
.cv-private-stage {
    padding: 0.7rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    /* WICHTIG: Identisches Format wie die OBS-Cam-Box (16:9), damit der
       Bereich unabhängig von der Wortanzahl (3 oder 6 Karten) GENAU
       so groß bleibt wie der idle-Cam-Bereich. Sonst ragt Inhalt unter
       der Cam-Überlagerung im Stream hervor und Wörter würden geleakt. */
    aspect-ratio: 16 / 9;
    min-height: 0;
    overflow: hidden;
}
/* Idle-Cam erbt zusätzlich den hübschen Cam-Hintergrund von zj-cam-inner. */

.cv-private-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.cv-private-meta-mode {
    color: #fff;
    background: var(--cv-mode-explain);
    border-radius: var(--radius-full);
    padding: 0.22rem 0.7rem;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}
.cv-private-meta-mode[data-mode="draw"]    { background: var(--cv-mode-draw); }
.cv-private-meta-mode[data-mode="explain"] { background: var(--cv-mode-explain); }
.cv-private-meta-mode[data-mode="mime"]    { background: var(--cv-mode-mime); }
.cv-private-meta-hint {
    font-size: 0.74rem;
    color: var(--cv-text-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}
.cv-private-meta-steps {
    margin-left: auto;
    background: rgba(255, 65, 145, 0.12);
    color: var(--cv-primary);
    border-radius: var(--radius-full);
    padding: 0.22rem 0.65rem;
    font-size: 0.74rem;
    font-weight: 800;
}

/* Wortkarten in Mini-Format. Die Karten teilen sich den verfügbaren
   Platz in der fixen 16:9-Stage. Bei 6 Wörtern wechseln wir auf
   ein 2-Spalten-Grid (3 Reihen), damit die Höhe konstant bleibt. */
.cv-mini-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.4rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;     /* Sicherheits-Fallback, falls 6 Karten knapp werden */
    overflow-x: hidden;
    align-content: start;
    /* Custom Scrollbar dezent halten */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 105, 168, 0.35) transparent;
}
.cv-mini-cards::-webkit-scrollbar          { width: 6px; }
.cv-mini-cards::-webkit-scrollbar-thumb    { background: rgba(255, 105, 168, 0.35); border-radius: 3px; }
.cv-mini-cards::-webkit-scrollbar-track    { background: transparent; }
.cv-mini-cards.is-grid-2 {
    grid-template-columns: 1fr 1fr;
}
.cv-mini-card {
    appearance: none;
    border: 0;
    cursor: pointer;
    background: linear-gradient(135deg, #fff, #ffeef5);
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.55rem;
    text-align: left;
    box-shadow: 0 2px 8px rgba(255, 105, 168, 0.12);
    transition: transform 0.12s, box-shadow 0.18s, border-color 0.15s;
    border: 2px solid transparent;
    font-family: inherit;
    color: var(--cv-text);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.2rem;
    min-width: 0;
}
.cv-mini-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(255, 105, 168, 0.22);
    border-color: var(--pink-300);
}
.cv-mini-card-word {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--cv-text);
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.cv-mini-card-foot {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    font-size: 0.62rem;
    color: var(--cv-text-light);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    overflow: hidden;
    white-space: nowrap;
}
.cv-mini-card-cat {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1 1 auto;
}
/* Im 2-Spalten-Layout brauchen wir die "+x Schritte"-Pille nicht
   absolut zu positionieren – sie passt mit ins Foot. */
.cv-mini-cards.is-grid-2 .cv-mini-card { padding: 0.35rem 0.5rem; }
.cv-mini-cards.is-grid-2 .cv-mini-card-word { font-size: 0.85rem; }
.cv-mini-cards.is-grid-2 .cv-mini-card-foot { font-size: 0.58rem; gap: 0.3rem; }
.cv-mini-cards.is-grid-2 .cv-mini-card-cat  { display: none; }
.cv-mini-cards.is-grid-2 .cv-mini-card-steps { font-size: 0.62rem; padding: 0.08rem 0.4rem; }
.cv-mini-card-mode {
    color: #fff;
    border-radius: var(--radius-full);
    padding: 0.1rem 0.45rem;
    font-size: 0.65rem;
    font-weight: 800;
    background: var(--cv-mode-explain);
}
.cv-mini-card-mode[data-mode="draw"]    { background: var(--cv-mode-draw); }
.cv-mini-card-mode[data-mode="explain"] { background: var(--cv-mode-explain); }
.cv-mini-card-mode[data-mode="mime"]    { background: var(--cv-mode-mime); }
.cv-mini-card-diff {
    color: #fff;
    border-radius: var(--radius-full);
    padding: 0.08rem 0.4rem;
    font-size: 0.62rem;
    font-weight: 800;
    background: #94a3b8;
}
.cv-mini-card-diff[data-diff="easy"]   { background: #22c55e; }
.cv-mini-card-diff[data-diff="normal"] { background: #38bdf8; }
.cv-mini-card-diff[data-diff="hard"]   { background: #f97316; }
.cv-mini-card-diff[data-diff="chaos"]  { background: #a855f7; }
.cv-mini-cards.is-grid-2 .cv-mini-card-diff { display: none; }
.cv-mini-card-steps {
    margin-left: auto;
    align-self: center;
    background: rgba(255, 65, 145, 0.12);
    color: var(--cv-primary);
    border-radius: var(--radius-full);
    padding: 0.12rem 0.5rem;
    font-size: 0.68rem;
    font-weight: 800;
    white-space: nowrap;
    flex: 0 0 auto;
}

/* Aktiver Begriff (während round_active) */
.cv-private-word {
    background: linear-gradient(135deg, #fff, #ffeef5);
    border: 2px solid var(--cv-primary);
    border-radius: var(--radius-sm);
    padding: 0.55rem 0.8rem;
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--cv-text);
    text-align: center;
    word-break: break-word;
    line-height: 1.15;
    box-shadow: 0 0 0 3px rgba(255, 105, 168, 0.18);
    flex: 0 0 auto;
}
.cv-private-mode-hint {
    background: rgba(20, 184, 166, 0.12);
    color: var(--cv-mode-explain);
    border-radius: var(--radius-sm);
    padding: 0.45rem 0.7rem;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 700;
}
.cv-private-mode-hint[data-mode="draw"]    { background: rgba(99, 102, 241, 0.12); color: var(--cv-mode-draw); }
.cv-private-mode-hint[data-mode="mime"]    { background: rgba(249, 115, 22, 0.12); color: var(--cv-mode-mime); }

/* Tabu-Wörter (privat, nur Streamer-Panel, nur im Erklären-Modus).
   Layout: kompakt nebeneinander – sonst nimmt die Liste zu viel Höhe
   weg und das aktive Wort wird im OBS-Cam-Bereich gestaucht. */
.cv-private-taboo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.4rem;
    padding: 0.45rem 0.55rem;
    border-radius: var(--radius-sm);
    background: rgba(244, 63, 94, 0.10);
    border: 1.5px solid rgba(244, 63, 94, 0.45);
    flex: 0 0 auto;
    max-height: 5.8em;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(244, 63, 94, 0.55) transparent;
}
.cv-private-taboo::-webkit-scrollbar       { width: 6px; }
.cv-private-taboo::-webkit-scrollbar-thumb { background: rgba(244, 63, 94, 0.55); border-radius: 3px; }
.cv-private-taboo-label {
    align-self: center;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #fff;
    padding: 0.18rem 0.55rem;
    background: linear-gradient(135deg, #f43f5e, #c2185b);
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(244, 63, 94, 0.35);
    white-space: nowrap;
}
.cv-private-taboo-label::before {
    content: "🚫 ";
    margin-right: 0.15rem;
}
.cv-private-taboo-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: contents;
}
.cv-private-taboo-item {
    font-size: 0.82rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #f43f5e, #c2185b);
    padding: 0.18rem 0.65rem;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(244, 63, 94, 0.32);
    letter-spacing: 0.01em;
    /* KEIN line-through – Wörter sollen klar lesbar sein */
}

.cv-private-actions {
    display: flex;
    gap: 0.4rem;
    margin-top: auto;
}
.cv-mini-btn {
    appearance: none;
    border: 1.5px solid rgba(255, 180, 210, 0.45);
    background: var(--cv-bg);
    color: var(--cv-text);
    border-radius: var(--radius-sm);
    padding: 0.45rem 0.7rem;
    font-weight: 700;
    font-family: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    flex: 1;
    transition: transform 0.12s, background 0.15s;
}
.cv-mini-btn:hover { transform: translateY(-1px); background: var(--pink-100); }
.cv-mini-btn-primary {
    background: linear-gradient(135deg, var(--pink-400), var(--pink-500));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 3px 10px rgba(255, 65, 145, 0.3);
}
.cv-mini-btn-primary:hover { background: linear-gradient(135deg, var(--pink-500), var(--pink-600)); }
.cv-mini-btn-ghost {
    background: transparent;
    color: var(--cv-text-light);
}

/* Next-Phase: Auflösung + nächste Runde */
.cv-private-next {
    align-items: center;
    text-align: center;
    justify-content: center;
}
.cv-private-next-icon {
    font-size: 2.5rem;
    line-height: 1;
}
.cv-private-next-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--cv-text);
}
.cv-private-next-sub {
    font-size: 0.85rem;
    color: var(--cv-text-light);
    margin-bottom: 0.3rem;
}
.cv-private-next .cv-mini-btn { flex: none; padding: 0.55rem 1.1rem; }

/* ──────────────────────────────────────────────────────────────────
   ÖFFENTLICHE STATUSLEISTE
   ────────────────────────────────────────────────────────────────── */
.cv-game-screen {
    display: flex !important;
    flex-direction: column;
    gap: 0.6rem;
    align-items: stretch !important;
}
.cv-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem 0.7rem;
    padding: 0.55rem 1rem;
    background: var(--cv-card);
    border-radius: var(--radius-full);
    box-shadow: 0 3px 14px rgba(255, 105, 168, 0.08);
    border: 1px solid rgba(255, 180, 210, 0.35);
    font-size: 0.92rem;
}
.cv-status-cell {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
}
.cv-status-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--cv-text-light);
    font-weight: 700;
}
.cv-status-value {
    font-weight: 800;
    color: var(--cv-text);
    font-variant-numeric: tabular-nums;
}
.cv-status-icon { color: var(--cv-text-light); font-size: 0.95rem; }
.cv-status-sep  { color: rgba(255, 140, 190, 0.5); font-weight: 700; }
.cv-status-mode {
    color: #fff;
    background: var(--cv-mode-explain);
    border-radius: var(--radius-full);
    padding: 0.2rem 0.65rem;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}
.cv-status-mode[data-mode="draw"]    { background: var(--cv-mode-draw); }
.cv-status-mode[data-mode="explain"] { background: var(--cv-mode-explain); }
.cv-status-mode[data-mode="mime"]    { background: var(--cv-mode-mime); }
.cv-status-mode { cursor: help; }

/* Tooltip am Mode-Badge (zeigt Modus-Anweisung) */
.cv-mode-tip-host { position: relative; }
.cv-mode-tip {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    background: rgba(43, 24, 40, 0.94);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.45rem 0.7rem;
    border-radius: 0.55rem;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 20;
    box-shadow: 0 6px 18px rgba(43, 24, 40, 0.25);
}
.cv-mode-tip::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background: rgba(43, 24, 40, 0.94);
    border-radius: 2px;
}
.cv-mode-tip-host:hover .cv-mode-tip,
.cv-mode-tip-host:focus-within .cv-mode-tip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.cv-hud-timer.is-warning {
    color: var(--cv-danger);
    animation: cv-pulse 0.9s ease-in-out infinite;
}
@keyframes cv-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}
.cv-lives {
    display: inline-flex;
    gap: 0.15rem;
}
.cv-life {
    font-size: 1.1rem;
    line-height: 1;
    transition: transform 0.4s, opacity 0.4s;
}
.cv-life.is-lost { opacity: 0.2; transform: scale(0.7) rotate(20deg); }

.cv-shake { animation: cv-shake 0.45s ease; }
@keyframes cv-shake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-8px); }
    40%      { transform: translateX(8px); }
    60%      { transform: translateX(-5px); }
    80%      { transform: translateX(5px); }
}

.cv-paused {
    text-align: center;
    background: rgba(91, 33, 72, 0.85);
    color: #fff;
    border-radius: var(--radius-full);
    padding: 0.5rem 1rem;
    font-weight: 700;
    align-self: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

/* ──────────────────────────────────────────────────────────────────
   SPIELBRETT – serpentinenartiger Pfad
   ────────────────────────────────────────────────────────────────── */
.cv-board-stage {
    position: relative;
    padding: 12px 16px;
    flex: 1 1 auto;
    align-self: stretch;
    width: 100%;
    min-height: 420px;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cv-board-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}
.cv-board-path {
    fill: none;
    stroke: var(--cv-board-path);
    stroke-width: 10;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 4 10;
    opacity: 0.85;
}
.cv-board-path-traveled {
    fill: none;
    stroke: var(--cv-board-path-done);
    stroke-width: 14;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 2px 6px rgba(255, 65, 145, 0.45));
    transition: stroke-dasharray 0.6s ease;
}

/* ──────────────────────────────────────────────────────────────────
   ROUND-END OVERLAY (liegt ÜBER dem Spielbrett bei gelöster /
   abgelaufener Runde – Adventure-Modus)
   ────────────────────────────────────────────────────────────────── */
.cv-round-end {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(255, 247, 251, 0.72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: cv-round-end-fade 0.22s ease-out;
}
@keyframes cv-round-end-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.cv-round-end[hidden] { display: none !important; }
.cv-round-end-card {
    width: 100%;
    max-width: 640px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 240, 246, 0.92));
    border: 1.5px solid rgba(255, 140, 190, 0.55);
    border-radius: 28px;
    box-shadow:
        0 18px 48px rgba(255, 105, 168, 0.18),
        inset 0 0 0 1px rgba(255, 255, 255, 0.7);
    padding: 1.6rem 1.6rem 1.4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    text-align: center;
    animation: cv-round-end-pop 0.35s cubic-bezier(.5, 1.6, .4, 1);
}
@keyframes cv-round-end-pop {
    0%   { transform: scale(0.9) translateY(8px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}
.cv-round-end-icon {
    font-size: 2.6rem;
    line-height: 1;
    width: 4.2rem;
    height: 4.2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #4ade80, #14b8a6);
    color: #fff;
    box-shadow: 0 8px 22px rgba(20, 184, 166, 0.3);
}
.cv-round-end[data-result="timeout"] .cv-round-end-icon {
    background: linear-gradient(135deg, #f43f5e, #c2185b);
    box-shadow: 0 8px 22px rgba(244, 63, 94, 0.3);
}
.cv-round-end[data-result="skip"] .cv-round-end-icon {
    background: linear-gradient(135deg, #94a3b8, #64748b);
    box-shadow: 0 8px 22px rgba(100, 116, 139, 0.25);
}
.cv-round-end-title {
    margin: 0;
    font-family: var(--font-display, inherit);
    font-size: 1.55rem;
    color: var(--cv-text);
    line-height: 1.1;
}
.cv-round-end-word {
    margin: 0;
    font-size: 1rem;
    color: var(--cv-text-light, #6b7280);
}
.cv-round-end-word strong {
    color: var(--cv-text);
    font-weight: 800;
    background: rgba(255, 105, 168, 0.12);
    padding: 0.05rem 0.5rem;
    border-radius: 8px;
}
.cv-round-end-solver {
    display: flex;
    align-items: center;
    gap: 0.5rem 0.8rem;
    flex-wrap: wrap;
    justify-content: center;
    background: rgba(20, 184, 166, 0.10);
    border: 1.5px solid rgba(20, 184, 166, 0.35);
    border-radius: 999px;
    padding: 0.45rem 1rem;
}
.cv-round-end-solver-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #0f766e;
    font-weight: 800;
}
.cv-round-end-solver-name {
    font-weight: 800;
    color: var(--cv-text);
}
.cv-round-end-solver-points {
    font-weight: 800;
    color: #0f766e;
    background: #fff;
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
    box-shadow: 0 2px 6px rgba(20, 184, 166, 0.2);
}
.cv-round-end-top3 {
    width: 100%;
    max-width: 420px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 14px;
    border: 1px solid rgba(255, 180, 210, 0.4);
    padding: 0.6rem 0.8rem 0.7rem;
}
.cv-round-end-top3 h3 {
    margin: 0 0 0.4rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cv-text-light, #6b7280);
    font-weight: 800;
}
.cv-round-end-top3-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.cv-round-end-top3-list li {
    display: grid;
    grid-template-columns: 1.6rem 1fr auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.4rem;
    border-radius: 10px;
    font-size: 0.92rem;
}
.cv-round-end-top3-list li.is-rank-1 { background: linear-gradient(90deg, rgba(250, 204, 21, 0.22), transparent); }
.cv-round-end-top3-list li.is-rank-2 { background: linear-gradient(90deg, rgba(148, 163, 184, 0.20), transparent); }
.cv-round-end-top3-list li.is-rank-3 { background: linear-gradient(90deg, rgba(180, 83, 9, 0.16), transparent); }
.cv-round-end-top3-rank {
    font-weight: 900;
    color: var(--cv-text-light, #64748b);
    text-align: center;
}
.cv-round-end-top3-list li.is-rank-1 .cv-round-end-top3-rank { color: #b08407; }
.cv-round-end-top3-list li.is-rank-2 .cv-round-end-top3-rank { color: #475569; }
.cv-round-end-top3-list li.is-rank-3 .cv-round-end-top3-rank { color: #92400e; }
.cv-round-end-top3-name {
    font-weight: 700;
    color: var(--cv-text);
    text-align: left;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cv-round-end-top3-points {
    font-weight: 800;
    color: var(--cv-text);
    font-variant-numeric: tabular-nums;
}
.cv-round-end-top3-empty {
    grid-template-columns: 1fr !important;
    text-align: center;
    color: var(--cv-text-light);
    font-style: italic;
}
.cv-round-end-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.4rem;
    justify-content: center;
}

/* cv-board: Container für SVG-Pfad + absolut positionierte Felder.
   Die explizite Pixel-Breite und -Höhe wird per JS (applyBoardSize)
   gesetzt, basierend auf der gewählten Layout-Form und dem verfügbaren
   Platz. Das ist robust gegen flex/aspect-ratio-Quirks. */
.cv-board {
    position: relative;
    margin: 0 auto;
    flex: 0 0 auto;
}

/* Hello-Kitty-Dekorationen */
.cv-deco-bow {
    fill: #ff5fa8;
    stroke: #c2185b;
    stroke-width: 2;
}
.cv-deco-bow-knot {
    fill: #ffd1e3;
    stroke: #c2185b;
    stroke-width: 2;
}
.cv-deco-eye {
    fill: #1a1f3a;
}
.cv-deco-nose {
    fill: #fcd34d;
    stroke: #b45309;
    stroke-width: 1;
}
.cv-deco-whisker {
    stroke: rgba(91, 33, 72, 0.55);
    stroke-width: 1.5;
    stroke-linecap: round;
}

/* Feldknoten – kreisförmig, brettspielartig */
.cv-field {
    width: var(--cv-field-size, 52px);
    height: var(--cv-field-size, 52px);
    border-radius: 50%;
    background: var(--cv-field-normal-bg);
    box-shadow:
        0 4px 0 rgba(255, 105, 168, 0.18),
        0 8px 18px rgba(255, 105, 168, 0.18),
        inset 0 0 0 2px var(--cv-field-normal-ring);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cv-text);
    transition: transform 0.25s cubic-bezier(.5,1.5,.4,1), box-shadow 0.25s;
    z-index: 2;
    z-index: 2;
    place-self: center;
}
.cv-field-num {
    font-size: 0.78rem;
    font-weight: 800;
    color: rgba(91, 33, 72, 0.55);
    line-height: 1;
}
/* Feld-Modus (modeChoice="field"): Das Feld behält sein normales Aussehen
   (klar, opak), bekommt aber eine kompakte Badge oben rechts mit dem
   Modus-Emoji – weißer Kreis + farbiger Ring. So bleibt das Brett
   übersichtlich und der Modus ist trotzdem auf einen Blick erkennbar. */
.cv-field[data-mode] { position: relative; }
.cv-field[data-mode="explain"] { --cv-mode-color: var(--cv-mode-explain); }
.cv-field[data-mode="draw"]    { --cv-mode-color: var(--cv-mode-draw); }
.cv-field[data-mode="mime"]    { --cv-mode-color: var(--cv-mode-mime); }

.cv-field-mode-icon {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    font-size: 0.95rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2.5px solid var(--cv-mode-color, var(--pink-400));
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    z-index: 4;
    pointer-events: none;
}

.cv-field[data-type="bonus"] {
    background:
        radial-gradient(circle at 30% 25%, #fff5cf, var(--cv-field-bonus));
    box-shadow:
        0 4px 0 rgba(202, 138, 4, 0.25),
        0 8px 18px rgba(234, 179, 8, 0.30),
        inset 0 0 0 2px rgba(202, 138, 4, 0.45);
}
.cv-field[data-type="bonus"] .cv-field-num { color: rgba(120, 70, 0, 0.5); }
.cv-field[data-type="bonus"]::after {
    content: "✨";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    filter: drop-shadow(0 1px 1px rgba(120, 70, 0, 0.18));
}
.cv-field[data-type="bonus"] .cv-field-num { display: none; }

.cv-field[data-type="risk"] {
    background:
        radial-gradient(circle at 30% 25%, #ffe4e6, var(--cv-field-risk));
    box-shadow:
        0 4px 0 rgba(190, 40, 40, 0.22),
        0 8px 18px rgba(239, 68, 68, 0.28),
        inset 0 0 0 2px rgba(190, 40, 40, 0.4);
}
.cv-field[data-type="risk"]::after {
    content: "⚠";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: rgba(150, 30, 30, 0.85);
    font-weight: 900;
}
.cv-field[data-type="risk"] .cv-field-num { display: none; }

/* Speed-Feld: warmer Orange-Glanz */
.cv-field[data-type="speed"] {
    background:
        radial-gradient(circle at 30% 25%, #fff5e3, #ffd089);
    box-shadow:
        0 5px 0 rgba(200, 120, 30, 0.35),
        0 10px 22px rgba(249, 115, 22, 0.35),
        inset 0 0 0 2px rgba(200, 110, 30, 0.55);
}
.cv-field[data-type="speed"]::before {
    content: "⚡";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: rgba(160, 80, 10, 0.9);
    font-weight: 900;
}
.cv-field[data-type="speed"] .cv-field-num { display: none; }

/* Community-Feld: indigo / pastell */
.cv-field[data-type="community"] {
    background:
        radial-gradient(circle at 30% 25%, #efeffc, #c5c5fa);
    box-shadow:
        0 5px 0 rgba(80, 70, 200, 0.35),
        0 10px 22px rgba(99, 102, 241, 0.35),
        inset 0 0 0 2px rgba(99, 102, 241, 0.55);
}
.cv-field[data-type="community"]::before {
    content: "🗳️";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}
.cv-field[data-type="community"] .cv-field-num { display: none; }

/* Boss-Feld: lila/violett, etwas größer */
.cv-field[data-type="boss"] {
    --cv-field-size: 64px;
    background:
        radial-gradient(circle at 30% 25%, #f7eaff, #c084fc);
    box-shadow:
        0 6px 0 rgba(100, 30, 160, 0.45),
        0 14px 30px rgba(168, 85, 247, 0.45),
        inset 0 0 0 3px rgba(124, 58, 237, 0.65);
    z-index: 2;
}
.cv-field[data-type="boss"]::before {
    content: "👑";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    filter: drop-shadow(0 1px 2px rgba(70, 0, 110, 0.45));
}
.cv-field[data-type="boss"] .cv-field-num { display: none; }

.cv-field[data-type="goal"] {
    --cv-field-size: 76px;
    background:
        radial-gradient(circle at 35% 25%, #f0fff4, var(--cv-field-goal));
    box-shadow:
        0 6px 0 rgba(20, 130, 60, 0.30),
        0 12px 28px rgba(34, 197, 94, 0.40),
        inset 0 0 0 3px rgba(20, 130, 60, 0.55);
    z-index: 3;
}
.cv-field[data-type="goal"] .cv-field-num { display: none; }
.cv-field[data-type="goal"]::after {
    content: "🏁";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
}

/* Start-Marker */
.cv-field[data-type="start"] {
    --cv-field-size: 76px;
    background: linear-gradient(135deg, #fff, #ffeef5);
    box-shadow:
        0 6px 0 rgba(255, 65, 145, 0.25),
        0 12px 28px rgba(255, 65, 145, 0.30),
        inset 0 0 0 3px var(--cv-primary);
    z-index: 3;
}
.cv-field[data-type="start"] .cv-field-num { display: none; }
.cv-field[data-type="start"]::after {
    content: "Start";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 900;
    color: var(--cv-primary);
    letter-spacing: 0.04em;
}

/* aktuelles Feld stark hervorgehoben (geringer Pulse) */
.cv-field.is-current {
    transform: scale(1.05);
    box-shadow:
        0 0 0 4px var(--cv-primary),
        0 8px 22px rgba(255, 65, 145, 0.45),
        inset 0 0 0 2px var(--cv-field-normal-ring);
}

/* Spielfigur – größer und sichtbarer */
.cv-pawn {
    position: absolute;
    z-index: 3;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffd6e7, var(--pink-500), var(--pink-700));
    box-shadow:
        0 0 0 4px rgba(255, 255, 255, 0.85),
        0 8px 20px rgba(255, 65, 145, 0.55),
        inset -4px -6px 8px rgba(196, 16, 101, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #fff;
    transition: left 0.55s cubic-bezier(.55, 1.4, .4, 1), top 0.55s cubic-bezier(.55, 1.4, .4, 1);
    pointer-events: none;
    z-index: 4;
    transform: translate(-50%, -50%);
}
.cv-pawn.is-hopping { animation: cv-hop 0.55s ease; }
@keyframes cv-hop {
    0%, 100% { transform: translate(-50%, -50%); }
    50%      { transform: translate(-50%, -75%) rotate(-6deg); }
}

/* Optionale dezente Mini-Legende (nur 3 Einträge) */
.cv-board-legend-mini {
    position: absolute;
    bottom: 10px;
    right: 14px;
    display: flex;
    gap: 0.7rem;
    font-size: 0.7rem;
    color: var(--cv-text-light);
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(4px);
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 180, 210, 0.4);
}
.cv-board-legend-mini > span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.cv-board-legend-mini i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

/* ──────────────────────────────────────────────────────────────────
   SOLVER-TOAST (kurz eingeblendete Bestätigung über dem Brett)
   ────────────────────────────────────────────────────────────────── */
.cv-solver-toast {
    position: absolute;
    left: 50%;
    top: 18px;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--cv-success), #10b981);
    color: #fff;
    border-radius: var(--radius-full);
    padding: 0.55rem 1.1rem;
    font-weight: 800;
    box-shadow: 0 10px 30px rgba(34, 197, 94, 0.4);
    z-index: 10;
    animation: cv-toast 0.45s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.95rem;
}
.cv-solver-toast small {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.66rem;
    opacity: 0.85;
    margin-right: 0.25rem;
}
.cv-solver-toast strong { font-size: 1.05rem; }
@keyframes cv-toast {
    0%   { transform: translate(-50%, -20px); opacity: 0; }
    60%  { transform: translate(-50%, 4px);   opacity: 1; }
    100% { transform: translate(-50%, 0);     opacity: 1; }
}
.cv-solver-toast[hidden] { display: none !important; }

/* Spezialfeld-Toast (links unten, dezent, abblendbar) */
.cv-field-toast {
    position: absolute;
    left: 18px;
    bottom: 18px;
    background: var(--cv-card);
    border-radius: var(--radius);
    padding: 0.7rem 0.9rem;
    border: 1px solid rgba(255, 180, 210, 0.45);
    box-shadow: 0 12px 30px rgba(255, 105, 168, 0.18);
    display: flex;
    align-items: center;
    gap: 0.7rem;
    max-width: 320px;
    z-index: 9;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}
.cv-field-toast.is-show { opacity: 1; transform: translateY(0); }
.cv-field-toast[hidden] { display: none !important; }
.cv-field-toast-icon {
    font-size: 1.6rem;
    line-height: 1;
    flex: 0 0 auto;
    width: 2.2rem;
    height: 2.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
}
.cv-field-toast[data-kind="bonus"]     .cv-field-toast-icon { background: rgba(34, 197, 94, 0.15); }
.cv-field-toast[data-kind="risk"]      .cv-field-toast-icon { background: rgba(244, 63, 94, 0.15); }
.cv-field-toast[data-kind="speed"]     .cv-field-toast-icon { background: rgba(249, 115, 22, 0.15); }
.cv-field-toast[data-kind="community"] .cv-field-toast-icon { background: rgba(99, 102, 241, 0.15); }
.cv-field-toast[data-kind="boss"]      .cv-field-toast-icon { background: rgba(168, 85, 247, 0.15); }
.cv-field-toast-body { display: flex; flex-direction: column; gap: 0.1rem; }
.cv-field-toast-title { font-size: 0.85rem; font-weight: 800; color: var(--cv-text); }
.cv-field-toast-text  { font-size: 0.78rem; color: var(--cv-text-light); line-height: 1.35; }

/* ──────────────────────────────────────────────────────────────────
   RACE-MODUS
   ────────────────────────────────────────────────────────────────── */
.cv-race-stage {
    background: var(--cv-card);
    border-radius: var(--radius);
    padding: 1.2rem 1.4rem;
    border: 1px solid rgba(255, 180, 210, 0.4);
    box-shadow: 0 4px 18px rgba(255, 105, 168, 0.08);
    flex: 1;
}
.cv-race-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.7rem;
}
.cv-race-head h3 { margin: 0; font-size: 1.1rem; }
.cv-race-head small { color: var(--cv-text-light); }
.cv-race-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.cv-race-list li {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.7rem;
    background: linear-gradient(90deg, #ffeef5, #fff);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 180, 210, 0.4);
}
.cv-race-list li.cv-race-empty {
    grid-template-columns: 1fr;
    text-align: center;
    color: var(--cv-text-light);
}
.cv-race-list li:first-child:not(.cv-race-empty) {
    background: linear-gradient(90deg, #ffe4ec, #fff5e0);
    border-color: var(--pink-300);
}

/* ──────────────────────────────────────────────────────────────────
   DRAWING CANVAS MODAL
   ────────────────────────────────────────────────────────────────── */
.cv-canvas-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(91, 33, 72, 0.45);
    backdrop-filter: none;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.cv-canvas-backdrop[hidden] { display: none !important; }
.cv-canvas-backdrop.is-inline {
    position: absolute;
    inset: 3.2rem 0 0 0;
    background: transparent;
    padding: 0;
    width: auto;
    min-height: 0;
    align-items: stretch;
    justify-content: stretch;
    z-index: 35;
    pointer-events: auto;
}
.cv-canvas-modal {
    background: var(--cv-card);
    border-radius: var(--radius);
    padding: 0.65rem;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    width: min(900px, 96vw);
    height: min(620px, 86vh);
    max-height: 86vh;
}
.cv-canvas-backdrop.is-inline .cv-canvas-modal {
    width: 100%;
    height: 100%;
    max-height: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}
.cv-canvas-layout {
    display: grid;
    grid-template-columns: 68px 1fr;
    gap: 0.55rem;
    height: 100%;
}
.cv-canvas-main {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.cv-canvas-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
}
.cv-canvas-timer {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 0.3rem 0.7rem;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 140, 190, 0.35);
    color: var(--cv-text);
    min-width: 4.5rem;
    justify-content: center;
}
.cv-canvas-timer-icon { font-size: 1rem; }
.cv-canvas-timer.is-warning {
    color: var(--cv-danger);
    border-color: rgba(244, 63, 94, 0.45);
    background: rgba(255, 235, 240, 0.95);
    animation: cv-pulse 0.9s ease-in-out infinite;
}

/* ──────────────────────────────────────────────────────────────────
   COMMUNITY-VOTE-OVERLAY (Modal über dem Spielbrett)
   ────────────────────────────────────────────────────────────────── */
.cv-vote-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(91, 33, 72, 0.30);
    backdrop-filter: blur(2px);
    z-index: 30;
    padding: 1rem;
    animation: cv-vote-fade-in 0.2s ease-out;
}
.cv-vote-overlay[hidden] { display: none !important; }
@keyframes cv-vote-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.cv-vote-card {
    background: linear-gradient(135deg, #efeffc, #f9e5ff);
    border: 1px solid rgba(99, 102, 241, 0.45);
    border-radius: var(--radius);
    padding: 1rem 1.2rem;
    color: #2e2960;
    box-shadow: 0 18px 50px rgba(91, 33, 72, 0.35);
    width: min(440px, 90%);
    max-width: 100%;
    animation: cv-vote-pop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes cv-vote-pop {
    from { transform: scale(0.92); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}
.cv-vote-head {
    font-weight: 700;
    font-size: 0.92rem;
    margin-bottom: 0.45rem;
}
.cv-vote-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.cv-vote-item {
    display: grid;
    grid-template-columns: 2.3rem auto 1fr 2.2rem;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.88rem;
}
.cv-vote-cmd {
    font-weight: 800;
    background: rgba(99, 102, 241, 0.18);
    color: #4338ca;
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-full);
    text-align: center;
    font-size: 0.82rem;
}
.cv-vote-label { font-weight: 600; }
.cv-vote-bar {
    background: rgba(99, 102, 241, 0.15);
    height: 8px;
    border-radius: var(--radius-full);
    overflow: hidden;
}
.cv-vote-bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #c084fc);
    transition: width 0.35s ease;
}
.cv-vote-count {
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.cv-canvas-modal.is-fullscreen {
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
}
.cv-canvas-tools {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: center;
    border: 1px solid rgba(255, 180, 210, 0.45);
    border-radius: var(--radius-sm);
    background: #fff;
    padding: 0.35rem;
    overflow-y: auto;
    scrollbar-width: thin;
}
.cv-canvas-tools input[type="color"] {
    width: 42px;
    height: 38px;
    border: 1.5px solid rgba(255, 180, 210, 0.45);
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
}
.cv-canvas-tools input[type="range"] {
    width: 34px;
    height: 130px;
    writing-mode: vertical-lr;
    direction: rtl;
    accent-color: var(--cv-primary);
}
.cv-canvas-tools .cv-tool {
    appearance: none;
    border: 1.5px solid rgba(255, 180, 210, 0.45);
    background: var(--cv-bg);
    color: var(--cv-text);
    border-radius: var(--radius-sm);
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    font-size: 1.08rem;
}
.cv-canvas-tools .cv-tool[aria-pressed="true"] {
    background: linear-gradient(135deg, var(--pink-400), var(--pink-500));
    color: #fff;
    border-color: transparent;
}
.cv-tool-divider {
    width: 100%;
    height: 1px;
    background: rgba(255, 180, 210, 0.45);
    margin: 0.05rem 0;
}
.cv-canvas-host {
    flex: 1 1 auto;
    background: #fff;
    border: 2px dashed rgba(255, 180, 210, 0.5);
    border-radius: var(--radius);
    overflow: hidden;
    min-height: 0;
    position: relative;
}
.cv-canvas-host canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: none;
    touch-action: none;
}
/* Eigener Cursor: Punkt mit Strichstärke + Farbe statt Plus */
.cv-canvas-cursor {
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-9999px, -9999px) translate(-50%, -50%);
    transition: opacity 0.12s ease;
    box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.05);
    opacity: 0;
    z-index: 5;
}
.cv-canvas-foot {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}
/* Wort-Toggle (Standard: ausgeblendet, Klick blendet kurz ein) */
.cv-canvas-word {
    appearance: none;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: linear-gradient(135deg, #fff, #ffeef5);
    border-radius: var(--radius-sm);
    padding: 0.45rem 0.85rem;
    border: 1.5px solid rgba(255, 65, 145, 0.4);
    font-weight: 800;
    color: var(--cv-text);
}
.cv-canvas-word[aria-pressed="true"] {
    background: linear-gradient(135deg, #fff7c2, #ffe98a);
    border-color: rgba(202, 138, 4, 0.55);
}
.cv-canvas-word-prefix {
    font-size: 0.78rem;
    color: rgba(91, 33, 72, 0.6);
}
.cv-canvas-word-eye {
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(91, 33, 72, 0.75);
}
.cv-canvas-word-text {
    font-size: 0.95rem;
    letter-spacing: 0.01em;
}

@media (max-width: 760px) {
    .cv-canvas-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }
    .cv-canvas-tools {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        justify-content: flex-start;
    }
    .cv-canvas-tools input[type="range"] {
        width: 92px;
        height: auto;
        writing-mode: horizontal-tb;
        direction: ltr;
    }
    .cv-tool-divider {
        width: 1px;
        height: 34px;
        flex: 0 0 1px;
    }
}

/* ──────────────────────────────────────────────────────────────────
   ENDSCREENS
   ────────────────────────────────────────────────────────────────── */
.cv-endscreen {
    background: var(--cv-card);
    border-radius: var(--radius);
    padding: 2rem 1.4rem;
    box-shadow: 0 8px 30px rgba(255, 105, 168, 0.18);
    border: 1px solid rgba(255, 180, 210, 0.35);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.cv-endscreen.is-game-over {
    background: linear-gradient(180deg, #2b1828, #5b2148);
    color: #fff;
}
.cv-endscreen.is-game-over h2 { color: #ffd6e7; }
.cv-endscreen.is-victory {
    background: linear-gradient(180deg, #fff5f9, #ffeef5);
}
.cv-endscreen h2 { font-size: 1.8rem; margin-bottom: 0.4rem; }
.cv-endscreen p  { color: inherit; opacity: 0.85; margin-bottom: 1rem; }
.cv-confetti {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.cv-confetti span {
    position: absolute;
    top: -20px;
    width: 10px;
    height: 14px;
    background: var(--pink-400);
    animation: cv-fall 2.5s linear infinite;
    border-radius: 2px;
}
@keyframes cv-fall {
    0%   { transform: translateY(0)    rotate(0deg); opacity: 1; }
    100% { transform: translateY(420px) rotate(540deg); opacity: 0; }
}

.cv-rules-list { padding-left: 1.2rem; line-height: 1.7; }
.cv-rules-list li + li { margin-top: 0.2rem; }