/*
 * MAERCHENPFAD_HALL_V3_STEP4_DESIGN_SYSTEM_START
 * Märchenpfad – Hall V3 Designsystem
 *
 * WICHTIG:
 * Diese Datei enthält auf Step 4 ausschließlich gekapselte Design-Tokens.
 * Es werden noch keine bestehenden Hallenkomponenten sichtbar umgestaltet.
 */

#view-hall.mp-hall-v3 {
    /* Gold */
    --mp-gold-050: #fff9e3;
    --mp-gold-100: #fff0b8;
    --mp-gold-200: #f9d978;
    --mp-gold-300: #eabb4d;
    --mp-gold-400: #d89b2d;
    --mp-gold-500: #b87518;
    --mp-gold-600: #7d460d;
    --mp-gold-700: #422307;

    /* Pergament */
    --mp-parchment-050: #fffdf5;
    --mp-parchment-100: #faeecf;
    --mp-parchment-200: #e8d29e;
    --mp-parchment-300: #c6a668;
    --mp-parchment-400: #876339;

    /* Holz */
    --mp-wood-100: #a96c3f;
    --mp-wood-200: #7c462a;
    --mp-wood-300: #512b1d;
    --mp-wood-400: #2d1712;
    --mp-wood-500: #160b09;

    /* Smaragd */
    --mp-emerald-100: #bff7d0;
    --mp-emerald-200: #67d99a;
    --mp-emerald-300: #22a968;
    --mp-emerald-400: #0c7049;
    --mp-emerald-500: #073d2e;

    /* Saphir */
    --mp-sapphire-100: #d3f0ff;
    --mp-sapphire-200: #70c9f4;
    --mp-sapphire-300: #2586c8;
    --mp-sapphire-400: #17548c;
    --mp-sapphire-500: #102c50;

    /* Rubin */
    --mp-ruby-100: #ffd4d8;
    --mp-ruby-200: #f5828c;
    --mp-ruby-300: #cf3e51;
    --mp-ruby-400: #8b1f35;
    --mp-ruby-500: #4f1225;

    /* Violett */
    --mp-violet-100: #ecd9ff;
    --mp-violet-200: #c18af3;
    --mp-violet-300: #8e50cc;
    --mp-violet-400: #5c2b91;
    --mp-violet-500: #351a58;

    /* Text und Nacht */
    --mp-ink-050: #fffdf7;
    --mp-ink-100: #f6efd9;
    --mp-ink-200: #d8cbaa;
    --mp-ink-300: #a7987c;
    --mp-ink-400: #665a4a;
    --mp-ink-500: #2c251f;
    --mp-night-100: #302849;
    --mp-night-200: #211a36;
    --mp-night-300: #151022;
    --mp-night-400: #0b0813;

    /* Semantische Farben */
    --mp-color-primary: var(--mp-gold-300);
    --mp-color-primary-strong: var(--mp-gold-500);
    --mp-color-success: var(--mp-emerald-300);
    --mp-color-info: var(--mp-sapphire-300);
    --mp-color-danger: var(--mp-ruby-300);
    --mp-color-magic: var(--mp-violet-300);
    --mp-color-text: var(--mp-ink-050);
    --mp-color-text-muted: var(--mp-ink-200);

    /* Typografie */
    --mp-font-display: Georgia, "Times New Roman", serif;
    --mp-font-body: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --mp-font-number: Inter, "Segoe UI", system-ui, sans-serif;

    --mp-font-size-xs: 0.75rem;
    --mp-font-size-sm: 0.875rem;
    --mp-font-size-md: 1rem;
    --mp-font-size-lg: 1.125rem;
    --mp-font-size-xl: clamp(1.35rem, 2vw, 1.75rem);
    --mp-font-size-2xl: clamp(1.75rem, 3vw, 2.6rem);
    --mp-font-size-hero: clamp(2.2rem, 5vw, 4.8rem);

    /* Abstände */
    --mp-space-2xs: 4px;
    --mp-space-xs: 8px;
    --mp-space-sm: 12px;
    --mp-space-md: 16px;
    --mp-space-lg: 24px;
    --mp-space-xl: 32px;
    --mp-space-2xl: 48px;
    --mp-space-3xl: 64px;

    /* Radien */
    --mp-radius-sm: 10px;
    --mp-radius-md: 16px;
    --mp-radius-lg: 24px;
    --mp-radius-xl: 34px;
    --mp-radius-pill: 999px;

    /* Rahmen */
    --mp-border-gold-thin: 1px solid rgba(234, 187, 77, 0.58);
    --mp-border-gold: 2px solid rgba(234, 187, 77, 0.76);
    --mp-border-gold-strong: 3px solid rgba(249, 217, 120, 0.92);

    /* Schatten und Licht */
    --mp-shadow-soft: 0 12px 30px rgba(9, 6, 16, 0.26);
    --mp-shadow-panel: 0 22px 55px rgba(9, 6, 16, 0.38);
    --mp-shadow-deep: 0 32px 90px rgba(5, 3, 10, 0.58);
    --mp-glow-gold: 0 0 22px rgba(234, 187, 77, 0.38);
    --mp-glow-blue: 0 0 24px rgba(112, 201, 244, 0.34);
    --mp-glow-violet: 0 0 26px rgba(193, 138, 243, 0.34);

    /* Oberflächen */
    --mp-surface-parchment:
        linear-gradient(
            145deg,
            rgba(255, 253, 245, 0.98),
            rgba(232, 210, 158, 0.96)
        );
    --mp-surface-wood:
        linear-gradient(
            145deg,
            rgba(124, 70, 42, 0.98),
            rgba(45, 23, 18, 0.98)
        );
    --mp-surface-velvet:
        linear-gradient(
            145deg,
            rgba(53, 26, 88, 0.96),
            rgba(21, 16, 34, 0.98)
        );
    --mp-surface-glass:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.16),
            rgba(255, 255, 255, 0.05)
        );

    /* Bewegung */
    --mp-motion-instant: 90ms;
    --mp-motion-fast: 160ms;
    --mp-motion-normal: 260ms;
    --mp-motion-slow: 480ms;
    --mp-motion-ceremony: 900ms;
    --mp-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
    --mp-ease-spring: cubic-bezier(0.2, 1.35, 0.35, 1);

    /* Layout */
    --mp-touch-target: 44px;
    --mp-content-max: 1680px;
    --mp-reading-max: 72ch;
}

/*
 * Hilfsklassen sind nur innerhalb der Hallenwurzel gültig.
 * Sie werden erst in späteren Schritten auf Komponenten angewendet.
 */
#view-hall.mp-hall-v3 .mp-token-display {
    font-family: var(--mp-font-display);
}

#view-hall.mp-hall-v3 .mp-token-body {
    font-family: var(--mp-font-body);
}

#view-hall.mp-hall-v3 .mp-token-focus:focus-visible {
    outline: 3px solid var(--mp-sapphire-200);
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    #view-hall.mp-hall-v3,
    #view-hall.mp-hall-v3 *,
    #view-hall.mp-hall-v3 *::before,
    #view-hall.mp-hall-v3 *::after {
        scroll-behavior: auto;
    }
}

/* MAERCHENPFAD_HALL_V3_STEP4_DESIGN_SYSTEM_END */

/* MAERCHENPFAD_HALL_V3_STEP6_BACKGROUND_START */

/*
 * STEP 6 – erster sichtbarer Umbau
 * Ausschließlich die Hallenwurzel erhält den neuen Hintergrund.
 */
#view-hall.mp-hall-v3 {
    position: relative;
    isolation: isolate;
    min-height: max(100vh, 860px);
    min-height: max(100dvh, 860px);
    padding-block: clamp(18px, 2.5vw, 38px) clamp(90px, 8vw, 132px);
    background-color: var(--mp-night-400, #0b0813);
    background-image:
        linear-gradient(
            180deg,
            rgba(7, 8, 24, 0.08) 0%,
            rgba(11, 8, 19, 0.16) 48%,
            rgba(9, 6, 16, 0.38) 100%
        ),
        url("backgrounds/hall-background-desktop.webp");
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    overflow: clip;
}

/*
 * Licht und Nebel liegen hinter allen Halleninhalten.
 * Die generierten Ebenen dürfen auch dann verwendet werden,
 * wenn sie keine echte Transparenz besitzen: Blend-Modus und geringe
 * Deckkraft verhindern ein Überdecken der Oberfläche.
 */
#view-hall.mp-hall-v3::before,
#view-hall.mp-hall-v3::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset-inline: 0;
    pointer-events: none;
    background-repeat: no-repeat;
}

#view-hall.mp-hall-v3::before {
    inset-block: 0;
    background-image: url("effects/hall-light-overlay.webp");
    background-position: center top;
    background-size: cover;
    mix-blend-mode: screen;
    opacity: 0.10;
    filter: saturate(1.08) contrast(1.04);
}

#view-hall.mp-hall-v3::after {
    top: auto;
    bottom: 0;
    height: min(46vh, 620px);
    background-image:
        linear-gradient(
            180deg,
            rgba(11, 8, 19, 0) 0%,
            rgba(11, 8, 19, 0.08) 45%,
            rgba(11, 8, 19, 0.22) 100%
        ),
        url("effects/hall-mist-overlay.webp");
    background-position: center bottom;
    background-size: cover;
    mix-blend-mode: screen;
    opacity: 0.075;
    filter: blur(1.5px) saturate(0.88);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 34%, #000 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 34%, #000 100%);
}

/*
 * Die bestehenden Halleninhalte bleiben vor den neuen Ebenen.
 * Es werden weder Layout noch Kartenstruktur verändert.
 */
#view-hall.mp-hall-v3 > * {
    position: relative;
    z-index: 1;
}

@media (max-width: 900px) {
    #view-hall.mp-hall-v3 {
        min-height: 100dvh;
        padding-block: 12px 104px;
        background-image:
            linear-gradient(
                180deg,
                rgba(5, 8, 24, 0.06) 0%,
                rgba(9, 7, 20, 0.16) 52%,
                rgba(9, 6, 16, 0.42) 100%
            ),
            url("backgrounds/hall-background-mobile.webp");
        background-position: center top;
        background-size: cover;
        background-attachment: scroll;
    }

    #view-hall.mp-hall-v3::before {
        background-position: center top;
        opacity: 0.075;
    }

    #view-hall.mp-hall-v3::after {
        height: min(38vh, 460px);
        opacity: 0.055;
    }
}

@media (max-width: 600px) {
    #view-hall.mp-hall-v3 {
        background-position: 50% top;
    }
}

@media (prefers-reduced-motion: reduce) {
    #view-hall.mp-hall-v3 {
        background-attachment: scroll;
    }
}

/* MAERCHENPFAD_HALL_V3_STEP6_BACKGROUND_END */

/* MAERCHENPFAD_HALL_V3_STEP7_HERO_START */

/*
 * STEP 7 – Märchenhafter Willkommensbereich
 * Nur die vorhandene .hero-banner innerhalb der Hallenwurzel wird gestaltet.
 */
#view-hall.mp-hall-v3 .hero-banner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(220px, 0.55fr);
    align-items: center;
    gap: clamp(18px, 3vw, 48px);
    width: min(100%, 1600px);
    min-height: clamp(330px, 28vw, 500px);
    margin-inline: auto;
    padding:
        clamp(54px, 6vw, 92px)
        clamp(58px, 7vw, 118px);
    border: 0;
    border-radius: 0;
    background:
        url("frames/hero-frame.webp")
        center / 100% 100%
        no-repeat;
    box-shadow: none;
    overflow: visible;
    isolation: isolate;
}

#view-hall.mp-hall-v3 .hero-banner::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 8% 5%;
    border-radius: clamp(20px, 3vw, 42px);
    background:
        radial-gradient(
            circle at 74% 42%,
            rgba(112, 201, 244, 0.12),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            rgba(14, 12, 32, 0.24),
            rgba(32, 20, 54, 0.08)
        );
    pointer-events: none;
}

#view-hall.mp-hall-v3 .hero-banner::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 9%;
    right: 9%;
    bottom: 10%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(249, 217, 120, 0.35),
        transparent
    );
    pointer-events: none;
}

#view-hall.mp-hall-v3 .hero-banner > * {
    position: relative;
    z-index: 1;
}

#view-hall.mp-hall-v3 .hero-copy {
    max-width: 760px;
    padding: clamp(8px, 1vw, 18px);
}

#view-hall.mp-hall-v3 .hero-copy .eyebrow {
    margin: 0 0 10px;
    color: var(--mp-gold-200, #f9d978);
    font-family: var(--mp-font-body);
    font-size: clamp(0.72rem, 1vw, 0.88rem);
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.56);
}

#view-hall.mp-hall-v3 .hero-copy h2 {
    max-width: 14ch;
    margin: 0;
    color: var(--mp-gold-100, #fff0b8);
    font-family: var(--mp-font-display);
    font-size: clamp(2.5rem, 5vw, 5.35rem);
    line-height: 0.96;
    letter-spacing: -0.025em;
    text-wrap: balance;
    text-shadow:
        0 3px 0 rgba(66, 35, 7, 0.72),
        0 12px 28px rgba(0, 0, 0, 0.48);
}

#view-hall.mp-hall-v3 .hero-copy h2 span {
    color: var(--mp-gold-200, #f9d978);
}

#view-hall.mp-hall-v3 .hero-copy > p:not(.eyebrow) {
    max-width: 64ch;
    margin: clamp(14px, 2vw, 24px) 0 0;
    color: var(--mp-ink-100, #f6efd9);
    font-size: clamp(0.96rem, 1.2vw, 1.12rem);
    line-height: 1.65;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.68);
}

#view-hall.mp-hall-v3 .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: clamp(20px, 2.5vw, 30px);
}

#view-hall.mp-hall-v3 .hero-actions .btn {
    min-height: var(--mp-touch-target, 44px);
    padding: 12px 18px;
    border-radius: 14px;
    font-weight: 900;
}

#view-hall.mp-hall-v3 .hero-actions .btn-primary {
    border-color: rgba(255, 240, 184, 0.9);
    color: #281605;
    background:
        linear-gradient(
            180deg,
            #fff0a8 0%,
            #e7b83e 62%,
            #b87518 100%
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        0 8px 20px rgba(11, 8, 19, 0.38),
        var(--mp-glow-gold);
}

#view-hall.mp-hall-v3 .hero-actions .btn-secondary {
    border-color: rgba(249, 217, 120, 0.32);
    color: var(--mp-gold-100, #fff0b8);
    background:
        linear-gradient(
            145deg,
            rgba(81, 43, 29, 0.82),
            rgba(22, 11, 9, 0.9)
        );
}

#view-hall.mp-hall-v3 .hero-castle {
    display: grid;
    place-items: center;
    min-width: 0;
    padding: clamp(8px, 1.5vw, 20px);
    filter:
        drop-shadow(0 18px 24px rgba(0, 0, 0, 0.44))
        saturate(1.08);
}

#view-hall.mp-hall-v3 .hero-castle .moon {
    opacity: 0.88;
}

#view-hall.mp-hall-v3 .hero-castle .castle {
    transform: scale(1.04);
    transform-origin: center bottom;
}

@media (max-width: 900px) {
    #view-hall.mp-hall-v3 .hero-banner {
        grid-template-columns: 1fr;
        gap: 6px;
        min-height: 760px;
        padding:
            clamp(86px, 15vw, 132px)
            clamp(46px, 9vw, 86px)
            clamp(72px, 12vw, 110px);
        background-image: url("frames/hero-frame-mobile.webp");
        background-size: 100% 100%;
    }

    #view-hall.mp-hall-v3 .hero-copy {
        align-self: end;
        max-width: none;
        padding: 0;
        text-align: center;
    }

    #view-hall.mp-hall-v3 .hero-copy h2 {
        max-width: 12ch;
        margin-inline: auto;
        font-size: clamp(2.25rem, 10vw, 4.4rem);
    }

    #view-hall.mp-hall-v3 .hero-copy > p:not(.eyebrow) {
        max-width: 42ch;
        margin-inline: auto;
    }

    #view-hall.mp-hall-v3 .hero-actions {
        justify-content: center;
    }

    #view-hall.mp-hall-v3 .hero-castle {
        grid-row: 1;
        min-height: 210px;
        padding-top: 14px;
        transform: scale(0.92);
        transform-origin: center bottom;
    }

    #view-hall.mp-hall-v3 .hero-banner::after {
        bottom: 8%;
    }
}

@media (max-width: 600px) {
    #view-hall.mp-hall-v3 .hero-banner {
        min-height: 660px;
        padding:
            70px
            clamp(34px, 8vw, 56px)
            62px;
    }

    #view-hall.mp-hall-v3 .hero-copy .eyebrow {
        font-size: 0.68rem;
    }

    #view-hall.mp-hall-v3 .hero-copy h2 {
        font-size: clamp(2rem, 11vw, 3.5rem);
    }

    #view-hall.mp-hall-v3 .hero-copy > p:not(.eyebrow) {
        font-size: 0.94rem;
        line-height: 1.55;
    }

    #view-hall.mp-hall-v3 .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: min(100%, 320px);
        margin-inline: auto;
    }

    #view-hall.mp-hall-v3 .hero-actions .btn {
        width: 100%;
    }

    #view-hall.mp-hall-v3 .hero-castle {
        min-height: 170px;
        transform: scale(0.78);
    }
}

/* MAERCHENPFAD_HALL_V3_STEP7_HERO_END */

/* MAERCHENPFAD_HALL_V3_STEP7A_HERO_FRAME_TRANSPARENT_START */

/*
 * STEP 7A – Nur den Rahmen sichtbar lassen
 * Die Innenfläche des Bildes wird nicht mehr als Hintergrund verwendet.
 * Stattdessen werden nur die Ränder des Rahmens per border-image dargestellt.
 */
#view-hall.mp-hall-v3 .hero-banner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(220px, 0.55fr);
    align-items: center;
    gap: clamp(18px, 3vw, 48px);
    width: min(100%, 1600px);
    min-height: clamp(330px, 28vw, 500px);
    margin-inline: auto;
    padding:
        clamp(54px, 6vw, 92px)
        clamp(58px, 7vw, 118px);
    border-style: solid;
    border-width: 56px;
    border-color: transparent;
    border-image-source: url("frames/hero-frame.webp");
    border-image-slice: 150 fill;
    border-image-repeat: stretch;
    border-image-width: 56px;
    border-radius: 0;
    background:
        radial-gradient(
            circle at 74% 42%,
            rgba(112, 201, 244, 0.08),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            rgba(10, 10, 24, 0.08),
            rgba(24, 18, 38, 0.04)
        );
    box-shadow: none;
    overflow: visible;
    isolation: isolate;
}

#view-hall.mp-hall-v3 .hero-banner::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            180deg,
            rgba(12, 10, 24, 0.03),
            rgba(12, 10, 24, 0.02)
        );
}

#view-hall.mp-hall-v3 .hero-banner::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 8%;
    right: 8%;
    bottom: 8%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(249, 217, 120, 0.22),
        transparent
    );
    pointer-events: none;
}

#view-hall.mp-hall-v3 .hero-banner > * {
    position: relative;
    z-index: 1;
}

#view-hall.mp-hall-v3 .hero-copy {
    max-width: 760px;
    padding: 0;
}

#view-hall.mp-hall-v3 .hero-copy .eyebrow {
    margin: 0 0 10px;
    color: var(--mp-gold-200, #f9d978);
    font-family: var(--mp-font-body, Inter, sans-serif);
    font-size: clamp(0.72rem, 1vw, 0.88rem);
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.56);
}

#view-hall.mp-hall-v3 .hero-copy h2 {
    max-width: 14ch;
    margin: 0;
    color: var(--mp-gold-100, #fff0b8);
    font-family: var(--mp-font-display, Georgia, serif);
    font-size: clamp(2.5rem, 5vw, 5.35rem);
    line-height: 0.96;
    letter-spacing: -0.025em;
    text-wrap: balance;
    text-shadow:
        0 3px 0 rgba(66, 35, 7, 0.72),
        0 12px 28px rgba(0, 0, 0, 0.48);
}

#view-hall.mp-hall-v3 .hero-copy h2 span {
    color: var(--mp-gold-200, #f9d978);
}

#view-hall.mp-hall-v3 .hero-copy > p:not(.eyebrow) {
    max-width: 64ch;
    margin: clamp(14px, 2vw, 24px) 0 0;
    color: var(--mp-ink-100, #f6efd9);
    font-size: clamp(0.96rem, 1.2vw, 1.12rem);
    line-height: 1.65;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.68);
}

#view-hall.mp-hall-v3 .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: clamp(20px, 2.5vw, 30px);
}

#view-hall.mp-hall-v3 .hero-actions .btn {
    min-height: var(--mp-touch-target, 44px);
    padding: 12px 18px;
    border-radius: 14px;
    font-weight: 900;
}

