/* _content/RPGWorld.Web/Components/Layout/MainLayout.razor.rz.scp.css */
/* Route-aware layout.
   Play.razor gets the locked app shell it needs.
   Home / WorldEditor / Dev get normal document scrolling again.
   Because apparently one layout cannot be trusted around iPhones. */

:global(html)[b-ydb08ahqwa],
:global(body)[b-ydb08ahqwa] {
    margin: 0;
    min-height: 100%;
}

.app-shell[b-ydb08ahqwa] {
    display: flex;
    flex-direction: column;
    background-color: #f4f5f7;
}

.app-top-navbar[b-ydb08ahqwa] {
    height: 3.5rem;
    flex: 0 0 3.5rem;
    z-index: 1000;
}

/* Normal pages: Home, WorldEditor, Dev, etc.
   These pages must be allowed to grow taller than the viewport. */
.app-shell-standard[b-ydb08ahqwa] {
    min-height: 100vh;
    height: auto;
    max-height: none;
    overflow: visible;
}

.app-main-content[b-ydb08ahqwa] {
    margin: 0;
    padding-top: 0;
    padding-bottom: 1rem;
    padding-left: 15px !important;
    padding-right: 10px !important;
}

.app-main-standard[b-ydb08ahqwa] {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    display: block;
}

/* Play page only: fixed shell, internal scrolling handled by Play.razor. */
.app-shell-play[b-ydb08ahqwa] {
    height: 100vh;
    max-height: 100vh;
    min-height: 0;
    overflow: hidden;
}

.app-main-play[b-ydb08ahqwa] {
    flex: 1 1 0;
    min-height: 0;
    max-height: calc(100vh - 3.5rem);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
}

/* Mobile:
   Only Play gets the strict iPhone viewport lock.
   Normal pages must remain scrollable. */
@media (max-width: 767.98px) {
    .app-shell-standard[b-ydb08ahqwa] {
        min-height: 100dvh;
        height: auto;
        max-height: none;
        overflow: visible;
    }

    .app-main-standard[b-ydb08ahqwa] {
        max-height: none;
        overflow: visible;
        display: block;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    }

    .app-shell-play[b-ydb08ahqwa] {
        height: 100dvh;
        max-height: 100dvh;
        min-height: 0;
        overflow: hidden;
    }

    .app-main-play[b-ydb08ahqwa] {
        flex: 1 1 0;
        min-height: 0;
        max-height: calc(100dvh - 3.5rem);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 0;
    }
}

@supports (-webkit-touch-callout: none) {
    @media (max-width: 767.98px) {
        .app-shell-play[b-ydb08ahqwa] {
            height: -webkit-fill-available;
            max-height: -webkit-fill-available;
        }
    }
}

/* Existing old layout class support, in case anything else still uses these names. */
.page-wrapper[b-ydb08ahqwa] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #f4f5f7;
}

.top-navbar[b-ydb08ahqwa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    height: 4rem;
    background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
    z-index: 1000;
}

.navbar-brand-container[b-ydb08ahqwa] {
    display: flex;
    align-items: center;
}

.navbar-brand[b-ydb08ahqwa] {
    color: #ffffff;
    text-decoration: none;
    font-size: 1.25rem;
    letter-spacing: 0.5px;
}

.main-content[b-ydb08ahqwa] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: visible;
    display: block;
}

#blazor-error-ui[b-ydb08ahqwa] {
    background: #FEF3C7;
    color: #92400E;
    bottom: 0;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
    display: none;
    left: 0;
    padding: 0.75rem 1.5rem;
    position: fixed;
    width: 100%;
    z-index: 2000;
    text-align: center;
    font-weight: 500;
}

    #blazor-error-ui .dismiss[b-ydb08ahqwa] {
        cursor: pointer;
        position: absolute;
        right: 1.5rem;
        top: 0.75rem;
        font-weight: bold;
    }


.app-shell-auth[b-ydb08ahqwa] {
    min-height: 100vh;
    height: auto;
    max-height: none;
    overflow: visible;
    background: #050913 !important;
}

.app-main-auth[b-ydb08ahqwa] {
    flex: 1 1 auto;
    min-height: 100vh;
    max-height: none;
    overflow: visible;
    display: block;
    margin: 0 !important;
    padding: 0 !important;
}

