@font-face{
    font-family:'yuansShen' ;
    src: url('../util/optimized_zh_web.woff2');
}
* {
    margin: 0;
    padding: 0;
    font-family:'yuansShen' ;
    box-sizing: border-box; /* 新增：统一盒模型 */
}

#app {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background: url('../util/img/chizi.webp') no-repeat center;
    background-size: cover;
    position: relative;
    /* 新增：防止触摸缩放 */
    touch-action: manipulation;
    -webkit-touch-callout: none;
}

.mainBox {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.17);
}

.header {
    height: 10%; /* 手机端降低高度 */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 5px;
}

.header-left {
    display: flex;
    align-items: center;
    height: 100%;
    flex: 2; /* 调整占比 */
}

.star {
    background: url('../util/img/brand.png') no-repeat center;
    background-size: contain;
    height: 30px; /* 缩小图标 */
    width: 35px;
    margin-left: 5%;
    margin-right: 3%; /* 减小间距 */
}

.header-left span {
    color: rgb(255, 255, 255);
    font-size: 16px; /* 缩小字体 */
}

.header-center {
    background-color: rgb(0, 255, 128);
    flex: 3; /* 调整占比 */
    border-radius: 4px; /* 新增：圆角优化 */
}

.header-right {
    flex: 3; /* 调整占比 */
    display: flex;
    height: 100%;
    justify-content: right;
    align-items: center;
    gap: 8px; /* 新增：间距控制 */
}

.yuanshi {
    background-color: rgba(57, 75, 88, 0.501);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 3;
    height: 40%; /* 提高高度适配 */
    border-radius: 500px;
    padding: 0 5px;
}
.yuanshi-left{
    height: 80%;
    flex: 1;
    background: url('../util/img/primogem.webp') no-repeat center;
    background-size: contain;
}

.yuanshi-num{
    flex: 2;
    color: white;
    font-size: 14px; /* 缩小字体 */
}
.yuanshi-add{
    height: 70%;
    flex: 1;
    background: url('../util/img/add.png') no-repeat center;
    background-size: contain;
}

.jiuchan {  
    margin-left: 0; /* 取消左边距 */
    background-color: rgba(57, 75, 88, 0.501);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40%;
    border-radius: 500px;
    flex: 2;
    padding: 0 5px;
}

.jiuchan-left{
    margin-left: 3%;
    margin-right: 3%;
    height: 80%;
    flex: 2;
    background: url('../util/img/intertwined-fate.webp') no-repeat center;
    background-size: contain;
}

.jiuchan-num{
    flex: 3; /* 调整占比 */
    color: white;
    font-size: 14px; /* 缩小字体 */
}

.close {
    height: 45%;
    flex: 1;
    cursor: pointer;
}
.close-box{
    position: absolute;
    left: 25%;
    height: 20px; /* 缩小关闭按钮 */
    width: 20px;
    border-radius: 200px;
    border: 3px rgba(245, 250, 251, 0.827) solid;
}
.close-box:hover{
    border: 3px rgba(242, 233, 171, 0.827) solid;
    transform: scale(1.05);
}

.close-box::before{
    content: "";
    box-sizing: border-box;
    top: calc(50% - 10px);
    left: calc(50% - 10px);
    position: absolute;
    height: 20px; /* 缩小图标 */
    width: 20px;
    background: url('../util/img/close.png') no-repeat center;
    background-size: contain;
    background-color:rgb(230,229,212) ;
    border-radius: 200px;
    border: 3px rgba(255, 255, 255, 0) solid;
} 

.center{
    height: 65%; /* 调整高度 */
    width: 100vw;
    display: flex;
}
.center-left{
    width: 8%; /* 缩小侧边宽度 */
}
.center-center{
    width: 84%; /* 扩大主视觉宽度 */
    background: url('../util/img/changzhuqiyuan.png') no-repeat center;
    background-size: contain;
}
.center-right{
    width: 8%; /* 缩小侧边宽度 */
}

