    <style>
  /* ===== 全新响应式方案：横屏整体缩放 ===== */
/* AI策略切换按钮样式 */
#aiStrategySelector .strategy-btn {
    background-color: #2c3e50;
    color: #bdc3c7;
    border: 1px solid #7f8c8d;
    padding: 4px 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
    opacity: 0.7;
}

#aiStrategySelector .strategy-btn:hover {
    opacity: 1;
    border-color: #ffda79;
}

#aiStrategySelector .strategy-btn.active {
    background-color: #ffda79;
    color: #1e272e;
    border-color: #ffda79;
    box-shadow: 0 0 10px rgba(255, 218, 121, 0.7);
    opacity: 1;
    font-weight: bold;
}

/* * 目标：在所有小于桌面宽度（1600px）的横屏设备上，
 * 保持与桌面完全一致的布局，仅按比例缩放。
*/
@media (max-width: 1600px) and (orientation: landscape) {

    /* * 核心：对 <body> 进行缩放
     * 1. 我们假设您的桌面设计是基于 1600px 宽度和大约 900px 高度的画布。
     * 2. 'width' 和 'height' 将 body 变成一个固定大小的“画布”。
     * 3. 'transform: scale(...)' 会根据当前屏幕的实际宽度，计算出缩放比例。
     * 例如：在 800px 宽的手机横屏上，缩放比例就是 800 / 1600 = 0.5。
     * 4. 'transform-origin: top left' 确保页面从左上角开始缩放。
    */
    body {
        width: 1600px;
        height: 900px; /* 您可以根据设计微调此高度，900px 通常适用于 16:9 的屏幕 */
        transform-origin: top left;
        transform: scale(calc(100vw / 1600px));
        overflow: hidden; /* 隐藏因缩放可能产生的滚动条 */
        position: relative; /* 确保 body 成为定位的基准 */
        padding: 0 !important;
    }

    /* * 确保 #bpContainer 和 .container 占满缩放后的 body 画布
    */
    #bpContainer, .container {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 20px !important; /* 保持设计中的内边距 */
        box-sizing: border-box; /* 确保内边距不会撑大容器 */
    }

    /* * 强制覆盖任何可能残留的旧响应式布局代码，确保布局是横向的
    */
    .top-row, .bp-area {
        flex-direction: row !important;
    }
}


/* * (可选，但强烈推荐) 添加竖屏提示
 * 由于此布局专为横屏设计，在竖屏模式下体验会很差。
 * 这段代码会在用户竖屏时，显示一个友好的提示，引导他们旋转屏幕。
*/
@media (orientation: portrait) {
    body::before {
        content: "为了获得最佳体验，请将您的设备旋转至横屏模式";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #0a1121;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.2rem;
        text-align: center;
        padding: 20px;
        box-sizing: border-box;
        z-index: 999999; /* 确保在最顶层显示 */
    }

    /* 竖屏时隐藏主容器，只显示提示 */
    #bpContainer, #startPage {
        display: none !important;
    }
}
  
    /* [CSS] - 最终版：居中的、不透明的、保证置于顶层的加载弹窗 */

/* 第一部分：半透明的背景遮罩 (幕布)
  - 任务：覆盖整个屏幕，将背景调暗、变模糊。
  - 关键：`z-index: 99999;` 这是一个极高的值，确保它能覆盖页面上几乎所有其他元素。
*/
.loading-overlay-deluxe {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 17, 33, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    /* 【核心修正】设置一个极高的z-index，确保它在最顶层 */
    z-index: 99999; 
    transition: opacity 0.5s ease;
}

/* 淡出动画 */
.loading-overlay-deluxe.fade-out {
    opacity: 0;
    pointer-events: none;
}

/* 第二部分：完全不透明的加载弹窗主体
  - 它位于遮罩的内部，会被自动居中。
*/
.loading-box {
    position: relative;
    width: 400px;
    padding: 30px 40px;
    background: #0D131D;
    border: 2px solid rgba(127, 179, 255, 0.3);
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    animation: pulseBorder 2s infinite ease-in-out, popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 科技感边角 (无需修改) */
.loading-box .corner {
    position: absolute;
    width: 20px;
    height: 20px;
    border-style: solid;
    border-color: #ffda79;
}
.loading-box .top-left { top: -2px; left: -2px; border-width: 3px 0 0 3px; }
.loading-box .top-right { top: -2px; right: -2px; border-width: 3px 3px 0 0; }
.loading-box .bottom-left { bottom: -2px; left: -2px; border-width: 0 0 3px 3px; }
.loading-box .bottom-right { bottom: -2px; right: -2px; border-width: 0 3px 3px 0; }

/* 旋转图标 (无需修改) */
.loading-icon-deluxe {
    color: #ffda79;
    font-size: 2.5rem;
    animation: spin 2s linear infinite;
}
.loading-icon-deluxe i {
    text-shadow: 0 0 15px #ffda79;
}

/* 加载文字 (无需修改) */
.loading-text-deluxe {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.1rem;
    color: #fff;
    letter-spacing: 2px;
}

/* 进度条容器 (无需修改) */
.loading-progress {
    width: 100%;
    height: 24px;
    background: #000;
    border: 1px solid rgba(127, 179, 255, 0.4);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

/* 进度条填充部分 (无需修改) */
.progress-bar-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #54a0ff, #2e86de);
    box-shadow: 0 0 10px #54a0ff;
    transition: width 0.3s ease;
    position: relative;
}
.progress-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: scan 2s infinite linear;
}

/* 进度条百分比文字 (无需修改) */
.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-weight: bold;
    font-family: 'Orbitron', sans-serif;
    text-shadow: 1px 1px 2px black;
}