#view-hall.mp-hall-v3 .hero-actions .btn-primary {
    border-color: rgba(255, 240, 184, 0.9);
    color: #281605;
    background:
        linear-gradient(
            180deg,
            #fff0a8 0%,
            #e7b83e 62%,
            #b87518 100%
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        0 8px 20px rgba(11, 8, 19, 0.38),
        var(--mp-glow-gold, 0 0 22px rgba(234, 187, 77, 0.38));
}

#view-hall.mp-hall-v3 .hero-actions .btn-secondary {
    border-color: rgba(249, 217, 120, 0.32);
    color: var(--mp-gold-100, #fff0b8);
    background:
        linear-gradient(
            145deg,
            rgba(81, 43, 29, 0.82),
            rgba(22, 11, 9, 0.9)
        );
}

#view-hall.mp-hall-v3 .hero-castle {
    display: grid;
    place-items: center;
    min-width: 0;
    padding: clamp(8px, 1.5vw, 20px);
    filter:
        drop-shadow(0 18px 24px rgba(0, 0, 0, 0.44))
        saturate(1.08);
}

#view-hall.mp-hall-v3 .hero-castle .moon {
    opacity: 0.88;
}

#view-hall.mp-hall-v3 .hero-castle .castle {
    transform: scale(1.04);
    transform-origin: center bottom;
}

@media (max-width: 900px) {
    #view-hall.mp-hall-v3 .hero-banner {
        grid-template-columns: 1fr;
        gap: 6px;
        min-height: 760px;
        padding:
            clamp(86px, 15vw, 132px)
            clamp(46px, 9vw, 86px)
            clamp(72px, 12vw, 110px);
        border-width: 44px;
        border-image-source: url("frames/hero-frame-mobile.webp");
        border-image-slice: 145 fill;
        border-image-width: 44px;
    }

    #view-hall.mp-hall-v3 .hero-copy {
        align-self: end;
        max-width: none;
        text-align: center;
    }

    #view-hall.mp-hall-v3 .hero-copy h2 {
        max-width: 12ch;
        margin-inline: auto;
        font-size: clamp(2.25rem, 10vw, 4.4rem);
    }

    #view-hall.mp-hall-v3 .hero-copy > p:not(.eyebrow) {
        max-width: 42ch;
        margin-inline: auto;
    }

    #view-hall.mp-hall-v3 .hero-actions {
        justify-content: center;
    }

    #view-hall.mp-hall-v3 .hero-castle {
        grid-row: 1;
        min-height: 210px;
        padding-top: 14px;
        transform: scale(0.92);
        transform-origin: center bottom;
    }

    #view-hall.mp-hall-v3 .hero-banner::after {
        bottom: 8%;
    }
}

@media (max-width: 600px) {
    #view-hall.mp-hall-v3 .hero-banner {
        min-height: 660px;
        padding:
            70px
            clamp(34px, 8vw, 56px)
            62px;
        border-width: 38px;
        border-image-width: 38px;
    }

    #view-hall.mp-hall-v3 .hero-copy .eyebrow {
        font-size: 0.68rem;
    }

    #view-hall.mp-hall-v3 .hero-copy h2 {
        font-size: clamp(2rem, 11vw, 3.5rem);
    }

    #view-hall.mp-hall-v3 .hero-copy > p:not(.eyebrow) {
        font-size: 0.94rem;
        line-height: 1.55;
    }

    #view-hall.mp-hall-v3 .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: min(100%, 320px);
        margin-inline: auto;
    }

    #view-hall.mp-hall-v3 .hero-actions .btn {
        width: 100%;
    }

    #view-hall.mp-hall-v3 .hero-castle {
        min-height: 170px;
        transform: scale(0.78);
    }
}

/* MAERCHENPFAD_HALL_V3_STEP7A_HERO_FRAME_TRANSPARENT_END */

/* MAERCHENPFAD_HALL_V3_STEP8_FRAMES_START */

/*
 * STEP 8 – Rahmenpaket
 * Dieses CSS bindet die bisher finalen Rahmen ein.
 * Es ist bewusst innerhalb von #view-hall.mp-hall-v3 gekapselt.
 */

/* -------------------------------
   1) Untere Desktop-Navigation
-------------------------------- */
#view-hall.mp-hall-v3 .mp-bottom-nav,
#view-hall.mp-hall-v3 .hall-bottom-nav,
#view-hall.mp-hall-v3 .bottom-navigation,
#view-hall.mp-hall-v3 .hall-navigation,
#view-hall.mp-hall-v3 nav.mp-hall-navigation {
    position: relative;
    z-index: 4;
    width: min(100%, 1609px);
    min-height: 172px;
    margin: 22px auto 0;
    padding: 14px 46px 24px;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: stretch;
    gap: 0;
    background: url("navigation/navigation-frame-desktop.png") center / 100% 100% no-repeat;
    overflow: visible;
    isolation: isolate;
}

#view-hall.mp-hall-v3 .mp-bottom-nav > *,
#view-hall.mp-hall-v3 .hall-bottom-nav > *,
#view-hall.mp-hall-v3 .bottom-navigation > *,
#view-hall.mp-hall-v3 .hall-navigation > *,
#view-hall.mp-hall-v3 nav.mp-hall-navigation > * {
    min-height: 118px;
    display: grid;
    place-items: center;
    text-align: center;
    position: relative;
    z-index: 1;
}

#view-hall.mp-hall-v3 .mp-bottom-nav a,
#view-hall.mp-hall-v3 .hall-bottom-nav a,
#view-hall.mp-hall-v3 .bottom-navigation a,
#view-hall.mp-hall-v3 .hall-navigation a,
#view-hall.mp-hall-v3 nav.mp-hall-navigation a {
    color: #f7deb1;
    font-family: Georgia, serif;
    font-size: clamp(1rem, 1.35vw, 1.28rem);
    font-weight: 700;
    text-decoration: none;
    text-shadow: 0 2px 10px rgba(0,0,0,.52);
}

#view-hall.mp-hall-v3 .mp-bottom-nav .is-active a,
#view-hall.mp-hall-v3 .hall-bottom-nav .is-active a,
#view-hall.mp-hall-v3 .bottom-navigation .is-active a,
#view-hall.mp-hall-v3 .hall-navigation .is-active a,
#view-hall.mp-hall-v3 nav.mp-hall-navigation .is-active a {
    color: #ffd86e;
}

/* -------------------------------
   2) Seitenboxen / Statistik-Frame
-------------------------------- */
#view-hall.mp-hall-v3 .hall-side-frame,
#view-hall.mp-hall-v3 .hall-panel--stats,
#view-hall.mp-hall-v3 .hall-panel--medals,
#view-hall.mp-hall-v3 .hall-panel--chronicle,
#view-hall.mp-hall-v3 .hall-panel--players,
#view-hall.mp-hall-v3 .stats-frame,
#view-hall.mp-hall-v3 .medals-frame,
#view-hall.mp-hall-v3 .chronicle-frame,
#view-hall.mp-hall-v3 .players-frame {
    position: relative;
    min-height: 320px;
    padding: 34px 34px 38px;
    border: 0;
    border-radius: 0;
    background:
        linear-gradient(180deg, rgba(24, 11, 38, 0.06), rgba(11, 7, 21, 0.02)),
        url("stats/stats-frame.png") center / 100% 100% no-repeat;
    box-shadow: none;
    overflow: visible;
}

#view-hall.mp-hall-v3 .hall-side-frame .panel-title,
#view-hall.mp-hall-v3 .hall-panel--stats .panel-title,
#view-hall.mp-hall-v3 .hall-panel--medals .panel-title,
#view-hall.mp-hall-v3 .hall-panel--chronicle .panel-title,
#view-hall.mp-hall-v3 .hall-panel--players .panel-title,
#view-hall.mp-hall-v3 .stats-frame .panel-title,
#view-hall.mp-hall-v3 .medals-frame .panel-title,
#view-hall.mp-hall-v3 .chronicle-frame .panel-title,
#view-hall.mp-hall-v3 .players-frame .panel-title {
    margin: 0 0 18px;
    color: #f7deb1;
    font-family: Georgia, serif;
    font-size: clamp(1.25rem, 1.7vw, 1.9rem);
    font-weight: 700;
    text-shadow: 0 2px 10px rgba(0,0,0,.56);
}

/* -------------------------------
   3) Großer Raumlisten-Rahmen
-------------------------------- */
#view-hall.mp-hall-v3 .room-list-frame,
#view-hall.mp-hall-v3 .hall-panel--rooms,
#view-hall.mp-hall-v3 .public-rooms-frame,
#view-hall.mp-hall-v3 .room-list-shell,
#view-hall.mp-hall-v3 .rooms-shell {
    position: relative;
    min-height: 1040px;
    padding: 54px 38px 168px;
    border: 0;
    border-radius: 0;
    background:
        linear-gradient(180deg, rgba(19, 11, 36, 0.10), rgba(14, 8, 26, 0.04)),
        url("rooms/room-list-frame.png") center top / 100% 100% no-repeat;
    box-shadow: none;
    overflow: visible;
    isolation: isolate;
}

#view-hall.mp-hall-v3 .room-list-frame .panel-title,
#view-hall.mp-hall-v3 .hall-panel--rooms .panel-title,
#view-hall.mp-hall-v3 .public-rooms-frame .panel-title,
#view-hall.mp-hall-v3 .room-list-shell .panel-title,
#view-hall.mp-hall-v3 .rooms-shell .panel-title {
    margin: 0 0 16px;
    color: #f7deb1;
    font-family: Georgia, serif;
    font-size: clamp(1.5rem, 2vw, 2.35rem);
    font-weight: 700;
    text-shadow: 0 2px 10px rgba(0,0,0,.56);
}

#view-hall.mp-hall-v3 .room-list-frame .room-search,
#view-hall.mp-hall-v3 .hall-panel--rooms .room-search,
#view-hall.mp-hall-v3 .public-rooms-frame .room-search,
#view-hall.mp-hall-v3 .room-list-shell .room-search,
#view-hall.mp-hall-v3 .rooms-shell .room-search {
    width: min(100%, 360px);
    margin-left: auto;
}

#view-hall.mp-hall-v3 .room-list-frame .room-list-actions,
#view-hall.mp-hall-v3 .hall-panel--rooms .room-list-actions,
#view-hall.mp-hall-v3 .public-rooms-frame .room-list-actions,
#view-hall.mp-hall-v3 .room-list-shell .room-list-actions,
#view-hall.mp-hall-v3 .rooms-shell .room-list-actions {
    position: absolute;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    width: min(92%, 840px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
}

@media (max-width: 1100px) {
    #view-hall.mp-hall-v3 .mp-bottom-nav,
    #view-hall.mp-hall-v3 .hall-bottom-nav,
    #view-hall.mp-hall-v3 .bottom-navigation,
    #view-hall.mp-hall-v3 .hall-navigation,
    #view-hall.mp-hall-v3 nav.mp-hall-navigation {
        width: min(100%, 980px);
        min-height: 146px;
        padding: 14px 24px 22px;
        background-size: cover;
    }

    #view-hall.mp-hall-v3 .room-list-frame,
    #view-hall.mp-hall-v3 .hall-panel--rooms,
    #view-hall.mp-hall-v3 .public-rooms-frame,
    #view-hall.mp-hall-v3 .room-list-shell,
    #view-hall.mp-hall-v3 .rooms-shell {
        min-height: 900px;
        padding: 48px 28px 152px;
    }
}

@media (max-width: 820px) {
    #view-hall.mp-hall-v3 .mp-bottom-nav,
    #view-hall.mp-hall-v3 .hall-bottom-nav,
    #view-hall.mp-hall-v3 .bottom-navigation,
    #view-hall.mp-hall-v3 .hall-navigation,
    #view-hall.mp-hall-v3 nav.mp-hall-navigation {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 6px;
        min-height: 220px;
        padding: 12px 16px 20px;
        background-size: 100% 100%;
    }

    #view-hall.mp-hall-v3 .mp-bottom-nav > *,
    #view-hall.mp-hall-v3 .hall-bottom-nav > *,
    #view-hall.mp-hall-v3 .bottom-navigation > *,
    #view-hall.mp-hall-v3 .hall-navigation > *,
    #view-hall.mp-hall-v3 nav.mp-hall-navigation > * {
        min-height: 84px;
    }

    #view-hall.mp-hall-v3 .hall-side-frame,
    #view-hall.mp-hall-v3 .hall-panel--stats,
    #view-hall.mp-hall-v3 .hall-panel--medals,
    #view-hall.mp-hall-v3 .hall-panel--chronicle,
    #view-hall.mp-hall-v3 .hall-panel--players,
    #view-hall.mp-hall-v3 .stats-frame,
    #view-hall.mp-hall-v3 .medals-frame,
    #view-hall.mp-hall-v3 .chronicle-frame,
    #view-hall.mp-hall-v3 .players-frame {
        min-height: 260px;
        padding: 28px 24px 32px;
    }

    #view-hall.mp-hall-v3 .room-list-frame,
    #view-hall.mp-hall-v3 .hall-panel--rooms,
    #view-hall.mp-hall-v3 .public-rooms-frame,
    #view-hall.mp-hall-v3 .room-list-shell,
    #view-hall.mp-hall-v3 .rooms-shell {
        min-height: 760px;
        padding: 40px 20px 132px;
    }

    #view-hall.mp-hall-v3 .room-list-frame .room-list-actions,
    #view-hall.mp-hall-v3 .hall-panel--rooms .room-list-actions,
    #view-hall.mp-hall-v3 .public-rooms-frame .room-list-actions,
    #view-hall.mp-hall-v3 .room-list-shell .room-list-actions,
    #view-hall.mp-hall-v3 .rooms-shell .room-list-actions {
        width: min(92%, 520px);
        grid-template-columns: 1fr;
        gap: 14px;
        bottom: 20px;
    }
}

/* MAERCHENPFAD_HALL_V3_STEP8_FRAMES_END */

/* MAERCHENPFAD_HALL_V3_STEP9_LAYOUT_START */

/*
 * STEP 9 – verbindliches 3-Spalten-Layout
 * Referenz:
 * links Medaillen + Statistiken
 * Mitte Raumliste
 * rechts Tageschronik + aktive Spieler
 * unten märchenhafte Navigation
 */

#view-hall.mp-hall-v3 {
    --mp-layout-gap: clamp(14px, 1.4vw, 24px);
    --mp-side-width: clamp(250px, 20vw, 340px);
    --mp-right-width: clamp(250px, 19vw, 330px);
}

/* Alter großer Hero-Bereich wird nicht mehr verwendet. */
#view-hall.mp-hall-v3 > .hero-banner,
#view-hall.mp-hall-v3 .hall-grid > .hero-banner,
#view-hall.mp-hall-v3 .mp-legacy-hero-hidden {
    display: none !important;
}

/* Alte Grid-/Sidebar-Hüllen dürfen das neue Layout nicht einschränken. */
#view-hall.mp-hall-v3 > .hall-grid,
#view-hall.mp-hall-v3 .hall-grid.mp-layout-source {
    display: contents !important;
}

#view-hall.mp-hall-v3 .hall-sidebar.mp-layout-source {
    display: contents !important;
}

#view-hall.mp-hall-v3 .mp-hall-layout-v9 {
    position: relative;
    z-index: 2;
    width: min(calc(100% - 28px), 1840px);
    margin-inline: auto;
    padding: clamp(12px, 1.4vw, 24px) 0 0;
}

/* Kompaktes Banner statt riesigem Hero. */
#view-hall.mp-hall-v3 .mp-welcome-ribbon {
    position: relative;
    width: min(760px, calc(100% - 28px));
    min-height: 112px;
    margin: 0 auto clamp(14px, 1.5vw, 24px);
    padding: 22px 48px 26px;
    display: grid;
    place-items: center;
    text-align: center;
    color: #f8e4b6;
    background:
        radial-gradient(circle at 50% 0%, rgba(187, 83, 226, 0.24), transparent 50%),
        linear-gradient(180deg, rgba(88, 18, 91, 0.96), rgba(52, 12, 63, 0.98));
    border: 2px solid rgba(224, 177, 72, 0.72);
    border-radius: 22px 22px 42px 42px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        0 14px 32px rgba(0,0,0,.34),
        0 0 20px rgba(161, 67, 214, 0.20);
    overflow: visible;
    isolation: isolate;
}

#view-hall.mp-hall-v3 .mp-welcome-ribbon::before,
#view-hall.mp-hall-v3 .mp-welcome-ribbon::after {
    content: "";
    position: absolute;
    top: 22%;
    width: 130px;
    height: 58%;
    z-index: -1;
    background: linear-gradient(180deg, #712267, #421141);
    border: 2px solid rgba(224, 177, 72, 0.64);
}

#view-hall.mp-hall-v3 .mp-welcome-ribbon::before {
    right: calc(100% - 18px);
    transform: skewY(-8deg);
    border-radius: 22px 0 0 22px;
}

#view-hall.mp-hall-v3 .mp-welcome-ribbon::after {
    left: calc(100% - 18px);
    transform: skewY(8deg);
    border-radius: 0 22px 22px 0;
}

#view-hall.mp-hall-v3 .mp-welcome-ribbon h1,
#view-hall.mp-hall-v3 .mp-welcome-ribbon h2 {
    margin: 0;
    color: #ffe3a0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.65rem, 2.3vw, 2.65rem);
    line-height: 1.05;
    text-shadow: 0 3px 0 rgba(78, 32, 10, .55), 0 8px 20px rgba(0,0,0,.38);
}

#view-hall.mp-hall-v3 .mp-welcome-ribbon p {
    margin: 8px 0 0;
    color: #f5dfb4;
    font-size: clamp(.88rem, 1vw, 1.02rem);
    line-height: 1.4;
}

/* Hauptlayout */
#view-hall.mp-hall-v3 .mp-hall-columns {
    display: grid;
    grid-template-columns:
        minmax(0, var(--mp-side-width))
        minmax(480px, 1fr)
        minmax(0, var(--mp-right-width));
    gap: var(--mp-layout-gap);
    align-items: start;
}

#view-hall.mp-hall-v3 .mp-hall-column {
    min-width: 0;
    display: grid;
    gap: var(--mp-layout-gap);
    align-content: start;
}

#view-hall.mp-hall-v3 .mp-hall-column--center {
    min-width: 0;
}

/* Gemeinsame Titelbänder */
#view-hall.mp-hall-v3 .mp-panel-title {
    position: relative;
    z-index: 3;
    width: min(88%, 320px);
    margin: -10px auto 10px;
    padding: 10px 18px 12px;
    color: #f7ddb0;
    text-align: center;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1rem, 1.25vw, 1.34rem);
    font-weight: 700;
    line-height: 1.1;
    background: linear-gradient(180deg, #76286e, #441645);
    border: 1px solid rgba(224, 177, 72, .56);
    border-radius: 12px 12px 26px 26px;
    box-shadow: 0 7px 16px rgba(0,0,0,.34);
    text-shadow: 0 2px 8px rgba(0,0,0,.55);
}

/* Seitenrahmen */
#view-hall.mp-hall-v3 .mp-side-panel {
    position: relative;
    min-width: 0;
    padding: 32px 28px 34px;
    background:
        linear-gradient(180deg, rgba(36, 19, 46, .18), rgba(14, 9, 24, .08)),
        url("stats/stats-frame.png") center / 100% 100% no-repeat;
    border: 0;
    box-shadow: none;
    overflow: visible;
}

#view-hall.mp-hall-v3 .mp-side-panel--medals {
    min-height: 430px;
}

#view-hall.mp-hall-v3 .mp-side-panel--stats {
    min-height: 310px;
}

#view-hall.mp-hall-v3 .mp-side-panel--chronicle {
    min-height: 360px;
}

#view-hall.mp-hall-v3 .mp-side-panel--players {
    min-height: 390px;
}

/* Bestehende Kartenhintergründe neutralisieren. */
#view-hall.mp-hall-v3 .mp-side-panel > .side-card,
#view-hall.mp-hall-v3 .mp-side-panel > .daily-card,
#view-hall.mp-hall-v3 .mp-side-panel > .online-card,
#view-hall.mp-hall-v3 .mp-side-panel > .stat-strip,
#view-hall.mp-hall-v3 .mp-side-panel > .achievements-grid,
#view-hall.mp-hall-v3 .mp-side-panel > #achievementsGrid,
#view-hall.mp-hall-v3 .mp-side-panel > #onlinePreview {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* Medaillen */
#view-hall.mp-hall-v3 .mp-side-panel--medals #achievementsGrid,
#view-hall.mp-hall-v3 .mp-side-panel--medals .achievements-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

#view-hall.mp-hall-v3 .mp-side-panel--medals .achievement {
    min-width: 0;
    min-height: 92px;
    padding: 8px;
    border: 1px solid rgba(212, 167, 73, .32);
    border-radius: 12px;
    background: rgba(21, 10, 30, .66);
    box-shadow: inset 0 0 18px rgba(0,0,0,.28);
}

