/* AMPOL Auth v4 — compact, mobile-first player access. */
html[data-theme="emerald"] { --auth3-green:#087a58; --auth3-mint:#2ed6a1; }
html[data-theme="crimson"] { --auth3-green:#b83c32; --auth3-mint:#ef866f; }
html[data-theme="sapphire"] { --auth3-green:#176fbd; --auth3-mint:#55b7f3; }
html[data-theme="violet"] { --auth3-green:#7547d8; --auth3-mint:#b28cff; }
html[data-theme="graphite"] { --auth3-green:#6ee7b7; --auth3-mint:#a7f3d0; }
html[data-theme="solar"] { --auth3-green:#f6c915; --auth3-mint:#ffe466; }

.auth-shell.is-login-screen {
    width:min(1040px,100%);
    min-height:min(660px,calc(100dvh - 48px));
    grid-template-columns:.92fr 1.08fr;
    border-radius:32px;
}

.auth-shell.is-login-screen .auth-showcase {
    padding:30px 34px 28px;
}

.auth-shell.is-login-screen .auth-motion-scene {
    transform:scale(.86);
    transform-origin:center;
    margin-block:-24px -34px;
}

.auth-shell.is-login-screen .auth-verify-device {
    transform:scale(.9);
}

.auth-shell.is-login-screen .auth-showcase__copy h2 {
    font-size:31px;
    line-height:1.42;
}

.auth-shell.is-login-screen .auth-panel-column {
    padding:24px 42px 22px;
}

.auth-shell.is-login-screen .auth-main-card {
    margin-top:10px;
}

.auth-v4-login {
    max-width:430px;
    border-radius:30px;
    padding:27px;
    box-shadow:0 22px 60px rgba(7,45,32,.12),inset 0 1px rgba(255,255,255,.58);
}

.auth-v4-mobile-intro { display:none; }

.auth-v4-theme-picker {
    position:relative;
    margin-bottom:18px;
    padding:12px;
    overflow:hidden;
    border:1px solid color-mix(in srgb,var(--auth3-green) 16%,transparent);
    border-radius:20px;
    background:color-mix(in srgb,var(--auth3-paper) 91%,var(--auth3-green) 9%);
}

.auth-v4-theme-picker::before {
    content:"";
    position:absolute;
    width:130px;
    height:130px;
    inset:-85px auto auto -35px;
    border-radius:50%;
    background:var(--auth-game-glow);
    filter:blur(10px);
    pointer-events:none;
}

.auth-v4-theme-picker > header {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:10px;
}

.auth-v4-theme-picker > header span { display:flex; flex-direction:column; gap:2px; }
.auth-v4-theme-picker > header b { color:var(--auth3-ink); font-size:10px; }
.auth-v4-theme-picker > header small { color:var(--auth3-muted); font-size:8px; }
.auth-v4-theme-picker > header em { color:var(--auth3-green); font:850 7px Figtree,sans-serif; letter-spacing:.12em; }
.auth-v4-theme-picker > div { position:relative; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; }

.auth-v4-theme {
    position:relative;
    min-width:0;
    display:grid;
    justify-items:center;
    gap:5px;
    padding:7px 3px 5px;
    border:1px solid transparent;
    border-radius:13px;
    color:var(--auth3-muted);
    background:transparent;
    font:inherit;
    cursor:pointer;
    transition:.2s ease;
}

.auth-v4-theme:hover { transform:translateY(-2px); background:color-mix(in srgb,var(--auth3-green) 7%,transparent); }
.auth-v4-theme > span { position:relative; width:35px; height:27px; display:block; overflow:hidden; border:2px solid var(--theme-b); border-radius:9px; background:var(--theme-c); box-shadow:0 5px 13px color-mix(in srgb,var(--theme-a) 24%,transparent); }
.auth-v4-theme > span i { position:absolute; display:block; border-radius:99px; }
.auth-v4-theme > span i:nth-child(1) { width:21px; height:21px; inset:-6px auto auto -5px; background:var(--theme-a); }
.auth-v4-theme > span i:nth-child(2) { width:13px; height:13px; inset:auto -3px -3px auto; background:var(--theme-b); }
.auth-v4-theme > span i:nth-child(3) { width:5px; height:5px; inset:5px 7px auto auto; background:var(--theme-a); box-shadow:0 0 8px var(--theme-a); }
.auth-v4-theme > small { width:100%; overflow:hidden; color:inherit; font-size:7px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.auth-v4-theme > b { position:absolute; inset:2px 2px auto auto; width:14px; height:14px; display:none; place-items:center; border-radius:50%; color:var(--auth-game-deep); background:var(--auth-game-neon); font-size:8px; box-shadow:0 0 12px var(--auth-game-glow); }
.auth-v4-theme[aria-pressed="true"] { color:var(--auth3-ink); border-color:color-mix(in srgb,var(--auth3-green) 32%,transparent); background:color-mix(in srgb,var(--auth3-green) 10%,transparent); box-shadow:0 0 0 2px color-mix(in srgb,var(--auth3-green) 6%,transparent); }
.auth-v4-theme[aria-pressed="true"] > b { display:grid; }

:is(html[data-theme="solar"],html[data-theme="graphite"]) .auth-v4-theme-picker {
    border-color:rgba(255,255,255,.13);
    background:#171c22;
}

.auth-v4-login .auth-v3-login-kicker .auth-v3-step {
    gap:7px;
    align-items:center;
}

.auth-v4-login .auth-v3-login-kicker .auth-v3-step i {
    width:7px;
    height:7px;
    border-radius:99px;
    background:var(--auth3-green);
    box-shadow:0 0 0 5px color-mix(in srgb,var(--auth3-green) 12%,transparent),0 0 12px var(--auth3-green);
    animation:authV4Pulse 1.8s ease-in-out infinite;
}

.auth-v4-login .auth-v3-login-heading h1 {
    margin:19px 0 7px;
    font-size:clamp(31px,3vw,40px);
    letter-spacing:-.055em;
}

.auth-v4-login .auth-v3-login-heading h1 span { color:var(--auth3-green); }
.auth-v4-login .auth-v3-login-heading > p { max-width:350px; line-height:1.85; }

.auth-v4-login .auth-v3-input {
    height:64px;
    padding:0 14px;
    border-radius:20px;
}

.auth-v4-login .auth-v3-input input {
    font-size:16px;
    font-weight:750;
    letter-spacing:.08em;
}

.auth-v4-login .auth-v3-input > i {
    min-width:42px;
    padding-inline-end:12px;
    border-inline-end:1px solid color-mix(in srgb,var(--auth3-green) 15%,transparent);
    font-weight:800;
}

.auth-v4-login .auth-v3-input em {
    width:36px;
    height:36px;
    border-radius:12px;
}

.auth-v4-login .auth-v3-input em svg,
.auth-v4-login .auth-v3-remember svg,
.auth-v4-login .auth-v3-submit svg {
    width:20px;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.auth-v4-login .auth-v3-hint { display:flex; align-items:center; gap:6px; }
.auth-v4-login .auth-v3-hint i { color:var(--auth3-green); font-size:7px; font-style:normal; }

.auth-v4-login .auth-v3-remember {
    gap:11px;
    padding:12px 13px;
    border-radius:17px;
}

.auth-v4-login .auth-v3-remember > i {
    flex:0 0 38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:13px;
    color:var(--auth3-green);
    background:color-mix(in srgb,var(--auth3-green) 10%,transparent);
    font-style:normal;
}

.auth-v4-login .auth-v3-remember small { line-height:1.65; }

.auth-v4-login .auth-v3-submit {
    height:62px;
    border-radius:19px;
    background:linear-gradient(110deg,var(--auth3-green),var(--auth3-mint));
    box-shadow:0 14px 30px color-mix(in srgb,var(--auth3-green) 28%,transparent);
    transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease;
}

.auth-v4-login .auth-v3-submit:not(:disabled):hover {
    transform:translateY(-2px);
    box-shadow:0 18px 36px color-mix(in srgb,var(--auth3-green) 30%,transparent);
}

.auth-v4-login .auth-v3-submit > i { overflow:hidden; }
.auth-v4-login .auth-v3-submit > i b { font-size:9px; letter-spacing:2px; }
.auth-v4-login .auth-v3-trust { margin-top:15px; justify-content:center; flex-wrap:wrap; column-gap:15px; row-gap:7px; }

:is(html[data-theme="solar"],html[data-theme="graphite"]) .auth-v4-login {
    box-shadow:0 24px 70px rgba(0,0,0,.34),0 0 42px var(--auth-game-glow);
}

:is(html[data-theme="solar"],html[data-theme="graphite"]) .auth-v4-login .auth-v3-remember > i {
    background:color-mix(in srgb,var(--auth3-green) 14%,transparent);
}

@keyframes authV4Pulse { 50% { opacity:.5; transform:scale(.78); } }

@media (max-width:760px) {
    .ampol-auth-body .auth-page {
        padding:0;
        background:
            radial-gradient(circle at 85% 2%,color-mix(in srgb,var(--auth-game-neon) 20%,transparent),transparent 19rem),
            linear-gradient(180deg,var(--auth-game-deep) 0 188px,color-mix(in srgb,var(--auth3-paper) 94%,var(--auth3-green) 6%) 188px 100%);
    }

    .auth-shell.is-login-screen {
        display:block;
        min-height:100dvh;
        border:0;
        border-radius:0;
        overflow:visible;
        background:transparent;
        box-shadow:none;
        backdrop-filter:none;
    }

    .auth-shell.is-login-screen::after,
    .auth-shell.is-login-screen .auth-showcase { display:none; }

    .auth-shell.is-login-screen .auth-panel-column {
        min-height:100dvh;
        padding:max(14px,env(safe-area-inset-top)) 14px max(14px,env(safe-area-inset-bottom));
        display:flex;
        flex-direction:column;
    }

    .auth-shell.is-login-screen .auth-topbar {
        position:relative;
        z-index:2;
        width:100%;
        min-height:52px;
        margin:0 0 12px;
        padding:0 4px;
        box-sizing:border-box;
        gap:12px;
        border:0;
        background:transparent!important;
        box-shadow:none;
    }

    .auth-shell.is-login-screen .auth-brand { color:#fff!important; }
    .auth-shell.is-login-screen .auth-brand { min-width:0; }
    .auth-shell.is-login-screen .auth-language { flex:0 0 auto; margin:0; }
    .auth-shell.is-login-screen .auth-brand b { color:var(--auth-game-neon); }
    .auth-shell.is-login-screen .auth-brand__mark {
        width:38px;
        height:38px;
        border-radius:13px;
        color:var(--auth-game-deep);
        background:linear-gradient(145deg,var(--auth-game-neon),color-mix(in srgb,var(--auth-game-neon) 64%,white));
        box-shadow:0 0 26px var(--auth-game-glow);
    }

    .auth-shell.is-login-screen .auth-language {
        padding:8px 11px;
        color:#d8fff2;
        border-color:rgba(255,255,255,.16);
        background:rgba(255,255,255,.06);
    }

    .auth-shell.is-login-screen .auth-main-card {
        align-items:start;
        flex:0 0 auto;
        width:100%;
        margin:0;
    }

    .auth-v4-login {
        width:100%;
        max-width:none;
        margin:0;
        padding:0 5px 10px;
        border:0;
        border-radius:0;
        overflow:visible;
        background:transparent;
        box-shadow:none;
    }

    .auth-v4-mobile-intro {
        min-height:94px;
        margin:0 -1px 16px;
        padding:16px;
        display:grid;
        grid-template-columns:44px 1fr 38px;
        align-items:center;
        gap:11px;
        border:1px solid color-mix(in srgb,var(--auth-game-neon) 24%,transparent);
        border-radius:23px;
        color:#fff;
        background:
            radial-gradient(circle at 75% 0,var(--auth-game-glow),transparent 9rem),
            linear-gradient(145deg,color-mix(in srgb,var(--auth-game-deep) 88%,white 12%),var(--auth-game-deep));
        box-shadow:0 18px 45px rgba(0,0,0,.23),inset 0 1px rgba(255,255,255,.05);
    }

    .auth-v4-mobile-intro::after {
        content:"PLAYER ACCESS";
        position:absolute;
        inset:auto 14px 8px auto;
        color:color-mix(in srgb,var(--auth-game-neon) 24%,transparent);
        font:900 6px Figtree,sans-serif;
        letter-spacing:.2em;
    }

    .auth-v4-mobile-intro { position:relative; isolation:isolate; overflow:hidden; }
    .auth-v4-mobile-intro > *:not(.auth-v4-mobile-orbit) { position:relative; z-index:2; }
    .auth-v4-mobile-orbit { position:absolute!important; z-index:0!important; width:150px; height:150px; inset:-35px auto auto -30px; border:1px solid color-mix(in srgb,var(--auth-game-neon) 20%,transparent); border-radius:50%; }
    .auth-v4-mobile-orbit::before,.auth-v4-mobile-orbit::after { content:""; position:absolute; inset:18px; border:1px solid color-mix(in srgb,var(--auth-game-neon) 13%,transparent); border-radius:50%; }
    .auth-v4-mobile-orbit::after { inset:42px; background:color-mix(in srgb,var(--auth-game-neon) 7%,transparent); }
    .auth-v4-mobile-orbit i { position:absolute; z-index:2; width:5px; height:5px; border-radius:50%; background:var(--auth-game-neon); box-shadow:0 0 10px var(--auth-game-neon); }
    .auth-v4-mobile-orbit i:nth-child(1) { inset:15px 50% auto auto; }
    .auth-v4-mobile-orbit i:nth-child(2) { inset:auto 15px 43px auto; }
    .auth-v4-mobile-orbit i:nth-child(3) { inset:52px auto auto 7px; }

    .auth-v4-mobile-mark {
        width:44px;
        height:44px;
        display:grid;
        place-items:center;
        border-radius:15px;
        color:var(--auth-game-deep);
        background:var(--auth-game-neon);
        font:950 15px Figtree,sans-serif;
        box-shadow:0 0 24px var(--auth-game-glow);
    }

    .auth-v4-mobile-intro > span:nth-child(2) { display:flex; min-width:0; flex-direction:column; gap:6px; }
    .auth-v4-mobile-intro b { font-size:13px; }
    .auth-v4-mobile-intro small { display:flex; align-items:center; gap:6px; color:#9fc8b9; font-size:9px; }
    .auth-v4-mobile-intro small i { width:6px; height:6px; border-radius:50%; background:var(--auth-game-neon); box-shadow:0 0 10px var(--auth-game-neon); }
    .auth-v4-mobile-intro > svg { width:31px; color:var(--auth-game-neon); stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

    .auth-v4-theme-picker { margin:0 0 14px; padding:10px; border-radius:19px; }
    .auth-v4-theme-picker > header { margin-bottom:8px; }
    .auth-v4-theme-picker > div { gap:4px; }
    .auth-v4-theme { padding-inline:1px; }
    .auth-v4-theme > span { width:32px; height:25px; }

    .auth-v4-login .auth-v3-login-heading {
        margin:0 2px 19px;
        padding:0 4px;
    }

    .auth-v4-login .auth-v3-login-kicker > i { display:none; }
    .auth-v4-login .auth-v3-step { padding:6px 9px; font-size:9px; }
    .auth-v4-login .auth-v3-login-heading h1 { margin:14px 0 5px; font-size:29px; }
    .auth-v4-login .auth-v3-login-heading > p { max-width:310px; font-size:12px; line-height:1.8; }

    .auth-v4-login .auth-v3-form {
        gap:13px;
        padding:18px 15px 15px;
        border:1px solid color-mix(in srgb,var(--auth3-green) 14%,transparent);
        border-radius:25px;
        background:color-mix(in srgb,var(--auth3-paper) 96%,transparent);
        box-shadow:0 18px 45px rgba(9,48,34,.1),inset 0 1px rgba(255,255,255,.65);
    }

    .auth-v4-login .auth-v3-input { height:62px; border-radius:18px; }
    .auth-v4-login .auth-v3-remember { padding:10px 11px; }
    .auth-v4-login .auth-v3-remember > i { flex-basis:35px; height:35px; border-radius:12px; }
    .auth-v4-login .auth-v3-submit { height:60px; }
    .auth-v4-login .auth-v3-trust { padding-inline:4px; font-size:8px; }

    .auth-shell.is-login-screen .auth-copyright {
        margin:16px auto 0;
        color:#7c8d86!important;
        font-size:8px;
    }

    :is(html[data-theme="solar"],html[data-theme="graphite"]) .ampol-auth-body .auth-page {
        background:
            radial-gradient(circle at 85% 2%,var(--auth-game-glow),transparent 19rem),
            linear-gradient(180deg,var(--auth-game-deep) 0 188px,#12171c 188px 100%);
    }

    :is(html[data-theme="solar"],html[data-theme="graphite"]) .auth-v4-login .auth-v3-form {
        border-color:rgba(255,255,255,.12);
        background:#1d2329;
        box-shadow:0 18px 48px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.04);
    }
}

@media (max-width:380px) {
    .auth-shell.is-login-screen .auth-panel-column { padding-inline:10px; }
    .auth-v4-mobile-intro { min-height:82px; padding:12px; border-radius:20px; }
    .auth-v4-login .auth-v3-login-heading h1 { font-size:26px; }
    .auth-v4-login .auth-v3-form { padding:15px 12px 13px; }
    .auth-v4-login .auth-v3-remember small { font-size:9px; }
    .auth-v4-login .auth-v3-trust span:last-child { display:none; }
    .auth-v4-theme > span { width:28px; height:23px; }
    .auth-v4-theme > small { font-size:6px; }
}

@media (max-height:700px) and (max-width:760px) {
    .auth-v4-mobile-intro { min-height:76px; margin-bottom:11px; padding:11px 14px; }
    .auth-v4-theme-picker { margin-bottom:10px; padding-block:8px; }
    .auth-v4-theme-picker > header { display:none; }
    .auth-v4-login .auth-v3-login-heading { margin-bottom:12px; }
    .auth-v4-login .auth-v3-login-heading h1 { margin-top:10px; font-size:25px; }
    .auth-v4-login .auth-v3-form { gap:10px; padding-block:13px; }
    .auth-v4-login .auth-v3-input,.auth-v4-login .auth-v3-submit { height:55px; }
    .auth-v4-login .auth-v3-remember { padding-block:8px; }
}

@media (prefers-reduced-motion:reduce) {
    .auth-v4-login .auth-v3-login-kicker .auth-v3-step i { animation:none; }
}