@media (max-width: 767.98px) {
    .app-shell-auth[b-ydb08ahqwa] {
        min-height: 100dvh;
    }

    .app-main-auth[b-ydb08ahqwa] {
        min-height: 100dvh;
        padding: 0 !important;
    }
}
/* _content/RPGWorld.Web/Components/Layout/NavMenu.razor.rz.scp.css */
.top-nav-links[b-fhwrk4njlr] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.modern-nav-link[b-fhwrk4njlr] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    transition: all 0.2s ease-in-out;
}

    .modern-nav-link:hover[b-fhwrk4njlr] {
        color: #ffffff;
        background-color: rgba(255, 255, 255, 0.1);
        transform: translateY(-1px); /* Slight lift effect */
    }

    .modern-nav-link.active[b-fhwrk4njlr] {
        color: #ffffff;
        background-color: rgba(255, 255, 255, 0.15);
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); /* Subtle pressed-in look */
    }

.nav-icon[b-fhwrk4njlr] {
    font-style: normal;
    font-size: 1.1rem;
}
/* _content/RPGWorld.Web/Components/Pages/Login.razor.rz.scp.css */
:root[b-b1bdzrfp50] {
    --auth-bg: #050913;
    --auth-panel: rgba(9, 15, 28, 0.78);
    --auth-panel-strong: rgba(10, 17, 31, 0.92);
    --auth-border: rgba(255, 255, 255, 0.14);
    --auth-border-soft: rgba(255, 255, 255, 0.08);
    --auth-text: #f8fafc;
    --auth-muted: rgba(226, 232, 240, 0.76);
    --auth-dim: rgba(226, 232, 240, 0.54);
    --auth-gold: #d9a65c;
    --auth-gold-light: #f2d29b;
    --auth-gold-dark: #9b6429;
    --auth-blue: #67a7ff;
    --auth-danger: #fb7185;
    --auth-success: #86efac;
}

.login-page-shell[b-b1bdzrfp50] {
    position: relative;
    min-height: calc(100vh - 0px);
    overflow: hidden;
    background: radial-gradient(circle at 18% 16%, rgba(217, 166, 92, 0.18), transparent 26rem), radial-gradient(circle at 82% 18%, rgba(68, 116, 196, 0.22), transparent 28rem), linear-gradient(135deg, #030712 0%, #07111f 45%, #020617 100%);
    color: var(--auth-text);
}

.login-page-bg[b-b1bdzrfp50] {
    position: absolute;
    inset: 0;
    opacity: 0.95;
    background: linear-gradient(90deg, rgba(2, 6, 23, 0.24), rgba(2, 6, 23, 0.72)), linear-gradient(135deg, rgba(217, 166, 92, 0.12), transparent 36%), url("/images/auth/worlds-collage.jpg");
    background-size: cover;
    background-position: center;
    filter: saturate(1.08) contrast(1.08);
}

.login-page-shell[b-b1bdzrfp50]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.08), transparent 32rem), linear-gradient(180deg, rgba(3, 7, 18, 0.08), rgba(3, 7, 18, 0.82));
    pointer-events: none;
}

.login-card-stage[b-b1bdzrfp50] {
    position: relative;
    z-index: 1;
    width: min(1440px, calc(100% - 2rem));
    min-height: calc(100vh - 2rem);
    margin: 1rem auto;
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(390px, 0.75fr);
    border: 1px solid var(--auth-border);
    border-radius: 28px;
    overflow: hidden;
    background: rgba(2, 6, 23, 0.72);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px);
}

.login-hero-panel[b-b1bdzrfp50] {
    position: relative;
    min-height: 760px;
    padding: clamp(1.4rem, 2vw, 2rem);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    isolation: isolate;
}

    .login-hero-panel[b-b1bdzrfp50]::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: linear-gradient(90deg, rgba(2, 6, 23, 0.66), rgba(2, 6, 23, 0.16) 45%, rgba(2, 6, 23, 0.56)), linear-gradient(180deg, rgba(2, 6, 23, 0.04), rgba(2, 6, 23, 0.86) 76%);
    }

.login-language-pill[b-b1bdzrfp50] {
    position: absolute;
    top: 1.4rem;
    right: 1.4rem;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--auth-border);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.72);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.88rem;
    backdrop-filter: blur(14px);
}