/* Statistikstreifen wird zur vertikalen Liste. */
#view-hall.mp-hall-v3 .mp-side-panel--stats .stat-strip {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

#view-hall.mp-hall-v3 .mp-side-panel--stats .stat-card,
#view-hall.mp-hall-v3 .mp-side-panel--stats .stat-item,
#view-hall.mp-hall-v3 .mp-side-panel--stats .stat {
    min-height: 48px;
    display: grid;
    grid-template-columns: 42px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 0;
    border-bottom: 1px solid rgba(225, 181, 83, .17);
    border-radius: 0;
    background: transparent;
}

/* Raumliste als Zentrum */
#view-hall.mp-hall-v3 .mp-room-panel {
    position: relative;
    min-height: 830px;
    padding: 62px 38px 158px;
    background:
        linear-gradient(180deg, rgba(18, 10, 34, .10), rgba(10, 7, 20, .04)),
        url("rooms/room-list-frame.png") center top / 100% 100% no-repeat;
    border: 0;
    box-shadow: none;
    overflow: visible;
}

#view-hall.mp-hall-v3 .mp-room-panel > .room-browser {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

#view-hall.mp-hall-v3 .mp-room-panel .room-browser-header,
#view-hall.mp-hall-v3 .mp-room-panel .rooms-header,
#view-hall.mp-hall-v3 .mp-room-panel .room-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

#view-hall.mp-hall-v3 .mp-room-panel #roomSearch {
    margin-left: auto;
    min-width: min(100%, 250px);
}

#view-hall.mp-hall-v3 .mp-room-panel #roomsList,
#view-hall.mp-hall-v3 .mp-room-panel .rooms-list {
    display: grid;
    gap: 10px;
    max-height: 590px;
    overflow-y: auto;
    padding: 4px 4px 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(218, 171, 65, .62) rgba(18, 10, 28, .42);
}

#view-hall.mp-hall-v3 .mp-room-panel .room-card {
    min-height: 102px;
    margin: 0;
    border: 1px solid rgba(208, 160, 57, .58);
    border-radius: 12px;
    background:
        linear-gradient(90deg, rgba(15, 10, 26, .90), rgba(49, 30, 26, .80));
    box-shadow:
        inset 0 0 18px rgba(0,0,0,.30),
        0 4px 10px rgba(0,0,0,.24);
}

#view-hall.mp-hall-v3 .mp-room-actions {
    position: absolute;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    width: min(90%, 760px);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

#view-hall.mp-hall-v3 .mp-room-actions #createRoomButton {
    width: 100%;
    min-height: 72px;
    color: #ffe09a;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.1rem, 1.7vw, 1.65rem);
    font-weight: 700;
    border: 2px solid rgba(219, 177, 66, .72);
    border-radius: 38px;
    background:
        radial-gradient(circle at 15% 50%, rgba(255, 218, 96, .20), transparent 24%),
        linear-gradient(180deg, #12703f, #07562f);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 10px 20px rgba(0,0,0,.32);
}

/* Rechte Spalte */
#view-hall.mp-hall-v3 .mp-side-panel--chronicle .daily-card,
#view-hall.mp-hall-v3 .mp-side-panel--chronicle .side-card {
    min-height: 230px;
}

#view-hall.mp-hall-v3 .mp-side-panel--players #onlinePreview {
    min-height: 250px;
}

/* Neue untere Navigation */
#view-hall.mp-hall-v3 .mp-bottom-nav {
    position: relative;
    width: min(100%, 1609px);
    min-height: 172px;
    margin: clamp(14px, 1.5vw, 24px) auto 0;
    padding: 12px 52px 22px;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: stretch;
    background: url("navigation/navigation-frame-desktop.png") center / 100% 100% no-repeat;
    z-index: 5;
}

#view-hall.mp-hall-v3 .mp-bottom-nav button {
    appearance: none;
    position: relative;
    min-width: 0;
    min-height: 128px;
    padding: 78px 6px 12px;
    color: #f2d9a9;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(.82rem, 1vw, 1.08rem);
    font-weight: 700;
    line-height: 1;
    text-align: center;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-shadow: 0 2px 8px rgba(0,0,0,.62);
}

#view-hall.mp-hall-v3 .mp-bottom-nav button:hover,
#view-hall.mp-hall-v3 .mp-bottom-nav button:focus-visible {
    color: #ffe276;
    filter: brightness(1.12);
    outline: none;
}

#view-hall.mp-hall-v3 .mp-bottom-nav button[aria-current="page"] {
    color: #ffe272;
}

/* Bestehende obere Hallennavigation bleibt technisch vorhanden,
   wird auf der Hallenansicht aber optisch ausgeblendet. */
body:has(#view-hall.mp-hall-v3:not([hidden])) .main-nav,
body:has(#view-hall.mp-hall-v3:not([hidden])) .mobile-nav {
    opacity: 0;
    pointer-events: none;
}

/* Desktop-Höhen komprimieren */
@media (min-width: 1200px) and (max-height: 980px) {
    #view-hall.mp-hall-v3 .mp-welcome-ribbon {
        min-height: 88px;
        padding-block: 16px 18px;
        margin-bottom: 14px;
    }

    #view-hall.mp-hall-v3 .mp-room-panel {
        min-height: 720px;
        padding-bottom: 132px;
    }

    #view-hall.mp-hall-v3 .mp-room-panel #roomsList,
    #view-hall.mp-hall-v3 .mp-room-panel .rooms-list {
        max-height: 485px;
    }

    #view-hall.mp-hall-v3 .mp-bottom-nav {
        min-height: 148px;
    }

    #view-hall.mp-hall-v3 .mp-bottom-nav button {
        min-height: 108px;
        padding-top: 66px;
    }
}

/* Tablet */
@media (max-width: 1180px) {
    #view-hall.mp-hall-v3 .mp-hall-columns {
        grid-template-columns: minmax(230px, 31%) minmax(0, 1fr);
    }

    #view-hall.mp-hall-v3 .mp-hall-column--right {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #view-hall.mp-hall-v3 .mp-bottom-nav {
        padding-inline: 30px;
    }
}

/* Mobil */
@media (max-width: 820px) {
    #view-hall.mp-hall-v3 .mp-hall-layout-v9 {
        width: min(calc(100% - 14px), 720px);
        padding-top: 8px;
    }

    #view-hall.mp-hall-v3 .mp-welcome-ribbon {
        width: calc(100% - 28px);
        min-height: 96px;
        padding: 18px 24px 20px;
    }

    #view-hall.mp-hall-v3 .mp-welcome-ribbon::before,
    #view-hall.mp-hall-v3 .mp-welcome-ribbon::after {
        display: none;
    }

    #view-hall.mp-hall-v3 .mp-hall-columns {
        grid-template-columns: 1fr;
    }

    #view-hall.mp-hall-v3 .mp-hall-column--left {
        order: 2;
    }

    #view-hall.mp-hall-v3 .mp-hall-column--center {
        order: 1;
    }

    #view-hall.mp-hall-v3 .mp-hall-column--right {
        order: 3;
        grid-column: auto;
        grid-template-columns: 1fr;
    }

    #view-hall.mp-hall-v3 .mp-room-panel {
        min-height: 700px;
        padding: 44px 18px 124px;
    }

    #view-hall.mp-hall-v3 .mp-room-panel #roomsList,
    #view-hall.mp-hall-v3 .mp-room-panel .rooms-list {
        max-height: 500px;
    }

    #view-hall.mp-hall-v3 .mp-side-panel {
        min-height: 280px;
        padding: 30px 24px 34px;
    }

    #view-hall.mp-hall-v3 .mp-bottom-nav {
        position: sticky;
        bottom: 0;
        min-height: 112px;
        padding: 8px 14px 14px;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        background-size: cover;
        background-position: center;
    }

    #view-hall.mp-hall-v3 .mp-bottom-nav button {
        min-height: 88px;
        padding: 60px 2px 8px;
        font-size: clamp(.58rem, 2.5vw, .76rem);
    }
}

/* MAERCHENPFAD_HALL_V3_STEP9_LAYOUT_END */

/* MAERCHENPFAD_HALL_V3_STEP9A_LAYOUT_FIX_START */

/* Halle über die gesamte Browserbreite ziehen. */
body.mp-hall-v3-wide {
    overflow-x: hidden;
}

body.mp-hall-v3-wide .mp-hall-v3-ancestor {
    width: 100% !important;
    max-width: none !important;
}

#view-hall.mp-hall-v3 {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-inline: clamp(10px, 1.2vw, 24px) !important;
}

/* Gesamtlayout deutlich breiter und näher an der Referenz. */
#view-hall.mp-hall-v3 .mp-hall-layout-v9 {
    width: min(100%, 1920px) !important;
    max-width: 1920px !important;
    margin-inline: auto !important;
    padding: 10px clamp(6px, .8vw, 16px) 22px !important;
}

/* Banner kompakter. */
#view-hall.mp-hall-v3 .mp-welcome-ribbon {
    width: min(680px, calc(100% - 40px)) !important;
    min-height: 88px !important;
    margin-bottom: 14px !important;
    padding: 15px 42px 18px !important;
}

#view-hall.mp-hall-v3 .mp-welcome-ribbon h1,
#view-hall.mp-hall-v3 .mp-welcome-ribbon h2 {
    font-size: clamp(1.45rem, 2vw, 2.25rem) !important;
}

#view-hall.mp-hall-v3 .mp-welcome-ribbon p {
    margin-top: 5px !important;
}

/* Proportionen der drei Spalten. */
#view-hall.mp-hall-v3 .mp-hall-columns {
    grid-template-columns:
        minmax(270px, 330px)
        minmax(680px, 1fr)
        minmax(270px, 330px) !important;
    gap: clamp(14px, 1.15vw, 22px) !important;
}

/* Seitenboxen kompakter. */
#view-hall.mp-hall-v3 .mp-side-panel {
    padding: 30px 25px 31px !important;
}

#view-hall.mp-hall-v3 .mp-side-panel--stats {
    min-height: 285px !important;
}

#view-hall.mp-hall-v3 .mp-side-panel--chronicle {
    min-height: 320px !important;
}

#view-hall.mp-hall-v3 .mp-side-panel--players {
    min-height: 330px !important;
}

/* Raumrahmen: weniger Leerfläche. */
#view-hall.mp-hall-v3 .mp-room-panel {
    min-height: 690px !important;
    padding: 52px 30px 125px !important;
}

#view-hall.mp-hall-v3 .mp-room-panel #roomsList,
#view-hall.mp-hall-v3 .mp-room-panel .rooms-list {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    max-height: 500px !important;
    overflow-y: auto !important;
}

/* Räume untereinander. */
#view-hall.mp-hall-v3 .mp-room-panel .room-card {
    width: 100% !important;
    max-width: none !important;
    min-height: 112px !important;
    grid-column: 1 / -1 !important;
    margin: 0 !important;
}

/* Große Bilder innerhalb der Raumkarte begrenzen. */
#view-hall.mp-hall-v3 .mp-room-panel .room-card img {
    max-height: 108px;
    object-fit: cover;
}

/* Zwei echte Hauptaktionen nebeneinander. */
#view-hall.mp-hall-v3 .mp-room-actions {
    bottom: 24px !important;
    width: min(92%, 790px) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

#view-hall.mp-hall-v3 .mp-room-actions > button,
#view-hall.mp-hall-v3 .mp-room-actions > a {
    width: 100% !important;
    min-height: 68px !important;
    border-radius: 34px !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(1.05rem, 1.4vw, 1.45rem) !important;
    font-weight: 700 !important;
}

#view-hall.mp-hall-v3 .mp-room-actions .mp-solo-button {
    color: #ffe3a2 !important;
    
}

/* Aktive Spieler als Liste statt großem Bild. */
#view-hall.mp-hall-v3 .mp-side-panel--players #onlinePreview,
#view-hall.mp-hall-v3 .mp-side-panel--players .online-preview {
    display: grid !important;
    gap: 8px !important;
    min-height: 0 !important;
}

#view-hall.mp-hall-v3 .mp-side-panel--players .online-card,
#view-hall.mp-hall-v3 .mp-side-panel--players [data-player-id],
#view-hall.mp-hall-v3 .mp-side-panel--players .player-item,
#view-hall.mp-hall-v3 .mp-side-panel--players .online-player {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 58px !important;
    padding: 5px 4px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(225, 181, 83, .16) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#view-hall.mp-hall-v3 .mp-side-panel--players img {
    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    aspect-ratio: 1 !important;
    object-fit: cover !important;
    border: 2px solid rgba(224, 177, 72, .68) !important;
    border-radius: 50% !important;
}

/* Falls nur eine alte große Vorschau existiert, nicht den gesamten Rahmen füllen lassen. */
#view-hall.mp-hall-v3 .mp-side-panel--players > #onlinePreview > img {
    margin-inline: auto !important;
}

/* Navigation direkt unter die Hauptspalten. */
#view-hall.mp-hall-v3 .mp-bottom-nav {
    width: min(100%, 1500px) !important;
    min-height: 158px !important;
    margin: 12px auto 0 !important;
}

#view-hall.mp-hall-v3 .mp-bottom-nav button {
    min-height: 116px !important;
    padding-top: 72px !important;
}

/* Alte Spielbereit-Karte ist nach Übernahme des Buttons überflüssig. */
#view-hall.mp-hall-v3 .mp-legacy-play-card-hidden {
    display: none !important;
}

/* Tablet */
@media (max-width: 1350px) {
    #view-hall.mp-hall-v3 .mp-hall-columns {
        grid-template-columns:
            minmax(245px, 300px)
            minmax(580px, 1fr)
            minmax(245px, 300px) !important;
    }
}

@media (max-width: 1120px) {
    #view-hall.mp-hall-v3 .mp-hall-columns {
        grid-template-columns: minmax(240px, 32%) minmax(0, 1fr) !important;
    }

    #view-hall.mp-hall-v3 .mp-hall-column--right {
        grid-column: 1 / -1 !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Mobil */
@media (max-width: 820px) {
    #view-hall.mp-hall-v3 {
        padding-inline: 7px !important;
    }

    #view-hall.mp-hall-v3 .mp-hall-layout-v9 {
        padding-inline: 0 !important;
    }

    #view-hall.mp-hall-v3 .mp-hall-columns {
        grid-template-columns: 1fr !important;
    }

    #view-hall.mp-hall-v3 .mp-room-panel {
        min-height: 650px !important;
        padding: 42px 16px 178px !important;
    }

    #view-hall.mp-hall-v3 .mp-room-actions {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        bottom: 18px !important;
    }

    #view-hall.mp-hall-v3 .mp-hall-column--right {
        grid-column: auto !important;
        grid-template-columns: 1fr !important;
    }

    #view-hall.mp-hall-v3 .mp-bottom-nav {
        min-height: 108px !important;
    }

    #view-hall.mp-hall-v3 .mp-bottom-nav button {
        min-height: 84px !important;
        padding-top: 57px !important;
    }
}

/* MAERCHENPFAD_HALL_V3_STEP9A_LAYOUT_FIX_END */

/* MAERCHENPFAD_HALL_V3_STEP9B_ROOM_ROWS_START */

/*
 * STEP 9B – Die Raumliste verwendet den kompletten Bildrahmen.
 * Alte Kacheloptik wird vollständig überschrieben.
 */
#view-hall.mp-hall-v3 .mp-room-panel {
    position: relative !important;
    width: 100% !important;
    min-height: 0 !important;
    aspect-ratio: 922 / 1040 !important;
    padding: 0 !important;
    background:
        url("rooms/room-list-frame.png")
        center / 100% 100%
        no-repeat !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    isolation: isolate;
}

/* Titel exakt im oberen blauen Bereich. */
#view-hall.mp-hall-v3 .mp-room-panel > .mp-panel-title {
    position: absolute !important;
    z-index: 5 !important;
    top: 9.7% !important;
    left: 6.6% !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #f7dfae !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(1.15rem, 1.9vw, 2rem) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-align: left !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-shadow:
        0 2px 0 rgba(70, 33, 7, .55),
        0 5px 12px rgba(0, 0, 0, .45) !important;
}

/* Suchfeld und Aktualisieren. */
#view-hall.mp-hall-v3 .mp-room-toolbar-v9b {
    position: absolute !important;
    z-index: 6 !important;
    top: 7.9% !important;
    right: 6.2% !important;
    width: 40% !important;
    height: 6.6% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
}

#view-hall.mp-hall-v3 .mp-room-toolbar-v9b #roomSearch,
#view-hall.mp-hall-v3 .mp-room-toolbar-v9b input[type="search"],
#view-hall.mp-hall-v3 .mp-room-toolbar-v9b input[type="text"] {
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 18px !important;
    color: #e9ddc6 !important;
    border: 1px solid rgba(205, 159, 65, .50) !important;
    border-radius: 999px !important;
    background: rgba(8, 12, 20, .88) !important;
    box-shadow: inset 0 0 13px rgba(0, 0, 0, .44) !important;
}

#view-hall.mp-hall-v3 .mp-room-toolbar-v9b button {
    width: auto !important;
    aspect-ratio: 1 !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(213, 164, 59, .70) !important;
    border-radius: 50% !important;
    color: #f0d79d !important;
    background: rgba(10, 14, 20, .86) !important;
}

/* Alte Raum-Browser-Hülle neutralisieren. */
#view-hall.mp-hall-v3 .mp-room-panel > .room-browser {
    display: contents !important;
}

#view-hall.mp-hall-v3 .mp-room-panel .room-browser-header,
#view-hall.mp-hall-v3 .mp-room-panel .rooms-header,
#view-hall.mp-hall-v3 .mp-room-panel .room-toolbar {
    display: none !important;
}

/* Exakter Bereich der fünf Raumzeilen. */
#view-hall.mp-hall-v3 .mp-room-panel #roomsList,
#view-hall.mp-hall-v3 .mp-room-panel .rooms-list {
    position: absolute !important;
    z-index: 4 !important;
    top: 15.25% !important;
    left: 4.9% !important;
    width: 90.4% !important;
    height: 66.5% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 .3% .2% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: calc((100% - 4.4%) / 5) !important;
    gap: 1.1% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(218, 171, 65, .66) transparent !important;
}

/* Echte dynamische Raumzeile. */
#view-hall.mp-hall-v3 .mp-room-panel .room-card.mp-room-row-v9b {
    --mp-room-portal: url("rooms/room-portal-open.png");
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    overflow: hidden !important;
    color: #f7ead0 !important;
    border: 1px solid rgba(197, 147, 48, .62) !important;
    border-radius: clamp(7px, .75vw, 13px) !important;
    background:
        linear-gradient(
            90deg,
            rgba(17, 12, 20, .97) 0%,
            rgba(22, 15, 24, .97) 28%,
            rgba(53, 36, 27, .94) 28.2%,
            rgba(42, 28, 25, .95) 76%,
            rgba(24, 23, 18, .96) 76.2%,
            rgba(17, 20, 15, .97) 100%
        ) !important;
    box-shadow:
        inset 0 0 20px rgba(0, 0, 0, .36),
        0 2px 7px rgba(0, 0, 0, .30) !important;
}

/* Portalbild links. */
#view-hall.mp-hall-v3 .mp-room-panel .room-card.mp-room-row-v9b::before {
    content: "" !important;
    position: absolute !important;
    z-index: 1 !important;
    inset: 0 auto 0 0 !important;
    width: 28.4% !important;
    background:
        linear-gradient(90deg, transparent 88%, rgba(16, 11, 18, .88) 100%),
        var(--mp-room-portal)
        center / cover
        no-repeat !important;
    pointer-events: none !important;
}

/* Abteilung vor Status und Button. */
#view-hall.mp-hall-v3 .mp-room-panel .room-card.mp-room-row-v9b::after {
    content: "" !important;
    position: absolute !important;
    z-index: 2 !important;
    top: 0 !important;
    bottom: 0 !important;
    right: 23.8% !important;
    width: 1px !important;
    background: linear-gradient(
        transparent,
        rgba(210, 160, 59, .42) 14%,
        rgba(210, 160, 59, .42) 86%,
        transparent
    ) !important;
    pointer-events: none !important;
}

#view-hall.mp-hall-v3 .mp-room-panel .room-card.mp-room-state-nearfull {
    --mp-room-portal: url("rooms/room-portal-crystal.png");
}

#view-hall.mp-hall-v3 .mp-room-panel .room-card.mp-room-state-full {
    --mp-room-portal: url("rooms/room-portal-fire.png");
}

#view-hall.mp-hall-v3 .mp-room-panel .room-card.mp-room-state-private {
    --mp-room-portal: url("rooms/room-portal-private.png");
}

#view-hall.mp-hall-v3 .mp-room-panel .room-card.mp-room-state-rejoin {
    --mp-room-portal: url("rooms/room-portal-rejoin.png");
}