/* 动画定义 (无需修改) */
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes pulseBorder {
    0% { border-color: rgba(127, 179, 255, 0.3); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); }
    50% { border-color: rgba(255, 218, 121, 0.8); box-shadow: 0 10px 50px rgba(0, 0, 0, 0.7); }
    100% { border-color: rgba(127, 179, 255, 0.3); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); }
}
@keyframes scan {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
@keyframes popIn {
    from {
        opacity: 0;
        transform: scale(0.85);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}



        .role-tag {
            background: rgba(0,0,0,0.8);
            color: white;
            font-size: 9px;
            padding: 3px 6px;
            border-radius: 12px;
            text-transform: uppercase;
            font-weight: bold;
            max-width: 40px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
        }
        
        /* 全局英雄池优化 */
        .global-pool-container {
            max-width: 800px;
            margin: 15px auto;
        }
        
        .pool-row {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            gap: 15px;
        }
        
        .pool-section {
            background: rgba(0, 0, 0, 0.3);
            border-radius: 10px;
            padding: 10px;
            text-align: center;
            width: 50%;
        }
        
        .hero-pool-list {
            justify-content: center;
            padding: 8px;
        }
        
        .used-hero-item {
            width: 45px;
            height: 45px;
            border-radius: 6px;
        }
        
        .used-hero-item .game-count {
            font-size: 9px;
            padding: 1px 4px;
        }
        
        /* 按钮优化 */
        .tech-button {
            padding: 6px 12px;
            border-radius: 30px;
            border: none;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 12px;
            letter-spacing: 0.5px;
            color: white;
            font-family: 'Orbitron', sans-serif;
            display: flex;
            align-items: center;
            gap: 8px;
            position: relative;
            overflow: hidden;
            box-shadow: 
                0 4px 15px rgba(0, 0, 0, 0.5),
                inset 0 0 0 1px rgba(255,255,255,0.1);
        }

        .tech-button::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -60%;
            width: 200%;
            height: 200%;
            background: linear-gradient(
                rgba(255, 255, 255, 0.13),
                rgba(255, 255, 255, 0.13) 50%,
                rgba(255, 255, 255, 0) 100%
            );
            transform: rotate(30deg);
            transition: all 0.6s ease;
        }

        .tech-button:hover::before {
            left: 100%;
        }

        .tech-button:hover {
            transform: translateY(-3px);
            box-shadow: 
                0 7px 20px rgba(0, 0, 0, 0.7),
                inset 0 0 0 1px rgba(255,255,255,0.2);
        }

        .tech-button:active {
            transform: translateY(1px);
        }

        .tech-button i {
            position: relative;
            z-index: 1;
        }

        .tech-button span {
            position: relative;
            z-index: 1;
        }

        #lockBtn {
            background: linear-gradient(45deg, #2ed573, #1dd1a1);
        }

        #cancelBtn {
            background: linear-gradient(45deg, #ff6b6b, #ff4757);
        }

        #swapBtn {
            background: linear-gradient(45deg, #9b59b6, #8e44ad);
        }
        
        /* 使用记录按钮优化 */
        #showRecordBtn {
            background: linear-gradient(45deg, #9b59b6, #8e44ad);
            color: white;
            box-shadow: 0 0 15px rgba(155, 89, 182, 0.5);
        }
        
        #showRecordBtn:hover {
            background: linear-gradient(45deg, #8e44ad, #9b59b6);
            box-shadow: 0 0 25px rgba(155, 89, 182, 0.7);
        }

        /* 英雄池标签优化 */
        .status-tag {
            padding: 3px 6px;
            font-size: 9px;
            border-radius: 15px;
            display: flex;
            align-items: center;
            gap: 3px;
            max-width: 70px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-weight: bold;
            backdrop-filter: blur(5px);
            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
        }
        
        /* 英雄池居中优化 */
        .modal .hero-pool-row {
            justify-content: center;
        }
        
        /* 英雄头像居中 */
        .used-hero-item {
            margin: 0 auto;
        }
        
        /* 移除多余的换边按钮 */
        #swapBtn {
            display: none !important;
        }
        
        /* 原始样式保持不变 */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        :root {
            --blue: #54a0ff;
            --red: #ff4757;
            --pick-color: #2ed573;
            --glow-blue: rgba(84, 160, 255, 0.5);
            --glow-red: rgba(255, 71, 87, 0.5);
            --glow-pick: rgba(46, 213, 115, 0.5);
            --pre-select: #ffda79;
            --glow-pre: rgba(255, 218, 121, 0.5);
            --background: #0a1121;
            --panel-bg: rgba(30, 41, 59, 0.7);
            --dark-panel: rgba(20, 25, 41, 0.95);
            --flat-border: 1px solid rgba(255, 255, 255, 0.15);
            --progress-gradient: linear-gradient(90deg, #00a8ff, #0fb9b1, #2ed573);
            --global-bp: #9b59b6;
            --win-color: #2ed573;
            --lose-color: #ff6b6b;
            --both-used: #9b59b6;
        }

        html, body {
            overflow-x: hidden;
            height: 100%;
            touch-action: manipulation;
        }

        body {
            margin: 0;
            padding: 0;
            background: var(--background);
            color: white;
            font-family: 'Microsoft YaHei', 'Orbitron', sans-serif;
            overflow-x: hidden;
            background-image: 
                radial-gradient(circle at 10% 20%, rgba(65, 105, 225, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 90% 80%, rgba(220, 20, 60, 0.1) 0%, transparent 50%);
            min-height: 100vh;
            padding: 20px;
            position: relative;
            display: flex;
            justify-content: center;
        }

 /* 固定BP容器，宽度1920px，高度100vh（视口高度） */
.container {
    max-width: 1600px !important; /* 强制固定宽度，禁止随视口缩放 */
    /* min-width: 1200px; 小屏幕出现横向滚动条，不压缩布局 */
    height: auto;
    overflow: hidden; /* 内容过多时滚动，不改变布局 */
    padding: 20px;
     min-height: 800px; /* 小屏幕最低高度 */
    display: flex;
    flex-direction: column;
    gap: 20px !important; /* 固定垂直间距，永不改变 */
}

        .top-row {
            display: flex;
            gap: 20px;
            height: 860px !important; /* 移除原固定高度 */
    flex-shrink: 0; /* 禁止缩小 */
        }

        /* 主卡片容器 */
        .main-card {
            background: var(--panel-bg);
            border-radius: 16px;
            padding: 20px;
            border: var(--flat-border);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7);
            display: flex;
            flex-direction: column;
            flex: 1;
            height: 100% !important; /* 撑满容器高度 */
        }

        /* 顶部区域 - 整合队名和进度条 */
        .top-section {
           --flat-border: none; /* 或 --flat-border: 0; */
            border: var(--flat-border);
            border-radius: 12px;
            padding: 12px 20px;
            border: var(--flat-border);
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

     .top-header {
    display: flex;
    justify-content: space-between; /* 三元素均匀分布 */
    align-items: center;
    gap: 15px;
    width: 100%;
}
.round-indicator, .global-bp-indicator {
    flex: 0 0 auto; /* 不自动拉伸 */
}
        
        .round-indicator {
            background: linear-gradient(45deg, var(--global-bp), #8e44ad);
            padding: 6px 15px;
            border-radius: 20px;
            font-family: 'Orbitron', sans-serif;
            font-size: 0.9rem;
            box-shadow: 0 0 15px rgba(155, 89, 182, 0.5);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .team-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
        }
/* BP 区域内战队名称框样式（BAN 位上方） */
.bp-team-name {
    width: 100%; /* 占满所在 side-column 宽度 */
    padding: 8px 12px;
    margin-bottom: 10px; /* 与下方 BAN 位保持空隙 */
    text-align: center; /* 文字居中 */
    background: rgba(0,0,0,0.4); /* 加深背景，与 BP 区域区分 */
    border: 1px solid rgba(255,255,255,0.2);
    min-width: auto; /* 取消原最小宽度限制，适配 side-column 宽度 */
}

/* 蓝方战队名称框特殊样式（继承原蓝色标识） */
.blue-column .bp-team-name {
    border-left: 3px solid var(--blue);
    color: var(--blue);
    text-shadow: 0 0 10px var(--blue);
}

/* 红方战队名称框特殊样式（继承原红色标识） */
.red-column .bp-team-name {
    border-right: 3px solid var(--red);
    color: var(--red);
    text-shadow: 0 0 10px var(--red);
}

/* 修复 side-column 内布局，避免战队名称框挤压 BAN/PICK 位 */
.side-column {
    padding-top: 15px; /* 顶部内边距适配新增的战队名称框 */
    padding-bottom: 15px;
    gap: 8px; /* 增大 BAN 位与 PICK 位之间的间距，抵消上方新增元素 */
}

/* 调整 BAN 位区域顶部间距，与战队名称框呼应 */
.ban-section {
    padding-top: 5px;
}
        .team-name {
            padding: 10px 20px;
            border-radius: 30px;
            background: rgba(0,0,0,0.3);
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
            border: 1px solid transparent;
            font-family: 'Orbitron', sans-serif;
            font-size: 1.1rem;
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 180px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
            flex: 1;
            position: relative;
            overflow: hidden;
            justify-content: center;
        }
        
        .team-score {
            background: rgba(255,255,255,0.15);
            border-radius: 15px;
            padding: 3px 8px;
            margin-left: 8px;
            font-weight: bold;
            min-width: 35px;
        }
        
        .blue-score {
            background: rgba(84, 160, 255, 0.25);
        }
        
        .red-score {
            background: rgba(255, 71, 87, 0.25);
        }
        
        .team-name.winner::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: var(--win-color);
            box-shadow: 0 0 10px var(--win-color);
            animation: winnerGlow 1.5s infinite alternate;
        }
        
        @keyframes winnerGlow {
            0% { opacity: 0.5; }
            100% { opacity: 1; }
        }
        
        .team-name:hover {
            background: rgba(0,0,0,0.4);
            border: 1px solid rgba(255,255,255,0.2);
            transform: translateY(-3px);
        }
        
        .blue-team {
            color: var(--blue);
            text-shadow: 0 0 10px var(--blue);
            border-left: 3px solid var(--blue);
        }
        
        .red-team {
            color: var(--red);
            text-shadow: 0 0 10px var(--red);
            border-right: 3px solid var(--red);
        }

        /* 队名占位符样式 */
        [contenteditable][data-placeholder]:empty:before {
            content: attr(data-placeholder);
            color: rgba(255,255,255,0.5);
        }

        .progress-container {
            width: 100%;
            height: 16px;
            background: rgba(0,0,0,0.3);
            border-radius: 8px;
            overflow: hidden;
            position: relative;
            border: var(--flat-border);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
        }

        .progress-bar {
            width: 100%;
            height: 100%;
            background: var(--progress-gradient);
            transform-origin: left center;
            transform: scaleX(1);
            transition: transform 1s linear;
            position: relative;
            overflow: hidden;
            box-shadow: 0 0 10px rgba(0, 168, 255, 0.5);
        }
        
        /* 电竞风格进度条 */
        .progress-bar::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(
                90deg,
                transparent,
                rgba(255, 255, 255, 0.4),
                transparent
            );
            animation: progressGlow 1.5s infinite;
        }
        
        @keyframes progressGlow {
            0% {
                transform: translateX(-100%);
            }
            100% {
                transform: translateX(100%);
            }
        }

        .progress-bar.warning {
            background: linear-gradient(90deg, #ff9f43, #ff6b6b, #ff4757);
        }
        
        .progress-bar.warning::before {
            background: linear-gradient(
                90deg,
                transparent,
                rgba(255, 255, 255, 0.6),
                transparent
            );
        }

        .timer-display {
            position: absolute;
            top: 0px;
            right: 0;
               font-weight: 900; /* 极粗，增强科技感 */
            font-family: 'Orbitron', sans-serif;
            font-size: 1rem;
            color: #00a8ff;
            text-shadow: 0 0 10px rgba(0, 168, 255, 0.8);
            letter-spacing: 2px;
            transition: all 0.3s;
        }
        
        .timer-display.warning {
            color: #ff6b6b;
            text-shadow: 0 0 10px rgba(255, 107, 107, 0.8);
            animation: pulse 0.8s infinite alternate;
        }

        /* 英雄池菜单 - 独立高度 */
        .hero-menu {
            width: 540px;
            min-width: 540px;
            background: var(--dark-panel);
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 25px rgba(0,0,0,0.4);
            border: var(--flat-border);
            display: flex;
            flex-direction: column;
            height: 100%;
        }
        
        .hero-menu-header {
            padding: 12px 15px;
            background: rgba(0,0,0,0.2);
            border-bottom: var(--flat-border);
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .hero-menu-header h3 {
            font-size: 1.3rem;
            background: linear-gradient(90deg, var(--blue), var(--red));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        .hero-menu .role-filter {
            padding: 10px 12px;
            display: flex;
            gap: 6px;
            flex-wrap: wrap; /* 确保按钮不换行 */
            overflow-x: auto; /* 添加水平滚动 */
            background: rgba(0,0,0,0.3);
            border-bottom: var(--flat-border);
            scrollbar-width: none; /* 隐藏滚动条 */
        }
        
        /* 隐藏滚动条 */
        .hero-menu .role-filter::-webkit-scrollbar {
            display: none;
        }
        
        .hero-menu .search-container {
            padding: 0 12px 12px;
        }
        
        .hero-menu .hero-pool {
            flex: 1;
            overflow-y: auto;
            padding: 12px;
        }

        /* BP区域 - 独立高度 */
        .bp-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            height: 100%;
        }
/* ==========================================================================
   LPL 电竞风格 BP 区域 - 全新设计方案
   请用这段代码替换您原有的 .bp-area, .side-column, .blue-column, .red-column 相关样式
   ========================================================================== */

/* ==========================================================================
   全新BP区域设计方案 - 聚焦清晰度与质感
   请用这段代码替换您原有的 .bp-area, .side-column 等相关样式
   ========================================================================== */

/* 1. BP区域总容器 (.bp-area) - 简洁、沉稳的科技背景 */
.bp-area {
    height: calc(100% - 450px);
    display: flex;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    
    /* -- 核心设计：深邃背景 + 精细网格纹理 -- */
    /* 深灰色底，比纯黑更有层次 */
    background-color: #0D1117; 
    /* 静态、细微的网格纹理，增加科技感但不干扰视觉 */
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 35px 35px; /* 网格大小 */

    /* -- 边框与阴影，定义清晰的轮廓 -- */
    border: 1px solid #2a2f3b; /* 一个明确但不过于抢眼的边框 */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); /* 整体的外部阴影，使其浮动 */
}

/* 2. 左右子容器 (.side-column) - 基础布局与背景 */
.side-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 52px 10px;
    min-height: 0;
    height: 100%;
    
    /* 使用半透明背景，与父容器的网格背景形成微妙的层次感 */
    background-color: rgba(18, 22, 29, 0.4);
    
    /* 移除所有旧的、复杂的样式 */
    border: none;
    border-radius: 0;
    box-shadow: none; /* 移除旧阴影，将使用新的内嵌阴影 */
    position: relative;
    transition: background-color 0.3s ease; /* 添加一个简单的交互过渡 */
}

/* (可选) 鼠标悬停时，背景色可以稍微变亮，提供反馈 */
.side-column:hover {
    background-color: rgba(25, 30, 38, 0.6);
}


/* 3. 蓝红双方阵营标识 - 使用内发光和侧边框，清晰且内敛 */
.blue-column {
    /* 左侧的阵营颜色标识线 */
   
    /* 核心：使用内嵌阴影模拟从左侧渗透进来的光芒，效果微妙且高级 */
    box-shadow: inset 7px 0px 25px -8px rgba(59, 130, 246, 0.7); 
}

.red-column {
    /* 右侧的阵营颜色标识线 */
   
    /* 核心：内嵌阴影从右侧进入 */
    box-shadow: inset -7px 0px 25px -8px rgba(239, 68, 68, 0.7);
}

/* (可选) 当轮到某方操作时，可以通过添加 .active-turn 类来增强其视觉提示。
   这种增强是微妙的，只是让光效更明显一点，不会分散注意力。
*/
.side-column.active-turn {
    background-color: rgba(30, 36, 45, 0.7);
}
.blue-column.active-turn {
    box-shadow: inset 7px 0px 30px -5px rgba(59, 130, 246, 0.9); 
}
.red-column.active-turn {
    box-shadow: inset -7px 0px 30px -5px rgba(239, 68, 68, 0.9);
}




/* ===================================
   辉光动画关键帧定义
   请将这段代码添加到您的 CSS 文件末尾
   =================================== */

/* 蓝色辉光的 "呼吸" 动画 */
@keyframes pulse-blue {
    0% {
        box-shadow: 0 0 20px rgba(84, 160, 255, 0.3);
    }
    50% {
        /* 在动画进行到一半时，辉光范围变大、更亮 */
        box-shadow: 0 0 35px 5px rgba(84, 160, 255, 0.5);
    }
    100% {
        box-shadow: 0 0 20px rgba(84, 160, 255, 0.3);
    }
}

/* 红色辉光的 "呼吸" 动画 */
@keyframes pulse-red {
    0% {
        box-shadow: 0 0 20px rgba(255, 71, 87, 0.3);
    }
    50% {
        /* 在动画进行到一半时，辉光范围变大、更亮 */
        box-shadow: 0 0 35px 5px rgba(255, 71, 87, 0.5);
    }
    100% {
        box-shadow: 0 0 20px rgba(255, 71, 87, 0.3);
    }
}




        .section-title {
            font-size: 1.4rem;
            padding: 6px 12px;
            border-radius: 8px;
            text-align: center;
            font-weight: bold;
            letter-spacing: 2px;
            text-transform: uppercase;
            background: rgba(0,0,0,0.2);
            border: var(--flat-border);
            margin-bottom: 8px;
            font-family: 'Orbitron', sans-serif;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            display: none;
        }
        
        .blue-title {
            color: var(--blue);
            text-shadow: 0 0 10px var(--blue);
            background: linear-gradient(to right, rgba(84, 160, 255, 0.2), rgba(84, 160, 255, 0.05));
        }
        
        .red-title {
            color: var(--red);
            text-shadow: 0 0 10px var(--red);
            background: linear-gradient(to right, rgba(255, 107, 107, 0.2), rgba(255, 107, 107, 0.05));
        }

        .ban-section, .pick-section {
            flex: 1;
            padding: 5px;
            border-radius: 12px;
            display: flex;
            flex-direction: column;
             height: 50% !important; /* 固定各占一半高度 */
    justify-content: flex-start; /* 顶部对齐，避免间距波动 */
        }
.pick-section {
    padding-top: 0 !important; /* 取消PICK位顶部留白 */
    padding-bottom: 5px; /* 保留底部少量padding，避免槽位贴底 */
}
        .slot-row {
            display: flex;
            gap: 8px;
            justify-content: center;
            width: 100%;
            padding: 2px 0;
            flex-wrap: nowrap;
            height: 100px !important; /* 与槽位高度一致 */
            flex-shrink: 0; /* 禁止缩小 */
            align-items: center;
        }
        
        .red-slot-row {
            flex-direction: row-reverse;
        }

        /* 槽位样式优化 */
        .slot {
            width: 70px;
            height: 70px;
            border-radius: 8px;
            background: rgba(0, 0, 0, 0.25);
            cursor: pointer;
            transition: 0.3s;
            position: relative;
            overflow: hidden;
            background-size: cover;
            background-position: center;
            box-shadow: 
                inset 0 0 0 1px rgba(255,255,255,0.1),
                0 5px 15px rgba(0,0,0,0.3);
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        
        .pick-slot {
            width: 75px;
            height: 75px;
            min-width: 75px;
            --glow-color: var(--glow-pick);
        }
        
        /* 锁定后槽位保持亮度 */
        .slot.filled {
            opacity: 1 !important;
            filter: brightness(1);
        }
        
        /* BAN位对角线效果 */
        .slot.ban-slot.filled::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                to bottom right,
                transparent calc(50% - 3px),
                var(--red) calc(50% - 2px),
                var(--red) calc(50% + 2px),
                transparent calc(50% + 3px)
            );
            opacity: 0.8;
            pointer-events: none;
            animation: banLineAppear 0.5s ease-out;
            border-radius: 8px;
        }
        
        .blue-column .slot.ban-slot.filled::after {
            background: linear-gradient(
                to bottom right,
                transparent calc(50% - 3px),
                var(--blue) calc(50% - 2px),
                var(--blue) calc(50% + 2px),
                transparent calc(50% + 3px)
            );
        }
        
        @keyframes banLineAppear {
            0% { 
                transform: scale(0.8); 
                opacity: 0;
            }
            70% { 
                transform: scale(1.05); 
                opacity: 1;
            }
            100% { 
                transform: scale(1); 
                opacity: 0.8;
            }
        }

        .active-slot {
            animation: 
                pulse 1.8s ease-in-out infinite,
                glow 1.8s ease-in-out infinite;
            border-radius: 8px;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        @keyframes glow {
            0% { 
                box-shadow: 
                    inset 0 0 15px var(--glow-color),
                    0 0 20px var(--glow-color);
                border-radius: 8px;
            }
            50% { 
                box-shadow: 
                    inset 0 0 25px var(--glow-color),
                    0 0 35px var(--glow-color);
                border-radius: 8px;
            }
            100% { 
                box-shadow: 
                    inset 0 0 15px var(--glow-color),
                    0 0 20px var(--glow-color);
                border-radius: 8px;
            }
        }
        
        .blue .ban-slot {
            --glow-color: var(--glow-blue);
        }

        .red .ban-slot {
            --glow-color: var(--glow-red);
        }

        .slot:not(.active-slot):not(.filled) {
            opacity: 0.6;
            pointer-events: none;
        }

        /* 控制区域 */
        .controls-container {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 12px;
            margin-top: 10px;
            position: relative;
            padding: 10px;
            background: rgba(30, 41, 59, 0.7);
            border-radius: 12px;
            border: var(--flat-border);
        }
        
        .lock-btn-container {
            display: flex;
            gap: 10px;
            transform: scale(0.9);
            opacity: 0;
            transition: all 0.3s ease;
        }
        
        .lock-btn-container.visible {
            transform: scale(1);
            opacity: 1;
        }

        .controls button {
            padding: 8px 20px;
            border-radius: 8px;
            border: none;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 14px;
            letter-spacing: 0.5px;
            background: rgba(0,0,0,0.25);
            color: white;
            border: var(--flat-border);
            box-shadow: 
                0 4px 10px rgba(0, 0, 0, 0.3),
                inset 0 0 0 1px rgba(255,255,255,0.05);
            font-family: 'Orbitron', sans-serif;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .controls button:hover {
            background: rgba(255,255,255,0.1);
            transform: translateY(-3px);
            box-shadow: 
                0 7px 15px rgba(0, 0, 0, 0.4),
                inset 0 0 0 1px rgba(255,255,255,0.1);
        }
        
        #resetBtn {
            background: linear-gradient(to right, rgba(255, 107, 107, 0.25), rgba(255, 71, 87, 0.1));
        }
        
        #resetCurrentBtn {
            background: linear-gradient(to right, rgba(155, 89, 182, 0.25), rgba(142, 68, 173, 0.1));
        }
        
        #screenshotBtn {
            background: linear-gradient(to right, rgba(46, 213, 115, 0.25), rgba(46, 204, 113, 0.1));
        }
        
        #nextRoundBtn {
            background: linear-gradient(to right, rgba(155, 89, 182, 0.25), rgba(142, 68, 173, 0.1));
        }
        
        #swapBtn {
            background: linear-gradient(to right, rgba(255, 218, 121, 0.25), rgba(255, 191, 0, 0.1));
        }

        #search {
            padding: 10px 16px;
            padding-right: 40px;
            border-radius: 30px;
            border: none;
            background: rgba(0, 0, 0, 0.25);
            color: white;
            width: 100%;
            font-size: 14px;
            border: var(--flat-border);
            letter-spacing: 1px;
            font-family: 'Orbitron', sans-serif;
            appearance: none;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 15px center;
            background-size: 16px;
            padding-right: 40px;
        }
        
        #search:focus {
            outline: none;
            box-shadow: 0 0 0 2px rgba(84, 160, 255, 0.5);
        }

        .role-btn {
            padding: 6px 14px;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            transition: all 0.3s;
            font-weight: bold;
            font-size: 12px;
            background: rgba(0,0,0,0.4);
            color: white;
            border: var(--flat-border);
            font-family: 'Orbitron', sans-serif;
            display: flex;
            align-items: center;
            gap: 4px;
            flex-shrink: 0; /* 防止按钮缩小 */
        }
        
        .role-btn.active {
            transform: scale(1.05);
            box-shadow: 0 0 15px currentColor;
        }
        
        .role-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        }

        .对抗路-btn { color: #ff6b6b; }
        .打野-btn { color: #feca57; }
        .中路-btn { color: #1dd1a1; }
        .发育路-btn { color: #54a0ff; }
        .游走-btn { color: #c56cf0; }

        /* 英雄池样式 */
        .hero-pool {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 10px;
            max-height: 100%;
            overflow-y: auto;
            scrollbar-width: thin;
        }
        
        .hero-pool::-webkit-scrollbar {
            width: 6px;
            background: rgba(0,0,0,0.2);
            border-radius: 5px;
        }
        
        .hero-pool::-webkit-scrollbar-thumb {
            background: rgba(84, 160, 255, 0.5);
            border-radius: 5px;
            border: 1px solid rgba(255,255,255,0.1);
        }

        .hero-item {
            width: 100%;
            height: 64px;
            border-radius: 10px;
            position: relative;
            cursor: pointer;
            background-size: cover;
            background-position: center;
            transition: all 0.3s;
            transform-origin: center;
            box-shadow: 
                inset 0 0 0 1px rgba(255,255,255,0.1),
                inset 0 0 0 2px rgba(0,0,0,0.5);
        }
        
        .hero-item:hover {
            transform: scale(1.07);
            box-shadow: 
                inset 0 0 0 1px rgba(255,255,255,0.2),
                0 8px 20px rgba(0,0,0,0.5);
            filter: brightness(1.2);
        }
        
        .hero-item.pre-selected {
            border: 2px solid var(--pre-select) !important;
            box-shadow: 
                0 0 20px var(--glow-pre),
                inset 0 0 10px rgba(255, 215, 0, 0.4);
            transform: scale(1.07);
            z-index: 10;
        }

        .hero-item.disabled {
            filter: grayscale(1);
            pointer-events: none;
        }
        
        /* 状态标签 - 右上角 */
        .status-tag {
            position: absolute;
            top: 4px;
            right: 4px;
            background: rgba(0,0,0,0.8);
            color: white;
            font-size: 9px;
            padding: 2px 4px;
            border-radius: 8px;
            text-transform: uppercase;
            font-weight: bold;
            z-index: 2;
            display: flex;
            align-items: center;
            gap: 2px;
            max-width: 60px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .status-tag.used {
            background: rgba(255, 107, 107, 0.8);
            color: white;
        }
        
        .status-tag.opponent-used {
            background: rgba(84, 160, 255, 0.8);
            color: white;
        }
        
        .status-tag.both-used {
            background: rgba(155, 89, 182, 0.8);
            color: white;
        }
        
        .status-tag.global-banned {
            background: rgba(155, 89, 182, 0.8);
            color: white;
        }
        
        /* 分路标签 - 左上角 */
        .role-tags {
            position: absolute;
            top: 4px;
            left: 4px;
            display: flex;
            flex-direction: column;
            gap: 2px;
            z-index: 2;
        }
        
        .role-tag {
            background: rgba(0,0,0,0.8);
            color: white;
            font-size: 9px;
            padding: 3px 6px;
            border-radius: 12px;
            text-transform: uppercase;
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 2px;
            max-width: 40px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        /* 分路颜色 */
        .role-tag.对抗路 { color: #ff6b6b; }
        .role-tag.打野 { color: #feca57; }
        .role-tag.中路 { color: #1dd1a1; }
        .role-tag.发育路 { color: #54a0ff; }
        .role-tag.游走 { color: #c56cf0; }
        
        .hero-name {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(transparent, rgba(0,0,0,0.8));
            padding: 5px 3px 3px;
            font-size: 10px;
            text-align: center;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            font-weight: bold;
            letter-spacing: 0.5px;
            z-index: 2; /* 确保文字在闪光层上方 */
        }

        /* 语音播放指示器 */
        .voice-indicator {
            position: absolute;
            bottom: 4px;
            right: 4px;
            background: rgba(0,0,0,0.8);
            color: #ffda79;
            font-size: 9px;
            padding: 3px 6px;
            border-radius: 12px;
            font-weight: bold;
            display: none;
            z-index: 3;
        }
        
        .hero-item.playing .voice-indicator {
            display: block;
            animation: pulse 1s infinite;
        }
         #undoBtn {
            background: linear-gradient(45deg, #ff9f43, #ff6b6b);
        }
         .hero-item.disabled .status-tag {
            filter: none !important;
            opacity: 1 !important;
        }
/* 只针对缩放控件内的按钮 */
.zoom-controls .tech-button {
    background-color: rgba(30, 30, 50, 0.8);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.zoom-controls .tech-button:hover {
    background-color: rgba(50, 50, 80, 0.9);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-1px);
}
        /* 起始页面 */
 #startPage {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 增强电竞风格的深色渐变背景 */
    background: radial-gradient(ellipse at center, #0a1121 0%, #01050d 100%);
    /* 科技感网格背景 */
    background-image: 
        linear-gradient(rgba(30, 144, 255, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(30, 144, 255, 0.1) 1px, transparent 1px);
    background-size: 40px 40px; /* 网格大小 */
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1000;
    transition: opacity 0.5s ease;
    overflow-y: auto;
    padding: 20px;
    /* 霓虹发光边框效果 */
    box-shadow: 0 0 15px rgba(30, 144, 255, 0.3),
                0 0 30px rgba(138, 43, 226, 0.2) inset;
}
/* AI思考提示容器：确保父容器为相对定位，避免提示偏移 */
.bp-team-container { /* 需确认蓝/红方BAN/PICK区域的父容器类名，可根据实际UI调整 */
    position: relative;
}

/* 优化提示的加载图标动画 */
.ai-thinking-tip .fa-spinner {
    animation: spin 1.2s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* 发光装饰层 */
#startPage::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 动态霓虹光斑 */
    background: radial-gradient(circle at 20% 30%, rgba(30, 144, 255, 0.15) 0%, transparent 40%),
                radial-gradient(circle at 80% 70%, rgba(138, 43, 226, 0.15) 0%, transparent 40%);
    z-index: -1;
    animation: glowShift 20s infinite alternate;
}

/* 几何装饰元素 */
#startPage::after {
    content: '';
    position: absolute;
    top: 10%;
    right: 10%;
    width: 150px;
    height: 150px;
    border: 2px solid rgba(30, 144, 255, 0.2);
    transform: rotate(45deg);
    border-radius: 8px;
    z-index: -1;
    animation: rotate 30s linear infinite;
}

/* 网格移动动画 */
@keyframes gridMove {
    0% { background-position: 0 0; }
    100% { background-position: 40px 40px; }
}

/* 光斑移动动画 */
@keyframes glowShift {
    0% { background-position: 20% 30%, 80% 70%; }
    100% { background-position: 30% 20%, 70% 80%; }
}

/* 几何元素旋转动画 */
@keyframes rotate {
    0% { transform: rotate(45deg) scale(1); }
    50% { transform: rotate(225deg) scale(1.1); }
    100% { transform: rotate(405deg) scale(1); }
}

/* 启动动画 */
#startPage {
    animation: gridMove 15s linear infinite;
}

/* 建议内容元素样式（配合整体风格） */
#startPage > * {
    position: relative; /* 确保内容在装饰层上方 */
    z-index: 1;
    text-shadow: 0 0 8px rgba(30, 144, 255, 0.3); /* 文本发光效果 */
}
        
.game-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.2rem;
    text-align: center;
    margin: 10px 0;
    background: linear-gradient(45deg, #54a0ff, #ff6b6b, #ffda79);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 
        0 0 20px rgba(84, 160, 255, 0.8),
        0 0 30px rgba(255, 107, 107, 0.5);
    animation: title-glow 2.5s infinite alternate;
    letter-spacing: 15px;
}
        
        .subtitle {
            font-size: 1.25rem;
            color: #adadad;
             margin-top: 15px;
            letter-spacing: 4px;
            margin-bottom: 40px;
            text-align: center;
            font-family: 'Orbitron', sans-serif;
            text-transform: uppercase;
            font-weight: 300;
        }
        
 .kpl-logo {
    color: #23d9e6;
    font-size: 2.8rem;
    font-weight: 900;
    margin: 20px 0;
    text-transform: uppercase;
    letter-spacing: 6px;
    font-family: 'Orbitron', sans-serif;
    position: relative;
    text-shadow: 
        0 0 8px rgba(0, 238, 255, 0.7),
        0 0 20px rgba(0, 180, 255, 0.5);
    transform: perspective(500px) translateZ(20px); /* 3D悬浮感 */
}
/* 新增Logo动态扫描线 */
.kpl-logo::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(0, 240, 255, 0.9) 50%, 
        transparent 100%);
    animation: scanLine 3s linear infinite;
}
/* 两侧几何装饰优化 */
.kpl-logo::before {
    content: '<<';
    position: absolute;
    left: -30px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(0, 240, 255, 0.6);
    font-size: 1.5rem;
    animation: flicker 4s ease-in-out infinite;
}
.kpl-logo span:last-child::after {
    content: '>>';
    position: absolute;
    right: -30px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(0, 240, 255, 0.6);
    font-size: 1.5rem;
    animation: flicker 3.5s ease-in-out infinite;
}

/* 主文字动画：脉冲发光+轻微抖动（模拟电子信号） */
@keyframes textPulse {
    0%, 100% {
        text-shadow: 
            0 0 5px rgba(0, 238, 255, 0.557),
            0 0 10px rgba(93, 187, 193, 0.6),
            0 0 20px rgba(0, 180, 255, 0.4);
        transform: translateZ(30px) scale(1);
    }
    50% {
        text-shadow: 
            0 0 8px rgba(110, 221, 228, 0.874),
            0 0 15px rgba(0, 240, 255, 0.8),
            0 0 30px rgba(0, 180, 255, 0.6);
        transform: translateZ(30px) scale(1.02);
    }
}

/* 底部线条扫描动画 */
@keyframes scanLine {
    0% { background-position: -100% 0; }
    100% { background-position: 100% 0; }
}

/* 两侧符号闪烁动画 */
@keyframes flicker {
    0%, 100%, 50% { opacity: 0.6; }
    20%, 80% { opacity: 0.3; }
    30%, 70% { opacity: 0.8; }
}

/* 应用动画 */
.kpl-logo {
    animation: textPulse 3s ease-in-out infinite;
}
  .global-bp-toggle {
    margin: 0;
    width: calc(50% - 6px); /* 两列布局 */
    padding: 18px 20px;
    background: rgba(30, 41, 59, 0.8);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Orbitron', sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
        .global-bp-toggle i {
    font-size: 1.2rem;
    width: 24px;
    text-align: center;
}
/* 模式差异化配色 */
#globalBP_BO5 i { color: #54a0ff; } /* BO5-科技蓝 */
#globalBP_BO7 i { color: #2ed573; } /* BO7-胜利绿 */
#challengerCup i { color: #00a8ff; } /* 挑战者-天青 */
#peakMatch i { color: #ffda79; } /* 巅峰对决-金色 */
#aiMode i { color: #ff6b6b; } /* AI模式-警告红 */
/* 选中状态强化 */
.global-bp-toggle.active {
    background: linear-gradient(135deg, rgba(155,89,182,0.3), rgba(84,160,255,0.2));
    border-color: currentColor;
    box-shadow: 
        0 0 20px currentColor,
        inset 0 0 10px rgba(255,255,255,0.1);
    transform: translateY(-5px);
}
.global-bp-toggle.active label {
    color: #fff;
    font-weight: bold;
}

/* 单选框美化 */
.global-bp-toggle input {
    width: 22px;
    height: 22px;
    cursor: pointer;
    accent-color: #9b59b6;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.3);
}

        @keyframes title-glow {
            from { text-shadow: 0 0 10px rgba(84, 160, 255, 0.7), 0 0 20px rgba(255, 107, 107, 0.3); }
            to { text-shadow: 0 0 20px rgba(84, 160, 255, 0.9), 0 0 40px rgba(255, 107, 107, 0.5); }
        }

        #startButton {
            padding: 18px 45px;
            font-size: 24px;
            background: rgba(84, 160, 255, 0.15);
            border: var(--flat-border);
            border-radius: 35px;
            color: white;
            cursor: pointer;
            transition: all 0.3s;
            font-weight: bold;
            letter-spacing: 2px;
            text-shadow: 0 0 10px rgba(255,255,255,0.7);
            animation: pulse 1.5s infinite, fade 2s infinite alternate;
            box-shadow: 
                0 0 30px rgba(84, 160, 255, 0.2),
                inset 0 0 15px rgba(84, 160, 255, 0.4);
            font-family: 'Orbitron', sans-serif;
            margin-top: 20px;
            position: relative;
            overflow: hidden;
        }
        
        #startButton:hover {
            transform: scale(1.1);
            background: rgba(84, 160, 255, 0.25);
            box-shadow: 
                0 0 50px rgba(84, 160, 255, 0.5),
                inset 0 0 20px rgba(84, 160, 255, 0.5);
        }

        /* 预选效果 */
        .pre-select-avatar {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            border-radius: 8px;
            opacity: 0;
            transform: translateY(-100%);
            transition: all 0.3s ease;
            z-index: 10;
        }
        
        .pre-select-avatar.show {
            opacity: 1;
            transform: translateY(0);
            animation: pre-select-expand 0.4s ease-out;
        }
        
        @keyframes pre-select-expand {
            0% {
                transform: translateY(-100%) scale(0.8);
                opacity: 0;
            }
            70% {
                transform: translateY(0) scale(1.1);
                opacity: 1;
            }
            100% {
                transform: translateY(0) scale(1);
                opacity: 1;
            }
        }
        
        .slot.pre-selected {
            animation: pulse 1.5s infinite, glow 1.5s infinite;
        }

        /* 截图预览 */
        .screenshot-preview {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 300px;
            height: auto;
            border-radius: 12px;
            border: 3px solid #2ed573;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 20px rgba(46, 213, 115, 0.5);
            z-index: 1000;
            display: none;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        
        .screenshot-preview img {
            width: 100%;
            height: auto;
            display: block;
        }
        
        .screenshot-controls {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.8);
            padding: 10px;
            display: flex;
            justify-content: space-around;
        }
        
        .screenshot-controls button {
            padding: 6px 12px;
            border-radius: 20px;
            border: none;
            background: rgba(255, 255, 255, 0.15);
            color: white;
            cursor: pointer;
            transition: all 0.3s;
            font-family: 'Orbitron', sans-serif;
            font-size: 12px;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .screenshot-controls button:hover {
            background: rgba(255, 255, 255, 0.25);
            transform: translateY(-2px);
        }
.hero-pool-rows {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .used-hero-item-wrapper {
    position: relative; /* 必须，作为角标定位的基准 */
}
.disabled-yuanliu-corner {
    position: absolute;
    bottom: -2px;
    right: -2px;
    display: flex;
    flex-direction: column; /* 让多个小头像垂直排列 */
    gap: 1px; /* 小头像之间的间距 */
}
.disabled-yuanliu-avatar {
    width: 22px;    /* 尺寸可以根据您的主头像大小进行微调 */
    height: 22px;   /* 尺寸可以根据您的主头像大小进行微调 */
    border-radius: 4px;
    filter: grayscale(100%); /* 灰度表示禁用 */
    opacity: 0.8;
    border: 1px solid #333; /* 边框 */
    background-color: #111;
}

    /* 每行英雄容器 */
    .hero-pool-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 5px;
        background: rgba(0,0,0,0.2);
        border-radius: 8px;
    }
    
    /* 添加小标题显示第几局 */
    .round-title {
        font-size: 12px;
        font-weight: bold;
        margin-bottom: 5px;
        color: #9b59b6;
        text-align: center;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
    }
    
    /* 胜负标志 */
    .win-indicator {
        display: flex;
        align-items: center;
        padding: 2px 8px;
        border-radius: 10px;
        font-size: 10px;
        font-weight: bold;
    }
    
    .blue-win-indicator {
        background: rgba(84, 160, 255, 0.3);
        color: var(--blue);
    }
    
    .red-win-indicator {
        background: rgba(255, 71, 87, 0.3);
        color: var(--red);
    }
    
    /* 音乐控制区域 */
    .music-controls {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
        justify-content: center;
        margin-top: 15px;
        padding: 12px;
        background: rgba(30, 41, 59, 0.7);
        border-radius: 12px;
        border: var(--flat-border);
    }
    
    .music-select {
        padding: 10px 15px;
        border-radius: 30px;
        border: none;
        background: rgba(0, 0, 0, 0.25);
        color: white;
        width: 100%;
        max-width: 200px;
        font-size: 14px;
        border: var(--flat-border);
        font-family: 'Orbitron', sans-serif;
        appearance: none;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 15px center;
        background-size: 16px;
        padding-right: 40px;
    }
    
    .music-select:focus {
        outline: none;
        box-shadow: 0 0 0 2px rgba(84, 160, 255, 0.5);
    }
    
    .music-control-group {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
    }
    
    .music-buttons {
        display: flex;
        gap: 8px;
    }
    
    .music-btn {
        padding: 8px 16px;
        border-radius: 30px;
        border: none;
        background: rgba(0, 0, 0, 0.25);
        color: white;
        cursor: pointer;
        transition: all 0.3s;
        font-family: 'Orbitron', sans-serif;
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 6px;
        border: var(--flat-border);
    }
    
    .music-btn:hover {
        background: rgba(255, 255, 255, 0.1);
        transform: translateY(-2px);
    }
    
    .music-btn.play {
        background: linear-gradient(to right, rgba(46, 213, 115, 0.25), rgba(46, 204, 113, 0.1));
    }
    
    .music-btn.pause {
        background: linear-gradient(to right, rgba(255, 107, 107, 0.25), rgba(255, 71, 87, 0.1));
    }
    
    /* 音量控制 */
    .volume-control {
        display: flex;
        align-items: center;
        gap: 8px;
        background: rgba(0, 0, 0, 0.25);
        padding: 5px 12px;
        border-radius: 30px;
        border: var(--flat-border);
    }
    
    .volume-control i {
        color: #54a0ff;
    }
    
    .volume-slider {
        -webkit-appearance: none;
        width: 100px;
        height: 5px;
        background: rgba(255,255,255,0.1);
        border-radius: 5px;
        outline: none;
    }
    
    .volume-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: var(--blue);
        cursor: pointer;
        box-shadow: 0 0 5px rgba(84, 160, 255, 0.8);
    }
    
    /* 胜负选择面板 */
.result-panel {
    width: 100%;
    max-width: 100%;
    display: flex;
    gap: 15px;
    padding: 15px;
    background: rgba(30, 41, 59, 0.8);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    justify-content: center;
    box-sizing: border-box;
}
    
    .result-btn {
        padding: 10px 20px;
        border-radius: 8px;
        border: none;
        font-weight: bold;
        cursor: pointer;
        font-size: 14px;
        letter-spacing: 0.5px;
        color: white;
        border: var(--flat-border);
        font-family: 'Orbitron', sans-serif;
        display: flex;
        align-items: center;
        gap: 5px;
    }
    
    .blue-win {
        background: linear-gradient(to right, rgba(84, 160, 255, 0.3), rgba(84, 160, 255, 0.1));
    }
    
    .red-win {
        background: linear-gradient(to right, rgba(255, 71, 87, 0.3), rgba(255, 71, 87, 0.1));
    }
    
    .result-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    }
    
    /* 选边权面板 - 优化样式 */
.side-selector {
    display: flex;
     position: fixed;
    flex-direction: column;
    gap: 10px;
     top: 60%; 
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999; /* 高于普通元素，不被遮挡 */
    padding: 15px;
    background: linear-gradient(45deg, rgb(79, 95, 242), rgb(84, 160, 255));
    border-radius: 12px;
    border: 1px solid rgb(155, 89, 182);
    margin-top: 10px;
    box-shadow: 0 0 15px rgb(155, 89, 182);
}
    
    .side-selector p {
        font-size: 14px;
        text-align: center;
        margin: 0;
        color: #e0e0e0;
        text-shadow: 0 0 5px rgba(255,255,255,0.3);
    }
    
    .side-selector .loser-name {
        font-weight: bold;
        color: #ffda79;
        margin: 0 5px;
    }
    
    /* 操作按钮组 - 优化样式 */
    .action-buttons {
        display: flex;
        gap: 10px;
        justify-content: center;
    }
    
    .action-button {
        padding: 8px 16px;
        border-radius: 25px;
        border: none;
        background: linear-gradient(45deg, #9b59b6, #8e44ad);
        color: white;
        font-weight: bold;
        cursor: pointer;
        transition: all 0.3s;
        font-family: 'Orbitron', sans-serif;
        display: flex;
        align-items: center;
        gap: 6px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    }
    
    .action-button:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
    }
    
    .action-button.undo {
        background: linear-gradient(45deg, #54a0ff, #2e86de);
    }
    
    /* 全局BP英雄池展示区 - 新位置 */
    .global-pool-container {
        display: flex;
        flex-direction: column;
        gap: 15px;
        padding: 20px;
        background: rgba(20, 25, 41, 0.8);
        border-radius: 12px;
        border: var(--flat-border);
        margin-top: 15px;
    }
    
    .pool-section {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .pool-title {
        font-family: 'Orbitron', sans-serif;
        font-size: 1.1rem;
        padding: 5px 10px;
        border-radius: 8px;
        background: rgba(0,0,0,0.3);
    }
    
    .blue-pool-title {
        color: var(--blue);
        text-shadow: 0 0 8px var(--blue);
        border-left: 3px solid var(--blue);
    }
    
    .red-pool-title {
        color: var(--red);
        text-shadow: 0 0 8px var(--red);
        border-right: 3px solid var(--red);
    }
    
    .hero-pool-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 5px;
        background: rgba(0,0,0,0.2);
        border-radius: 8px;
    }
    
    .used-hero-item {
        width: 50px;
        height: 50px;
        border-radius: 8px;
        background-size: cover;
        background-position: center;
        position: relative;
        box-shadow: 0 3px 10px rgba(0,0,0,0.3);
    }
    
    .used-hero-item::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.4);
        border-radius: 8px;
    }
    
    .used-hero-item .game-count {
        position: absolute;
        bottom: 2px;
        right: 2px;
        background: rgba(0,0,0,0.7);
        color: white;
        font-size: 10px;
        padding: 2px 5px;
        border-radius: 10px;
        z-index: 2;
    }

    /* 重置按钮组 */
    .reset-group {
        display: flex;
        gap: 10px;
    }
    

    
    /* 缩放提示 */
    .zoom-warning {
        position: fixed;
        top: 10px;
        left: 0;
        right: 0;
        text-align: center;
        background: rgba(255, 71, 87, 0.8);
        color: white;
        padding: 10px;
        font-family: 'Orbitron', sans-serif;
        z-index: 9999;
        display: none;
    }
    
    /* 全局BP说明 */
    .global-bp-info {
        background: rgba(155, 89, 182, 0.2);
        border: 1px solid var(--global-bp);
        border-radius: 12px;
        padding: 15px;
        margin-top: 15px;
        font-size: 14px;
        line-height: 1.6;
    }
    
    .global-bp-info h4 {
        color: #9b59b6;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .global-bp-info ul {
        padding-left: 20px;
        margin: 10px 0;
    }
    
    .global-bp-info li {
        margin-bottom: 5px;
    }
    
    /* 全局BP模式选择容器 */
    .global-bp-options {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin: 20px 0;
    }
    
    .global-bp-toggle {
        margin: 0;
        width: 100%;
    }
    
    /* 防伪水印 */
.watermark-container {
  /* 固定定位在右下角 */
  position: fixed;
  bottom: 20px;
  right: 20px;
  /* Flex垂直排列（图片在上，文字在下） */
  display: flex;
  flex-direction: column;
  align-items: center; /* 水平居中对齐 */
  gap: 8px; /* 图片与文字的间距 */
  z-index: 999;
  pointer-events: none; /* 点击穿透 */
}

/* 图片部分 */
.watermark-img {
  width: 100px; /* 图片宽度（根据实际图片调整） */
  height: 100px; /* 图片高度（根据实际图片调整） */
  background-image: url('zanshang.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center; /* 图片居中显示 */
}

/* 文字部分 */
.watermark-text {
  color: #fff; /* 文字颜色（根据背景调整，确保清晰） */
  font-size: 14px; /* 文字大小 */
  font-weight: 500;
  text-shadow: 0 0 2px rgba(0,0,0,0.5); /* 轻微阴影增强可读性 */
  white-space: nowrap; /* 防止文字换行 */
}
     .modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.85);
        z-index: 10000;
        overflow: auto;
        animation: modalFadeIn 0.4s ease;
    }

    @keyframes modalFadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    .modal-content {
        background: var(--dark-panel);
        margin: 5% auto;
        padding: 25px;
        border-radius: 16px;
        border: var(--flat-border);
        box-shadow: 0 0 40px rgba(155, 89, 182, 0.6);
        max-width: 1000px;
        width: 90%;
        position: relative;
        animation: modalSlideIn 0.4s ease;
    }

    @keyframes modalSlideIn {
        from { transform: translateY(-50px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }

    .close-btn {
        position: absolute;
        top: 20px;
        right: 25px;
        font-size: 32px;
        color: var(--red);
        cursor: pointer;
        transition: all 0.3s;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }

    .close-btn:hover {
        color: white;
        background: var(--red);
        transform: rotate(90deg);
    }

    .modal-header {
        text-align: center;
        margin-bottom: 25px;
        padding-bottom: 15px;
        border-bottom: var(--flat-border);
    }

    .modal-header h2 {
        font-family: 'Orbitron', sans-serif;
        background: linear-gradient(45deg, #9b59b6, #54a0ff);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        font-size: 2rem;
        letter-spacing: 2px;
        margin-bottom: 15px;
    }

    .round-info {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        font-family: 'Orbitron', sans-serif;
    }

    /* 调整英雄池样式以适应模态窗口 */
    .modal .global-pool-container {
        max-width: 100%;
        margin: 0;
    }

    .modal .pool-section {
        background: rgba(0, 0, 0, 0.3);
        padding: 15px;
    }

    .modal .hero-pool-rows {
        max-height: 400px;
        overflow-y: auto;
    }

    .modal .hero-pool-row {
        padding: 10px;
        background: rgba(30, 41, 59, 0.5);
    }

    .modal .used-hero-item {
        width: 60px;
        height: 60px;
    }
    /* 更新公告栏样式 */
.update-panel {
    max-width: 900px;
    margin: 30px auto;
    background: rgba(30, 41, 59, 0.9);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid rgba(155,89,182,0.5);
    box-shadow: 0 0 25px rgba(155,89,182,0.2);
    transition: all 0.5s ease;
}
/* 面板头部交互优化 */
.update-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.3rem;
    color: #26fad3;
    cursor: pointer;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.update-header i {
    transition: transform 0.3s ease;
}
.update-panel.active .update-header i {
    transform: rotate(180deg);
}
/* 新增的开始控制容器样式 */
.start-controls-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 25px;
    margin: 20px 0;
    justify-content: center;
    width: 100%;
}

/* 调整全局BP选项样式 */
.global-bp-options {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

/* 调整开始按钮样式 */
#startButton {
    padding: 15px 35px;
    font-size: 1.5rem;
    margin: 0;
    flex-shrink: 0;
}


.update-content {
    max-height: 0;
    opacity: 0;
    overflow-y: auto; /* ✅ 关键修复 */
    transition: max-height 0.5s ease, opacity 0.3s ease 0.2s;
}

.update-panel.active .update-content {
    max-height: 70vh; /* ✅ 更灵活的高度 */
    opacity: 1;
    padding: 15px 0;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   更新公告栏滚动条美化
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.update-content::-webkit-scrollbar {
    width: 5px;                 /* 纵向滚动条宽度 */
}
.update-content::-webkit-scrollbar-track {
    background: rgba(255,255,255,.05);
    border-radius: 3px;
}
.update-content::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg,
                                rgba(84,160,255,.6),
                                rgba(155,89,182,.8));
    border-radius: 3px;
    transition: all .3s ease;
}
.update-content::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg,
                                rgba(84,160,255,.9),
                                rgba(155,89,182,1));
    cursor: pointer;
    transform: scaleX(1.3);     /* 悬停轻微放大 */
}

/* Firefox 支持 */
.update-content {
    scrollbar-width: thin;
    scrollbar-color: rgba(155,89,182,.8) transparent;
}
/* 更新项卡片化 */
.update-item {
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding: 18px 10px;
    margin-bottom: 10px;
    border-radius: 8px;
    transition: background 0.3s ease;
}
.update-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
.update-item:hover {
    background: rgba(0,0,0,0.3);
}

.update-date {
    background: linear-gradient(45deg, #54a0ff, #9b59b6);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 12px;
    font-weight: bold;
    font-size: 0.95rem;
    box-shadow: 0 3px 10px rgba(84,160,255,0.3);
}
/* 最新更新日期特殊标注 */
.update-item:first-child .update-date {
    background: linear-gradient(45deg, #ff6b6b, #ff4757);
    box-shadow: 0 3px 10px rgba(255,71,87,0.3);
}

/* 更新列表项美化 */
.update-details ul {
    padding-left: 25px;
    margin: 10px 0;
}
.update-details li {
    margin-bottom: 8px;
    color: #e0e0e0;
    line-height: 1.6;
    list-style-type: none;
    position: relative;
}

/* BUG反馈样式 */
.bug-report {
    background: rgba(255, 71, 87, 0.2);
    border: 1px solid var(--red);
    border-radius: 12px;
    padding: 12px 20px;
    margin: 15px 0;
    text-align: center;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.1rem;
    color: #ff6b6b;
    cursor: pointer;
    transition: all 0.3s;
}

.bug-report:hover {
    background: rgba(255, 71, 87, 0.3);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(255, 71, 87, 0.2);
}

.bug-report i {
    margin-right: 10px;
    animation: bugPulse 2s infinite;
}

@keyframes bugPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* 联机对战面板 */
.online-panel {
    background: rgba(30, 41, 59, 0.95);
    border: 1px solid rgba(46,213,115,0.5);
    border-radius: 16px;
    padding: 20px;
    margin: 30px auto;
    width: 100%;
    max-width: 900px;
    text-align: center;
    box-shadow: 0 0 30px rgba(46,213,115,0.2);
}

.online-panel h3 {
    color: #2ed573;
    margin-bottom: 20px;
    font-family: 'Orbitron', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 1.4rem;
    text-shadow: 0 0 10px rgba(46,213,115,0.5);
}

.online-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.online-input {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

.online-input input {
    padding: 10px 15px;
    border-radius: 30px;
    border: none;
    background: rgba(0, 0, 0, 0.25);
    color: white;
    width: 200px;
    font-size: 14px;
    border: var(--flat-border);
    font-family: 'Orbitron', sans-serif;
}

.online-input input:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--win-color);
}

.online-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.online-btn {
    padding: 10px 20px;
    border-radius: 30px;
    border: none;
    background: linear-gradient(45deg, var(--win-color), #1dd1a1);
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    font-family: 'Orbitron', sans-serif;
    display: flex;
    align-items: center;
    gap: 8px;
}

.online-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(46, 213, 115, 0.3);
}

.online-btn.join {
    background: linear-gradient(45deg, #54a0ff, #2e86de);
}

.online-status {
    margin-top: 15px;
    padding: 10px;
    border-radius: 10px;
    background: rgba(0,0,0,0.3);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
}

.online-status.connected {
    color: var(--win-color);
}

.online-status.disconnected {
    color: var(--lose-color);
}

/* 联机玩家信息 */
.player-info {
    display: flex;
    justify-content: space-around;
    margin-top: 15px;
}

.player-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px;
    border-radius: 10px;
    background: rgba(0,0,0,0.3);
    min-width: 120px;
}

.player-badge.blue {
    border-left: 3px solid var(--blue);
}

.player-badge.red {
    border-right: 3px solid var(--red);
}

.player-role {
    font-size: 12px;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 15px;
    background: rgba(255,255,255,0.15);
}

.player-name {
    font-weight: bold;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* 添加在线状态样式 */
.online-status.connecting {
    color: #ffda79; /* 连接中 - 黄色 */
}

.online-status.connected {
    color: #2ed573; /* 已连接 - 绿色 */
}

.online-status.disconnected {
    color: #ff6b6b; /* 已断开 - 红色 */
}

/* 玩家信息样式 */
.player-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px;
    border-radius: 10px;
    background: rgba(0,0,0,0.3);
    min-width: 120px;
}

.player-badge.blue {
    border-left: 3px solid var(--blue);
}

.player-badge.red {
    border-right: 3px solid var(--red);
}

.player-role {
    font-size: 12px;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 15px;
    background: rgba(255,255,255,0.15);
}

.player-name {
    font-weight: bold;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
}

.status-indicator.connected {
    background-color: var(--win-color);
    box-shadow: 0 0 8px var(--win-color);
}

.status-indicator.disconnected {
    background-color: var(--lose-color);
}
/* 联机状态指示器 */
.status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
}

.status-indicator.connected {
    background-color: var(--win-color);
    box-shadow: 0 0 8px var(--win-color);
}

.status-indicator.disconnected {
    background-color: var(--lose-color);
}
/* 巅峰对决模式专用样式 */
.peak-match-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--background);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    padding: 20px;
    overflow: auto;
}

.peak-match-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: rgba(30, 41, 59, 0.8);
    border-radius: 12px;
    margin-bottom: 20px;
    border: var(--flat-border);
}