.chevron[b-b1bdzrfp50] {
    color: var(--auth-dim);
}

.scenario-mosaic[b-b1bdzrfp50] {
    position: absolute;
    inset: 0;
    z-index: -2;
    display: grid;
    grid-template-columns: 1.05fr 1.1fr 0.95fr;
    grid-template-rows: 0.94fr 0.78fr;
    gap: 1px;
    background: rgba(255, 255, 255, 0.08);
}

.scenario-tile[b-b1bdzrfp50] {
    position: relative;
    overflow: hidden;
    min-height: 220px;
    background-size: cover;
    background-position: center;
}

    .scenario-tile[b-b1bdzrfp50]::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(2, 6, 23, 0.54)), radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.22), transparent 18rem);
        mix-blend-mode: screen;
        opacity: 0.55;
    }

    .scenario-tile[b-b1bdzrfp50]::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
        background-size: 46px 46px;
        opacity: 0.12;
    }

.scenario-celebrity[b-b1bdzrfp50] {
    grid-column: 1;
    grid-row: 1;
    background: radial-gradient(circle at 24% 70%, rgba(255, 235, 181, 0.8), transparent 0.45rem), radial-gradient(circle at 38% 62%, rgba(255, 235, 181, 0.7), transparent 0.35rem), linear-gradient(128deg, rgba(165, 28, 65, 0.85), rgba(15, 23, 42, 0.65) 46%, rgba(2, 6, 23, 0.9)), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 2px, transparent 2px 32px), linear-gradient(180deg, #172554, #020617);
}

.scenario-castle[b-b1bdzrfp50] {
    grid-column: 2;
    grid-row: 1;
    background: linear-gradient(135deg, transparent 0 28%, rgba(120, 113, 108, 0.55) 28% 30%, transparent 30%), radial-gradient(circle at 50% 32%, rgba(250, 204, 21, 0.16), transparent 10rem), linear-gradient(180deg, #1e293b, #111827 48%, #020617);
}

    .scenario-castle[b-b1bdzrfp50]::before {
        opacity: 1;
        background: linear-gradient(90deg, transparent 10%, rgba(148, 163, 184, 0.36) 10% 16%, transparent 16% 26%, rgba(148, 163, 184, 0.34) 26% 34%, transparent 34% 47%, rgba(148, 163, 184, 0.38) 47% 54%, transparent 54%), linear-gradient(180deg, transparent 0 48%, rgba(71, 85, 105, 0.88) 48% 100%);
    }

.scenario-roman[b-b1bdzrfp50] {
    grid-column: 3;
    grid-row: 1 / span 2;
    background: repeating-radial-gradient(ellipse at 42% 55%, transparent 0 26px, rgba(245, 158, 11, 0.18) 27px 31px), repeating-linear-gradient(90deg, rgba(251, 191, 36, 0.22) 0 5px, transparent 5px 38px), linear-gradient(145deg, #3f2f21, #0f172a 44%, #020617);
}

.scenario-city[b-b1bdzrfp50] {
    grid-column: 2;
    grid-row: 2;
    background: repeating-linear-gradient(90deg, rgba(96, 165, 250, 0.45) 0 4px, transparent 4px 24px), linear-gradient(180deg, rgba(14, 165, 233, 0.18), rgba(2, 6, 23, 0.96)), radial-gradient(circle at 50% 24%, rgba(59, 130, 246, 0.34), transparent 12rem);
}

.scenario-suburb[b-b1bdzrfp50] {
    grid-column: 1;
    grid-row: 2;
    background: linear-gradient(135deg, transparent 0 44%, rgba(148, 163, 184, 0.22) 44% 46%, transparent 46%), radial-gradient(circle at 18% 54%, rgba(251, 191, 36, 0.36), transparent 0.5rem), radial-gradient(circle at 45% 58%, rgba(251, 191, 36, 0.24), transparent 0.45rem), linear-gradient(180deg, #1e293b, #0f172a 48%, #020617);
}

.tile-label[b-b1bdzrfp50] {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    z-index: 2;
    padding: 0.35rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(2, 6, 23, 0.42);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
}

.hero-copy[b-b1bdzrfp50] {
    max-width: 660px;
    margin: auto 0 2rem;
    padding-top: 5rem;
}

.hero-kicker[b-b1bdzrfp50] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 1rem;
    color: var(--auth-gold-light);
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 700;
}

.spark[b-b1bdzrfp50] {
    color: var(--auth-gold);
    text-shadow: 0 0 18px rgba(217, 166, 92, 0.7);
}

.hero-copy h1[b-b1bdzrfp50] {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(3.2rem, 6vw, 5.8rem);
    line-height: 0.94;
    letter-spacing: -0.055em;
    color: var(--auth-gold-light);
    text-shadow: 0 18px 42px rgba(0, 0, 0, 0.5);
}

    .hero-copy h1 span[b-b1bdzrfp50] {
        color: #ffffff;
    }

.hero-copy p[b-b1bdzrfp50] {
    max-width: 560px;
    margin: 1.35rem 0 0;
    color: rgba(248, 250, 252, 0.78);
    font-size: clamp(1rem, 1.4vw, 1.16rem);
    line-height: 1.7;
}

.feature-grid[b-b1bdzrfp50] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
    margin-top: 1.5rem;
}

.feature-card[b-b1bdzrfp50] {
    min-height: 148px;
    padding: 1.1rem;
    border: 1px solid var(--auth-border);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.045));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px);
}