/* Alte Inhalte bleiben technisch im DOM, aber werden nicht mehr dargestellt. */
#view-hall.mp-hall-v3 .mp-room-original-v9b {
    display: none !important;
}

/* Neu aufgebauter Inhalt. */
#view-hall.mp-hall-v3 .mp-room-row-ui-v9b {
    position: absolute !important;
    z-index: 3 !important;
    inset: 0 !important;
    display: grid !important;
    grid-template-columns: 28.5% minmax(0, 1fr) 23.8% !important;
    align-items: stretch !important;
    pointer-events: none !important;
}

#view-hall.mp-hall-v3 .mp-room-info-v9b {
    grid-column: 2 !important;
    min-width: 0 !important;
    align-self: center !important;
    padding: 4% 5% !important;
}

#view-hall.mp-hall-v3 .mp-room-title-v9b {
    margin: 0 0 5px !important;
    color: #f8e9c8 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(.85rem, 1.35vw, 1.35rem) !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .62) !important;
}

#view-hall.mp-hall-v3 .mp-room-meta-v9b {
    margin-top: 4px !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: #ead8bb !important;
    font-size: clamp(.64rem, .87vw, .92rem) !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#view-hall.mp-hall-v3 .mp-room-meta-icon-v9b {
    flex: 0 0 auto !important;
    width: 1.15em !important;
    color: #d9b66a !important;
    text-align: center !important;
}

#view-hall.mp-hall-v3 .mp-room-action-v9b {
    grid-column: 3 !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-rows: 1fr 1fr !important;
    place-items: center !important;
    padding: 7% 8% !important;
    pointer-events: auto !important;
}

#view-hall.mp-hall-v3 .mp-room-status-v9b {
    align-self: end !important;
    color: #46d63f !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(.75rem, 1.12vw, 1.14rem) !important;
    font-weight: 700 !important;
    text-align: center !important;
    text-shadow: 0 2px 7px rgba(0, 0, 0, .65) !important;
}

#view-hall.mp-hall-v3 .mp-room-state-nearfull .mp-room-status-v9b {
    color: #f2a719 !important;
}

#view-hall.mp-hall-v3 .mp-room-state-full .mp-room-status-v9b {
    color: #ef514d !important;
}

#view-hall.mp-hall-v3 .mp-room-state-private .mp-room-status-v9b {
    color: #c14aed !important;
}

#view-hall.mp-hall-v3 .mp-room-state-rejoin .mp-room-status-v9b {
    color: #58baff !important;
}

#view-hall.mp-hall-v3 .mp-room-join-v9b {
    align-self: start !important;
    width: min(92%, 150px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: clamp(30px, 4vw, 45px) !important;
    margin: 4px 0 0 !important;
    padding: 0 12px !important;
    display: inline-grid !important;
    place-items: center !important;
    color: #fff8df !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(.72rem, 1vw, 1rem) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    border: 1px solid rgba(153, 255, 119, .42) !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, #36c328, #158d16) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.28),
        0 4px 9px rgba(0,0,0,.32) !important;
    cursor: pointer !important;
    pointer-events: auto !important;
}

#view-hall.mp-hall-v3 .mp-room-state-nearfull .mp-room-join-v9b {
    border-color: rgba(255, 210, 72, .55) !important;
    background: linear-gradient(180deg, #f0a713, #cf7608) !important;
}

#view-hall.mp-hall-v3 .mp-room-state-full .mp-room-join-v9b {
    border-color: rgba(255, 115, 115, .48) !important;
    background: linear-gradient(180deg, #c84644, #9c2428) !important;
    cursor: default !important;
}

#view-hall.mp-hall-v3 .mp-room-state-private .mp-room-join-v9b {
    border-color: rgba(212, 104, 255, .48) !important;
    background: linear-gradient(180deg, #9632c2, #65158d) !important;
}

#view-hall.mp-hall-v3 .mp-room-state-rejoin .mp-room-join-v9b {
    border-color: rgba(92, 188, 255, .52) !important;
    background: linear-gradient(180deg, #267fc7, #145a9b) !important;
}

/* Leere feste Slots zeigen nur den Bildrahmen. */
#view-hall.mp-hall-v3 .mp-room-empty-v9b {
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Untere Buttons exakt über den eingebauten Buttonflächen. */
#view-hall.mp-hall-v3 .mp-room-actions {
    position: absolute !important;
    z-index: 7 !important;
    left: 4.8% !important;
    bottom: 3.3% !important;
    width: 87.6% !important;
    height: 10.8% !important;
    transform: none !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 2.8% !important;
    pointer-events: none !important;
}

#view-hall.mp-hall-v3 .mp-room-actions > button,
#view-hall.mp-hall-v3 .mp-room-actions > a {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 5% 0 25% !important;
    color: #ffe5a4 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(.92rem, 1.7vw, 1.72rem) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-align: center !important;
    text-decoration: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-shadow:
        0 2px 0 rgba(68, 32, 6, .62),
        0 5px 10px rgba(0, 0, 0, .40) !important;
    pointer-events: auto !important;
}

#view-hall.mp-hall-v3 .mp-room-actions > button:hover,
#view-hall.mp-hall-v3 .mp-room-actions > a:hover {
    filter: brightness(1.16) !important;
    transform: translateY(-1px) !important;
}

#view-hall.mp-hall-v3 .mp-room-actions .mp-solo-button {
    padding-left: 23% !important;
}

#view-hall.mp-hall-v3 .mp-room-actions .mp-solo-button::after {
    content: "Gegen Bots" !important;
    display: block !important;
    margin-top: 5px !important;
    font-family: Inter, "Segoe UI", sans-serif !important;
    font-size: clamp(.55rem, .82vw, .84rem) !important;
    font-weight: 700 !important;
    color: #f6ddb1 !important;
}

/* Mobil: Das komplette Rahmenbild bleibt proportional erhalten. */
@media (max-width: 820px) {
    #view-hall.mp-hall-v3 .mp-room-panel {
        aspect-ratio: 922 / 1040 !important;
    }

    #view-hall.mp-hall-v3 .mp-room-panel > .mp-panel-title {
        font-size: clamp(.88rem, 4vw, 1.25rem) !important;
    }

    #view-hall.mp-hall-v3 .mp-room-toolbar-v9b {
        width: 43% !important;
        gap: 5px !important;
    }

    #view-hall.mp-hall-v3 .mp-room-toolbar-v9b input {
        padding-inline: 9px !important;
        font-size: .62rem !important;
    }

    #view-hall.mp-hall-v3 .mp-room-title-v9b {
        font-size: clamp(.62rem, 2.5vw, .92rem) !important;
    }

    #view-hall.mp-hall-v3 .mp-room-meta-v9b {
        margin-top: 2px !important;
        gap: 3px !important;
        font-size: clamp(.46rem, 1.8vw, .68rem) !important;
    }

    #view-hall.mp-hall-v3 .mp-room-status-v9b {
        font-size: clamp(.52rem, 2vw, .74rem) !important;
    }

    #view-hall.mp-hall-v3 .mp-room-join-v9b {
        height: clamp(22px, 6vw, 31px) !important;
        padding-inline: 5px !important;
        font-size: clamp(.48rem, 2vw, .68rem) !important;
        border-radius: 9px !important;
    }

    #view-hall.mp-hall-v3 .mp-room-actions > button,
    #view-hall.mp-hall-v3 .mp-room-actions > a {
        font-size: clamp(.65rem, 3vw, 1rem) !important;
    }

    #view-hall.mp-hall-v3 .mp-room-actions .mp-solo-button::after {
        margin-top: 2px !important;
        font-size: clamp(.42rem, 1.8vw, .62rem) !important;
    }
}

/* MAERCHENPFAD_HALL_V3_STEP9B_ROOM_ROWS_END */

/* MAERCHENPFAD_HALL_V3_STEP10_PROFILE_START */

/*
 * STEP 10 – Profilrahmen
 * Die Grafik liegt als oberste Rahmenschicht über Avatar und Profilinformationen.
 */
#view-hall.mp-hall-v3 .mp-hall-layout-v9 {
    position: relative !important;
}

#view-hall.mp-hall-v3 .mp-profile-card-v10 {
    --mp-xp-progress: 0%;
    position: absolute;
    z-index: 12;
    top: 8px;
    left: 8px;
    width: clamp(320px, 22vw, 410px);
    aspect-ratio: 1152 / 672;
    border: 0;
    padding: 0;
    color: #f8e9c8;
    background: transparent;
    cursor: pointer;
    isolation: isolate;
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .38));
}

#view-hall.mp-hall-v3 .mp-profile-card-v10::after {
    content: "";
    position: absolute;
    z-index: 5;
    inset: 0;
    pointer-events: none;
    background:
        url("profile/profile-frame.png")
        center / 100% 100%
        no-repeat;
}

#view-hall.mp-hall-v3 .mp-profile-card-v10:hover {
    filter:
        brightness(1.06)
        drop-shadow(0 14px 22px rgba(0, 0, 0, .42));
}

#view-hall.mp-hall-v3 .mp-profile-card-v10:focus-visible {
    outline: 3px solid rgba(255, 221, 120, .82);
    outline-offset: 4px;
    border-radius: 24px;
}

#view-hall.mp-hall-v3 .mp-profile-avatar-v10 {
    position: absolute;
    z-index: 1;
    left: 7.1%;
    top: 21.1%;
    width: 31.6%;
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    background:
        radial-gradient(circle at 50% 38%, #65405f, #1b1027 72%);
    box-shadow:
        inset 0 0 22px rgba(0, 0, 0, .46),
        0 0 18px rgba(238, 192, 78, .22);
}

#view-hall.mp-hall-v3 .mp-profile-content-v10 {
    position: absolute;
    z-index: 3;
    top: 19.4%;
    right: 6.5%;
    bottom: 15%;
    left: 43.2%;
    min-width: 0;
    display: grid;
    grid-template-rows: auto auto 1fr auto auto;
    align-content: start;
    gap: clamp(3px, .35vw, 7px);
    text-align: left;
}

#view-hall.mp-hall-v3 .mp-profile-name-v10 {
    min-width: 0;
    margin: 0;
    color: #ffe8ae;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1rem, 1.45vw, 1.48rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: .02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow:
        0 2px 0 rgba(75, 35, 7, .58),
        0 5px 10px rgba(0, 0, 0, .44);
}

#view-hall.mp-hall-v3 .mp-profile-meta-v10 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 12px;
    color: #ead5aa;
    font-size: clamp(.68rem, .87vw, .9rem);
    font-weight: 700;
    line-height: 1.2;
}

#view-hall.mp-hall-v3 .mp-profile-meta-v10 span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

#view-hall.mp-hall-v3 .mp-profile-meta-v10 span::before {
    color: #d7ab49;
    text-shadow: 0 2px 5px rgba(0, 0, 0, .48);
}

#view-hall.mp-hall-v3 .mp-profile-level-v10::before {
    content: "◆";
}

#view-hall.mp-hall-v3 .mp-profile-rank-v10::before {
    content: "♛";
}

#view-hall.mp-hall-v3 .mp-profile-xp-caption-v10 {
    align-self: end;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    color: #f2ddb4;
    font-size: clamp(.57rem, .74vw, .77rem);
    font-weight: 800;
    line-height: 1.15;
}

#view-hall.mp-hall-v3 .mp-profile-xp-values-v10 {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#view-hall.mp-hall-v3 .mp-profile-xp-percent-v10 {
    flex: 0 0 auto;
    color: #ffe27d;
}

#view-hall.mp-hall-v3 .mp-profile-xp-track-v10 {
    position: relative;
    height: clamp(9px, .75vw, 13px);
    overflow: hidden;
    border: 1px solid rgba(235, 194, 91, .54);
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(4, 3, 8, .86), rgba(24, 13, 30, .94));
    box-shadow:
        inset 0 2px 5px rgba(0, 0, 0, .65),
        0 1px 0 rgba(255, 255, 255, .06);
}

#view-hall.mp-hall-v3 .mp-profile-xp-fill-v10 {
    position: absolute;
    inset: 1px auto 1px 1px;
    width: var(--mp-xp-progress);
    max-width: calc(100% - 2px);
    border-radius: inherit;
    background:
        linear-gradient(
            90deg,
            #ff3c52 0%,
            #ff8b2d 16%,
            #ffe056 32%,
            #52e978 49%,
            #32d9ed 65%,
            #4f7bff 82%,
            #d052f2 100%
        );
    background-size: 220% 100%;
    box-shadow:
        0 0 8px rgba(70, 219, 255, .55),
        0 0 13px rgba(226, 76, 242, .34);
    transition: width .65s cubic-bezier(.2, .8, .2, 1);
    animation: mpProfileRainbowV10 5s linear infinite;
}

#view-hall.mp-hall-v3 .mp-profile-xp-fill-v10::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(
            110deg,
            transparent 0%,
            transparent 38%,
            rgba(255,255,255,.55) 48%,
            transparent 58%,
            transparent 100%
        );
    transform: translateX(-120%);
    animation: mpProfileShineV10 3.2s ease-in-out infinite;
}

@keyframes mpProfileRainbowV10 {
    to {
        background-position: -220% 0;
    }
}

@keyframes mpProfileShineV10 {
    0%, 35% {
        transform: translateX(-120%);
    }

    65%, 100% {
        transform: translateX(220%);
    }
}

/* Die alte kleine Profilanzeige bleibt als Datenquelle bestehen, wird aber nicht doppelt angezeigt. */
body:has(#view-hall.mp-hall-v3:not([hidden])) .mp-profile-source-hidden-v10 {
    display: none !important;
}

/* Bei mittleren Breiten wird die Box Teil des normalen Layoutflusses. */
@media (max-width: 1280px) {
    #view-hall.mp-hall-v3 .mp-profile-card-v10 {
        position: relative;
        top: auto;
        left: auto;
        width: min(410px, calc(100% - 24px));
        margin: 0 auto 12px 0;
    }

    #view-hall.mp-hall-v3 .mp-welcome-ribbon {
        margin-top: -3px !important;
    }
}

@media (max-width: 820px) {
    #view-hall.mp-hall-v3 .mp-profile-card-v10 {
        width: min(100%, 420px);
        margin-inline: auto;
    }

    #view-hall.mp-hall-v3 .mp-profile-name-v10 {
        font-size: clamp(.9rem, 4.3vw, 1.3rem);
    }

    #view-hall.mp-hall-v3 .mp-profile-meta-v10 {
        gap: 3px 8px;
        font-size: clamp(.58rem, 2.7vw, .82rem);
    }

    #view-hall.mp-hall-v3 .mp-profile-xp-caption-v10 {
        font-size: clamp(.5rem, 2.35vw, .7rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    #view-hall.mp-hall-v3 .mp-profile-xp-fill-v10,
    #view-hall.mp-hall-v3 .mp-profile-xp-fill-v10::after {
        animation: none;
    }
}

/* MAERCHENPFAD_HALL_V3_STEP10_PROFILE_END */

/* MAERCHENPFAD_HALL_V3_STEP10A_LAYOUT_PLAYERS_START */

/* --------------------------------------------------
   1. Obere Märchenpfad-Leiste vollständig entfernen
-------------------------------------------------- */
.mp-hall-topbar-hidden-v10a {
    display: none !important;
}

body.mp-hall-no-topbar-v10a {
    padding-top: 0 !important;
}

body.mp-hall-no-topbar-v10a #view-hall.mp-hall-v3 {
    margin-top: 0 !important;
    padding-top: clamp(8px, .8vw, 16px) !important;
}

/* --------------------------------------------------
   2. Hauptlayout sauber ausrichten
-------------------------------------------------- */
#view-hall.mp-hall-v3 .mp-hall-layout-v9 {
    width: min(100%, 1920px) !important;
    padding-top: 8px !important;
}

#view-hall.mp-hall-v3 .mp-hall-columns {
    grid-template-columns:
        minmax(300px, 360px)
        minmax(720px, 1fr)
        minmax(310px, 360px) !important;
    gap: clamp(16px, 1.25vw, 24px) !important;
}

#view-hall.mp-hall-v3 .mp-hall-column {
    gap: clamp(14px, 1.1vw, 21px) !important;
}

/* --------------------------------------------------
   3. Profilrahmen fest in der linken Spalte
-------------------------------------------------- */
#view-hall.mp-hall-v3 .mp-hall-column--left > .mp-profile-card-v10 {
    position: relative !important;
    z-index: 5 !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    flex: none !important;
}

#view-hall.mp-hall-v3 .mp-hall-column--left > .mp-side-panel {
    width: 100% !important;
    margin: 0 !important;
}

/* Statistikbox nicht mehr vom Profil überdecken lassen. */
#view-hall.mp-hall-v3 .mp-side-panel--stats {
    min-height: 300px !important;
}

/* --------------------------------------------------
   4. Neuer Rahmen für aktive Spieler
-------------------------------------------------- */
#view-hall.mp-hall-v3 .mp-side-panel--players {
    position: relative !important;
    width: 100% !important;
    min-height: 0 !important;
    aspect-ratio: 896 / 1152 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
        url("players/active-players-frame.png")
        center / 100% 100%
        no-repeat !important;
    box-shadow: none !important;
    isolation: isolate !important;
}

/* Titel im violetten Banner. */
#view-hall.mp-hall-v3 .mp-side-panel--players > .mp-panel-title {
    position: absolute !important;
    z-index: 6 !important;
    top: 7.1% !important;
    left: 16% !important;
    width: 68% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #f8e3b2 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(1rem, 1.3vw, 1.42rem) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-align: center !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-shadow:
        0 2px 0 rgba(70, 31, 8, .62),
        0 5px 10px rgba(0, 0, 0, .42) !important;
}

/* Alte fehlerhafte Vorschau nur als unsichtbare Datenquelle behalten. */
#view-hall.mp-hall-v3 .mp-side-panel--players > #onlinePreview,
#view-hall.mp-hall-v3 .mp-side-panel--players > .online-preview,
#view-hall.mp-hall-v3 .mp-active-players-source-v10a {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    clip-path: inset(50%) !important;
}

/* Fünf feste Spielerzeilen passend zu den Bildfeldern. */
#view-hall.mp-hall-v3 .mp-active-players-list-v10a {
    position: absolute !important;
    z-index: 5 !important;
    top: 17.2% !important;
    left: 8.2% !important;
    width: 83.6% !important;
    height: 65.4% !important;
    display: grid !important;
    grid-template-rows: repeat(5, minmax(0, 1fr)) !important;
    gap: 2.1% !important;
    pointer-events: none !important;
}

#view-hall.mp-hall-v3 .mp-active-player-row-v10a {
    min-width: 0 !important;
    height: 100% !important;
    padding: 1% 4.5% !important;
    display: grid !important;
    grid-template-columns: clamp(38px, 4.3vw, 55px) minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: clamp(8px, .7vw, 12px) !important;
    color: #f4dfb8 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: auto !important;
}

#view-hall.mp-hall-v3 .mp-active-player-avatar-v10a {
    width: 100% !important;
    aspect-ratio: 1 !important;
    object-fit: cover !important;
    object-position: center !important;
    border: 2px solid rgba(224, 177, 72, .75) !important;
    border-radius: 50% !important;
    background:
        radial-gradient(circle, #533754, #180e20 72%) !important;
    box-shadow:
        0 0 10px rgba(232, 189, 77, .21),
        inset 0 0 8px rgba(0, 0, 0, .38) !important;
}

#view-hall.mp-hall-v3 .mp-active-player-info-v10a {
    min-width: 0 !important;
}

#view-hall.mp-hall-v3 .mp-active-player-name-v10a {
    min-width: 0 !important;
    color: #ffe4ae !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(.78rem, 1vw, 1.04rem) !important;
    font-weight: 700 !important;
    line-height: 1.08 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .56) !important;
}

#view-hall.mp-hall-v3 .mp-active-player-status-v10a {
    margin-top: 4px !important;
    color: #d0b88f !important;
    font-size: clamp(.58rem, .72vw, .74rem) !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#view-hall.mp-hall-v3 .mp-active-player-dot-v10a {
    width: clamp(9px, .8vw, 12px) !important;
    aspect-ratio: 1 !important;
    border-radius: 50% !important;
    background: #19dc82 !important;
    box-shadow:
        0 0 7px rgba(25, 220, 130, .82),
        0 0 14px rgba(25, 220, 130, .38) !important;
}

#view-hall.mp-hall-v3 .mp-active-player-row-v10a[data-status="playing"]
.mp-active-player-status-v10a {
    color: #ec78a4 !important;
}

#view-hall.mp-hall-v3 .mp-active-player-empty-v10a {
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Unterer Button des Spielerrahmens. */
#view-hall.mp-hall-v3 .mp-active-players-button-v10a {
    position: absolute !important;
    z-index: 6 !important;
    left: 18.2% !important;
    bottom: 7.6% !important;
    width: 63.6% !important;
    height: 8.4% !important;
    display: grid !important;
    place-items: center !important;
    color: #f5dfb4 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(.72rem, .95vw, .98rem) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border: 0 !important;
    border-radius: 24px !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer !important;
    text-shadow: 0 2px 7px rgba(0, 0, 0, .64) !important;
}

