html,
body{
    width:100%;
    height:100%;
    margin:0;
    overflow:hidden;
    background:#07101c;
}
body.full{
    position:relative;
    min-width:0;
    min-height:0;
    background:#07101c;
    font-family:"Microsoft YaHei","PingFang SC",STKaiti,KaiTi,serif;
}
*{ box-sizing:border-box; }

.login-stage{
    position:fixed;
    top:0;
    left:0;
    width:576px;
    height:1024px;
    overflow:hidden;
    background:#0b1828 url("/resource/assets/game_start/generated-image-1%20%281%29.png") center/576px 1024px no-repeat;
    box-shadow:0 0 50px rgba(0,0,0,.55);
    transform-origin:0 0;
}
.login-stage:before{
    position:absolute;
    inset:auto 0 0;
    height:520px;
    background:linear-gradient(180deg,rgba(8,14,24,0) 0%,rgba(8,14,24,.42) 38%,rgba(8,14,24,.82) 100%);
    content:"";
    pointer-events:none;
}

.design-shortcut{
    position:absolute;
    z-index:4;
    display:block;
    padding:0;
    border:0;
    outline:0;
    background:transparent;
    color:transparent;
    font-size:0;
    cursor:pointer;
}
.design-customer{
    top:10px;
    left:11px;
    width:78px;
    height:34px;
}
.design-notice{
    top:10px;
    right:9px;
    width:45px;
    height:52px;
}

.login-stage #user_login{
    position:absolute;
    top:518px;
    left:48px;
    display:block;
    width:480px;
    height:392px;
}
.login-stage .account-login{
    position:relative;
    width:100%;
    height:100%;
    margin:0;
    padding:58px 28px 18px;
    border:2px solid #d7b56a;
    border-radius:6px;
    background:
        linear-gradient(180deg,rgba(28,36,58,.88) 0%,rgba(14,20,36,.94) 100%);
    box-shadow:
        0 0 0 4px rgba(18,22,34,.72),
        0 18px 40px rgba(0,0,0,.45),
        inset 0 0 42px rgba(215,181,106,.12);
}
.login-stage .account-login:after{
    position:absolute;
    inset:8px;
    border:1px solid rgba(232,199,122,.28);
    border-radius:3px;
    content:"";
    pointer-events:none;
}
.corner{
    position:absolute;
    z-index:3;
    width:18px;
    height:18px;
    pointer-events:none;
}
.corner:before,
.corner:after{
    position:absolute;
    background:#e8c77a;
    content:"";
    box-shadow:0 0 6px rgba(232,199,122,.55);
}
.c-tl,.c-tr,.c-bl,.c-br{ top:auto; }
.c-tl{ top:4px; left:4px; }
.c-tr{ top:4px; right:4px; }
.c-bl{ bottom:4px; left:4px; }
.c-br{ bottom:4px; right:4px; }
.c-tl:before,.c-tr:before,.c-bl:before,.c-br:before{ width:18px; height:2px; }
.c-tl:after,.c-tr:after,.c-bl:after,.c-br:after{ width:2px; height:18px; }
.c-tl:before,.c-tl:after{ top:0; left:0; }
.c-tr:before{ top:0; right:0; }
.c-tr:after{ top:0; right:0; }
.c-bl:before{ bottom:0; left:0; }
.c-bl:after{ bottom:0; left:0; }
.c-br:before{ bottom:0; right:0; }
.c-br:after{ bottom:0; right:0; }