.footer{
    margin-top: 1vh;
    height: 25%; /* 提高底部高度 */
    display: flex;
    flex-direction: column; /* 手机端改为纵向排列 */
    justify-content: center;
    align-items: center;
    gap: 10px;
}   

.footer-left{
    margin-left: 0;
    height: 40%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-left-top{
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* 调整间距 */
}   

.XHBox{
    height: 100%;
    display: flex;
    align-items: center;
    gap: 15px;
}

.XHBoxSR{
    display: flex;
    align-items: center;
    margin-right: 0;
}
.xinghuiSR{
    width: 28px; /* 缩小图标 */
    height: 28px;
    background: url('../util/img/masterless-starglitter.webp') no-repeat center;
    background-size:contain ;
}

.XHBoxSR span{
    margin-left: 5px;
    color: white;
    font-size: 14px; /* 缩小字体 */
}

.XHBoxR{
    display: flex;
    align-items: center;
    margin-right: 0;
}

.xinghuiR{
    width: 28px; /* 缩小图标 */
    height: 28px;
    background: url('../util/img/masterless-stardust.webp') no-repeat center;
    background-size:contain ;
}

.XHBoxR span{
    margin-left: 5px;
    color: white;
    font-size: 14px; /* 缩小字体 */
}

.footer-left-bottom{
    display: none; /* 手机端隐藏历史按钮（可根据需求调整） */
}

.footer-right{
    height: 50%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 0;
}

.chou{
    text-align: center;
    line-height: 50px; /* 调整行高 */
    height: 50px; /* 缩小按钮 */
    width: 180px; /* 缩小按钮 */
    background: url('../util/img/button.webp') no-repeat center; 
    background-size: contain;
    cursor: pointer;
    color: rgb(237, 176, 85);
    font-size: 15px; /* 缩小字体 */
}

.chou:hover{
    transform:scale(0.98) ;
    color: rgb(255, 154, 2);
}

/* 手机端视频适配 */
.MyVideo{
    width: 100vw;
    height: 100vh;
    min-width: auto; /* 取消最小宽度限制 */
    object-fit: cover; /* 覆盖填充 */
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1000;
}

.studentsBox{
    width:100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    background:url('../util/img/splash-background.webp') no-repeat center;
    background-size: cover;
    z-index: 1000;
}

.nameBox{
    position: absolute;
    height: 60%; /* 调整弹窗高度 */
    width: 80%; /* 扩大弹窗宽度 */
    top: calc(50% - 30vh);
    left: calc(50% - 40%); 
    /* background: url('../util/img/bg-catalyst.webp') no-repeat center;  */
    background-size: contain;
    display: flex;
    justify-content: center;
    align-items: center;
}

.name{
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 40px; /* 缩小字体 */
    word-spacing: 1px; /* 减小字间距 */
    transition: all 1s;
    transform: scale(15); /* 调整初始缩放 */
    color: #ffffff; /* 明确设置字体为纯白色 */
}

.name.active{
    transition: all 1s;
    transform: scale(1);
}

/* 新增：横屏适配 */
@media (orientation: landscape) {
    .header {
        height: 15%;
    }
    .center {
        height: 70%;
    }
    .footer {
        height: 15%;
        flex-direction: row; /* 横屏恢复横向排列 */
        padding: 0 10px;
    }
    .footer-left {
        width: 50%;
    }
    .footer-right {
        width: 50%;
    }
    .name {
        font-size: 35px;
    }
}

/* 新增：小屏手机适配（375px以下） */
@media (max-width: 375px) {
    .header-left span {
        font-size: 14px;
    }
    .yuanshi-num, .jiuchan-num {
        font-size: 12px;
    }
    .chou {
        width: 150px;
        height: 45px;
        line-height: 45px;
        font-size: 14px;
    }
    .name {
        font-size: 30px;
    }
    .XHBoxSR span, .XHBoxR span {
        font-size: 12px;
    }
    .xinghuiSR, .xinghuiR {
        width: 24px;
        height: 24px;
    }
}