#view-hall.mp-hall-v3 .mp-active-players-button-v10a:hover {
    color: #ffe674 !important;
    filter: brightness(1.13) !important;
}

/* --------------------------------------------------
   5. Rechte Spalte stabil halten
-------------------------------------------------- */
#view-hall.mp-hall-v3 .mp-hall-column--right {
    min-width: 0 !important;
    align-self: start !important;
}

#view-hall.mp-hall-v3 .mp-side-panel--chronicle {
    width: 100% !important;
    min-height: 320px !important;
    margin: 0 !important;
}

/* --------------------------------------------------
   6. Responsive
-------------------------------------------------- */
@media (max-width: 1280px) {
    #view-hall.mp-hall-v3 .mp-hall-columns {
        grid-template-columns:
            minmax(270px, 320px)
            minmax(600px, 1fr)
            minmax(270px, 320px) !important;
    }
}

@media (max-width: 1100px) {
    #view-hall.mp-hall-v3 .mp-hall-columns {
        grid-template-columns: minmax(260px, 34%) minmax(0, 1fr) !important;
    }

    #view-hall.mp-hall-v3 .mp-hall-column--right {
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px !important;
    }

    #view-hall.mp-hall-v3 .mp-side-panel--players {
        width: min(100%, 390px) !important;
        justify-self: center !important;
    }
}

@media (max-width: 820px) {
    #view-hall.mp-hall-v3 .mp-hall-columns {
        grid-template-columns: 1fr !important;
    }

    #view-hall.mp-hall-v3 .mp-hall-column--left {
        order: 1 !important;
    }

    #view-hall.mp-hall-v3 .mp-hall-column--center {
        order: 2 !important;
    }

    #view-hall.mp-hall-v3 .mp-hall-column--right {
        order: 3 !important;
        grid-column: auto !important;
        grid-template-columns: 1fr !important;
    }

    #view-hall.mp-hall-v3 .mp-hall-column--left > .mp-profile-card-v10 {
        width: min(100%, 430px) !important;
        justify-self: center !important;
    }

    #view-hall.mp-hall-v3 .mp-side-panel--players {
        width: min(100%, 430px) !important;
    }

    #view-hall.mp-hall-v3 .mp-active-player-row-v10a {
        grid-template-columns: clamp(34px, 11vw, 50px) minmax(0, 1fr) auto !important;
    }

    #view-hall.mp-hall-v3 .mp-active-player-name-v10a {
        font-size: clamp(.7rem, 3.5vw, .98rem) !important;
    }

    #view-hall.mp-hall-v3 .mp-active-player-status-v10a {
        font-size: clamp(.52rem, 2.6vw, .7rem) !important;
    }
}

/* MAERCHENPFAD_HALL_V3_STEP10A_LAYOUT_PLAYERS_END */

/* MAERCHENPFAD_HALL_V3_STEP10C_PROFILE_RESPONSIVE_START */

/* ==================================================
   APP-GRUNDLAGE
================================================== */
html {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
}

body.mp-hall-app-v10c {
    width: 100%;
    min-height: 100dvh;
    overflow-x: hidden !important;
    overscroll-behavior-x: none;
    -webkit-tap-highlight-color: transparent;
}

body.mp-hall-app-v10c #view-hall.mp-hall-v3 {
    width: 100% !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding:
        max(8px, env(safe-area-inset-top))
        clamp(8px, 1vw, 20px)
        calc(184px + env(safe-area-inset-bottom))
        !important;
    overflow: visible !important;
}

#view-hall.mp-hall-v3 .mp-hall-layout-v9 {
    width: min(100%, 1920px) !important;
    max-width: 1920px !important;
    margin-inline: auto !important;
    padding: 0 !important;
}

/* Doppelte alte Überschrift oberhalb der Raumliste entfernen. */
#view-hall.mp-hall-v3 .room-browser > .section-heading,
#view-hall.mp-hall-v3 .mp-legacy-room-heading-v10c {
    display: none !important;
}

/* ==================================================
   PROFIL: RAHMEN UNTER DEN DATEN STATT DARÜBER
================================================== */
#view-hall.mp-hall-v3 .mp-profile-card-v10 {
    --mp-xp-progress: 0%;
    position: relative !important;
    width: 100% !important;
    max-width: 430px !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    container-type: inline-size;
}

/* Der goldene Rahmen bleibt über dem Avatar, aber unter den Texten. */
#view-hall.mp-hall-v3 .mp-profile-card-v10::after {
    z-index: 2 !important;
}

/* Avatar liegt hinter dem runden Goldrahmen. */
#view-hall.mp-hall-v3 .mp-profile-avatar-v10 {
    z-index: 1 !important;
    display: block !important;
}

/* Die Daten lagen bisher hinter der opaken PNG-Fläche. */
#view-hall.mp-hall-v3 .mp-profile-content-v10 {
    z-index: 4 !important;
    top: 16.5% !important;
    right: 5.5% !important;
    bottom: 13.5% !important;
    left: 40.5% !important;
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none;
}

#view-hall.mp-hall-v3 .mp-profile-name-v10 {
    display: block !important;
    color: #ffe5a4 !important;
    font-size: clamp(.95rem, 1.25vw, 1.38rem) !important;
}

#view-hall.mp-hall-v3 .mp-profile-meta-v10 {
    display: flex !important;
    color: #f3d8a5 !important;
}

#view-hall.mp-hall-v3 .mp-profile-xp-caption-v10,
#view-hall.mp-hall-v3 .mp-profile-xp-track-v10 {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#view-hall.mp-hall-v3 .mp-profile-xp-track-v10 {
    display: block !important;
}

/* ==================================================
   DESKTOP-APP
================================================== */
#view-hall.mp-hall-v3 .mp-welcome-ribbon {
    width: min(720px, calc(100% - 36px)) !important;
    min-height: 88px !important;
    margin: 0 auto 16px !important;
    padding: 15px 42px 18px !important;
}

#view-hall.mp-hall-v3 .mp-hall-columns {
    display: grid !important;
    grid-template-columns:
        minmax(290px, 350px)
        minmax(620px, 1fr)
        minmax(290px, 350px)
        !important;
    gap: clamp(14px, 1.15vw, 23px) !important;
    align-items: start !important;
}

#view-hall.mp-hall-v3 .mp-hall-column {
    min-width: 0 !important;
    gap: clamp(13px, 1vw, 20px) !important;
}

#view-hall.mp-hall-v3 .mp-hall-column--left > * ,
#view-hall.mp-hall-v3 .mp-hall-column--right > * {
    width: 100% !important;
    min-width: 0 !important;
}

/* Raumliste an die sichtbare App-Höhe anpassen. */
#view-hall.mp-hall-v3 .mp-room-panel {
    height: clamp(720px, calc(100dvh - 176px), 930px) !important;
    min-height: 720px !important;
    aspect-ratio: auto !important;
}

#view-hall.mp-hall-v3 .mp-room-panel #roomsList,
#view-hall.mp-hall-v3 .mp-room-panel .rooms-list {
    overscroll-behavior: contain;
}

/* ==================================================
   FESTE APP-NAVIGATION
================================================== */
#view-hall.mp-hall-v3 .mp-bottom-nav {
    position: fixed !important;
    z-index: 1000 !important;
    left: 50% !important;
    right: auto !important;
    bottom: max(0px, env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;
    width: min(calc(100vw - 20px), 1500px) !important;
    min-height: 156px !important;
    margin: 0 !important;
    padding: 11px 48px 20px !important;
    border-radius: 26px 26px 0 0;
    filter: drop-shadow(0 -12px 22px rgba(0, 0, 0, .45));
}

#view-hall.mp-hall-v3 .mp-bottom-nav button {
    min-height: 116px !important;
    padding: 72px 4px 10px !important;
    touch-action: manipulation;
}

/* ==================================================
   TABLET: ZWEI SPALTEN + RECHTE PANELS UNTEN
================================================== */
@media (max-width: 1360px) {
    body.mp-hall-app-v10c #view-hall.mp-hall-v3 {
        padding-bottom: calc(166px + env(safe-area-inset-bottom)) !important;
    }

    #view-hall.mp-hall-v3 .mp-hall-columns {
        grid-template-columns:
            minmax(270px, 330px)
            minmax(0, 1fr)
            !important;
    }

    #view-hall.mp-hall-v3 .mp-hall-column--right {
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px !important;
        align-items: start !important;
    }

    #view-hall.mp-hall-v3 .mp-side-panel--players {
        width: min(100%, 420px) !important;
        justify-self: center !important;
    }

    #view-hall.mp-hall-v3 .mp-bottom-nav {
        min-height: 142px !important;
        padding-inline: 32px !important;
    }

    #view-hall.mp-hall-v3 .mp-bottom-nav button {
        min-height: 104px !important;
        padding-top: 64px !important;
    }
}

/* ==================================================
   SMARTPHONE / KLEINES TABLET
================================================== */
@media (max-width: 900px) {
    body.mp-hall-app-v10c #view-hall.mp-hall-v3 {
        padding:
            max(6px, env(safe-area-inset-top))
            7px
            calc(104px + env(safe-area-inset-bottom))
            !important;
    }

    #view-hall.mp-hall-v3 .mp-hall-layout-v9 {
        width: 100% !important;
    }

    #view-hall.mp-hall-v3 .mp-welcome-ribbon {
        width: calc(100% - 16px) !important;
        min-height: 76px !important;
        margin-bottom: 10px !important;
        padding: 13px 18px 15px !important;
        border-radius: 18px !important;
    }

    #view-hall.mp-hall-v3 .mp-welcome-ribbon::before,
    #view-hall.mp-hall-v3 .mp-welcome-ribbon::after {
        display: none !important;
    }

    #view-hall.mp-hall-v3 .mp-welcome-ribbon h1 {
        font-size: clamp(1.25rem, 6vw, 1.85rem) !important;
    }

    #view-hall.mp-hall-v3 .mp-welcome-ribbon p {
        font-size: clamp(.67rem, 2.9vw, .86rem) !important;
    }

    #view-hall.mp-hall-v3 .mp-hall-columns {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
    }

    #view-hall.mp-hall-v3 .mp-hall-column--left {
        order: 1 !important;
    }

    #view-hall.mp-hall-v3 .mp-hall-column--center {
        order: 2 !important;
    }

    #view-hall.mp-hall-v3 .mp-hall-column--right {
        order: 3 !important;
        grid-column: auto !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
    }

    #view-hall.mp-hall-v3 .mp-profile-card-v10,
    #view-hall.mp-hall-v3 .mp-side-panel--stats,
    #view-hall.mp-hall-v3 .mp-side-panel--medals,
    #view-hall.mp-hall-v3 .mp-side-panel--chronicle,
    #view-hall.mp-hall-v3 .mp-side-panel--players {
        width: min(100%, 540px) !important;
        margin-inline: auto !important;
        justify-self: center !important;
    }

    /* Mobile Raumliste: keine unlesbaren absoluten Mini-Zeilen. */
    #view-hall.mp-hall-v3 .mp-room-panel {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: auto !important;
        padding: 18px 12px 118px !important;
        overflow: hidden !important;
        border: 1px solid rgba(219, 174, 69, .62) !important;
        border-radius: 22px !important;
        background:
            linear-gradient(180deg, rgba(10, 30, 49, .94), rgba(27, 13, 35, .96)),
            url("rooms/room-list-frame.png")
            center / cover
            no-repeat
            !important;
        box-shadow: 0 14px 30px rgba(0, 0, 0, .36) !important;
    }

    #view-hall.mp-hall-v3 .mp-room-panel > .mp-panel-title {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        margin: 0 0 12px !important;
        padding: 0 !important;
        font-size: clamp(1.2rem, 5vw, 1.7rem) !important;
        text-align: center !important;
    }

    #view-hall.mp-hall-v3 .mp-room-toolbar-v9b {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: 46px !important;
        margin: 0 0 12px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 46px !important;
        gap: 8px !important;
    }

    #view-hall.mp-hall-v3 .mp-room-toolbar-v9b #roomSearch,
    #view-hall.mp-hall-v3 .mp-room-toolbar-v9b input {
        height: 46px !important;
        padding-inline: 15px !important;
        font-size: 16px !important;
    }

    #view-hall.mp-hall-v3 .mp-room-panel #roomsList,
    #view-hall.mp-hall-v3 .mp-room-panel .rooms-list {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-auto-rows: minmax(108px, auto) !important;
        gap: 9px !important;
        overflow: visible !important;
    }

    #view-hall.mp-hall-v3 .mp-room-panel .room-card.mp-room-row-v9b {
        width: 100% !important;
        height: 108px !important;
        min-height: 108px !important;
        border-radius: 14px !important;
    }

    #view-hall.mp-hall-v3 .mp-room-panel .room-card.mp-room-row-v9b::before {
        width: 34% !important;
    }

    #view-hall.mp-hall-v3 .mp-room-panel .room-card.mp-room-row-v9b::after {
        right: 23% !important;
    }

    #view-hall.mp-hall-v3 .mp-room-row-ui-v9b {
        grid-template-columns: 34% minmax(0, 1fr) 23% !important;
    }

    #view-hall.mp-hall-v3 .mp-room-info-v9b {
        padding: 8px 9px !important;
    }

    #view-hall.mp-hall-v3 .mp-room-title-v9b {
        font-size: clamp(.85rem, 4vw, 1rem) !important;
    }

    #view-hall.mp-hall-v3 .mp-room-meta-v9b {
        margin-top: 3px !important;
        gap: 4px !important;
        font-size: clamp(.54rem, 2.55vw, .7rem) !important;
    }

    #view-hall.mp-hall-v3 .mp-room-action-v9b {
        padding: 10px 5px !important;
    }

    #view-hall.mp-hall-v3 .mp-room-status-v9b {
        font-size: clamp(.56rem, 2.7vw, .72rem) !important;
    }

    #view-hall.mp-hall-v3 .mp-room-join-v9b {
        width: 100% !important;
        height: 32px !important;
        padding-inline: 4px !important;
        font-size: clamp(.55rem, 2.6vw, .7rem) !important;
        border-radius: 10px !important;
    }

    /* Leere grafische Slots werden mobil nicht angezeigt. */
    #view-hall.mp-hall-v3 .mp-room-empty-v9b {
        display: none !important;
    }

    #view-hall.mp-hall-v3 .mp-room-actions {
        position: absolute !important;
        z-index: 8 !important;
        left: 12px !important;
        right: 12px !important;
        bottom: 14px !important;
        width: auto !important;
        height: 82px !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }

    #view-hall.mp-hall-v3 .mp-room-actions > button,
    #view-hall.mp-hall-v3 .mp-room-actions > a {
        height: 64px !important;
        min-height: 64px !important;
        padding: 0 8px !important;
        border: 1px solid rgba(231, 189, 85, .68) !important;
        border-radius: 22px !important;
        color: #ffe4a2 !important;
        font-size: clamp(.78rem, 3.7vw, 1rem) !important;
        background: linear-gradient(180deg, #197b45, #08542e) !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.18),
            0 8px 14px rgba(0,0,0,.30)
            !important;
    }

    #view-hall.mp-hall-v3 .mp-room-actions .mp-solo-button {
        background: linear-gradient(180deg, #216ba4, #103f70) !important;
    }

    #view-hall.mp-hall-v3 .mp-room-actions .mp-solo-button::after {
        margin-top: 3px !important;
        font-size: .6rem !important;
    }

    /* Kompakte feste App-Navigation. */
    #view-hall.mp-hall-v3 .mp-bottom-nav {
        width: calc(100vw - 8px) !important;
        min-height: 92px !important;
        height: 92px !important;
        padding:
            5px
            8px
            calc(7px + env(safe-area-inset-bottom))
            !important;
        border-radius: 18px 18px 0 0 !important;
        background-size: cover !important;
        background-position: center top !important;
    }

    #view-hall.mp-hall-v3 .mp-bottom-nav button {
        min-height: 76px !important;
        height: 76px !important;
        padding: 52px 1px 5px !important;
        font-size: clamp(.48rem, 2.3vw, .66rem) !important;
    }
}

/* Sehr kleine Handys */
@media (max-width: 460px) {
    #view-hall.mp-hall-v3 .mp-profile-content-v10 {
        left: 41% !important;
        right: 5% !important;
    }

    #view-hall.mp-hall-v3 .mp-profile-name-v10 {
        font-size: clamp(.78rem, 4.4vw, 1rem) !important;
    }

    #view-hall.mp-hall-v3 .mp-profile-meta-v10 {
        gap: 2px 6px !important;
        font-size: clamp(.5rem, 2.6vw, .66rem) !important;
    }

    #view-hall.mp-hall-v3 .mp-profile-xp-caption-v10 {
        font-size: clamp(.45rem, 2.35vw, .6rem) !important;
    }

    #view-hall.mp-hall-v3 .mp-room-row-ui-v9b {
        grid-template-columns: 31% minmax(0, 1fr) 27% !important;
    }

    #view-hall.mp-hall-v3 .mp-room-panel .room-card.mp-room-row-v9b::before {
        width: 31% !important;
    }

    #view-hall.mp-hall-v3 .mp-room-panel .room-card.mp-room-row-v9b::after {
        right: 27% !important;
    }

    #view-hall.mp-hall-v3 .mp-room-meta-v9b {
        font-size: .53rem !important;
    }
}

/* Querformat auf Mobilgeräten */
@media (max-height: 540px) and (orientation: landscape) {
    body.mp-hall-app-v10c #view-hall.mp-hall-v3 {
        padding-bottom: 80px !important;
    }

    #view-hall.mp-hall-v3 .mp-bottom-nav {
        height: 70px !important;
        min-height: 70px !important;
    }

    #view-hall.mp-hall-v3 .mp-bottom-nav button {
        height: 58px !important;
        min-height: 58px !important;
        padding-top: 39px !important;
    }
}

/* MAERCHENPFAD_HALL_V3_STEP10C_PROFILE_RESPONSIVE_END */

/* MAERCHENPFAD_ROOM_LIFECYCLE_V1_CSS_START */

/* Siegerfenster: klare Entscheidung nach Phase 10. */
#winnerDialog > .winner-room-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 0 !important;
}

#winnerDialog > .winner-room-actions > button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    font-weight: 900 !important;
}

#winnerDialog > .winner-room-actions > [data-winner-restart] {
    color: #172409 !important;
    border-color: rgba(204, 255, 150, .72) !important;
    background: linear-gradient(180deg, #d8ff9b, #78c93f) !important;
}

#winnerDialog > .winner-room-actions > [data-winner-delete] {
    color: #fff7ee !important;
    border-color: rgba(255, 155, 155, .72) !important;
    background: linear-gradient(180deg, #e25356, #9f2029) !important;
}

#winnerDialog > .winner-room-actions > [data-winner-hall] {
    grid-column: 1 / -1 !important;
}

/* Normaler Hallenraum ohne Hall-V3-Umbau. */
.room-card .mp-room-delete-safety {
    position: relative !important;
    z-index: 8 !important;
    min-height: 34px !important;
    padding: 7px 11px !important;
    color: #fff5ef !important;
    border: 1px solid rgba(255, 142, 142, .68) !important;
    border-radius: 10px !important;
    background: linear-gradient(180deg, #d94c51, #8d1822) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 5px 12px rgba(0,0,0,.28) !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}

.room-card .mp-room-delete-safety:hover:not(:disabled) {
    filter: brightness(1.09) saturate(1.08) !important;
}

.room-card .mp-room-delete-safety:disabled {
    opacity: .43 !important;
    filter: grayscale(.55) !important;
    cursor: not-allowed !important;
}

/* Hall V3: Status, Raumknopf und Löschknopf passen gemeinsam rechts hinein. */
#view-hall.mp-hall-v3 .mp-room-action-v9b:has(.mp-room-delete-safety) {
    grid-template-rows: auto auto auto !important;
    align-content: center !important;
    gap: clamp(3px, .4vw, 6px) !important;
    padding: 5% 7% !important;
}

#view-hall.mp-hall-v3 .mp-room-action-v9b .mp-room-delete-safety {
    width: min(92%, 150px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: clamp(23px, 2.7vw, 31px) !important;
    margin: 0 !important;
    padding: 0 6px !important;
    display: inline-grid !important;
    place-items: center !important;
    color: #fff4ed !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(.55rem, .78vw, .78rem) !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    border: 1px solid rgba(255, 138, 138, .64) !important;
    border-radius: 9px !important;
    background: linear-gradient(180deg, #d94b50, #8b1721) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 3px 7px rgba(0,0,0,.30) !important;
    pointer-events: auto !important;
}

#view-hall.mp-hall-v3 .mp-room-action-v9b .mp-room-delete-safety:disabled {
    opacity: .40 !important;
    filter: grayscale(.65) !important;
    cursor: not-allowed !important;
}

@media (max-width: 700px) {
    #winnerDialog > .winner-room-actions {
        grid-template-columns: 1fr !important;
        gap: 7px !important;
    }

    #winnerDialog > .winner-room-actions > [data-winner-hall] {
        grid-column: auto !important;
    }

    #view-hall.mp-hall-v3 .mp-room-action-v9b .mp-room-delete-safety {
        width: 100% !important;
        height: 24px !important;
        padding-inline: 3px !important;
        font-size: clamp(.43rem, 2vw, .58rem) !important;
    }
}