.peak-match-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.8rem;
    color: #ffda79;
    text-shadow: 0 0 10px rgba(255, 218, 121, 0.7);
    display: flex;
    align-items: center;
    gap: 10px;
}

.current-role-indicator {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.2rem;
    color: var(--blue);
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 20px;
    border: 1px solid var(--blue);
}

.peak-match-content {
    display: flex;
    flex: 1;
    gap: 20px;
}

.peak-team-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* background: rgba(30, 41, 59, 0.7); */
    border-radius: 12px;
    padding: 15px;
    /* border: var(--flat-border); */
}

.blue-side {
    border-left: 4px solid var(--blue);
}

.red-side {
    border-right: 4px solid var(--red);
}

.peak-team-name {
    text-align: center;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.4rem;
    padding: 10px;
    margin-bottom: 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
}

.blue-side .peak-team-name {
    color: var(--blue);
    text-shadow: 0 0 8px var(--blue);
}

.red-side .peak-team-name {
    color: var(--red);
    text-shadow: 0 0 8px var(--red);
}

/* 英雄选择池样式 - 分开独立显示 */
.peak-hero-pool-container {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 15px;
    height: 300px;
    overflow-y: auto;
    border: var(--flat-border);
    margin: 60px 0 0 0; /* 上边距20px，下边距15px，左右0 */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.1);
}

