/* =========================================
       【最终修正】队伍详情页布局
       ========================================= */
    
    /* 1. 强制详情面板占满高度，并垂直排列 */
    #roster-detail-view {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important; 
        justify-content: flex-start !important;
        position: relative !important;
        padding-bottom: 10px !important;
        overflow: hidden !important; /* 防止双滚动条 */
    }

    /* 如果内容太多，让中间区域滚动，保证底部按钮始终可见 */
    #roster-detail-view .stats-container {
        flex: 1;
        overflow-y: auto;
        margin-bottom: 10px;
    }

    /* 3. 底部操作栏：绝对推到底部 */
    .roster-bottom-actions {
        margin-top: auto !important; /* 核心：推到底部 */
        width: 100%;
        flex-shrink: 0;
        padding-top: 10px;
        border-top: 1px solid #333;
        display: flex;
        flex-direction: column;
        gap: 8px;
        background: #1a1a1a; /* 防止背景透视 */
        z-index: 50;
    }

    /* 4. 底部大红关闭按钮 */
    .btn-close-big {
        width: 100%; height: 48px !important;
        background: #b71c1c !important; color: #fff !important;
        font-size: 18px !important; font-weight: bold;
        border: 1px solid #d32f2f !important; border-radius: 6px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    }

    /* 5. 左上角微型释放按钮 (灰色小手) */
    #btn-release-tiny {
        position: absolute !important; 
        top: 8px !important; left: 8px !important;
        width: 30px !important; height: 30px !important;
        background: rgba(0,0,0,0.3) !important; 
        color: #999 !important;
        border: 1px solid #444 !important; border-radius: 4px;
        font-size: 16px !important; padding: 0 !important;
        display: flex; justify-content: center; align-items: center;
        z-index: 100; cursor: pointer;
    }
    #btn-release-tiny:hover { color: #fff !important; background: #d32f2f !important; }

    /* 6. 列表中的出战/休息按钮 */
    .btn-status-toggle {
        margin-left: auto;
        width: 50px !important; height: 28px !important;
        line-height: 28px !important; padding: 0 !important;
        font-size: 12px !important; border-radius: 4px;
        border: none;
    }

        .detail-header { display: flex; flex-direction: column; align-items: center; margin-bottom: 15px; width: 100%; text-align: center;}
        #detail-visual { 
            width: 70px; height: 70px; font-size: 50px; margin-bottom: 5px; 
            display:flex; justify-content:center; align-items:center;
        }
        #detail-visual img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; border: 2px solid #555;}
        .stats-container { width: 100%; max-width: 280px; display: flex; flex-direction: column; gap: 0; }
        .core-stats-grid { display: flex; flex-direction: column; width: 100%; }
        .stat-row { display: flex; justify-content: space-between; width: 100%; padding: 6px 0; border-bottom: 1px solid #333; font-size: 13px;}
        .stat-val { font-weight: bold; color: var(--highlight); }
        .exp-bar-bg { width: 100%; height: 5px; background: #222; border-radius: 2px; margin-top: 3px; overflow: hidden; }
        .exp-bar-fill { height: 100%; background: #2196f3; width: 0%; }
        .detail-btns-row { display: flex; gap: 5px; width: 100%; margin-top: 8px; }
        .detail-btns-row button { flex: 1; font-size: 12px; padding: 8px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

        /* 【核心修改】武功标签：字体更小(9px)，左右间距拉大(8px) */
        .skill-tag { 
            display: inline-block; 
            background: #333; border: 1px solid #555; 
            border-radius: 3px; 
            padding: 2px 8px; /* 拉大 */
            margin: 3px 4px;
            font-size: 12px;   /* 变小 */
            color: #ddd; cursor: pointer; transition: 0.2s; user-select: none;
        }
        .skill-tag:active { transform: scale(0.95); background: #444; }

        #skill-modal { z-index: 4000; background: rgba(0,0,0,0.85); }
        .skill-detail-box {
            background: #222; border: 1px solid #555; border-radius: 8px;
            width: 90%; max-width: 340px; padding: 15px;
            display: flex; flex-direction: column; align-items: center;
            box-shadow: 0 0 20px rgba(0,0,0,0.8);
        }
        .skill-title {
            font-size: 18px; font-weight: bold; color: var(--highlight); margin-bottom: 10px;
            display: flex; align-items: center; gap: 8px;
        }
        .skill-table { width: 100%; border-collapse: collapse; margin-bottom: 15px; font-size: 12px; }
        .skill-table th { color: #888; font-weight: normal; padding: 4px 2px; border-bottom: 1px solid #444; width: 35%; }
        .skill-table td { color: #eee; padding: 8px 2px; text-align: center; border-bottom: 1px solid #333; font-weight: bold; }
        .val-cost { color: #2196f3; } .val-bonus { color: #66bb6a; } .val-penalty { color: #ef5350; } 
        .skill-desc-box {
            width: 100%; background: #111; border: 1px solid #333; border-radius: 4px;
            padding: 10px; font-size: 12px; color: #bbb; line-height: 1.6; text-align: left; margin-bottom: 15px;
        }
        .skill-popup {
            position: absolute; top: -45px; left: 50%; transform: translateX(-50%);
            font-size: 20px; color: #fff; font-weight: bold;
            background: rgba(0,0,0,0.6); 
            padding: 4px 10px; border-radius: 20px; border: 1px solid var(--highlight);
            animation: skill-pop-anim 1.5s forwards; z-index: 999; white-space: nowrap;
            text-shadow: 0 0 5px var(--highlight);
            display: flex; align-items: center; gap: 5px; 
        }
        .skill-weak-tag {
            font-size: 10px; background: #555; color: #bbb; 
            border: 1px solid #777; padding: 1px 4px; border-radius: 4px;
            font-weight: normal; text-shadow: none;
        }

        /* --- 商店商品卡片样式 --- */
    .shop-item-card {
        background: #252525; border: 1px solid #444; border-radius: 6px;
        padding: 10px; display: flex; align-items: center; gap: 10px;
        transition: 0.2s; position: relative; overflow: hidden;
    }
    .shop-item-card:hover { border-color: #fbc02d; background: #2a2a2a; }
    
    .shop-icon {
        font-size: 36px; width: 50px; height: 50px; 
        background: #1a1a1a; border-radius: 4px; border: 1px solid #333;
        display:flex; justify-content:center; align-items:center; flex-shrink:0;
    }
    
    .shop-info { flex: 1; display:flex; flex-direction:column; justify-content:center; }
    .shop-name { font-weight:bold; color:#eee; font-size:15px; margin-bottom:4px; }
    .shop-desc { font-size:11px; color:#888; line-height:1.2; }
    
    .shop-buy-btn {
        background: #2e7d32; color: #fff; border: none; border-radius: 4px;
        padding: 6px 12px; font-size: 13px; font-weight: bold; cursor: pointer;
        display: flex; flex-direction: column; align-items: center; min-width: 70px;
    }
    .shop-buy-btn:active { transform: scale(0.95); }
    .shop-buy-btn.disabled { background: #444; color: #777; cursor: not-allowed; filter: grayscale(1); }

    /* 折扣标签 */
    .discount-tag {
        position: absolute; top: 0; left: 0;
        background: #d32f2f; color: #fff; font-size: 10px;
        padding: 2px 6px; border-radius: 4px 0 4px 0; font-weight: bold;
        box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    }
    
    .price-original { text-decoration: line-through; color: #888; font-size: 10px; margin-bottom: -2px;}
    .price-current { color: #FFD700; font-size: 13px; }

        /* --- ================================== --- */
        /* --- 移动端适配 (独立覆盖) --- */
        /* --- ================================== --- */
        @media (max-width: 600px) {
            #game-app { height: 100%; width: 100%; border: none; border-radius: 0; max-height: none; margin: 0; }
            header { padding: 5px 10px; height: 40px; }
            .header-title { font-size: 15px; }
            
            /* 1. 战斗区 */
            #battle-stage { 
                padding: 30px 5px 0px 5px; 
                flex: 1; min-height: 0; 
            }
            .side-container { 
                width: 40%; /* 【修正】宽度40%，中间留20%空隙 */
                gap: 2px; 
                flex-direction: column; /* 竖排 */
                align-content: center;  
                height: 100%;
                /* 【关键】把高度设为 360px (4个人刚好能放下，5个人放不下)，迫使第5个换行 */
                max-height: 360px; 
            }
            
            /* 我方：不换行 (死也站一列) */
            #player-sprites {
                align-content: flex-end; 
                flex-wrap: nowrap; 
                max-height: none; /* 高度不限，保证4个人能挤在一列 */
            }
            
            /* 敌方：允许换行 (5个时会变成 4+1) */
            #enemy-sprites { 
                align-content: flex-start; 
                flex-wrap: wrap; 
            }
            
            .sprite { 
                width: 55px; height: 85px; 
                margin-bottom: 4px; 
                margin-right: 0; margin-left: 0;
            }
            #enemy-sprites .sprite { margin-right: 4px; } /* 换列间距 */
            
            .sprite-visual { width: 45px; height: 45px; font-size: 32px; }
            .sprite-info { font-size: 9px; min-width: 50px; padding: 0 2px; }
            .bars-container { width: 40px; }
            
            /* 2. UI面板 */
            #ui-panel { 
                height: 260px; 
                flex-shrink: 0;
                flex-direction: column; 
                padding: 5px 10px; 
                overflow: hidden;
                z-index: 500;
            }
            #actions-box { 
                width: 100%; height: auto; margin-bottom: 0; flex-shrink: 0;
                order: 2; 
            }
            #current-actor-name { margin-top: 0; padding-top: 2px; margin-bottom: 0; font-size: 10px; color: #666; } 
            
            /* 3. 日志框 (底部无留白，多显示一行) */
            #log-box { 
                flex: 1; min-height: 0; font-size: 11px; overflow-y: auto; 
                order: 1; 
                margin-bottom: 0; 
                border: 1px solid #333;
                border-bottom: none; 
            }
            
            .action-row button, #idle-controls button {
                height: 42px !important; 
                font-size: 15px !important;
                padding: 0 !important;
            }
            .btn-manage { height: 35px !important; font-size: 13px !important;}
            
            /* 弹窗适配 */
            #roster-modal { flex-direction: column; overflow: hidden; }
            .roster-detail-panel { 
                order: 1; width: 100%; flex: 0 0 auto; height: auto; max-height: none; 
                padding: 10px 15px; border-bottom: 1px solid #333; overflow: visible; 
            }
            .detail-header { flex-direction: row; justify-content: center; gap: 15px; margin-bottom: 5px; text-align: left;}
            #detail-visual { margin: 0; width: 50px; height: 50px; font-size: 40px; }
            .detail-info h3 { margin: 0 0 2px 0; font-size: 16px; }
            .detail-info div { font-size: 11px; }
            .stats-container { max-width: 100%; }
            .core-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 20px; margin-bottom: 5px; width: 100%; }
            .core-stats-grid .stat-row { border-bottom: 1px solid #222; padding: 2px 0; font-size: 12px; }
            .roster-list-panel { order: 2; width: 100%; flex: 1 1 auto; border-right: none; overflow-y: auto; padding-bottom: 30px; }
            .roster-grid { grid-template-columns: 1fr; gap: 8px; padding: 5px;}
            .roster-card { padding: 8px; min-height: 45px;}
        }

        /* --- 阵法专属样式 --- */
        .skill-tag.formation {
            background: #263238; /* 深蓝灰底 */
            border-color: #90caf9; /* 亮蓝边框 */
            color: #90caf9;
            box-shadow: 0 0 5px #2196f3;
        }

        /* 格挡特效：金星闪烁 */
        .block-spark {
            position: absolute; top: 20%; left: 50%; transform: translate(-50%, -50%);
            font-size: 40px; z-index: 500; pointer-events: none;
            color: #fff; text-shadow: 0 0 10px gold, 0 0 20px yellow;
            animation: spark-anim 0.4s ease-out forwards;
        }
        @keyframes spark-anim {
            0% { transform: translate(-50%, -50%) scale(0.5) rotate(0deg); opacity: 1; }
            50% { transform: translate(-50%, -50%) scale(1.5) rotate(45deg); opacity: 1; }
            100% { transform: translate(-50%, -50%) scale(2.0) rotate(90deg); opacity: 0; }
        }

        /* 护援动作：迅速位移 */
        .anim-intercept { animation: intercept-move 0.3s ease-out; }
        @keyframes intercept-move {
            0% { transform: translateX(0); }
            50% { transform: translateX(30px) scale(1.1); filter: brightness(1.5); }
            100% { transform: translateX(0); }
        }

    /* =================================================================
       【最终完美版】手机端布局 (顶部详情 - 中间列表 - 底部固定按钮)
       ================================================================= */
    @media (max-width: 600px) {
        
        /* 1. 主容器：垂直排列 */
        #roster-modal {
            flex-direction: column !important;
            overflow: hidden !important;
        }

        /* 2. 上半部分：角色详情 (自动高度，最多占屏幕 45%) */
        #roster-detail-view {
            width: 100% !important;
            height: auto !important;       /* 高度随内容自动撑开 */
            max-height: 45vh !important;   /* 上限 45%，留空间给列表 */
            flex: 0 0 auto !important;     /* 不许拉伸 */
            order: 1 !important;           /* 排在第一位 */
            
            border-bottom: 1px solid #444;
            padding: 5px 10px !important;
            background: #202020 !important;
            overflow-y: auto !important;   /* 内容多了内部滚动 */
            position: static !important;   /* 解除定位，让子元素相对于窗口定位 */
        }

        /* 3. 中间部分：队伍列表 (填满剩余空间) */
        .roster-list-panel {
            width: 100% !important;
            flex: 1 1 auto !important;     /* 霸占剩余所有高度 */
            order: 2 !important;           /* 排在第二位 */
            
            border-right: none !important;
            padding: 5px 10px !important;
            background: #151515 !important;
            
            /* 【关键】底部留出巨大空隙，防止内容被固定按钮遮挡 */
            padding-bottom: 140px !important; 
        }

        /* 4. 底部部分：操作按钮 (固定在屏幕最底端) */
        .roster-bottom-actions {
            position: fixed !important;    /* 【核心】钉死在屏幕底部 */
            bottom: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: auto !important;
            z-index: 5000 !important;      /* 浮在最上层 */
            
            background: #1a1a1a !important; /* 不透明背景，遮住背后的列表 */
            border-top: 2px solid #333;
            padding: 10px 15px !important;
            box-shadow: 0 -5px 20px rgba(0,0,0,0.8); /* 阴影分割线 */
            
            display: flex !important;
            flex-direction: column !important;
            gap: 8px !important;
        }

        /* 按钮微调 */
        .btn-close-big { height: 45px !important; font-size: 16px !important; }
        
        /* 隐藏详情页里可能残留的旧样式 */
        .detail-header { padding-top: 10px !important; margin-bottom: 5px !important; }
    }

    /* =======================================================
       【UI 微调补丁】修复置顶按钮与状态按钮
       ======================================================= */
    
    /* 1. 修复头部置顶按钮 (强制变小) */
    #btn-header-pin {
        width: 32px !important;        /* 固定宽度 */
        height: 26px !important;       /* 固定高度 */
        flex: 0 0 auto !important;     /* 禁止拉伸 */
        padding: 0 !important;         /* 去掉内边距 */
        margin: 0 8px !important;      /* 左右留点缝隙 */
        font-size: 14px !important;
        line-height: 26px !important;
        border-radius: 4px !important;
        display: inline-flex !important;
        justify-content: center;
        align-items: center;
    }

    /* 2. 修复列表中状态按钮 (更窄、颜色修正) */
    .btn-status-toggle {
        width: 48px !important;        /* 强制变窄 */
        height: 24px !important;       /* 稍微矮一点 */
        line-height: 24px !important;
        padding: 0 !important;
        font-size: 10px !important;    /* 字号调小以容纳3个字 */
        border-radius: 3px !important;
        margin-left: auto !important;  /* 靠右对齐 */
        flex-shrink: 0 !important;     /* 禁止被挤压 */
        border: none !important;
        box-shadow: none !important;
    }

    /* 3. 强制定义状态颜色 (防止变白) */
    /* 已出战：深绿色背景，白色字 */
    .status-deployed {
        background-color: #2e7d32 !important; 
        color: #fff !important;
        border: 1px solid #1b5e20 !important;
    }
    /* 休息中：深灰色背景，灰色字 (低调处理) */
    .status-rest {
        background-color: #424242 !important; 
        color: #aaa !important;
        border: 1px solid #666 !important;
    }
    /* 重伤：暗红色 */
    .status-injured {
        background-color: #3e2723 !important;
        color: #ef5350 !important;
        border: 1px solid #d32f2f !important;
    }
    /* =================================================================
       【UI 最终精修版】固定高度、紧凑布局、对齐按钮
       ================================================================= */
    
    /* 1. 技能栏固定高度 (解决跳动问题) */
    #detail-skills-box {
        /* 标题约20px + 每行技能约25px * 2 = 70px，留10px余量 */
        height: 80px !important;       
        min-height: 80px !important;
        max-height: 80px !important;
        
        border-top: 1px solid #333;
        margin-top: 5px !important;
        padding-top: 2px !important;
        flex-shrink: 0 !important;     
        background: #252525;           
        border-radius: 4px;
    }

    /* 2. 状态切换按钮 (已出战/休息中) - 极致窄 & 固定 */
    .btn-status-toggle {
        width: 80px !important;        /* 锁定宽度 42px */
        min-width: 80px !important;    /* 此时此刻，谁也不能改变我 */
        max-width: 80px !important;
        height: 28px !important;
        line-height: 28px !important;
        padding: 0 !important;
        font-size: 13px !important;    /* 字号极小 */
        margin-left: 5px !important;
        flex-shrink: 0 !important;
        border-radius: 2px !important;
    }

    /* 3. 手机端布局紧凑化 (去除多余黑边) */
    @media (max-width: 600px) {
        
        /* 列表面板：大幅减少内边距 */
        .roster-list-panel {
            padding: 2px 5px !important;   /* 上下2px，左右5px */
            padding-bottom: 90px !important; /* 底部留白减小 (原140) */
            background: #151515 !important;
        }

        /* 列表滚动区：紧贴顶部 */
        #roster-grid {
            padding-top: 2px !important;
            padding-bottom: 20px !important;
            gap: 4px !important; /* 卡片间距变小 */
        }

        /* 头部栏：紧凑排列 */
        .roster-header {
            margin-bottom: 2px !important;
            padding: 4px 0 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            height: 30px !important; /* 固定头部高度 */
        }

        /* 头部标题 */
        .roster-header span {
            font-size: 11px !important;
            flex: 1; /* 占据左侧空间 */
        }

        /* --- 头部按钮对齐 (置顶 vs 排序) --- */
        
        /* 置顶按钮：拉宽，图标变小 */
        #btn-header-pin {
            width: 70px !important;      /* 和排序按钮一样宽 */
            height: 22px !important;
            line-height: 20px !important;
            font-size: 12px !important;  /* 图标变小 */
            margin: 0 5px !important;    /* 居中 */
            padding: 0 !important;
            border-radius: 3px !important;
            flex: 0 0 auto !important;   /* 不许伸缩 */
        }

        /* 排序下拉框：对齐样式 */
        #roster-sort-select {
            width: 70px !important;      /* 宽度对齐 */
            height: 22px !important;
            font-size: 11px !important;
            padding: 0 2px !important;
            border-radius: 3px !important;
            flex: 0 0 auto !important;
        }

        /* 详情页上半部：稍微收缩高度，留更多给列表 */
        #roster-detail-view {
            max-height: 42vh !important; /* 从 45vh 减小到 42vh */
            padding: 5px !important;
        }
        
        /* 详情页内部间距压缩 */
        .stat-row { padding: 3px 0 !important; font-size: 12px !important; }
        .detail-header { margin-bottom: 2px !important; padding-top: 5px !important; }
        #detail-visual { width: 50px !important; height: 50px !important; font-size: 30px !important; }
    }
    /* =================================================================
       【精准修复】队伍界面布局 (同时适配 PC 和 手机)
       ================================================================= */
    
    /* 1. 基础容器 */
    #roster-modal {
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.95); z-index: 3000;
        display: none; /* JS控制 */
        overflow: hidden;
    }

    /* 2. 详情页 (左侧/上侧) */
    .roster-detail-panel {
        background: #202020;
        display: flex; flex-direction: column;
        position: relative; 
        box-sizing: border-box;
        z-index: 10;
        /* 默认 PC 样式：固定宽度侧边栏 */
        width: 360px; 
        height: 100%; 
        border-right: 1px solid #444;
    }

    /* 3. 列表页 (右侧/下侧) */
    .roster-list-panel {
        background: #151515;
        display: flex; flex-direction: column;
        overflow: hidden;
        padding: 10px;
        /* 默认 PC 样式：填满剩余空间 */
        flex: 1; 
        height: 100%;
    }

    /* PC 端列表显示：双列更美观 */
    #roster-grid {
        display: grid;
        grid-template-columns: 1fr 1fr; 
        gap: 10px;
        overflow-y: auto;
        padding-bottom: 20px;
        align-content: start;
    }

    /* 卡片样式 */
    .roster-card {
        background: #2a2a2a; padding: 6px; border-radius: 4px; border: 1px solid #333;
        display: flex; align-items: center; gap: 8px; position: relative;
        cursor: pointer; min-height: 60px;
    }
    .roster-card.active-member { border-color: #2e7d32; background: #1b3320; }
    .roster-card.viewing { border-color: #FFD700; box-shadow: 0 0 5px rgba(255, 215, 0, 0.3); }
    .roster-card.injured-member { border-color: #d32f2f; opacity: 0.7; }

    /* 4. 底部按钮区 (新版) */
    .roster-bottom-actions {
        margin-top: auto; 
        padding: 10px 15px;
        background: #1a1a1a;
        border-top: 1px solid #333;
        display: flex; flex-direction: column; gap: 8px;
    }
    .btn-close-big {
        width: 100%; height: 40px; 
        background: #b71c1c; color: white; border: none; font-weight: bold; 
        border-radius: 4px; font-size: 16px; cursor: pointer;
    }

    /* --- 手机端 专属覆盖 (宽度小于600px时生效) --- */
    @media (max-width: 600px) {
        #roster-modal { flex-direction: column; } /* 改为上下排列 */

        /* 上半截：详情 (固定高度 60%) */
        .roster-detail-panel {
            width: 100%; /* 占满宽 */
            height: 60vh; /* 占 60% 高 */
            border-right: none;
            border-bottom: 2px solid #444;
        }
        
        /* 详情页中间内容滚动，防止挤压底部按钮 */
        .stats-container {
            flex: 1; overflow-y: auto; padding: 0 5px;
        }

        /* 下半截：列表 (自动填满剩余) */
        .roster-list-panel {
            width: 100%;
            height: auto;
            flex: 1; 
        }
        
        /* 手机列表单列显示 */
        #roster-grid {
            grid-template-columns: 1fr; 
            gap: 6px;
        }
    }
    /* =================================================================
       【UI 微调补丁 V4】详情页边距 & 卡片布局优化
       ================================================================= */
    
    /* 1. 详情页：增加内边距，防止内容贴边 */
    #roster-detail-view {
        padding: 20px !important; /* 上下左右都留出空间 */
    }
    /* 确保中间滚动区也有呼吸感 */
    #roster-detail-view .stats-container {
        padding: 5px 10px !important;
    }

    /* 2. 列表卡片：紧凑优化 */
    .roster-card {
        padding: 8px 12px !important; /* 卡片内部宽松一点 */
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important; /* 两端对齐 */
    }
    
    /* 名字区域：让名字、图钉、排序数值在一行 */
    .card-main-info {
        flex: 1;
        display: flex; 
        flex-direction: column; 
        justify-content: center;
        overflow: hidden;
    }
    
    .card-top-row {
        display: flex; 
        align-items: center; 
        gap: 6px; /* 名字和图钉的间距 */
        margin-bottom: 4px;
    }

    /* 图钉样式：放名字旁边 */
    .pin-icon {
        font-size: 14px !important;
        color: #FFD700 !important;
        transform: rotate(45deg); /* 稍微歪一点好看 */
    }
    /* =================================================================
       【UI 微调补丁 V5】详情页边距修正 (区分 PC/手机)
       ================================================================= */
    
    /* 1. PC 端：宽敞边距 (只有屏幕大于 600px 时生效) */
    @media (min-width: 601px) {
        #roster-detail-view {
            padding: 50px !important; /* PC端：四周留白，呼吸感 */
        }
        /* PC端中间内容区也稍微宽松点 */
        #roster-detail-view .stats-container {
            padding: 5px 10px !important;
        }
    }

    /* 2. 手机端：紧凑边距 (只有屏幕小于等于 600px 时生效) */
    @media (max-width: 600px) {
        #roster-detail-view {
            padding: 0px 5px !important; /* 手机端：紧凑，省空间 */
        }
        
        /* 顺便修复列表面板的边距 */
        .roster-list-panel {
            padding: 5px !important;
        }
    }
    /* =================================================================
       【UI 调整补丁 V6】PC端详情页大幅加宽 & 布局优化
       ================================================================= */
    
    /* 1. PC 端布局调整 (宽度 > 600px) */
    @media (min-width: 601px) {
        /* 左侧详情页：加宽到 460px (原360px) */
        #roster-detail-view {
            width: 460px !important;       /* 强制加宽 */
            flex: 0 0 460px !important;    /* 锁死宽度 */
            padding: 25px !important;      /* 内部边距再大一点，更舒展 */
        }
        
        /* 空状态占位也要同步加宽 */
        #roster-empty-view {
            width: 460px !important;
            flex: 0 0 460px !important;
        }

        /* 优化详情页内的文字大小，利用大空间 */
        #roster-detail-view .stat-row {
            font-size: 15px !important;    /* 属性字号变大 */
            padding: 8px 0 !important;     /* 行间距变宽 */
        }
        
        /* 技能栏也适度增高 */
        #detail-skills-box {
            height: 100px !important;      /* PC端显示更多技能行 */
        }
    }
    /* =================================================================
       【UI 终极美化补丁 V7】PC大屏适配 & 组件放大
       ================================================================= */
    
    /* 1. 【通用】左上角释放按钮 (放大) */
    #btn-release-tiny {
        width: 40px !important;        /* 变宽 */
        height: 40px !important;       /* 变高 */
        font-size: 22px !important;    /* 图标变大 */
        line-height: 40px !important;
        top: 20px !important;
        left: 20px !important;
        border-radius: 8px !important; /* 圆角柔和点 */
        background: #333 !important;   /* 加深背景，更明显 */
        border: 1px solid #555 !important;
    }
    #btn-release-tiny:hover {
        background: #d32f2f !important; 
        color: white !important;
    }

    /* 2. 【PC端】布局重构 (宽屏 > 600px) */
    @media (min-width: 601px) {
        
        /* 左侧详情页：大幅加宽 */
        #roster-detail-view {
            width: 600px !important;       /* 【核心】宽度加到 600px */
            flex: 0 0 600px !important;    /* 锁死宽度 */
            padding: 30px !important;      /* 内部留白更多，显得大气 */
        }
        
        /* 头部文字放大 */
        .roster-header {
            font-size: 18px !important;    /* 标题字号变大 */
            height: 50px !important;       /* 头部整体增高 */
            margin-bottom: 15px !important;
        }

        /* --- 按钮对齐与美化 (置顶 & 排序) --- */
        /* 强制统一样式，让它们看起来像孪生兄弟 */
        #btn-header-pin, #roster-sort-select {
            height: 38px !important;       /* 统一高度 */
            line-height: 36px !important;  
            font-size: 16px !important;    /* 统一字号 */
            padding: 0 15px !important;    /* 统一内边距 */
            min-width: 110px !important;   /* 统一最小宽度 */
            
            background: #333 !important;
            border: 1px solid #555 !important;
            color: #ddd !important;
            border-radius: 5px !important;
            box-sizing: border-box !important;
            cursor: pointer;
            margin: 0 5px !important;
        }
        
        /* 修复置顶按钮内部图标居中 */
        #btn-header-pin {
            display: inline-flex !important;
            justify-content: center;
            align-items: center;
        }

        /* 列表部分：自动填满剩余 */
        .roster-list-panel {
            flex: 1 !important;
            border-left: 1px solid #444;   /* 加个分割线 */
            padding: 20px !important;      /* 列表四周也留点空 */
        }
        
        /* 列表网格：保持双列，间距拉大 */
        #roster-grid {
            gap: 15px !important;
        }
        
        /* 卡片高度适度增加 */
        .roster-card {
            min-height: 70px !important;
            padding: 10px 15px !important;
        }
        .roster-card span { font-size: 16px !important; } /* 名字变大 */
    }
    /* =================================================================
       【UI 终极修正 V8】填满PC详情页 & 修复按钮变色
       ================================================================= */
    
    /* 1. PC端详情页：内容撑满，不再留黑边 */
    @media (min-width: 601px) {
        #roster-detail-view .stats-container {
            max-width: 100% !important; /* 【关键】解除 280px 限制 */
            padding: 0 10px !important;
        }
        
        /* 属性网格：变成双列显示，充分利用宽度 */
        .core-stats-grid {
            display: grid !important;
            grid-template-columns: 1fr 1fr !important;
            gap: 5px 30px !important; /* 列间距拉大 */
        }
        
        /* 让属性行看起来更饱满 */
        .stat-row {
            border-bottom: 1px solid #333;
            padding: 8px 0 !important;
        }
    }

    /* 2. 置顶按钮激活状态 (强制变青色) */
    /* 只要 JS 加上了这个类，颜色就会变 */
    #btn-header-pin.pin-active {
        background: #00897b !important; 
        color: #fff !important;
        border-color: #004d40 !important;
        box-shadow: 0 0 8px rgba(0, 137, 123, 0.6) !important;
    }
    /* =================================================================
       【UI 终极优化 V9】PC武学放大 & 离队按钮文字化
       ================================================================= */
    
    /* 1. 修改左上角释放按钮：变长条，容纳文字 */
    #btn-release-tiny {
        width: auto !important;        /* 宽度自适应 */
        min-width: 80px !important;    /* 设置最小宽度 */
        padding: 0 10px !important;    /* 左右留空 */
        font-size: 14px !important;    /* 字号调整 */
        display: flex !important;
        gap: 5px !important;           /* 图标和字的间距 */
    }

    /* 2. PC端专属优化 (只对电脑生效) */
    @media (min-width: 601px) {
        
        /* 技能栏整体变高 */
        #detail-skills-box {
            height: 160px !important;      /* 增高到 160px，显示更多 */
            padding: 10px !important;
        }

        /* 技能栏标题 (原来是10px，强制改大) */
        #detail-skills-box > div:first-child {
            font-size: 14px !important;    /* 标题变大 */
            margin-bottom: 8px !important;
            color: #aaa !important;
        }

        /* 技能标签 (原来是12px，强制改大) */
        .skill-tag {
            font-size: 14px !important;    /* 标签文字变大 */
            padding: 6px 12px !important;  /* 标签尺寸变大 */
            margin: 5px !important;        /* 间距拉开 */
            display: inline-block !important;
        }
    }
    /* =================================================================
       【UI 终极微调 V10】去除PC滚动条 & 缩小手机离队按钮
       ================================================================= */
    
    /* 1. 【PC端】武学栏：自动撑开，消灭滚动条，填满空白 */
    @media (min-width: 601px) {
        #detail-skills-box {
            height: auto !important;       /* 【核心】高度随内容自动撑开 */
            min-height: 100px !important;  /* 保持一个最小高度 */
            max-height: none !important;   /* 移除最大高度限制 */
            overflow: visible !important;  /* 【核心】彻底移除滚动条 */
        }
    }

    /* 2. 【手机端】离队按钮：精致化缩小 */
    @media (max-width: 600px) {
        #btn-release-tiny {
            min-width: auto !important;    /* 取消宽限制，紧凑点 */
            width: auto !important;
            height: 28px !important;       /* 变矮 (原40px) */
            line-height: 26px !important;
            padding: 0 8px !important;     /* 左右留白减小 */
            font-size: 12px !important;    /* 文字变小 */
            top: 12px !important;           /* 稍微往上提 */
            left: 12px !important;
            gap: 4px !important;           /* 图标文字间距减小 */
        }
        
        /* 针对按钮里的那个 👋 图标也缩小 */
        #btn-release-tiny span {
            font-size: 14px !important;    /* 图标变小 */
        }
    }
    /* =================================================================
       【UI 修复补丁】找回消失的列表血条
       ================================================================= */
    
    /* 卡片底部的绿色血条 */
    .hp-bg-bar {
        position: absolute !important;
        bottom: 1px !important;        /* 【关键】抬高 1px，露出底部黄框 */
        left: 1px !important;          /* 【关键】左移 1px，露出左侧黄框 */
        height: 3px !important;        /* 改为 3px，更细致，不挡字 */
        background-color: #4caf50 !important;
        z-index: 0 !important;         /* 确保在文字下层 */
        transition: width 0.3s !important;
        border-radius: 2px !important; /* 加一点圆角 */
        pointer-events: none !important; /* 防止挡住点击 */
    }
    
    /* 重伤状态下，血条变红 (虽然长度是0可能看不见，但为了逻辑严谨) */
    .injured-member .hp-bg-bar {
        background-color: #d32f2f !important;
    }

    /* 配合血条，确保内容在血条之上 */
    .roster-card > * { 
        position: relative; 
        z-index: 2; 
    }
    
    /* 选中状态的黄框加粗并强制显示在最上层 */
    .roster-card.viewing {
        border: 1px solid #FFD700 !important;
        /* 用内阴影再加固一层高亮，绝对不会被挡 */
        box-shadow: inset 0 0 0 1px #FFD700, 0 0 8px rgba(255, 215, 0, 0.4) !important;
        z-index: 10 !important;
    }
    /* =================================================================
       【UI 修复】手机端列表底部防遮挡
       ================================================================= */
    
    @media (max-width: 600px) {
        /* 列表面板：大幅增加底部留白 */
        .roster-list-panel {
            /* 之前是 90px，不够用，现在加到 110px */
            /* 这样即使滑到底，最后一个人也会在按钮上方，不会被盖住 */
            padding-bottom: 110px !important; 
        }
    }
    /* =================================================================
       【UI 修复 V20】挂机条完美悬浮 (不占地、不被挡)
       ================================================================= */
    
    /* 1. UI主面板：允许子元素飞出边界，还原内边距 */
    #ui-panel {
        position: relative !important;
        overflow: visible !important;  /* 【核心】关键！允许胶囊条悬浮在面板外面 */
        padding-top: 10px !important;  /* 【核心】还原默认内边距，不再挤压按钮 */
        z-index: 500 !important;       /* 提高层级，确保浮在画面之上 */
    }

    /* 2. 按钮区域：解除定位干扰 */
    #actions-box {
        position: static !important;
    }

    /* 3. 挂机倒计时条：骑缝悬浮胶囊 */
    #buff-status-bar {
        position: absolute !important;
        
        /* 【位置】精确骑在面板上边缘 */
        top: 0 !important;             
        left: 50% !important;
        /* 向上偏移50%自身高度 = 正好骑在线上 */
        transform: translate(-50%, -50%) !important; 
        
        /* 【尺寸】 */
        width: auto !important;
        height: 26px !important;
        min-width: 140px !important;
        
        z-index: 9999 !important;
        
        /* 【外观】 */
        background: #1a1a1a !important;
        border: 1px solid #FFD700 !important;
        border-radius: 13px !important; 
        box-shadow: 0 2px 8px rgba(0,0,0,0.8) !important; 
        
        /* 【核心修复】删掉了 display: flex !important; */
        /* 现在默认隐藏 (display: none 由内联样式或 JS 控制) */
        /* 只有当 JS 判断有 Buff 时，才会添加 display: flex */
        
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
        padding: 0 15px !important;
        margin: 0 !important;
        
        /* 确保它初始不可见，防止闪烁 */
        display: none; 
    }
    
    /* 文字样式 */
    #buff-status-bar span {
        line-height: 24px !important;
        font-size: 12px !important;
        color: #FFD700 !important;
        font-weight: bold !important;
        text-shadow: 0 1px 2px #000;
    }

    /* 4. 【手机端】微调 */
    @media (max-width: 600px) {
        #ui-panel {
            /* 手机上不需要额外的高度补偿了，因为它是悬浮的，不占空间 */
            height: 260px !important; 
        }
        
        #buff-status-bar {
            height: 24px !important;
            font-size: 11px !important;
            min-width: 120px !important;
        }
    }

    /* =================================================================
       【UI 修复补丁 V11】平板/笔记本 适配 (修复错位 & 技能显示)
       针对宽度在 601px 到 1280px 之间的设备
       ================================================================= */
    @media (min-width: 601px) and (max-width: 1280px) {
        
        /* 1. 左侧详情页：宽度减肥 (从 600px 减为 380px) */
        /* 这样右边才有足够的空间显示列表 */
        #roster-detail-view, #roster-empty-view {
            width: 380px !important;
            flex: 0 0 380px !important;
            padding: 15px !important; /* 内边距也缩小一点 */
        }

        /* 2. 右侧列表：空间不足时强制单列显示 */
        /* 避免在窄空间里强行双列导致错位 */
        #roster-grid {
            grid-template-columns: 1fr !important; /* 强制单列 */
            gap: 8px !important;
        }

        /* 3. 技能栏：恢复滚动条，限制高度 */
        /* 防止技能太多撑破屏幕 */
        #detail-skills-box {
            height: auto !important;       /* 高度自适应 */
            min-height: 80px !important;   /* 最小高度 */
            max-height: 180px !important;  /* 【关键】最大高度限制 */
        }
        
        /* 4. 技能标签字体微调 (适应小屏) */
        .skill-tag {
            font-size: 12px !important;
            padding: 4px 8px !important;
            margin: 3px !important;
        }

        /* 5. 调整头部按钮大小，防止换行 */
        #btn-header-pin, #roster-sort-select {
            min-width: 80px !important;
            padding: 0 5px !important;
            font-size: 14px !important;
        }
    }

    /* =================================================================
       【战斗画面适配补丁 V3】iPad Mini 专属 (防挤压 + 完美距离)
       范围：601px ~ 1180px
       ================================================================= */
    @media (min-width: 601px) and (max-width: 1180px) {
        
        /* 1. 容器瘦身：强制腾出中间空隙 */
        /* 42% + 42% = 84%，剩下 16% 是绝对的安全距离 */
        .side-container {
            width: 42% !important; 
            min-width: auto !important;
        }

        /* --- 左边 (我方)：单列，靠右站，但往回缩一点 --- */
        #player-sprites {
            display: flex !important;
            flex-direction: column !important;
            flex-wrap: nowrap !important;       /* 严禁换行 */
            justify-content: center !important;
            align-items: flex-end !important;   /* 靠右对齐 */
            
            /* 【关键】往左缩 30px，不让贴着中线 */
            padding-right: 30px !important;     
        }

        /* --- 右边 (敌方)：换行，靠左站，但往回缩一点 --- */
        #enemy-sprites {
            display: flex !important;
            flex-direction: column !important;
            flex-wrap: wrap !important;         /* 允许换行 (为了第5人) */
            
            /* 高度限制 */
            max-height: 450px !important;       
            
            justify-content: center !important;
            align-items: flex-start !important; /* 靠左对齐 (形成前排) */
            align-content: flex-start !important; /* 列从左往右排 */
            
            /* 【关键】往右缩 30px，不让贴着中线 */
            padding-left: 30px !important;      
        }

        /* 统一微调间距 */
        .sprite {
            margin: 6px !important; 
        }
    }
    /* =========================================
       【最终修正】消除黑边，列表铺满
       ========================================= */
    
    /* 1. 列表容器：减少底部留白 */
    .roster-list-panel {
        /* 之前是为了放三排按钮留了120px，现在只要留 60px 给关闭按钮即可 */
        padding-bottom: 60px !important; 
        flex: 1 !important; /* 强制占满剩余高度 */
        margin-bottom: 0 !important;
    }

    /* 2. 底部栏：固定在最下方 */
    .roster-bottom-actions {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: auto !important;
        padding: 10px !important;
        background: #1a1a1a !important;
        border-top: 1px solid #333 !important;
        z-index: 9999 !important;
    }

    /* 3. 关闭按钮样式 */
    .btn-close-big {
        width: 100% !important;
        height: 40px !important;
        background: #b71c1c !important;
        color: #fff !important;
        font-size: 16px !important;
        border-radius: 4px !important;
        border: 1px solid #d32f2f !important;
    }
    /* =========================================
       【微调】下移布局 + 增加头部空间
       ========================================= */
    
    /* 1. 详情页：整体往下挪 (避开手机顶部/刘海) */
    #roster-detail-view {
        margin-top: 0px !important;  /* 【关键】整体下移 40px */
        border-top: 1px solid #444;   /* 加个顶边框好看点 */
        border-radius: 12px 12px 0 0; /* 顶部倒圆角 */
        flex: 0 0 auto !important;    /* 高度自动适应 */
    }

    /* 2. 黄药师立绘：增加高度，给头顶留空间 */
    #detail-visual {
        height: 78px !important;     /* 【关键】拉高高度 (原180 -> 200) */
        margin-top: 10px !important;  /* 【关键】不再往上提，而是往下压一点 */
        margin-bottom: 0 !important;
        align-items: flex-end !important; /* 底部对齐，头顶留空 */
    }

    /* 3. 队伍列表：顶部往下挪 (和详情页拉开距离) */
    .roster-list-panel {
        margin-top: 10px !important;  /* 【关键】列表顶部下移，留出缝隙 */
        border-top: 1px solid #333;   /* 给列表加个顶边线 */
    }

    /* 4. 确保关闭按钮依然固定在底部 */
    .roster-bottom-actions {
        z-index: 10000 !important;
    }

    /* =================================================================
       【列表功能扩展】设防/援助 快捷开关
       ================================================================= */
    
    /* 1. 按钮组容器：把三个按钮包起来，整体靠右 */
    .card-actions-group {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;       /* 按钮之间的间距 */
        margin-left: auto !important; /* 强制靠右对齐 */
    }

    /* 2. 新增的小方块按钮 (默认灰色) */
    .roster-action-btn {
        width: 32px !important; 
        height: 28px !important;
        border-radius: 4px !important; 
        border: 1px solid #555 !important;
        background: #333 !important; 
        color: #666 !important;    /* 默认灰色图标 */
        cursor: pointer; 
        display: flex !important; justify-content: center; align-items: center;
        font-size: 16px !important;
        transition: all 0.2s;
        padding: 0 !important;
    }

    /* 3. 点亮状态：设防 (变绿) */
    .roster-action-btn.active-def { 
        background: #2e7d32 !important; 
        color: #fff !important; 
        border-color: #4caf50 !important;
        box-shadow: 0 0 5px #2e7d32;
    }

    /* 4. 点亮状态：援助 (变金) */
    .roster-action-btn.active-supp { 
        background: #fbc02d !important; 
        color: #000 !important; 
        border-color: #ffeb3b !important; 
        box-shadow: 0 0 5px #fbc02d;
    }

    /* 5. 调整原有的出战按钮 (去掉它自带的 margin-left，由组容器接管) */
    .card-actions-group .btn-status-toggle {
        margin-left: 0 !important; 
    }