/* MAERCHENPFAD_ROOM_LIFECYCLE_V1_CSS_END */

/* MAERCHENPFAD_FIVE_BOT_LOBBIES_CSS_V15_START */

/* Fünf feste Bot-Lobbys – öffentliche oder private Nutzerräume werden nicht gerendert. */
#view-hall.mp-hall-v3 .mp-bot-lobby-card-v15 {
    cursor: default !important;
}

#view-hall.mp-hall-v3
.mp-room-panel
.room-card.mp-bot-lobby-card-v15[data-bot-lobby-card="waldlicht"] {
    --mp-room-portal: url("rooms/room-portal-open.png") !important;
}

#view-hall.mp-hall-v3
.mp-room-panel
.room-card.mp-bot-lobby-card-v15[data-bot-lobby-card="kristalltor"] {
    --mp-room-portal: url("rooms/room-portal-crystal.png") !important;
}

#view-hall.mp-hall-v3
.mp-room-panel
.room-card.mp-bot-lobby-card-v15[data-bot-lobby-card="drachenfeuer"] {
    --mp-room-portal: url("rooms/room-portal-fire.png") !important;
}

#view-hall.mp-hall-v3
.mp-room-panel
.room-card.mp-bot-lobby-card-v15[data-bot-lobby-card="mondschloss"] {
    --mp-room-portal: url("rooms/room-portal-private.png") !important;
}

#view-hall.mp-hall-v3
.mp-room-panel
.room-card.mp-bot-lobby-card-v15[data-bot-lobby-card="maerchenchaos"] {
    --mp-room-portal: url("rooms/room-portal-rejoin.png") !important;
}

#view-hall.mp-hall-v3
.mp-room-panel
.mp-bot-lobby-card-v15
.mp-room-status-v9b {
    color: #54e98b !important;
    text-shadow:
        0 2px 7px rgba(0, 0, 0, .72),
        0 0 12px rgba(53, 231, 130, .32)
        !important;
}

#view-hall.mp-hall-v3
.mp-room-panel
.mp-bot-lobby-card-v15
.mp-room-join-v9b,
#view-hall.mp-hall-v3
.mp-room-panel
.mp-bot-lobby-card-v15
[data-bot-lobby-v15] {
    color: #fff9dd !important;
    border-color: rgba(137, 255, 161, .55) !important;
    background:
        linear-gradient(180deg, #36c72d, #13861b)
        !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.28),
        0 4px 9px rgba(0,0,0,.34),
        0 0 14px rgba(72, 222, 92, .18)
        !important;
}

#view-hall.mp-hall-v3
.mp-room-panel
.mp-bot-lobby-card-v15
.mp-room-join-v9b:hover,
#view-hall.mp-hall-v3
.mp-room-panel
.mp-bot-lobby-card-v15
[data-bot-lobby-v15]:hover {
    filter: brightness(1.13) saturate(1.08) !important;
}

#view-hall.mp-hall-v3
.mp-room-panel
.mp-bot-lobby-card-v15
button[aria-busy="true"] {
    opacity: .64 !important;
    cursor: wait !important;
}

/* Die zwei großen unteren Flächen sind jetzt ebenfalls Bot-Schnellstarts. */
#view-hall.mp-hall-v3 .mp-room-actions #createRoomButton,
#view-hall.mp-hall-v3 .mp-room-actions .mp-solo-button {
    display: grid !important;
    place-items: center !important;
    pointer-events: auto !important;
}

#view-hall.mp-hall-v3 .mp-room-actions [data-bot-random-v15][aria-busy="true"] {
    opacity: .62 !important;
    cursor: wait !important;
}

/* Leerer Suchtreffer statt allgemeinem Hallen-Leertext. */
#view-hall.mp-hall-v3
.mp-room-panel:has(#roomsList.hidden)
#roomsEmpty:not([hidden]) h4 {
    font-size: 0 !important;
}

#view-hall.mp-hall-v3
.mp-room-panel:has(#roomsList.hidden)
#roomsEmpty:not([hidden]) h4::after {
    content: "Keine passende Bot-Lobby gefunden";
    font-size: clamp(1.05rem, 2vw, 1.55rem) !important;
}

#view-hall.mp-hall-v3
.mp-room-panel:has(#roomsList.hidden)
#roomsEmpty:not([hidden]) p {
    font-size: 0 !important;
}

#view-hall.mp-hall-v3
.mp-room-panel:has(#roomsList.hidden)
#roomsEmpty:not([hidden]) p::after {
    content: "Ändere den Suchbegriff – alle fünf Bot-Lobbys sind jederzeit verfügbar.";
    font-size: clamp(.78rem, 1.25vw, 1rem) !important;
}

@media (max-width: 900px) {
    #view-hall.mp-hall-v3
    .mp-room-panel
    .mp-bot-lobby-card-v15
    .mp-room-join-v9b,
    #view-hall.mp-hall-v3
    .mp-room-panel
    .mp-bot-lobby-card-v15
    [data-bot-lobby-v15] {
        min-height: 32px !important;
    }
}

/* MAERCHENPFAD_FIVE_BOT_LOBBIES_CSS_V15_END */

/* MAERCHENPFAD_BOT_LOBBIES_ROOM_FINDER_CSS_V16_START */

/* =========================================================
   FESTE BOT-LOBBYS IM GROSSEN HALLENRAHMEN
========================================================= */

#view-hall.mp-hall-v3 .mp-bot-lobby-card-v16 {
    cursor: default !important;
}

#view-hall.mp-hall-v3
.mp-room-panel
.room-card.mp-bot-lobby-card-v16[data-bot-lobby-card="waldlicht"] {
    --mp-room-portal: url("rooms/room-portal-open.png") !important;
}

#view-hall.mp-hall-v3
.mp-room-panel
.room-card.mp-bot-lobby-card-v16[data-bot-lobby-card="kristalltor"] {
    --mp-room-portal: url("rooms/room-portal-crystal.png") !important;
}

#view-hall.mp-hall-v3
.mp-room-panel
.room-card.mp-bot-lobby-card-v16[data-bot-lobby-card="drachenfeuer"] {
    --mp-room-portal: url("rooms/room-portal-fire.png") !important;
}

#view-hall.mp-hall-v3
.mp-room-panel
.room-card.mp-bot-lobby-card-v16[data-bot-lobby-card="mondschloss"] {
    --mp-room-portal: url("rooms/room-portal-private.png") !important;
}

#view-hall.mp-hall-v3
.mp-room-panel
.room-card.mp-bot-lobby-card-v16[data-bot-lobby-card="maerchenchaos"] {
    --mp-room-portal: url("rooms/room-portal-rejoin.png") !important;
}

#view-hall.mp-hall-v3
.mp-room-panel
.mp-bot-lobby-card-v16
.mp-room-status-v9b {
    color: #59ee91 !important;
    text-shadow:
        0 2px 7px rgba(0, 0, 0, .72),
        0 0 12px rgba(53, 231, 130, .34)
        !important;
}

#view-hall.mp-hall-v3
.mp-room-panel
.mp-bot-lobby-card-v16
.mp-room-join-v9b,
#view-hall.mp-hall-v3
.mp-room-panel
.mp-bot-lobby-card-v16
[data-bot-lobby-v16] {
    color: #fff9dd !important;
    border-color: rgba(137, 255, 161, .58) !important;
    background:
        linear-gradient(180deg, #36c72d, #13861b)
        !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .28),
        0 4px 9px rgba(0, 0, 0, .34),
        0 0 14px rgba(72, 222, 92, .18)
        !important;
}

#view-hall.mp-hall-v3
.mp-room-panel
.mp-bot-lobby-card-v16
.mp-room-join-v9b:hover,
#view-hall.mp-hall-v3
.mp-room-panel
.mp-bot-lobby-card-v16
[data-bot-lobby-v16]:hover {
    filter: brightness(1.13) saturate(1.08) !important;
}

#view-hall.mp-hall-v3
.mp-room-panel
.mp-bot-lobby-card-v16
button[aria-busy="true"] {
    opacity: .64 !important;
    cursor: wait !important;
}

/*
 * Die alte gold/blaue Gestaltung der Aktion bleibt erhalten.
 * Es wird ausschließlich der Text und die Funktion geändert.
 */
#view-hall.mp-hall-v3
.mp-room-actions
.mp-solo-button[data-mp-find-rooms-v16="1"] {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* =========================================================
   RESPONSIVES MODAL „RÄUME FINDEN“
========================================================= */

#view-hall.mp-hall-v3 #mpFindRoomsDialogV16 {
    box-sizing: border-box !important;
    width: min(980px, calc(100vw - 28px)) !important;
    max-width: min(980px, calc(100vw - 28px)) !important;
    max-height: min(90dvh, 900px) !important;
    margin: auto !important;
    padding: 0 !important;
    color: #fff8e4 !important;
    border:
        2px solid rgba(245, 205, 111, .82)
        !important;
    border-radius: 26px !important;
    background:
        radial-gradient(
            circle at 50% -20%,
            rgba(116, 75, 176, .38),
            transparent 48%
        ),
        linear-gradient(
            155deg,
            rgba(31, 21, 52, .985),
            rgba(11, 9, 24, .99)
        )
        !important;
    box-shadow:
        0 28px 90px rgba(0, 0, 0, .68),
        inset 0 1px 0 rgba(255, 255, 255, .10),
        inset 0 0 48px rgba(124, 73, 170, .14)
        !important;
    overflow: hidden !important;
}

#view-hall.mp-hall-v3 #mpFindRoomsDialogV16[open] {
    display: block !important;
    animation:
        mpFindRoomsOpenV16 .22s ease-out both
        !important;
}

#view-hall.mp-hall-v3 #mpFindRoomsDialogV16::backdrop {
    background:
        rgba(4, 3, 12, .77)
        !important;
    backdrop-filter: blur(7px) saturate(.82) !important;
    -webkit-backdrop-filter: blur(7px) saturate(.82) !important;
}

#view-hall.mp-hall-v3 .mp-find-rooms-shell-v16 {
    box-sizing: border-box !important;
    width: 100% !important;
    max-height: min(90dvh, 900px) !important;
    padding: clamp(18px, 3vw, 34px) !important;
    display: grid !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) !important;
    gap: 16px !important;
    overflow: hidden !important;
}

#view-hall.mp-hall-v3 .mp-find-rooms-head-v16 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 18px !important;
    padding-bottom: 15px !important;
    border-bottom:
        1px solid rgba(244, 205, 113, .24)
        !important;
}

#view-hall.mp-hall-v3 .mp-find-rooms-kicker-v16 {
    display: block !important;
    margin-bottom: 5px !important;
    color: #e9be68 !important;
    font-size: clamp(.64rem, 1.1vw, .78rem) !important;
    font-weight: 900 !important;
    letter-spacing: .15em !important;
    text-transform: uppercase !important;
}

#view-hall.mp-hall-v3 .mp-find-rooms-head-v16 h2 {
    margin: 0 !important;
    color: #ffe5a4 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(1.55rem, 4vw, 2.45rem) !important;
    line-height: 1.05 !important;
    text-shadow:
        0 3px 0 rgba(75, 37, 9, .68),
        0 0 17px rgba(255, 207, 96, .16)
        !important;
}

#view-hall.mp-hall-v3 .mp-find-rooms-head-v16 p {
    max-width: 680px !important;
    margin: 8px 0 0 !important;
    color: #d9cbe6 !important;
    font-size: clamp(.8rem, 1.3vw, .98rem) !important;
    line-height: 1.45 !important;
}

#view-hall.mp-hall-v3 .mp-find-rooms-close-v16 {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 0 4px !important;
    display: grid !important;
    place-items: center !important;
    color: #fff1c4 !important;
    font-family: Arial, sans-serif !important;
    font-size: 2rem !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    border:
        1px solid rgba(245, 205, 111, .48)
        !important;
    border-radius: 50% !important;
    background:
        linear-gradient(
            180deg,
            rgba(85, 52, 112, .95),
            rgba(34, 21, 55, .98)
        )
        !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .11),
        0 6px 15px rgba(0, 0, 0, .28)
        !important;
    cursor: pointer !important;
}

#view-hall.mp-hall-v3 .mp-find-rooms-close-v16:hover {
    filter: brightness(1.16) !important;
}

#view-hall.mp-hall-v3 .mp-find-rooms-toolbar-v16 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
}

#view-hall.mp-hall-v3 .mp-find-rooms-search-v16 {
    min-width: 0 !important;
    height: 46px !important;
    padding: 0 14px !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 9px !important;
    color: #e9c86f !important;
    border:
        1px solid rgba(231, 192, 100, .42)
        !important;
    border-radius: 14px !important;
    background: rgba(7, 7, 18, .68) !important;
    box-shadow:
        inset 0 1px 9px rgba(0, 0, 0, .42)
        !important;
}

#view-hall.mp-hall-v3 .mp-find-rooms-search-v16 input {
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    padding: 0 !important;
    color: #fff7e1 !important;
    font: inherit !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
}

#view-hall.mp-hall-v3
.mp-find-rooms-search-v16
input::placeholder {
    color: #a99bb7 !important;
}

#view-hall.mp-hall-v3 .mp-find-rooms-refresh-v16 {
    min-height: 46px !important;
    padding: 0 18px !important;
    color: #ffe7aa !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: .92rem !important;
    font-weight: 800 !important;
    border:
        1px solid rgba(237, 198, 105, .48)
        !important;
    border-radius: 14px !important;
    background:
        linear-gradient(
            180deg,
            rgba(72, 46, 103, .96),
            rgba(31, 21, 50, .98)
        )
        !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .10),
        0 5px 13px rgba(0, 0, 0, .26)
        !important;
    cursor: pointer !important;
}

#view-hall.mp-hall-v3 .mp-find-rooms-refresh-v16:hover {
    filter: brightness(1.13) !important;
}

#view-hall.mp-hall-v3 .mp-find-rooms-status-v16 {
    min-height: 20px !important;
    color: #c9b9d7 !important;
    font-size: .78rem !important;
    font-weight: 700 !important;
    text-align: right !important;
}

#view-hall.mp-hall-v3 .mp-find-rooms-list-v16 {
    min-height: 180px !important;
    max-height: min(59dvh, 620px) !important;
    padding: 2px 6px 4px 2px !important;
    display: grid !important;
    grid-template-columns:
        repeat(2, minmax(0, 1fr))
        !important;
    align-content: start !important;
    gap: 12px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-width: thin !important;
    scrollbar-color:
        rgba(226, 183, 83, .68)
        rgba(8, 7, 18, .45)
        !important;
}

#view-hall.mp-hall-v3
.mp-find-rooms-list-v16::-webkit-scrollbar {
    width: 8px !important;
}

#view-hall.mp-hall-v3
.mp-find-rooms-list-v16::-webkit-scrollbar-thumb {
    border-radius: 999px !important;
    background:
        linear-gradient(
            180deg,
            #e8bf64,
            #8a5d21
        )
        !important;
}

#view-hall.mp-hall-v3 .mp-user-room-card-v16 {
    min-width: 0 !important;
    padding: 15px !important;
    display: grid !important;
    gap: 13px !important;
    border:
        1px solid rgba(226, 185, 91, .32)
        !important;
    border-radius: 17px !important;
    background:
        radial-gradient(
            circle at 92% 0%,
            rgba(107, 73, 154, .20),
            transparent 38%
        ),
        linear-gradient(
            150deg,
            rgba(36, 25, 57, .93),
            rgba(14, 12, 27, .95)
        )
        !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .06),
        0 9px 22px rgba(0, 0, 0, .24)
        !important;
}

#view-hall.mp-hall-v3 .mp-user-room-card-head-v16 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 10px !important;
}

#view-hall.mp-hall-v3 .mp-user-room-card-head-v16 h3 {
    margin: 0 !important;
    color: #ffe3a2 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(1rem, 2vw, 1.28rem) !important;
    line-height: 1.16 !important;
    overflow-wrap: anywhere !important;
}

#view-hall.mp-hall-v3 .mp-user-room-card-head-v16 p {
    margin: 4px 0 0 !important;
    color: #cbbbd8 !important;
    font-size: .75rem !important;
}

#view-hall.mp-hall-v3 .mp-user-room-card-head-v16 p b {
    color: #efe2c4 !important;
}

#view-hall.mp-hall-v3 .mp-user-room-state-v16 {
    padding: 5px 8px !important;
    color: #a9f6c4 !important;
    font-size: .66rem !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    border:
        1px solid rgba(91, 226, 139, .30)
        !important;
    border-radius: 999px !important;
    background: rgba(28, 112, 61, .19) !important;
}

#view-hall.mp-hall-v3
.mp-user-room-state-v16[data-state="playing"] {
    color: #ffd487 !important;
    border-color: rgba(255, 181, 74, .34) !important;
    background: rgba(137, 74, 19, .20) !important;
}

#view-hall.mp-hall-v3
.mp-user-room-state-v16[data-state="finished"] {
    color: #c9bed3 !important;
    border-color: rgba(190, 174, 202, .26) !important;
    background: rgba(96, 81, 110, .18) !important;
}

#view-hall.mp-hall-v3 .mp-user-room-meta-v16 {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px 10px !important;
    color: #d8c9e2 !important;
    font-size: .71rem !important;
    line-height: 1.28 !important;
}

#view-hall.mp-hall-v3 .mp-user-room-card-foot-v16 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
}

#view-hall.mp-hall-v3 .mp-user-room-avatars-v16 {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    padding-left: 4px !important;
}

#view-hall.mp-hall-v3 .mp-user-room-avatars-v16 img {
    width: 34px !important;
    height: 34px !important;
    margin-left: -5px !important;
    object-fit: cover !important;
    border:
        2px solid rgba(244, 205, 111, .76)
        !important;
    border-radius: 50% !important;
    background: #1b1328 !important;
    box-shadow:
        0 3px 9px rgba(0, 0, 0, .38)
        !important;
}

#view-hall.mp-hall-v3
.mp-user-room-avatars-v16
img:first-child {
    margin-left: 0 !important;
}

#view-hall.mp-hall-v3 .mp-user-room-avatars-v16 small {
    color: #a99cb4 !important;
    font-size: .68rem !important;
}

#view-hall.mp-hall-v3 .mp-user-room-open-v16 {
    min-height: 38px !important;
    padding: 0 15px !important;
    color: #fff8df !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: .8rem !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    border:
        1px solid rgba(129, 255, 157, .52)
        !important;
    border-radius: 11px !important;
    background:
        linear-gradient(
            180deg,
            #38c834,
            #147e1c
        )
        !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .24),
        0 5px 12px rgba(0, 0, 0, .30)
        !important;
    cursor: pointer !important;
}

#view-hall.mp-hall-v3 .mp-user-room-open-v16:hover {
    filter: brightness(1.13) !important;
}

#view-hall.mp-hall-v3 .mp-user-room-open-v16:disabled {
    color: #b8adbd !important;
    border-color: rgba(181, 166, 191, .24) !important;
    background:
        linear-gradient(
            180deg,
            #5d5267,
            #342d3c
        )
        !important;
    opacity: .62 !important;
    cursor: not-allowed !important;
    filter: none !important;
}

#view-hall.mp-hall-v3 .mp-find-rooms-empty-v16,
#view-hall.mp-hall-v3 .mp-find-rooms-loading-v16 {
    grid-column: 1 / -1 !important;
    min-height: 260px !important;
    padding: 28px !important;
    display: grid !important;
    place-content: center !important;
    justify-items: center !important;
    gap: 8px !important;
    color: #d4c5df !important;
    text-align: center !important;
    border:
        1px dashed rgba(225, 183, 88, .28)
        !important;
    border-radius: 18px !important;
    background: rgba(10, 9, 22, .40) !important;
}

#view-hall.mp-hall-v3 .mp-find-rooms-empty-v16 > span {
    font-size: 2.5rem !important;
}

#view-hall.mp-hall-v3 .mp-find-rooms-empty-v16 h3 {
    margin: 0 !important;
    color: #ffe2a1 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 1.25rem !important;
}

#view-hall.mp-hall-v3 .mp-find-rooms-empty-v16 p {
    max-width: 470px !important;
    margin: 0 !important;
    line-height: 1.45 !important;
}

