/* ==========================================================================
   Mühle — seitenspezifisches Styling (games/muehle.php).
   Shell (Header, Footer, Fonts, --border etc.) kommt aus main-vhc.css —
   hier nur Spielfläche, Screens, Buttons und Modal. Neon-Stil analog Schach.
   ========================================================================== */

/* ── VHC-Container ── */
main {
    flex: 1;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 20px 40px;
}

.muehle-wrap {
    /* Breiter als der Grund-Look (680) — die seitlichen Stein-Panels brauchen
       Platz neben dem 640er-Brett (analog Schach-Pilot). Start-/Join-Karte werden
       separat auf 680 gedeckelt, damit ihr Look unverändert bleibt. */
    width: min(100%, 800px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ── 1. Startbildschirm (Modus-Wahl) ── */
#start-screen {
    position: relative; /* Anker für den animierten Hintergrund (.mu-start-bg) */
    overflow: hidden;   /* animierten BG an den runden Ecken beschneiden */
    width: 100%;
    max-width: 680px;   /* Grund-Look trotz breiterem .muehle-wrap (Stein-Panels) */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
    padding: 40px 24px 48px;
    background: rgba(6, 8, 18, 0.88);
    border: 1px solid var(--border, rgba(0, 245, 255, 0.2));
    border-top: 2px solid #00f5ff;
    border-radius: 8px;
    box-shadow: 0 0 50px rgba(0, 245, 255, 0.08);
}

/* ── Lebendiger Startscreen (Optik-Review, 1:1 aus dem Schach-Piloten) ──
   Dezenter, rein per CSS animierter Hintergrund + Icon-Puls + kräftigerer
   Button-Neon. Nur background-position / transform / filter / opacity werden
   animiert (GPU-freundlich, kein JS-Loop). prefers-reduced-motion schaltet die
   Animationen am Dateiende ab. */
.mu-start-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: inherit;
    /* HG-Bild statt Karo (Optik-Review): formatfüllend + Abdunkel-Layer für Textlesbarkeit. */
    background: linear-gradient(180deg, rgba(6, 8, 18, 0.56), rgba(6, 8, 18, 0.85)), url('../game-images/muehle/muehle-hg.webp') center / cover no-repeat;
}

/* Karo-Muster deaktiviert — durch das eigene HG-Bild (muehle-hg.png) ersetzt (Optik-Review).
   @keyframes mu-bg-drift bleibt ungenutzt stehen. */
.mu-start-bg::before {
    content: none;
}

/* Sanfte Glüh-Schleier (Cyan + Magenta-Akzent), langsam pulsierend — gibt Tiefe.
   Akzentfarbe leicht spielthematisch (Mühle-Magenta), gleicher Charakter wie Schach. */
.mu-start-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(closest-side at 22% 26%, rgba(0, 245, 255, 0.16), transparent),
        radial-gradient(closest-side at 80% 74%, rgba(255, 60, 210, 0.10), transparent);
    animation: mu-bg-glow 9s ease-in-out infinite;
}

@keyframes mu-bg-drift {
    from { background-position: 0 0, 32px 32px; }
    to   { background-position: 64px 64px, 96px 96px; }
}

@keyframes mu-bg-glow {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 0.9; }
}

/* Startscreen-Inhalt über den Hintergrund heben. Der BG ist positioniert
   (z-index:0); ungepositionierte Geschwister würden sonst inkonsistent stapeln
   → Inhalt (inkl. der Modus-/Sub-Ansichten) explizit auf z-index:1. */
#start-screen > *:not(.mu-start-bg) {
    position: relative;
    z-index: 1;
}

.start-piece {
    height: 110px;
    width: auto;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55)); /* statischer Fallback (reduced-motion) */
    /* Icon lebendiger: sanftes Schweben + pulsierender Neon-Glow (rein CSS). */
    animation: mu-piece-idle 4.2s ease-in-out infinite;
}