/* =================================================================
   【PC端专属美化】底部关闭按钮修正 (变小、靠右)
   ================================================================= */
@media (min-width: 601px) {

    /* 1. 列表面板：确保定位基准，并给底部留出空隙 */
    .roster-list-panel {
        position: relative !important;
        /* 留出60px给底部按钮条，防止最后一行人被挡住 */
        padding-bottom: 30px !important; 
        border-bottom: none !important;
    }

    /* 2. 底部操作栏：改为横向排列，靠右对齐 */
    .roster-bottom-actions {
        position: absolute !important;   /* 钉在列表面板底部 */
        bottom: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 80px !important;         /* 固定高度 */
        
        display: flex !important;
        flex-direction: row !important;  /* 【关键】横排 */
        justify-content: flex-end !important; /* 【关键】靠右对齐 */
        align-items: center !important;
        
        padding: 7px !important;      /* 左右留白 */
        background: #181818 !important;  /* 深色背景 */
        border-top: 1px solid #333 !important;
        margin: 0 !important;            /* 清除 margin-top: auto */
        z-index: 100 !important;
    }

    /* 3. 关闭按钮：变短、变精致 */
    .btn-close-big {
        width: 120px !important;         /* 【核心】宽度锁死 120px */
        height: 50px !important;         /* 高度变矮，显精致 */
        font-size: 16px !important;      /* 字号适配 */
        border-radius: 4px !important;
        
        /* 稍微加一点悬停效果 */
        transition: background 0.2s !important;
        cursor: pointer !important;
    }

    .btn-close-big:hover {
        background: #d32f2f !important;  /* 悬停变亮红 */
        border-color: #ff5252 !important;
    }
}
/* =========================================
   【布局修正】顶部按钮强制靠右
   ========================================= */

