/*
KING File Context
File / فایل: /srv/king/platform/panel/login/assets/king-login.css
Project / پروژه: KING City Gen1 — KING Panel
Purpose / هدف: Responsive sovereign black/gold visual system for the public KING Login Gate
State / وضعیت: CURRENT
Generation / نسل: Gen1 governed Panel authentication UX
Last Meaningful Change / آخرین تغییر: Reduced chrome, raised card, increased glass effect and brightened lion focus zone
Change ID / شناسه تغییر: KING-G1-PANEL-AUTH-INTEGRATION-0001
Dependencies / وابستگی: Login HTML + king-login-background.png + king-login-crown.png
Boundary / مرز: Presentation styling only; no authentication or authorization semantics
Responsive / واکنش‌گرا: Ultrawide, desktop, laptop, tablet, mobile and short-landscape
Next Step / قدم بعدی: Browser visual verification and full authentication E2E
Manifest Ref / مرجع: /srv/king/manifests/KING-G1-PANEL-AUTH-INTEGRATION-0001.md
Verification / راستی‌آزمایی: IN PROGRESS
*/

:root {
    --black:#030302;
    --panel:rgba(10,9,7,.68);
    --panel-deep:rgba(6,5,4,.74);

    --gold:#d6a64a;
    --gold-bright:#f5dc9a;
    --gold-deep:#79521a;

    --text:#f7f1e8;
    --muted:#aaa092;

    --green:#6fe3a7;
    --amber:#e1b45b;
    --red:#db7f70;

    --line:rgba(225,184,99,.22);
}

* {
    box-sizing:border-box;
}

html {
    min-height:100%;
    background:var(--black);
}

body {
    margin:0;
    min-height:100vh;
    background:var(--black);
    color:var(--text);

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    overflow-x:hidden;
}

a {
    color:inherit;
}

.gate {
    position:relative;
    min-height:100svh;
    isolation:isolate;
    overflow:hidden;
    background:#030302;
}

.city-background {
    position:absolute;
    inset:0;
    z-index:-5;

    background-image:url("/login/assets/king-login-background.png");
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;

    transform:scale(1.015);

    filter:
        saturate(.92)
        contrast(1.07)
        brightness(.84);
}

/*
 * Shade the overall scene, but add a focused light lift over the lion face/crown.
 */
.cinematic-shade {
    position:absolute;
    inset:0;
    z-index:-4;
    pointer-events:none;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.74) 0%,
            rgba(0,0,0,.44) 31%,
            rgba(0,0,0,.18) 57%,
            rgba(0,0,0,.10) 75%,
            rgba(0,0,0,.34) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0,0,0,.46) 0%,
            transparent 24%,
            transparent 68%,
            rgba(0,0,0,.74) 100%
        ),
        radial-gradient(
            ellipse at 28% 48%,
            rgba(0,0,0,.04),
            rgba(0,0,0,.36) 72%
        );
}

.cinematic-shade::after {
    content:"";
    position:absolute;

    right:7%;
    top:9%;

    width:34vw;
    max-width:620px;
    min-width:320px;

    height:52vh;
    min-height:320px;

    background:
        radial-gradient(
            ellipse at 42% 28%,
            rgba(244,196,102,.18) 0%,
            rgba(244,196,102,.10) 22%,
            rgba(244,196,102,.03) 48%,
            transparent 72%
        );

    filter:blur(18px);
    mix-blend-mode:screen;
    opacity:.95;
}

.gate-main {
    width:min(1760px, calc(100% - 72px));
    min-height:100svh;

    margin:0 auto;

    display:flex;
    align-items:center;

    padding:
        clamp(26px,4vh,54px)
        0
        clamp(30px,4.8vh,62px);
}

/*
 * Card is slightly raised for better visual alignment with the lion face.
 * Glass effect is stronger so the city light softly bleeds through.
 */