@keyframes mu-piece-idle {
    0%, 100% {
        transform: translateY(0);
        filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 10px rgba(0, 245, 255, 0.25));
    }
    50% {
        transform: translateY(-8px);
        filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 24px rgba(0, 245, 255, 0.5));
    }
}

#start-screen h1 {
    font-family: 'Orbitron', monospace;
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    color: #eaf6ff;
    text-shadow: 0 0 18px rgba(0, 245, 255, 0.35);
    margin: 0;
}

.mu-tagline {
    font-size: 0.95rem;
    color: #8fa8c8;
    margin: 0 0 10px;
}

.mode-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: min(100%, 320px);
}

.mu-mode-btn {
    font-family: 'Orbitron', monospace;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #00f5ff;
    background: rgba(0, 245, 255, 0.06);
    border: 1px solid #00f5ff;
    border-radius: 6px;
    padding: 15px 18px;
    cursor: pointer;
    /* Mehr Präsenz (wie Schach-Pilot): neutrale Tiefe im Ruhezustand + Neon-Textglow
       in der jeweiligen Button-Farbe (currentColor greift auch bei den Level-Buttons). */
    text-shadow: 0 0 12px currentColor;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
}

.mu-mode-btn:hover:not(:disabled) {
    background: rgba(0, 245, 255, 0.16);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2), 0 0 26px rgba(0, 245, 255, 0.5);
    transform: translateY(-2px);
}

/* ── KI-Stufenwahl (Unteransicht des Startbildschirms, #ki-level-select) ──
   Basis ist .mu-mode-btn; die Stufen sind farbcodiert (Ampel, D):
   Leicht = Grün, Mittel = Amber, Schwer = Rot. Jeder Button trägt einen
   Untertext (.mu-level-sub) → Button wird zur zweizeiligen Spalte. */
.mu-level-label {
    font-family: 'Orbitron', monospace;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #8fa8c8;
    margin: 0 0 2px;
}

/* Ampel-Farbcodierung der Stufen (D). Leicht = Grün (neuer Override),
   Mittel = Amber, Schwer = Rot (vorher Magenta — bewusste Theme-Abweichung,
   rein optisch, wie im Schach-Piloten). */
#level-leicht {
    color: #3ff2a0;
    border-color: #3ff2a0;
    background: rgba(63, 242, 160, 0.05);
}

#level-leicht:hover:not(:disabled) {
    background: rgba(63, 242, 160, 0.14);
    box-shadow: 0 0 18px rgba(63, 242, 160, 0.3);
}

#level-mittel {
    color: #ffd24a;
    border-color: #ffd24a;
    background: rgba(255, 210, 74, 0.05);
}

#level-mittel:hover:not(:disabled) {
    background: rgba(255, 210, 74, 0.14);
    box-shadow: 0 0 18px rgba(255, 210, 74, 0.3);
}

#level-schwer {
    color: #ff5b6e;
    border-color: #ff5b6e;
    background: rgba(255, 91, 110, 0.05);
}

#level-schwer:hover:not(:disabled) {
    background: rgba(255, 91, 110, 0.14);
    box-shadow: 0 0 18px rgba(255, 91, 110, 0.3);
}

/* Stufen-Button = Spalte aus Hauptlabel + Untertext. Das Hauptlabel erbt die
   Stufenfarbe (Orbitron/uppercase von .mu-mode-btn), der Untertext ist neutral,
   nicht-versal und in Lora (Lesbarkeit vor Effekt). */
.mu-level-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    line-height: 1.15;
}

.mu-level-main {
    display: block;
}

.mu-level-sub {
    font-family: 'Lora', serif;
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: #8fa8c8;
}

/* ── Hotseat-Namenswahl (Unteransicht #hotseat-name-select, A3) ── */
.mu-name-label {
    font-family: 'Lora', serif;
    font-size: 0.72rem;
    color: #8fa8c8;
    text-align: left;
    margin: 4px 0 -6px;
}

