/* =====================================================
   MULTIPLAYER-LOBBY (gemeinsam für Miro + Mirelons Jagd)
   Bewusst schlicht gehalten und an den bestehenden Bärental-/
   Pergament-Look angelehnt statt eigenständigen neuen Stil zu
   erfinden. Kein Chat, kein Texteingabefeld außer dem Raumcode.
   ===================================================== */

.mp-panel {
    width: min(92vw, 460px);
    margin: 40px auto;
    padding: 22px 20px;
    border: 3px solid #8b572c;
    border-radius: 20px;
    background: linear-gradient(150deg, #fff8e4, #ead29b);
    box-shadow: 0 18px 40px rgba(35, 18, 8, 0.35), inset 0 0 0 3px #f7d574;
    text-align: center;
    color: #4a2f1c;
}

.mp-panel h1 { margin: 0 0 10px; font-size: 1.6rem; }
.mp-panel p { margin: 0 0 14px; color: #6b4a2b; font-size: 0.9rem; }

.mp-mode-buttons { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }

.mp-online-actions { display: flex; flex-direction: column; gap: 12px; margin-bottom: 10px; }
.mp-join-row { display: flex; gap: 8px; }
.mp-join-row input {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border: 2px solid #8b572c;
    border-radius: 10px;
    font: 900 1.1rem/1 system-ui, sans-serif;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.mp-error { color: #a02323; font-weight: 700; }

.mp-room-code-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 0.95rem;
}
.mp-room-code-row strong {
    font-size: 1.6rem;
    letter-spacing: 0.12em;
    padding: 4px 12px;
    border: 2px dashed #8b572c;
    border-radius: 10px;
    background: #fffaf0;
}
#mp-copy-code {
    border: 2px solid #8b572c;
    border-radius: 10px;
    background: #fff;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 1rem;
}

.mp-seat-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.mp-seat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    border: 2px solid #b98342;
    border-radius: 12px;
    background: #fff9e9;
    font-weight: 700;
    flex-wrap: wrap;
}
.mp-seat.is-open { color: #8a745a; font-style: italic; font-weight: 600; }
.mp-tag {
    padding: 2px 9px;
    border-radius: 999px;
    background: #e4d6bb;
    font-size: 0.72rem;
    font-weight: 800;
}
.mp-tag.is-ready { background: #bfe3c4; }
.mp-host-tag { background: #f3c75e; }
.mp-offline-tag { background: #f0b7b7; }
.mp-seat-ai-btn {
    border: 2px solid #774723;
    border-radius: 9px;
    background: #fff;
    padding: 4px 9px;
    font-size: 0.72rem;
    font-weight: 800;
    cursor: pointer;
}

.mp-status { margin: 8px 0; font-weight: 700; color: #6b4a2b; min-height: 22px; }

.mp-banner {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 60;
    padding: 10px 18px;
    border: 2px solid #8b572c;
    border-radius: 14px;
    background: #fff4d9f2;
    color: #422817;
    font-weight: 800;
    text-align: center;
    box-shadow: 0 10px 24px rgba(20, 10, 5, 0.4);
    max-width: min(90vw, 460px);
}

@media (max-width: 480px) {
    .mp-panel { margin: 20px auto; padding: 18px 14px; }
    .mp-room-code-row strong { font-size: 1.3rem; }
}