.peak-hero-pool-container::-webkit-scrollbar {
    width: 8px;
}

.peak-hero-pool-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

.peak-hero-pool-container::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

.peak-hero-pool-container::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.5);
}

.peak-hero-pool-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    color: #ffda79;
    margin-bottom: 10px;
    text-align: center;
}

.peak-hero-pool {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 5px;
}

/* 巅峰对决模式英雄项样式 - 与槽位大小一致 */
.peak-hero-item {
    width: 65px;
    height: 65px;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.peak-hero-item:hover {
    transform: scale(1.05);
    border-color: var(--glow-pick);
    box-shadow: 0 0 15px var(--glow-pick);
}

.peak-hero-item.selected {
    border-color: gold;
    box-shadow: 0 0 20px gold;
}

.peak-hero-item .hero-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 10px;
    padding: 2px;
    text-align: center;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

/* 槽位区域 - 改为单行五列布局 */

.peak-picks-row {
    display: flex;
    justify-content: space-between;
    gap: 1px;
    margin-top: 15px;
    width: 100%;
    border: 1px solid rgba(255, 215, 0, 0.5); /* 淡金色边框 */
    border-radius: 8px;
    padding: 10px;
    animation: glow-pulse 2s infinite alternate; /* 闪烁动画 */
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3); /* 淡金色发光效果 */
}