.mu-name-input {
    font-family: 'Orbitron', monospace;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    color: #eaf6ff;
    background: #0a1220;
    border: 1px solid #1a2a4a;
    border-radius: 6px;
    padding: 12px 14px;
    transition: border-color 0.2s;
}

.mu-name-input:focus {
    outline: none;
    border-color: rgba(0, 245, 255, 0.5);
}

.mu-name-input:read-only {
    opacity: 0.75;
}

.mu-back-btn {
    font-family: 'Orbitron', monospace;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8fa8c8;
    background: transparent;
    border: 1px solid #2a3a55;
    border-radius: 6px;
    padding: 10px 16px;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.mu-back-btn:hover {
    color: #a0e8ff;
    border-color: #00f5ff;
    background: rgba(0, 245, 255, 0.06);
}

/* ── 2. Spielbildschirm ── */
#game-screen {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

#status-bar {
    min-height: 1.6em; /* verhindert Layout-Springen bei Textwechsel */
    display: flex;
    align-items: center;
    justify-content: center;
}

#status-text {
    font-family: 'Orbitron', monospace;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #a0e8ff;
    text-shadow: 0 0 12px rgba(0, 245, 255, 0.3);
    text-align: center;
}

/* Status, während die KI rechnet ("Computer denkt …") — Klasse setzt muehle.js */
#status-text.thinking {
    color: #ff99ee;
    text-shadow: 0 0 12px rgba(255, 60, 210, 0.35);
    animation: mu-think 1.1s ease-in-out infinite;
}

@keyframes mu-think {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

.board-wrap {
    position: relative; /* Bezug fürs End-Overlay */
    width: min(100%, 640px);
    /* A4: DOM-Container-Rahmen um das Brett (Werte von #start-screen übernommen).
       KEIN padding — sonst verschöben sich die inset:0-Overlays (#end-overlay/
       #mp-end-overlay) gegen den Canvas. Border/Shadow/Background sind unkritisch
       (Canvas + Overlays leben beide in der Content-Box, bleiben deckungsgleich). */
    background: rgba(6, 8, 18, 0.88);
    border: 1px solid var(--border, rgba(0, 245, 255, 0.2));
    border-top: 2px solid #00f5ff;
    border-radius: 8px;
    box-shadow: 0 0 50px rgba(0, 245, 255, 0.08);
}

#muehle-canvas {
    display: block;
    width: 100%;
    height: auto; /* Canvas ist quadratisch -> Seitenverhältnis bleibt */
    touch-action: manipulation; /* kein Doppeltipp-Zoom */
    border-radius: 6px;
}

/* ── Stein-Panels SEITLICH neben dem Brett (B, Doppel-Anzeige) ──
   Analog zum Schach-Piloten (.sc-board-row/.sc-cap-side), aber je Panel ZWEI
   beschriftete Gruppen: „Vorrat" (noch zu setzende Steine = core.hand[p]) und
   „Verloren" (geschlagene Steine = 9 − hand − Steine-auf-dem-Brett). Die Panels
   (#panel-b/#panel-w) sind SCHWESTERN von .board-wrap, damit die inset:0-Overlays
   nur das Brett abdecken.
   MOBIL-FIRST: gestapelt (Panel oben · Brett · Panel unten). Ab 680px Breite:
   side-by-side, Brett dazwischen (Media-Query unten). */
.mu-board-row {
    display: flex;
    flex-direction: column; /* mobil: gestapelt */
    align-items: center;
    gap: 8px;
    width: 100%;
}

/* Panel: hellerer Grund + Rahmen → hebt sich klar vom dunklen Brett ab. */
.mu-cap-side {
    width: min(100%, 640px);
    box-sizing: border-box;
    padding: 8px 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 16px;
    background: rgba(18, 28, 48, 0.72);
    border: 1px solid rgba(0, 245, 255, 0.18);
    border-radius: 8px;
    box-shadow: inset 0 0 18px rgba(0, 245, 255, 0.04);
}

