* { margin: 0; padding: 0; box-sizing: border-box; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
html, body {
    width: 100%; height: 100%; overflow: hidden;
    background: #000;
    font-family: "SimSun", "宋体", "Microsoft YaHei", serif;
    /* 移动端禁止长按弹出菜单 */
    -webkit-touch-callout: none;
}
body {
    display: flex; align-items: center; justify-content: center;
    /* 移动端禁止触摸回弹 */
    overscroll-behavior: none;
}

/* PC端自定义指针，移动端隐藏 */
@media (hover: hover) and (min-width: 768px) {
    *, *:hover { cursor: none !important; }
    #customCursor { display: block !important; }
    button:hover, input:hover { cursor: none !important; }
}
#customCursor {
    display: none;
    position: fixed;
    /*top: 0; left: 0;*/
    width: 32px; height: 32px;
    pointer-events: none;
    z-index: 999999;
    transform: translate(-4px, -2px);
    user-select: none;
    -webkit-user-drag: none;
    will-change: transform;
}


/* 游戏加载弹窗 */
.loading-mask {
    position: fixed; top:0; left:0;
    width:100%; height:100%;
  /*  background: rgba(0,0,0,0.85);*/
    display:none; align-items:center; justify-content:center;
    z-index:9999;
}
.loading-popup {
    width:260px; height:80px;
    background: url('../img/toast_bg.jpg') center/100% 100% no-repeat;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    opacity:0; transform:scale(0.92);
}
.loading-mask.show .loading-popup {
    animation: popupIn 0.3s cubic-bezier(0.34,1.4,0.64,1) forwards;
}
@keyframes popupIn { to { opacity:1; transform:scale(1); } }
.loading-text {
   color: #e8e0d0;
    font-size: 12px;
    letter-spacing: 2px;
    text-shadow: 1px 1px 3px #000;
    margin-bottom: 10px;
    white-space: nowrap;
    font-family: "SimSun", serif;
    
}
.progress-wrap {
    width:220px; height:10px;
    background:#111; border:1px solid #5a4a20;
    box-shadow:inset 0 1px 3px rgba(0,0,0,0.8); overflow:hidden;
}
.progress-bar {
    height:100%; width:0%;
    background:linear-gradient(90deg,#FFAD00 0%,#FFAD00 50%,#FFAD00 100%);
    box-shadow:0 0 8px #ffd700, 0 0 16px rgba(255,215,0,0.4);
    position:relative;
}
.progress-bar::after {
    content:''; position:absolute; top:0;left:0;right:0;bottom:0;
    background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.5) 50%,transparent 100%);
    animation:shine 1s infinite linear;
}
@keyframes shine {
    0% { transform:translateX(-100%); }
    100% { transform:translateX(100%); }
}


/* F1帮助框 - 放在stage游戏画布内，跟随视频自动缩放 */
.help-box {
    position: absolute;
    top: 100px;
    left: 0px;
    width: 220px;
    padding: 8px 12px;
    background: rgba(0,0,0,0.45);
    z-index: 50;
    color: #fff;
    font-family: "SimSun", "宋体", serif;
    font-size: 12px;
    line-height: 1.1;
    border: 1px solid #000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    text-shadow: 1px 1px 1px #000;
}
.help-box.show {
    opacity: 1;
    pointer-events: auto;
}
.help-title {
    color: #6699ff;
    font-size: 12px;            /* 标题14px，原来15px */
    font-weight: bold;
    text-align: center;
    margin-bottom: 4px;         /* 标题下边距缩小 */
    letter-spacing: 2px;
}
.help-page { 
    display: none;
    text-align: center;
    word-break: break-word;
    white-space: normal;
}
.help-page.active { display: block; }
.help-footer {
    text-align: right;
    font-size: 12px;            /* 页脚10px，原来11px */
    color: #999;
    margin-top: 4px;            /* 页脚上边距缩小 */
}