.login-stage .login-heading{
    position:absolute;
    top:-18px;
    left:50%;
    z-index:4;
    display:flex;
    width:248px;
    height:36px;
    align-items:center;
    justify-content:center;
    border:1px solid #f0d58a;
    background:linear-gradient(180deg,#7a5418,#c8963a 42%,#8a5a16);
    box-shadow:0 6px 0 #4a320e, inset 0 1px rgba(255,236,180,.5);
    transform:translateX(-50%);
}
.login-stage .login-heading em{
    width:18px;
    height:2px;
    margin:0 8px;
    background:linear-gradient(90deg,transparent,#ffe9a8,transparent);
}
.login-stage .login-heading h2{
    margin:0;
    color:#fff6d4;
    font-family:STKaiti,KaiTi,serif;
    font-size:22px;
    font-weight:bold;
    line-height:34px;
    letter-spacing:6px;
    text-shadow:0 1px 0 #3b2a0d;
}

.login-stage .login-field{
    position:relative;
    z-index:2;
    display:flex;
    width:100%;
    height:42px;
    margin:0 0 12px;
    align-items:center;
    border:1px solid #b8944a;
    border-radius:3px;
    background:rgba(8,12,22,.55);
    box-shadow:inset 0 0 12px rgba(0,0,0,.28);
}
.login-stage .login-field:focus-within{
    border-color:#f0d58a;
    box-shadow:0 0 0 1px rgba(240,213,138,.25), inset 0 0 14px rgba(232,199,122,.12);
}
.login-stage .field-icon{
    position:relative;
    display:block;
    flex:0 0 42px;
    width:42px;
    height:100%;
}
.login-stage .user-icon:before{
    position:absolute;
    top:8px;
    left:16px;
    width:10px;
    height:10px;
    border-radius:50%;
    background:#e8c77a;
    content:"";
}
.login-stage .user-icon:after{
    position:absolute;
    bottom:8px;
    left:12px;
    width:18px;
    height:10px;
    border-radius:10px 10px 2px 2px;
    background:#e8c77a;
    content:"";
}
.login-stage .lock-icon:before{
    position:absolute;
    top:8px;
    left:15px;
    width:12px;
    height:10px;
    border:2px solid #e8c77a;
    border-bottom:0;
    border-radius:8px 8px 0 0;
    content:"";
}
.login-stage .lock-icon:after{
    position:absolute;
    bottom:8px;
    left:13px;
    width:16px;
    height:14px;
    border-radius:2px;
    background:#e8c77a;
    content:"";
}
.login-stage .login-field input{
    flex:1;
    width:100%;
    height:40px;
    padding:0 12px 0 0;
    border:0;
    outline:0;
    color:#f8e7b8;
    background:transparent;
    font-size:15px;
    line-height:40px;
    -webkit-appearance:none;
}
.login-stage .login-field input::placeholder{ color:#9a8660; }

.login-stage .agreement{
    position:relative;
    z-index:2;
    display:flex;
    height:28px;
    margin:0 4px 4px;
    align-items:center;
    color:#d9c89a;
    font-size:12px;
    white-space:nowrap;
}
.login-stage .agreement input{
    position:relative;
    width:14px;
    height:14px;
    margin:0 8px 0 0;
    border:1px solid #d7b56a;
    border-radius:2px;
    background:rgba(20,16,10,.7);
    -webkit-appearance:none;
    appearance:none;
}
.login-stage .agreement input:checked{ background:#c8963a; }
.login-stage .agreement input:checked:after{
    position:absolute;
    top:0;
    left:4px;
    width:4px;
    height:8px;
    border:solid #5c390c;
    border-width:0 2px 2px 0;
    content:"";
    transform:rotate(45deg);
}
.login-stage .agreement a{ color:#ffe7a3; }

.login-stage .stage-login-button{
    position:relative;
    z-index:2;
    display:block;
    width:268px;
    height:48px;
    margin:6px auto 0;
    border:1px solid #f3d48a;
    border-radius:3px;
    color:#5c390c;
    background:linear-gradient(180deg,#ffe7a8,#d7a441 55%,#b78428);
    box-shadow:0 5px 0 #7b5414, inset 0 1px rgba(255,255,255,.55);
    font-family:STKaiti,KaiTi,"Microsoft YaHei",serif;
    font-size:24px;
    font-weight:bold;
    line-height:46px;
    text-align:center;
    letter-spacing:6px;
    text-shadow:0 1px rgba(255,255,255,.45);
    text-decoration:none;
}
.login-stage .stage-login-button:active{
    transform:translateY(2px);
    box-shadow:0 3px 0 #7b5414;
}

.login-stage .account-links{
    position:relative;
    z-index:2;
    display:flex;
    width:280px;
    height:30px;
    margin:8px auto 0;
    align-items:center;
    justify-content:space-between;
}
.login-stage .account-links a{
    color:#e8c77a;
    font-size:12px;
    text-decoration:none;
}

.login-stage .other-title{
    position:relative;
    z-index:2;
    height:24px;
    color:#e8c77a;
    font-size:12px;
    line-height:24px;
    letter-spacing:4px;
    text-align:center;
}
.login-stage .other-title:before,
.login-stage .other-title:after{
    position:absolute;
    top:11px;
    width:88px;
    height:1px;
    background:linear-gradient(90deg,transparent,#d7b56a,transparent);
    content:"";
}
.login-stage .other-title:before{ left:28px; }
.login-stage .other-title:after{ right:28px; }

.login-stage .service-links{
    position:relative;
    z-index:2;
    display:flex;
    justify-content:space-around;
    text-align:center;
}
.login-stage .service-links a{
    display:flex;
    width:31%;
    flex-direction:column;
    align-items:center;
    color:#f2e3b9;
    font-size:11px;
    text-decoration:none;
}
.login-stage .service-icon{
    display:flex;
    width:46px;
    height:46px;
    margin-bottom:4px;
    align-items:center;
    justify-content:center;
    border:2px solid #f0d58a;
    border-radius:50%;
    color:#fff6d4;
    background:radial-gradient(circle at 30% 30%,#7a5418,#3b2a12 70%);
    box-shadow:0 0 0 2px rgba(18,16,10,.6), 0 4px 10px rgba(0,0,0,.3);
    font-family:STKaiti,KaiTi,serif;
    font-size:20px;
    font-style:normal;
}
.login-stage .register-service{ background:radial-gradient(circle at 30% 30%,#3d6b4a,#1d3a28 72%); }
.login-stage .password-service{ background:radial-gradient(circle at 30% 30%,#3a4e78,#1b2744 72%); }
.login-stage .customer-service{ background:radial-gradient(circle at 30% 30%,#8a4a1e,#4a2610 72%); }

.stage-footer{
    position:absolute;
    right:0;
    bottom:0;
    left:0;
    z-index:3;
    height:96px;
    padding:10px 22px 8px 72px;
    color:#d9c89a;
    background:linear-gradient(180deg,rgba(8,12,20,0),rgba(8,12,20,.92) 32%);
    font-size:10px;
    line-height:1.55;
    text-align:center;
    text-shadow:0 1px 2px #051521;
}
.stage-footer p{ margin:0 0 3px; }
.stage-footer .company{ color:#f2e3b9; }
.stage-footer .age-badge{
    position:absolute;
    bottom:14px;
    left:18px;
    display:flex;
    width:38px;
    height:46px;
    align-items:center;
    justify-content:center;
    border:2px solid #f0d58a;
    border-radius:3px;
    color:#fff6d4;
    background:linear-gradient(180deg,#c8963a,#8a5a16);
    font-size:13px;
    font-weight:bold;
    box-shadow:0 0 0 1px #3b2a0d;
}

.announcement-modal{
    position:fixed;
    inset:0;
    z-index:6000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:22px;
    background:rgba(6,10,18,.72);
}
.announcement-modal.is-visible{ display:flex; }
.announcement-panel{
    position:relative;
    width:100%;
    max-width:390px;
    overflow:hidden;
    border:2px solid #d7b56a;
    border-radius:6px;
    background:linear-gradient(180deg,#2b3d63,#18243d);
    box-shadow:0 0 0 4px rgba(18,22,34,.8),0 20px 65px rgba(0,0,0,.48),inset 0 0 28px rgba(215,181,106,.14);
}
.announcement-panel header{
    padding:20px 20px 14px;
    border-bottom:1px solid rgba(215,181,106,.28);
    text-align:center;
    background:linear-gradient(180deg,#7a5418,#c8963a 48%,#8a5a16);
}
.announcement-panel header span{
    display:block;
    margin-bottom:2px;
    color:#fff6d4;
    font-size:11px;
    letter-spacing:4px;
}
.announcement-panel header h2{
    margin:0;
    color:#fff6d4;
    font-family:STKaiti,KaiTi,serif;
    font-size:24px;
    font-weight:normal;
    letter-spacing:4px;
    text-shadow:0 1px 0 #3b2a0d;
}
.announcement-close{
    position:absolute;
    top:8px;
    right:10px;
    z-index:2;
    width:30px;
    height:30px;
    padding:0;
    border:1px solid #f0d58a;
    border-radius:50%;
    color:#fff6d4;
    background:rgba(18,12,8,.35);
    font-size:22px;
    line-height:26px;
    cursor:pointer;
}
.announcement-content{
    padding:22px 22px 8px;
    color:#d9c89a;
    font-size:14px;
    line-height:1.8;
}
.announcement-content h3{
    margin:0 0 10px;
    color:#ffe7a3;
    font-size:18px;
}
.announcement-content p{ margin:0 0 9px; }
.announcement-confirm{
    display:block;
    width:168px;
    height:42px;
    margin:8px auto 22px;
    border:1px solid #f3d48a;
    border-radius:3px;
    color:#5c390c;
    background:linear-gradient(180deg,#ffe7a8,#d7a441 58%,#b78428);
    box-shadow:0 5px 0 #7b5414;
    font-size:15px;
    font-weight:bold;
    letter-spacing:2px;
    cursor:pointer;
}

.popup_bg{
    position:fixed !important;
    inset:0 !important;
    z-index:5000 !important;
    width:100% !important;
    height:100% !important;
    margin:0 !important;
    background:rgba(6,10,18,.72) !important;
}
.popup_bg .phone-login{
    position:absolute !important;
    top:50% !important;
    left:50% !important;
    width:calc(100% - 48px) !important;
    max-width:380px;
    margin:0 !important;
    padding:28px 22px 24px !important;
    border:2px solid #d7b56a !important;
    border-radius:6px !important;
    background:linear-gradient(180deg,#2b3d63,#18243d) !important;
    box-shadow:0 0 0 4px rgba(18,22,34,.8),0 18px 55px rgba(0,0,0,.45);
    transform:translate(-50%,-50%);
}
.popup_bg .ltit{
    display:block;
    height:auto;
    margin-bottom:18px;
    color:#ffe7a3;
    font-family:STKaiti,KaiTi,serif;
    font-size:24px;
    font-weight:bold;
    line-height:1.4;
    letter-spacing:6px;
    text-align:center;
}
.popup_bg .inpt{
    display:block;
    width:100%;
    height:44px;
    margin:0 0 12px;
    padding:0;
    border:1px solid #b8944a;
    border-radius:3px;
    background:rgba(8,12,22,.55);
}
.popup_bg .inpt input{
    float:none;
    width:100%;
    height:42px;
    padding:0 13px;
    border:0;
    background:transparent;
    color:#f8e7b8;
    line-height:42px;
    text-indent:0;
}
.popup_bg .inpt input::placeholder{ color:#9a8660; }
.popup_bg .login-btn{
    display:block;
    width:100%;
    height:46px;
    margin:16px 0 0;
    border:1px solid #f3d48a;
    border-radius:3px;
    color:#5c390c;
    background:linear-gradient(180deg,#ffe7a8,#d7a441 58%,#b78428);
    box-shadow:0 5px 0 #7b5414;
    font-size:18px;
    font-weight:bold;
    letter-spacing:4px;
    line-height:44px;
    text-align:center;
    text-decoration:none;
}
.popup_bg .closed_b{
    position:absolute;
    top:10px;
    right:12px;
    width:30px;
    height:30px;
    border:1px solid #f0d58a;
    border-radius:50%;
    color:#fff6d4;
    background:rgba(18,12,8,.35);
    font-size:22px;
    line-height:26px;
    text-align:center;
    text-decoration:none;
}
.popup_bg .closed_b img{ display:none; }