/* ================================================================
   MYSTERADO – Duel Lobby Stylesheet (duel.css)
   Design-Sprache an landing.css angelehnt: Schwarz, Gold, mystisch.
   Variablen aus :root von landing.css werden mitverwendet.
   ================================================================ */

/* ── Globaler Schutz: [hidden] muss IMMER unsichtbar sein ────────
   Sonst überschreiben spätere display:flex/grid-Regeln das HTML-Attribut. */
[hidden] { display: none !important; }

/* ── Duel: Turn-Indikator (Etappe 2b.1) ───────────────────────── */
body.mode-duel.duel-opp-turn #btn-end-phase.duel-disabled {
    /* Visuelles Feedback: Button ausgegraut, wenn nicht am Zug.
       Inline-Styles in duel-actions.js setzen opacity/cursor; hier
       nur ein subtiler Outline-Effekt für die Aufmerksamkeit. */
    box-shadow: none !important;
    pointer-events: auto;  /* Klicks zeigen "Du bist nicht am Zug" Hint */
}

body.mode-duel.duel-my-turn #game-header::before,
body.mode-duel.duel-opp-turn #game-header::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    z-index: 10;
    pointer-events: none;
    transition: background 0.4s;
}
body.mode-duel.duel-my-turn  #game-header::before { background: linear-gradient(90deg, transparent, var(--tc-player, #3a6fb0), transparent); box-shadow: 0 0 14px var(--tc-player, #3a6fb0); }
body.mode-duel.duel-opp-turn #game-header::before { background: linear-gradient(90deg, transparent, var(--tc-opponent, #a25b2a), transparent); box-shadow: 0 0 14px var(--tc-opponent, #a25b2a); opacity: 0.6; }

body.mode-duel #game-header { position: relative; }