/* ====== 1. 二级菜单CSS ====== */
.opt-menu {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    z-index: 96;
    opacity: 0;
    pointer-events: none;
    transition: all 0.25s ease-out;
}
.opt-menu.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.opt-menu-inner { display: flex; flex-direction: column; }
.opt-menu-title {
    width: 150px; height: 26px;
    background: url('../img/menu_btn_bg.jpg') center/100% 100% no-repeat;
    border: none; outline: none;
    color: #BB9C7F;
    font-family: "SimSun", serif;
    /*font-weight: bold;*/
    font-size: 14px; letter-spacing: 6px; text-indent: 6px;
    text-shadow: 1px 1px 2px #000;
    display: flex; align-items: center; justify-content: center;
    padding: 0; margin-bottom: 8px;
}
.opt-menu-btn {
    width: 150px; height: 26px;
    background: url('../img/menu_btn_bg.jpg') center/100% 100% no-repeat;
    border: none; outline: none;
    color: #fff;
    font-family: "SimSun", serif;
    font-size: 14px; letter-spacing: 2px;
    text-shadow: 1px 1px 2px #000;
    cursor: pointer;
    padding: 0;
    transition: filter 0.15s, color 0.15s, background 0.15s;
    touch-action: manipulation;
        margin-bottom: 8px;
}
.opt-menu-btn:hover { filter: brightness(1.35); color: #ffd860; }
.opt-menu-btn:active { filter: brightness(0.85); color: #ffd860; }
.opt-menu-btn.selected {
    background: linear-gradient(180deg, #2a3a0a 0%, #4a6010 50%, #2a3a0a 100%),
                url('../img/menu_btn_bg.jpg') center/100% 100% no-repeat;
    background-blend-mode: overlay;
    color: #fff;
    box-shadow: inset 0 0 8px rgba(120, 200, 0, 0.3);
}

/* 外层容器 - 4:3等比居中 */
.viewport {
    position: relative;
    width: min(100vw, calc(100vh * 4 / 3));
    height: min(100vh, calc(100vw * 3 / 4));
    max-width: 100vw;
    max-height: 100vh;
}

/* 固定800×600基准画布 - 所有元素像素级定位，最后整体缩放 */
.stage {
    position: absolute;
    left: 0; top: 0;
    width: 800px;
    height: 600px;
    transform-origin: 0 0;
    /* 移动端开启硬件加速 消除锯齿 */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
}

/* 背景视频 - 替代静态图，800×600铺满 */
.bg-video {
    position: absolute; left: 0; top: 0;
    width: 800px; height: 600px;
    object-fit: cover;
    background: #000;
    /* 移动端视频无黑边 */
    -webkit-transform: translateZ(0);
}
.bg-fallback {
    position: absolute; left: 0; top: 0;
    width: 800px; height: 600px;
    z-index: -1;
}

/* MU Logo */
.mu-logo {
     position: absolute;
            top: 25%;
            left: 50%;
            transform: translateX(-50%);
            width: 27%;
            height: auto;
            opacity: 0;
            /* 初始设置为纯黑色，通过滤镜实现 */
           /* filter: brightness(0);*/
            animation: fadeIn 3s ease-in-out forwards;
            z-index: 10;
        }

 @keyframes fadeIn {
            from {
                opacity: 1.5;
                /* 保持纯黑色 */

                filter: brightness(0);
            }

            to {
                opacity: 2.5;
                /* 慢慢变亮到正常状态 */
                filter: brightness(1);
            }
        }


/* 原版MU风格 右下点击抖动动画 完全还原老游戏手感 */
@keyframes serverBtnShake {
    0% { transform: translate(0, 0); }
    15% { transform: translate(1px, 2px); }
  
}
.server-btn.shake-effect {
    animation: serverBtnShake 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 左上角消息 - 精确贴左上角 */
.messages {
    position: absolute;
    top: 12px; left: 16px;
    color: #80a0ff;
    font-size: 12px;
    line-height: 1.5;
    text-shadow: 0 0 4px #000080, 1px 1px 2px #000;
    pointer-events: none;
    z-index: 10;
}

.gomessages {
    position: absolute;
    top: 12px; left: 16px;
    color: #red;
    font-size: 12px;
    line-height: 1.5;
    text-shadow: 0 0 4px #000080, 1px 1px 2px #000;
    pointer-events: none;
    z-index: 10;
}

.messages .white { color: #e0e0ff; }
.messages .red { color: #c11c1c; }
/* 服务器按钮列表 - 竖排，Logo正下方居中 */
.server-list {
    position: absolute;
    top: 290px;                    
    left: 50%;
    transform: translateX(-50%);
    display: flex; flex-direction: column;
    gap: 1px;                       /* 按钮间距4px */
    z-index: 20;
    transition: opacity 0.3s;
}
.server-btn {
    background: url('../img/menu.jpg') center/100% 100% no-repeat;
    border: none; outline: none;
    color: #cccccc;
    font-family: "SimSun", serif;
    font-size: 12px;
    width: 88px;                
    height: 22px;          
    line-height: 22px;
    cursor: pointer;
    letter-spacing: 1px;
    text-shadow: 1px 1px 2px #000;
    text-align: center;
    padding: 0;
    /* 用transform实现偏移，不影响布局，其他按钮完全不动 */
    transform: translateX(0);
    transition: filter 0.15s, transform 0.2s ease-out;
    touch-action: manipulation;
}

.server-btn:hover { filter: brightness(1.5); }
.server-btn:active { filter: brightness(1.8); }
.server-btn.selected {
    color: #fff;
    transform: translateX(6px);    /* 选中右移6px */
}


/* 线路面板 - 服务器右侧 */
.line-panel {
    position: absolute;
    left: 451px;                    /* 你的left是467px */
    display: flex; flex-direction: column;
    gap: 3px;                       /* 线路间距3px */
    z-index: 25;
    opacity: 0; transform: translateX(-12px);
    transition: all 0.25s ease-out;
    pointer-events: none;
}
.line-panel.show { opacity: 1; transform: translateX(0); pointer-events: auto; }
.line-item {
    background: url('../img/menu.jpg') center/100% 100% no-repeat;
    border: none; outline: none;
    color: #cccccc;
    font-family: "SimSun", serif;
    font-size: 14px;
    width: 136px;
    height: 24px;                   /* 线路高度24px */
    padding: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    letter-spacing: 1px;
    text-shadow: 1px 1px 2px #000;
    transition: filter 0.15s;
    touch-action: manipulation;
}
.line-item:hover { filter: brightness(1.35); }
.line-item:active { filter: brightness(1.45); }
.line-name {
        font-size: 12px;
    line-height: 12px;
    margin-top: 1px;
}
.line-bars {
    display: flex; gap: 1px;
    margin-top: 1px;
}
.line-bar {
    width: 5px; height: 5px;
    background: #1a1a1a;
}
.line-bar.green { background: #30c030; box-shadow: 0 0 2px #30c030; }
.line-bar.lgreen { background: #88d420; box-shadow: 0 0 2px #88d420; }
.line-bar.yellow { background: #d0c020; box-shadow: 0 0 2px #d0c020; }
.line-bar.orange { background: #e07820; box-shadow: 0 0 2px #e07820; }
.line-bar.red { background: #d02020; box-shadow: 0 0 2px #d02020; }

/* 登录框 - 底部落在游戏画面下黑边上方（y=533px基准），恶魔爪在Logo下方 */
.login-box {
    position: absolute;
    left: 50%;
    top: 310px;
    transform: translateX(-50%) translateY(80px);
    width: 300px;
    opacity: 0; pointer-events: none;
    transition: all 0.4s ease-out;
    z-index: 30;
}
.login-box.show {
    opacity: 1; pointer-events: auto;
    transition: transform 0.7s cubic-bezier(0.42, 0, 0.22, 1),
                opacity 0.7s ease-in;
    transform: translateX(-50%) translateY(0);
}


/* 新增：登录后下滑消失状态 */
.login-box.slide-down-hide {
     transition: transform 0.7s cubic-bezier(0.42, 0, 0.22, 1),
                opacity 0.7s ease-in;
    transform: translateX(-50%) translateY(120vh);
    opacity: 0;
    pointer-events: none;
}


.login-bg {
    width: 100%;
    display: block;
    filter: drop-shadow(0 6px 24px rgba(0,0,0,0.9));
}

/* 登录框内容 - 输入框缩小，不超出背景链条边框 */
.login-content {
    position: absolute;
    top: 55px; left: 50px; right: 50px;
}
.input-row {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    height: 24px;
    position: relative; /* 加上相对定位 */
}
.input-field {
    width: 130px;
    height: 22px;
    background: #2a2a2a;
    border: 1px solid #555;
    border-top: 2px solid #111;
    border-left: 2px solid #111;
    color: white; 
    font-size: 12px;
  /*  padding: 2px 6px;*/
    outline: none;
    font-family: "SimSun", serif;
    line-height: 18px;
    
    caret-color: transparent;
}
/* 自定义下划线光标 _ */
/* 默认（移动端）：恢复系统原生光标，隐藏自定义光标 */
.input-cursor {
    display: none;
}
.input-field {
    caret-color: auto; /* 移动端用系统原生光标颜色 */
}

/* PC端：显示自定义下划线光标，隐藏原生光标 */
@media (hover: hover) and (min-width: 768px) {
    .input-cursor {
        display: block;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        color: #fff;
        font-family: "SimSun", serif;
        font-size: 11px;
        line-height: 1;
        pointer-events: none;
        animation: cursorBlink 0.2s step-end infinite;
        text-shadow: 0 0 4px #fff;
        z-index: 5;
        left: 0;
    }
    .input-field {
        caret-color: transparent; /* PC端隐藏原生竖线光标 */
    }
}

@keyframes cursorBlink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
   } 
.input-label {
    color: #fff;
    font-size: 11px;
    letter-spacing: 4px;
    width: 70px;
    flex-shrink: 0;
    text-align: left;
    text-shadow: 1px 1px 2px #000;
    white-space: nowrap;
    display: inline-block;
}


/* 按钮区 - 尺寸随登录框缩小 */
.btn-grid {
    display: grid;
    grid-template-columns: 105px 105px;
    grid-template-rows: 26px 26px;
    gap: 6px;
    margin: 18px 0px 18px -10px;
    width: fit-content;

}
.login-btn {
    background: url('../img/btn.jpg') center/100% 100% no-repeat;
    border: none; outline: none;
    color: #F8E8DB;
    font-family: "Arial", serif;
    font-size: 14px;
    text-shadow: 1px 1px 2px #000;
    letter-spacing: 2px;
    transition: filter 0.15s;
    padding: 0;
    touch-action: manipulation;
}
.login-btn.primary { color: #F8E8DB; }
.login-btn:hover { filter: brightness(1.35); }
.login-btn:active { filter: brightness(0.85); }

/* 中间长按钮 */
.mid-btn {
    width: 216px;
    height: 26px;
    margin: 6px auto 0;
    display: block;
}

/* 退出按钮 - 底部居中 */
.logout-btn-wrap {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 130px;
}
.logout-btn {
    width: 100%;
    height: 28px;
    letter-spacing: 12px;
    text-indent: 12px;
}

/* ====== 修改后的提示框：大理石金边背景、顶部弹出、带确认按钮 ====== */
.toast-mask {
    position: absolute;
    left: 0; top: 0;
    width: 800px; height: 600px;
    background: rgba(0,0,0,0.4);
    z-index: 99;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}
.toast-mask.show { opacity: 1; pointer-events: auto; }

.toast {
    position: absolute;
    top: -160px;
    left: 50%;
    transform: translateX(-50%);
    width: 260px;
    height: 80px;
    background: url('../img/toast_bg.jpg') center/100% 100% no-repeat;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 30px 14px;
    opacity: 0;
    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    pointer-events: none;
}
.toast.show {
    top: 80px;
    opacity: 1;
    pointer-events: auto;
}
.toast-text {
    color: #e8e0d0;
    font-size: 12px;
    letter-spacing: 2px;
    text-shadow: 1px 1px 3px #000;
    margin-bottom: 10px;
    white-space: nowrap;
    font-family: "SimSun", serif;
}
.toast-confirm {
    width: 80px;
    height: 20px;
    background: url('../img/ok.jpg') center/100% 100% no-repeat;
    border: none;
    transition: filter 0.15s, color 0.15s;
    padding: 0;
    touch-action: manipulation;
}
.toast-confirm:hover { filter: brightness(0.85);  background: url('../img/ok2.jpg') center/100% 100% no-repeat;color: #ffd860; }
.toast-confirm:active { filter: brightness(0.85);  background: url('../img/ok2.jpg') center/100% 100% no-repeat;color: #ffd860; }


/* ====== QQ 微信客服  78189510 ====== */

.l-qq {
   width: 16px; 
   height:16px;

   vertical-align: middle; 
   margin-right: 6px; 
   margin-bottom: 2px; 
   color: #4da8eb; 
   border-radius: 3px;
}


.l-wx {
   width: 16px; 
   height:16px;
  
   vertical-align: middle; 
   margin-right: 6px; 
   margin-bottom: 2px; 
   color: #07c160; 
   border-radius: 3px;
}


/* ====== ESC系统菜单（结束游戏/选项/取消） ====== */
.sys-mask {
    position: absolute;
    top: 0; left: 0;
    width: 800px; height: 600px;
    background: rgba(0,0,0,0.5);
    z-index: 90;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}
.sys-mask.show { opacity: 1; pointer-events: auto; }
.sys-menu {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    z-index: 95;
    opacity: 0;
    pointer-events: none;
    transition: all 0.25s ease-out;
}
.sys-menu.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.sys-menu-inner {
    display: flex;
    flex-direction: column;
}
.sys-menu-btn {
    width: 150px;
    height: 26px;
    background: url('../img/menu_btn_bg.jpg') center/100% 100% no-repeat;
    border: none;
    outline: none;
    color: #fff;
    font-family: "SimSun", serif;
    font-size: 14px;
    letter-spacing: 4px;
    text-shadow: 1px 1px 2px #000;
    cursor: pointer;
    padding: 0;
    transition: filter 0.15s, color 0.15s;
    touch-action: manipulation;
    margin-bottom: 8px;
}
.sys-menu-btn:hover {
    filter: brightness(1.35);
    color: #ffd860;
}
.sys-menu-btn:active {
    filter: brightness(0.85);
    color: #ffd860;
}

/* 底部文字 */
.ver {
    position: absolute;
    bottom: 13px; left: 14px;
    color: #C0B6AD;
    font-size: 11px;
    text-shadow: 1px 1px 2px #000;
}
.copy {
    position: absolute;
    bottom: 13px; left: 50%;
    transform: translateX(-50%);
    color: #C0B6AD;
    font-size: 11px;
    text-shadow: 1px 1px 2px #000;
    white-space: nowrap;
}
/* ===================== 站点适配（登录器接入 97mu） ===================== */
.login-tip {
    min-height: 14px;
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.2;
    color: #ff9b9b;
    text-align: center;
    text-shadow: 1px 1px 2px #000;
    letter-spacing: 1px;
}

/* 跳过登录进入官网 */
.entry-skip {
    position: absolute;
    right: 14px;
    bottom: 13px;
    z-index: 40;
    font-size: 11px;
    color: #C0B6AD;
    text-decoration: none;
    text-shadow: 1px 1px 2px #000;
}
.entry-skip:hover { color: #ffd860; }

/* 注册框: 多了验证码行, 收紧间距, 保证内容不超出画框 */
#loginBoxs .input-row { margin-bottom: 5px; }
#loginBoxs .btn-grid { margin: 12px 0 8px -10px; }

.input-field::placeholder { color: #8a8a8a; font-size: 11px; }

/* 验证码行: 图片源是 2 倍图(176x60), 显示 88x30, 缩放后依然清晰 */
.captcha-row { height: 32px; }
.captcha-row .input-label { width: 40px; letter-spacing: 0; font-size: 11px; }
.captcha-field { width: 60px !important; }
.captcha-img {
    width: 88px;
    height: 30px;
    margin-left: 4px;
    flex-shrink: 0;
    border: 1px solid #555;
    background: #fff;
    cursor: pointer;
}

/* ===================== 竖屏手机（body.portrait） ===================== */
body.portrait .viewport {
    width: 100vw; height: 100vh;
    max-width: none; max-height: none;
}
body.portrait .stage { width: 100vw; height: 100vh; }
body.portrait .bg-video { width: 100vw; height: 100vh; object-fit: cover; }

body.portrait .mu-logo { top: 15%; width: 54%; }

body.portrait .messages {
    top: 8px; left: 12px; right: 12px;
    font-size: 11px; line-height: 1.45;
    max-height: 13vh; overflow: hidden;
}

body.portrait .server-list {
    top: 40%; left: 9%; width: 82%;
    transform: none; gap: 6px;
}
body.portrait .server-btn {
    width: 100%; height: 34px; line-height: 34px;
    font-size: 14px; letter-spacing: 2px;
}
body.portrait .server-btn.selected { transform: translateX(4px); }

body.portrait .line-panel {
    left: 9% !important; right: 9% !important;
    width: auto !important;
    top: 48% !important; bottom: auto !important;  /* 紧跟"回首奇迹"选服列表下方, 不再贴底 */
    transform: none !important;
}
body.portrait .line-panel.show { opacity: 1; }
body.portrait .line-item { width: 100%; height: 32px; font-size: 13px; }

body.portrait .login-box {
    width: 92%; max-width: 400px;
    top: 40%; bottom: auto;   /* 紧贴 MU 标下方, 避免按钮被手机底部手势条遮住 */
    transform: translateX(-50%) translateY(40px);
}
body.portrait .login-box.show { transform: translateX(-50%) translateY(0); }
body.portrait .login-box.slide-down-hide { transform: translateX(-50%) translateY(120vh); }

body.portrait .login-content { top: 25.5%; left: 18%; right: 18%; }
body.portrait .input-row { height: 22px; margin-bottom: 8px; }
body.portrait .input-label { width: 56px; font-size: 11px; letter-spacing: 2px; }
body.portrait .input-field { width: auto; flex: 1 1 auto; }

body.portrait .btn-grid {
    grid-template-columns: 1fr 1fr;
    width: 100%;
    margin: 12px 0 8px;
    gap: 6px;
}
body.portrait .login-btn { height: 28px; font-size: 13px; letter-spacing: 1px; }
body.portrait .logout-btn-wrap { bottom: 0; width: 60%; }

body.portrait #loginBoxs .input-row { margin-bottom: 6px; }
body.portrait .captcha-row { height: 34px; }
body.portrait .captcha-row .input-label { width: 44px; }
body.portrait .captcha-field { width: auto !important; flex: 1 1 auto; }
body.portrait .captcha-img { width: 96px; height: 33px; }

body.portrait .toast, body.portrait .loading-popup { width: 84%; }
body.portrait .toast { top: -200px; }
body.portrait .toast.show { top: 10vh; }

body.portrait .sys-mask, body.portrait .toast-mask { width: 100vw; height: 100vh; }
body.portrait .sys-menu { top: 16%; }
body.portrait .help-box { top: 14%; left: 4%; width: 64%; }

body.portrait .ver { bottom: 8px; left: 12px; }
body.portrait .entry-skip { bottom: 8px; right: 12px; }
body.portrait .copy { display: none; }