/**
 * Auth pages — "Forge" (16th-century) skin, in the Diablo II mood (2026-09-22). William: the main Delvantic login "is
 * going to be used for the Delvantic game, the 16th century one … update login.php, register.php to be that new 16th
 * century look", and "my favorite game is Diablo II, think like that".
 *
 * So this is the dark end of the family: a coursed stone wall in the dark, lit by one torch above; the form is a
 * black-iron panel with forged corners; gold lettering; the action is a slab of the same stone with engraved gold
 * letters. The wall is real texture from the first world: /world/imagegenerators/scenario/.../outer-wall-010 (a
 * Scenario-generated ashlar), copied as images/quarters/forge/ashlar-wall.webp and darkened here. No site footer on
 * these pages; the Privacy / Terms line sits in the panel instead (content/auth/_legal-line.php). The torch flickers (the one moving thing on the page; still under prefers-reduced-motion).
 * The lighter end of the family is Quarters (parchment on oak): same letter, same gilt, same iron.
 *
 * LAYERED, NOT REPLACING: auth.css (the original mint "Deep Research" look) stays loaded and untouched. Everything here
 * is scoped under body.auth-forge, which pages/auth/{login,register,forgot-password,reset-password}.php add;
 * ?skin=classic on those pages shows the mint look. Style families: public/assets/css/STYLE-FAMILIES.md.
 */
@import url(/public/assets/css/fonts-forge.css);

body.auth-forge {
    --af-gold: #d9b45a;          /* lettering */
    --af-gold-hi: #f1d58c;
    --af-gilt: #b8892b;          /* rules, edges */
    --af-bone: #e9dcc0;          /* what people type */
    --af-ash: #a8977a;           /* secondary text */
    --af-blood: #8e1a12;
    --af-panel: #14110e;
    --af-serif: 'EB Garamond', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
    --af-caps: 'Cinzel', 'Trajan Pro', 'Palatino Linotype', Georgia, serif;
    font-family: var(--af-serif);
}

/* ── The wall, and the torch above it ──────────────────────────────── */
body.auth-page.auth-forge {
    background:
        radial-gradient(ellipse at 50% 40%, transparent 25%, rgba(0, 0, 0, 0.85) 100%),    /* the dark closes in */
        linear-gradient(rgba(14, 9, 5, 0.74), rgba(14, 9, 5, 0.74)),                        /* unlit: the stone in shadow */
        url(/public/assets/images/quarters/forge/ashlar-wall.webp) 0 0 / 420px 840px repeat,   /* rough-cut ashlar */
        #0d0b0a;
    /* The shadow and the vignette belong to the WINDOW, the stone to the page: fixed, they never end or repeat when a
       form is taller than the window (the register page's vignette stopped at 100vh and restarted, 2026-09-22). */
    background-attachment: fixed, fixed, scroll;
    height: auto;
    color: var(--af-bone);
}
body.auth-page.auth-forge::before {               /* torchlight: warm, from above, alive */
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 620px 460px at 50% 40px, rgba(255, 150, 60, 0.30), transparent 70%),
        radial-gradient(ellipse 300px 200px at 50% 20px, rgba(255, 200, 120, 0.22), transparent 70%);
    animation: af-torch 3.2s infinite;
}
@keyframes af-torch {
    0%, 100% { opacity: 1; }
    12% { opacity: 0.86; }
    22% { opacity: 0.97; }
    38% { opacity: 0.82; }
    51% { opacity: 1; }
    67% { opacity: 0.9; }
    80% { opacity: 0.96; }
}
body.auth-forge #main,
body.auth-forge .auth-container { background: transparent; position: relative; z-index: 1; }
body.auth-forge #header { position: relative; z-index: 1; }

/* the bar above: just the gilt mark and name */
body.auth-forge .dv-navbar,
body.auth-forge #header { background: transparent !important; box-shadow: none !important; border: 0 !important; }
body.auth-forge .dv-brand-text {
    font-family: var(--af-caps);
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--af-gold);
    text-shadow: 0 1px 0 #000, 0 0 14px rgba(217, 180, 90, 0.35);
}