/* ── Share-Icons (offizielle Logo-Anlehnung als Inline-SVG) ────── */
.dl-share-icon-svg, .ms-invite-share-svg {
    width: 16px; height: 16px;
    display: inline-block;
    vertical-align: middle;
}
.dl-share-link.dl-share-wa,
.ms-invite-share-link.ms-share-wa { color: #25D366; }
.dl-share-link.dl-share-tg,
.ms-invite-share-link.ms-share-tg { color: #2AABEE; }
.dl-share-link.dl-share-mail,
.ms-invite-share-link.ms-share-mail { color: var(--ms-gold-light, #f0d27b); }
.dl-share-link:hover .dl-share-icon-svg,
.ms-invite-share-link:hover .ms-invite-share-svg { filter: drop-shadow(0 0 6px currentColor); }

/* ════════════════════════════════════════════════════════════════
   1) Invite-Bereich auf der Landing-Page (index.php)
   ════════════════════════════════════════════════════════════════ */

.ms-invite-init {
    display: flex; justify-content: center;
    margin-bottom: 1rem;
}
.ms-invite-loading {
    display: flex; align-items: center; justify-content: center; gap: 0.7rem;
    padding: 1rem 0;
    color: var(--ms-text-soft, #b8b8c8);
    font-size: 1rem; letter-spacing: 0.04em;
}
.ms-invite-spinner {
    width: 22px; height: 22px;
    border: 2px solid rgba(212, 173, 69, 0.18);
    border-top-color: var(--ms-gold, #d4ad45);
    border-radius: 50%;
    animation: dlSpin 0.9s linear infinite;
    display: inline-block;
}
.ms-invite-result {
    display: flex; flex-direction: column; gap: 1rem;
    animation: dlFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.ms-invite-share {
    display: flex; gap: 0.7rem; flex-wrap: wrap; justify-content: center;
}
.ms-invite-share-link {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    background: rgba(212, 173, 69, 0.06);
    border: 1px solid rgba(212, 173, 69, 0.2);
    border-radius: 4px;
    color: var(--ms-text-soft, #b8b8c8);
    font-size: 0.85rem; letter-spacing: 0.05em;
    text-decoration: none;
    transition: all 0.25s;
}
.ms-invite-share-link:hover {
    background: rgba(212, 173, 69, 0.12);
    border-color: var(--ms-border-gold, rgba(212,173,69,0.35));
    color: var(--ms-gold-light, #f0d27b);
}
#ms-invite-open-btn { align-self: center; }

/* ════════════════════════════════════════════════════════════════
   2) Lobby-Seite (duel-lobby.php)
   ════════════════════════════════════════════════════════════════ */

/* Body-Klasse aus duel-lobby.php – verhindert Konflikte mit anderen Seiten */
body.duel-lobby-page {
    min-height: 100vh;
    background: var(--ms-bg, #050508);
    color: var(--ms-text, #e8e8f0);
    font-family: var(--ms-font-body, 'Cormorant Garamond', Georgia, serif);
    overflow-x: hidden;
}

body.duel-lobby-page #particle-canvas {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
}

/* ── Hauptcontainer ──────────────────────────────────────────── */
.dl-main {
    position: relative; z-index: 2;
    min-height: calc(100vh - 80px);
    padding: clamp(3.5rem, 7vh, 6rem) 1.2rem 4rem;
    display: flex; align-items: flex-start; justify-content: center;
}

/* ══ LOADING ══ */
.dl-loading {
    text-align: center; color: var(--ms-text-soft);
}
.dl-loading p { margin-top: 1.2rem; font-size: 1.05rem; letter-spacing: 0.05em; }
.dl-spinner {
    width: 56px; height: 56px; margin: 0 auto;
    border: 2px solid rgba(212, 173, 69, 0.18);
    border-top-color: var(--ms-gold, #d4ad45);
    border-radius: 50%;
    animation: dlSpin 0.9s linear infinite;
}
@keyframes dlSpin { to { transform: rotate(360deg); } }

/* ══ ERROR ══ */
.dl-error {
    text-align: center; max-width: 480px;
    padding: 2.4rem 2rem;
    background: rgba(15, 15, 26, 0.85);
    border: 1px solid var(--ms-border, rgba(212,173,69,0.18));
    border-radius: 6px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6);
}
.dl-error-icon {
    font-size: 3rem; color: #cc4040;
    margin-bottom: 0.8rem;
    text-shadow: 0 0 24px rgba(204,64,64,0.5);
}
.dl-error-title {
    font-family: var(--ms-font-heading); font-size: 1.6rem; font-weight: 600;
    color: var(--ms-gold, #d4ad45); margin-bottom: 0.8rem;
    letter-spacing: 0.06em;
}
.dl-error-msg {
    color: var(--ms-text-soft); margin-bottom: 1.6rem; line-height: 1.5;
}

/* ══ ROOM (Hauptansicht) ══ */
.dl-room {
    width: 100%; max-width: 1100px;
    display: flex; flex-direction: column; gap: 2rem;
    animation: dlFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes dlFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
}

.dl-header { text-align: center; }
.dl-eyebrow {
    display: inline-block;
    font-family: var(--ms-font-heading); font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.32em; text-transform: uppercase;
    color: var(--ms-gold, #d4ad45);
    padding: 0.35rem 1.2rem;
    border: 1px solid rgba(212,173,69,0.35); border-radius: 99px;
    background: rgba(212,173,69,0.04);
    margin-bottom: 1rem;
}
.dl-title {
    font-family: var(--ms-font-heading);
    font-size: clamp(1.8rem, 4.5vw, 3rem);
    font-weight: 700; line-height: 1.15;
    margin: 0 0 0.6rem; color: var(--ms-text);
}
.dl-subtitle {
    color: var(--ms-text-soft);
    font-size: clamp(0.95rem, 1.6vw, 1.1rem);
    margin: 0;
    min-height: 1.5em;
}

/* ── Invite-Bar (Host wartet) ─────────────────────────────────── */
.dl-invite-bar {
    max-width: 640px; margin: 0 auto;
    background: rgba(15, 15, 26, 0.65);
    border: 1px solid var(--ms-border-gold, rgba(212,173,69,0.35));
    border-radius: 6px;
    padding: 1.2rem 1.4rem;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.dl-invite-label {
    font-family: var(--ms-font-heading); font-size: 0.78rem;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--ms-gold-light, #f0d27b);
    text-align: center; margin-bottom: 0.7rem;
}
.dl-invite-row {
    display: flex; gap: 0.6rem; align-items: stretch;
    margin-bottom: 0.9rem;
}
.dl-invite-input {
    flex: 1; min-width: 0;
    padding: 0.7rem 0.9rem;
    background: rgba(5, 5, 10, 0.85);
    border: 1px solid var(--ms-border, rgba(212,173,69,0.18));
    color: var(--ms-text-soft);
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    border-radius: 3px;
    user-select: text; -webkit-user-select: text;
}
.dl-share-row {
    display: flex; gap: 1rem; flex-wrap: wrap;
    justify-content: center;
}
.dl-share-link {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    background: rgba(212, 173, 69, 0.06);
    border: 1px solid rgba(212, 173, 69, 0.2);
    border-radius: 4px;
    color: var(--ms-text-soft);
    font-size: 0.85rem; letter-spacing: 0.05em;
    transition: all 0.25s;
    text-decoration: none;
}
.dl-share-link:hover {
    background: rgba(212, 173, 69, 0.12);
    border-color: var(--ms-border-gold);
    color: var(--ms-gold-light);
}
.dl-share-icon { font-size: 1rem; }

/* ── Players-Container ─────────────────────────────────────────── */
.dl-players {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1.5rem;
    align-items: stretch;
}
.dl-player {
    position: relative;
    background: rgba(15, 15, 26, 0.7);
    border: 1px solid var(--ms-border, rgba(212,173,69,0.18));
    border-radius: 8px;
    padding: 1.6rem 1.4rem;
    backdrop-filter: blur(2px);
    transition: border-color 0.4s, box-shadow 0.4s;
}
.dl-player-me   { border-color: rgba(51, 119, 204, 0.45); box-shadow: 0 0 32px rgba(51, 119, 204, 0.12), inset 0 0 32px rgba(51, 119, 204, 0.04); }
.dl-player-opp  { border-color: rgba(204, 51, 51, 0.45);  box-shadow: 0 0 32px rgba(204, 51, 51, 0.12),  inset 0 0 32px rgba(204, 51, 51, 0.04); }

.dl-player-tag {
    display: inline-block;
    font-family: var(--ms-font-heading);
    font-size: 0.7rem; font-weight: 600;
    letter-spacing: 0.32em; text-transform: uppercase;
    padding: 0.25rem 0.8rem;
    border-radius: 99px;
    margin-bottom: 1.1rem;
}
.dl-player-me  .dl-player-tag { color: #aac8ee; background: rgba(51, 119, 204, 0.15); border: 1px solid rgba(51, 119, 204, 0.4); }
.dl-player-opp .dl-player-tag { color: #eeaaaa; background: rgba(204, 51, 51, 0.12);  border: 1px solid rgba(204, 51, 51, 0.4);  }

/* ── Eigenes Team-Form ────────────────────────────────────────── */
.dl-team-form {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 1.4rem;
    align-items: end;
    margin-bottom: 1rem;
}
.dl-form-col {
    display: flex; flex-direction: column; align-items: center; gap: 0.55rem;
}
.dl-form-col-name { align-items: stretch; min-width: 0; }
.dl-col-label {
    font-family: var(--ms-font-heading);
    font-size: 0.68rem; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--ms-text-muted, #7a7a8a);
    text-align: center;
}
.dl-form-col-name .dl-col-label { text-align: left; }

.dl-banner-preview {
    width: 80px; height: 100px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    padding-bottom: 10px; font-size: 2.5rem;
    border-radius: 6px 6px 50% 50%;
    border: 2px solid rgba(255, 255, 255, 0.15);
    background: radial-gradient(circle at 50% 40%, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0.4) 100%);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
}
.dl-banner-preview:hover {
    transform: none; border-color: rgba(212, 173, 69, 0.55);
}

.dl-color-wrap { position: relative; width: 50px; height: 50px; }
.dl-color-input {
    width: 50px; height: 50px;
    border: none; cursor: pointer;
    border-radius: 50%; padding: 0; background: none;
    -webkit-appearance: none; appearance: none;
}
.dl-color-input::-webkit-color-swatch-wrapper { padding: 0; border-radius: 50%; }
.dl-color-input::-webkit-color-swatch         { border: 2px solid rgba(255,255,255,0.22); border-radius: 50%; }
.dl-color-input::-moz-color-swatch            { border: 2px solid rgba(255,255,255,0.22); border-radius: 50%; }
.dl-color-ring {
    position: absolute; inset: -5px; border-radius: 50%;
    pointer-events: none;
    border: 2px solid rgba(255,255,255,0.08);
    box-shadow: 0 0 18px rgba(51,119,204,0.3);
    transition: box-shadow 0.3s;
}

.dl-name-input {
    width: 100%;
    padding: 0.7rem 0.9rem;
    font-family: var(--ms-font-heading);
    font-size: 1rem; font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--ms-text);
    background: rgba(5, 5, 10, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: 0;
}
.dl-name-input:focus {
    border-color: var(--ms-border-gold, rgba(212,173,69,0.35));
    box-shadow: 0 0 14px rgba(212,173,69,0.15);
}

.dl-rand-btn {
    background: rgba(212, 173, 69, 0.05);
    border: 1px solid rgba(212, 173, 69, 0.22);
    color: rgba(212, 173, 69, 0.75);
    font-family: var(--ms-font-heading);
    font-size: 0.72rem; letter-spacing: 0.1em;
    padding: 0.32rem 0.7rem; border-radius: 3px;
    cursor: pointer; transition: all 0.2s;
    display: inline-flex; align-items: center; gap: 0.3rem;
}
.dl-rand-btn:hover {
    color: var(--ms-gold-light, #f0d27b);
    background: rgba(212, 173, 69, 0.12);
    border-color: rgba(212, 173, 69, 0.45);
}
.dl-rand-icon { font-size: 0.85rem; }

/* Konflikt-Hinweis */
.dl-conflict-msg {
    margin-top: 0.6rem;
    padding: 0.7rem 0.9rem;
    background: rgba(204, 51, 51, 0.1);
    border: 1px solid rgba(204, 51, 51, 0.35);
    border-radius: 4px;
    color: #f0c0c0;
    font-size: 0.92rem; line-height: 1.4;
    text-align: center;
}

.dl-action-row {
    display: flex; justify-content: center; margin-top: 1.2rem;
}
.dl-ready-btn {
    min-width: 180px;
}
.dl-ready-btn[disabled] {
    opacity: 0.45; cursor: not-allowed;
    animation: none !important;
    pointer-events: none;
}
.dl-ready-btn.dl-ready-active {
    background: linear-gradient(180deg, #4a9a6e 0%, #2d6b4a 100%);
    border-color: #4a9a6e;
    color: #f0fff5;
    animation: none;
}

/* ── VS Trenner ───────────────────────────────────────────────── */
.dl-vs {
    display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
    align-self: center;
    padding: 0 0.4rem;
}
.dl-vs-line {
    width: 1px; height: 50px;
    background: linear-gradient(180deg, transparent, var(--ms-gold, #d4ad45), transparent);
}
.dl-vs-icon {
    font-size: 2rem; color: var(--ms-gold, #d4ad45);
    text-shadow: 0 0 18px rgba(212, 173, 69, 0.55);
    animation: dlVsGlow 2.6s ease-in-out infinite;
}
@keyframes dlVsGlow {
    0%, 100% { transform: scale(1);    text-shadow: 0 0 16px rgba(212,173,69,0.45); }
    50%      { transform: scale(1.08); text-shadow: 0 0 28px rgba(212,173,69,0.7); }
}

/* ── Gegner-Vorschau ─────────────────────────────────────────── */
.dl-opp-waiting {
    display: flex; flex-direction: column; align-items: center; gap: 1rem;
    padding: 2rem 0;
    color: var(--ms-text-muted, #7a7a8a);
}
.dl-opp-spinner {
    width: 38px; height: 38px;
    border: 2px solid rgba(204, 51, 51, 0.18);
    border-top-color: rgba(204, 51, 51, 0.7);
    border-radius: 50%;
    animation: dlSpin 1.1s linear infinite;
}
.dl-opp-waiting p { margin: 0; font-size: 0.95rem; letter-spacing: 0.04em; }

.dl-opp-preview {
    display: flex; flex-direction: column; align-items: center; gap: 0.8rem;
    padding: 1rem 0;
}
.dl-opp-banner {
    width: 80px; height: 100px;
    display: flex; align-items: center; justify-content: center;
    padding-bottom: 10px; font-size: 2.5rem;
    border-radius: 6px 6px 50% 50%;
    border: 2px solid rgba(255, 255, 255, 0.15);
    background: radial-gradient(circle at 50% 40%, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0.4) 100%);
}
.dl-opp-color-wrap {
    width: 50px; height: 50px;
    display: flex; align-items: center; justify-content: center;
}
.dl-opp-color {
    width: 50px; height: 50px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.22);
}
.dl-opp-name {
    font-family: var(--ms-font-heading);
    font-size: 1.15rem; font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--ms-text);
    text-align: center;
    word-break: break-word; max-width: 100%;
}
.dl-opp-status {
    font-family: var(--ms-font-heading);
    font-size: 0.78rem; letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ms-text-muted);
    margin-top: 0.2rem;
    transition: color 0.4s;
}
.dl-opp-ready .dl-opp-status {
    color: #6dd0a0;
    text-shadow: 0 0 14px rgba(109, 208, 160, 0.4);
}
.dl-opp-ready .dl-player-tag {
    background: rgba(109, 208, 160, 0.18);
    border-color: rgba(109, 208, 160, 0.5);
    color: #b6e8d2;
}
.dl-opp-conflict {
    border-color: rgba(255, 100, 80, 0.65) !important;
    box-shadow: 0 0 32px rgba(255, 100, 80, 0.18), inset 0 0 32px rgba(255, 100, 80, 0.04) !important;
}

/* ── Footer ──────────────────────────────────────────────────── */
.dl-footer {
    text-align: center;
    margin-top: 0.5rem;
}
.dl-leave-btn {
    background: transparent;
    border: none;
    color: var(--ms-text-muted, #7a7a8a);
    font-family: var(--ms-font-heading);
    font-size: 0.78rem; letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 0.6rem 1rem;
    cursor: pointer;
    transition: color 0.2s;
}
.dl-leave-btn:hover {
    color: #cc8888;
    text-decoration: none;
}

/* ── Countdown-Overlay ───────────────────────────────────────── */
.dl-countdown {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(5, 5, 8, 0.92);
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(6px);
    animation: dlFadeIn 0.4s ease-out;
}
.dl-countdown-inner {
    text-align: center;
}
.dl-countdown-label {
    font-family: var(--ms-font-heading);
    font-size: 1rem; letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--ms-gold, #d4ad45);
    margin-bottom: 1.4rem;
    animation: dlVsGlow 1.6s ease-in-out infinite;
}
.dl-countdown-num {
    font-family: var(--ms-font-heading);
    font-size: 9rem; font-weight: 700; line-height: 1;
    color: var(--ms-text);
    text-shadow: 0 0 60px rgba(212, 173, 69, 0.4);
    animation: dlNumPulse 1s ease-in-out infinite;
}
@keyframes dlNumPulse {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%      { transform: scale(1.08); opacity: 0.85; }
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 880px) {
    .dl-players {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .dl-vs {
        flex-direction: row;
        padding: 0.4rem 0;
    }
    .dl-vs-line {
        width: 50px; height: 1px;
        background: linear-gradient(90deg, transparent, var(--ms-gold), transparent);
    }
    .dl-team-form {
        grid-template-columns: 1fr 1fr;
    }
    .dl-form-col-name {
        grid-column: 1 / -1;
    }
}

@media (max-width: 480px) {
    .dl-team-form {
        grid-template-columns: 1fr;
        justify-items: center;
    }
    .dl-form-col-name { width: 100%; }
    .dl-share-row { gap: 0.6rem; }
    .dl-share-link { font-size: 0.78rem; padding: 0.4rem 0.7rem; }
    .dl-countdown-num { font-size: 6rem; }
}

/* ════════════════════════════════════════════════════════════════
   DUEL CHAT (Etappe 2 Sub: Chat)
   Linke Sidebar + Tab-Toggle + Pop-up neben Wappen.
   Eingerichtet, dass es symmetrisch zur Verlauf-Sidebar wirkt, aber
   ohne deren bestehende Klassen zu kollidieren.
   ════════════════════════════════════════════════════════════════ */

/* ── Tab-Button am Bildschirmrand ─────────────────────────────── */
.duel-chat-tab {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 998;
    width: 44px; height: 56px;
    background: linear-gradient(180deg, rgba(15,15,26,0.95) 0%, rgba(8,8,14,0.95) 100%);
    border: 1px solid rgba(212,173,69,0.35);
    border-left: none;
    border-radius: 0 6px 6px 0;
    color: var(--ms-gold-light, #f0d27b);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 14px rgba(0,0,0,0.6);
}
.duel-chat-tab:hover {
    background: linear-gradient(180deg, rgba(25,25,42,0.95) 0%, rgba(12,12,20,0.95) 100%);
    border-color: var(--ms-gold, #d4ad45);
    width: 48px;
}
.duel-chat-tab.dch-tab-hidden {
    transform: translateY(-50%) translateX(-100%);
    opacity: 0;
    pointer-events: none;
}
.duel-chat-tab.dch-pulse {
    animation: dchTabPulse 1.4s ease-out;
}
@keyframes dchTabPulse {
    0%   { box-shadow: 0 4px 14px rgba(0,0,0,0.6), 0 0 0 0 rgba(212,173,69,0.5); }
    50%  { box-shadow: 0 4px 14px rgba(0,0,0,0.6), 0 0 0 10px rgba(212,173,69,0); }
    100% { box-shadow: 0 4px 14px rgba(0,0,0,0.6); }
}
.dch-tab-icon { display: inline-flex; align-items: center; justify-content: center; }
.dch-tab-badge {
    position: absolute; top: -4px; right: -6px;
    min-width: 18px; height: 18px;
    border-radius: 9px;
    background: #cc3333;
    color: #fff;
    font-family: var(--ms-font-heading, 'Cinzel', serif);
    font-size: 0.65rem; font-weight: 700;
    line-height: 18px; text-align: center;
    padding: 0 5px;
    border: 1px solid rgba(255,255,255,0.35);
    box-shadow: 0 2px 6px rgba(204,51,51,0.6);
    pointer-events: none;
}

/* ── Sidebar Panel ─────────────────────────────────────────────── */
.duel-chat-panel {
    position: fixed;
    left: 0; top: 50%;
    transform: translateY(-50%) translateX(-110%);
    z-index: 999;
    width: 320px;
    max-width: 92vw;
    height: 70vh;
    max-height: 600px;
    background: linear-gradient(180deg, rgba(15,15,26,0.97) 0%, rgba(8,8,14,0.97) 100%);
    border: 1px solid rgba(212,173,69,0.35);
    border-left: none;
    border-radius: 0 8px 8px 0;
    box-shadow: 0 14px 48px rgba(0,0,0,0.7);
    display: flex; flex-direction: column;
    backdrop-filter: blur(6px);
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    color: var(--ms-text, #e8e8f0);
}
.duel-chat-panel.dch-open {
    transform: translateY(-50%) translateX(0);
}

/* Header */
.dch-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid rgba(212,173,69,0.18);
    flex-shrink: 0;
}
.dch-title {
    font-family: var(--ms-font-heading, 'Cinzel', serif);
    font-size: 0.82rem; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--ms-gold-light, #f0d27b);
}
.dch-close {
    background: transparent; border: none;
    color: rgba(255,255,255,0.5);
    font-size: 1.5rem; line-height: 1; cursor: pointer;
    padding: 0 0.3rem; border-radius: 3px;
    transition: color 0.2s, background 0.2s;
}
.dch-close:hover {
    color: #fff;
    background: rgba(255,255,255,0.06);
}

/* Liste mit Messages */
.dch-list {
    flex: 1; min-height: 0;
    overflow-y: auto;
    padding: 0.8rem 0.9rem;
    display: flex; flex-direction: column; gap: 0.55rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(212,173,69,0.35) transparent;
}
.dch-list::-webkit-scrollbar { width: 6px; }
.dch-list::-webkit-scrollbar-track { background: transparent; }
.dch-list::-webkit-scrollbar-thumb { background: rgba(212,173,69,0.35); border-radius: 3px; }

.dch-row {
    display: flex;
    max-width: 100%;
}
.dch-row.dch-mine  { justify-content: flex-end; }
.dch-row.dch-other { justify-content: flex-start; }

.dch-bubble {
    max-width: 85%;
    padding: 0.5rem 0.75rem;
    border: 1px solid;
    border-radius: 8px;
    font-size: 0.92rem; line-height: 1.35;
    word-break: break-word;
    animation: dchBubbleIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.dch-row.dch-mine  .dch-bubble { border-bottom-right-radius: 2px; }
.dch-row.dch-other .dch-bubble { border-bottom-left-radius: 2px; }
@keyframes dchBubbleIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.dch-author {
    font-family: var(--ms-font-heading, 'Cinzel', serif);
    font-size: 0.65rem; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase;
    margin-bottom: 0.2rem;
    opacity: 0.85;
}
.dch-body { white-space: pre-wrap; }

/* Emoji-Bubbles ohne Author-Tag, größer, ohne Padding-Zwang */
.dch-bubble.dch-emoji {
    background: transparent !important;
    border: none !important;
    padding: 0;
}
.dch-emoji-big {
    font-size: 2.4rem; line-height: 1;
    display: inline-block;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.6));
}

/* Emoji-Bar */
.dch-emoji-bar {
    display: flex; flex-wrap: wrap; gap: 0.25rem;
    padding: 0.5rem 0.7rem;
    border-top: 1px solid rgba(212,173,69,0.12);
    background: rgba(0,0,0,0.25);
    flex-shrink: 0;
}
.dch-emoji-btn {
    flex: 1; min-width: 36px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px;
    font-size: 1.3rem; line-height: 1;
    padding: 0.4rem 0.2rem;
    cursor: pointer;
    transition: all 0.18s;
}
.dch-emoji-btn:hover {
    background: rgba(212,173,69,0.12);
    border-color: rgba(212,173,69,0.4);
    transform: translateY(-2px);
}
.dch-emoji-btn:active {
    transform: translateY(0);
    background: rgba(212,173,69,0.2);
}

/* Eingabe-Form */
.dch-form {
    display: flex; gap: 0.5rem;
    padding: 0.7rem 0.8rem;
    border-top: 1px solid rgba(212,173,69,0.18);
    flex-shrink: 0;
}
.dch-input {
    flex: 1; min-width: 0;
    padding: 0.55rem 0.75rem;
    background: rgba(5,5,10,0.7);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 4px;
    color: var(--ms-text, #e8e8f0);
    font-family: inherit; font-size: 0.92rem;
    outline: 0;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.dch-input:focus {
    border-color: rgba(212,173,69,0.5);
    box-shadow: 0 0 14px rgba(212,173,69,0.18);
}
.dch-input::placeholder {
    color: rgba(255,255,255,0.32);
    font-style: italic;
}
.dch-send {
    width: 38px; height: 38px;
    background: linear-gradient(180deg, #d4ad45 0%, #a8862c 100%);
    border: 1px solid #d4ad45;
    color: #1a1a26;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: filter 0.18s, transform 0.18s;
}
.dch-send:hover { filter: brightness(1.15); transform: translateY(-1px); }
.dch-send:active { transform: translateY(0); }

/* ── Pop-up neben Wappen (eingehende Reaktion) ─────────────────── */
.dch-popup {
    position: fixed;
    z-index: 9999;
    transform: translateX(-50%) translateY(0);
    font-size: 2.6rem; line-height: 1;
    pointer-events: none;
    filter: drop-shadow(0 4px 14px rgba(0,0,0,0.65));
    animation: dchPopupIn 0.4s cubic-bezier(0.16, 1, 0.3, 1),
               dchPopupFloat 2s ease-out 0.4s both;
}
.dch-popup.dch-popup-out {
    animation: dchPopupOut 0.4s ease-in forwards;
}
@keyframes dchPopupIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(0.5); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0)     scale(1); }
}
@keyframes dchPopupFloat {
    from { transform: translateX(-50%) translateY(0) scale(1); }
    to   { transform: translateX(-50%) translateY(36px) scale(1.1); }
}
@keyframes dchPopupOut {
    from { opacity: 1; }
    to   { opacity: 0; transform: translateX(-50%) translateY(48px) scale(1.1); }
}

/* ── Toast bei Sende-Fehler ────────────────────────────────────── */
.dch-toast {
    position: fixed; bottom: 90px; left: 50%;
    transform: translateX(-50%);
    background: rgba(120,30,30,0.92);
    color: #fdd;
    border: 1px solid rgba(204,51,51,0.6);
    border-radius: 4px;
    padding: 0.6rem 1.2rem;
    font-family: var(--ms-font-heading, 'Cinzel', serif);
    font-size: 0.82rem; letter-spacing: 0.08em;
    z-index: 10001;
    box-shadow: 0 6px 20px rgba(0,0,0,0.6);
    transition: opacity 0.4s;
}
.dch-toast.dch-toast-vanish { opacity: 0; }

/* ── Mobile: Sidebar als Bottom-Sheet ─────────────────────────── */
@media (max-width: 720px) {
    .duel-chat-tab {
        top: auto; bottom: 90px;
        width: 44px; height: 44px;
        border-radius: 0 22px 22px 0;
    }
    .duel-chat-panel {
        top: auto; left: 0; right: 0;
        bottom: 0;
        width: 100vw; max-width: 100vw;
        height: 70vh; max-height: 70vh;
        transform: translateY(100%);
        border-radius: 8px 8px 0 0;
        border: 1px solid rgba(212,173,69,0.35);
        border-bottom: none;
    }
    .duel-chat-panel.dch-open {
        transform: translateY(0);
    }
}

/* ── Live-Anzeige: Gegner hat seinen Angreifer ausgewählt ──
   Das frühere rote Pulsier-Quadrat ist auf Wunsch entfernt.
   Das Overlay-Div wird in duel-actions.js zwar noch erstellt,
   bleibt aber ohne Styling unsichtbar. */

/* ── Sudden-Death-Toggle (Lobby, nur Ersteller p1) ───────────────────── */
.dl-sudden-row{
    margin:.5rem auto 0;width:100%;text-align:center;
    padding:.9rem 1.1rem;border-radius:12px;
    background:linear-gradient(180deg,rgba(60,48,18,.22),rgba(0,0,0,.28));
    border:1px solid rgba(212,173,69,.35);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.dl-sudden-switch{display:inline-flex;align-items:center;gap:.55rem;cursor:pointer;user-select:none}
.dl-sudden-switch input{position:absolute;opacity:0;width:0;height:0}
.dl-sudden-track{
    position:relative;width:42px;height:22px;border-radius:11px;flex:0 0 auto;
    background:rgba(120,120,120,.35);border:1px solid rgba(255,255,255,.18);
    transition:background .2s ease,border-color .2s ease;
}
.dl-sudden-thumb{
    position:absolute;top:1px;left:1px;width:18px;height:18px;border-radius:50%;
    background:#eee;box-shadow:0 1px 3px rgba(0,0,0,.5);transition:transform .2s ease;
}
.dl-sudden-switch input:checked + .dl-sudden-track{
    background:linear-gradient(180deg,rgba(224,186,80,.95),rgba(196,154,48,.95));
    border-color:rgba(240,212,106,.8);
}
.dl-sudden-switch input:checked + .dl-sudden-track .dl-sudden-thumb{transform:translateX(20px)}
.dl-sudden-label{
    font-family:var(--font-display,"Cinzel",serif);font-weight:700;
    letter-spacing:.12em;text-transform:uppercase;font-size:.8rem;color:rgb(220,181,89);
}
.dl-sudden-hint{margin-top:.35rem;font-size:.7rem;line-height:1.3;color:rgba(180,180,180,.95)}
/* ═══════════════════════════════════════════════════════════════════════
   MYSTERADO · Duell-Warteraum – High-End-Redesign ("Champion-Bühne")
   Eigene Teamfarbe als dynamischer Akzent (--team-c). Kein Legacy Rot/Blau.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
    --gold:#d4ad45; --gold-lt:#f2d98a; --gold-dk:#8a6d28;
    --ink:#0a0a12; --ink2:#12121e;
}

/* Bühnen-Hintergrund: Vignette + radiales Glühen hinter dem Titel */
/* Hintergrund liefert jetzt das Arena-Video + das reduzierte Overlay (weiter unten). */
.duel-lobby-page .ms-bg-layer{ pointer-events:none; }

.dl-room{max-width:1020px;gap:1.6rem}

/* ── Kopf ─────────────────────────────────────────────────────────────── */
.dl-header{position:relative;max-width:720px;margin:0 auto}
.dl-eyebrow{
    display:inline-block;padding:.45rem 1.4rem;border-radius:999px;
    background:linear-gradient(180deg,rgba(212,173,69,.18),rgba(212,173,69,.04));
    border:1px solid rgba(212,173,69,.55);color:var(--gold-lt);
    font-family:'Cinzel',serif;font-weight:600;font-size:.7rem;letter-spacing:.34em;text-transform:uppercase;
    box-shadow:0 0 30px rgba(212,173,69,.14),inset 0 1px 0 rgba(255,255,255,.08);
}
.dl-title{
    font-family:'Cinzel',serif;font-weight:900;line-height:1.02;
    font-size:clamp(2rem,4.6vw,3.3rem);margin:.5rem 0 .4rem;
    background:linear-gradient(180deg,#fff 0%,var(--gold-lt) 48%,var(--gold) 78%,var(--gold-dk) 100%);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    filter:drop-shadow(0 3px 26px rgba(212,173,69,.28));
}
.dl-subtitle{font-family:'Lora',Georgia,serif;color:#c9c9d8;font-size:1.08rem;letter-spacing:.02em;text-align:center;margin:.2rem 0;
    animation:dlWaitPulse 2.6s ease-in-out infinite}
@keyframes dlWaitPulse{0%,100%{opacity:.4}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.dl-subtitle{animation:none;opacity:.85}}
@keyframes dlWaitShimmer{0%{background-position:130% 0}100%{background-position:-130% 0}}
@media (prefers-reduced-motion:reduce){.dl-subtitle{animation:none;-webkit-text-fill-color:#c3c3d2;color:#c3c3d2}}

/* ── Einladung ────────────────────────────────────────────────────────── */
.dl-invite-bar{
    position:relative;max-width:640px;margin:0 auto;
    background:linear-gradient(180deg,rgba(26,22,13,.92),rgba(9,9,15,.95));
    border:1px solid rgba(212,173,69,.4);border-radius:16px;padding:1.6rem 1.8rem;
    box-shadow:0 24px 60px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06),0 0 80px rgba(212,173,69,.06);
}
.dl-invite-label{font-family:'Cinzel',serif;color:var(--gold-lt);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:1rem;text-align:center}
.dl-invite-row{display:flex;gap:.6rem}
.dl-invite-input{flex:1;min-width:0;background:rgba(0,0,0,.55);border:1px solid rgba(212,173,69,.28);border-radius:11px;padding:.85rem 1rem;color:#e8e8f2;font-size:.92rem;font-family:'Lora',serif}
.dl-invite-input:focus{outline:none;border-color:rgba(212,173,69,.7);box-shadow:0 0 0 3px rgba(212,173,69,.14)}

.dl-share-row{display:flex;gap:.75rem;margin-top:1.1rem;justify-content:center;flex-wrap:wrap}
.dl-share-link{display:inline-flex;align-items:center;gap:.6rem;padding:.65rem 1.2rem;border-radius:13px;cursor:pointer;text-decoration:none;
    font-family:'Cinzel',serif;font-size:.82rem;font-weight:600;letter-spacing:.03em;color:#ececf4;
    background:rgba(0,0,0,.4);border:1px solid var(--sh,rgba(212,173,69,.4));
    transition:transform .16s ease,box-shadow .16s ease,background .16s ease}
.dl-share-link .dl-share-icon{display:inline-flex;align-items:center;justify-content:center;width:1.9rem;height:1.9rem;border-radius:50%;
    background:color-mix(in srgb,var(--sh) 24%,transparent);color:var(--sh);flex:0 0 auto}
.dl-share-icon-svg{width:17px;height:17px}
.dl-share-link:hover{transform:translateY(-2px);background:color-mix(in srgb,var(--sh) 15%,rgba(0,0,0,.4));box-shadow:0 12px 28px color-mix(in srgb,var(--sh) 34%,transparent)}
.dl-share-link.dl-share-wa{--sh:#25d366}
.dl-share-link.dl-share-tg{--sh:#229ed9}
.dl-share-link.dl-share-mail{--sh:var(--gold)}

/* ── Duell-Bühne: zwei Champions + VS ─────────────────────────────────── */
.dl-players{display:grid;grid-template-columns:1fr auto 1fr;gap:1.4rem;align-items:start;justify-items:center}

.dl-player{
    --team-c:var(--gold);
    position:relative;width:100%;max-width:420px;aspect-ratio:6/9;
    border-radius:16px;padding:2.9rem 1.5rem 1.8rem;overflow:hidden;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    background:
        linear-gradient(180deg,
            color-mix(in srgb,var(--team-c) 22%, rgba(11,15,30,.82)) 0%,
            color-mix(in srgb,var(--team-c) 6%, rgba(11,15,30,.82)) 14%,
            rgba(11,15,30,.82) 26%,
            rgba(9,12,24,.85) 100%);
    border:1px solid color-mix(in srgb,var(--team-c) 42%,rgba(212,173,69,.28));
    box-shadow:0 22px 50px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.03),inset 0 1px 0 rgba(255,255,255,.06);
    transform:perspective(1000px) rotateX(var(--dl-rx,0deg)) rotateY(var(--dl-ry,0deg));
    transition:transform .18s ease-out, box-shadow .18s ease-out;
    transform-style:preserve-3d;
    backdrop-filter:none; -webkit-backdrop-filter:none;
}
.dl-player.dl-tilt{
    transition:transform .05s linear;
    will-change:transform;
    box-shadow:0 30px 60px rgba(0,0,0,.55),0 0 40px color-mix(in srgb,var(--team-c) 22%,transparent),inset 0 0 0 1px rgba(255,255,255,.04),inset 0 1px 0 rgba(255,255,255,.08);
}
/* Glanzreflex am Mauszeiger – dezent wie bei den Spielkarten (card-large) */
.dl-player .dl-glare{position:absolute;inset:0;pointer-events:none;border-radius:inherit;z-index:4;opacity:0;transition:opacity .25s ease;
    background:radial-gradient(circle at var(--dl-px,50%) var(--dl-py,50%), rgba(255,255,255,.09), rgba(255,255,255,.02) 32%, transparent 60%);mix-blend-mode:soft-light}
.dl-player.dl-tilt .dl-glare{opacity:.6}
/* dezente Leuchtlinie oben in Teamfarbe */
.dl-player::before{content:"";position:absolute;top:0;left:15%;right:15%;height:2px;
    background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--team-c) 80%,#fff),transparent)}
.dl-player-opp{--team-c:#6a6a7a}

/* Tag als kompakte Badge oben links */
.dl-player-tag{position:absolute;top:.9rem;left:.95rem;z-index:3;display:inline-block;
    padding:.32rem .85rem;border-radius:999px;
    font-family:'Cinzel',serif;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    color:#f4ecd6;background:color-mix(in srgb,var(--team-c) 28%,rgba(0,0,0,.55));
    border:1px solid color-mix(in srgb,var(--team-c) 60%,transparent);
    box-shadow:0 3px 10px color-mix(in srgb,var(--team-c) 22%,transparent)}

/* Champion-Bühne */
.dl-champion{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;margin-top:.3rem}
.dl-crest-frame{position:relative;width:152px;height:182px;display:flex;align-items:center;justify-content:center;
    filter:drop-shadow(0 12px 30px color-mix(in srgb,var(--team-c) 32%,transparent))}
/* Wappen exakt wie im Solo-Modus: gleiche Maße, gleiche Icon-Größe, KEINE zweite
   (goldene) Outline – der Rahmen trägt die Teamfarbe. */
.dl-crest-frame::before{content:none}
.dl-banner-preview{width:152px;height:182px;cursor:pointer;display:flex;align-items:center;justify-content:center;
    font-size:7rem;padding-bottom:12px;border-radius:12px 12px 44% 44%;
    border:2px solid color-mix(in srgb,var(--team-c) 62%,#0d1120);
    background-color:#0d1120;
    background-size:cover;background-position:center;background-repeat:no-repeat;
    box-shadow:inset 0 2px 12px rgba(0,0,0,.5),inset 0 0 42px color-mix(in srgb,var(--team-c) 20%,transparent);
    transition:transform .3s cubic-bezier(.4,0,.2,1),border-color .25s;user-select:none}
.dl-banner-preview:hover{transform:none;border-color:rgba(212,173,69,0.55)}

.dl-name-input{width:100%;max-width:400px;margin-top:1.5rem;text-align:center;
    padding:.6rem .9rem;font-family:'Cinzel',serif;font-size:1.9rem;font-weight:700;letter-spacing:.03em;
    color:color-mix(in srgb, var(--team-c) 82%, #fff);background:transparent;border:0;border-bottom:1px solid color-mix(in srgb,var(--team-c) 50%,transparent);
    border-radius:0;outline:0;transition:border-color .2s}
.dl-name-input:focus{border-bottom-color:var(--gold-lt);box-shadow:none}
.dl-name-input::placeholder{color:#6a6a7a}

.dl-champion-tools{display:flex;align-items:center;justify-content:center;gap:.7rem;margin-top:1.3rem;flex-wrap:wrap}
.dl-champion-actions{display:flex;justify-content:center;margin-top:.9rem}
.dl-color-wrap{position:relative;width:46px;height:46px}
.dl-color-input{width:46px;height:46px;border:none;cursor:pointer;border-radius:50%;padding:0;background:none;-webkit-appearance:none;appearance:none}
.dl-color-input::-webkit-color-swatch-wrapper{padding:0;border-radius:50%}
.dl-color-input::-webkit-color-swatch{border:2px solid rgba(255,255,255,.25);border-radius:50%}
.dl-color-ring{position:absolute;inset:-4px;border-radius:50%;pointer-events:none;border:1px solid rgba(255,255,255,.1);
    box-shadow:0 0 16px color-mix(in srgb,var(--team-c) 60%,transparent);transition:box-shadow .3s}
.dl-rand-btn{
    background:rgba(0,0,0,.2);
    color:rgba(253,253,252,.95);
    font-family:'Cinzel',serif;
    font-size:.75rem;
    font-weight:500;
    letter-spacing:.05em;
    padding:.5rem 1rem;
    border-radius:10px;
    border:1px solid rgba(212,173,69,.28);
    cursor:pointer;
    transition:all .16s;
    display:inline-flex;
    align-items:center;
    gap:.25rem;
}
.dl-rand-btn:hover{color:#fff;background:rgba(212,173,69,.18);border-color:rgba(212,173,69,.6);transform:translateY(-2px);box-shadow:0 6px 18px rgba(212,173,69,.24)}
.dl-rand-btn .dl-rand-icon{font-size:1rem;opacity:.85}

/* Gegner-Wartezustand: eleganter pulsierender Ring */
.dl-player-opp{display:flex;flex-direction:column}
.dl-opp-waiting{position:relative;z-index:2;margin:auto;text-align:center;color:#9a9aac;font-family:'Lora',serif}
.dl-opp-spinner{width:80px;height:80px;margin:0 auto 1.2rem;border-radius:50%;position:relative}
.dl-opp-spinner::before,.dl-opp-spinner::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid transparent}
.dl-opp-spinner::before{border-top-color:rgba(212,173,69,.5);animation:dlSpin 1.4s linear infinite}
.dl-opp-spinner::after{inset:10px;border-top-color:rgba(212,173,69,.25);animation:dlSpin 2s linear infinite reverse}

/* VS-Trenner: dramatisch, Gold */
.dl-vs{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;align-self:center}
.dl-vs-line{width:2px;flex:1;min-height:40px;background:linear-gradient(180deg,transparent,rgba(212,173,69,.5),transparent)}
.dl-vs-icon{position:relative;width:auto;height:auto;display:flex;align-items:center;justify-content:center;animation:none}
.dl-vs-text{
    font-family:'Cinzel',serif;font-size:3.4rem;font-weight:900;line-height:1;letter-spacing:-.03em;
    background:linear-gradient(180deg,#fff 0%,var(--gold-lt) 48%,var(--gold) 78%,var(--gold-dk) 100%);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
    filter:drop-shadow(0 0 14px rgba(212,173,69,.55)) drop-shadow(0 4px 12px rgba(0,0,0,.7));
}

/* Sudden Death: edel */
.dl-sudden-row{position:relative;z-index:2;margin-top:1.4rem;width:100%;padding:1rem 1.1rem;border-radius:16px;
    background:linear-gradient(180deg,
        color-mix(in srgb,var(--gold) 22%,rgba(11,15,30,.82)) 0%,
        color-mix(in srgb,var(--gold) 6%,rgba(11,15,30,.82)) 14%,
        rgba(11,15,30,.82) 26%,
        rgba(9,12,24,.85) 100%);
    border:1px solid color-mix(in srgb,var(--gold) 42%,rgba(212,173,69,.28));
    box-shadow:0 16px 40px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06)}

/* Bereit-Button: golden, prominent */
.dl-action-row{position:relative;z-index:2;display:flex;justify-content:center;margin-top:1.4rem}
.dl-ready-btn{min-width:300px; font-size:1.1rem; letter-spacing:.14em; padding:.85rem 2.6rem}
.dl-ready-btn.dl-ready-active{background:linear-gradient(180deg,#5bbd86,#2f7a52);border-color:#5bbd86;color:#f0fff6;box-shadow:0 12px 34px rgba(60,160,110,.4)}

/* Lobby verlassen: sichtbar, untergeordnet */
.dl-footer{margin-top:2.4rem;text-align:center}
/* Zurück/Verlassen exakt wie Solo (.ts-panel-back aus brand.css): dezenter Gold-Rahmen */
.dl-leave-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .9rem;border-radius:4px;cursor:pointer;
    background:none;border:1px solid rgba(212,173,69,0.28);color:rgba(212,173,69,0.75);
    font-family:var(--font-display,'Cinzel',serif);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;transition:all .2s;text-decoration:none}
.dl-leave-btn:hover{background:rgba(212,173,69,0.06);border-color:rgba(212,173,69,0.6);color:#e8c56d;text-decoration:none}

@media (max-width:820px){
    .dl-players{grid-template-columns:1fr}
    .dl-vs{flex-direction:row;width:100%}
    .dl-vs-line{width:auto;height:2px;min-height:0;flex:1}
}

/* Fix: Gegner-Karte – Tag links, Inhalt zentriert */
.dl-player-opp{align-items:flex-start}
.dl-player-opp .dl-opp-waiting,.dl-player-opp .dl-opp-preview{margin:auto;width:100%}
/* Wartender, leerer Wappen-Rahmen (Silhouette) */
.dl-crest-empty{opacity:.6;animation:dlPulse 2.4s ease-in-out infinite}
.dl-crest-empty .dl-banner-preview{font-size:3rem;color:#5a5a6a;background:radial-gradient(circle at 50% 34%,rgba(120,120,140,.12),rgba(0,0,0,.5));border-color:rgba(150,150,170,.25)}
.dl-crest-empty::before{opacity:.4}
@keyframes dlPulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.8;transform:scale(1.03)}}
.dl-opp-waiting p{margin-top:1.3rem;font-family:'Lora',serif;color:#9a9aac;letter-spacing:.05em}

/* Gegner-Vorschau (wenn beigetreten) – gleiche Bühne wie „Du" */
.dl-opp-preview{text-align:center}
.dl-opp-banner{width:150px;height:180px;margin:0 auto;display:flex;align-items:center;justify-content:center;font-size:4.2rem;
    border-radius:12px 12px 44% 44%;border:2px solid color-mix(in srgb,var(--team-c) 55%,rgba(255,255,255,.15));
    background:radial-gradient(circle at 50% 34%,color-mix(in srgb,var(--team-c) 22%,transparent),rgba(0,0,0,.55));background-size:cover;background-position:center}
.dl-opp-name{margin-top:1rem;font-family:'Cinzel',serif;font-size:1.35rem;font-weight:700;color:#fff}
.dl-opp-status{margin-top:.5rem;font-family:'Lora',serif;color:#9a9aac}


/* ═══════════════════════════════════════════════════════════════════════
   Arena-Hintergrund (Video-Loop + Poster) für die Duell-Lobby
   ═══════════════════════════════════════════════════════════════════════ */
.dl-arena-bg{
    position:fixed;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:50% 62%;
    z-index:-3;pointer-events:none;
}
/* Lesbarkeits-Overlay (dunkel + Vignette) direkt über der Arena */
.duel-lobby-page .ms-bg-layer{
    position:fixed;inset:0;z-index:-2;pointer-events:none;background:
        linear-gradient(180deg, rgba(5,5,10,.42) 0%, rgba(5,5,10,.08) 20%, transparent 40%, transparent 62%, rgba(5,5,10,.5) 100%);
}
/* Partikel-Lichtkugeln nur noch dezent über der bewegten Arena */
.duel-lobby-page #particle-canvas{opacity:.3;z-index:-1}

/* Ohne bewegungsreduzierte Präferenz: Video zeigen; sonst Poster stehen lassen */
@media (prefers-reduced-motion: reduce){
    .dl-arena-bg{display:none}
    .duel-lobby-page .ms-bg-layer{background:
        linear-gradient(180deg, rgba(5,5,10,.42) 0%, rgba(5,5,10,.08) 20%, transparent 40%, transparent 62%, rgba(5,5,10,.5) 100%),
        url(images/duel-arena.jpg) center 62%/cover no-repeat;}
}


/* Header über der Arena: dunkler Blur-Hintergrund statt transparent */
body.duel-lobby-page .ms-nav{
    background:linear-gradient(180deg, rgba(8,8,14,.85) 0%, rgba(8,8,14,.6) 100%);
    -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
    border-bottom:1px solid rgba(212,173,69,.22);
    box-shadow:0 6px 24px rgba(0,0,0,.4);
}

/* ══════════════════════════════════════════════════════════════════════
   DUELL-WARTERAUM · Einladungs-/Teilen-Bereich – aufgewertet
   (überschreibt die früheren dl-invite-/dl-share-Regeln via Position)
   ══════════════════════════════════════════════════════════════════════ */
.dl-invite-bar{
    width:100%; max-width:45rem; margin:0 auto; padding:1.9rem 2rem 1.8rem;
    background:
        radial-gradient(120% 90% at 50% -25%, rgba(212,173,69,.1), transparent 62%),
        linear-gradient(180deg, #161a28, #0a0d16);
    border:1px solid rgba(212,173,69,.26);
    border-radius:18px;
    box-shadow:0 22px 54px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
}
/* Kopfzeile mit Ketten-Icon */
.dl-invite-head{ display:flex; align-items:center; justify-content:center; gap:.55rem; margin-bottom:1.15rem; }
.dl-invite-head-ic{ width:18px; height:18px; color:var(--gold); display:inline-flex; flex:0 0 auto; }
.dl-invite-head-ic svg{ width:100%; height:100%; }
.dl-invite-label{
    font-family:'Cinzel',serif; color:var(--gold-lt);
    font-size:.76rem; letter-spacing:.15em; text-transform:uppercase; margin:0; text-align:center;
}

/* Link-Feld (Icon im Feld) + Kopieren-Button */
.dl-invite-row{ display:flex; gap:.7rem; align-items:stretch; }
.dl-invite-field{ position:relative; flex:1 1 auto; min-width:0; display:flex; align-items:center; }
.dl-invite-field-ic{
    position:absolute; left:.9rem; width:17px; height:17px; pointer-events:none;
    color:color-mix(in srgb, var(--gold) 65%, #8a8a9a);
}
.dl-invite-input{
    width:100%; min-width:0;
    background:rgba(0,0,0,.5); border:1px solid rgba(212,173,69,.28); border-radius:11px;
    padding:.9rem 1rem .9rem 2.6rem; color:#e8e8f2;
    font-size:.9rem; font-family:'Lora',serif; letter-spacing:.01em;
    transition:border-color .18s ease, box-shadow .18s ease;
}
.dl-invite-input:focus{ outline:none; border-color:rgba(212,173,69,.7); box-shadow:0 0 0 3px rgba(212,173,69,.14); }

.dl-copy-btn{
    flex:0 0 auto; display:inline-flex; align-items:center; gap:.5rem;
    padding:0 1.3rem; white-space:nowrap; cursor:pointer;
    font-family:'Cinzel',serif; font-size:.8rem; font-weight:600; letter-spacing:.07em; color:#18120a;
    background:linear-gradient(135deg, var(--gold-dk), var(--gold));
    border:1px solid var(--gold); border-radius:11px;
    box-shadow:0 4px 16px rgba(212,173,69,.24);
    transition:transform .16s ease, box-shadow .16s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.dl-copy-btn:hover{ transform:translateY(-1px); box-shadow:0 7px 22px rgba(212,173,69,.42); }
.dl-copy-btn:active{ transform:translateY(0); }
.dl-copy-ic{ width:16px; height:16px; flex:0 0 auto; }
.dl-copy-ic-done{ display:none; }
.dl-copy-btn.is-copied{ background:linear-gradient(135deg,#1c7d3f,#2ecc71); border-color:#2ecc71; color:#04130a; }
.dl-copy-btn.is-copied .dl-copy-ic-copy{ display:none; }
.dl-copy-btn.is-copied .dl-copy-ic-done{ display:inline-block; }

/* Trenner „◆" zwischen Link und Direkt-Teilen */
.dl-share-sep{ display:flex; align-items:center; gap:.85rem; margin:1.35rem 0 1.15rem; }
.dl-share-sep::before, .dl-share-sep::after{
    content:''; flex:1; height:1px;
    background:linear-gradient(90deg, transparent, rgba(212,173,69,.32), transparent);
}
.dl-share-sep-mark{ color:rgba(212,173,69,.55); font-size:.66rem; line-height:1; }

/* Direkt-Teilen: drei farbige Buttons im Stil der Modi-Buttons – nur das Icon, groß */
.dl-share-row{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin:0; }
.dl-share-link{
    --sh:var(--gold);
    flex:1 1 0; min-width:130px; max-width:172px;
    display:flex; flex-direction:column; align-items:center; gap:.8rem;
    padding:1.35rem 1rem 1.15rem; cursor:pointer; text-decoration:none;
    border-radius:12px; position:relative; overflow:hidden;
    background:linear-gradient(180deg,
        color-mix(in srgb, var(--sh) 55%, #0c1018) 0%,
        color-mix(in srgb, var(--sh) 24%, #0c1018) 46%,
        #0a0d15 100%);
    border:1px solid color-mix(in srgb, var(--sh) 58%, rgba(255,255,255,.12));
    box-shadow:0 9px 24px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.14);
    transition:transform .2s cubic-bezier(.2,.9,.3,1), box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.dl-share-link:hover{
    transform:translateY(-4px);
    border-color:color-mix(in srgb, var(--sh) 80%, white 4%);
    box-shadow:0 12px 26px color-mix(in srgb, var(--sh) 15%, rgba(0,0,0,.55)), inset 0 1px 0 rgba(255,255,255,.18);
    background:linear-gradient(180deg,
        color-mix(in srgb, var(--sh) 66%, #0c1018) 0%,
        color-mix(in srgb, var(--sh) 28%, #0c1018) 46%,
        #0a0d15 100%);
}
/* Nur das Icon – groß, ohne Wappen-Schild */
.dl-share-link .dl-share-icon{
    display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
    color:#fff; filter:drop-shadow(0 2px 5px rgba(0,0,0,.55));
    transition:transform .2s ease;
}
.dl-share-link:hover .dl-share-icon{ transform:scale(1.1); }
.dl-share-icon-svg{ width:42px; height:42px; }
.dl-share-name{ font-family:'Cinzel',serif; font-size:.88rem; font-weight:600; letter-spacing:.06em; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.5); }
.dl-share-link.dl-share-wa{ --sh:#25d366; }
.dl-share-link.dl-share-tg{ --sh:#229ed9; }
.dl-share-link.dl-share-mail{ --sh:var(--gold-lt); }

/* Schmale Screens: Kopieren unter das Feld, Kacheln als 3-Spalten-Grid */
@media (max-width:520px){
    .dl-invite-row{ flex-wrap:wrap; }
    .dl-copy-btn{ width:100%; justify-content:center; padding:.8rem 1rem; }
    .dl-share-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; }
    .dl-share-link{ min-width:0; max-width:none; padding:1rem .45rem .85rem; gap:.55rem; }
    .dl-share-icon-svg{ width:34px; height:34px; }
    .dl-share-name{ font-size:.74rem; letter-spacing:.02em; }
}

/* ══════════════════════════════════════════════════════════════════════
   Bokeh-Lichtkugeln + Vignette – exakt wie im Solo-Menü, damit der
   Direktaufruf-Hintergrund identisch aussieht (nur z-index für body-Kontext).
   ══════════════════════════════════════════════════════════════════════ */
.dl-lobby-sparks{ position:fixed; inset:0; z-index:-2; pointer-events:none; overflow:hidden; }
.dl-lobby-sparks::before, .dl-lobby-sparks::after{
    content:''; position:absolute; left:-8%; right:-8%; top:-8%; bottom:-8%;
    background-repeat:no-repeat;
    filter:blur(1px);
    background-image:
        radial-gradient(circle 44px at 33.8% 17.9%, rgba(255,244,205,0.52) 0%, rgba(248,224,155,0.29) 32%, rgba(240,210,130,0.1) 56%, transparent 74%),
        radial-gradient(circle 38px at 79.6% 12.7%, rgba(255,244,205,0.52) 0%, rgba(248,224,155,0.29) 32%, rgba(240,210,130,0.1) 56%, transparent 74%),
        radial-gradient(circle 32px at 50.7% 7.4%, rgba(255,244,205,0.65) 0%, rgba(248,224,155,0.36) 32%, rgba(240,210,130,0.13) 56%, transparent 74%),
        radial-gradient(circle 18px at 26.1% 54.7%, rgba(255,244,205,0.79) 0%, rgba(248,224,155,0.43) 32%, rgba(240,210,130,0.16) 56%, transparent 74%),
        radial-gradient(circle 44px at 15.4% 24.5%, rgba(255,244,205,0.7) 0%, rgba(248,224,155,0.39) 32%, rgba(240,210,130,0.14) 56%, transparent 74%),
        radial-gradient(circle 18px at 9.7% 57.9%, rgba(255,244,205,0.84) 0%, rgba(248,224,155,0.46) 32%, rgba(240,210,130,0.17) 56%, transparent 74%),
        radial-gradient(circle 26px at 8.3% 83.0%, rgba(255,244,205,0.65) 0%, rgba(248,224,155,0.36) 32%, rgba(240,210,130,0.13) 56%, transparent 74%),
        radial-gradient(circle 38px at 53.7% 56.5%, rgba(255,244,205,0.79) 0%, rgba(248,224,155,0.43) 32%, rgba(240,210,130,0.16) 56%, transparent 74%);
    animation:dlOrb 34s ease-in-out infinite alternate, dlOrbFade 9s ease-in-out infinite;
    will-change:transform, opacity; transform:translateZ(0);
}
.dl-lobby-sparks::after{
    background-image:
        radial-gradient(circle 44px at 20.6% 57.5%, rgba(255,244,205,0.57) 0%, rgba(248,224,155,0.31) 32%, rgba(240,210,130,0.11) 56%, transparent 74%),
        radial-gradient(circle 38px at 13.0% 69.5%, rgba(255,244,205,0.52) 0%, rgba(248,224,155,0.29) 32%, rgba(240,210,130,0.1) 56%, transparent 74%),
        radial-gradient(circle 32px at 22.9% 66.6%, rgba(255,244,205,0.77) 0%, rgba(248,224,155,0.42) 32%, rgba(240,210,130,0.15) 56%, transparent 74%),
        radial-gradient(circle 26px at 46.8% 89.0%, rgba(255,244,205,0.6) 0%, rgba(248,224,155,0.33) 32%, rgba(240,210,130,0.12) 56%, transparent 74%),
        radial-gradient(circle 22px at 77.1% 68.3%, rgba(255,244,205,0.53) 0%, rgba(248,224,155,0.29) 32%, rgba(240,210,130,0.11) 56%, transparent 74%),
        radial-gradient(circle 26px at 31.6% 49.6%, rgba(255,244,205,0.76) 0%, rgba(248,224,155,0.42) 32%, rgba(240,210,130,0.15) 56%, transparent 74%);
    filter:blur(3px);
    animation:dlOrb 52s ease-in-out infinite alternate-reverse, dlOrbFade 13s ease-in-out infinite;
    opacity:.9; will-change:transform, opacity; transform:translateZ(0);
}
@keyframes dlOrb{
    0%{ transform:translate3d(0,0,0); }
    100%{ transform:translate3d(12px,-46px,0); }
}
@keyframes dlOrbFade{ 0%,100%{ opacity:1; } 50%{ opacity:.62; } }
@media (prefers-reduced-motion:reduce){
    .dl-lobby-sparks::before, .dl-lobby-sparks::after{ animation:dlOrbFade 10s ease-in-out infinite; }
}
@media (prefers-reduced-motion:reduce){
    .dl-lobby-sparks::before, .dl-lobby-sparks::after{ animation:none; }
}
/* ── Dezente Rand-Vignette (Mitte klar → Video sichtbar) ── */
.dl-lobby-veil{
    position:fixed; inset:0; z-index:-2; pointer-events:none;
    background:
        radial-gradient(130% 100% at 50% 44%, transparent 48%, rgba(3,4,9,0.52) 100%),
        linear-gradient(180deg, rgba(4,5,11,0.28) 0%, transparent 22%, transparent 70%, rgba(3,4,9,0.58) 100%);
}

/* Teamname groß halten: brand.css erzwingt .98rem !important auf alle Text-Inputs.
   Mit Kontext-Spezifität (2 Klassen bzw. ID+Klasse) + !important zurückholen –
   greift sowohl in der eigenständigen Lobby als auch im Solo-Panel. */
.duel-lobby-page .dl-name-input,
.duel-lobby-page .dl-name-input,
#team-select-overlay .dl-name-input{ font-size:1.6rem !important; font-family:'Cinzel',serif !important; }

/* FOUC vermeiden: DU-Karte erst zeigen, wenn die Team-Settings gesetzt sind
   (verhindert das kurze gold/Icon-Blanko vor dem ersten Poll).
   Fallback: erscheint spätestens nach 1.5s auch ohne .dl-ready, damit sie
   nie „verschwindet", falls der Poll ausbleibt. */
#dl-me{ opacity:0; animation:dlMeReveal .35s ease 1.5s forwards; }
#dl-me.dl-ready{ opacity:1; animation:none; }
@keyframes dlMeReveal{ to{ opacity:1; } }

/* ═══════════════════════════════════════════════════════════════════════
   Lobby-Feinschliff (2026-09): Gegner-Darstellung an „Du" angleichen,
   Farbkreis entfernen, Status/Untertitel/Bereit-Button prominenter,
   Gast-Hinweis. Reine Overrides – bestehende Regeln bleiben unberührt.
   ═══════════════════════════════════════════════════════════════════════ */
/* Untertitel prominenter ("Erstelle dein Team") */
.dl-subtitle{font-size:1.5rem;color:#e6e6f0;font-weight:500}

/* Gegner-Wappen exakt wie das eigene: gleiche Maße, gleiche Icon-Größe,
   gleicher Rahmen/Hintergrund. Ein Emoji füllt damit das Wappen wie beim
   eigenen Team. */
.dl-opp-banner{
    width:152px;height:182px;font-size:7rem;padding-bottom:12px;
    border-radius:12px 12px 44% 44%;
    border:2px solid color-mix(in srgb,var(--team-c) 62%,#0d1120);
    background:#0d1120;background-size:cover;background-position:center;background-repeat:no-repeat;
    box-shadow:inset 0 2px 12px rgba(0,0,0,.5),inset 0 0 42px color-mix(in srgb,var(--team-c) 20%,transparent);
}
/* Großer Farbkreis unter dem Gegner entfernen – die Farbe steckt schon im Wappen */
.dl-opp-color-wrap{display:none !important}
/* Gegner-Name wie eigener Teamname: gleiche Schrift/Größe, in der Team-Farbe */
.dl-opp-name{font-family:'Cinzel',serif;font-size:1.6rem;font-weight:700;margin-top:1.5rem;color:var(--team-c,#fff)}
/* Status prominent, nur „Bereit" / „Noch nicht bereit" */
.dl-opp-status{font-family:'Cinzel',serif;font-size:1.05rem;font-weight:600;letter-spacing:.06em;
    text-transform:uppercase;margin-top:.7rem;color:#c9a24a}
.dl-opp-ready .dl-opp-status{color:#5bbd86}

/* Bereit-Button bei beiden gleich groß und prominent */
.dl-ready-btn{min-width:12rem;font-size:1.5rem !important;padding:1rem 0.5rem !important;width:100%;max-width:18rem}

/* Gast-Hinweis (nicht angemeldete Spieler) – optisch wie die Sudden-Death-Box */
.dl-guest-hint{position:relative;z-index:2;margin-top:1.4rem;width:100%;padding:1rem 1.4rem;border-radius:16px;
    display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap;
    background:linear-gradient(180deg,
        color-mix(in srgb,var(--gold) 22%,rgba(11,15,30,.82)) 0%,
        color-mix(in srgb,var(--gold) 6%,rgba(11,15,30,.82)) 14%,
        rgba(11,15,30,.82) 26%,
        rgba(9,12,24,.85) 100%);
    border:1px solid color-mix(in srgb,var(--gold) 42%,rgba(212,173,69,.28));
    box-shadow:0 16px 40px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06)}
.dl-guest-hint-body{display:flex;align-items:center;gap:.7rem;text-align:left}
.dl-guest-hint-ic{color:#e8c56d;font-size:1.5rem;flex:none}
.dl-guest-hint-text{font-family:'Lora',serif;color:#ece1c4;font-size:1.2rem;line-height:1.4}
/* Registrier-CTA: dunkler Outline-Button (goldgelbe Kontur + Schrift). Der
   Gast-Block steht UNTER dem Bereit-Button und soll ihn nicht überstrahlen. */
.dl-guest-cta{flex:none;display:inline-flex;align-items:center;justify-content:center;
    padding:.6rem 1.25rem;border-radius:8px;
    background:linear-gradient(180deg,rgba(28,28,40,.96),rgba(12,12,20,.98));
    color:var(--gold-lt,#e8c56d);
    font-family:'Cinzel',serif;font-weight:700;font-size:.98rem;letter-spacing:.06em;text-transform:uppercase;
    text-decoration:none;border:1px solid var(--gold,#d4ad45);
    box-shadow:0 4px 14px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.05);
    transition:background .2s,color .2s,box-shadow .2s,transform .15s}
.dl-guest-cta:hover,.dl-guest-cta:focus-visible{
    background:linear-gradient(180deg,rgba(212,173,69,.16),rgba(212,173,69,.06)),
               linear-gradient(180deg,rgba(28,28,40,.96),rgba(12,12,20,.98));
    color:#f6dd8f;border-color:#f0d27b;
    box-shadow:0 6px 18px rgba(0,0,0,.5),0 0 14px rgba(212,173,69,.25);
    transform:translateY(-1px);text-decoration:none}
.dl-guest-hint{margin-top:1rem}

/* Untertitel „Erstelle dein Team": 1.6rem, spezifisch + !important, damit es
   nicht vom frühen clamp (~1.06rem) verkleinert wird. */
.dl-room .dl-subtitle{font-size:1.6rem !important}

/* Beide Spieler-Karten oben ausrichten (statt vertikal zentriert). Das behebt
   ZWEI Dinge auf einmal:
   1) Gegner-Wappen/Name saßen tiefer (margin:auto zentrierte sie) – jetzt auf
      gleicher Höhe wie das eigene Team.
   2) Der „Schub nach oben" beim Wechsel Avatar→Icon: Erschien der
      „Team speichern"-Button, wurde der zentrierte Inhalt nach oben gedrückt.
      Bei Oben-Ausrichtung wachsen solche Elemente nach unten – kein Springen. */
.dl-player{justify-content:flex-start}
.dl-player-opp .dl-opp-preview{margin:0 auto !important}

/* Eigenes Wappen ist nicht mehr anklickbar → kein Hover-Effekt, Standard-Cursor */
.dl-banner-preview{cursor:default}
.dl-banner-preview:hover{border-color:color-mix(in srgb,var(--team-c) 62%,#0d1120);transform:none}

/* Teamname klarer als Eingabefeld erkennbar: dezente vollständige Outline */
.dl-name-input{border:1px solid color-mix(in srgb,var(--team-c) 34%,rgba(255,255,255,.14));
    border-radius:8px;background:rgba(10,13,26,.35)}
.dl-name-input:focus{border-color:var(--gold-lt);border-bottom-color:var(--gold-lt);
    box-shadow:0 0 0 2px rgba(212,173,69,.18)}

/* Warte-auf-Gegner-Zustand an die Vorschau angleichen: Wappen oben (nicht
   vertikal zentriert) und der Text prominent wie der Bereit-Status. */
.dl-player-opp .dl-opp-waiting{margin:.3rem auto 0 !important;padding:0 !important}
.dl-opp-waiting p{font-family:'Cinzel',serif !important;font-size:1.05rem !important;font-weight:600;
    letter-spacing:.06em;text-transform:uppercase;color:#c9a24a !important;margin-top:1.5rem !important}

/* ═══════════════════════════════════════════════════════════════════════
   KLF-SLOT: LEERER "occupied"-ZUSTAND (Fallback)
   Nach dem Entfernen einer KLF-Karte (z.B. ausgelöste Falle) kann kurz die
   .occupied-Klasse ohne Karteninhalt zurückbleiben. Da .klf-slot.occupied per
   background:none!important transparent gesetzt wird, erscheint der Slot dann
   fast unsichtbar statt dunkel. Ein occupied-Slot OHNE Karteninhalt wird hier
   wieder exakt wie ein normaler leerer Slot eingefärbt.
   ═══════════════════════════════════════════════════════════════════════ */
.klf-slot.occupied:not(:has(.klf-card-face)):not(:has(.klf-card-back)):not(:has(.klf-flip-inner)){
    background:rgba(50,50,70,0.6) !important;
    border:1px dashed rgba(var(--tc,58,58,88),0.5) !important;
    box-shadow:none !important;
}