/* 闪烁动画 */
@keyframes glow-pulse {
    0% {
        border-color: rgba(255, 215, 0, 0.3);
        box-shadow: 0 0 5px rgba(255, 215, 0, 0.2);
    }
    100% {
        border-color: rgba(255, 215, 0, 0.8);
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
    }
}
.peak-pick-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
  
    border-radius: 8px;
    padding: 5px;
   
    min-height: 100px;
    flex: 1;
}

.peak-slot-label {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
    padding: 5px 10px;
    text-align: center;
    border-radius: 6px;
    margin-bottom: 8px;
    width: 80%;
}

.peak-pick-slot[data-role="对抗路"] .peak-slot-label {
    background: rgba(255, 107, 107, 0.2);
    color: #ff6b6b;
}

.peak-pick-slot[data-role="打野"] .peak-slot-label {
    background: rgba(254, 202, 87, 0.2);
    color: #feca57;
}

.peak-pick-slot[data-role="中路"] .peak-slot-label {
    background: rgba(29, 209, 161, 0.2);
    color: #1dd1a1;
}

.peak-pick-slot[data-role="发育路"] .peak-slot-label {
    background: rgba(84, 160, 255, 0.2);
    color: var(--blue);
}

.peak-pick-slot[data-role="游走"] .peak-slot-label {
    background: rgba(197, 108, 240, 0.2);
    color: #c56cf0;
}