/* ── The panel: black iron, forged corners ──────────────────────── */
body.auth-forge .auth-card {
    position: relative;
    padding: 38px 42px 24px;
    border: 12px solid transparent;
    border-image: url(/public/assets/images/quarters/forge/frame-iron.svg) 34 / 34px / 0 stretch;
    border-radius: 0;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255, 170, 80, 0.10), transparent 60%),
        url(/public/assets/images/quarters/forge/parchment.svg),
        linear-gradient(180deg, #1b1713, var(--af-panel) 60%, #0e0c0a);
    background-blend-mode: normal, soft-light, normal;
    background-clip: padding-box;
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.8), 0 0 0 1px #000, inset 0 0 40px rgba(0, 0, 0, 0.6);
    color: var(--af-bone);
}

body.auth-forge .auth-header { text-align: center; margin-bottom: 20px; }
body.auth-forge .auth-header::after {
    content: "";
    display: block;
    height: 14px;
    margin-top: 16px;
    background:
        url(/public/assets/images/quarters/forge/lozenge.svg) 50% 50% / 14px 14px no-repeat,
        url(/public/assets/images/quarters/forge/rule-diamond.svg) 50% 50% / 100% 12px no-repeat;
}
body.auth-forge .auth-logo {
    font-family: var(--af-caps);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.3em;
    color: #b0392c;
    background: none;
    -webkit-text-fill-color: currentColor;
}
body.auth-forge .auth-title {
    font-family: var(--af-caps);
    font-weight: 700;
    font-size: clamp(27px, 4vw, 34px);
    letter-spacing: 0.04em;
    color: var(--af-gold);
    text-shadow: 0 2px 0 #000, 0 0 18px rgba(217, 180, 90, 0.25);
    margin-top: 6px;
}
body.auth-forge .auth-subtitle { font-family: var(--af-serif); font-style: italic; font-size: 18px; color: var(--af-ash); }