.feature-icon[b-b1bdzrfp50] {
    display: grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    margin-bottom: 0.7rem;
    border: 1px solid rgba(217, 166, 92, 0.4);
    border-radius: 999px;
    background: rgba(217, 166, 92, 0.12);
}

.feature-card h2[b-b1bdzrfp50] {
    margin: 0 0 0.4rem;
    font-size: 0.94rem;
    color: #ffffff;
}

.feature-card p[b-b1bdzrfp50] {
    margin: 0;
    color: rgba(226, 232, 240, 0.68);
    font-size: 0.8rem;
    line-height: 1.45;
}

.login-footer[b-b1bdzrfp50] {
    display: grid;
    grid-template-columns: 1.3fr auto auto;
    align-items: center;
    gap: 1.2rem;
    margin: 2rem calc(clamp(1.4rem, 2vw, 2rem) * -1) calc(clamp(1.4rem, 2vw, 2rem) * -1);
    padding: 1.1rem clamp(1.4rem, 2vw, 2rem);
    border-top: 1px solid var(--auth-border-soft);
    background: rgba(2, 6, 23, 0.55);
    backdrop-filter: blur(16px);
}

.footer-brand[b-b1bdzrfp50] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: var(--auth-muted);
    font-size: 0.84rem;
}

    .footer-brand strong[b-b1bdzrfp50],
    .footer-brand span[b-b1bdzrfp50] {
        display: block;
    }

.footer-mark[b-b1bdzrfp50] {
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border: 1px solid rgba(217, 166, 92, 0.36);
    border-radius: 999px;
    color: var(--auth-gold);
}

.footer-links[b-b1bdzrfp50],
.footer-socials[b-b1bdzrfp50] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

    .footer-links a[b-b1bdzrfp50],
    .footer-socials a[b-b1bdzrfp50] {
        color: rgba(226, 232, 240, 0.72);
        text-decoration: none;
        font-size: 0.86rem;
        transition: 0.18s ease;
    }

        .footer-links a:hover[b-b1bdzrfp50],
        .footer-socials a:hover[b-b1bdzrfp50] {
            color: var(--auth-gold-light);
        }

    .footer-socials a[b-b1bdzrfp50] {
        display: grid;
        place-items: center;
        width: 2.25rem;
        height: 2.25rem;
        border: 1px solid var(--auth-border-soft);
        border-radius: 0.75rem;
        background: rgba(255, 255, 255, 0.055);
    }

.login-form-panel[b-b1bdzrfp50] {
    display: grid;
    place-items: center;
    min-width: 0;
    padding: clamp(1.25rem, 2.5vw, 2.8rem);
    background: radial-gradient(circle at 50% 14%, rgba(217, 166, 92, 0.09), transparent 20rem), linear-gradient(180deg, rgba(2, 6, 23, 0.36), rgba(2, 6, 23, 0.72));
    border-left: 1px solid var(--auth-border-soft);
}

.login-form-card[b-b1bdzrfp50] {
    width: min(100%, 460px);
    padding: clamp(1.4rem, 3vw, 2.25rem);
    border: 1px solid var(--auth-border);
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.82), rgba(8, 13, 24, 0.78));
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
}

