@charset "UTF-8";

/* Colors and the engraved edges follow the supplied night sky and sunrise artwork. */
:root {
    color-scheme: dark;
    --night: #07151f;
    --panel: #0b1d29;
    --gold: #e5b86b;
    --light-gold: #ffe5ab;
    --muted: #adc0c9;
    --border: #51616a;
    --art-height: min(158vw, 100dvh);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; background: var(--night); }
body {
    max-width: none;
    min-height: 100dvh;
    overflow: hidden;
    font-family: "Microsoft YaHei", sans-serif;
    color: #edf1ed;
}
button, input { font: inherit; }
button, a, label[for="agree"] { -webkit-tap-highlight-color: transparent; }
button, a, input[type="checkbox"], label[for="agree"] { cursor: pointer; }
a { color: var(--light-gold); }
button:focus-visible, a:focus-visible, input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--light-gold);
    outline-offset: 4px;
}

/* Keep the full poster readable; the enlarged backdrop fills wider screens. */
body::before {
    content: "";
    position: fixed;
    inset: -24px;
    background: linear-gradient(#04101a99, #04101acc), url("../img/dawn-main-art.png") center / cover;
    filter: blur(20px);
}
.game-background {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100dvh;
    object-fit: contain;
    object-position: center;
}
.start-game {
    position: fixed;
    z-index: 10;
    top: calc(50% + var(--art-height) * .255);
    left: 50%;
    display: grid;
    place-items: center;
    width: min(70vw, 44dvh, 340px);
    height: clamp(54px, 7.6dvh, 74px);
    padding: 0 24px;
    transform: translate(-50%, -50%);
    border: 1px solid #f6d494;
    border-radius: 2px;
    background: linear-gradient(180deg, #ffdf9b, #dbad60 48%, #ae7537);
    box-shadow: inset 0 0 0 3px #533716, inset 0 0 0 4px #edc680, 0 6px 18px #0009;
    color: #302011;
    transition: transform .16s ease, filter .16s ease;
}
.start-game::before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid #704c26;
    pointer-events: none;
}
.start-game::after {
    content: "";
    position: absolute;
    inset: -5px 12px;
    border-top: 1px solid #f3cb7e;
    border-bottom: 1px solid #b98943;
    pointer-events: none;
}
.start-game-label {
    padding-left: .24em;
    font-family: "STKaiti", "KaiTi", serif;
    font-size: clamp(25px, 4.8vw, 32px);
    font-weight: 700;
    letter-spacing: .24em;
    text-shadow: 0 1px #ffe8b5;
}
.start-game:hover { filter: brightness(1.08); transform: translate(-50%, calc(-50% - 2px)); }
.start-game:active { transform: translate(-50%, calc(-50% + 1px)); }

.modal-container {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
    background: #020c16c9;
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, visibility .18s ease;
}
.modal-container.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.frame-crown, .frame-side { display: none; }
.modal {
    position: relative;
    width: min(100%, 460px);
    max-height: calc(100dvh - 32px);
    padding: 42px 28px 30px;
    border: 1px solid #caa15d;
    border-radius: 3px;
    background:
        radial-gradient(ellipse at 50% 0, #23435299, transparent 48%),
        linear-gradient(155deg, #122c3a, #081923 60%, #06121c);
    box-shadow: 0 22px 70px #0009;
}
.modal::before {
    content: "";
    position: absolute;
    inset: 7px;
    border: 1px solid #a4804259;
    pointer-events: none;
}
.modal::after {
    content: "";
    position: absolute;
    inset: -1px;
    pointer-events: none;
    background:
        linear-gradient(var(--light-gold), var(--light-gold)) left top / 42px 2px no-repeat,
        linear-gradient(var(--light-gold), var(--light-gold)) right top / 42px 2px no-repeat,
        linear-gradient(var(--gold), var(--gold)) left bottom / 42px 2px no-repeat,
        linear-gradient(var(--gold), var(--gold)) right bottom / 42px 2px no-repeat;
}
.modal-box {
    position: relative;
    max-height: calc(100dvh - 106px);
    padding: 0 2px 4px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #a48450 #0a1a24;
}
.auth-close {
    position: absolute;
    top: 9px;
    right: 9px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 2px;
    background: transparent;
    color: var(--gold);
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
}
.auth-close:hover { color: #fff0ca; background: #d5a25214; }
.auth-close:active { background: #d5a2522b; }
.auth-title-art { width: min(100%, 286px); margin: 0 auto 18px; }
.auth-title-art img { display: block; width: 100%; height: auto; }
.auth-heading {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 0 0 25px;
    color: #e4d6b9;
    font-family: "STKaiti", "KaiTi", serif;
    font-size: 21px;
    font-weight: 400;
    letter-spacing: .18em;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
}
.auth-heading::before, .auth-heading::after { content: ""; height: 1px; flex: 1; background: #826b414d; }
.modal-item { position: relative; margin-bottom: 18px; }
.field-label { display: block; margin-bottom: 9px; color: #c9d4d8; font-size: 13px; line-height: 1.5; }
.form-control {
    display: block;
    width: 100%;
    height: 50px;
    padding: 0 44px;
    border: 1px solid var(--border);
    border-radius: 2px;
    background: #06131dd9;
    color: #f6f3e8;
    font-size: 16px;
    line-height: normal;
    transition: border-color .16s ease;
    cursor: text;
}
.form-control::placeholder { color: #9eb0ba; opacity: 1; font-size: 14px; }
.form-control:focus { outline: 2px solid #e5b86b3d; outline-offset: 1px; border-color: var(--gold); }
.field-icon {
    position: absolute;
    left: 15px;
    bottom: 15px;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #c7aa72;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}
.reg_res .form-control { padding-left: 15px; }
.eye {
    position: absolute;
    right: 3px;
    bottom: 3px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: transparent;
    color: #c7aa72;
}
.eye svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.eye:hover { color: #ffe4a8; background: #d5a25214; }
.eye:active { background: #d5a2522b; }
.eye-slash { display: none; }
.eye[aria-pressed="true"] .eye-slash { display: block; }
.modal-btn { margin: 26px 0 20px; }
#btnlogin, #btnlogin1 {
    width: 100%;
    height: 54px;
    padding: 0;
    border: 1px solid #f4d394;
    border-radius: 2px;
    background: linear-gradient(180deg, #f2d496, #d5aa64 65%, #ba8643);
    box-shadow: inset 0 0 0 3px #5f421b, inset 0 0 0 4px #dfbd7b;
    color: #302011;
    font-family: "STKaiti", "KaiTi", serif;
    font-size: 23px;
    font-weight: 700;
    letter-spacing: .24em;
    text-indent: .24em;
    text-shadow: 0 1px #ffe6b3;
    transition: filter .16s ease, transform .16s ease;
}
#btnlogin:hover, #btnlogin1:hover { filter: brightness(1.08); }
#btnlogin:active, #btnlogin1:active { transform: translateY(1px); }
#btnlogin:disabled, #btnlogin1:disabled { cursor: wait; opacity: .65; filter: saturate(.4); }
.auth-consent { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.9; color: #bdcbd2; }
#agree { flex: 0 0 auto; width: 17px; height: 17px; margin: 3px 0 0; accent-color: var(--gold); }
.auth-consent a { color: #edc986; text-decoration: none; }
.auth-consent a:hover { text-decoration: underline; color: #fff0c4; }
.register-link {
    display: block;
    width: fit-content;
    min-height: 44px;
    margin: 15px auto 0;
    padding: 10px 14px;
    color: #e6c58a;
    font-size: 14px;
    text-align: center;
    line-height: 24px;
    text-decoration: none;
}
.register-link:hover { color: #fff0ca; text-decoration: underline; text-underline-offset: 5px; }
.register-link:active { color: #fff7e4; }
.tishi { margin: 4px 0 14px; color: #ffd09a !important; font-size: 13px; line-height: 1.7; }

.content_box {
    position: fixed;
    left: 50% !important;
    top: 50% !important;
    z-index: 40;
    width: min(92vw, 700px) !important;
    height: min(78dvh, 640px) !important;
    margin: 0;
    padding: 0;
    transform: translate(-50%, -50%);
    border: 1px solid #caa15d;
    border-radius: 3px;
    background: #0b1d29;
    box-shadow: 0 22px 70px #000a;
    color: #dce3e5;
    opacity: 1;
}
.content_box .con_tit1 {
    position: sticky;
    top: 0;
    height: 56px !important;
    padding: 0 20px;
    background: #142c39 !important;
    border-bottom: 1px solid #79633d !important;
    color: var(--light-gold) !important;
    font-family: "STKaiti", "KaiTi", serif;
    font-size: 20px !important;
    line-height: 56px !important;
}
.content_box .con_tit1 a { margin-right: 0 !important; padding: 0 8px; color: #edc986; font-family: "Microsoft YaHei", sans-serif; font-size: 13px; }
.content_box > p:last-child { padding: 20px 24px !important; font-size: 14px; line-height: 1.9; }

@media (min-width: 500px) {
    .modal { padding: 46px 48px 34px; }
    .modal-box { max-height: calc(100dvh - 114px); }
    .auth-title-art { width: 286px; margin-bottom: 22px; }
}
@media (max-height: 650px) {
    .modal { padding-top: 38px; padding-bottom: 22px; }
    .modal-box { max-height: calc(100dvh - 92px); }
    .auth-title-art { width: 210px; margin-bottom: 12px; }
    .auth-heading { margin-bottom: 16px; }
    .modal-item { margin-bottom: 13px; }
    .modal-btn { margin-top: 20px; }
}
@media (max-height: 450px) {
    .start-game { width: min(78vw, 60dvh, 280px); padding: 0 16px; }
    .start-game-label { font-size: clamp(18px, 6dvh, 25px); }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}