/* 唱片图标基础样式 */
                .music-disc {
                    position: fixed;
                    top: 20px;
                    left: 20px;
                    width: 45px;
                    height: 45px;
                    background-color: #333;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    z-index: 99999;
                    box-shadow: 0 0 10px rgba(0,0,0,0.5);
                    transition: background-color 0.3s;
                    /* 防止双击时选中页面文字 */
                    user-select: none; 
                }
                .music-disc:hover { background-color: #555; }
                .disc-icon { font-size: 20px; display: inline-block; }
                @keyframes rotateDisc { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
                .music-disc.playing .disc-icon { animation: rotateDisc 3s linear infinite; }
                .music-disc.paused .disc-icon { animation-play-state: paused; }
                
                /* 音量控制样式 */
                .volume-control {
                    position: absolute;
                    top: 55px;
                    left: 50%;
                    transform: translateX(-50%) translateY(-10px); /* 初始稍微往上缩一点 */
                    width: 45px;
                    height: 110px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background-color: rgba(30, 30, 30, 0.95);
                    border-radius: 20px;
                    
                    /* 默认隐藏 */
                    opacity: 0;
                    pointer-events: none;
                    transition: opacity 0.3s ease, transform 0.3s ease;
                }
                
                /* 通过 JS 添加 .show-volume 类来显示滑块 */
                .music-disc.show-volume .volume-control {
                    opacity: 1;
                    pointer-events: auto;
                    transform: translateX(-50%) translateY(0); /* 弹出到正常位置 */
                }
                
                /* 滑块样式 */
                .volume-slider {
                    writing-mode: vertical-lr;
                    direction: rtl;
                    -webkit-appearance: slider-vertical;
                    appearance: slider-vertical;
                    width: 30px;
                    height: 90px;
                    background: transparent;
                    cursor: pointer;
                }


                /* 右上角公告悬浮按钮 */
                .announcement-float-btn {
                        position: fixed; /* 固定在屏幕上，不随页面滚动 */
                        top: 20px;       /* 距离顶部 20px */
                        right: 20px;     /* 距离右侧 20px */
                        z-index: 99990;  /* 层级要高 */
    
                        padding: 8px 16px;
                        background: #409eff;
                        color: white;
                        border: none;
                        border-radius: 20px; /* 胶囊形状 */
                        font-size: 14px;
                        font-weight: bold;
                        cursor: pointer;
                        box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4); /* 蓝色投影 */
                        transition: all 0.3s ease; /* 动画过渡 */
                }

                /* 鼠标放上去的效果 */
                .announcement-float-btn:hover {
                        background: #66b1ff;
                        transform: translateY(-2px); /* 往上浮起 2px */
                        box-shadow: 0 6px 16px rgba(64, 158, 255, 0.6);
                }

                /* ---------- 网页版：下载安卓 App ----------
                 * 默认隐藏，由 JS 判断“不在 App 内”才显示，
                 * 避免 App 里出现一个下载自己的按钮。 */
                .app-dl-btn {
                        display: none;
                        position: fixed;
                        top: 20px;
                        right: 90px;          /* 紧挨在“公告”左边 */
                        z-index: 99990;
                        padding: 8px 16px;
                        border-radius: 20px;
                        background: var(--ac);
                        color: #14171f;
                        font-size: 14px;
                        font-weight: bold;
                        text-decoration: none;
                        white-space: nowrap;
                        box-shadow: 0 4px 12px var(--ac-g);
                        transition: all 0.3s ease;
                }
                .app-dl-btn.show { display: inline-block; }
                .app-dl-btn:hover {
                        transform: translateY(-2px);
                        box-shadow: 0 6px 16px rgba(232, 164, 58, 0.55);
                }
                .app-dl-btn:active { transform: translateY(0); }

        /* 维护全屏遮罩 */
        .maintenance-overlay {
            display: none; /* 默认隐藏 */
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0, 0, 0, 1); /* 更黑的背景，增加维护感 */
            z-index: 999999; /* 级别最高 */
            justify-content: center;
            align-items: center;
        }

        .maintenance-box {
            background: #ffffff;
            padding: 40px 50px;
            border-radius: 12px;
            text-align: center;
            box-shadow: 0 0 30px rgba(255, 0, 0, 0.2); /* 加一点红色的阴影，提示严重性 */
        }

        .maintenance-box h2 {
            margin: 0 0 15px 0;
            color: #d9534f; /* 维护红 */
            font-size: 22px;
        }

        .maintenance-box p {
            color: #666;
            font-size: 15px;
            margin: 0;
        }
                /* --- 基础公告 --- */
                .modal-overlay {
                        display: none;
                        position: fixed;
                        top: 0; left: 0; width: 100%; height: 100%;
                        background: rgba(0,0,0,0.6);
                        z-index: 99999;
                        justify-content: center;
                        align-items: center;
                }
                .announcement-box {
                        background: #fff;
                        width: 90%;           /* 在手机上占屏幕宽度的 90%，两边留 5% 的安全边距 */
                        max-width: 450px;     /* 在电脑大屏上，最多不超过 450px */
    
                        max-height: 80vh; /* 防止屏幕太小弹窗溢出 */
                        border-radius: 12px;
                        padding: 25px;
                        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
                        display: flex;
                        flex-direction: column; /* 让内部元素垂直排列（上中下） */
                }
                .modal-title {
                        margin: 0 0 15px 0;
                        text-align: left;
                        font-size: 18px;
                        color: #333;
                }
                .ps-title {
                        margin: 0 0 15px 0;
                        text-align: left;
                        font-size: 14px;
                        color: #333;
                }

                /* ==========================================
                上半部分：公告正文区
                ========================================== */
                .announcement-content {
                        height: 200px; /* 固定高度，超出出现纵向滚动条 */
                        overflow-y: auto; 
                        padding: 15px;
                        background: #f9f9f9;
                        border-radius: 8px;
                        font-size: 12px;
                        line-height: 1.6;
                        color: #555;
                        margin-bottom: 15px;
                        flex-shrink: 0; /* 防止被下面的按钮区挤压变形 */
                }
                
                /* 美化公告框里的滚动条 */
        .announcement-content::-webkit-scrollbar {
         width: 6px; /* 滚动条宽度 */
        }
        /* 1. 默认状态（鼠标没碰它时） */
        .announcement-content::-webkit-scrollbar-thumb {
         background: #ccc;     /* 浅灰色 */
         border-radius: 3px; 
        }
        /* 2. 鼠标放上去时（Hover） */
        .announcement-content::-webkit-scrollbar-thumb:hover {
         background: #999;     /* 变成中灰色（颜色变深了） */
        }
     
        /* 3. 鼠标点击/按住时 */
        .announcement-content::-webkit-scrollbar-thumb:active {
         background: #777;     /* 变成深灰色（颜色最深） */
        }
        .announcement-content::-webkit-scrollbar-thumb {
         background: #ccc; /* 滚动条颜色（改成浅灰色） */
         border-radius: 3px; /* 滚动条变圆 */
        }
        .announcement-content::-webkit-scrollbar-track {
         background: transparent; /* 滚动条背景透明 */
        } 
                /* ==========================================
                下半部分：版本选择器（横向滚动核心）
                ========================================== */
                .version-selector-wrapper {
                        width: 100%;
                        overflow-x: auto; /* 核心：横向超出时出现滚动条 */
                        overflow-y: hidden; /* 隐藏纵向滚动条 */
                        margin-bottom: 10px;
                        /* 美化横向滚动条 */
                        scrollbar-width: thin; 
                        scrollbar-color: #ddd transparent;
                }
                .version-selector-wrapper::-webkit-scrollbar {
                        height: 4px; /* 横向滚动条变细 */
                }
                .version-selector-wrapper::-webkit-scrollbar-thumb {
                        background: #ddd;
                        border-radius: 2px;
                }

                /* 按钮容器 */
                .version-buttons {
                        display: flex;
                        gap: 10px; /* 按钮之间的间距 */
                        padding: 5px 0; /* 上下留点呼吸空间 */
                        /* 核心：禁止换行，保证所有按钮在一条直线上 */
                        flex-wrap: nowrap; 
                }

                /* 单个版本按钮 */
                .version-btn {
                        flex-shrink: 0; /* 核心：防止按钮在空间不够时被挤压变形 */
                        white-space: nowrap; /* 核心：防止按钮文字换行（比如 v1.0.1 不会断开） */
                        padding: 6px 16px;
                        border: 1px solid #e0e0e0;
                        background: #fff;
                        border-radius: 20px; /* 胶囊形状好看 */
                        cursor: pointer;
                        font-size: 13px;
                        color: #666;
                        transition: all 0.2s;
                }
                .version-btn:hover {
                        border-color: #409eff;
                        color: #409eff;
                }
                /* 当前选中的版本按钮样式 */
                .version-btn.active {
                        background: #409eff;
                        border-color: #409eff;
                        color: #fff;
                }

                /* 关闭按钮 */
                .modal-close-btn {
                        width: 100%;
                        padding: 12px;
                        background: #409eff;
                        color: white;
                        border: none;
                        border-radius: 8px;
                        font-size: 16px;
                        cursor: pointer;
                        flex-shrink: 0;
                }
                .modal-close-btn:hover {
                        background: #66b1ff;
                }

                /* 安卓 App 专用：公告弹窗里的版本号 + 检查更新（浏览器中整行隐藏） */
                .app-update-row {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        gap: 10px;
                        margin: 0 0 12px 0;
                        padding: 9px 12px;
                        background: #f5f7fa;
                        border: 1px solid #e4e7ed;
                        border-radius: 8px;
                        font-size: 13px;
                        color: #909399;
                        flex-shrink: 0;
                }
                .app-update-txt b {
                        color: #303133;
                        font-weight: 600;
                }
                .app-update-btn {
                        flex-shrink: 0;
                        padding: 6px 14px;
                        background: #fff;
                        color: #409eff;
                        border: 1px solid #409eff;
                        border-radius: 6px;
                        font-size: 13px;
                        font-weight: 600;
                        cursor: pointer;
                        transition: background-color .2s, color .2s;
                }
                .app-update-btn:hover {
                        background: #409eff;
                        color: #fff;
                }
                .app-update-btn:active {
                        transform: scale(.97);
                }
                .app-update-btn:disabled {
                        opacity: .55;
                        cursor: default;
                }

                #closeNoticeBtn {
                    width: 100%;
                    padding: 12px;
                    background: var(--accent, #ff6b6b); /* 自动适配你原来的主色调 */
                    color: white;
                    border: none;
                    border-radius: 6px;
                    font-size: 16px;
                    font-weight: bold;
                    cursor: pointer;
                }
                
                #closeNoticeBtn:hover {
                    opacity: 0.9;
                }

        :root{
            --bg:#0c0e14;--bg2:#141722;--card:#1a1d2e;--card-h:#222640;
            --bdr:#2a2e44;--bdr-a:#e8a43a;--fg:#e8e6e3;--fg-m:#6b6f84;
            --ac:#e8a43a;--ac-g:rgba(232,164,58,.25);--ac-s:rgba(232,164,58,.08);
            --ok:#34d399;--err:#f87171;--r:14px;--rs:10px;
            --pc:#38bdf8;--pc-s:rgba(56,189,248,.08);
            --cr:#fb923c;--cr-g:rgba(251,146,60,.15);--cr-s:rgba(251,146,60,.08);
            /* 四连击伤害测试坦克专属配色（紫色，用于与正式坦克区分） */
            --test:#a78bfa;--test-bdr:rgba(167,139,250,.55);--test-bdr-h:rgba(167,139,250,.85);
            --test-g:rgba(167,139,250,.25);--test-s:rgba(167,139,250,.08);
            --sb-track:rgba(255,255,255,.02);--sb-thumb:rgba(232,164,58,.12);--sb-thumb-h:rgba(232,164,58,.25);
        }
                /* ===== 自定义滚动条 ===== */
                        ::-webkit-scrollbar{width:6px;height:6px}
                        ::-webkit-scrollbar-track{background:var(--sb-track);border-radius:3px}
                        ::-webkit-scrollbar-thumb{background:var(--sb-thumb);border-radius:3px;transition:background .3s}
                        ::-webkit-scrollbar-thumb:hover{background:var(--sb-thumb-h)}
                        ::-webkit-scrollbar-corner{background:transparent}
                        /* 弹窗内滚动条更精致 */
                        .rc::-webkit-scrollbar{width:5px}
                        .rc::-webkit-scrollbar-track{background:rgba(255,255,255,.02);border-radius:3px}
                        .rc::-webkit-scrollbar-thumb{background:rgba(232,164,58,.12);border-radius:3px}
                        .rc::-webkit-scrollbar-thumb:hover{background:rgba(232, 141, 81, 0.2)}
                                .rc::-webkit-scrollbar-thumb:active{background:rgba(232, 183, 34, 0.3)}

        *{margin:0;padding:0;box-sizing:border-box}
        body{font-family:'Noto Sans SC',sans-serif;background:var(--bg);color:var(--fg);min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow-x:hidden;position:relative}
        body::before{content:'';position:fixed;top:-20%;left:-15%;width:500px;height:500px;background:radial-gradient(circle,rgba(232,164,58,.05) 0%,transparent 70%);border-radius:50%;animation:f1 14s ease-in-out infinite;pointer-events:none}
        body::after{content:'';position:fixed;bottom:-15%;right:-15%;width:600px;height:600px;background:radial-gradient(circle,rgba(52,211,153,.03) 0%,transparent 70%);border-radius:50%;animation:f2 18s ease-in-out infinite;pointer-events:none}
        @keyframes f1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(50px,30px) scale(1.12)}}
        @keyframes f2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-40px,-25px) scale(1.1)}}
        .gbg{position:fixed;inset:0;background-image:linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);background-size:50px 50px;pointer-events:none;z-index:0}
        .ct{position:relative;z-index:1;width:100%;max-width:500px;padding:16px}
        .hd{text-align:center;margin-bottom:28px}
        .hd-t{display:inline-flex;align-items:center;gap:6px;background:var(--ac-s);border:1px solid rgba(232,164,58,.15);color:var(--ac);font-size:11px;font-weight:500;padding:4px 12px;border-radius:20px;margin-bottom:12px;letter-spacing:.5px}
        .hd h1{font-size:28px;font-weight:900;letter-spacing:-.5px;line-height:1.2;background:linear-gradient(135deg,#fff 30%,var(--ac) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
        .hd p{color:var(--fg-m);font-size:13px;margin-top:6px;font-weight:300}

        /* 窄屏：顶部固定着「下载 App / 公告」两个按钮，
           正文往下让出位置，别让按钮压住版本号；
           顺带把整体改为顶部对齐，避免内容比屏幕高时被垂直居中截掉顶部 */
        @media (max-width: 600px){
            body{justify-content:flex-start}
            .ct{padding-top:70px}
        }
        /* 更窄时按钮也收一点，避免在 320px 宽的小屏上挤在一起 */
        @media (max-width: 380px){
            .announcement-float-btn{font-size:13px;padding:7px 13px}
            .app-dl-btn{font-size:13px;padding:7px 13px;right:82px}
        }
        .acc{display:flex;flex-direction:column;gap:10px}
        .ai{border-radius:var(--r);overflow:hidden;border:1.5px solid var(--bdr);background:var(--card);transition:border-color .3s,box-shadow .3s;animation:su .45s ease-out both}
        .ai:nth-child(1){animation-delay:.05s}.ai:nth-child(2){animation-delay:.1s}.ai:nth-child(3){animation-delay:.15s}.ai:nth-child(4){animation-delay:.2s}.ai:nth-child(5){animation-delay:.25s}
        @keyframes su{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
        .ai.open{border-color:var(--bdr-a);box-shadow:0 0 20px var(--ac-g),0 4px 12px rgba(0,0,0,.2)}
        .ah{display:flex;align-items:center;padding:14px 16px;cursor:pointer;user-select:none;gap:12px;transition:background .2s;position:relative}
        .ah::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:22px;border-radius:0 2px 2px 0;background:var(--ac);opacity:.35;transition:opacity .3s}
        .ai.open .ah::before{opacity:1}
        .ah:hover{background:var(--card-h)}
        .ahf{flex:1;min-width:0;padding-left:6px}
        .aht{font-size:14px;font-weight:700;color:var(--fg);line-height:1.3}
        .ahs{font-size:11px;color:var(--fg-m);margin-top:1px;font-weight:300;transition:color .3s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        .ahs.ch{color:var(--ac)}
        .aha{width:22px;height:22px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .35s cubic-bezier(.4,0,.2,1)}
        .aha::after{content:'';display:block;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--fg-m);transition:border-color .3s}
        .ai.open .aha{transform:rotate(180deg)}
        .ai.open .aha::after{border-top-color:var(--ac)}
        .ab{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1),padding .4s cubic-bezier(.4,0,.2,1);padding:0 16px}
        .ai.open .ab{max-height:450px;overflow-y: auto;transition: max-height 0.3s ease;padding:0 16px 16px}
        .or{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
                .ab::-webkit-scrollbar {
                    width: 6px;
                }
                .ab::-webkit-scrollbar-track {
                    background: transparent;
                    border-radius: 3px;
                }
                .ab::-webkit-scrollbar-thumb {
                    background-color: rgba(255, 255, 255, 0.1); /* 浅灰，直到悬停 */
                    border-radius: 3px;
                }
                .ab::-webkit-scrollbar-thumb:hover {
                    background-color: rgba(255, 255, 255, 0.2); /* 悬停时变深 */
                }
                .ab::-webkit-scrollbar-thumb:active {
                        background-color: rgba(255, 255, 255, 0.3);     /* 变成深灰色（颜色最深） */
                }
                .ob:nth-child(-n+3) {  
                    margin-top: 10px;   /* -n+3 表示前3个，假设你一行排3个按钮 */
                }
        .ob{position:relative;background:var(--bg2);border:1.5px solid var(--bdr);border-radius:var(--rs);padding:12px 8px 10px;cursor:pointer;text-align:center;transition:all .25s cubic-bezier(.4,0,.2,1);overflow:hidden;min-height:74px}
        .ob::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--ac-g),transparent);opacity:0;transition:opacity .3s}
        .ob:hover{border-color:rgba(232,164,58,.3);background:var(--card-h);transform:translateY(-1px)}
        .ob:hover::before{opacity:.4}
        .ob.sel{border-color:var(--ac);background:var(--card-h);box-shadow:0 0 14px var(--ac-g)}
        .ob.sel::before{opacity:1}
        .ob .ck{position:absolute;top:5px;right:5px;width:16px;height:16px;border-radius:50%;background:var(--ac);display:flex;align-items:center;justify-content:center;transform:scale(0);transition:transform .3s cubic-bezier(.34,1.56,.64,1);color:var(--bg);font-size:9px;font-weight:900}
        .ob.sel .ck{transform:scale(1)}
        /* ===== FZ-电磁炮坦克：蓄力时长滑块 ===== */
        .ob-fz{cursor:pointer;text-align:center;min-height:96px}
        .ob-fz .fz-charge{margin-top:6px;padding:0 2px;display:flex;flex-direction:column;gap:3px}
        .ob-fz .fz-chb{font-size:9px;color:var(--fg-m);font-weight:600;letter-spacing:.5px}
        .ob-fz .fz-chv{font-size:9px;color:var(--ac);font-weight:700}
        .ob-fz .fz-chin{width:100%;height:4px;accent-color:var(--ac);cursor:pointer;margin-top:2px}
        /* 特殊选择面板：蓄力大滑块（已从坦克卡片移入此处） */
        .fz-chin-lg{width:100%;height:7px;accent-color:var(--ac);cursor:pointer;margin:12px 0 6px}
        .oname{position:relative;z-index:1;font-size:12px;font-weight:600;color:var(--fg-m);transition:color .3s;line-height:1.35}
        .ob.sel .oname{color:var(--fg)}
        /* ===== 四连击伤害测试坦克：专属紫色边框，与正式坦克一眼区分 ===== */
        .ob.ob-test{border-color:var(--test-bdr)}
        .ob.ob-test:hover{border-color:var(--test-bdr-h)}
        .ob.ob-test.sel{border-color:var(--test);box-shadow:0 0 14px var(--test-g)}
        .ob.ob-test.sel::before{background:linear-gradient(135deg,var(--test-g),transparent)}
        .ob.ob-test .oval{color:var(--test)}
        .ob.ob-test .ck{background:var(--test)}
        .oval{position:relative;z-index:1;display:block;font-size:10px;color:var(--ac);margin-top:3px;font-weight:700;letter-spacing:.3px;min-height:15px}
        .oval.pv{color:var(--pc)}
        .oval.cv{color:var(--cr)}
        .oval.hide{visibility:hidden}
        .otag{position:relative;z-index:1;display:block;font-size:9px;color:var(--fg-m);background:rgba(255,255,255,.04);padding:2px 6px;border-radius:4px;margin-top:4px;line-height:1.45;word-break:break-word;overflow-wrap:break-word}
        .input-area{padding:6px 0 2px}
        .input-row{display:flex;align-items:center;gap:10px}
        .num-input{flex:1;background:var(--bg2);border:1.5px solid var(--bdr);border-radius:var(--rs);padding:12px 14px;color:var(--fg);font-family:'Noto Sans SC',sans-serif;font-size:18px;font-weight:700;text-align:center;outline:none;transition:border-color .3s,box-shadow .3s;-moz-appearance:textfield}
        .num-input::-webkit-outer-spin-button,.num-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
        .num-input:focus{border-color:var(--ac);box-shadow:0 0 12px var(--ac-g)}
        .num-input.err{border-color:var(--err);box-shadow:0 0 12px rgba(248,113,113,.2)}
        .input-unit{font-size:13px;color:var(--fg-m);font-weight:500;white-space:nowrap}
        .input-hint{font-size:10px;color:var(--fg-m);margin-top:8px;display:flex;align-items:center;gap:5px}
        .input-hint.err-msg{color:var(--err)}
        .hdot{width:5px;height:5px;border-radius:50%;background:var(--fg-m);flex-shrink:0;transition:background .3s}
        .hdot.err{background:var(--err)}.hdot.ok{background:var(--ok)}
        .input-quick{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
        .quick-btn{background:var(--bg2);border:1px solid var(--bdr);border-radius:6px;padding:5px 10px;color:var(--fg-m);font-family:'Noto Sans SC',sans-serif;font-size:11px;cursor:pointer;transition:all .2s}
        .quick-btn:hover{border-color:rgba(232,164,58,.3);color:var(--fg);background:var(--card-h)}
        .quick-btn.active{border-color:var(--ac);color:var(--ac);background:var(--ac-s)}
        .preview-row{margin-top:10px;padding:8px 12px;background:rgba(232,164,58,.04);border:1px solid rgba(232,164,58,.1);border-radius:8px;display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--fg-m)}
        .preview-row .rv{color:var(--ac);font-weight:700;font-size:13px}
        .dv{height:1px;background:linear-gradient(90deg,transparent,var(--bdr),transparent);margin:16px 0}
        /* 技能等级面板：夹在两按钮之间，宽度跟随按钮区 */
        .skill-lv{margin:14px 0 10px;animation:su .45s ease-out .32s both}
        #skillPreview .preview-row{margin-top:8px}
        /* 技能选择（阿玛达原型-I 的三发炮弹）：只有多项时才显示 */
        .skill-pick{display:none;gap:8px;margin-bottom:12px;flex-wrap:wrap}
        .skill-pick.on{display:flex}
        .skill-pick button{flex:1;min-width:88px;padding:9px 8px;border:1px solid var(--bdr);border-radius:var(--rs);background:var(--card);color:var(--fg-m);font-size:12px;font-weight:700;cursor:pointer;transition:all .2s;white-space:nowrap}
        .skill-pick button.sel{border-color:var(--ac);background:var(--ac-s);color:var(--ac);box-shadow:0 0 12px var(--ac-s)}
        .skill-pick button:active{transform:scale(.97)}
        #skillPreview .preview-row .rv.pv-cd{color:var(--test)}
        .cw{animation:su .45s ease-out .3s both}
        .cb{width:100%;padding:14px;border:none;border-radius:var(--r);background:linear-gradient(135deg,var(--ac),#d4902e);color:var(--bg);font-family:'Noto Sans SC',sans-serif;font-size:15px;font-weight:700;letter-spacing:2px;cursor:pointer;position:relative;overflow:hidden;transition:all .3s}
        .cb::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);transition:left .5s}
        .cb:hover{transform:translateY(-2px);box-shadow:0 8px 28px var(--ac-g),0 2px 8px rgba(0,0,0,.3)}
        .cb:hover::before{left:100%}
        .cb:active{transform:translateY(0)}
        .cb:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none}
        .cb:disabled::before{display:none}
        /* 技能伤害计算按钮：紫色主题，与橙色炮弹按钮区分；无技能时由脚本整块隐藏 */
        #skillBtn{margin-top:10px;background:linear-gradient(135deg,var(--test),#7c5cd6);color:var(--bg)}
        #skillBtn:hover{transform:translateY(-2px);box-shadow:0 8px 28px var(--test-g),0 2px 8px rgba(0,0,0,.3)}
        #skillBtn:disabled{opacity:.35;background:var(--card-h);color:var(--fg-m)}
        .sb{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:16px;animation:su .45s ease-out .35s both}
        .sd{width:9px;height:9px;border-radius:50%;background:var(--bdr);transition:all .4s}
        .sd.f{background:var(--ac);box-shadow:0 0 6px var(--ac-g);transform:scale(1.2)}
        .sl{width:24px;height:2px;background:var(--bdr);border-radius:1px;transition:background .4s}
        .sl.f{background:var(--ac)}
        .st{font-size:11px;color:var(--fg-m);margin-left:6px;transition:color .3s}
        .st.cp{color:var(--ok)}
        .ro{position:fixed;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(8px);z-index:100;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all .35s}
                .ro.sh{opacity:1;visibility:visible}
        .rc{background:var(--card);border:1px solid var(--bdr);border-radius:20px;padding:28px 22px;max-width:420px;width:92%;text-align:left;transform:scale(.85) translateY(20px);transition:transform .4s cubic-bezier(.34,1.56,.64,1);max-height:90vh;overflow-y:auto}
        .ro.sh .rc{transform:scale(1) translateY(0)}
        .rt{text-align:center;margin-bottom:16px}
        .ri{width:48px;height:48px;border-radius:50%;background:rgba(52,211,153,.1);border:2px solid var(--ok);display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px;animation:pi .5s ease .15s both;color:var(--ok);font-size:20px;font-weight:900}
        @keyframes pi{from{transform:scale(0) rotate(-180deg)}to{transform:scale(1) rotate(0)}}
        .rt h2{font-size:20px;font-weight:700;color:var(--fg)}
        .rti{display:flex;align-items:center;gap:12px;background:var(--bg2);border-radius:var(--rs);padding:12px 14px;margin-bottom:14px}
        .rtii{width:36px;height:36px;border-radius:8px;background:var(--ac-s);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--ac);font-size:14px;font-weight:900}
        .rtin{font-size:14px;font-weight:700;color:var(--fg)}
        .rtit{font-size:11px;color:var(--fg-m)}
        .cs{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
        .csi{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--bg2);border-radius:8px;font-size:12px;gap:8px}
        .csl{color:var(--fg-m);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        .csv{color:var(--fg);font-weight:600;flex-shrink:0}
        .csv.reduced{color:var(--err)}
        .csv.pierce-v{color:var(--pc)}
        .csv.crit-v{color:var(--cr)}
        .csv.bonus-v{color:var(--ok)}
        .cdv{height:1px;background:linear-gradient(90deg,transparent,var(--bdr),transparent);margin:2px 0}
        .cf{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:linear-gradient(135deg,var(--ac-s),rgba(232,164,58,.03));border:1px solid rgba(232,164,58,.2);border-radius:var(--rs);margin-bottom:10px;flex-wrap:wrap;gap:4px}
        .cfl{font-size:14px;font-weight:700;color:var(--fg)}
        .cfv{font-size:24px;font-weight:900;color:var(--ac);display:flex;align-items:center;gap:6px}
        .cfv .orig{font-size:14px;font-weight:400;color:var(--fg-m);text-decoration:line-through}
        .crf{padding:12px 16px;background:var(--cr-s);border:1px solid rgba(251,146,60,.15);border-radius:var(--rs);margin-bottom:10px}
        .crf-head{font-size:12px;font-weight:700;color:var(--cr);margin-bottom:8px;letter-spacing:.5px}
        .crf-row{display:flex;align-items:center;justify-content:space-between}
        .crf-row+.crf-row{margin-top:6px;padding-top:6px;border-top:1px solid rgba(251,146,60,.1)}
        .crl{font-size:13px;font-weight:600;color:var(--fg-m)}
        .crv{font-size:18px;font-weight:900;color:var(--cr)}
        .pf{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--pc-s);border:1px solid rgba(56,189,248,.15);border-radius:var(--rs);margin-bottom:14px}
        .pfl{font-size:13px;font-weight:600;color:var(--fg-m)}
                .shield-tip {font-size: 0.5em;color: #ffffff;margin-left: 2px;font-weight: normal;}
                .shield-tip2 {font-size: 0.8em;color: #ffffff;margin-left: 2px;font-weight: normal;}
        .pfv{font-size:20px;font-weight:900;color:var(--pc)}
                .pfv2{font-size:20px;font-weight:900;color: #ffff70}
                .pfv3{font-size:12px;font-weight:900;color:var(--pc)}
                .pfv4{font-size:12px;font-weight:900;color:var(--ac)}
        .xbtn{width:100%;padding:11px;margin-top:14px;border:1.5px solid var(--bdr);border-radius:var(--rs);background:transparent;color:var(--fg);font-family:'Noto Sans SC',sans-serif;font-size:13px;font-weight:500;cursor:pointer;transition:all .25s}
        .xbtn:hover{border-color:var(--fg-m);background:var(--card-h)}
        .tt{position:fixed;top:64px;left:50%;transform:translateX(-50%) translateY(-180px);background:var(--card);border:1px solid rgba(248,113,113,.3);color:var(--err);padding:10px 20px;border-radius:var(--rs);font-size:12px;font-weight:500;z-index:1000000;transition:transform .4s cubic-bezier(.34,1.56,.64,1);display:flex;align-items:center;gap:6px;box-shadow:0 8px 24px rgba(0,0,0,.4)}
        .tt.sh{transform:translateX(-50%) translateY(0)}
        .locked-msg{grid-column:1/-1;text-align:center;color:var(--fg-m);font-size:12px;padding:14px 0}

        /* ===== 结果弹窗内4段可展开手风琴 ===== */
        .r-acc{margin-top:4px}
        .r-ai{animation:none}
        .r-ai .ah{padding:14px 16px}
        .r-ai .aht{font-size:14px;font-weight:700}
        .r-ai .ahs{font-size:11px}
        /* 覆盖原有 max-height:450px，使结果弹窗内手风琴可容纳更多内容 */
        .r-ai.open .ab{max-height:2000px;padding:0 16px 16px}
        /* 手风琴内部最后一项去除底部间距 */
        .r-ai .ab>*:last-child{margin-bottom:0px}
        .r-ai .cf{margin-bottom:10px}
        .r-ai .pf{margin-bottom:10px}
        .r-ai .crf{margin-bottom:0}
        /* 造成的伤害 + 溅射伤害 分组样式 */
        .dmg-group{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:10px;margin-bottom:10px}
        .dmg-group .cf{margin-bottom:8px}
        .dmg-group .cf:last-child{margin-bottom:0}
        .dmg-group #multiHitDetails{margin-bottom:8px}
        .dmg-group #multiHitDetails:empty{margin-bottom:0}
        /* 5种多段明细行统一样式：第i次伤害/溅射/暴击/穿甲/吸回血 */
        .hit-row{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:8px;margin-bottom:8px;flex-wrap:wrap;gap:4px}
        .hit-row:last-child{margin-bottom:0}
        .hit-row .cfl{font-size:12px;color:var(--fg-m)}
        .hit-row .cfv{font-size:14px;font-weight:700;color:var(--ac)}
        /* 5个明细容器统一顶端留白 */
        #multiHitDetails,#multiSputterDetails,#multiCritDetails,#multiPierceDetails,#multiVampireDetails{margin-top:10px}
        #multiHitDetails:empty,#multiSputterDetails:empty,#multiCritDetails:empty,#multiPierceDetails:empty,#multiVampireDetails:empty{margin-top:0}
        /* dmg-group 内的明细容器不需要额外顶端留白（分组已有padding） */
        .dmg-group #multiHitDetails,.dmg-group #multiSputterDetails{margin-top:8px}
        @media(max-width:480px){.hd h1{font-size:24px}.ob{padding:10px 6px 8px;min-height:66px}.oname{font-size:11px}.oval{font-size:9px}.otag{font-size:8px;padding:1px 4px}.num-input{font-size:16px;padding:10px 12px}.rc{padding:22px 16px}.cfv{font-size:20px}.crv{font-size:16px}.pfv{font-size:18px}.pfv2{font-size:18px}}
        @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
    
/*
 * ============================================================
 * 追加样式：弹窗开关动画框架
 * ============================================================
 * 设计说明：
 *   原版的公告弹窗(.modal-overlay)只有 display:none/flex 的瞬切，
 *   没有过渡；而计算结果弹窗(.ro)已有一套成熟的「遮罩淡入 +
 *   内容缩放回弹」动画。这里把结果弹窗的动画语言抽象成通用
 *   机制，让公告弹窗复用，全站观感统一。
 *
 *   关键点：动画由 opacity + visibility 驱动，而不是 display。
 *   display:none 会立即切断 transition，关闭时动画播不完；
 *   visibility 可参与过渡，因此能实现完整的淡出效果，
 *   且不需要 JS 计时器在动画结束后再改 display。
 * ============================================================ */

/* ---------- 通用弹窗遮罩：淡入淡出 ---------- */
.modal-overlay {
    display: flex !important;        /* 常驻布局，改由 visibility 控制显隐 */
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility .35s ease;
    pointer-events: none;            /* 隐藏时不拦截鼠标事件 */
}

/* ---------- 通用弹窗内容：缩放回弹（与 .rc 一致） ---------- */
.modal-overlay > .modal-box,
.modal-overlay > .announcement-box {
    transform: scale(.85) translateY(20px);
    transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}

/* ---------- 打开态：由 JS 添加 .sh ---------- */
.modal-overlay.sh {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.modal-overlay.sh > .modal-box,
.modal-overlay.sh > .announcement-box {
    transform: scale(1) translateY(0);
}

/* ---------- 公告按钮点击反馈 ---------- */
.announcement-float-btn:active {
    transform: translateY(0) scale(.96);
}

/* ---------- 尊重系统「减少动态效果」偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
    .modal-overlay,
    .modal-overlay > .modal-box,
    .modal-overlay > .announcement-box {
        transition-duration: .01ms !important;
    }
}

/* ============================================================
 * 技能计算结果面板（紫色主题，与橙色炮弹结果面板视觉区分）
 * 结构：主数值大卡 → 参数标签条 → 计算链条 → 动态分组卡片
 * ============================================================ */
.sk-ovl{background:rgba(10,8,22,.82)}
.sk-card{border-color:var(--test-bdr);box-shadow:0 24px 70px rgba(0,0,0,.6),0 0 0 1px rgba(167,139,250,.12) inset}

/* 头部 */
.sk-head{display:flex;align-items:center;gap:10px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid rgba(167,139,250,.18)}
.sk-head-ic{width:34px;height:34px;border-radius:10px;background:var(--test-s);border:1px solid var(--test-bdr);display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--test)}
.sk-head h2{font-size:17px;font-weight:700;color:var(--fg);letter-spacing:.3px}

/* 主数值大卡 */
.sk-hero{position:relative;overflow:hidden;border-radius:16px;padding:22px 20px;margin-bottom:12px;
    background:linear-gradient(135deg,rgba(167,139,250,.16),rgba(124,92,214,.05));
    border:1px solid rgba(167,139,250,.3)}
.sk-hero::after{content:'';position:absolute;top:-60%;right:-15%;width:180px;height:180px;border-radius:50%;
    background:radial-gradient(circle,rgba(167,139,250,.18),transparent 70%);pointer-events:none}
.sk-hero-lb{font-size:12px;color:var(--test);font-weight:700;letter-spacing:1.5px;margin-bottom:6px}
.sk-hero-num{display:flex;align-items:baseline;gap:4px;font-size:46px;font-weight:900;color:#fff;line-height:1;letter-spacing:-1px}
.sk-hero-num i{font-style:normal;font-size:16px;font-weight:700;color:var(--test)}
.sk-hero-tags{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.sk-tag{font-size:10px;font-weight:700;padding:4px 10px;border-radius:20px;letter-spacing:.3px}
.sk-tag.up{background:rgba(255,255,112,.12);color:#ffff70;border:1px solid rgba(255,255,112,.25)}
.sk-tag.heal{background:rgba(52,211,153,.12);color:var(--ok);border:1px solid rgba(52,211,153,.28)}
.sk-tag.cd{background:rgba(56,189,248,.1);color:var(--pc);border:1px solid rgba(56,189,248,.22)}

/* 参数标签条 */
.sk-meta{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:8px;margin-bottom:12px}
.sk-mi{background:var(--bg2);border:1px solid var(--bdr);border-radius:10px;padding:9px 11px;display:flex;flex-direction:column;gap:2px;min-width:0}
.sk-mi b{font-size:12px;font-weight:700;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sk-mi span{font-size:10px;color:var(--fg-m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 计算链条 */
.sk-chain{display:flex;flex-wrap:wrap;gap:6px;align-items:stretch;margin-bottom:14px;padding:12px;
    background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);border-radius:12px}
.sk-node{flex:1 1 auto;min-width:96px;background:var(--bg2);border:1px solid var(--bdr);border-radius:8px;
    padding:7px 10px;display:flex;flex-direction:column;gap:3px}
.sk-node span{font-size:9px;color:var(--fg-m);letter-spacing:.2px;white-space:nowrap}
.sk-node b{font-size:12px;font-weight:700;color:var(--fg);line-height:1.35}
.sk-node b.reduced{color:var(--err)}
.sk-node b.pfv2{font-size:12px;color:#ffff70}
.sk-node b.pfv3{font-size:12px;color:var(--pc)}
.sk-node b.pfv4{font-size:12px;color:var(--ac)}
.sk-arrow{display:flex;align-items:center;color:var(--test);font-size:12px;opacity:.6;flex-shrink:0}

/* 动态分组卡片 */
.sk-groups{display:flex;flex-direction:column;gap:8px}
.sk-g{border:1px solid var(--bdr);border-radius:12px;background:var(--bg2);overflow:hidden;transition:border-color .3s,box-shadow .3s}
.sk-g.open{border-color:var(--test-bdr);box-shadow:0 0 16px rgba(167,139,250,.12)}
.sk-ah{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;cursor:pointer;user-select:none;transition:background .2s}
.sk-ah:hover{background:var(--card-h)}
.sk-ah-t{font-size:13px;font-weight:700;color:var(--fg)}
.sk-ah-v{font-size:13px;font-weight:900;color:var(--test);flex-shrink:0}
.sk-g.open .sk-ah-v{color:#fff}
.sk-ab{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.4,0,.2,1),padding .35s cubic-bezier(.4,0,.2,1);padding:0 14px}
.sk-g.open .sk-ab{max-height:900px;padding:0 14px 12px}
.sk-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 11px;
    background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.055);border-radius:8px;margin-bottom:6px;flex-wrap:wrap}
.sk-row:last-child{margin-bottom:0}
/* 技能：逐发明细（可折叠） */
.sk-hits{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.sk-hit{border:1px solid rgba(255,255,255,.06);border-radius:8px;background:rgba(255,255,255,.02);padding:2px 4px}
.sk-hit>summary{list-style:none;cursor:pointer;padding:7px 8px;font-size:11px;font-weight:700;color:var(--fg-m);display:flex;align-items:center;justify-content:space-between;gap:8px}
.sk-hit>summary::-webkit-details-marker{display:none}
.sk-hit>summary::after{content:'▾';opacity:.55;transition:transform .2s;font-size:10px}
.sk-hit[open]>summary::after{transform:rotate(180deg)}
.sk-hit .sk-row{margin:2px 6px 6px}
.sk-hit .sk-row:last-child{margin-bottom:6px}
.sk-row span{font-size:11px;color:var(--fg-m)}
.sk-row em{font-style:normal;font-size:13px;font-weight:700;color:var(--fg)}
.sk-row em .pfv2{font-size:13px;color:#ffff70}
.sk-row em .pfv3{font-size:13px;color:var(--pc)}
.sk-row em .pfv4{font-size:13px;color:var(--ac)}
.sk-row em .reduced{color:var(--err)}

/* 关闭按钮：紫色调 */
.sk-card .xbtn{border-color:rgba(167,139,250,.28);color:var(--test)}
.sk-card .xbtn:hover{border-color:var(--test);background:var(--test-s)}

@media (max-width:480px){
    .sk-hero-num{font-size:38px}
    .sk-meta{grid-template-columns:1fr 1fr}
    .sk-mi:first-child{grid-column:1/-1}
    .sk-node{min-width:84px}
}
@media (prefers-reduced-motion:reduce){
    .sk-ab,.sk-g{transition-duration:.01ms!important}
}