/* ── The form ───────────────────────────────────────────────────────── */
body.auth-forge .auth-form .form-label { font-family: var(--af-serif); font-weight: 700; font-size: 17px; color: var(--af-gold); }
body.auth-forge .auth-form .form-control {
    font-family: var(--af-serif);
    font-size: 18px;
    color: var(--af-bone);
    background: #0b0908;
    border: 1px solid #5c4a2c;
    border-radius: 2px;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.8);
}
body.auth-forge .auth-form .form-control::placeholder { color: #6e6150; font-style: italic; }
body.auth-forge .auth-form .form-control:focus {
    color: #fff4dc;
    background: #0e0b09;
    border-color: var(--af-gold);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.8), 0 0 0 3px rgba(217, 180, 90, 0.25);
}
body.auth-forge .auth-form .form-control:-webkit-autofill {           /* keep autofill dark, not browser yellow */
    -webkit-text-fill-color: var(--af-bone);
    -webkit-box-shadow: 0 0 0 40px #0b0908 inset;
    caret-color: var(--af-bone);
}
body.auth-forge .auth-form .form-control.is-invalid { border-color: #c0392b; }
body.auth-forge .invalid-feedback { font-family: var(--af-serif); font-style: italic; font-size: 15px; color: #e0705f; }
body.auth-forge .password-toggle { color: var(--af-ash); }
body.auth-forge .password-toggle:hover { color: var(--af-gold); }
body.auth-forge .auth-form .form-check-input { background-color: #0b0908; border-color: #5c4a2c; accent-color: var(--af-gilt); }
body.auth-forge .auth-form .form-check-input:checked { background-color: var(--af-gilt); border-color: var(--af-gilt); }
body.auth-forge .auth-form .form-check-label { font-family: var(--af-serif); color: var(--af-bone); font-size: 16px; }
body.auth-forge .username-rules,
body.auth-forge .text-muted { color: var(--af-ash) !important; font-style: italic; }
body.auth-forge .username-input-wrap .username-status.available { color: #7fbf6a; }
body.auth-forge .username-input-wrap .username-status.taken,
body.auth-forge .username-input-wrap .username-status.error { color: #e0705f; }

/* the action: a carved stone slab, gold letters cut into it */
body.auth-forge .auth-form .btn-primary {
    font-family: var(--af-caps);
    font-weight: 700;
    font-size: 19px;
    letter-spacing: 0.1em;
    color: var(--af-gold);
    background:
        linear-gradient(180deg, rgba(26, 18, 10, 0.70), rgba(6, 4, 2, 0.88)),       /* in shadow, so the gold reads */
        url(/public/assets/images/quarters/forge/ashlar-wall.webp) 50% 38% / 520px 1040px,   /* one lit stone face */
        #2a2622;
    border: 1px solid #000;
    border-radius: 2px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -3px 0 rgba(0, 0, 0, 0.5), 0 0 0 2px #3a2c14, 0 4px 10px rgba(0, 0, 0, 0.7);
    text-shadow: 0 -1px 0 #000, 0 1px 0 rgba(255, 230, 170, 0.15);
    padding-top: 12px;
    padding-bottom: 12px;
}
body.auth-forge .auth-form .btn-primary:hover {
    color: var(--af-gold-hi);
    text-shadow: 0 -1px 0 #000, 0 0 12px rgba(241, 213, 140, 0.55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -3px 0 rgba(0, 0, 0, 0.5), 0 0 0 2px var(--af-gilt), 0 4px 14px rgba(0, 0, 0, 0.7);
}
body.auth-forge .auth-form .btn-primary:active { transform: translateY(2px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.7), 0 0 0 2px var(--af-gilt); }
body.auth-forge .auth-form .btn-primary:disabled { opacity: 0.55; }

body.auth-forge .auth-form .alert {
    font-family: var(--af-serif);
    font-size: 16px;
    border-radius: 2px;
    background: #1d1512;
    color: var(--af-bone);
    border: 1px solid #4a3a22;
}
body.auth-forge .auth-form .alert-danger { border-left: 5px solid #c0392b; }
body.auth-forge .auth-form .alert-success { border-left: 5px solid #5f9a4c; }

body.auth-forge .auth-link { color: var(--af-gold); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(217, 180, 90, 0.4); text-underline-offset: 3px; }
body.auth-forge .auth-link:hover { color: var(--af-gold-hi); text-decoration-color: currentColor; }
body.auth-forge .auth-footer { border-top: 0; font-family: var(--af-serif); font-size: 17px; color: var(--af-ash); }
body.auth-forge .auth-footer p { color: var(--af-ash); }
body.auth-forge .auth-icon { filter: sepia(0.6) saturate(0.8) brightness(0.9); }

body.auth-forge a:focus-visible,
body.auth-forge button:focus-visible,
body.auth-forge .form-check-input:focus-visible { outline: 2px solid var(--af-gold-hi); outline-offset: 2px; }

@media (max-width: 575px) {
    body.auth-forge .auth-card { padding: 30px 20px 20px; }
}
@media (prefers-reduced-motion: reduce) {
    body.auth-page.auth-forge::before { animation: none; }
    body.auth-forge .auth-form .btn-primary:active { transform: none; }
}

/* Privacy / Terms, inside the panel (the site footer is not on these pages) */
body.auth-forge .auth-legal {
    margin: 14px 0 0;
    text-align: center;
    font-family: var(--af-serif);
    font-size: 14px;
    color: #6e6150;
}
body.auth-forge .auth-legal a { color: #8f7f64; text-decoration: none; }
body.auth-forge .auth-legal a:hover { color: var(--af-gold); text-decoration: underline; }
/* the page fills the window now that there is no footer below it */
body.auth-page.auth-forge { min-height: 100vh; }