:root {
    color-scheme: dark;
    font-family: Georgia, "Times New Roman", serif;
    color: #eee8d9;
    background: #080c11;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
}

.page {
    position: relative;
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    padding: 60px 20px 90px;
    isolation: isolate;
    overflow: hidden;
    background:
        linear-gradient(
            to bottom,
            rgba(8, 12, 17, .25) 0%,
            rgba(8, 12, 17, .42) 40%,
            rgba(5, 7, 11, .88) 80%,
            #05070b 100%
        ),
        radial-gradient(
            ellipse at 50% 22%,
            #475c63 0%,
            #24313b 38%,
            #101821 70%,
            #080c11 100%
        );
}

.page::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .35;
    background:
        radial-gradient(ellipse at 18% 80%, #4b5c50, transparent 40%),
        radial-gradient(ellipse at 85% 65%, #3d4959, transparent 42%);
}

.login-panel {
    width: min(100%, 430px);
    padding: 42px 40px 36px;
    text-align: center;
    background: rgba(9, 14, 20, .78);
    border: 1px solid rgba(196, 165, 108, .24);
    border-radius: 12px;
    box-shadow: 0 20px 75px rgba(0, 0, 0, .4);
    backdrop-filter: blur(12px);
}

.realm-mark {
    color: #c6a774;
    font-size: 32px;
}

.eyebrow {
    margin: 12px 0;
    color: #a9a99f;
    font: 11px Arial, sans-serif;
    letter-spacing: 4px;
}

h1 {
    margin: 8px 0 12px;
    color: #e2c48c;
    font-size: clamp(34px, 6vw, 45px);
    font-weight: normal;
    letter-spacing: 1px;
}

.subtitle {
    margin: 0 0 32px;
    color: #a9adae;
    font: 13px/1.6 Arial, sans-serif;
}

.login-form {
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 10px;
}

label {
    color: #c5c5bd;
    font: 12px Arial, sans-serif;
}

input {
    width: 100%;
    padding: 13px 14px;
    margin-bottom: 10px;
    color: #f1eee6;
    background: rgba(2, 6, 10, .72);
    border: 1px solid #41464b;
    border-radius: 5px;
    outline: none;
    font: 15px Arial, sans-serif;
}

input:focus {
    border-color: #c6a774;
    box-shadow: 0 0 0 2px rgba(198, 167, 116, .12);
}

button {
    margin-top: 8px;
    padding: 14px;
    color: #e9d4aa;
    background: #393b35;
    border: 1px solid #847452;
    border-radius: 5px;
    font: bold 12px Arial, sans-serif;
    letter-spacing: 1.5px;
}

button:disabled {
    cursor: not-allowed;
    opacity: .7;
}

.register {
    margin-top: 27px;
    color: #a4a7a7;
    font: 12px/1.8 Arial, sans-serif;
}

.register span {
    display: block;
    color: #c5a875;
}

footer {
    position: absolute;
    bottom: 25px;
    left: 20px;
    right: 20px;
    text-align: center;
    color: #777e81;
    font: 10px Arial, sans-serif;
    letter-spacing: 2px;
}

@media (max-width: 480px) {
    .login-panel {
        padding: 35px 24px;
    }
}

/* Doritoland — Outland visual refinement */

h1 {
    font-family: "Cinzel", Georgia, serif;
    font-weight: 600;
    font-size: clamp(35px, 5vw, 48px);
    letter-spacing: 2px;
    color: #e9ce92;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .8);
}

.login-panel {
    background: linear-gradient(
        160deg,
        rgba(16, 19, 23, .92),
        rgba(6, 10, 14, .94)
    );
    border: 1px solid rgba(179, 145, 83, .55);
    box-shadow:
        0 0 0 3px rgba(7, 9, 12, .7),
        0 0 35px rgba(102, 138, 54, .08),
        0 25px 90px rgba(0, 0, 0, .65);
}

.realm-mark {
    color: #a5c66b;
    text-shadow: 0 0 16px rgba(142, 207, 64, .45);
}

button {
    background: linear-gradient(#34461d, #192b13);
    border-color: #8d7849;
    color: #ead79a;
}

.register span {
    color: #e2be78;
}

/* Doritoland — Outland background */

.page {
    background:
        linear-gradient(
            to bottom,
            rgba(5, 7, 12, .08) 0%,
            rgba(5, 7, 12, .15) 45%,
            rgba(5, 7, 12, .55) 82%,
            #05070b 100%
        ),
        url("/static/images/web-back.png")
        center center / cover no-repeat;
}

.page::before {
    display: none;
}

/* Doritoland — cinematic title treatment */

.login-panel h1 {
    font-family: "Cinzel", Georgia, serif;
    font-size: clamp(37px, 4vw, 49px);
    font-weight: 700;
    letter-spacing: -1.5px;
    line-height: 1.25;

    background: linear-gradient(
        180deg,
        #fff5cf 0%,
        #e9d3a0 24%,
        #ad8143 48%,
        #f4df9f 63%,
        #9d7138 82%,
        #d2b475 100%
    );

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    filter: drop-shadow(0 2px 1px #080806)
            drop-shadow(0 4px 5px rgba(0, 0, 0, .85));
}

.login-panel .eyebrow {
    letter-spacing: 4px;
    color: #c7bba1;
}

.login-panel .subtitle {
    color: #a9b5a3;
}

.login-panel .realm-mark {
    color: #b6df64;
    font-size: 34px;
    text-shadow:
        0 0 12px rgba(139, 224, 54, .55),
        0 0 25px rgba(139, 224, 54, .2);
}

/* Doritoland — refined fantasy lettering */

.login-panel h1 {
    font-family: "Cinzel Decorative", Georgia, serif;
    font-size: clamp(32px, 4vw, 43px);
    font-weight: 700;
    letter-spacing: -1px;
    margin-bottom: 8px;

    background: linear-gradient(
        180deg,
        #fff6d7 0%,
        #f5dfab 30%,
        #c99d56 55%,
        #f2d391 76%,
        #99703e 100%
    );

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    filter: drop-shadow(0 2px 2px rgba(0,0,0,.65));
}

.login-panel .subtitle {
    color: #a7c66a;
    font-family: "Cinzel", Georgia, serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 4px;
    margin-bottom: 32px;
}

/* Doritoland founder's crest */

.crest-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 94px;
    margin: -12px 0 8px;
}

.realm-crest {
    display: block;
    width: 108px;
    height: 94px;
    object-fit: contain;
    filter: drop-shadow(0 5px 12px rgba(0, 0, 0, .7));
}

@media (max-width: 480px) {
    .realm-crest {
        width: 92px;
        height: 84px;
    }
}

/* Doritoland founder's crest */

.crest-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 94px;
    margin: -12px 0 8px;
}

.realm-crest {
    display: block;
    width: 108px;
    height: 94px;
    object-fit: contain;
    filter: drop-shadow(0 5px 12px rgba(0, 0, 0, .7));
}

@media (max-width: 480px) {
    .realm-crest {
        width: 92px;
        height: 84px;
    }
}

/* Integrated crest and ornamental panel */

.login-panel {
    position: relative;
    margin-top: 42px;
    padding-top: 92px;

    border: 1px solid #8f713d;
    border-radius: 10px;

    background:
        linear-gradient(145deg,
            rgba(22, 20, 19, .97),
            rgba(7, 10, 13, .97)
        );

    box-shadow:
        inset 0 0 0 2px #15130f,
        inset 0 0 25px rgba(178, 134, 59, .07),
        0 18px 70px rgba(0, 0, 0, .75);
}

.crest-container {
    position: absolute;
    top: -65px;
    left: 50%;
    transform: translateX(-50%);

    width: 180px;
    height: 140px;
    margin: 0;

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

    z-index: 3;
}

.realm-crest {
    width: 170px;
    height: 140px;
    object-fit: contain;

    filter:
        drop-shadow(0 0 12px rgba(116, 205, 38, .28))
        drop-shadow(0 6px 10px rgba(0, 0, 0, .85));
}

.login-panel::before,
.login-panel::after {
    content: "◆";
    position: absolute;
    bottom: 8px;
    color: #a68a50;
    font-size: 12px;
}

.login-panel::before { left: 10px; }
.login-panel::after  { right: 10px; }


/* Engraved metallic title */

.login-panel h1 {
    font-family: "Cinzel Decorative", Georgia, serif;
    font-size: clamp(34px, 4vw, 46px);
    font-weight: 700;
    letter-spacing: -1.5px;
    line-height: 1.3;

    background: linear-gradient(
        180deg,
        #fff9de 0%,
        #fff0bb 18%,
        #d2a458 38%,
        #765027 49%,
        #f7dc9d 56%,
        #b98945 75%,
        #6c4825 100%
    );

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    filter:
        drop-shadow(0 1px 0 #3d2914)
        drop-shadow(0 3px 2px rgba(0, 0, 0, .9))
        drop-shadow(0 0 10px rgba(220, 169, 82, .12));
}

.login-panel .subtitle {
    font-size: 12px;
    letter-spacing: 4px;
    color: #b4d67a;
    text-shadow: 0 0 8px rgba(115, 184, 48, .25);
}


/* Doritoland — integrated crest alignment */

.login-panel {
    position: relative;
    margin-top: 70px;
}

.crest-container {
    position: absolute;
    top: -74px;
    left: 50%;
    transform: translateX(-50%);

    width: 250px;
    height: 170px;
    margin: 0;
    z-index: 5;
}

.realm-crest {
    display: block;
    width: 240px;
    height: 170px;
    max-width: none;
    object-fit: contain;

    filter:
        drop-shadow(0 0 12px rgba(125, 210, 45, .35))
        drop-shadow(0 6px 12px rgba(0, 0, 0, .8));
}

/* Final crest positioning adjustment */
.crest-container {
    top: -67px;
}

/* Final crest alignment */
.crest-container {
    top: -94px;
}

/* Final crest alignment */
.crest-container {
    top: -91px;
}

/* Final crest alignment */
.crest-container {
    top: -93px;
}

/* Final crest alignment */
.crest-container {
    top: -92px;
}

/* Final crest alignment */
.crest-container {
    top: -90px;
}

/* Final crest alignment */
.crest-container {
    top: -88px;
}

/* Final crest alignment */
.crest-container {
    top: -86px;
}

/* Doritoland custom fantasy wordmark */

.login-panel .wordmark-title {
    margin: 4px -15px 10px;
    line-height: 1;
    background: none;
    -webkit-text-fill-color: initial;
    filter: none;
}

.doritoland-wordmark {
    display: block;
    width: 100%;
    height: auto;
    max-width: 390px;
    margin: 0 auto;
    object-fit: contain;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .7));
}

@media (max-width: 480px) {
    .login-panel .wordmark-title {
        margin-left: -10px;
        margin-right: -10px;
    }
}

/* Tighten spacing around the Doritoland wordmark */

.login-panel .wordmark-title {
    margin-top: -20px;
    margin-bottom: -25px;
}

.doritoland-wordmark {
    width: 100%;
    height: auto;
}

/* Bring THE REALM AWAITS closer to the wordmark */
.login-panel .eyebrow {
    margin-bottom: 0;
}

/* Final wordmark spacing adjustment */
.login-panel .eyebrow {
    margin-bottom: -5px;
}

/* Final wordmark spacing adjustment */
.login-panel .eyebrow {
    margin-bottom: -10px;
}

/* Final wordmark spacing adjustment */
.login-panel .eyebrow {
    margin-bottom: -20px;
}

/* Fine-tune wordmark visual alignment */
.doritoland-wordmark {
    transform: translateY(-6px);
}


.login-error {
    color: #ff9b87;
    text-align: center;
    margin: 12px 0;
}