/* Panel-Überschrift = Farbe (Weiß/Schwarz) — gibt dem Panel Kontext. */
.mu-cap-title {
    font-family: 'Orbitron', monospace;
    font-size: 0.78rem;   /* B7 (2026-07-09): 0.62rem war unter dem Projekt-Richtwert
                              (Sekundärtext ≥0.66rem, docs/lessons-learned.md) */
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #a0e8ff;
    width: 100%;
    text-align: center;
}

/* Eine Gruppe = Label + Stein-Reihe. Vorrat und Verloren klar getrennt. */
.mu-cap-group {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
}

.mu-cap-label {
    font-family: 'Lora', serif;
    font-size: 0.74rem;   /* B7 (2026-07-09): 0.66rem war Projekt-Minimum, in der
                              schmalen Panel-Spalte trotzdem "katastrophal winzig" gemeldet */
    color: #8fa8c8;
    white-space: nowrap;
}

.mu-cap-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-height: 28px;
}

.mu-cap-piece {
    height: 24px;
    width: auto;
    /* Heller Kontur-Schein pro Stein: macht auch SCHWARZE Steine auf dunklem
       Panel-Grund klar sichtbar (Silhouette bekommt eine helle Kante), ohne die
       weißen zu stören (identisches Prinzip wie .sc-cap-piece im Piloten). */
    filter:
        drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.85))
        drop-shadow(0 0 4px rgba(255, 255, 255, 0.35))
        drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

/* Ab 680px Breite: Panels links/rechts, Brett dazwischen. Panels stapeln ihre
   Gruppen vertikal und stehen (via align-items:stretch) so hoch wie das Brett.
   .board-wrap bleibt align-self:flex-start → wird NICHT gestreckt, sonst liefen
   die inset:0-Overlays über die Canvas-Höhe hinaus. */
@media (min-width: 680px) {
    .mu-board-row {
        flex-direction: row;
        align-items: stretch;
        justify-content: center;
        gap: 12px;
    }
    .board-wrap {
        flex: 0 1 640px;
        min-width: 0;
        align-self: flex-start;
    }
    .mu-cap-side {
        flex: 0 0 auto;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        width: clamp(84px, 15vw, 108px);
        padding: 12px 8px;
        gap: 12px;
    }
    .mu-cap-group {
        flex-direction: column;
        gap: 4px;
        min-height: 0;
    }
    .mu-cap-row {
        justify-content: center;
    }
}

/* ── Steuerleiste ── */
.ctrl-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.ctrl-row button {
    font-family: 'Orbitron', monospace;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 6px;
    padding: 11px 18px;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
    background: rgba(0, 245, 255, 0.06);
    border: 1px solid #00f5ff;
    color: #00f5ff;
}

.ctrl-row button:hover {
    background: rgba(0, 245, 255, 0.16);
    box-shadow: 0 0 14px rgba(0, 245, 255, 0.3);
}

#btn-resign {
    background: rgba(255, 0, 110, 0.06);
    border-color: #ff006e;
    color: #ff5b9e;
}

#btn-resign:hover {
    background: rgba(255, 0, 110, 0.16);
    box-shadow: 0 0 14px rgba(255, 0, 110, 0.3);
}

/* ── Partie-Ende-Overlay (über dem Brett) ── */
#end-overlay {
    position: absolute;
    inset: 0;
    display: flex; /* JS schaltet nur display none/flex */
    align-items: center;
    justify-content: center;
    background: rgba(4, 6, 14, 0.78);
    backdrop-filter: blur(4px);
    border-radius: 6px;
    z-index: 5;
}