#view-hall.mp-hall-v3 .mp-find-rooms-loading-v16 > span {
    width: 36px !important;
    height: 36px !important;
    border:
        3px solid rgba(240, 202, 111, .22)
        !important;
    border-top-color: #f0ca6f !important;
    border-radius: 50% !important;
    animation:
        mpFindRoomsSpinV16 .8s linear infinite
        !important;
}

@keyframes mpFindRoomsOpenV16 {
    from {
        opacity: 0;
        transform: translateY(12px) scale(.975);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes mpFindRoomsSpinV16 {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 760px) {
    #view-hall.mp-hall-v3 #mpFindRoomsDialogV16 {
        width: calc(100vw - 12px) !important;
        max-width: calc(100vw - 12px) !important;
        max-height:
            calc(100dvh - 12px)
            !important;
        border-radius: 20px !important;
    }

    #view-hall.mp-hall-v3 .mp-find-rooms-shell-v16 {
        max-height:
            calc(100dvh - 12px)
            !important;
        padding:
            16px 12px
            calc(16px + env(safe-area-inset-bottom))
            !important;
        gap: 12px !important;
    }

    #view-hall.mp-hall-v3 .mp-find-rooms-head-v16 {
        gap: 10px !important;
        padding-bottom: 11px !important;
    }

    #view-hall.mp-hall-v3 .mp-find-rooms-head-v16 p {
        font-size: .76rem !important;
    }

    #view-hall.mp-hall-v3 .mp-find-rooms-close-v16 {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
    }

    #view-hall.mp-hall-v3 .mp-find-rooms-toolbar-v16 {
        grid-template-columns: 1fr !important;
    }

    #view-hall.mp-hall-v3 .mp-find-rooms-refresh-v16 {
        min-height: 40px !important;
    }

    #view-hall.mp-hall-v3 .mp-find-rooms-list-v16 {
        max-height:
            calc(100dvh - 278px)
            !important;
        grid-template-columns: 1fr !important;
        gap: 9px !important;
    }

    #view-hall.mp-hall-v3 .mp-user-room-card-v16 {
        padding: 12px !important;
        gap: 10px !important;
    }

    #view-hall.mp-hall-v3 .mp-user-room-card-foot-v16 {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    #view-hall.mp-hall-v3 .mp-user-room-open-v16 {
        width: 100% !important;
        min-height: 42px !important;
    }

    #view-hall.mp-hall-v3 .mp-find-rooms-status-v16 {
        text-align: left !important;
    }
}

@media (max-width: 420px) {
    #view-hall.mp-hall-v3 .mp-user-room-card-head-v16 {
        grid-template-columns: 1fr !important;
    }

    #view-hall.mp-hall-v3 .mp-user-room-state-v16 {
        justify-self: start !important;
    }

    #view-hall.mp-hall-v3 .mp-user-room-meta-v16 {
        display: grid !important;
        gap: 5px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #view-hall.mp-hall-v3 #mpFindRoomsDialogV16[open],
    #view-hall.mp-hall-v3 .mp-find-rooms-loading-v16 > span {
        animation: none !important;
    }
}

/* MAERCHENPFAD_BOT_LOBBIES_ROOM_FINDER_CSS_V16_END */

/* MAERCHENPFAD_SPECTATOR_NEXT_GAME_HALL_CSS_V18_START */

#view-hall.mp-hall-v3
.mp-user-room-card-v16.mp-user-room-spectatable-v18
.mp-user-room-open-v16[disabled] {
    display: none !important;
}

#view-hall.mp-hall-v3 .mp-spectator-actions-v18 {
    width: min(100%, 360px);
    margin-left: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

#view-hall.mp-hall-v3 .mp-spectator-actions-v18 > button {
    min-height: 42px;
    padding: 8px 11px;
    border: 1px solid rgba(255, 225, 144, .68);
    border-radius: 12px;
    color: #fff3c8;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(.68rem, .9vw, .88rem);
    font-weight: 800;
    line-height: 1.1;
    cursor: pointer;
    text-shadow: 0 2px 2px rgba(0, 0, 0, .72);
    transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}

#view-hall.mp-hall-v3 .mp-watch-room-v18 {
    background:
        radial-gradient(circle at 50% 0, rgba(123, 222, 255, .34), transparent 48%),
        linear-gradient(180deg, #315c8a, #162947);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        0 6px 14px rgba(5, 12, 32, .42);
}

#view-hall.mp-hall-v3 .mp-queue-room-v18 {
    background:
        radial-gradient(circle at 50% 0, rgba(255, 224, 119, .36), transparent 50%),
        linear-gradient(180deg, #8c641d, #49310e);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.20),
        0 6px 14px rgba(35, 19, 3, .42);
}

#view-hall.mp-hall-v3 .mp-queue-room-v18.is-queued {
    border-color: rgba(142, 255, 187, .72);
    color: #dfffe9;
    background:
        radial-gradient(circle at 50% 0, rgba(118, 255, 179, .34), transparent 50%),
        linear-gradient(180deg, #276f4d, #123827);
}

#view-hall.mp-hall-v3 .mp-spectator-actions-v18 > button:hover,
#view-hall.mp-hall-v3 .mp-spectator-actions-v18 > button:focus-visible {
    filter: brightness(1.14);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.28),
        0 9px 18px rgba(0,0,0,.38);
}

#view-hall.mp-hall-v3 .mp-spectator-meta-v18 {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-top: 6px;
    color: #d9c6ee;
    font-size: .72rem;
}

#view-hall.mp-hall-v3 .mp-spectator-meta-v18 span {
    white-space: nowrap;
}

@media (max-width: 720px) {
    #view-hall.mp-hall-v3 .mp-spectator-actions-v18 {
        width: 100%;
        grid-template-columns: 1fr;
    }

    #view-hall.mp-hall-v3 .mp-spectator-actions-v18 > button {
        min-height: 40px;
        font-size: .72rem;
    }
}

/* MAERCHENPFAD_SPECTATOR_NEXT_GAME_HALL_CSS_V18_END */

/* MAERCHENPFAD_HALL_V3_SCROLL_EDGE_FIX_V19_START */

/*
 * Entfernt die graue Kante oben und die schwarze Kante unten:
 * - setzt den Standard-Body-Abstand vollständig zurück
 * - gibt html/body denselben Hallenhintergrund
 * - verhindert sichtbares vertikales Overscrollen
 * - hält bei Browser-Bounce eine feste Hintergrundebene bereit
 */

html:has(body.mp-hall-app-v10c),
body.mp-hall-app-v10c {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    min-height: 100% !important;
    background-color: #0b0813 !important;
    overscroll-behavior: none !important;
    overscroll-behavior-y: none !important;
}

html:has(body.mp-hall-app-v10c) {
    background-image:
        linear-gradient(
            180deg,
            rgba(7, 8, 24, 0.08) 0%,
            rgba(11, 8, 19, 0.16) 48%,
            rgba(9, 6, 16, 0.38) 100%
        ),
        url("backgrounds/hall-background-desktop.webp") !important;
    background-position: center top !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

body.mp-hall-app-v10c {
    position: relative !important;
    isolation: isolate !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    background: transparent !important;
}

/*
 * Fallback für Browser, die beim Überziehen des oberen oder unteren
 * Seitenendes kurz den Root-Hintergrund freilegen.
 */
body.mp-hall-app-v10c::before {
    content: "" !important;
    position: fixed !important;
    z-index: -1 !important;
    inset: -4px !important;
    pointer-events: none !important;
    background-image:
        linear-gradient(
            180deg,
            rgba(7, 8, 24, 0.08) 0%,
            rgba(11, 8, 19, 0.16) 48%,
            rgba(9, 6, 16, 0.38) 100%
        ),
        url("backgrounds/hall-background-desktop.webp") !important;
    background-position: center top !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

body.mp-hall-app-v10c #view-hall.mp-hall-v3 {
    box-sizing: border-box !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Verhindert einen kollabierenden Außenabstand am letzten Hallenelement. */
body.mp-hall-app-v10c #view-hall.mp-hall-v3 > :last-child {
    margin-bottom: 0 !important;
}

@media (max-width: 900px) {
    html:has(body.mp-hall-app-v10c) {
        background-image:
            linear-gradient(
                180deg,
                rgba(5, 8, 24, 0.06) 0%,
                rgba(9, 7, 20, 0.16) 52%,
                rgba(9, 6, 16, 0.42) 100%
            ),
            url("backgrounds/hall-background-mobile.webp") !important;
        background-attachment: scroll !important;
    }

    body.mp-hall-app-v10c::before {
        background-image:
            linear-gradient(
                180deg,
                rgba(5, 8, 24, 0.06) 0%,
                rgba(9, 7, 20, 0.16) 52%,
                rgba(9, 6, 16, 0.42) 100%
            ),
            url("backgrounds/hall-background-mobile.webp") !important;
    }
}

/* MAERCHENPFAD_HALL_V3_SCROLL_EDGE_FIX_V19_END */

/* MAERCHENPFAD_ROOM_FINDER_GAME_UI_CSS_V20_START */

/*
 * Spielartige Raumübersicht mit großen Avataren, Portalwappen,
 * Ornamentrahmen und klarer Trennung zwischen Gruppe, Raumdaten und Aktionen.
 * Alle Regeln sind auf das bestehende V16-Dialogfenster begrenzt.
 */

#view-hall.mp-hall-v3 #mpFindRoomsDialogV16 {
    position: relative !important;
    width: min(1180px, calc(100vw - 32px)) !important;
    max-width: min(1180px, calc(100vw - 32px)) !important;
    max-height: min(94dvh, 940px) !important;
    border: 2px solid rgba(255, 226, 149, .92) !important;
    border-radius: 30px !important;
    background:
        radial-gradient(circle at 46% -18%, rgba(139, 74, 207, .35), transparent 49%),
        radial-gradient(circle at 100% 40%, rgba(70, 39, 122, .22), transparent 39%),
        linear-gradient(145deg, rgba(28, 18, 48, .995), rgba(7, 7, 18, .997) 72%)
        !important;
    box-shadow:
        0 32px 110px rgba(0, 0, 0, .78),
        0 0 0 5px rgba(13, 8, 25, .88),
        0 0 0 7px rgba(164, 111, 47, .38),
        inset 0 1px 0 rgba(255, 255, 255, .15),
        inset 0 0 72px rgba(115, 61, 168, .18)
        !important;
    isolation: isolate !important;
}

#view-hall.mp-hall-v3 #mpFindRoomsDialogV16::before,
#view-hall.mp-hall-v3 #mpFindRoomsDialogV16::after {
    content: "✦" !important;
    position: absolute !important;
    z-index: 3 !important;
    top: -15px !important;
    width: 44px !important;
    height: 30px !important;
    display: grid !important;
    place-items: center !important;
    color: #ffe19a !important;
    font-size: 1.45rem !important;
    text-shadow: 0 0 16px rgba(189, 101, 255, .78) !important;
    pointer-events: none !important;
}

#view-hall.mp-hall-v3 #mpFindRoomsDialogV16::before {
    left: 11% !important;
}

#view-hall.mp-hall-v3 #mpFindRoomsDialogV16::after {
    right: 11% !important;
}

#view-hall.mp-hall-v3 .mp-find-rooms-shell-v16 {
    position: relative !important;
    z-index: 1 !important;
    max-height: min(94dvh, 940px) !important;
    padding: clamp(24px, 3vw, 40px) !important;
    gap: 14px !important;
}

#view-hall.mp-hall-v3 .mp-find-rooms-head-v16 {
    position: relative !important;
    min-height: 132px !important;
    padding: 8px 86px 22px 88px !important;
    align-items: center !important;
    border-bottom: 1px solid rgba(244, 201, 102, .42) !important;
}

#view-hall.mp-hall-v3 .mp-find-rooms-head-v16::before {
    content: "◆" !important;
    position: absolute !important;
    left: 10px !important;
    top: 9px !important;
    width: 57px !important;
    height: 94px !important;
    display: grid !important;
    place-items: center !important;
    color: #c993ff !important;
    font-size: 2.1rem !important;
    border: 2px solid rgba(232, 190, 94, .76) !important;
    border-radius: 50% 50% 44% 44% / 36% 36% 64% 64% !important;
    background:
        radial-gradient(circle at 50% 35%, rgba(157, 82, 230, .78), transparent 29%),
        linear-gradient(180deg, #291b46, #0e0c1a)
        !important;
    box-shadow:
        inset 0 0 18px rgba(217, 156, 255, .25),
        0 8px 20px rgba(0, 0, 0, .44),
        0 0 22px rgba(134, 66, 205, .24)
        !important;
    transform: rotate(2deg) !important;
}

#view-hall.mp-hall-v3 .mp-find-rooms-head-v16::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -2px !important;
    height: 3px !important;
    background:
        linear-gradient(90deg, transparent, #9d6c28 15%, #ffe08a 50%, #9d6c28 85%, transparent)
        !important;
    opacity: .72 !important;
}

#view-hall.mp-hall-v3 .mp-find-rooms-kicker-v16 {
    margin-bottom: 7px !important;
    color: #f2c66c !important;
    font-size: clamp(.7rem, 1.05vw, .86rem) !important;
    letter-spacing: .2em !important;
    text-shadow: 0 2px 5px rgba(0, 0, 0, .72) !important;
}

#view-hall.mp-hall-v3 .mp-find-rooms-head-v16 h2 {
    color: #ffe7a7 !important;
    font-size: clamp(2rem, 4.4vw, 3.55rem) !important;
    letter-spacing: -.025em !important;
    text-shadow:
        0 3px 0 rgba(91, 45, 10, .72),
        0 0 9px rgba(255, 215, 123, .28),
        0 0 28px rgba(177, 92, 244, .18)
        !important;
}

#view-hall.mp-hall-v3 .mp-find-rooms-head-v16 p {
    max-width: 760px !important;
    margin-top: 10px !important;
    color: #d9cae5 !important;
    font-size: clamp(.84rem, 1.25vw, 1.04rem) !important;
}

#view-hall.mp-hall-v3 .mp-find-rooms-close-v16 {
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    padding: 0 0 5px !important;
    color: #ffe8ad !important;
    font-size: 2.2rem !important;
    font-weight: 500 !important;
    border: 2px solid rgba(242, 202, 102, .82) !important;
    background:
        radial-gradient(circle at 38% 26%, rgba(175, 103, 224, .58), transparent 34%),
        linear-gradient(145deg, #5b317d, #201332 68%)
        !important;
    box-shadow:
        0 0 0 4px rgba(20, 12, 32, .9),
        0 0 0 6px rgba(149, 95, 35, .45),
        inset 0 1px 0 rgba(255, 255, 255, .24),
        0 9px 22px rgba(0, 0, 0, .45),
        0 0 20px rgba(147, 77, 215, .2)
        !important;
}

#view-hall.mp-hall-v3 .mp-find-rooms-close-v16:hover,
#view-hall.mp-hall-v3 .mp-find-rooms-close-v16:focus-visible {
    filter: brightness(1.18) saturate(1.1) !important;
    transform: translateY(-1px) scale(1.02) !important;
}

#view-hall.mp-hall-v3 .mp-find-rooms-toolbar-v16 {
    grid-template-columns: minmax(0, 1fr) minmax(190px, auto) !important;
    gap: 14px !important;
}

#view-hall.mp-hall-v3 .mp-find-rooms-search-v16 {
    position: relative !important;
    height: 58px !important;
    padding: 0 20px !important;
    gap: 13px !important;
    color: #f4cb70 !important;
    font-size: 1.25rem !important;
    border: 2px solid rgba(210, 164, 70, .58) !important;
    border-radius: 19px !important;
    background:
        radial-gradient(circle at 94% 50%, rgba(132, 62, 190, .18), transparent 20%),
        linear-gradient(180deg, rgba(8, 8, 20, .92), rgba(4, 5, 14, .98))
        !important;
    box-shadow:
        inset 0 0 16px rgba(0, 0, 0, .66),
        inset 0 1px 0 rgba(255, 255, 255, .05),
        0 6px 18px rgba(0, 0, 0, .28)
        !important;
}

#view-hall.mp-hall-v3 .mp-find-rooms-search-v16::after {
    content: "◆" !important;
    position: absolute !important;
    right: 17px !important;
    color: #b274ef !important;
    font-size: 1rem !important;
    text-shadow: 0 0 10px rgba(180, 104, 240, .65) !important;
    pointer-events: none !important;
}

#view-hall.mp-hall-v3 .mp-find-rooms-search-v16 input {
    padding-right: 34px !important;
    font-size: clamp(.88rem, 1.2vw, 1rem) !important;
}

#view-hall.mp-hall-v3 .mp-find-rooms-refresh-v16 {
    min-height: 58px !important;
    padding: 0 25px !important;
    font-size: clamp(.92rem, 1.25vw, 1.08rem) !important;
    border: 2px solid rgba(242, 205, 112, .72) !important;
    border-radius: 19px !important;
    background:
        radial-gradient(circle at 50% 0, rgba(194, 111, 238, .34), transparent 48%),
        linear-gradient(180deg, #6a3b88, #2c1b49 72%)
        !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .22),
        0 7px 18px rgba(0, 0, 0, .38),
        0 0 14px rgba(139, 71, 203, .15)
        !important;
}

#view-hall.mp-hall-v3 .mp-find-rooms-status-v16 {
    min-height: 22px !important;
    padding-right: 4px !important;
    color: #d5c3e3 !important;
    font-size: .82rem !important;
    letter-spacing: .02em !important;
}

#view-hall.mp-hall-v3 .mp-find-rooms-list-v16 {
    min-height: 250px !important;
    max-height: min(59dvh, 650px) !important;
    padding: 4px 10px 8px 4px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
}

#view-hall.mp-hall-v3 .mp-user-room-card-v16 {
    position: relative !important;
    min-height: 298px !important;
    padding: 24px 28px 22px !important;
    display: grid !important;
    grid-template-columns: 124px minmax(0, 1fr) !important;
    grid-template-areas:
        "crest head"
        "crest game"
        "crest foot"
        !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    column-gap: 24px !important;
    row-gap: 14px !important;
    overflow: hidden !important;
    border: 2px solid rgba(219, 172, 77, .62) !important;
    border-radius: 23px !important;
    background:
        radial-gradient(circle at 30% 10%, rgba(103, 49, 152, .28), transparent 34%),
        radial-gradient(circle at 100% 100%, rgba(65, 35, 112, .26), transparent 38%),
        linear-gradient(145deg, rgba(35, 22, 57, .985), rgba(10, 9, 22, .995) 73%)
        !important;
    box-shadow:
        0 16px 36px rgba(0, 0, 0, .42),
        inset 0 1px 0 rgba(255, 255, 255, .11),
        inset 0 0 34px rgba(105, 52, 150, .12),
        0 0 0 4px rgba(8, 6, 16, .78)
        !important;
}

#view-hall.mp-hall-v3 .mp-user-room-card-v16::before {
    content: "" !important;
    position: absolute !important;
    inset: 8px !important;
    z-index: 0 !important;
    border: 1px solid rgba(244, 210, 132, .2) !important;
    border-radius: 16px !important;
    pointer-events: none !important;
}

#view-hall.mp-hall-v3 .mp-user-room-card-v16::after {
    content: "✦" !important;
    position: absolute !important;
    right: 15px !important;
    bottom: 8px !important;
    color: rgba(238, 198, 106, .62) !important;
    font-size: 1rem !important;
    text-shadow: -10px 0 rgba(115, 69, 156, .7) !important;
    pointer-events: none !important;
}

#view-hall.mp-hall-v3 .mp-user-room-card-v16 > * {
    position: relative !important;
    z-index: 1 !important;
}

#view-hall.mp-hall-v3 .mp-room-card-crest-v20 {
    grid-area: crest !important;
    position: relative !important;
    width: 118px !important;
    height: 104px !important;
    align-self: start !important;
    display: grid !important;
    place-items: end center !important;
    padding-bottom: 8px !important;
    overflow: visible !important;
    border: 3px solid rgba(236, 195, 98, .84) !important;
    border-radius: 18px 18px 28px 28px !important;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    box-shadow:
        0 0 0 4px rgba(18, 11, 29, .93),
        0 0 0 6px rgba(130, 85, 35, .56),
        0 12px 24px rgba(0, 0, 0, .46),
        0 0 22px rgba(139, 72, 194, .16)
        !important;
}

#view-hall.mp-hall-v3 .mp-room-card-crest-open-v20 {
    background-image:
        linear-gradient(180deg, transparent 45%, rgba(15, 8, 24, .88)),
        url("rooms/room-portal-open.png")
        !important;
}

#view-hall.mp-hall-v3 .mp-room-card-crest-fire-v20 {
    background-image:
        linear-gradient(180deg, transparent 45%, rgba(15, 8, 24, .88)),
        url("rooms/room-portal-fire.png")
        !important;
}