/* 1. 开启头部弹性布局，设置为两端对齐 */
.roster-header {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important; /* 默认靠右，配合下面把文字挤到左边 */
    width: 100% !important;
}

/* 2. 【核心】让“队伍(x/x)”文字占据左侧所有剩余空间 */
/* 这就像一个弹簧，把右边的按钮狠狠推到最右边 */
.roster-header > span {
    margin-right: auto !important; 
    text-align: left !important;
    flex-grow: 1 !important; 
}

/* 3. 微调右边两个按钮的间距，防止贴太紧 */
#btn-header-pin, 
#roster-sort-select {
    margin-left: 8px !important;  /* 按钮左侧留出缝隙 */
    flex-shrink: 0 !important;    /* 禁止按钮被挤扁 */
}
/* =========================================
   【PC端战斗重构】自动换行 + 居中对齐 + 间距调整
   ========================================= */
@media (min-width: 601px) {
    
    /* 1. 战场整体留白 (上下 20px) */
    #battle-stage {
        padding-top: 40px !important;
        padding-bottom: 0px !important;
        
        /* 确保内容垂直居中，不会贴着顶 */
        align-items: center !important; 
    }

    /* 2. 敌我双方容器设置 (核心部分) */
    /* 这里控制着队伍怎么排 */
    .side-container,
    #player-sprites, 
    #enemy-sprites {
        display: flex !important;
        flex-wrap: wrap !important;        /* 【关键】允许自动换行 */
        justify-content: center !important;/* 【关键】每一行的人都居中对齐 */
        align-content: center !important;  /* 整体内容垂直居中 */
        
        width: 45% !important;             /* 容器宽度，想让它们更早换行就把这个改小 */
        gap: 8px !important;              /* 【这里调整间距】人与人之间的空隙 */
    }

    /* 3. 角色个体微调 */
    .sprite {
        /* 防止换行后两行贴得太近，给每个人底部加点距离 */
        margin-bottom: 7px !important;    
    }
}
/* =========================================
   【战斗UI修复】红圈 (target-marker) 终极修正
   ========================================= */
