/* 《盛世天下》女帝篇 - 角色电话页面样式 */
/* 基准：1920x1080 下 1rem = 1px */

@font-face {
    font-family: xq;
    src: url(//dldir1.qq.com/yxgw/empress/xique.ttf);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
a { text-decoration: none; }

body {
    font-family: "Microsoft YaHei", "PingFang SC", xq, sans-serif;
    background-color: #1a0a0a;
    overflow: hidden;
}

.page-wrapper {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

/* ====== 主视觉背景 - 铺满整个浏览器窗口 ====== */
.kv-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    object-position: center top;
    z-index: 0;
}

/* ====== 左上角 Logo ====== */
.logo-area {
    position: absolute;
    top: 20rem;
    left: 24rem;
    z-index: 10;
}

.logo-area img {
    display: block;
    width: 422rem;
    height: auto;
}
/* 右上角 */
.txt-img{
    position: absolute;
    top: 20rem;
    right: 20rem;
    z-index: 10;  
    width: 600rem; 
}


/* 登录 */

 .loginbox {
    position: absolute;
    right:40rem;
    top: 70rem;
    font-size: 24rem;line-height: 78rem;color: #fff;}
  .yyon{color: #000;filter: grayscale(100);}
.loginbox a { color: #ac9045; }

 .loginout { display: none; }

 .loginout  span{

    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;	
}
/* ====== 底部区域：标语 + 预约按钮 ====== */
.bottom-area {
    position: absolute;
    bottom: 30rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.slogan-img {
    pointer-events: none;
    display: block;
    width: 1533rem;
    max-width: 90vw;
    height: auto;
}

.yuyue-btn {
    font-family: xq;
    margin-top: -30rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 324rem;
    height: 80rem;
    background-image: url(https://game.gtimg.cn/images/empress/act/a20260521rolecall/yuyuebtn.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: #d4b875;
    font-size: 42rem;
    letter-spacing: 4rem;
    text-decoration: none;
    cursor: pointer;
    transition: transform .3s ease, filter .3s ease;
    outline: none;
}

.yuyue-btn:hover {
    transform: scale(1.05);
    filter: brightness(1.15);
}

/* ====== 已预约状态 ====== */
.yuyue-btn.reserved {
    background-image: url(https://game.gtimg.cn/images/empress/act/a20260521rolecall/yuyuebtn.png);
    filter: grayscale(100%) ;
    color: #999;

}

.yuyue-btn.reserved:hover {
    transform: none;
    filter: grayscale(100%) brightness(0.6);
}






/* pop */
.popup{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;
}
.close-btn{
    position: absolute;
    right: 0;
    top: -60rem;
    width: 53rem;
    height: 53rem;
    background: url(https://game.gtimg.cn/images/empress/act/a20260521rolecall/pop/close.png) center center no-repeat;
    background-size: 100% auto;
}


/* 登录 */
.pop-dlBox{
    display: none;

}
.popup-dl{
    position: relative;
    width: 720rem;
    height: 360rem;
    background: url(https://game.gtimg.cn/images/empress/act/a20260521rolecall/pop/denglu.png) center center no-repeat;
    background-size: 100% auto;
}

.dlBox {
    position: absolute;
    bottom: 60rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 150rem;
}

.login-icon {
    display: inline-block;
    width: 153rem;
    height: 153rem;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
    transition: transform .3s ease, opacity .3s ease;
    opacity: .85;
}

.qq-icon {
    background-image: url(https://game.gtimg.cn/images/empress/act/a20260521rolecall/pop/qq.png);
}

.wx-icon {
    background-image: url(https://game.gtimg.cn/images/empress/act/a20260521rolecall/pop/wx.png);
}

.login-icon:hover {
    transform: scale(1.1);
    opacity: 1;
}


/* ====== 填写电话 + 选人物弹窗 ====== */
.roleIphone {
    display: none;
}

.popup-roleIp {
    position: relative;
    width: 1520rem;
    height: 593rem;
    background: url(https://game.gtimg.cn/images/empress/act/a20260521rolecall/pop/openbox.png) center center no-repeat;
    background-size: 100% auto;
}

.phoneBox {
    position: absolute;
    width: 1400rem;
    height: 470rem;
    bottom: 30rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10rem;
}


/* 左右两栏布局 */
.role-select-area,
.form-area {

    width: 680rem;
}

.role-select-area { margin-right: 40rem; position: relative; }
.role-select-area::after{
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -15rem;
    width: 1rem;
    height: 380rem;
    background-color: #4b3422;
}
.step-text {
    font-size: 18rem;
    color: #fbdb8c;
    /* line-height: 1.6; */
    margin-bottom: 35rem;
    display: flex;
}
.role-select-area  .step-text  .sp1{
    width: 90rem;
    color: #feefcc;
}
.form-area .step-text  .sp1{
    width: 80rem;
    color: #feefcc;
}


/* 角色列表 */
.role-list {
    list-style: none;
 text-align: center;
}

.role-item {
    display: inline-block;
    width: 150rem;
    height: 150rem;
    margin-bottom: 10rem;
    text-align: center;
    cursor: pointer;
    transition: transform .25s ease, filter .25s ease;
}

.role-item:hover {
    filter: brightness(1.15);
}

.role-item.active {
    background-image: url(https://game.gtimg.cn/images/empress/act/a20260521rolecall/pop/rwbg.png);
    background-size: 100% auto;
    background-position: center -8rem;
    background-repeat: no-repeat;
}

.role-item img {
    pointer-events: none;
    width: 150rem;
    height: auto;
    margin-top: -10rem;
}

.role-name {
    font-family: xq;
    font-size: 20rem;
    color: #fddd8f;
    margin-top: -15rem;
    white-space: nowrap;
    display: block;
}

.role-random img { border-radius: 0; }

/* 右侧表单区域 */
.form-area .step-text { text-align: right; }

.form-group {
    margin-top: 30rem;
    position: relative;
    margin-bottom: 14rem;
}

.form-input {
    width: 100%;
    height: 49rem;
    border:none;
    color: #e8d5c4;
    font-size: 18rem;
    outline: none;
    text-indent:40rem;
  
}

.form-input::placeholder {
    color: #896745;
}


.phone-input-wrap .form-input{
    width: 598rem;
    background: url(https://game.gtimg.cn/images/empress/act/a20260521rolecall/pop/select1.png) no-repeat center center;
    background-size: cover; 
}
.yzm-input-wrap .form-input{
    width: 475rem;
    background: url(https://game.gtimg.cn/images/empress/act/a20260521rolecall/pop/select2.png) no-repeat center center;
    background-size: cover; 
}


/* 验证码 */
.yzm-input-wrap { display: flex; align-items: center;  }



.yzm-btn {
    margin-left: -90rem;
    height: 50rem;
    line-height: 50rem;
    text-align: center;
    border: none;
    color: #301409;
    font-size: 24rem;
    font-family: xq;
    cursor: pointer;
    width: 209rem;
    background: url(https://game.gtimg.cn/images/empress/act/a20260521rolecall/pop/yzm.png) no-repeat center center;
    background-size: cover;
}

.disabled{
    pointer-events: none;
   filter:grayscale(1);
}
.agian{
    pointer-events: none; 
}
/* 协议勾选 */
.agree-row {
    margin:20rem 0 20rem 0;
}

.checkbox-label {
    display: inline-flex;
    align-items: center;
    font-size: 18rem;
    color: #feefcc;
    cursor: pointer;
    user-select: none;
}

.agree-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 18rem;
    height: 18rem;
    margin-right: 8rem;
    background: url(https://game.gtimg.cn/images/empress/act/a20260521rolecall/pop/check1.png) center/contain no-repeat;
    border: none;
    cursor: pointer;
    vertical-align: middle;
}

.agree-checkbox:checked {
    background-image: url(https://game.gtimg.cn/images/empress/act/a20260521rolecall/pop/check2.png);
}

.agree-desc {
    font-size: 16rem;
    color: #837b79;
    line-height: 1.65;
    margin-bottom: 30rem;
}

/* 提交按钮 */
.submit-btn {
    display: block;
    width: 265rem;
    height: 65rem;
    margin: 0 auto;
    background: none;
    background-image: url(https://game.gtimg.cn/images/empress/act/a20260521rolecall/pop/sub.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border: none;
    color: #d4b875;
    font-family: xq, sans-serif;
    font-size: 26rem;
    cursor: pointer;
    text-indent: -9999rem;
    outline: none;
    transition: transform .3s ease, filter .3s ease;
}

.submit-btn:hover {
    transform: scale(1.05);
    filter: brightness(1.15);
}



/* 只选人物 */


.popup-role{
    width: 875rem;
    height: 615rem;
    background: url(https://game.gtimg.cn/images/empress/act/a20260521rolecall/pop/openbox2.png) no-repeat center center;
    background-size: 100% 100%;
}

/* ====== 只选人物弹窗 ====== */
.role { display: none; }


.roleBox {
    padding: 100rem 60rem 50rem;
}

/* 标题 */


.role-desc {
    text-align: center;
    font-size: 18rem;
    color: #fbdb8c;
    line-height: 1.6;
    margin-bottom: 24rem;
}

/* 角色列表 - 居中两行排列 */
.popup-role .role-list {
    margin-bottom: 20rem;
}




/* 预约成功 */
.yuyuesucess{display: none;}
.popup-yys{
    width: 715rem;
    height: 353rem;
    background: url(https://game.gtimg.cn/images/empress/act/a20260521rolecall/pop/yuyueSuccess.png) no-repeat center center;
    background-size: 100% 100%; 
}

.popup-yys p{
    text-align: center;
    font-size: 24rem;
    color: #feefcc;
    margin-bottom: 10rem;
    
}
.popup-yys p:first-child {
    padding-top: 120rem;
}
.know{
    display: block;
    margin: 50rem auto 0;
    width: 239rem;
    height: 65rem;
    background: url(https://game.gtimg.cn/images/empress/act/a20260521rolecall/pop/know.png) no-repeat center center;
    background-size: 100% 100%; 
}



/* ====== 解绑手机弹窗 ====== */
.jiebang{ display: none; }

.popup-jiebang{
    position: relative;
    width: 572rem;
    height: 462rem;
    background: url(https://game.gtimg.cn/images/empress/act/a20260521rolecall/pop/jiebang.png) no-repeat center center;
    background-size: 100% 100%;
}



.jiebang-form{
    width: 480rem;
    margin: 0 auto;
    padding-top: 100rem;
}

.phone-show-input {
    width: 100%;
    height: 49rem;
    border: none;
    color: #e8d5c4;
    font-size: 20rem;
    outline: none;
    text-indent: 40rem;
    background: url(https://game.gtimg.cn/images/empress/act/a20260521rolecall/pop/select1.png) no-repeat center center;
    background-size: 500rem auto;
}

.jiebang-yzm-wrap {
    display: flex;
    align-items: center;
    margin-bottom: 16rem;
}

.jiebang-yzm-wrap .yzm-input {
    width: auto;
    flex: 1;
    background: url(https://game.gtimg.cn/images/empress/act/a20260521rolecall/pop/select2.png) no-repeat left center;
    background-size: 380rem auto;
}

.jiebang-yzm-wrap .yzm-btn {
    background-size: 180rem auto;
    position: absolute;
    right: -20rem;
    font-size: 20rem;
}

.jiebang-desc {
    font-size: 14rem;
    color: #837b79;
    line-height: 1.7;
    margin-bottom: 24rem;
}

.jiebang-submit-btn {
    display: block;
    width: 200rem;
    height: 65rem;
    margin: 0 auto;
    background-image: url(https://game.gtimg.cn/images/empress/act/a20260521rolecall/pop/sub.png);
    background-size: 200rem auto;
    background-repeat: no-repeat;
    border: none;
    color: #d4b875;
    font-family: xq, sans-serif;
    font-size: 26rem;
    letter-spacing: 4rem;
    cursor: pointer;
    text-indent: -9999rem;
    outline: none;
    transition: transform .3s ease, filter .3s ease;
}

.jiebang-submit-btn:hover {
    transform: scale(1.05);
    filter: brightness(1.15);
}



.otherpop{ 
    display: none;
    width: auto;
    padding: 20rem;
    width: auto;
    width: 300rem;
    height:150rem;
    background: url(https://game.gtimg.cn/images/empress/act/a20260521rolecall/pop/compop.png) no-repeat center center;
    background-size: 100% 100%; 
    display: flex;
    justify-content: center;
    align-items: center;
 }
.otherpop h3{
    text-align: center;
    font-size: 14rem;
    color: #feefcc;
    width: 80%;
    margin-top: 25rem;
}





/* 公共 */

.compop{display: none;}
.popup-com{
    width: 715rem;
    height: 353rem;
    background: url(https://game.gtimg.cn/images/empress/act/a20260521rolecall/pop/compop.png) no-repeat center center;
    background-size: 100% 100%; 
    display: flex;
    justify-content: center;
    align-items: center;
}

.popup-com p{
    text-align: center;
    font-size: 24rem;
    color: #feefcc;
    width: 80%;
    margin: 0 auto;
    
}
.popup-com p:first-child {
    margin-top: 45rem;
}