.login-card {
    position:relative;

    width:min(475px, 39vw);

    margin-left:clamp(30px,5vw,105px);
    transform:translateY(-4%);

    padding:
        74px
        clamp(30px,3.2vw,48px)
        clamp(32px,3.4vw,45px);

    border:1px solid rgba(223,177,87,.30);
    border-radius:4px;

    background:
        linear-gradient(
            145deg,
            rgba(18,15,10,.60),
            rgba(7,6,5,.52)
        );

    box-shadow:
        0 38px 110px rgba(0,0,0,.60),
        0 0 80px rgba(187,127,34,.05),
        inset 0 1px 0 rgba(255,238,188,.08);

    backdrop-filter:
        blur(30px)
        saturate(1.16)
        brightness(1.04);

    -webkit-backdrop-filter:
        blur(30px)
        saturate(1.16)
        brightness(1.04);
}

.login-card::before {
    content:"";
    position:absolute;
    inset:-1px;
    z-index:-1;
    border-radius:inherit;

    background:
        linear-gradient(
            135deg,
            rgba(255,229,158,.22),
            transparent 31%,
            transparent 70%,
            rgba(179,122,34,.14)
        );
}

.royal-crown-wrap {
    position:absolute;

    width:190px;
    height:115px;

    left:50%;
    top:-67px;

    transform:translateX(-50%);

    display:flex;
    justify-content:center;
    align-items:flex-end;

    pointer-events:none;
}

.crown-glow {
    position:absolute;

    width:150px;
    height:60px;

    left:50%;
    bottom:4px;

    transform:translateX(-50%);
    border-radius:50%;

    background:rgba(216,157,52,.22);
    filter:blur(26px);
}

.royal-crown {
    position:relative;
    display:block;

    width:185px;
    height:auto;
    max-height:112px;

    object-fit:contain;
    user-select:none;

    filter:
        drop-shadow(0 11px 14px rgba(0,0,0,.75))
        drop-shadow(0 0 15px rgba(230,178,70,.20));
}

.eyebrow {
    margin:0 0 13px;
    color:#a89577;
    font-size:10px;
    letter-spacing:.34em;
}

h1 {
    margin:0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:clamp(44px,4vw,64px);
    font-weight:400;
    line-height:.96;
    letter-spacing:-.035em;
}

h1 span {
    color:var(--gold);
}

.subtitle {
    max-width:350px;
    margin:19px 0 30px;
    color:#b0a596;
    font-size:13px;
    line-height:1.72;
}

.status-panel {
    padding:17px 0;
    display:grid;
    gap:15px;

    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}

.status-row {
    min-height:20px;
    display:grid;
    grid-template-columns:10px 1fr auto;
    align-items:center;
    gap:12px;
}

.status-dot {
    width:7px;
    height:7px;

    border-radius:50%;
    background:#746d63;

    box-shadow:
        0 0 0 3px rgba(255,255,255,.025);
}

.status-dot.ok {
    background:var(--green);
    box-shadow:0 0 12px rgba(111,227,167,.48);
}

.status-dot.warn {
    background:var(--amber);
    box-shadow:0 0 12px rgba(225,180,91,.42);
}

.status-dot.bad {
    background:var(--red);
    box-shadow:0 0 12px rgba(219,127,112,.42);
}

.status-name {
    color:#978d80;
    font-size:12px;
}

.status-row strong {
    color:#e0d7ca;
    font-size:11px;
    font-weight:600;
    letter-spacing:.06em;
}

.enter-button {
    width:100%;
    min-height:61px;

    margin-top:29px;
    padding:0 23px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    text-decoration:none;
    color:#161006;

    border:1px solid #f0cd7d;
    border-radius:2px;

    background:
        linear-gradient(
            100deg,
            #815516 0%,
            #d8a849 27%,
            #f3d88d 52%,
            #bc812d 78%,
            #765018 100%
        );

    box-shadow:
        0 15px 40px rgba(198,142,43,.16),
        inset 0 1px 0 rgba(255,255,255,.46);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:16px;
    font-weight:700;
    letter-spacing:.035em;

    transition:
        transform .18s ease,
        filter .18s ease,
        box-shadow .18s ease;
}

.enter-button:hover {
    transform:translateY(-2px);
    filter:brightness(1.07);

    box-shadow:
        0 20px 50px rgba(205,151,49,.25),
        inset 0 1px 0 rgba(255,255,255,.5);
}

.enter-button:focus-visible {
    outline:2px solid #fff0b5;
    outline-offset:4px;
}

.enter-button.is-session {
    background:
        linear-gradient(
            100deg,
            #72511f,
            #d2ab62,
            #f1db9b,
            #a77a36
        );
}