.end-box {
    background: #0f1829;
    border: 1px solid #1a2a4a;
    border-top: 2px solid #00f5ff;
    border-radius: 6px;
    box-shadow: 0 0 60px rgba(0, 245, 255, 0.12);
    padding: 28px 26px;
    max-width: 86%;
    text-align: center;
}

#end-title {
    font-family: 'Orbitron', monospace;
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #00f5ff;
    margin-bottom: 10px;
}

#end-text {
    font-size: 0.9rem;
    color: #c8d8f0;
    line-height: 1.55;
    margin-bottom: 20px;
}

.end-btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.end-btns button {
    font-family: 'Orbitron', monospace;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: rgba(0, 245, 255, 0.06);
    border: 1px solid #00f5ff;
    color: #00f5ff;
    border-radius: 6px;
    padding: 11px 16px;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
}

.end-btns button:hover {
    background: rgba(0, 245, 255, 0.16);
    box-shadow: 0 0 14px rgba(0, 245, 255, 0.3);
}

/* ── Bestätigungs-Modal ── */
.mu-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex; /* JS schaltet nur display none/flex */
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(6px);
}

.mu-modal-box {
    background: #0f1829;
    border: 1px solid #1a2a4a;
    border-top: 2px solid #00f5ff;
    border-radius: 6px;
    box-shadow: 0 0 60px rgba(0, 245, 255, 0.08);
    max-width: 400px;
    width: 92%;
    padding: 28px 26px;
    text-align: center;
}

.mu-modal-title {
    font-family: 'Orbitron', monospace;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #00f5ff;
    margin-bottom: 8px;
}

.mu-modal-text {
    font-size: 0.88rem;
    color: #c8d8f0;
    line-height: 1.6;
    margin: 6px 0 22px;
}

.mu-modal-btns {
    display: flex;
    gap: 12px;
}

.mu-modal-btns button {
    flex: 1;
    font-family: 'Orbitron', monospace;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 11px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
}

#confirm-cancel {
    background: rgba(0, 245, 255, 0.06);
    border: 1px solid #00f5ff;
    color: #00f5ff;
}

#confirm-cancel:hover {
    background: rgba(0, 245, 255, 0.16);
}

#confirm-ok {
    background: transparent;
    border: 1px solid #ff006e;
    color: #ff5b9e;
}

#confirm-ok:hover {
    background: rgba(255, 0, 110, 0.14);
    box-shadow: 0 0 14px rgba(255, 0, 110, 0.3);
}

/* ── Mobil ── */
@media (max-width: 480px) {
    main {
        padding: 18px 10px 32px;
    }

    #start-screen h1 {
        font-size: 1.5rem;
    }

    .start-piece {
        height: 84px;
    }

    .ctrl-row button {
        font-size: 0.66rem;
        padding: 10px 12px;
    }
}

/* ==========================================================================
   ONLINE-MULTIPLAYER (TODO #17) — additive; berührt Hotseat/vsKI-Styles nicht.
   Neon-Cyan-Aesthetik wie der Rest von muehle.css (mu-Präfix). Nutzt die
   bereits vorhandenen .mu-modal-*-Basisstile für Einladen-/Melden-Modal.
   ========================================================================== */

/* ── Online-Einstieg auf dem Startbildschirm ── */
.mu-online-btn {
    color: #ff99ee;
    border-color: #ff3cd2;
    background: rgba(255, 60, 210, 0.06);
}
.mu-online-btn:hover:not(:disabled) {
    background: rgba(255, 60, 210, 0.16);
    box-shadow: 0 0 18px rgba(255, 60, 210, 0.3);
}