.form-star[b-b1bdzrfp50] {
    text-align: center;
    color: var(--auth-gold-light);
    font-size: 1.8rem;
    margin-bottom: 0.8rem;
    text-shadow: 0 0 24px rgba(217, 166, 92, 0.72);
}

.form-heading[b-b1bdzrfp50] {
    text-align: center;
    margin-bottom: 1.5rem;
}

    .form-heading h2[b-b1bdzrfp50] {
        margin: 0;
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(2rem, 3vw, 2.45rem);
        letter-spacing: -0.035em;
    }

    .form-heading p[b-b1bdzrfp50] {
        margin: 0.45rem 0 0;
        color: var(--auth-muted);
    }

.auth-alert[b-b1bdzrfp50] {
    margin-bottom: 0.9rem;
    padding: 0.85rem 0.95rem;
    border-radius: 14px;
    font-size: 0.92rem;
    line-height: 1.35;
}

.auth-alert-danger[b-b1bdzrfp50] {
    border: 1px solid rgba(251, 113, 133, 0.34);
    background: rgba(251, 113, 133, 0.12);
    color: #fecdd3;
}

.auth-alert-success[b-b1bdzrfp50] {
    border: 1px solid rgba(134, 239, 172, 0.32);
    background: rgba(134, 239, 172, 0.12);
    color: #dcfce7;
}

.login-form[b-b1bdzrfp50] {
    display: grid;
    gap: 1rem;
}

.field-group[b-b1bdzrfp50] {
    display: grid;
    gap: 0.48rem;
}

    .field-group label[b-b1bdzrfp50] {
        color: rgba(248, 250, 252, 0.88);
        font-size: 0.9rem;
        font-weight: 700;
    }

.input-shell[b-b1bdzrfp50] {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.7rem;
    height: 3.35rem;
    padding: 0 0.9rem;
    border: 1px solid var(--auth-border);
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.56);
    transition: 0.18s ease;
}

    .input-shell:focus-within[b-b1bdzrfp50] {
        border-color: rgba(242, 210, 155, 0.7);
        box-shadow: 0 0 0 4px rgba(217, 166, 92, 0.12), 0 12px 30px rgba(0, 0, 0, 0.2);
        background: rgba(15, 23, 42, 0.76);
    }

.input-icon[b-b1bdzrfp50] {
    color: var(--auth-muted);
    font-size: 0.95rem;
}

.input-shell input[b-b1bdzrfp50] {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #ffffff;
    font-size: 0.96rem;
}

    .input-shell input[b-b1bdzrfp50]::placeholder {
        color: rgba(226, 232, 240, 0.42);
    }

.form-row[b-b1bdzrfp50] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 0.15rem;
}

.remember-check[b-b1bdzrfp50] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--auth-muted);
    font-size: 0.9rem;
    cursor: pointer;
}

    .remember-check input[b-b1bdzrfp50] {
        width: 1rem;
        height: 1rem;
        accent-color: var(--auth-gold);
    }

.forgot-link[b-b1bdzrfp50] {
    color: var(--auth-gold-light);
    text-decoration: none;
    font-size: 0.9rem;
}

    .forgot-link:hover[b-b1bdzrfp50] {
        color: #ffffff;
    }

.primary-login-btn[b-b1bdzrfp50],
.secondary-login-btn[b-b1bdzrfp50] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    min-height: 3.35rem;
    border-radius: 14px;
    font-weight: 800;
    text-decoration: none;
    transition: 0.18s ease;
}

.primary-login-btn[b-b1bdzrfp50] {
    border: 0;
    color: #1f1306;
    background: linear-gradient(180deg, var(--auth-gold-light), var(--auth-gold) 54%, #b77732);
    box-shadow: 0 14px 28px rgba(217, 166, 92, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

    .primary-login-btn:hover[b-b1bdzrfp50] {
        transform: translateY(-1px);
        filter: brightness(1.05);
    }

.secondary-login-btn[b-b1bdzrfp50] {
    border: 1px solid var(--auth-border);
    color: #ffffff;
    background: rgba(15, 23, 42, 0.4);
}

    .secondary-login-btn:hover[b-b1bdzrfp50] {
        border-color: rgba(242, 210, 155, 0.45);
        background: rgba(255, 255, 255, 0.07);
    }

.form-divider[b-b1bdzrfp50] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.8rem;
    color: var(--auth-dim);
    font-size: 0.86rem;
}

    .form-divider span[b-b1bdzrfp50] {
        height: 1px;
        background: var(--auth-border-soft);
    }

    .form-divider em[b-b1bdzrfp50] {
        font-style: normal;
    }

.security-note[b-b1bdzrfp50] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    margin-top: 1.15rem;
    padding: 0.9rem;
    border: 1px solid var(--auth-border-soft);
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.38);
    color: var(--auth-muted);
}