.peak-slot-content {
    width: 70px;
    height: 70px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
}

.peak-slot-content.filled {
    background-size: cover;
    background-position: center;
    color: transparent;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.peak-controls-center {
    width: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.peak-lock-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.peak-confirm-btn, .peak-cancel-btn {
    padding: 10px 15px;
    border: none;
    border-radius: 20px;
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
}

.peak-confirm-btn {
    background: linear-gradient(45deg, #2ed573, #1dd1a1);
    color: white;
}

.peak-cancel-btn {
    background: linear-gradient(45deg, #ff6b6b, #ff4757);
    color: white;
}

.peak-confirm-btn:hover, .peak-cancel-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.peak-lock-all-btn {
    padding: 12px 20px;
    border: none;
    border-radius: 25px;
    background: linear-gradient(45deg, #9b59b6, #8e44ad);
    color: white;
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
}

.peak-lock-all-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(155, 89, 182, 0.4);
}

.peak-match-footer {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
    padding: 15px;
    background: rgba(30, 41, 59, 0.7);
    border-radius: 12px;
    border: var(--flat-border);
}
/* 巅峰对决底部按钮样式 - 更明显的颜色 */
.peak-match-footer .tech-button {
    background: linear-gradient(45deg, #ff6b6b, #ff4757);
    color: white;
    border: 2px solid #ff4757;
    box-shadow: 0 0 15px rgba(255, 71, 87, 0.6);
}

.peak-match-footer .tech-button:first-child {
    background: linear-gradient(45deg, #54a0ff, #2e86de);
    border: 2px solid #2e86de;
    box-shadow: 0 0 15px rgba(84, 160, 255, 0.6);
}

.peak-match-footer .tech-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
}
/* 响应式调整 */

.red-side .peak-picks-row {
    flex-direction: row-reverse;
}

/* 确保标签位置正确 */
.red-side .peak-pick-slot {
    flex-direction: column;
}
.peak-selection-anim {
    transition: all 0.3s ease;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
}

.blue-anim {
    box-shadow: 0 0 20px rgba(84, 160, 255, 0.8);
}

.red-anim {
    box-shadow: 0 0 20px rgba(255, 71, 87, 0.8);
}
/* 添加这些样式到您的CSS文件中 */
@keyframes pulse-glow {
    0% { box-shadow: 0 0 20px rgba(255, 255, 255, 0.6); }
    50% { box-shadow: 0 0 40px rgba(255, 255, 255, 0.9), 0 0 60px var(--glow-color); }
    100% { box-shadow: 0 0 20px rgba(255, 255, 255, 0.6); }
}

.selection-glow {
    animation: pulse-glow 2s infinite;
}

.blue-anim {
    --glow-color: rgba(84, 160, 255, 0.8);
}

.red-anim {
    --glow-color: rgba(255, 71, 87, 0.8);
}
.peak-online-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 0; /* 移除上边距 */
}
/* 确保过渡效果平滑 */
.peak-selection-anim {
    will-change: transform, left, top, box-shadow, filter;
}
/* 添加巅峰对决联机按钮样式 */
.online-btn.peak {
    background: linear-gradient(45deg, #ff9a00, #ff6a00);
    border: 2px solid #ff9a00;
}

.online-btn.peak:hover {
    background: linear-gradient(45deg, #ff8a00, #ff5a00);
    box-shadow: 0 0 15px rgba(255, 154, 0, 0.6);
}

.online-btn.peak.join {
    background: linear-gradient(45deg, #ff6b6b, #ff3838);
    border: 2px solid #ff6b6b;
}

.online-btn.peak.join:hover {
    background: linear-gradient(45deg, #ff5b5b, #ff2828);
    box-shadow: 0 0 15px rgba(255, 107, 107, 0.6);
}

.peak-online-status {
    color: #fff;
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    padding: 8px 15px;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.5);
    display: inline-block;
    margin: 0 auto;
}

.peak-online-status.connected {
    color: #4cd964;
    background: rgba(76, 217, 100, 0.2);
}

.peak-online-status.disconnected {
    color: #ff3b30;
    background: rgba(255, 59, 48, 0.2);
}
.time-control {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    padding: 5px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

.time-control label {
    color: white;
    font-size: 14px;
}

.time-control input {
    width: 60px;
    padding: 5px;
    border: 1px solid #444;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.time-control button {
    padding: 5px 10px;
    background: var(--blue);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.time-control button:hover {
    background: var(--blue-hover);
}
/* 放在最外层，脱离文档流 */
/* 关键：移除fixed定位，改为文档流布局，确保跟随resultPanel */
/* 结果面板和图表容器 */
/* 修复结果面板和图表容器对齐 */
/* 优化图表容器样式 */
.result-and-chart-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    max-width: 1200px;
    margin: 20px auto 0;
}

/* 优化强度图表卡片 */
.strength-card {
    width: 100%;
    background: rgba(30, 41, 59, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    color: #fff;
    font-family: 'Orbitron', sans-serif;
    position: relative;
    overflow: hidden;
}
.strength-card, .kpl-chart-container {
    /* 优化字体族：保留Orbitron，补充系统字体避免模糊 */
    font-family: 'Orbitron', Arial, Helvetica, sans-serif;
    /* 抗锯齿：解决字体边缘模糊（兼容主流浏览器） */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: always;
    /* 字重降级：从900改为600，正常粗体更美观 */
    font-weight: 600;
}
/* 优化标题样式 */
.strength-card h3 {
    color: #ffda79;
    font-size: 1.4rem;
    font-weight: 600; /* 取消过粗的900 */
    text-align: center;
    margin-bottom: 20px;
    /* 简化阴影：避免多重阴影叠加导致模糊 */
    text-shadow: 0 0 6px rgba(255, 218, 121, 0.4); /* 原10px → 6px，透明度降低 */
    letter-spacing: 1px;
}

/* 优化克制提示样式 */
.strength-tips {
    margin-top: 15px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    border-left: 3px solid #ffda79;
    font-weight: 500;
}

.counter-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500; /* 原未设置，避免过粗 */
    text-shadow: none; /* 移除多余阴影 */
}

.counter-avatar {
    width: 25px;
    height: 25px;
    border-radius: 4px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.counter-arrow {
    color: #ffda79;
    font-weight: bold;
    margin: 0 4px;
}

.counter-text {
    color: #e0e0e0;
    font-size: 12px;
    font-weight: 400; /* 正常字重，更易读 */
}

.counter-team {
    color: #ffda79;
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 8px;
}

.counter-empty {
    color: #888;
    font-style: italic;
    padding: 5px 0;
}

/* KPL数据图表容器整体样式 */
.kpl-chart-container {
    width: 100%;
    background: rgba(30, 41, 59, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 25px;
    margin-top: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    font-family: 'Orbitron', sans-serif;
     display: block;
}

/* 图表标题样式 */
.kpl-chart-header {
    margin-bottom: 20px;
}
.kpl-chart-header h3 {
    color: #ffda79;
    font-size: 1.4rem;
    font-weight: 600; /* 取消900过粗字重 */
    text-align: center;
    /* 简化阴影：避免模糊 */
    text-shadow: 0 0 6px rgba(255, 218, 121, 0.4);
    letter-spacing: 1px;
}

/* 子标题样式 */
.chart-subtitle {
    color: #e0e0e0;
    font-size: 1.1rem;
    margin: 15px 0 10px;
    padding-left: 10px;
    border-left: 3px solid #54a0ff;
    font-weight: 500; /* 原未设置，补充轻度粗体 */
    text-shadow: none; /* 移除多余阴影 */
}

/* 整体阵容图表样式 */
.kpl-overall-chart {
    margin-bottom: 30px;
}
#kplOverallCanvas {
    width: 100% !important;
    height: auto !important;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
    padding: 10px;
}

/* 图例样式 */
.kpl-legend {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-top: 15px;
    flex-wrap: wrap;
}
.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 500; /* 原未设置，避免默认过粗 */
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}

.legend-color {
    width: 16px;
    height: 16px;
    border-radius: 4px;
}
.legend-blue-bp { background: #54a0ff; } /* 蓝方BP率 */
.legend-red-bp { background: #ff4757; } /* 红方BP率 */
.legend-blue-win { background: #1dd1a1; } /* 蓝方胜率 */
.legend-red-win { background: #ff6b6b; } /* 红方胜率 */

/* 英雄个体数据表格样式 */
/* 英雄个体数据表格样式 - 优化版 */
.hero-data-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr; /* 增加英雄名称列宽度 */
  gap: 6px; /* 增加间距 */
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px; /* 增加圆角 */
  overflow: hidden;
  padding: 15px; /* 增加内边距 */
  width: 100%;
  font-size: 15px; /* 增大基础字体大小 */
}

/* 表头样式 */
.hero-data-header {
  background: linear-gradient(to bottom, #3a3a5c, #2c2c4c);
  color: #ffda79;
  font-weight: bold;
  padding: 14px 10px; /* 增加内边距 */
  text-align: center;
  font-size: 15px; /* 增大字体 */
  white-space: nowrap;
  letter-spacing: 0.5px; /* 增加字母间距 */
}

.hero-data-header.hero-name-header {
  text-align: left;
  padding-left: 20px; /* 增加左内边距 */
}
/* 数据行样式 */
.hero-data-row {
    display: contents;
}
/* 数据单元格样式 */
.hero-data-cell {
  padding: 12px 10px; /* 增加内边距 */
  text-align: center;
  color: #fff;
  font-size: 15px; /* 增大字体 */
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px; /* 增加圆角 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 24px; /* 确保最小高度 */
}
/* 1. 面板容器：横向布局基础，填充main-card下方横向空隙 */
.hero-data-panel {
    position: static; /* 脱离固定定位，融入main-card文档流 */
    width: 100%; /* 完全适配main-card宽度 */
    max-width: 100%;
    margin-top: 8px; 
    padding: 15px 20px; /* 内边距适配main-card风格 */
    /* background: rgba(0, 0, 0, 0.3); 半透明背景，与main-card内部元素统一 */
    border-radius: 8px;
    /* border: 1px solid rgba(255, 255, 255, 0.1); 弱化边框，不突兀 */
    box-shadow: none; /* 移除外部阴影，避免与main-card阴影重叠 */
    font-family: 'Orbitron', sans-serif;
    z-index: 1;
    box-sizing: border-box;
    /* 关键：限制面板高度，避免挤压上方BP区域 */
    max-height: 120px; /* 横向布局只需低高度，填充下方空隙即可 */
    overflow: hidden; /* 防止意外溢出 */
}

/* 2. 横向容器：控制数据项左右排列，支持自动换行 */
.hero-data-horizontal {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; /* 强制换行（关键） */
    gap: 6px; /* 缩小间距（原15px），增加容纳量，可根据需求调整 */
    justify-content: flex-start; /* 从左到右紧密排列 */
    align-items: center;
    width: 100%;
    padding: 5px 0; /* 增加上下内边距，避免Item贴边 */
     overflow-x: auto; /* 小屏幕出现横向滚动，避免换行 */
}

.panel-header {
    text-align: center; /* 表头居中，与横向数据项呼应 */
    color: #ffda79;
    font-size: 12px; /* 缩小表头字体，突出数据项 */
    margin-bottom: 8px; /* 表头与数据项的间距 */
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255, 218, 121, 0.2);
    letter-spacing: 0.5px;
}

.data-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 6px 8px; /* 适当减小内边距，节省空间 */
    margin: 0;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.4);
    font-size: 11px; /* 微调字体大小，避免文字溢出 */
    min-width: 75px; /* 降低最小宽度（原80px），确保小屏幕能多放1-2个Item */
    max-width: 110px; /* 限制最大宽度，避免过大占用空间 */
    height: 60px; /* 略微降低高度（原65px），整体更紧凑 */
    box-sizing: border-box; /* 确保padding不影响宽高计算（关键） */
    position: relative !important;
    flex-shrink: 0; /* 禁止Item被压缩（关键！防止被挤扁） */
}

.data-item span {
    position: relative; /* 文字层级高于进度条 */
    z-index: 2; /* 优先级高于进度条（z-index:1） */
}
.data-item span:first-child {
    color: #ccc;
    width: 100%; /* 标签占满数据项宽度 */
    text-align: center; /* 标签居中，更美观 */
    margin-bottom: 5px; /* 标签与数值的垂直间距 */
}
.data-item span:last-child {
    color: #fff;
    font-weight: bold;
    width: 100%; /* 数值占满数据项宽度 */
    text-align: center; /* 数值居中 */
    margin-bottom: 3px; /* 数值与进度条的垂直间距 */
}
/* 响应式：移动端隐藏面板 */

/* 数据条容器：绝对定位在data-item底部 */
.data-bar-container {
    position: relative !important;
    width: 100%;
    height: 3px; /* 保持进度条高度，确保可见 */
    border-radius: 2px;
    overflow: hidden !important;
    margin-top: 3px;
    background: rgba(255, 255, 255, 0.15);
}
/* 数据条背景（灰色基准线） */
.data-bar-bg {
    display: none !important; /* 不再需要独立的背景元素，避免层级冲突 */
}
/* 数据条前景（彩色，动态宽度） */
.data-bar {
    position: absolute !important; /* 关键：绝对定位，相对于父容器 */
    top: 0 !important;
    left: 0 !important;
    height: 100% !important; /* 撑满容器高度 */
    width: 0; /* 初始宽度0，JS动态计算 */
    transition: width 0.5s ease;
    border-radius: 2px;
}

/* 字段颜色区分 */
.fill-win { background: #2ed573; } /* 胜率-绿色 */
.fill-bp { background: #54a0ff; }  /* BP率-蓝色 */
.fill-ban { background: #ff4757; }  /* BAN率-红色 */
.fill-pick { background: #ffda79; } /* PICK率-黄色 */
.hero-data-cell.hero-name-cell {
  text-align: left;
  padding-left: 20px;
  font-weight: bold;
  justify-content: flex-start; /* 左对齐 */
}
/* 蓝方/红方数据区分 */
.hero-data-row.blue-team .hero-data-cell {
  background: rgba(84, 160, 255, 0.15); /* 增加透明度 */
  border-left: 4px solid #54a0ff; /* 加粗边框 */
}
.hero-data-row.red-team .hero-data-cell {
  background: rgba(255, 71, 87, 0.15);
  border-left: 4px solid #ff4757;
}
/* 数据数值高亮 */
.bp-rate { color: #54a0ff; }
.win-rate { color: #1dd1a1; }
.strength { color: #ffda79; }
.bp-rate, .win-rate, .strength {
  font-weight: bold; /* 数值加粗 */
  font-size: 16px; /* 数值比文本稍大 */
}

/* 优化强度条形图样式 */
.strength-bar-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}

.strength-bar-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.strength-bar-label {
    min-width: 80px;
    font-size: 14px;
    font-weight: bold;
}

.strength-bar-wrapper {
    flex: 1;
    height: 30px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    overflow: hidden;
    position: relative;
}

.strength-bar {
    height: 100%;
    border-radius: 15px;
    transition: width 0.8s ease;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
    font-size: 12px; /* 原12px不变，确保清晰 */
    font-weight: 500; /* 轻度粗体，避免过粗 */
    color: white;
    /* 移除可能导致模糊的内阴影/外阴影 */
    box-shadow: none;
}

.strength-bar.blue {
    background: linear-gradient(90deg, #54a0ff, #2e86de);
    color: white;
}

.strength-bar.red {
    background: linear-gradient(90deg, #ff4757, #ff6b6b);
    color: white;
}

.strength-bar.green {
    background: linear-gradient(90deg, #2ed573, #1dd1a1);
    color: white;
}

.strength-bar.orange {
    background: linear-gradient(90deg, #ff9a00, #ff6a00);
    color: white;
}

/* 优化数值显示 */
.strength-value {
    min-width: 60px;
    font-size: 13px;
    font-weight: 500; /* 原bold → 500，更轻盈 */
    text-align: right;
    /* 取消过重阴影，仅保留轻微轮廓 */
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}
.hero-data-header-row, 
.hero-data-row {
  display: contents; /* 使子元素参与网格布局 */
}
 
.hero-data-header, 
.hero-data-cell {
  padding: 8px 12px;
  text-align: center;
  border-bottom: 1px solid #444;
}
 
/* 表头特殊样式 */
.hero-data-header {
  background: linear-gradient(to bottom, #3a3a5c, #2c2c4c);
  font-weight: bold;
  text-shadow: 0 0 5px rgba(255,218,121,0.7);
}
/* 增强队伍颜色标识 */
.blue-team .hero-name-cell {
  border-left: 3px solid #54a0ff;
  text-shadow: 0 0 8px rgba(84, 160, 255, 0.6);
}
 
.red-team .hero-name-cell {
  border-left: 3px solid #ff4757;
  text-shadow: 0 0 8px rgba(255, 71, 87, 0.6);
}
 
.blue-team .strength {
  color: #54a0ff;
  font-weight: bold;
}
 
.red-team .strength {
  color: #ff4757;
  font-weight: bold;
}

.hero-data-row:hover {
  background: rgba(255,255,255,0.05);
  transform: translateY(-2px);
  transition: all 0.3s ease;
}
 
.hero-data-cell {
  position: relative;
  overflow: hidden;
}
 
.hero-data-cell:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #ffda79, transparent);
}
/* 2. 提示文字基础样式：继承turnIndicator的配色，字号稍小 */
.counter-tip-text {
    font-size: 0.9rem; 
    white-space: nowrap; 
    opacity: 0; 
    transition: opacity 0.3s ease; 
    color: #ffffff !important; /* 强制白色文字，优先级拉满 */
    font-weight: 600; /* 可选：加轻粗，进一步提升清晰度 */
}

/* 2. 蓝方回合：白色文字 + 蓝色发光（保留回合区分） */
.blue-turn .counter-tip-text {
    text-shadow: 0 0 12px var(--glow-blue), 0 0 5px rgba(255,255,255,0.8); 
    /* 蓝色发光+白色轻微发光，白色文字更突出 */
}

/* 3. 红方回合：白色文字 + 红色发光（保留回合区分） */
.red-turn .counter-tip-text {
    text-shadow: 0 0 12px var(--glow-red), 0 0 5px rgba(255,255,255,0.8); 
}

/* 5. 显示提示时：将透明度设为1 */
.counter-tip-text.visible {
    opacity: 1;
}


/* 修复 BAN 位区域因战队名称框迁移导致的间距问题 */
.bp-area .side-column {
    padding-top: 10px; /* 减少原 BAN 位上方内边距，抵消空隙 */
}
/* 1. 预览容器基础样式：强制不压缩+优先显示 */
.hero-data-preview {
    flex-shrink: 0 !important; /* 禁止压缩 */
    flex-basis: 110px; /* 固定基准宽度（与大屏一致） */
    min-width: 110px !important; /* 小屏幕最低宽度，不允许缩小 */
    max-width: 110px !important; /* 防止拉伸 */
    height: 60px; /* 固定高度，与数据项对齐 */
    margin-left: auto; /* 强制右对齐，固定在右侧 */
    position: sticky; /* 粘性定位，随容器滚动 */
    top: 5px; /* 与父容器顶部间距，避免遮挡 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    z-index: 2; /* 防止被滚动条遮挡 */
}

/* 3. 预览头像：小屏幕下适配尺寸，不挤压文字 */
.preview-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    margin-bottom: 6px; /* 固定间距，避免文字贴头像 */
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
}
/* 无预选时的占位图标：确保在小容器内可见 */
.hero-data-preview.no-selection .preview-avatar {
    background-color: rgba(255, 255, 255, 0.1);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.7)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cuser%3e%3c/user%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%; /* 增大占位图标占比，小屏幕下也能看清 */
}

/* 4. 预览文字：小屏幕下简化文字+优先显示 */
.preview-name {
    color: #ffffff;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    line-height: 1.3; /* 确保文字垂直居中，不被截断 */
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.8); /* 提升对比度，避免与背景融合 */
}
/* 无预选时的文字：小屏幕下简化，节省宽度 */
.hero-data-preview.no-selection .preview-name {
    font-size: 11px;
    content: "未选"; /* 小屏幕下简化文字（替代“未选择英雄”） */
}

/* 5. 父容器适配：确保预览容器即使换行也完整显示 */
.hero-data-horizontal {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; /* 允许换行，但保证预览容器不被挤掉 */
    gap: 6px; /* 缩小间距，多容纳元素 */
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    padding: 5px 0;
    overflow-x: hidden;
    /* 关键：取消父容器的高度限制，避免换行后被截断 */
    height: auto !important;
    min-height: 60px; /* 最低高度，确保至少显示一行 */
}




/* ================================== 英雄选择池滚动条美化 ================================== */
/* 1. 普通英雄池滚动条（左侧选择池、全局BP记录等） */
.hero-pool {
    /* 保持原有grid布局，新增滚动条基础配置 */
    overflow-y: auto;
    scrollbar-width: thin; /* 火狐浏览器：瘦滚动条 */
    scrollbar-color: rgba(84, 160, 255, 0.6) rgba(0, 0, 0, 0.2); /* 火狐：滑块色 + 轨道色 */
}

/* 谷歌/Edge等webkit内核浏览器 - 滚动条整体 */
.hero-pool::-webkit-scrollbar {
    width: 8px; /* 滚动条宽度（不宜过宽，避免占用英雄池空间） */
}

/* 轨道（滚动条背景） */
.hero-pool::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2); /* 深色半透明，贴合面板背景 */
    border-radius: 10px; /* 圆角，增强精致感 */
    margin: 10px 0; /* 上下留空，避免滚动条贴边 */
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5); /* 内阴影，提升层次 */
}

/* 滑块（滚动条可拖动部分） */
.hero-pool::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--blue), var(--global-bp)); /* 蓝→紫渐变，符合电竞风格 */
    border-radius: 10px; /* 圆角，与轨道呼应 */
    border: 2px solid rgba(0, 0, 0, 0.3); /* 深色边框，隔离滑块与轨道 */
    box-shadow: 0 0 8px rgba(84, 160, 255, 0.5); /* 外发光，增强霓虹感 */
    transition: all 0.3s ease; /* 过渡动画，hover时更丝滑 */
}

/* 滑块hover状态（交互反馈） */
.hero-pool::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #2e86de, #8e44ad); /* 加深渐变，突出hover */
    box-shadow: 0 0 12px rgba(84, 160, 255, 0.8); /* 增强发光 */
    transform: scaleX(1.1); /* 轻微放大，强化交互感 */
}

/* 2. 巅峰对决英雄池滚动条（.peak-hero-pool-container） */
.peak-hero-pool-container {
    /* 保留原有样式，补充滚动条配置 */
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 218, 121, 0.6) rgba(0, 0, 0, 0.2); /* 巅峰对决用金色系，贴合主题 */
}

/* 谷歌/Edge等webkit内核浏览器 */
.peak-hero-pool-container::-webkit-scrollbar {
    width: 8px;
}

.peak-hero-pool-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    margin: 10px 0;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.6);
}

.peak-hero-pool-container::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #ffda79, #ff9a00); /* 金→橙渐变，匹配巅峰对决标题色 */
    border-radius: 10px;
    border: 2px solid rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 8px rgba(255, 218, 121, 0.6);
    transition: all 0.3s ease;
}

.peak-hero-pool-container::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #ffc800, #ff6a00);
    box-shadow: 0 0 12px rgba(255, 218, 121, 0.9);
    transform: scaleX(1.1);
}

/* 3. 全局BP记录滚动条（.modal .hero-pool-rows） */
.modal .hero-pool-rows {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(155, 89, 182, 0.6) rgba(0, 0, 0, 0.2);
}

.modal .hero-pool-rows::-webkit-scrollbar {
    width: 6px; /* 模态窗内滚动条更窄，避免占用空间 */
}

.modal .hero-pool-rows::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    margin: 5px 0;
}

.modal .hero-pool-rows::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #9b59b6, #6c5ce7);
    border-radius: 8px;
    box-shadow: 0 0 6px rgba(155, 89, 182, 0.5);
}

.modal .hero-pool-rows::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #8e44ad, #a29bfe);
    box-shadow: 0 0 10px rgba(155, 89, 182, 0.8);
}
/* ===== PICK槽位强度预估样式 ===== */
/* 强度预估容器：在PICK槽位下方居中 */
.pick-strength-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 8px; /* 与上方PICK槽位保持间距 */
    padding: 5px 0;
    width: 100%;
}