/* ── Beitritts-Vorschau (eingeladener Gast) — wie der Startbildschirm ── */
#join-screen {
    width: 100%;
    max-width: 680px;   /* wie #start-screen: Grund-Look trotz breiterem .muehle-wrap */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
    padding: 40px 24px 48px;
    background: rgba(6, 8, 18, 0.88);
    border: 1px solid rgba(0, 245, 255, 0.2);
    border-top: 2px solid #00f5ff;
    border-radius: 8px;
    box-shadow: 0 0 50px rgba(0, 245, 255, 0.08);
}
#join-screen h1 {
    font-family: 'Orbitron', monospace;
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    color: #eaf6ff;
    text-shadow: 0 0 18px rgba(0, 245, 255, 0.35);
    margin: 0;
}
.mu-join-invite {
    font-size: 0.95rem;
    color: #c8d8f0;
    line-height: 1.5;
    max-width: 360px;
}
.mu-join-hint {
    min-height: 1.2em;
    font-size: 0.85rem;
    color: #ff5b9e;
}

/* ── MP-Ende-Overlay (Position wie das lokale #end-overlay) ── */
#mp-end-overlay {
    position: absolute;
    inset: 0;
    display: none; /* JS schaltet none/flex */
    align-items: center;
    justify-content: center;
    background: rgba(4, 6, 14, 0.78);
    backdrop-filter: blur(4px);
    border-radius: 6px;
    z-index: 6;
}
#mp-end-title {
    font-family: 'Orbitron', monospace;
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #00f5ff;
    margin-bottom: 10px;
}
#mp-end-text {
    font-size: 0.95rem;
    color: #eaf6ff;
    line-height: 1.55;
    margin-bottom: 14px;
}

/* ── Serien-Stand + Rematch-Abstimmung ── */
.mu-series {
    color: #a0e8ff;
    font-family: 'Orbitron', monospace;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 14px;
}
.mu-rematch { margin-bottom: 16px; }
.mu-rematch-q {
    color: #ffd24a;
    font-family: 'Orbitron', monospace;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
}
.mu-rematch-btns {
    display: flex;
    gap: 12px;
    justify-content: center;
}
.mu-rematch-btn {
    flex: 1;
    max-width: 8rem;
    font-family: 'Orbitron', monospace;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 10px 14px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid;
    transition: background 0.2s, box-shadow 0.2s;
}
.mu-rematch-yes {
    background: rgba(0, 245, 255, 0.08);
    border-color: #00f5ff;
    color: #00f5ff;
}
.mu-rematch-yes:hover:not(:disabled) {
    background: rgba(0, 245, 255, 0.18);
    box-shadow: 0 0 14px rgba(0, 245, 255, 0.3);
}
.mu-rematch-no {
    background: rgba(255, 0, 110, 0.08);
    border-color: #ff006e;
    color: #ff5b9e;
}
.mu-rematch-no:hover:not(:disabled) {
    background: rgba(255, 0, 110, 0.18);
    box-shadow: 0 0 14px rgba(255, 0, 110, 0.3);
}
.mu-rematch-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.mu-rematch-status {
    margin-top: 10px;
    min-height: 1.1em;
    color: #a0e8ff;
    font-size: 0.85rem;
}