.target-marker {
    /* 1. 【核心修复】解绑顶部定位 */
    /* 之前调不动是因为 top 把位置锁死了，设为 auto 才能让 bottom 生效 */
    position: absolute !important;
    top: auto !important;    
    
    /* 2. 高度调整 (试着改这个数字) */
    /* 0px 是底边对齐，正数(如 20px) 往上提，负数(如 -10px) 往下挪 */
    bottom: 40px !important; 
    
    /* 3. 左右居中修正 */
    left: 50% !important;
    right: auto !important;  /* 防止被右边吸走 */
    transform: translateX(-50%) !important; 
    
    /* 4. 尺寸锁死 */
    width: 60px !important;
    height: 60px !important;
    
    /* 5. 防止图片变形 */
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center bottom !important; 
    
    /* 6. 【核心修复】禁止位移动画 (解决点击瞬间闪现问题) */
    transition: none !important; 
    animation: none !important;
    
    /* 7. 确保层级正确 */
    z-index: 5 !important;
    pointer-events: none !important; /* 让鼠标能穿透红圈点到人 */
}

/* 如果头顶的箭头也歪了，用这个修 */
.arrow-pointer {
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: -20px !important;
    right: auto !important;
    z-index: 200 !important;
}
/* =========================================
   【移动端终极交互补丁】
   ========================================= */