.security-icon[b-b1bdzrfp50] {
    color: var(--auth-gold-light);
}

.security-note p[b-b1bdzrfp50] {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.45;
}

.security-note a[b-b1bdzrfp50] {
    color: var(--auth-gold-light);
    font-weight: 800;
}

@media (max-width: 1180px) {
    .login-card-stage[b-b1bdzrfp50] {
        grid-template-columns: 1fr;
    }

    .login-form-panel[b-b1bdzrfp50] {
        border-left: 0;
        border-top: 1px solid var(--auth-border-soft);
    }

    .login-hero-panel[b-b1bdzrfp50] {
        min-height: 680px;
    }

    .footer-links[b-b1bdzrfp50] {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 820px) {
    .login-page-shell[b-b1bdzrfp50] {
        min-height: 100dvh;
        overflow: hidden;
    }

    .login-card-stage[b-b1bdzrfp50] {
        width: 100%;
        min-height: 100dvh;
        margin: 0;
        border: 0;
        border-radius: 0;
        display: block;
        background: transparent;
        box-shadow: none;
        overflow: hidden;
    }

    /* On mobile, the hero becomes ONLY the background */
    .login-hero-panel[b-b1bdzrfp50] {
        position: absolute;
        inset: 0;
        z-index: 0;
        min-height: 100dvh;
        padding: 0;
        display: block;
        overflow: hidden;
    }

        .login-hero-panel[b-b1bdzrfp50]::after {
            background: linear-gradient(180deg, rgba(2, 6, 23, 0.18), rgba(2, 6, 23, 0.76) 42%, rgba(2, 6, 23, 0.96)), linear-gradient(90deg, rgba(2, 6, 23, 0.45), rgba(2, 6, 23, 0.32));
        }

    .scenario-mosaic[b-b1bdzrfp50] {
        position: absolute;
        inset: 0;
        z-index: -2;
        display: grid;
        height: 100%;
        min-height: 100dvh;
        margin: 0;
        border-radius: 0;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 0.9fr 0.9fr 1fr;
        opacity: 0.92;
    }

    .scenario-celebrity[b-b1bdzrfp50] {
        grid-column: 1;
        grid-row: 1;
    }

    .scenario-castle[b-b1bdzrfp50] {
        grid-column: 2;
        grid-row: 1;
    }

    .scenario-roman[b-b1bdzrfp50] {
        grid-column: 1 / span 2;
        grid-row: 2;
    }

    .scenario-city[b-b1bdzrfp50] {
        grid-column: 1;
        grid-row: 3;
    }

    .scenario-suburb[b-b1bdzrfp50] {
        grid-column: 2;
        grid-row: 3;
    }

    /* Hide all desktop marketing content on mobile */
    .hero-copy[b-b1bdzrfp50],
    .feature-grid[b-b1bdzrfp50],
    .login-footer[b-b1bdzrfp50],
    .tile-label[b-b1bdzrfp50] {
        display: none !important;
    }

    .login-language-pill[b-b1bdzrfp50] {
        top: max(0.9rem, env(safe-area-inset-top));
        right: 0.9rem;
        z-index: 5;
        font-size: 0.78rem;
        padding: 0.42rem 0.68rem;
    }

    /* The form is the actual page on mobile */
    .login-form-panel[b-b1bdzrfp50] {
        position: relative;
        z-index: 2;
        min-height: 100dvh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: calc(3.6rem + env(safe-area-inset-top)) 1rem calc(1rem + env(safe-area-inset-bottom));
        border: 0;
        background: radial-gradient(circle at 50% 18%, rgba(217, 166, 92, 0.13), transparent 16rem), linear-gradient(180deg, rgba(2, 6, 23, 0.08), rgba(2, 6, 23, 0.42));
    }

    .login-form-card[b-b1bdzrfp50] {
        width: min(100%, 430px);
        padding: 1.25rem;
        border-radius: 24px;
        background: linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(8, 13, 24, 0.86));
        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }

    .form-heading h2[b-b1bdzrfp50] {
        font-size: 2rem;
    }

    .form-heading p[b-b1bdzrfp50] {
        font-size: 0.92rem;
    }

    .input-shell[b-b1bdzrfp50],
    .primary-login-btn[b-b1bdzrfp50],
    .secondary-login-btn[b-b1bdzrfp50] {
        min-height: 3.15rem;
    }
}