/* 强度预估文本：电竞风格样式 */
.pick-strength-text {
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    font-weight: bold;
    padding: 4px 12px;
    border-radius: 15px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    transition: all 0.3s;
    white-space: normal; /* 允许换行，避免文本溢出 */
    line-height: 1.4; /* 提高多行可读性 */
    overflow-y: auto;
     scrollbar-width: thin;  /* Firefox */
    scrollbar-color: rgba(255,255,255,.3) transparent;
    max-height: 6em;
}
.pick-strength-text::-webkit-scrollbar {
    width: 5px;
}
.pick-strength-text::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.4);
    border-radius: 3px;
}
.pick-strength-text .bonus-list{ font-size:11px; margin-top:4px; line-height:1.4; }
.pick-strength-text .bonus{ color:#2ed573; }
.pick-strength-text .penalty{ color:#ff6b6b; }
.pick-strength-text .combo{ color:#ffda79; }
/* 蓝方强度文本：蓝色系标识 */
.blue-column .pick-strength-text {
    color: var(--blue);
    text-shadow: 0 0 8px var(--glow-blue);
    border-left: 2px solid var(--blue);
}

/* 红方强度文本：红色系标识 */
.red-column .pick-strength-text {
    color: var(--red);
    text-shadow: 0 0 8px var(--glow-red);
    border-right: 2px solid var(--red);
}

/* 无英雄时的占位样式 */
.pick-strength-text.empty {
    color: rgba(255, 255, 255, 0.5);
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.1);
}


/* 灰化效果增强 */
.blessing-hero-slot[style*="grayscale(1)"] {
  box-shadow: 0 0 8px rgba(255, 107, 107, 0.5); // 灰化时添加红色阴影提示
}

/* 提示文本样式优化 */
.blessing-hero-tip {
  z-index: 20; 
  white-space: nowrap; 
}
.blessing-hero-tip[textContent*="可选择"] {
  color: #2ed573; 
  font-weight: bold;
}
.blessing-hero-tip[textContent*="不可选"] {
  color: #ff6b6b; 
}
/* 挑战者选择弹窗按钮 hover 效果 */
.challenger-selector .tech-button:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(84, 160, 255, 0.8) !important;
}

/* 保护英雄选择池样式 */
#blessingHeroPool .hero-item {
  cursor: pointer;
}
#blessingHeroPool .hero-item.pre-selected {
  border: 2px solid #2ed573;
  box-shadow: 0 0 15px rgba(46, 213, 115, 0.7);
}
#blessingHeroSelector .tech-button:disabled {
  background: rgba(255,255,255,0.2);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   挑战者杯模式 - 天蓝色简洁主题
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */


/* 英雄槽位 */
/* 修复：英雄槽位 —— 只改背景色，不覆盖头像 */
body.challenger-mode-active .slot {
    background-color: white !important; /* ✅ 只改颜色 */
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    box-shadow: 0 2px 8px rgba(129, 212, 250, 0.3) !important;
    transition: all 0.3s ease;
}

/* 选中状态（依然保留头像） */
body.challenger-mode-active .slot.active-slot {
    border-color: #0288d1 !important;
    box-shadow: 0 0 15px rgba(2, 136, 209, 0.5) !important;
    transform: scale(1.02);
}

/* 禁用状态（比如已选或不可选） */
body.challenger-mode-active .slot.disabled {
    opacity: 0.6;
    background-color: rgba(200, 200, 200, 0.4) !important;
    border-color: #bbdefb !important;
}

/* ========================================================================== */
/* =========   ✨ 新增：电竞风格动画与特效 By Gemini   ========= */
/* ========================================================================== */

/* * 1. 【高亮槽位】 "能量扫描" 动画
 * - 应用于 .active-slot，为其添加一个从上至下循环的扫描光束。
 * - 使用 ::before 伪元素生成光束，不影响槽位原有内容。
 */
.active-slot::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 使用 var(--glow-color) 动态匹配蓝/红/绿色的辉光 */
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0) 40%,
        var(--glow-color) 50%,
        rgba(0, 0, 0, 0) 60%,
        transparent 100%
    );
    opacity: 0.7;
    z-index: 1; /* 确保在头像下方，但在背景之上 */
    animation: scan-line 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    pointer-events: none; /* 确保不影响点击 */
}

@keyframes scan-line {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(100%);
    }
}

/* ======================================================================== */
/* =========   方案 V6.1：精密隅角 & 能量光弧 (瞬时锁定版)   ========= */
/* ======================================================================== */

/* 1. 为 .pick-slot.filled 自身提供定位 */
.pick-slot.filled {
    position: relative;
    overflow: hidden;
}

/* 2. 使用 ::before 绘制【左上角】和【右下角】的隅角 */
.pick-slot.filled::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    opacity: 0; /* 初始透明度为0 */

    /* 核心：使用多重渐变背景绘制两个L形隅角 */
    background:
        /* 左上角 - 横线 */
        linear-gradient(to right, var(--pick-color) 20px, transparent 20px),
        /* 左上角 - 竖线 */
        linear-gradient(to bottom, var(--pick-color) 20px, transparent 20px),
        /* 右下角 - 横线 */
        linear-gradient(to left, var(--pick-color) 20px, transparent 20px),
        /* 右下角 - 竖线 */
        linear-gradient(to top, var(--pick-color) 20px, transparent 20px);

    background-size: 100% 1.5px, 1.5px 100%, 100% 1.5px, 1.5px 100%;
    background-position: top left, top left, bottom right, bottom right;
    background-repeat: no-repeat;
    
    /* 动画：播放完毕后会自动消失 */
    animation: corner-flash-disappear 0.8s cubic-bezier(0.5, 0, 0.1, 1) forwards;
}

/* 3. 使用 ::after 绘制【右上角】和【左下角】的隅角 + 能量光弧 */
.pick-slot.filled::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
    opacity: 0; /* 初始透明度为0 */

    /* 核心：绘制另外两个隅角 + 一道扫描光弧 */
    background:
        /* 右上角 - 横线 */
        linear-gradient(to left, var(--pick-color) 20px, transparent 20px),
        /* 右上角 - 竖线 */
        linear-gradient(to bottom, var(--pick-color) 20px, transparent 20px),
        /* 左下角 - 横线 */
        linear-gradient(to right, var(--pick-color) 20px, transparent 20px),
        /* 左下角 - 竖线 */
        linear-gradient(to top, var(--pick-color) 20px, transparent 20px),
        /* 能量扫描光弧 */
        linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.3), transparent);

    background-size: 100% 1.5px, 1.5px 100%, 100% 1.5px, 1.5px 100%, 100% 100%;
    background-position: top right, top right, bottom left, bottom left, 0 -100%;
    background-repeat: no-repeat;

    /* 动画：同样在播放后消失 */
    animation: corner-flash-disappear 0.8s cubic-bezier(0.5, 0, 0.1, 1) 0.1s forwards,
               energy-arc-sweep 0.5s ease-out 0.4s forwards;
}


/* --- 动画定义 (Keyframes) --- */

/* ✨【核心修改】隅角"闪现并消失"的动画 */
@keyframes corner-flash-disappear {
    /* 阶段1：出现并放大 */
    0% {
        transform: scale(0.5);
        opacity: 0;
        filter: drop-shadow(0 0 10px var(--pick-color));
    }
    /* 阶段2：达到最亮状态 */
    40% {
        transform: scale(1.05);
        opacity: 1;
        filter: drop-shadow(0 0 20px var(--pick-color));
    }
    /* 阶段3：开始消散 */
    100% {
        transform: scale(1.1); /* 在消失时轻微放大，增强消散感 */
        opacity: 0;
        filter: drop-shadow(0 0 5px var(--pick-color));
    }
}

/* 能量光弧扫描动画 (保持不变) */
@keyframes energy-arc-sweep {
    0% {
        background-position: top right, top right, bottom left, bottom left, 0 -100%;
    }
    100% {
        background-position: top right, top right, bottom left, bottom left, 0 100%;
    }
}


/* 祝福英雄池（如果存在） */
/* 修复：祝福英雄头像槽 —— 保留头像 + 天蓝色背景色 */
body.challenger-mode-active .blessing-hero-slot {
    background-color: rgba(255, 255, 255, 0.7) !important; /* ✅ 只改颜色 */
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border: 2px solid #4fc3f7 !important;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(79, 195, 247, 0.3);
    width: 50px;
    height: 50px;
    display: inline-block;
    margin: 0 5px;
}


</style>