/* 1. 核心修复：强制所有子元素（名字、血条、图片）不响应点击 */
/* 让点击直接穿透它们，打在底层的 .sprite 盒子上，这样 JS 的禁用逻辑才能生效 */
.sprite > * {
    pointer-events: none !important;
}

/* 2. 视觉修复：强制“不可点”的单位变灰 */
/* 只要 JS 给它加上了 pointer-events: none，CSS 就强制它变灰，谁也拦不住 */
.sprite[style*="pointer-events: none"] {
    opacity: 0.5 !important;
    filter: grayscale(100%) !important;
    cursor: not-allowed !important;
}
/* =========================================
   【新增】副本锁定状态样式
   ========================================= */
.roster-card.dungeon-locked {
    /* 暗色斜纹背景，表示“忙碌中” */
    background: repeating-linear-gradient(
      45deg,
      #202020,
      #202020 10px,
      #1a1a1a 10px,
      #1a1a1a 20px
    ) !important;
    
    /* 边框变暗橙色 */
    border-color: #5d4037 !important;
    opacity: 0.9;
}

/* 锁定状态下，除了按钮外的文字稍微变暗 */
.roster-card.dungeon-locked .card-main-info {
    opacity: 0.7;
}
/* =========================================
   【副本顶部栏】极简修复版
   ========================================= */
