/* =========================================================
   Lin2Web — "Aden Ultra" auth screens (game launcher)
   Loaded after ultra.css on layouts/auth.
   Hooks: body[data-auth=<route-name>], .auth-heroes, .auth-card__bar
   ========================================================= */

.auth-page {
    --ua-bar-h: 52px;
    --ua-win: 480px;
    --ua-title-h: 42px;
    background: transparent;
}

/* ---------- Backdrop: graded town ---------- */
.auth-page .main-bg {
    z-index: -3;
    background:
        radial-gradient(42% 60% at 50% 52%, rgba(7, 6, 5, .35), transparent 75%),
        radial-gradient(70% 55% at 50% 0%, rgba(232, 150, 70, .14), transparent 70%),
        radial-gradient(60% 50% at 100% 100%, rgba(179, 38, 30, .16), transparent 70%),
        linear-gradient(180deg, rgba(11, 10, 8, .72) 0%, rgba(11, 10, 8, .62) 40%, rgba(7, 6, 5, .96) 100%),
        url("../img/ultra/bg-town.webp") 50% 30% / cover no-repeat;
}
.auth-page .main-bg::before {
    z-index: 0;
    background: radial-gradient(130% 100% at 50% 40%, transparent 45%, rgba(0, 0, 0, .75) 100%);
}
.auth-page .main-bg::after { content: none; }

/* ---------- Champions ---------- */
.auth-heroes {
    position: fixed;
    inset: var(--ua-bar-h) 0 0;
    z-index: -2;
    pointer-events: none;
    overflow: hidden;
    --hero-h: min(calc(100vh - var(--ua-bar-h) - 10px), 1300px);
    --hero-w: calc(var(--hero-h) * .66);
}
.auth-hero {
    position: absolute;
    bottom: 0;
    width: var(--hero-w);
    height: var(--hero-h);
    background: no-repeat 50% 100% / contain;
    filter: drop-shadow(0 0 40px rgba(0, 0, 0, .7)) saturate(1.05);
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
    animation: uaHeroIn .9s var(--u-ease) both;
}
/* spread outward from the window, clamped to the viewport on narrow screens */
.auth-hero--l {
    left: max(-4vw, calc(50% - var(--ua-win) / 2 - var(--hero-w) - clamp(0px, 9vw, 380px)));
}
.auth-hero--r {
    right: max(-4vw, calc(50% - var(--ua-win) / 2 - var(--hero-w) - clamp(0px, 9vw, 380px)));
    animation-delay: .12s;
}
.auth-heroes::after {
    content: "";
    position: absolute; inset: auto 0 0; height: 28%;
    background: linear-gradient(180deg, transparent, rgba(7, 6, 5, .9));
}

/* default / login: elf + dragon archer */
.auth-hero--l { background-image: url("../img/ultra/hero-elf.webp"); }
.auth-hero--r { background-image: url("../img/ultra/hero-archer.webp"); }
/* register: orc + mage */
[data-auth="register"] .auth-hero--l { background-image: url("../img/ultra/hero-orc.webp"); }
[data-auth="register"] .auth-hero--r { background-image: url("../img/ultra/hero-mage.webp"); }
/* password recovery / reset / confirm: dwarf + archer drawing */
[data-auth^="password"] .auth-hero--l { background-image: url("../img/ultra/hero-dwarf.webp"); }
[data-auth^="password"] .auth-hero--r { background-image: url("../img/ultra/hero-archer-shot.webp"); }
/* e-mail verification: mage + elf */
[data-auth^="verif"] .auth-hero--l { background-image: url("../img/ultra/hero-mage.webp"); }
[data-auth^="verif"] .auth-hero--r { background-image: url("../img/ultra/hero-elf.webp"); }

@keyframes uaHeroIn {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
}