#view-hall.mp-hall-v3 .mp-room-card-crest-private-v20 {
    background-image:
        linear-gradient(180deg, transparent 45%, rgba(15, 8, 24, .88)),
        url("rooms/room-portal-private.png")
        !important;
}

#view-hall.mp-hall-v3 .mp-room-card-crest-v20::after {
    content: "◆" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: -16px !important;
    width: 25px !important;
    height: 25px !important;
    display: grid !important;
    place-items: center !important;
    color: #9cf5f4 !important;
    font-size: .82rem !important;
    border: 2px solid #d6ac58 !important;
    background: #173d49 !important;
    box-shadow: 0 4px 9px rgba(0, 0, 0, .52), 0 0 12px rgba(80, 222, 227, .34) !important;
    transform: translateX(-50%) rotate(45deg) !important;
}

#view-hall.mp-hall-v3 .mp-room-card-crest-v20 > span {
    display: grid !important;
    place-items: center !important;
    width: 34px !important;
    height: 34px !important;
    color: #ffe191 !important;
    font-size: 1.35rem !important;
    border: 1px solid rgba(255, 224, 144, .62) !important;
    border-radius: 50% !important;
    background: rgba(40, 19, 58, .88) !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .48) !important;
}

#view-hall.mp-hall-v3 .mp-user-room-card-head-v16 {
    grid-area: head !important;
    padding: 1px 0 13px !important;
    align-items: center !important;
    border-bottom: 1px solid rgba(232, 189, 89, .25) !important;
}

#view-hall.mp-hall-v3 .mp-user-room-card-head-v16 h3 {
    color: #ffe5a5 !important;
    font-size: clamp(1.45rem, 2.4vw, 2.05rem) !important;
    line-height: 1.05 !important;
    text-shadow: 0 2px 0 rgba(65, 31, 8, .8), 0 0 12px rgba(255, 212, 116, .13) !important;
}

#view-hall.mp-hall-v3 .mp-user-room-card-head-v16 p {
    margin-top: 7px !important;
    color: #d5c5e1 !important;
    font-size: clamp(.77rem, 1vw, .9rem) !important;
}

#view-hall.mp-hall-v3 .mp-user-room-card-head-v16 p b {
    color: #ffe09a !important;
}

#view-hall.mp-hall-v3 .mp-user-room-state-v16 {
    position: relative !important;
    min-height: 38px !important;
    padding: 8px 13px 8px 35px !important;
    display: inline-grid !important;
    place-items: center !important;
    color: #d8ffc9 !important;
    font-size: .75rem !important;
    letter-spacing: .02em !important;
    border: 1px solid rgba(116, 232, 126, .42) !important;
    background:
        radial-gradient(circle at 50% 0, rgba(103, 238, 135, .2), transparent 54%),
        linear-gradient(180deg, rgba(39, 112, 54, .72), rgba(17, 49, 26, .82))
        !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 5px 12px rgba(0, 0, 0, .28) !important;
}

#view-hall.mp-hall-v3 .mp-user-room-state-v16::before {
    content: "✦" !important;
    position: absolute !important;
    left: 12px !important;
    font-size: .95rem !important;
}

#view-hall.mp-hall-v3 .mp-user-room-state-v16[data-state="playing"] {
    color: #ffe2a0 !important;
    border-color: rgba(245, 174, 61, .52) !important;
    background:
        radial-gradient(circle at 50% 0, rgba(255, 177, 57, .24), transparent 54%),
        linear-gradient(180deg, rgba(131, 76, 19, .86), rgba(55, 31, 10, .9))
        !important;
}

#view-hall.mp-hall-v3 .mp-user-room-state-v16[data-state="playing"]::before {
    content: "♨" !important;
}

#view-hall.mp-hall-v3 .mp-user-room-state-v16[data-state="finished"]::before {
    content: "✓" !important;
}

#view-hall.mp-hall-v3 .mp-user-room-game-v20 {
    grid-area: game !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(195px, 224px) !important;
    align-items: stretch !important;
    gap: 22px !important;
}

#view-hall.mp-hall-v3 .mp-user-room-party-v20 {
    min-width: 0 !important;
    display: grid !important;
    align-content: center !important;
    gap: 10px !important;
}

#view-hall.mp-hall-v3 .mp-user-room-party-label-v20 {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    color: #bdacd0 !important;
    font-size: .68rem !important;
    font-weight: 900 !important;
    letter-spacing: .15em !important;
    text-transform: uppercase !important;
}

#view-hall.mp-hall-v3 .mp-user-room-party-label-v20 b {
    color: #8df2a5 !important;
    font-size: .82rem !important;
    letter-spacing: .04em !important;
}

#view-hall.mp-hall-v3 .mp-user-room-avatars-v16 {
    min-height: 108px !important;
    padding: 2px 0 10px !important;
    display: flex !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    gap: 13px !important;
}

#view-hall.mp-hall-v3 .mp-user-room-avatar-slot-v20 {
    position: relative !important;
    width: 82px !important;
    min-width: 82px !important;
    display: grid !important;
    justify-items: center !important;
    gap: 8px !important;
}

#view-hall.mp-hall-v3 .mp-user-room-avatar-portrait-v20 {
    position: relative !important;
    width: 76px !important;
    height: 76px !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    border: 3px solid #d4a752 !important;
    border-radius: 50% !important;
    background:
        radial-gradient(circle at 50% 35%, #3d3150, #110d1b 72%)
        !important;
    box-shadow:
        0 0 0 3px #160d21,
        0 0 0 5px rgba(157, 105, 40, .72),
        0 9px 16px rgba(0, 0, 0, .48),
        inset 0 1px 0 rgba(255, 255, 255, .14),
        0 0 18px rgba(117, 71, 165, .17)
        !important;
}

#view-hall.mp-hall-v3 .mp-user-room-avatar-slot-v20.is-filled::after,
#view-hall.mp-hall-v3 .mp-user-room-avatar-slot-v20.is-empty::after {
    content: "◆" !important;
    position: absolute !important;
    top: 66px !important;
    left: 50% !important;
    width: 16px !important;
    height: 16px !important;
    display: grid !important;
    place-items: center !important;
    color: #8effed !important;
    font-size: .54rem !important;
    border: 1px solid #e4ba61 !important;
    background: #174b52 !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .48), 0 0 9px rgba(77, 230, 218, .32) !important;
    transform: translateX(-50%) rotate(45deg) !important;
}

#view-hall.mp-hall-v3 .mp-user-room-avatar-slot-v20.is-empty::after {
    color: #8f80a0 !important;
    background: #2a2232 !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .48) !important;
}

#view-hall.mp-hall-v3 .mp-user-room-avatar-portrait-v20 img {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    object-fit: cover !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: saturate(1.08) contrast(1.04) !important;
}

#view-hall.mp-hall-v3 .mp-user-room-empty-avatar-v20 {
    color: rgba(196, 175, 209, .44) !important;
    font-size: 2.25rem !important;
    line-height: 1 !important;
    transform: translateY(3px) !important;
}

#view-hall.mp-hall-v3 .mp-user-room-avatar-slot-v20 small {
    width: 100% !important;
    overflow: hidden !important;
    color: #e8d9ee !important;
    font-size: .67rem !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .8) !important;
}

#view-hall.mp-hall-v3 .mp-user-room-avatar-slot-v20.is-empty small {
    color: #887a94 !important;
}

#view-hall.mp-hall-v3 .mp-user-room-meta-v16 {
    min-width: 0 !important;
    padding: 11px 0 11px 20px !important;
    display: grid !important;
    align-content: center !important;
    gap: 8px !important;
    border-left: 1px solid rgba(224, 178, 80, .27) !important;
}

#view-hall.mp-hall-v3 .mp-user-room-meta-item-v20 {
    min-width: 0 !important;
    min-height: 43px !important;
    padding: 7px 9px !important;
    display: grid !important;
    grid-template-columns: 27px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    color: #d6c7e1 !important;
    border: 1px solid rgba(184, 139, 59, .16) !important;
    border-radius: 11px !important;
    background: linear-gradient(90deg, rgba(58, 35, 78, .4), rgba(13, 12, 25, .18)) !important;
}

#view-hall.mp-hall-v3 .mp-user-room-meta-item-v20 > i {
    color: #b783e4 !important;
    font-family: Georgia, serif !important;
    font-size: 1.05rem !important;
    font-style: normal !important;
    text-align: center !important;
    text-shadow: 0 0 9px rgba(173, 102, 224, .38) !important;
}

#view-hall.mp-hall-v3 .mp-user-room-meta-item-v20 > span {
    min-width: 0 !important;
    display: grid !important;
    gap: 1px !important;
}

#view-hall.mp-hall-v3 .mp-user-room-meta-item-v20 b {
    overflow: hidden !important;
    color: #f2e6d0 !important;
    font-size: .75rem !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

#view-hall.mp-hall-v3 .mp-user-room-meta-item-v20 small {
    color: #9d8daa !important;
    font-size: .62rem !important;
    line-height: 1.1 !important;
}

#view-hall.mp-hall-v3 .mp-spectator-meta-v18 {
    grid-column: 1 / -1 !important;
    flex-basis: auto !important;
    margin: 2px 0 0 !important;
    padding: 6px 8px !important;
    display: grid !important;
    gap: 5px !important;
    color: #d9c6ee !important;
    font-size: .68rem !important;
    border-top: 1px solid rgba(224, 178, 80, .18) !important;
}

#view-hall.mp-hall-v3 .mp-user-room-card-foot-v16 {
    grid-area: foot !important;
    min-width: 0 !important;
    padding-top: 14px !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: stretch !important;
    flex-wrap: wrap !important;
    gap: 11px !important;
    border-top: 1px solid rgba(232, 189, 89, .24) !important;
}

#view-hall.mp-hall-v3 .mp-user-room-open-v16,
#view-hall.mp-hall-v3 .mp-spectator-actions-v18 > button {
    min-width: 220px !important;
    min-height: 50px !important;
    padding: 9px 19px !important;
    color: #fff0bd !important;
    font-size: clamp(.78rem, 1vw, .94rem) !important;
    line-height: 1.08 !important;
    border: 2px solid rgba(249, 214, 125, .74) !important;
    border-radius: 15px !important;
    text-shadow: 0 2px 2px rgba(0, 0, 0, .78) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .25),
        inset 0 -8px 16px rgba(49, 23, 2, .24),
        0 8px 18px rgba(0, 0, 0, .4),
        0 0 12px rgba(194, 129, 32, .12)
        !important;
}

#view-hall.mp-hall-v3 .mp-user-room-open-v16,
#view-hall.mp-hall-v3 .mp-queue-room-v18 {
    background:
        radial-gradient(circle at 50% 0, rgba(255, 226, 131, .34), transparent 48%),
        linear-gradient(180deg, #a77920, #5a380b 76%)
        !important;
}

#view-hall.mp-hall-v3 .mp-watch-room-v18 {
    background:
        radial-gradient(circle at 50% 0, rgba(133, 221, 255, .35), transparent 48%),
        linear-gradient(180deg, #356f9e, #153457 76%)
        !important;
}

#view-hall.mp-hall-v3 .mp-spectator-actions-v18 {
    width: auto !important;
    margin: 0 !important;
    display: flex !important;
    flex: 0 1 auto !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 11px !important;
}

#view-hall.mp-hall-v3 .mp-user-room-open-v16:hover,
#view-hall.mp-hall-v3 .mp-user-room-open-v16:focus-visible,
#view-hall.mp-hall-v3 .mp-spectator-actions-v18 > button:hover,
#view-hall.mp-hall-v3 .mp-spectator-actions-v18 > button:focus-visible {
    filter: brightness(1.15) saturate(1.05) !important;
    transform: translateY(-2px) !important;
}

#view-hall.mp-hall-v3 .mp-user-room-open-v16:disabled {
    color: #b9acbd !important;
    border-color: rgba(181, 166, 191, .26) !important;
    background: linear-gradient(180deg, #5d5267, #342d3c) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 5px 12px rgba(0, 0, 0, .26) !important;
}

#view-hall.mp-hall-v3 .mp-find-rooms-empty-v16,
#view-hall.mp-hall-v3 .mp-find-rooms-loading-v16 {
    min-height: 310px !important;
    border: 2px solid rgba(225, 183, 88, .28) !important;
    border-radius: 22px !important;
    background:
        radial-gradient(circle at 50% 35%, rgba(116, 60, 164, .18), transparent 36%),
        rgba(8, 7, 18, .52)
        !important;
    box-shadow: inset 0 0 32px rgba(100, 51, 143, .11) !important;
}

@media (max-width: 900px) {
    #view-hall.mp-hall-v3 .mp-user-room-card-v16 {
        grid-template-columns: 106px minmax(0, 1fr) !important;
        column-gap: 18px !important;
    }

    #view-hall.mp-hall-v3 .mp-room-card-crest-v20 {
        width: 98px !important;
        height: 90px !important;
    }

    #view-hall.mp-hall-v3 .mp-user-room-game-v20 {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
    }

    #view-hall.mp-hall-v3 .mp-user-room-meta-v16 {
        padding: 10px 0 0 !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        border-top: 1px solid rgba(224, 178, 80, .22) !important;
        border-left: 0 !important;
    }

    #view-hall.mp-hall-v3 .mp-spectator-meta-v18 {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 760px) {
    #view-hall.mp-hall-v3 #mpFindRoomsDialogV16 {
        width: calc(100vw - 10px) !important;
        max-width: calc(100vw - 10px) !important;
        max-height: calc(100dvh - 10px) !important;
        border-radius: 22px !important;
    }

    #view-hall.mp-hall-v3 .mp-find-rooms-shell-v16 {
        max-height: calc(100dvh - 10px) !important;
        padding: 16px 13px calc(16px + env(safe-area-inset-bottom)) !important;
        gap: 10px !important;
    }

    #view-hall.mp-hall-v3 .mp-find-rooms-head-v16 {
        min-height: 102px !important;
        padding: 4px 54px 13px 57px !important;
    }

    #view-hall.mp-hall-v3 .mp-find-rooms-head-v16::before {
        left: 4px !important;
        top: 5px !important;
        width: 42px !important;
        height: 70px !important;
        font-size: 1.4rem !important;
    }

    #view-hall.mp-hall-v3 .mp-find-rooms-kicker-v16 {
        font-size: .58rem !important;
        letter-spacing: .13em !important;
    }

    #view-hall.mp-hall-v3 .mp-find-rooms-head-v16 h2 {
        font-size: clamp(1.55rem, 8vw, 2.25rem) !important;
    }

    #view-hall.mp-hall-v3 .mp-find-rooms-head-v16 p {
        margin-top: 6px !important;
        font-size: .7rem !important;
        line-height: 1.3 !important;
    }

    #view-hall.mp-hall-v3 .mp-find-rooms-close-v16 {
        top: 0 !important;
        right: 0 !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        font-size: 1.75rem !important;
    }

    #view-hall.mp-hall-v3 .mp-find-rooms-toolbar-v16 {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    #view-hall.mp-hall-v3 .mp-find-rooms-search-v16,
    #view-hall.mp-hall-v3 .mp-find-rooms-refresh-v16 {
        min-height: 46px !important;
        height: 46px !important;
        border-radius: 14px !important;
    }

    #view-hall.mp-hall-v3 .mp-find-rooms-list-v16 {
        max-height: calc(100dvh - 254px) !important;
        gap: 12px !important;
    }

    #view-hall.mp-hall-v3 .mp-user-room-card-v16 {
        min-height: 0 !important;
        padding: 15px 14px 14px !important;
        grid-template-columns: 67px minmax(0, 1fr) !important;
        grid-template-areas:
            "crest head"
            "game game"
            "foot foot"
            !important;
        column-gap: 13px !important;
        row-gap: 11px !important;
        border-radius: 18px !important;
    }

    #view-hall.mp-hall-v3 .mp-room-card-crest-v20 {
        width: 60px !important;
        height: 62px !important;
        border-width: 2px !important;
        border-radius: 12px 12px 17px 17px !important;
        box-shadow: 0 0 0 3px rgba(18, 11, 29, .93), 0 0 0 4px rgba(130, 85, 35, .5), 0 7px 15px rgba(0, 0, 0, .42) !important;
    }

    #view-hall.mp-hall-v3 .mp-room-card-crest-v20 > span {
        width: 25px !important;
        height: 25px !important;
        font-size: .95rem !important;
    }

    #view-hall.mp-hall-v3 .mp-room-card-crest-v20::after {
        bottom: -10px !important;
        width: 17px !important;
        height: 17px !important;
        font-size: .48rem !important;
    }

    #view-hall.mp-hall-v3 .mp-user-room-card-head-v16 {
        min-width: 0 !important;
        padding-bottom: 9px !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 7px !important;
    }

    #view-hall.mp-hall-v3 .mp-user-room-card-head-v16 h3 {
        font-size: clamp(1.1rem, 5.3vw, 1.45rem) !important;
    }

    #view-hall.mp-hall-v3 .mp-user-room-state-v16 {
        justify-self: start !important;
        min-height: 30px !important;
        padding: 5px 9px 5px 28px !important;
        font-size: .64rem !important;
    }

    #view-hall.mp-hall-v3 .mp-user-room-state-v16::before {
        left: 9px !important;
    }

    #view-hall.mp-hall-v3 .mp-user-room-game-v20 {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    #view-hall.mp-hall-v3 .mp-user-room-avatars-v16 {
        min-height: 0 !important;
        gap: 9px !important;
    }

    #view-hall.mp-hall-v3 .mp-user-room-avatar-slot-v20 {
        width: 58px !important;
        min-width: 58px !important;
        gap: 6px !important;
    }

    #view-hall.mp-hall-v3 .mp-user-room-avatar-portrait-v20 {
        width: 52px !important;
        height: 52px !important;
        border-width: 2px !important;
        box-shadow: 0 0 0 2px #160d21, 0 0 0 3px rgba(157, 105, 40, .72), 0 6px 12px rgba(0, 0, 0, .44) !important;
    }

    #view-hall.mp-hall-v3 .mp-user-room-avatar-slot-v20.is-filled::after,
    #view-hall.mp-hall-v3 .mp-user-room-avatar-slot-v20.is-empty::after {
        top: 44px !important;
        width: 12px !important;
        height: 12px !important;
        font-size: .38rem !important;
    }

    #view-hall.mp-hall-v3 .mp-user-room-empty-avatar-v20 {
        font-size: 1.55rem !important;
    }

    #view-hall.mp-hall-v3 .mp-user-room-avatar-slot-v20 small {
        font-size: .57rem !important;
    }

    #view-hall.mp-hall-v3 .mp-user-room-meta-v16 {
        padding-top: 8px !important;
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    #view-hall.mp-hall-v3 .mp-user-room-meta-item-v20 {
        min-height: 36px !important;
        padding: 5px 8px !important;
        grid-template-columns: 24px minmax(0, 1fr) !important;
    }

    #view-hall.mp-hall-v3 .mp-user-room-meta-item-v20 > span {
        display: flex !important;
        align-items: baseline !important;
        gap: 6px !important;
    }

    #view-hall.mp-hall-v3 .mp-user-room-card-foot-v16 {
        padding-top: 10px !important;
    }

    #view-hall.mp-hall-v3 .mp-user-room-open-v16,
    #view-hall.mp-hall-v3 .mp-spectator-actions-v18,
    #view-hall.mp-hall-v3 .mp-spectator-actions-v18 > button {
        width: 100% !important;
        min-width: 0 !important;
    }

    #view-hall.mp-hall-v3 .mp-spectator-actions-v18 {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 430px) {
    #view-hall.mp-hall-v3 .mp-find-rooms-head-v16 p {
        display: none !important;
    }

    #view-hall.mp-hall-v3 .mp-find-rooms-head-v16 {
        min-height: 78px !important;
    }

    #view-hall.mp-hall-v3 .mp-find-rooms-list-v16 {
        max-height: calc(100dvh - 218px) !important;
    }

    #view-hall.mp-hall-v3 .mp-user-room-avatar-slot-v20 {
        width: 53px !important;
        min-width: 53px !important;
    }

    #view-hall.mp-hall-v3 .mp-user-room-avatar-portrait-v20 {
        width: 48px !important;
        height: 48px !important;
    }

    #view-hall.mp-hall-v3 .mp-user-room-avatar-slot-v20.is-filled::after,
    #view-hall.mp-hall-v3 .mp-user-room-avatar-slot-v20.is-empty::after {
        top: 40px !important;
    }

    #view-hall.mp-hall-v3 .mp-spectator-actions-v18 {
        grid-template-columns: 1fr !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #view-hall.mp-hall-v3 .mp-user-room-open-v16,
    #view-hall.mp-hall-v3 .mp-spectator-actions-v18 > button,
    #view-hall.mp-hall-v3 .mp-find-rooms-close-v16 {
        transition: none !important;
    }
}

/* MAERCHENPFAD_ROOM_FINDER_GAME_UI_CSS_V20_END */