/* 1. 直接控制顶部大容器：左文右钮，避开刘海 */
.hud-top-bar {
    width: 100% !important;
    height: auto !important;
}
    /* =========================================
       【UI 微调】PC端标题栏两侧缩进修正
       ========================================= */
    @media (min-width: 601px) {
        /* 同时修正 主界面Header 和 副本顶部栏 */
        header, .hud-top-bar {
            /* 增加左右内边距 */
            /* 手机端是10px，这里给12px，刚好满足“往里挪一点”的需求 */
            padding-left: 12px !important;
            padding-right: 12px !important;
            
            /* 【核心】强制使用边框盒模型 */
            /* 这一步是为了防止加了padding后，宽度(100%) + padding > 屏幕宽度，导致横向滚动条 */
            box-sizing: border-box !important;
            
            /* 确保宽度占满，不要缩成一团 */
            width: 100% !important;
        }
    }

/* =========================================
   【商店UI 优化】支持多行描述 & 滚动
   ========================================= */

/* 1. 商店列表容器：确保可以滚动 */
#shop-list {
    display: grid !important;
    grid-template-columns: 1fr !important; /* 单列显示 */
    gap: 10px !important;
    padding: 10px !important;
    padding-bottom: 20px !important; /* 底部留白 */
    
    /* 确保高度受控，溢出滚动 */
    overflow-y: auto !important; 
    max-height: 100% !important; /* 跟随父容器 */
}

/* 2. 商品卡片：高度自适应，但有最小高度 */
.shop-item-card {
    display: flex !important;
    align-items: flex-start !important; /* 顶部对齐，防止高度拉伸后图标跑中间 */
    padding: 12px 10px !important;
    
    /* 🔥 高度控制 */
    height: auto !important;       /* 随内容撑开 */
    min-height: 85px !important;  /* 至少这么高，容纳3行字 */
    
    background: #252525;
    border: 1px solid #444;
    border-radius: 6px;
    position: relative;
}

/* =========================================
   【彻底死亡样式】
   ========================================= */

/* 列表卡片变灰 */
.roster-card.card-permadeath {
    background: repeating-linear-gradient(
        135deg,
        #1a1a1a,
        #1a1a1a 10px,
        #222 10px,
        #222 20px
    ) !important;
    border-color: #424242 !important;
    opacity: 0.7;
}

/* 名字加删除线或变灰 */
.roster-card.card-permadeath .card-main-info span {
    text-decoration: line-through;
    color: #757575 !important;
}

/* 头像黑白化 */
.roster-card.card-permadeath .pc-visual {
    filter: grayscale(100%) contrast(1.2);
    opacity: 0.5;
}