/* ---------- Launcher bar ---------- */
.auth-page .auth_top {
    height: var(--ua-bar-h);
    padding: 0 var(--u-gutter);
    gap: clamp(16px, 2vw, 40px);
    background:
        var(--u-titlebar),
        linear-gradient(180deg, rgba(22, 19, 15, .97), rgba(11, 10, 8, .95));
    border-bottom: 0;
    box-shadow: inset 0 -1px 0 var(--u-bronze), 0 1px 0 #000, 0 10px 30px rgba(0, 0, 0, .5);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.auth-page .auth_top::after {
    bottom: -2px;
    background: linear-gradient(90deg, transparent, var(--u-gold) 50%, transparent);
    opacity: .45;
}
.auth-page .auth-brand img { height: 32px; }
.auth-page .auth_nav_top a {
    font-family: var(--font-accent-regular), serif;
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--u-text-2);
}
.auth-page .auth_nav_top a:hover,
.auth-page .auth_nav_top a:focus-visible { color: var(--u-gold-hi); text-shadow: 0 0 14px var(--u-gold-glow); }
.auth-page .auth_nav_top svg { width: 16px; height: 16px; }
.auth-page .auth-download { min-height: 34px; }

/* ---------- Content column ---------- */
.auth-page .auth-content {
    padding: clamp(32px, 6vh, 90px) 20px 28px;
    gap: 18px;
}
.auth-page .auth-copy { color: var(--u-muted); text-shadow: 0 1px 0 #000; }

/* ---------- Window ---------- */
.auth-page .content.auth-card {
    width: min(var(--ua-win), 100%);
    padding: calc(var(--ua-title-h) + 34px) 40px 36px;
    border: 0;
    border-radius: var(--u-r);
    background:
        radial-gradient(120% 40% at 50% 0%, rgba(216, 177, 106, .07), transparent 70%),
        var(--u-plate-bg);
    box-shadow:
        var(--u-plate-shadow),
        0 0 0 1px rgba(0, 0, 0, .4),
        0 0 120px -20px rgba(232, 150, 70, .18);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
/* inner hairline frame below the title bar (sprite sheet window) */
.auth-page .content.auth-card::before {
    inset: calc(var(--ua-title-h) + 6px) 6px 6px;
    height: auto;
    background: none;
    border: 1px solid rgba(216, 177, 106, .12);
    pointer-events: none;
}
.auth-page .content.auth-card::after { content: none; }

.auth-page .content.auth-card > .auth-card__bar {
    position: absolute;
    z-index: 2;
    top: 1px; left: 1px; right: 1px;
    height: var(--ua-title-h);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 48px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background:
        var(--u-titlebar),
        linear-gradient(180deg, #221d16, #15120e);
    box-shadow: inset 0 -1px 0 var(--u-bronze), inset 0 1px 0 rgba(245, 220, 162, .12), 0 1px 0 #000;
    font-family: var(--font-accent-bold), serif;
    font-size: 12px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--u-gold);
    text-shadow: 0 1px 0 #000;
    pointer-events: none;
}

/* legacy corner brackets retired; crest becomes the title-bar gem */
.auth-page .auth-card__corner { display: none; }
.auth-page .auth-card__crest {
    z-index: 3;
    top: calc(var(--ua-title-h) - 6px);
    width: 12px; height: 12px;
    margin-left: -6px;
    background: linear-gradient(135deg, var(--u-gold-hi), var(--u-bronze));
    border: 1px solid #000;
    box-shadow: 0 0 10px var(--u-gold-glow);
}
.auth-page .auth-card__crest span { display: none; }

/* ---------- Heading ---------- */
.auth-page .auth-head { margin-bottom: 26px; }
.auth-page .auth-eyebrow { color: var(--u-bronze-hi); letter-spacing: .34em; }
.auth-page .title {
    font-size: clamp(22px, 1.4vw + 10px, 30px);
    background-image: linear-gradient(180deg, #fff4d6 0%, var(--u-gold) 55%, #9c7740 100%);
}
.auth-page .auth-lead { color: var(--u-text-2); }
.auth-page .auth-emblem {
    background: var(--u-well-bg);
    box-shadow: var(--u-well-shadow), 0 0 24px var(--u-gold-glow);
    border-color: var(--u-bronze-hi);
}

/* ---------- Fields ---------- */
.auth-page .auth-label {
    color: var(--u-text-2);
    font-family: var(--font-accent-regular), serif;
    letter-spacing: .16em;
}
.auth-page .auth-input .form-control,
.auth-page .auth-card .form-control {
    height: 46px;
    border: 0;
    border-radius: var(--u-r);
    background: var(--u-well-bg);
    box-shadow: var(--u-well-shadow);
    color: var(--u-text);
}
.auth-page .auth-card .form-control:hover {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .9), inset 0 2px 8px rgba(0, 0, 0, .7), 0 0 0 1px var(--u-bronze-hi);
}
.auth-page .auth-card .form-control:focus {
    background: linear-gradient(180deg, #0d0b09, #15130f);
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, .9),
        inset 0 2px 8px rgba(0, 0, 0, .7),
        0 0 0 1px var(--u-gold),
        0 0 18px var(--u-gold-glow);
}
.auth-page .auth-input__icon { color: var(--u-bronze-hi); z-index: 1; }
.auth-page .auth-input:focus-within .auth-input__icon { color: var(--u-gold-hi); filter: drop-shadow(0 0 6px var(--u-gold-glow)); }
.auth-page .password-toggle { z-index: 1; }

/* errors */
.auth-page .auth-card .has-error .form-control {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .9), inset 0 2px 8px rgba(0, 0, 0, .7), 0 0 0 1px var(--u-blood), 0 0 14px rgba(179, 38, 30, .35);
}
.auth-page .has-error .auth-input__icon { color: #e0705a; }
.auth-page .text-danger { color: #f08a72; }

/* ---------- Checkbox (sprite sheet square) ---------- */
.auth-page .checkmark {
    width: 20px; height: 20px;
    border: 0;
    border-radius: 0;
    background: linear-gradient(180deg, #2a2016, #17120d);
    box-shadow: 0 0 0 1px #000, inset 0 0 0 1px var(--u-bronze-hi), inset 0 0 0 3px rgba(0, 0, 0, .55);
}
.auth-page .checkbox-container:hover .checkmark {
    box-shadow: 0 0 0 1px #000, inset 0 0 0 1px var(--u-gold), inset 0 0 0 3px rgba(0, 0, 0, .55);
}
.auth-page .checkbox-container input:checked ~ .checkmark {
    background: linear-gradient(180deg, #2a2016, #17120d);
    box-shadow: 0 0 0 1px #000, inset 0 0 0 1px var(--u-gold), inset 0 0 0 3px rgba(0, 0, 0, .55), 0 0 10px var(--u-gold-glow);
}
.auth-page .checkbox-container input:checked ~ .checkmark::after {
    left: 7px; top: 3px;
    width: 5px; height: 10px;
    border-color: var(--u-gold-hi);
    filter: drop-shadow(0 0 3px var(--u-gold-glow));
}

/* ---------- Actions ---------- */
.auth-page .login_button { margin-top: 26px; }
.auth-page .auth-divider { opacity: .8; }
.auth-page .auth-alt p { color: var(--u-muted); }

/* ---------- Alerts ---------- */
.auth-page .auth-card .alert-success,
.auth-page .auth-card .alert-danger {
    border: 0;
    border-radius: var(--u-r);
    background: var(--u-well-bg);
    box-shadow: var(--u-well-shadow), inset 3px 0 0 var(--u-life);
}
.auth-page .auth-card .alert-danger { box-shadow: var(--u-well-shadow), inset 3px 0 0 var(--u-blood); }
.auth-page .auth-card .alert-success p { color: #c6ecc9; }

/* ---------- Widescreen ---------- */
@media (min-width: 2200px) {
    .auth-page { --ua-win: 540px; --ua-bar-h: 58px; --ua-title-h: 46px; }
    .auth-page .content.auth-card { padding-left: 48px; padding-right: 48px; }
    .auth-page .auth-card .form-control { height: 50px; font-size: 16px; }
}

/* ---------- Narrow ---------- */
@media (max-width: 1199px) {
    .auth-hero--l { display: none; }
    .auth-hero--r { right: -12vw; opacity: .8; }
}
@media (max-width: 860px) {
    .auth-heroes { display: none; }
}
@media (max-width: 675px) {
    .auth-page { --ua-bar-h: 48px; }
    .auth-page .auth_top { padding: 0 12px; gap: 10px; }
    .auth-page .auth-brand img { height: 26px; }
    .auth-page .auth_nav_top a { font-size: 0; gap: 0; }
    .auth-page .auth-content { padding: 18px 10px 22px; }
    .auth-page .content.auth-card { width: 100%; padding: calc(var(--ua-title-h) + 26px) 20px 26px; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-hero { animation: none; }
}