@media (max-width: 420px) {
    .login-form-panel[b-b1bdzrfp50] {
        align-items: flex-start;
        padding-top: calc(4.75rem + env(safe-area-inset-top));
    }

    .login-form-card[b-b1bdzrfp50] {
        padding: 1rem;
        border-radius: 22px;
    }

    .form-star[b-b1bdzrfp50] {
        margin-bottom: 0.4rem;
        font-size: 1.45rem;
    }

    .form-heading[b-b1bdzrfp50] {
        margin-bottom: 1rem;
    }

        .form-heading h2[b-b1bdzrfp50] {
            font-size: 1.8rem;
        }

    .login-form[b-b1bdzrfp50] {
        gap: 0.85rem;
    }

    .form-row[b-b1bdzrfp50] {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.55rem;
    }

    .security-note[b-b1bdzrfp50] {
        margin-top: 0.9rem;
        padding: 0.8rem;
    }
}

/* =========================================================
   LOGIN PAGE VISIBILITY / CONTRAST FIX
   Keeps the real background visible and makes text readable.
   ========================================================= */

/* Let the generated world image be the actual hero/background */
.login-page-bg[b-b1bdzrfp50] {
    opacity: 1;
    background: linear-gradient(90deg, rgba(2, 6, 23, 0.42), rgba(2, 6, 23, 0.68)), linear-gradient(180deg, rgba(2, 6, 23, 0.12), rgba(2, 6, 23, 0.72)), url("/images/auth/worlds-collage.jpg") center / cover no-repeat !important;
}

/* The big page container was too dark and too solid */
.login-card-stage[b-b1bdzrfp50] {
    background: rgba(2, 6, 23, 0.46) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(10px) saturate(1.08);
    opacity: 0.8;
}

/* Keep the abstract mosaic, but demote it from "main character" */
.scenario-mosaic[b-b1bdzrfp50] {
    opacity: 0.18 !important;
    mix-blend-mode: screen;
    pointer-events: none;
}

/* Hide the little tile labels. They are cute, but they clutter the image */
.tile-label[b-b1bdzrfp50] {
    display: none !important;
}

/* Make the hero panel less murderous toward the background */
.login-hero-panel[b-b1bdzrfp50]::after {
    background: linear-gradient(90deg, rgba(2, 6, 23, 0.58), rgba(2, 6, 23, 0.18) 48%, rgba(2, 6, 23, 0.52)), linear-gradient(180deg, rgba(2, 6, 23, 0.02), rgba(2, 6, 23, 0.76) 82%) !important;
}

/* Give the headline readable contrast without making a giant ugly box */
.hero-copy[b-b1bdzrfp50] {
    position: relative;
    padding: 1.3rem 1.45rem;
    border-radius: 24px;
    background: radial-gradient(circle at 0% 0%, rgba(217, 166, 92, 0.16), transparent 16rem), linear-gradient(90deg, rgba(2, 6, 23, 0.66), rgba(2, 6, 23, 0.28));
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(6px);
}

.hero-kicker[b-b1bdzrfp50] {
    color: #f2d29b !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
}

.hero-copy h1[b-b1bdzrfp50] {
    color: #f2d29b !important;
    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.9), 0 0 32px rgba(217, 166, 92, 0.25);
}

    .hero-copy h1 span[b-b1bdzrfp50] {
        color: #ffffff !important;
    }

.hero-copy p[b-b1bdzrfp50] {
    color: rgba(248, 250, 252, 0.92) !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
}