.button-arrow {
    font-family:system-ui,sans-serif;
    font-size:24px;
    font-weight:300;
}

.security-note {
    margin:23px 0 0;

    display:grid;
    grid-template-columns:18px 1fr;
    gap:11px;

    color:#968b7c;
}

.security-note .lock {
    margin-top:6px;
    color:#c2903b;
    font-size:9px;
}

.security-note p {
    margin:0;
    font-size:10px;
    line-height:1.65;
}

.gate-message {
    min-height:19px;
    margin-top:19px;
    color:#aea18e;
    font-size:10px;
    letter-spacing:.07em;
}

.card-footer {
    margin-top:26px;
    padding-top:18px;

    display:flex;
    align-items:center;
    gap:9px;

    border-top:1px solid rgba(221,172,78,.10);

    color:#756853;
    font-size:9px;
    letter-spacing:.17em;
}

/* 21:9 / ultrawide */
@media (min-width:1900px) {
    .login-card {
        width:495px;
        margin-left:clamp(70px,7vw,150px);
    }

    .city-background {
        background-position:center center;
    }
}

/* Standard desktop */
@media (max-width:1400px) {
    .gate-main {
        width:calc(100% - 52px);
    }

    .login-card {
        width:min(455px,42vw);
        margin-left:clamp(20px,3vw,55px);
    }

    .city-background {
        background-position:58% center;
    }
}

/* Tablet / compact laptop */
@media (max-width:980px) {
    .gate-main {
        width:calc(100% - 40px);
        justify-content:center;
    }

    .login-card {
        width:min(510px,86vw);
        margin-left:0;
        transform:translateY(-2%);

        background:
            linear-gradient(
                145deg,
                rgba(16,13,9,.68),
                rgba(6,5,4,.58)
            );
    }

    .city-background {
        background-position:67% center;
        filter:
            saturate(.84)
            contrast(1.05)
            brightness(.62);
    }

    .cinematic-shade {
        background:
            linear-gradient(
                90deg,
                rgba(0,0,0,.60),
                rgba(0,0,0,.34)
            ),
            linear-gradient(
                180deg,
                rgba(0,0,0,.44),
                rgba(0,0,0,.34) 50%,
                rgba(0,0,0,.74)
            );
    }

    .cinematic-shade::after {
        right:2%;
        top:8%;
        width:44vw;
        height:38vh;
        opacity:.78;
    }
}

/* Mobile */
@media (max-width:600px) {
    .gate-main {
        width:calc(100% - 28px);
        padding:76px 0 30px;
        justify-content:center;
    }

    .login-card {
        width:100%;
        transform:none;

        padding:67px 23px 28px;

        border-color:rgba(223,177,87,.22);

        background:
            linear-gradient(
                145deg,
                rgba(17,14,10,.74),
                rgba(6,5,4,.62)
            );

        backdrop-filter:
            blur(24px)
            saturate(1.10);

        -webkit-backdrop-filter:
            blur(24px)
            saturate(1.10);
    }

    .royal-crown-wrap {
        width:160px;
        height:98px;
        top:-58px;
    }

    .royal-crown {
        width:155px;
        max-height:96px;
    }

    h1 {
        font-size:45px;
    }

    .subtitle {
        font-size:12px;
    }

    .status-row {
        grid-template-columns:9px 1fr auto;
        gap:9px;
    }

    .status-name,
    .status-row strong {
        font-size:10px;
    }

    .enter-button {
        min-height:57px;
        font-size:15px;
    }

    .city-background {
        background-position:70% center;
        filter:
            saturate(.80)
            contrast(1.04)
            brightness(.52);
    }

    .cinematic-shade::after {
        right:-6%;
        top:10%;
        width:58vw;
        min-width:220px;
        height:32vh;
        min-height:220px;
        opacity:.62;
    }
}

/* Short landscape mobile */
@media (max-height:600px) and (orientation:landscape) {
    .gate-main {
        width:calc(100% - 34px);
        padding:72px 0 24px;
        justify-content:center;
    }

    .login-card {
        width:min(640px,86vw);
        transform:none;
    }

    .cinematic-shade::after {
        height:58vh;
    }
}

/* Accessibility */
@media (prefers-reduced-motion:reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior:auto !important;
        transition:none !important;
    }
}