/* ── Session-gebundener Chat (Slide-Panel links) ── */
#mu-chat-panel.mu-chat {
    position: fixed; left: 0; top: 50%;
    transform: translateY(-50%);
    width: min(300px, calc(100vw - 44px));
    z-index: 1500;
    border: 1px solid #1a2a4a; border-left: none;
    border-radius: 0 10px 10px 0;
    background: #060c18; pointer-events: auto;
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
    transition: transform 0.28s ease;
}
#mu-chat-panel.mu-chat.collapsed { transform: translateY(-50%) translateX(-100%); }
.mu-chat-toggle {
    position: absolute; top: 50%; left: 100%;
    transform: translateY(-50%);
    width: 22px; height: 62px;
    border: 1px solid #1a2a4a; border-left: none;
    border-radius: 0 8px 8px 0;
    background: #0a1220; color: #00f5ff;
    cursor: pointer; font-size: 0.95rem; line-height: 1;
    display: flex; align-items: center; justify-content: center;
}
.mu-chat-toggle::before { content: '\2039'; }
#mu-chat-panel.mu-chat.collapsed .mu-chat-toggle::before { content: '\203A'; }
.mu-chat-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 8px 14px; border-bottom: 1px solid #1a2a4a;
    font-family: 'Orbitron', monospace; font-size: 0.7rem;
    font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #00f5ff;
}
.mu-chat-note { font-family: inherit; font-size: 0.66rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: #8b9bb0; }
.mu-chat-messages { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; min-height: 140px; max-height: 220px; overflow-y: auto; }
.mu-chat-msg { max-width: 85%; padding: 6px 10px; border-radius: 8px; }
.mu-chat-msg.mine   { align-self: flex-end; margin-left: auto; background: rgba(0, 245, 255, 0.10); border: 1px solid rgba(0, 245, 255, 0.45); }
.mu-chat-msg.theirs { align-self: flex-start; background: rgba(255, 60, 210, 0.08); border: 1px solid rgba(255, 60, 210, 0.40); }
.mu-chat-msg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 3px; }
.mu-chat-msg-sender { font-family: 'Orbitron', monospace; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.mu-chat-msg.mine   .mu-chat-msg-sender { color: #00f5ff; }
.mu-chat-msg.theirs .mu-chat-msg-sender { color: #ff99ee; }
.mu-chat-msg-time { font-size: 0.58rem; color: #6b7a90; white-space: nowrap; }
.mu-chat-msg-text { font-size: 0.82rem; color: #dfe8f4; word-wrap: break-word; white-space: pre-wrap; }
.mu-chat-input-row { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid #1a2a4a; }
.mu-chat-field {
    flex: 1; min-width: 0; background: #0a1220; border: 1px solid #1a2a4a;
    border-radius: 6px; color: #dfe8f4; padding: 8px 10px; font-size: 0.82rem; font-family: inherit;
}
.mu-chat-field:focus { outline: none; border-color: rgba(0, 245, 255, 0.5); }
.mu-chat-field:disabled { opacity: 0.5; }
.mu-chat-send-btn {
    flex: 0 0 auto; background: rgba(0, 245, 255, 0.06); border: 1px solid rgba(0, 245, 255, 0.4);
    color: #00f5ff; border-radius: 6px; padding: 8px 18px; cursor: pointer;
    font-family: 'Orbitron', monospace; font-size: 0.68rem; font-weight: 700;
    letter-spacing: 0.05em; text-transform: uppercase; transition: background 0.15s, border-color 0.15s;
}
.mu-chat-send-btn:hover:not(:disabled) { background: rgba(0, 245, 255, 0.12); border-color: #00f5ff; }
.mu-chat-send-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.mu-chat-report {
    display: block; width: fit-content; margin: 9px auto 11px;
    padding: 5px 16px; border: 1px solid rgba(255, 107, 107, 0.4); border-radius: 999px;
    background: transparent; color: #d98a8a; cursor: pointer;
    font-family: inherit; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em;
    text-align: center; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mu-chat-report:hover { background: rgba(255, 107, 107, 0.12); border-color: rgba(255, 107, 107, 0.7); color: #ff9a9a; }

/* ── Einladen-/Melden-Modal-Extras (nutzt die vorhandenen .mu-modal-*-Basisstile) ── */
.mu-modal-list { display: flex; flex-direction: column; gap: 6px; margin: 14px 0; text-align: left; }
.mu-pick { display: flex; align-items: center; gap: 10px; padding: 9px 12px; width: 100%; text-align: left; cursor: pointer; color: #dfe8f4; background: rgba(255, 255, 255, 0.03); border: 1px solid #1a2a4a; border-radius: 8px; transition: border-color 0.15s, background 0.15s; }
.mu-pick:hover { border-color: rgba(0, 245, 255, 0.4); }
.mu-pick.is-sel { border-color: #00f5ff; background: rgba(0, 245, 255, 0.08); }
.mu-pick-name { font-size: 0.85rem; font-weight: 600; }
.mu-pick-online { width: 8px; height: 8px; border-radius: 50%; background: #00ff88; margin-left: auto; }
.mu-modal-hint { font-size: 0.76rem; color: #6b7a90; padding: 6px 2px; }
.mu-modal-err { font-size: 0.78rem; color: #ff4d7a; padding: 6px 2px; }
.mu-report-field {
    width: 100%; margin-top: 4px; box-sizing: border-box;
    background: #0a1220; border: 1px solid #1a2a4a; border-radius: 6px;
    color: #dfe8f4; padding: 8px 10px; font-size: 0.85rem; font-family: inherit; resize: vertical;
}
.mu-report-field:focus { outline: none; border-color: rgba(0, 245, 255, 0.5); }

/* Button-Farben der Einladen-/Melden-Modals (Basis .mu-modal-btns button greift). */
#muInviteCancel, #muReportCancel {
    background: transparent; border: 1px solid #2a3a55; color: #8fa8c8;
}
#muInviteCancel:hover, #muReportCancel:hover { color: #a0e8ff; border-color: #00f5ff; }
#muInviteSubmit, #muReportSubmit {
    background: rgba(0, 245, 255, 0.06); border: 1px solid #00f5ff; color: #00f5ff;
}
#muInviteSubmit:hover:not(:disabled), #muReportSubmit:hover:not(:disabled) { background: rgba(0, 245, 255, 0.16); }
#muInviteSubmit:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Farbwahl (MP) — Host im Einladen-Modal (#muInviteColors) + Gast im
   Beitritts-Screen (#join-colors). Zwei Optionen (Steinbild + Label). Gewählt =
   Cyan-Rahmen (.is-sel); die schon vergebene Farbe wird gesperrt (.is-locked/
   :disabled) und mit „vergeben" markiert. Baut muehle.js (buildColorGrid). ── */
.mu-color-choice { width: min(100%, 320px); margin: 4px auto 2px; }
.mu-color-choice-label {
    font-family: 'Orbitron', monospace;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #8fa8c8;
    margin-bottom: 10px;
    text-align: center;
}
.mu-color-grid { display: flex; gap: 12px; justify-content: center; }
.mu-color-option {
    flex: 1 1 0;
    max-width: 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 10px;
    cursor: pointer;
    background: rgba(0, 245, 255, 0.04);
    border: 1px solid #1a2a4a;
    border-radius: 8px;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.mu-color-option:hover:not(:disabled) { border-color: rgba(0, 245, 255, 0.5); }
.mu-color-option.is-sel {
    border-color: #00f5ff;
    background: rgba(0, 245, 255, 0.10);
    box-shadow: 0 0 16px rgba(0, 245, 255, 0.2);
}
.mu-color-option:disabled,
.mu-color-option.is-locked {
    opacity: 0.42;
    cursor: not-allowed;
    filter: grayscale(0.5);
}
.mu-color-stone {
    height: 46px;
    width: auto;
    /* helle Kontur wie die Panel-Steine → schwarzer Stein bleibt auf dunklem Grund sichtbar */
    filter:
        drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.85))
        drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}
.mu-color-cap {
    font-family: 'Orbitron', monospace;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #a0e8ff;
}
.mu-color-taken {
    font-family: 'Lora', serif;
    font-size: 0.6rem;
    letter-spacing: normal;
    text-transform: none;
    color: #ff8fbf;
}

/* ── Barrierefreiheit: Bewegung reduzieren ──
   Schaltet die dekorativen Startscreen-Animationen (Hintergrund-Drift/-Glow,
   Icon-Schweben) ab; statische Fallbacks (Basis-filter/-Farben) bleiben. */
@media (prefers-reduced-motion: reduce) {
    .mu-start-bg::before,
    .mu-start-bg::after,
    .start-piece {
        animation: none;
    }
}