/* Feature cards needed stronger readability */
.feature-card[b-b1bdzrfp50] {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.76), rgba(8, 13, 24, 0.68)) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

    .feature-card h2[b-b1bdzrfp50] {
        color: #ffffff !important;
    }

    .feature-card p[b-b1bdzrfp50] {
        color: rgba(226, 232, 240, 0.84) !important;
    }

/* The login card was too transparent and the text got swallowed */
.login-form-card[b-b1bdzrfp50] {
    background: radial-gradient(circle at 50% 0%, rgba(217, 166, 92, 0.10), transparent 13rem), linear-gradient(180deg, rgba(10, 17, 31, 0.96), rgba(5, 10, 20, 0.94)) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.11) !important;
    backdrop-filter: blur(18px) saturate(1.12);
}

/* Form text visibility */
.form-heading h2[b-b1bdzrfp50] {
    color: #ffffff !important;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.7);
}

.form-heading p[b-b1bdzrfp50],
.field-group label[b-b1bdzrfp50],
.remember-check[b-b1bdzrfp50],
.security-note p[b-b1bdzrfp50] {
    color: rgba(248, 250, 252, 0.88) !important;
}

.forgot-link[b-b1bdzrfp50],
.security-note a[b-b1bdzrfp50] {
    color: #f2d29b !important;
}

/* Inputs needed more contrast */
.input-shell[b-b1bdzrfp50] {
    background: rgba(2, 6, 23, 0.68) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

    .input-shell input[b-b1bdzrfp50] {
        color: #ffffff !important;
    }

        .input-shell input[b-b1bdzrfp50]::placeholder {
            color: rgba(226, 232, 240, 0.58) !important;
        }

.input-icon[b-b1bdzrfp50] {
    color: rgba(242, 210, 155, 0.9) !important;
}

/* The sign-in button was weirdly dim */
.primary-login-btn[b-b1bdzrfp50] {
    color: #1f1306 !important;
    background: linear-gradient(180deg, #f8dca8 0%, #d9a65c 52%, #a86d2f 100%) !important;
    box-shadow: 0 16px 34px rgba(217, 166, 92, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

.secondary-login-btn[b-b1bdzrfp50] {
    color: #ffffff !important;
    background: rgba(15, 23, 42, 0.72) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

/* Footer text was also getting eaten */
.login-footer[b-b1bdzrfp50] {
    background: rgba(2, 6, 23, 0.72) !important;
    border-top-color: rgba(255, 255, 255, 0.12) !important;
}

.footer-brand[b-b1bdzrfp50],
.footer-links a[b-b1bdzrfp50],
.footer-socials a[b-b1bdzrfp50] {
    color: rgba(248, 250, 252, 0.82) !important;
}

/* =========================================================
   MOBILE ONLY: make background more visible behind login card
   without changing the card itself.
   ========================================================= */
@media (max-width: 820px) {
    .login-page-bg[b-b1bdzrfp50] {
        opacity: 1 !important;
        background: linear-gradient(180deg, rgba(2, 6, 23, 0.18), rgba(2, 6, 23, 0.50)), linear-gradient(90deg, rgba(2, 6, 23, 0.18), rgba(2, 6, 23, 0.32)), url("/images/auth/worlds-collage.jpg") center / cover no-repeat !important;
        filter: saturate(1.14) contrast(1.05) brightness(1.16) !important;

    }

    .login-hero-panel[b-b1bdzrfp50]::after {
        background: linear-gradient(180deg, rgba(2, 6, 23, 0.04), rgba(2, 6, 23, 0.42) 52%, rgba(2, 6, 23, 0.72)), radial-gradient(circle at 50% 52%, rgba(2, 6, 23, 0.18), transparent 18rem) !important;
    }

    .scenario-mosaic[b-b1bdzrfp50] {
        opacity: 0.08 !important;
        mix-blend-mode: screen;
    }

    .login-form-panel[b-b1bdzrfp50] {
        background: radial-gradient(circle at 50% 48%, rgba(2, 6, 23, 0.18), transparent 15rem), linear-gradient(180deg, rgba(2, 6, 23, 0.02), rgba(2, 6, 23, 0.20)) !important;
    }

    .login-form-card[b-b1bdzrfp50] {
        box-shadow: 0 34px 95px rgba(0, 0, 0, 0.68), 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.11) !important;
    }
}