:root {
            --gold: #D4AF37;
            --cinnabar-red: #9E2A2B;
            --bamboo-green: #5C8D6F;
            --ink-black: #2C2C2C;
            --rice-paper: #F5F5DC;
        }
        
        /* ===== 全局重置与基础样式 ===== */
        * { 
            margin: 0; 
            padding: 0; 
            box-sizing: border-box;
        }
        
        /* 🔧🔧 紧急修复：强制覆盖所有可能的高度设置 - 2026-07-04 🔧🔧 */
        .baiye-grid-section {
            grid-template-rows: min-content min-content !important;
            height: auto !important;
            min-height: auto !important;
        }
        .baiye-member-item {
            height: auto !important;
            min-height: auto !important;
            max-height: none !important;
        }
        
        /* ✅ 钻石布局下覆盖全局auto高度，使用固定高度 */
        .battle-report-card.special-period[data-special-style="diamond"] .baiye-member-item {
            height: 480px !important;
            min-height: 480px !important;
            max-height: 480px !important;
            width: 160px !important;
            min-width: 160px !important;
            max-width: 160px !important;
        }
        .battle-report-card.special-period[data-special-style="diamond"] .member-card {
            height: 480px !important;
            min-height: 480px !important;
            max-height: 480px !important;
            width: 160px !important;
            min-width: 160px !important;
            max-width: 160px !important;
        }
        .baiye-member-item .member-token {
            display: block !important;
            height: auto !important;
            min-height: auto !important;
            max-height: none !important;
        }
        
        body {
            font-family: 'Ma Shan Zheng', cursive, 'SimHei', 'STHeiti', sans-serif;
            background: #1a1a2e;
            min-height: 100vh;
            color: rgba(255, 255, 255, 0.9);
            overflow-x: hidden;
        }
        
        /* 🔧 全局字体统一 - 确保所有文本元素使用艺术字体，保持毛笔字体原始风格 */
        h1, h2, h3, h4, h5, h6,
        p, span, div, a, button, input, textarea,
        .period-title,
        .member-name,
        .member-token,
        .special-badge,
        .control-btn,
        .nav-link,
        .logo-text {
            font-family: 'Ma Shan Zheng', cursive, 'SimHei', 'STHeiti', sans-serif !important;
            font-weight: 500 !important;
        }
        
        /* 全局遮罩层 - 极轻微雾 */
        .page-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.05);
            pointer-events: none;
            z-index: -1;
        }
        
        /* 主容器 - 透明背景 */
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 2rem 1rem;
            background: transparent;
        }
        
        /* ===== 公告栏 - 固定定位，始终可见 ===== */
        .announcement-bar {
            background: linear-gradient(90deg, 
                rgba(158, 42, 43, 0.7) 0%, 
                rgba(212, 175, 55, 0.6) 50%, 
                rgba(158, 42, 43, 0.7) 100%);
            backdrop-filter: blur(10px);
            color: #fff; 
            padding: 1.2rem 2rem; /* ✅ 增大上下内边距，让公告栏更宽敞 */
            overflow: visible; 
            position: fixed; /* ✅ 固定定位，始终可见 */
            top: 80px; /* ✅ 导航栏下方留出足够间距，避免被遮挡 */
            left: 0;
            right: 0;
            border-bottom: 2px solid rgba(212, 175, 55, 0.8);
            box-shadow: 0 4px 16px rgba(0,0,0,0.3);
            z-index: 999; /* ✅ 低于导航栏(1100) */
            margin-top: 0;
            transition: top 0.4s ease; /* ✅ 位置切换平滑过渡 */
        }
        
        /* ✅ 公告栏占位：防止内容被固定公告栏遮挡 */
        .announcement-bar + .page-header {
            padding-top: 9rem; /* ✅ 导航栏(80px) + 公告栏(~55px) + 间距 */
        }
        
        /* ✅ 公告栏隐藏时，恢复默认间距 */
        .announcement-bar[style*="display: none"] + .page-header {
            padding-top: 5rem; /* ✅ 只预留导航栏(80px) + 间距 */
        }
        
        /* ✅ 全局横幅组件激活时，调整页面标题间距 */
        body.global-banner-active .page-header {
            padding-top: 6rem;
        }
        
        /* ✅ 导航栏隐藏时，公告栏贴顶填补空缺 */
        body.navbar-hidden .announcement-bar {
            top: 0px !important;
        }
        
        /* ✅ 导航栏隐藏时，调整页面头部间距 */
        body.navbar-hidden .announcement-bar + .page-header {
            padding-top: 5rem;
        }
        
        /* ✅ 导航栏隐藏 + 公告栏也隐藏时，最小化间距 */
        body.navbar-hidden .announcement-bar[style*="display: none"] + .page-header,
        body.navbar-hidden .announcement-bar[style*="display:none"] + .page-header {
            padding-top: 1.5rem;
        }
        
        /* ✅ 喇叭图标 - SVG金色扩音器 */
        .announcement-bar::before {
            content: '';
            position: absolute;
            left: 1.2rem;
            top: 50%;
            transform: translateY(-50%);
            width: 30px;
            height: 30px;
            z-index: 2;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFD700'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z'/%3E%3C/svg%3E");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8)) drop-shadow(0 0 3px rgba(255, 215, 0, 1));
            animation: speaker-pulse 2s ease-in-out infinite;
        }
        
        /* ✅ 喇叭声波动画 - 三道弧线 */
        .announcement-bar::after {
            content: '';
            position: absolute;
            left: 52px;
            top: 50%;
            transform: translateY(-50%);
            width: 18px;
            height: 28px;
            z-index: 2;
            border: 3px solid transparent;
            border-right-color: #FFD700;
            border-radius: 0 14px 14px 0;
            opacity: 0;
            animation: sound-wave 2s ease-out infinite;
            box-shadow: 
                6px 0 0 -1px rgba(255, 215, 0, 0.5),
                12px 0 0 -2px rgba(255, 215, 0, 0.3);
        }
        
        .announcement-label {
            position: absolute;
            left: 88px;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255, 215, 0, 0.2);
            border: 1px solid rgba(255, 215, 0, 0.6);
            border-radius: 4px;
            padding: 2px 8px;
            font-size: 0.75rem;
            color: #FFD700;
            white-space: nowrap;
            z-index: 2;
            font-weight: bold;
            font-family: "Ma Shan Zheng", cursive, SimHei, sans-serif;
            letter-spacing: 1px;
        }
        
        @keyframes speaker-pulse {
            0%, 100% { 
                filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.6)) drop-shadow(0 0 2px rgba(255, 215, 0, 0.9));
                opacity: 1;
            }
            50% { 
                filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.9)) drop-shadow(0 0 5px rgba(255, 215, 0, 1));
                opacity: 0.9;
            }
        }
        
        @keyframes sound-wave {
            0% {
                opacity: 0;
                transform: translateY(-50%) scale(0.6) translateX(0);
            }
            30% {
                opacity: 0.8;
            }
            100% {
                opacity: 0;
                transform: translateY(-50%) scale(1.4) translateX(10px);
            }
        }
        
        /* 喇叭控制按钮容器 */
        .announcement-controls {
            position: absolute;
            right: 1.5rem;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            gap: 0.5rem;
            z-index: 3;
        }
        
        .announcement-control-btn {
            background: rgba(255, 255, 255, 0.15);
            border: 2px solid rgba(255, 255, 255, 0.6);
            color: white;
            padding: 0.4rem 1rem;
            border-radius: 25px;
            cursor: pointer;
            font-size: 0.85rem;
            font-weight: 500;
            transition: all 0.3s ease;
            backdrop-filter: blur(5px);
            text-shadow: 0 1px 2px rgba(0,0,0,0.3);
            display: flex;
            align-items: center;
            gap: 0.5rem;
            white-space: nowrap; /* ✅ 防止按钮内文字竖排 */
        }
        
        .announcement-control-btn:hover {
            background: rgba(255, 255, 255, 0.25);
            border-color: white;
            transform: scale(1.05);
            box-shadow: 0 0 10px rgba(255,255,255,0.2);
        }
        
        /* ✅ 暂停按钮图标 - CSS双竖线 */
        .pause-icon {
            display: inline-flex;
            gap: 3px;
            align-items: center;
        }
        .pause-icon span {
            display: block;
            width: 3px;
            height: 12px;
            background: #FFD700;
            border-radius: 2px;
            box-shadow: 0 0 4px rgba(255, 215, 0, 0.6);
        }
        
        /* ✅ 播放按钮图标 - CSS三角形 */
        .play-icon {
            display: inline-block;
            width: 0;
            height: 0;
            border-top: 7px solid transparent;
            border-bottom: 7px solid transparent;
            border-left: 12px solid #FFD700;
            filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.6));
        }
        
        /* ✅ 关闭按钮图标 - CSS叉号 */
        .close-icon {
            position: relative;
            display: inline-block;
            width: 14px;
            height: 14px;
        }
        .close-icon::before,
        .close-icon::after {
            content: '';
            position: absolute;
            width: 16px;
            height: 2.5px;
            background: #FF6B6B;
            border-radius: 2px;
            top: 50%;
            left: 50%;
            box-shadow: 0 0 4px rgba(255, 107, 107, 0.5);
        }
        .close-icon::before {
            transform: translate(-50%, -50%) rotate(45deg);
        }
        .close-icon::after {
            transform: translate(-50%, -50%) rotate(-45deg);
        }
        
        /* 暂停按钮 - 金色主题 */
        #toggle-announcement-btn {
            border: 2px solid #FFD700 !important;
            background: rgba(255, 215, 0, 0.2) !important;
        }
        #toggle-announcement-btn:hover {
            background: rgba(255, 215, 0, 0.35) !important;
            box-shadow: 0 0 12px rgba(255, 215, 0, 0.3) !important;
        }
        
        /* 关闭按钮 - 红色主题 */
        #close-announcement-btn {
            border: 2px solid #DC143C !important;
            background: rgba(220, 20, 60, 0.2) !important;
        }
        #close-announcement-btn:hover {
            background: rgba(220, 20, 60, 0.35) !important;
            border-color: #FF1493 !important;
            box-shadow: 0 0 12px rgba(220, 20, 60, 0.3) !important;
        }
        
        .announcement-control-btn.active {
            background: rgba(255, 215, 0, 0.4);
            border-color: #FFD700;
        }
        
        .announcement-content {
            display: flex; 
            animation: scroll-left 25s linear infinite; 
            white-space: nowrap;
            margin-left: 11rem;
            margin-right: 10rem;
            font-weight: 500;
            letter-spacing: 2px;
            text-shadow: 0 2px 6px rgba(0,0,0,0.4);
            font-size: 1.1rem;
        }
        
        @keyframes scroll-left {
            0% { transform: translateX(100%); }
            100% { transform: translateX(-100%); }
        }
        
        /* ===== 主标题区域 - 极轻半透明 ===== */
        .page-header {
            text-align: center; 
            padding: 5rem 0 2.5rem;
            background: transparent;
            backdrop-filter: none;
            position: relative; 
            color: white;
        }
        
        .page-title {
            position: relative; 
            z-index: 1; 
            font-size: 3.5rem; 
            font-weight: 500;
            text-shadow: 0 2px 8px rgba(0,0,0,0.4);
            margin-bottom: 1rem;
            letter-spacing: 6px;
            color: #FFD700 !important; /* 🔧 直接使用金黄色，不用渐变 */
            background: none !important; /* 🔧 移除渐变背景 */
            -webkit-background-clip: unset !important;
            -webkit-text-fill-color: #FFD700 !important; /* 🔧 确保文字是实色金黄色 */
            background-clip: unset !important;
        }
        
        .page-subtitle {
            position: relative; 
            z-index: 1; 
            font-size: 1.3rem; 
            opacity: 0.85;
            letter-spacing: 3px;
            color: rgba(255, 255, 255, 0.9);
            text-align: center;
            margin: 0 auto;
            padding-right: 12px; /* 补偿letter-spacing末尾空格+视觉对齐"每"字与"百"字 */
        }
        
        /* ===== 精致整合卡片 - 华丽金色风格 ===== */
        .battle-report-card {
            background: transparent;
            backdrop-filter: none;
            border-radius: 16px;
            padding: 2rem;
            box-shadow: 
                0 0 40px rgba(255, 215, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            border: 2px solid rgba(255, 215, 0, 0.5);
            position: relative;
            overflow: visible;
        }
        
        .battle-report-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 3px;
            background: linear-gradient(90deg, transparent, #FFD700, #FFA500, #FFD700, transparent);
            opacity: 0.8;
        }
        
        /* 期数标题区域 */
        .period-header {
            text-align: center;
            margin-bottom: 2rem;
            position: relative;
        }
        
        .period-title {
            font-size: 2.4rem;
            font-weight: 500;
            color: #FFD700;
            letter-spacing: 4px;
            text-shadow: 0 2px 6px rgba(0,0,0,0.5);
            margin-bottom: 0.5rem;
        }
        
        .special-badge {
            display: inline-block;
            font-size: 1rem;
            color: #FFD700;
            font-weight: 500;
            background: rgba(255, 215, 0, 0.2);
            backdrop-filter: blur(5px);
            padding: 0.4rem 1.2rem;
            border-radius: 16px;
            border: 1px solid rgba(255, 215, 0, 0.5);
            text-shadow: none;
        }
        
        /* 成员展示区域 - 左右布局 */
        .baiye-layout-wrapper {
            display: flex;
            gap: 3rem;
            align-items: flex-start;
            justify-content: center;
            width: 100%;
        }
        
        /* 左侧颁奖台区域 - 3个横向排列 */
        .baiye-podium-section {
            display: flex;
            justify-content: center;
            align-items: flex-end;
            gap: 2rem;
            min-width: max-content;
        }
        
        /* 右侧普通成员区域 - 2行×5列网格 */
        .baiye-grid-section {
            display: grid !important;
            grid-template-columns: repeat(5, 1fr) !important; /* 从3列改为5列 */
            grid-template-rows: min-content min-content !important; /* 🔧 使用min-content让行高由内容决定 */
            gap: 1.5rem !important; /* 从1.2rem增大到1.5rem，增加卡片间距 */
            flex: 1 !important;
            max-width: 950px !important; /* 从900px增大到950px */
            align-items: start !important; /*  防止卡片被拉伸 */
            height: auto !important; /* 🔧 移除固定高度 */
            min-height: auto !important; /* 🔧 移除最小高度限制 */
        }
        
        /*  强制覆盖任何可能的高度设置 */
        .baiye-layout-wrapper .baiye-grid-section {
            grid-template-rows: min-content min-content !important;
            align-items: start !important;
            height: auto !important;
        }
        
        /*  确保右侧网格内的卡片不受全局样式影响 */
        .baiye-member-item {
            background: linear-gradient(180deg, rgba(255, 250, 220, 0.9) 0%, rgba(245, 245, 220, 0.85) 30%, rgba(47, 79, 79, 0.08) 100%);
            border: 2px solid transparent;
            border-image: linear-gradient(135deg, rgba(212, 175, 55, 0.6), rgba(255, 215, 0, 0.4), rgba(212, 175, 55, 0.6)) 1;
            border-radius: 16px;
            padding: 1rem 0.8rem; /* 增大内边距，让卡片更舒适 */
            text-align: center;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15),
                        0 0 12px rgba(212, 175, 55, 0.15); /* 微弱的金色光晕 */
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            animation: breathing 3s ease-in-out infinite, subtleBorderGlow 4s ease-in-out infinite alternate;
            /* 移除 min-height，让高度由内容决定 */
            height: auto !important; /* 强制让高度由内容决定 */
            min-height: auto !important; /* 🔧 明确设置自动最小高度 */
            max-height: none !important; /* 🔧 移除最大高度限制 */
            display: flex !important;
            flex-direction: column !important;
            justify-content: flex-start !important; /* 改为顶部对齐，避免元素被拉开 */
            align-items: center;
            gap: 0.4rem; /* 稍微增大元素间距 */
            width: 100%;
            max-width: 280px; /* 增大最大宽度 */
        }
        
        /* ✅ 钻石布局下覆盖全局auto高度，使用固定高度 */
        .battle-report-card.special-period[data-special-style="diamond"] .baiye-member-item {
            height: 480px !important;
            min-height: 480px !important;
            max-height: 480px !important;
            width: 160px !important;
            min-width: 160px !important;
            max-width: 160px !important;
        }
        
        /* 普通成员卡片顶部高光条 - 极淡的金属质感 */
        .baiye-member-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 10%;
            right: 10%;
            height: 2px;
            background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.3), transparent);
            pointer-events: none;
            z-index: 1;
        }
        
        /* 🎯 普通成员卡片底部装饰线 - 极细的金色线条 */
        .baiye-member-item::after {
            content: '';
            position: absolute;
            bottom: 8px;
            left: 20%;
            right: 20%;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.25), transparent);
            pointer-events: none;
            z-index: 1;
        }
        
        /* ✨ 普通成员卡片边框微弱光泽动画 */
        @keyframes subtleBorderGlow {
            0%, 100% {
                box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15),
                            0 0 12px rgba(212, 175, 55, 0.15);
            }
            50% {
                box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15),
                            0 0 18px rgba(212, 175, 55, 0.25);
            }
        }
        
        /* ========== 时空穿梭效果 - 点击卡片时产生透视推进效果 ========== */
        @keyframes spacetime-tunnel {
            0% {
                transform: perspective(1200px) translateZ(0);
                opacity: 1;
            }
            50% {
                transform: perspective(1200px) translateZ(-300px);
                opacity: 0.8;
            }
            100% {
                transform: perspective(1200px) translateZ(0);
                opacity: 1;
            }
        }
        
        .battle-report-card.spacetime-active {
            animation: spacetime-tunnel 1s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        /* ========== 卡片飞走消失动画 ========== */
        @keyframes card-fly-away {
            0% {
                transform: scale(1) rotate(0deg);
                opacity: 1;
            }
            50% {
                transform: scale(0.8) rotate(var(--rotate-deg));
                opacity: 0.5;
            }
            100% {
                transform: scale(0) rotate(calc(var(--rotate-deg) * 2)) translateY(-500px);
                opacity: 0;
            }
        }
        
        .member-card.flying-away,
        .baiye-member-item.flying-away,
        .hero-card.flying-away,
        .group-member-card.flying-away {
            animation: card-fly-away 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
            pointer-events: none; /* 防止重复点击 */
        }
        
        /* 卡片点击时的微缩反馈 */
        .member-card:active,
        .baiye-member-item:active,
        .hero-card:active,
        .group-member-card:active {
            transform: scale(0.95);
            transition: transform 0.15s ease;
        }
        
        /* ️ 鼠标悬停时显示手型指针，提示用户可点击交互 */
        .member-card,
        .baiye-member-item,
        .hero-card,
        .group-member-card {
            cursor: pointer !important; /* 强制使用手型光标 */
        }
        
        /* 普通成员卡片悬停透明交互 */
        .baiye-member-item:hover {
            background: linear-gradient(180deg, rgba(255, 250, 220, 0.3) 0%, rgba(245, 245, 220, 0.25) 30%, rgba(47, 79, 79, 0.03) 100%);
            border-color: rgba(212, 175, 55, 0.3);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08),
                        0 0 15px rgba(212, 175, 55, 0.2);
            transform: scale(0.98);
        }
        
        /* 悬停时顶部高光增强 */
        .baiye-member-item:hover::before {
            background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.5), transparent);
        }
        
        /* 悬停时底部装饰线增强 */
        .baiye-member-item:hover::after {
            background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.4), transparent);
        }
        
        /* 移除 baiye-member-item 内部所有 p 标签的默认边距 */
        .baiye-member-item p {
            margin: 0 !important;
            padding: 0 !important;
        }
        
        /* 普通成员卡片内的头像样式 - 更紧凑 + 金色光环 + 悬停微光 */
        .baiye-member-item .member-avatar {
            width: 70px !important; /* 从60px增大到70px */
            height: 70px !important;
            border-width: 3px !important;
            border-color: #D4AF37 !important; /* 金色边框 */
            box-shadow: 0 0 12px rgba(212, 175, 55, 0.4), /* 微弱的金色光晕 */
                        inset 0 0 8px rgba(212, 175, 55, 0.2);
            margin: 0 auto 0.4rem !important; /* 稍微增大下方边距 */
            transition: all 0.3s ease;
        }
        
        /* 头像悬停时的微弱光晕增强 */
        .baiye-member-item:hover .member-avatar {
            box-shadow: 0 0 18px rgba(212, 175, 55, 0.6),
                        inset 0 0 12px rgba(212, 175, 55, 0.3);
            transform: scale(1.05);
        }
        
        /* 普通成员卡片内的称号样式 - 朱砂红色 + 细微阴影 + 微弱渐变 */
        .baiye-member-item .member-name {
            margin: 0 !important; /* 移除默认边距 */
            padding: 0 !important; /* 移除内边距 */
            line-height: 1.2 !important; /* 减小行高 */
            font-size: 1.2rem !important; /*  从1.1rem增大到1.2rem，更清晰 */
            color: #FFE4B5 !important; /* 米黄色，更柔和 */
            background: linear-gradient(135deg, #FFE4B5 0%, #FFD700 50%, #FFE4B5 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-shadow: none; /* 保持毛笔字体原始笔画 */
            transition: all 0.3s ease;
        }
        
        /* 称号悬停时光泽增强 */
        .baiye-member-item:hover .member-name {
            background: linear-gradient(135deg, #FFF8DC 0%, #FFD700 50%, #FFF8DC 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5),
                         0 0 12px rgba(212, 175, 55, 0.4);
        }
        
        /* ========== 主C/副C/次C卡片称号防换行 - 2026-07-04修复 ========== */
        /* 适用于所有布局模式（普通、challenger、grandmaster、master等） */
        .member-card.podium-first .member-name,
        .member-card.podium-second .member-name,
        .member-card.podium-third .member-name {
            white-space: nowrap !important;      /* 防止换行 */
            overflow: visible !important;         /* 允许溢出显示，不截断 */
            text-overflow: clip !important;       /* 不显示省略号 */
            display: block !important;            /* 块级元素 */
        }
        
        /* ========== 普通成员卡片称号防换行 - 2026-07-04修复 ========== */
        /* 防止普通成员称号（如“四级称号”、“五级称号”等）换行 */
        .baiye-member-item .member-name {
            white-space: nowrap !important;      /* 防止换行 */
            overflow: hidden !important;          /* 隐藏溢出部分 */
            text-overflow: ellipsis !important;   /* 超长显示省略号 */
            display: block !important;            /* 块级元素 */
            font-size: 1.1rem !important;         /* 稍微减小字体，更容易在一行内显示 */
        }
        
        .baiye-member-item .member-token {
            color: #C19A6B !important; /* 古铜色，比朱砂红更低调 */
            font-weight: 500;
            font-size: 1rem !important; /* 🔧 从0.9rem增大到1rem，更清晰 */
            margin: 0 !important; /* 移除默认边距 */
            padding: 0 !important; /* 移除内边距 */
            line-height: 1.2 !important; /* 减小行高 */
            text-shadow: none;
            /*  关键修复：移除全局样式中的边框和背景 */
            border: none !important;
            background: transparent !important;
            background-image: none !important;
            box-shadow: none !important; /* 🔧 移除阴影，避免"框"效果 */
            /* ========== 防止名字换行且不溢出 - 2026-07-04修复 ========== */
            white-space: nowrap !important;      /* 防止换行 */
            overflow: hidden !important;          /* 隐藏溢出部分 */
            text-overflow: ellipsis !important;   /* 超长显示省略号 */
            display: block !important;            /* 🔧 改为block，避免inline-block的高度异常 */
            height: auto !important;              /* 🔧 明确设置自动高度 */
            max-width: 200px;                     /* 限制最大宽度，确保不溢出卡片 */
        }
        
        /*  移除 .member-token 的伪元素，避免创建"框"效果 */
        .baiye-member-item .member-token::before,
        .baiye-member-item .member-token::after {
            content: none !important;
            display: none !important;
        }
        .baiye-member-card {
            border-radius: 0 !important;
            min-height: auto !important;
            max-height: none !important;
            height: auto !important;
            box-shadow: none !important;
            display: block !important;
        }
        
        .empty-state {
            text-align: center; 
            padding: 3rem 2rem; 
            background: rgba(255, 248, 220, 0.1);
            backdrop-filter: blur(6px);
            border-radius: 12px; 
            border: 1px dashed rgba(255, 215, 0, 0.4); 
            color: #FFD700;
            box-shadow: 0 4px 16px rgba(0,0,0,0.3);
        }
        
        .empty-state p { 
            font-size: 1.1rem; 
            margin-bottom: 0.6rem;
            letter-spacing: 2px;
            text-shadow: 0 2px 6px rgba(0,0,0,0.8);
        }
        
        /* ===== 底部控制按钮区域 ===== */
        .card-controls {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 1rem;
            padding-top: 1.5rem;
            border-top: 1px solid rgba(255, 215, 0, 0.3);
            position: relative;
        }
        
        .card-controls::before {
            content: '';
            position: absolute;
            top: -1px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 2px;
            background: linear-gradient(90deg, transparent, #FFD700, transparent);
            opacity: 0.6;
        }
        
        .control-btn {
            background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
            color: #1a1a2e; 
            border: none;
            padding: 0.7rem 1.5rem; 
            border-radius: 25px;
            font-size: 0.95rem; 
            font-weight: bold; 
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
            letter-spacing: 1px;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .control-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
            transition: left 0.4s ease;
        }
        
        .control-btn:hover:not(:disabled)::before {
            left: 100%;
        }
        
        .control-btn:hover:not(:disabled) {
            transform: translateY(-3px);
            box-shadow: 0 6px 25px rgba(255, 215, 0, 0.6);
            background: linear-gradient(135deg, #FFE4B5 0%, #FFD700 100%);
        }
        
        .control-btn:active:not(:disabled) {
            transform: translateY(-1px);
        }
        
        .control-btn:disabled { 
            opacity: 0.4; 
            cursor: not-allowed;
            background: rgba(100, 100, 100, 0.5);
            box-shadow: none;
        }
        
        /* ===== 最佳爬塔布局 - 王者/宗师/大师/钻石 ===== */
        
        /* ========== 最强王者 - 方案六：长卷翻页·叙事浏览法 ==========
           核心效果：成员排列成横向长卷，每屏只展示1~2个特殊成员 + 部分普通成员
           特点：第一屏专门展示主C，气势拉满；后续每屏可展示1~2位核心成员及其简介
        */
        .battle-report-card.special-period[data-special-style="challenger"] {
            background: linear-gradient(135deg, rgba(255,215,0,0.15), rgba(255,140,0,0.1)) !important;
            box-shadow: 0 0 50px rgba(255,215,0,0.6), inset 0 0 30px rgba(255,215,0,0.2) !important;
            border: 3px solid #FFD700 !important;
        }
        
        .battle-report-card.special-period[data-special-style="challenger"] .period-title {
            color: #FFD700 !important;
            text-shadow: 0 2px 6px rgba(0,0,0,0.5) !important;
            font-size: 2.8rem !important;
            animation: glow-pulse 2s ease-in-out infinite;
        }
        
        @keyframes glow-pulse {
            0%, 100% { text-shadow: 0 2px 6px rgba(0,0,0,0.5); }
            50% { text-shadow: 0 2px 8px rgba(255,215,0,0.3), 0 2px 6px rgba(0,0,0,0.5); }
        }
        
        /* 长卷布局：横向滚动容器 */
        .battle-report-card.special-period[data-special-style="challenger"] .baiye-layout-wrapper {
            display: flex !important;
            overflow-x: auto !important;
            gap: 2rem;
            padding: 2rem 1rem;
            scroll-snap-type: x mandatory;
            scrollbar-width: thin;
            scrollbar-color: #FFD700 rgba(0,0,0,0.2);
        }
        
        /* 隐藏默认左右布局 */
        .battle-report-card.special-period[data-special-style="challenger"] .baiye-podium-section,
        .battle-report-card.special-period[data-special-style="challenger"] .baiye-grid-section {
            display: contents !important;
        }
        
        /* 每一屏的容器 - 2026-07-03更新：增大普通成员卡片宽度 */
        .battle-report-card.special-period[data-special-style="challenger"] .member-card,
        .battle-report-card.special-period[data-special-style="challenger"] .baiye-member-item {
            flex-shrink: 0 !important;
            scroll-snap-align: center !important;
            min-width: 380px !important;
            max-width: 420px !important;
            transition: all 0.4s ease;
        }
        
        /* 主C - 第一屏，最大最醒目 */
        .battle-report-card.special-period[data-special-style="challenger"] .member-card.podium-first {
            min-width: 400px;
            transform: scale(1.15);
            box-shadow: 0 20px 60px rgba(255, 215, 0, 0.8), 0 0 50px rgba(255, 215, 0, 1);
            border-width: 4px;
            border-color: #FFD700 !important;
            animation: challenger-hero-glow 3s ease-in-out infinite;
            z-index: 10;
        }
        
        /* 主C称号防止换行 - 2026-07-04修复 */
        .battle-report-card.special-period[data-special-style="challenger"] .member-card.podium-first .member-name {
            white-space: nowrap !important; /* 防止换行 */
            overflow: visible !important; /* 允许溢出显示 */
            text-overflow: clip !important; /* 不显示省略号 */
            display: inline-block !important; /* 确保块级元素 */
            min-width: 280px !important; /* 保证足够宽度 */
        }
        
        @keyframes challenger-hero-glow {
            0%, 100% { box-shadow: 0 20px 60px rgba(255, 215, 0, 0.8), 0 0 50px rgba(255, 215, 0, 1); }
            50% { box-shadow: 0 25px 70px rgba(255, 215, 0, 1), 0 0 70px rgba(255, 140, 0, 0.9), 0 0 90px rgba(255, 215, 0, 0.8); }
        }
        
        /* 副C和次C - 第二屏 */
        .battle-report-card.special-period[data-special-style="challenger"] .member-card.podium-second,
        .battle-report-card.special-period[data-special-style="challenger"] .member-card.podium-third {
            min-width: 280px;
            box-shadow: 0 12px 40px rgba(255, 215, 0, 0.6), 0 0 30px rgba(255, 215, 0, 0.7);
            border-width: 3px;
            border-color: #FFA500 !important;
        }
        
        /* 普通成员 - 第三屏及以后 - 2026-07-03更新：增大卡片宽度以占满空间 [v2] */
        .battle-report-card.special-period[data-special-style="challenger"] .baiye-member-item {
            min-width: 380px !important;
            max-width: 420px !important;
            width: auto !important;
            box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4), 0 0 15px rgba(255, 215, 0, 0.5);
            border-color: rgba(255, 215, 0, 0.6) !important;
        }
        
        /* ========== 最强王者专用：长卷翻页布局样式 ========== */
        
        /* ========== 最强王者专用：长卷翻页布局样式 ========== */
        .battle-report-card.special-period[data-special-style="challenger"] .challenger-scroll-container {
            display: flex;
            overflow-x: auto;
            gap: 2rem;
            padding: 2rem 1rem;
            scroll-snap-type: x mandatory;
            scrollbar-width: thin;
            scrollbar-color: #FFD700 rgba(0,0,0,0.2);
            height: 100%;
        }
        
        .battle-report-card.special-period[data-special-style="challenger"] .challenger-screen {
            flex-shrink: 0;
            scroll-snap-align: start;
            min-width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 2rem;
            cursor: pointer; /* 支持点击切换 */
        }
        
        .battle-report-card.special-period[data-special-style="challenger"] .hero-title,
        .battle-report-card.special-period[data-special-style="challenger"] .group-title {
            font-size: 1.8rem;
            color: #FFD700;
            text-shadow: 0 2px 4px rgba(0,0,0,0.4);
            margin-bottom: 2rem;
            font-weight: 500;
        }
        
        .battle-report-card.special-period[data-special-style="challenger"] .hero-main-c {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1.5rem; /* 增大间距 */
            width: 100%;
            max-width: 800px;
            margin: 0 auto;
        }
        
        /* 副C/次C卡片容器 */
        .battle-report-card.special-period[data-special-style="challenger"] .hero-sub-cards {
            display: flex;
            gap: 4rem; /* 从3rem增大到4rem，进一步增加间距 */
            justify-content: center;
            flex-wrap: wrap;
            margin-top: 3rem; /* 从2rem增大到3rem，避免与主C重叠 */
        }
        
        .battle-report-card.special-period[data-special-style="challenger"] .hero-card {
            background: linear-gradient(135deg, rgba(255,215,0,0.25), rgba(255,140,0,0.15)); /* 增强背景渐变 */
            border: 3px solid rgba(255, 215, 0, 0.9); /* 加强边框 */
            border-radius: 16px;
            padding: 2rem 2rem; /* 恢复为原始值，保持适中宽度 */
            min-width: 280px; /* 从230px增大到280px，为主C称号留出足够空间 */
            text-align: center;
            box-shadow: 0 15px 40px rgba(255, 215, 0, 0.6), 0 0 30px rgba(255, 215, 0, 0.7); /* 增强发光 */
        }
        
        /* 主C卡片 - 最强视觉冲击 */
        .battle-report-card.special-period[data-special-style="challenger"] .hero-card-main {
            transform: scale(1.25); /* 增大缩放比例 */
            border-width: 4px !important; /* 边框稍微减细，更精致 */
            border-color: #FFD700 !important;
            background: linear-gradient(135deg, rgba(255,215,0,0.2), rgba(255,140,0,0.1)) !important; /* 减弱背景渐变 */
            box-shadow: 0 15px 40px rgba(255, 215, 0, 0.5), 0 0 20px rgba(255, 215, 0, 0.6) !important; /* 简化为两层柔和阴影 */
            animation: challenger-hero-glow 3s ease-in-out infinite; /* 放慢动画速度，更优雅 */
            z-index: 10;
            position: relative;
            overflow: visible;
            min-width: 280px; /* 增加最小宽度，防止称号换行 */
        }
        
        @keyframes challenger-hero-glow {
            0%, 100% { 
                box-shadow: 0 15px 40px rgba(255, 215, 0, 0.5), 0 0 20px rgba(255, 215, 0, 0.6);
                border-color: #FFD700;
            }
            50% { 
                box-shadow: 0 20px 50px rgba(255, 215, 0, 0.6), 0 0 30px rgba(255, 215, 0, 0.7);
                border-color: #FFFACD;
            }
        }
        
        /* ========== 主C特效：皇冠 ========= */
        .battle-report-card.special-period[data-special-style="challenger"] .hero-card-main .challenger-crown {
            position: absolute;
            top: -25px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 3.5rem; /* 从2.5rem增大到3.5rem */
            color: #FFD700;
            text-shadow: 0 0 5px rgba(255, 215, 0, 0.8), 0 0 10px rgba(255, 140, 0, 0.6); /* 减弱文字光晕 */
            animation: crown-float 2s ease-in-out infinite;
            pointer-events: none;
            z-index: 10;
        }
        
        @keyframes crown-float {
            0%, 100% { transform: translateX(-50%) translateY(0); }
            50% { transform: translateX(-50%) translateY(-8px); }
        }
        
        .battle-report-card.special-period[data-special-style="challenger"] .hero-name {
            font-size: 2rem;
            color: #FFD700;
            margin: 1rem 0 0.5rem 0;
            text-shadow: 0 2px 4px rgba(0,0,0,0.4);
            white-space: nowrap; /* 防止称号换行 */
            overflow: hidden; /* 隐藏溢出内容 */
            text-overflow: ellipsis; /* 溢出显示省略号 */
            max-width: 100%; /* 限制最大宽度 */
            display: block; /* 确保块级元素 */
        }
        
        .battle-report-card.special-period[data-special-style="challenger"] .hero-game-title {
            font-size: 1.2rem;
            color: #FFE4B5; /* 改为浅色，更易读 */
            margin: 0;
        }
        
        /* 副C卡片 - 银月剑影风格 */
        .battle-report-card.special-period[data-special-style="challenger"] .hero-card-vice {
            transform: scale(1.22); /* 从1.18增大到1.22，更接近主C */
            border-width: 4px !important; /* 加粗边框 */
            border-color: #C0C0C0 !important; /* 银色边框 */
            background: linear-gradient(135deg, rgba(192,192,192,0.3), rgba(255,255,255,0.2)) !important; /* 银色背景 */
            box-shadow: 0 18px 50px rgba(192, 192, 192, 0.8), 0 0 40px rgba(255, 255, 255, 0.7), 0 0 60px rgba(192, 192, 192, 0.6) !important; /* 三层阴影 */
            animation: vice-silver-glow 2.5s ease-in-out infinite; /* 加快动画速度 */
            position: relative;
            overflow: visible;
        }
        
        /* 副C头像框 - 银色 */
        .battle-report-card.special-period[data-special-style="challenger"] .hero-card-vice .member-avatar {
            border: 4px solid #C0C0C0 !important;
            box-shadow: 0 0 15px rgba(192, 192, 192, 0.8), 0 0 25px rgba(255, 255, 255, 0.6) !important;
        }
        
        @keyframes vice-silver-glow {
            0%, 100% { 
                box-shadow: 0 18px 50px rgba(192, 192, 192, 0.8), 0 0 40px rgba(255, 255, 255, 0.7), 0 0 60px rgba(192, 192, 192, 0.6);
                border-color: #C0C0C0;
            }
            50% { 
                box-shadow: 0 22px 60px rgba(192, 192, 192, 1), 0 0 50px rgba(255, 255, 255, 0.9), 0 0 80px rgba(192, 192, 192, 0.8), 0 0 100px rgba(255, 255, 255, 0.6);
                border-color: #E0E0E0;
            }
        }
        
        /* 次C卡片 - 星火流萤风格 */
        .battle-report-card.special-period[data-special-style="challenger"] .hero-card-sub {
            transform: scale(1.22); /* 从1.18增大到1.22，更接近主C */
            border-width: 4px !important; /* 加粗边框 */
            border-color: #FF6347 !important; /* 橙红色边框 */
            background: linear-gradient(135deg, rgba(255,99,71,0.3), rgba(255,140,0,0.2)) !important; /* 橙红背景 */
            box-shadow: 0 18px 50px rgba(255, 99, 71, 0.8), 0 0 40px rgba(255, 140, 0, 0.7), 0 0 60px rgba(255, 69, 0, 0.6) !important; /* 三层阴影 */
            animation: sub-fire-glow 2.5s ease-in-out infinite; /* 加快动画速度 */
            position: relative;
            overflow: visible;
        }
        
        /* 次C头像框 - 橙红色 */
        .battle-report-card.special-period[data-special-style="challenger"] .hero-card-sub .member-avatar {
            border: 4px solid #FF6347 !important;
            box-shadow: 0 0 15px rgba(255, 99, 71, 0.8), 0 0 25px rgba(255, 140, 0, 0.6) !important;
        }
        
        @keyframes sub-fire-glow {
            0%, 100% { 
                box-shadow: 0 18px 50px rgba(255, 99, 71, 0.8), 0 0 40px rgba(255, 140, 0, 0.7), 0 0 60px rgba(255, 69, 0, 0.6);
                border-color: #FF6347;
            }
            50% { 
                box-shadow: 0 22px 60px rgba(255, 99, 71, 1), 0 0 50px rgba(255, 140, 0, 0.9), 0 0 80px rgba(255, 69, 0, 0.8), 0 0 100px rgba(255, 99, 71, 0.6);
                border-color: #FF8C00;
            }
        }
        
        /* ========== 副C特效：银月剑影 ========= */
        .battle-report-card.special-period[data-special-style="challenger"] .hero-card-vice .challenger-rune-decoration {
            position: absolute;
            top: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 60px;
            border: 3px solid rgba(192, 192, 192, 0.8);
            border-radius: 50%;
            animation: rune-spin 8s linear infinite;
            pointer-events: none;
            z-index: 1;
        }
        
        .battle-report-card.special-period[data-special-style="challenger"] .hero-card-vice .challenger-rune-decoration::before,
        .battle-report-card.special-period[data-special-style="challenger"] .hero-card-vice .challenger-rune-decoration::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 40px;
            height: 40px;
            border: 2px solid rgba(255, 255, 255, 0.6);
            border-radius: 50%;
        }
        
        .battle-report-card.special-period[data-special-style="challenger"] .hero-card-vice .challenger-orbit-dot {
            position: absolute;
            font-size: 1.5rem;
            color: rgba(255, 255, 255, 0.9);
            text-shadow: 0 0 10px rgba(255, 255, 255, 1), 0 0 20px rgba(192, 192, 192, 0.8);
            animation: orbit-float 3s ease-in-out infinite;
            pointer-events: none;
            z-index: 2;
        }
        
        .battle-report-card.special-period[data-special-style="challenger"] .hero-card-vice .challenger-orbit-dot:nth-child(2) {
            top: 10%;
            right: 10%;
            animation-delay: 0s;
        }
        
        .battle-report-card.special-period[data-special-style="challenger"] .hero-card-vice .challenger-orbit-dot:nth-child(3) {
            bottom: 10%;
            left: 10%;
            animation-delay: 0.75s;
        }
        
        .battle-report-card.special-period[data-special-style="challenger"] .hero-card-vice .challenger-orbit-dot:nth-child(4) {
            top: 10%;
            left: 10%;
            animation-delay: 1.5s;
        }
        
        .battle-report-card.special-period[data-special-style="challenger"] .hero-card-vice .challenger-orbit-dot:nth-child(5) {
            bottom: 10%;
            right: 10%;
            animation-delay: 2.25s;
        }
        
        .battle-report-card.special-period[data-special-style="challenger"] .hero-card-vice .challenger-sword-glow {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 200px;
            height: 200px;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
            border-radius: 50%;
            animation: sword-pulse 2s ease-in-out infinite;
            pointer-events: none;
            z-index: 0;
        }
        
        @keyframes rune-spin {
            from { transform: translateX(-50%) rotate(0deg); }
            to { transform: translateX(-50%) rotate(360deg); }
        }
        
        @keyframes orbit-float {
            0%, 100% { transform: translateY(0) scale(1); opacity: 0.8; }
            50% { transform: translateY(-10px) scale(1.2); opacity: 1; }
        }
        
        @keyframes sword-pulse {
            0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
            50% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.8; }
        }
        
        /* ========== 次C特效：星火流萤 ========= */
        .battle-report-card.special-period[data-special-style="challenger"] .hero-card-sub .challenger-particle {
            position: absolute;
            font-size: 1.2rem;
            color: #FFD700;
            text-shadow: 0 0 8px rgba(255, 215, 0, 1), 0 0 15px rgba(255, 140, 0, 0.8);
            animation: particle-rise 4s ease-in-out infinite;
            pointer-events: none;
            z-index: 2;
        }
        
        .battle-report-card.special-period[data-special-style="challenger"] .hero-card-sub .challenger-particle:nth-child(1) {
            bottom: 15%;
            left: 15%;
            animation-delay: 0s;
        }
        
        .battle-report-card.special-period[data-special-style="challenger"] .hero-card-sub .challenger-particle:nth-child(2) {
            bottom: 25%;
            left: 30%;
            animation-delay: 0.8s;
        }
        
        .battle-report-card.special-period[data-special-style="challenger"] .hero-card-sub .challenger-particle:nth-child(3) {
            bottom: 20%;
            right: 25%;
            animation-delay: 1.6s;
        }
        
        .battle-report-card.special-period[data-special-style="challenger"] .hero-card-sub .challenger-particle:nth-child(4) {
            bottom: 30%;
            right: 15%;
            animation-delay: 2.4s;
        }
        
        .battle-report-card.special-period[data-special-style="challenger"] .hero-card-sub .challenger-particle:nth-child(5) {
            bottom: 10%;
            left: 50%;
            transform: translateX(-50%);
            animation-delay: 3.2s;
        }
        
        @keyframes particle-rise {
            0% { transform: translateY(0) scale(0.8); opacity: 0; }
            20% { opacity: 1; }
            80% { opacity: 1; }
            100% { transform: translateY(-50px) scale(1.2); opacity: 0; }
        }
        
        .battle-report-card.special-period[data-special-style="challenger"] .sub-card-name {
            font-size: 1.8rem; /* 继续增大字体 */
            color: #FFD700;
            margin: 1.2rem 0 0.6rem 0;
            text-shadow: 0 2px 4px rgba(0,0,0,0.4);
        }
        
        .battle-report-card.special-period[data-special-style="challenger"] .sub-card-game {
            font-size: 1.2rem; /* 继续增大字体 */
            color: #FFE4B5;
            margin: 0;
        }
        
        .battle-report-card.special-period[data-special-style="challenger"] .hero-sub-info {
            margin-top: 0.8rem; /* 更紧凑 */
            color: #FFD700; /* 金色文字 */
            opacity: 1; /* 完全不透明 */
            font-size: 1.3rem; /* 更大字体 */
            font-weight: bold; /* 加粗 */
            text-shadow: 0 0 12px rgba(0, 0, 0, 1), 0 0 25px rgba(0, 0, 0, 0.9); /* 更强阴影 */
            background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4)); /* 更深的渐变背景 */
            padding: 1.2rem 2.5rem; /* 更大的内边距 */
            border-radius: 20px;
            border: 4px solid rgba(255, 215, 0, 1); /* 更粗的金色边框 */
            box-shadow: 0 8px 40px rgba(0, 0, 0, 0.8), 0 0 30px rgba(255, 215, 0, 0.5); /* 更强的外阴影 + 金色光晕 */
            animation: subInfoGlow 1.5s ease-in-out infinite alternate; /* 更快的呼吸动画 */
        }
        
        @keyframes subInfoGlow {
            0% { box-shadow: 0 6px 30px rgba(0, 0, 0, 0.7), 0 0 20px rgba(255, 215, 0, 0.3); }
            100% { box-shadow: 0 6px 30px rgba(0, 0, 0, 0.7), 0 0 30px rgba(255, 215, 0, 0.6); }
        }
        
        .battle-report-card.special-period[data-special-style="challenger"] .scroll-indicator {
            margin-top: 2rem;
            color: #FFE4B5;
            opacity: 0.8;
            font-size: 0.9rem;
            animation: pulse 2s ease-in-out infinite;
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 0.8; }
            50% { opacity: 1; }
        }
        
        .battle-report-card.special-period[data-special-style="challenger"] .group-members-grid {
            display: grid !important; /* 改为网格布局，一行展示 */
            grid-template-columns: repeat(7, 1fr) !important; /* 2026-07-03更新：固定7列，确保一行展示完 */
            gap: 0.2rem; /* 极限间距，几乎贴在一起 */
            width: 100%;
            padding: 1rem 0;
            align-items: start !important; /* 防止卡片被拉伸 */
        }
        
        /* 强制去掉普通成员卡片的边框和背景渐变 */
        .battle-report-card.special-period[data-special-style="challenger"] .group-member-card,
        .battle-report-card.special-period[data-special-style="challenger"] .baiye-member-item {
            background: none !important; /* 去掉背景渐变 */
            border: none !important; /* 去掉边框 */
            border-image: none !important; /* 去掉边框图片 */
            box-shadow: 0 4px 15px rgba(255, 215, 0, 0.2) !important; /* 只保留微弱阴影 */
        }
        
        /* 去掉普通成员卡片内部名称的边框/背景 */
        .battle-report-card.special-period[data-special-style="challenger"] .group-member-card .member-name,
        .battle-report-card.special-period[data-special-style="challenger"] .group-member-card .member-token {
            background: none !important;
            background-image: none !important;
            -webkit-background-clip: initial !important;
            -webkit-text-fill-color: #FFE4B5 !important;
            background-clip: initial !important;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
            color: #FFE4B5 !important;
            border: none !important;
            box-shadow: none !important;
            padding: 0 !important;
            margin: 0.1rem 0 !important;
        }
        
        .battle-report-card.special-period[data-special-style="challenger"] .group-member-card {
            background: linear-gradient(135deg, rgba(255,215,0,0.15), rgba(255,140,0,0.08)) !important; /* 增强背景渐变 */
            background-image: none !important; /* 强制去掉背景图片 */
            border: 3px solid rgba(255, 215, 0, 0.8) !important; /* 加粗金色边框，与C位协调 */
            border-radius: 12px;
            padding: 2rem !important; /* 极限内边距，让卡片达到最大饱满度 */
            text-align: center;
            transition: all 0.3s ease;
            min-width: auto !important; /* 2026-07-03更新：移除最小宽度限制，让网格自动分配 */
            max-width: 100% !important; /* 2026-07-03更新：允许占满网格单元格 */
            width: 100% !important; /* 2026-07-03更新：占满网格单元格 */
            min-height: auto !important; /* 取消最小高度 */
            height: auto !important; /* 自动高度 */
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: flex-start !important;
            box-shadow: 0 4px 15px rgba(255, 215, 0, 0.5), 0 0 10px rgba(255, 215, 0, 0.3) !important; /* 增强阴影，融入challenger风格 */
        }
        
        .battle-report-card.special-period[data-special-style="challenger"] .group-member-card:hover {
            transform: translateY(-5px) scale(1.02); /* 悬停时上浮并略微放大 */
            box-shadow: 0 8px 25px rgba(255, 215, 0, 0.7), 0 0 15px rgba(255, 215, 0, 0.5);
            border-color: #FFD700 !important; /* 悬停时边框变亮 */
        }
        
        .battle-report-card.special-period[data-special-style="challenger"] .group-member-card .member-avatar {
            width: 60px !important; /* 减小头像尺寸 */
            height: 60px !important;
            margin: 0 auto 0.3rem auto;
        }
        
        .battle-report-card.special-period[data-special-style="challenger"] .group-member-card .member-name {
            font-size: 0.9rem !important; /* 减小字体 */
            margin: 0.2rem 0 !important;
            line-height: 1.2 !important;
        }
        
        .battle-report-card.special-period[data-special-style="challenger"] .group-member-card .member-token {
            font-size: 0.85rem !important; /* 稍微增大字体 */
            margin: 0.15rem 0 !important;
            line-height: 1.2 !important;
            opacity: 0.9; /* 提高透明度 */
            color: #FFE4B5 !important; /* 浅色文字 */
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
            display: block !important; /* 恢复显示游戏名称 */
            min-height: auto !important; /* 重置最小高度，防止被全局样式拉伸 */
            height: auto !important; /* 自动高度 */
        }
        
        /* ========== 傲世宗师 - 方案二：席位阶梯·空间占位法 ==========
           核心效果：从上到下，地位依次递减，形成金字塔座次感
           布局：主C最高居中，副C次C左右对称略矮，普通成员第三梯队紧凑排列
        */
        .battle-report-card.special-period[data-special-style="grandmaster"] {
            background: linear-gradient(135deg, rgba(220,20,60,0.15), rgba(139,0,0,0.1)) !important;
            box-shadow: 0 0 40px rgba(220,20,60,0.5), inset 0 0 25px rgba(220,20,60,0.15) !important;
            border: 3px solid #DC143C !important;
        }
        
        .battle-report-card.special-period[data-special-style="grandmaster"] .period-title {
            color: #DC143C !important;
            text-shadow: 0 2px 6px rgba(0,0,0,0.5) !important;
            font-size: 2.6rem !important;
        }
        
        /* 傲世宗师 - 三星拱月布局：主C居中，众星捧月（完美对称版） */
        .battle-report-card.special-period[data-special-style="grandmaster"] .baiye-layout-wrapper {
            display: grid !important;
            grid-template-columns: repeat(6, 1fr);
            grid-template-rows: auto auto auto;
            gap: 1.2rem;
            padding: 2rem;
        }
        
        /* 隐藏默认左右布局 */
        .battle-report-card.special-period[data-special-style="grandmaster"] .baiye-podium-section,
        .battle-report-card.special-period[data-special-style="grandmaster"] .baiye-grid-section {
            display: contents !important;
        }
        
        /* 主C - 正中心，独占2列（列3-4），被所有人环绕 */
        .battle-report-card.special-period[data-special-style="grandmaster"] .member-card.podium-first {
            grid-column: 3 / span 2;
            grid-row: 2;
            transform: scale(1.2) translateX(1rem); /* ✅ 往右移动适中 */
            box-shadow: 0 18px 50px rgba(220, 20, 60, 0.7), 0 0 40px rgba(220, 20, 60, 0.8);
            border-width: 4px;
            border-color: #DC143C !important;
            animation: grandmaster-hero-glow 3s ease-in-out infinite;
            z-index: 10;
        }
        
        @keyframes grandmaster-hero-glow {
            0%, 100% { box-shadow: 0 18px 50px rgba(220, 20, 60, 0.7), 0 0 40px rgba(220, 20, 60, 0.8); }
            50% { box-shadow: 0 22px 60px rgba(220, 20, 60, 0.9), 0 0 50px rgba(220, 20, 60, 1), 0 0 70px rgba(178, 34, 34, 0.8); }
        }
        
        /* 副C - 主C左侧（列2），像左护卫 */
        .battle-report-card.special-period[data-special-style="grandmaster"] .member-card.podium-second {
            grid-column: 2;
            grid-row: 2;
            transform: scale(1.08);
            box-shadow: 0 12px 35px rgba(220, 20, 60, 0.5), 0 0 25px rgba(220, 20, 60, 0.6);
            border-width: 3px;
            border-color: #B22222 !important;
        }
        
        /* 次C - 主C右侧（列5），像右护卫 */
        .battle-report-card.special-period[data-special-style="grandmaster"] .member-card.podium-third {
            grid-column: 5;
            grid-row: 2;
            transform: scale(1.08);
            box-shadow: 0 12px 35px rgba(220, 20, 60, 0.5), 0 0 25px rgba(220, 20, 60, 0.6);
            border-width: 3px;
            border-color: #B22222 !important;
        }
        
        /* 普通成员 - 完美对称分布：上方6个 + 左右护卫各1个 + 下方4个 */
        
        /* ✅ 傲世宗师专属：所有成员称号强制单行显示，不截断 */
        .battle-report-card.special-period[data-special-style="grandmaster"] .member-card .member-name {
            white-space: nowrap !important;
            overflow: visible !important;
            text-overflow: clip !important;
            display: block !important;
        }
        .battle-report-card.special-period[data-special-style="grandmaster"] .baiye-member-item .member-name {
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            display: block !important;
            max-width: 100% !important;
        }
        
        .battle-report-card.special-period[data-special-style="grandmaster"] .baiye-member-item:nth-child(1) {
            grid-column: 1; grid-row: 1;
        }
        .battle-report-card.special-period[data-special-style="grandmaster"] .baiye-member-item:nth-child(2) {
            grid-column: 2; grid-row: 1;
        }
        .battle-report-card.special-period[data-special-style="grandmaster"] .baiye-member-item:nth-child(3) {
            grid-column: 3; grid-row: 1;
        }
        .battle-report-card.special-period[data-special-style="grandmaster"] .baiye-member-item:nth-child(4) {
            grid-column: 4; grid-row: 1;
        }
        .battle-report-card.special-period[data-special-style="grandmaster"] .baiye-member-item:nth-child(5) {
            grid-column: 5; grid-row: 1;
        }
        .battle-report-card.special-period[data-special-style="grandmaster"] .baiye-member-item:nth-child(6) {
            grid-column: 6; grid-row: 1;
        }
        .battle-report-card.special-period[data-special-style="grandmaster"] .baiye-member-item:nth-child(7) {
            grid-column: 1; grid-row: 2;
        }
        .battle-report-card.special-period[data-special-style="grandmaster"] .baiye-member-item:nth-child(8) {
            grid-column: 6; grid-row: 2;
        }
        .battle-report-card.special-period[data-special-style="grandmaster"] .baiye-member-item:nth-child(9) {
            grid-column: 2; grid-row: 3;
        }
        .battle-report-card.special-period[data-special-style="grandmaster"] .baiye-member-item:nth-child(10) {
            grid-column: 3; grid-row: 3;
        }
        .battle-report-card.special-period[data-special-style="grandmaster"] .baiye-member-item:nth-child(11) {
            grid-column: 4; grid-row: 3;
        }
        .battle-report-card.special-period[data-special-style="grandmaster"] .baiye-member-item:nth-child(12) {
            grid-column: 5; grid-row: 3;
        }
        
        /* ========== 超凡大师 - 方案四：星罗棋布·散点分布法 ==========
           核心效果：成员像星辰一样散落在背景中，位置错落有致，不刻意对齐，形成“江湖群侠图”的感觉
           特点：没有固定行列，每个卡片位置经过刻意安排；特殊成员占据视觉重心（更大、更亮、更靠中心或黄金分割点）
        */
        .battle-report-card.special-period[data-special-style="master"] {
            background: linear-gradient(135deg, rgba(25,25,112,0.15), rgba(70,130,180,0.1)) !important;
            box-shadow: 0 0 40px rgba(25,25,112,0.5), inset 0 0 25px rgba(25,25,112,0.15) !important;
            border: 3px solid #1E90FF !important;
        }
        
        .battle-report-card.special-period[data-special-style="master"] .period-title {
            color: #1E90FF !important;
            text-shadow: 0 2px 6px rgba(0,0,0,0.5) !important;
            font-size: 2.6rem !important;
        }
        
        /* 星罗棋布布局：绝对定位散点分布 */
        .battle-report-card.special-period[data-special-style="master"] .baiye-layout-wrapper {
            position: relative !important;
            min-height: 900px;
            padding: 2rem;
            overflow: hidden;
        }
        
        /* 隐藏默认左右布局 */
        .battle-report-card.special-period[data-special-style="master"] .baiye-podium-section,
        .battle-report-card.special-period[data-special-style="master"] .baiye-grid-section {
            display: contents !important;
        }
        
        /* 所有卡片统一基础样式 */
        .battle-report-card.special-period[data-special-style="master"] .member-card,
        .battle-report-card.special-period[data-special-style="master"] .baiye-member-item {
            position: absolute !important;
            transition: all 0.4s ease;
        }
        
        /* 主C - 左上偏中心位置，最大最亮 */
        .battle-report-card.special-period[data-special-style="master"] .member-card.podium-first {
            top: 10%;
            left: 25%;
            transform: scale(1.25);
            box-shadow: 0 15px 45px rgba(25, 25, 112, 0.7), 0 0 35px rgba(30, 144, 255, 0.8);
            border-width: 4px;
            border-color: #1E90FF !important;
            animation: master-hero-glow 3s ease-in-out infinite;
            z-index: 20; /*  提高主C层级，确保在最上层 */
        }
        
        @keyframes master-hero-glow {
            0%, 100% { box-shadow: 0 15px 45px rgba(25, 25, 112, 0.7), 0 0 35px rgba(30, 144, 255, 0.8); }
            50% { box-shadow: 0 20px 55px rgba(25, 25, 112, 0.9), 0 0 45px rgba(30, 144, 255, 1), 0 0 60px rgba(70, 130, 180, 0.8); }
        }
        
        /* 副C - 右下偏中心位置 */
        .battle-report-card.special-period[data-special-style="master"] .member-card.podium-second {
            top: 55%;
            left: 60%;
            transform: scale(1.1);
            box-shadow: 0 12px 35px rgba(25, 25, 112, 0.5), 0 0 25px rgba(30, 144, 255, 0.6);
            border-width: 3px;
            border-color: #4682B4 !important;
            z-index: 19; /* 🔧 副C层级略低于主C */
        }
        
        /* 次C - 右上区域 */
        .battle-report-card.special-period[data-special-style="master"] .member-card.podium-third {
            top: 15%;
            left: 65%;
            transform: scale(1.1);
            box-shadow: 0 12px 35px rgba(25, 25, 112, 0.5), 0 0 25px rgba(30, 144, 255, 0.6);
            border-width: 3px;
            border-color: #4682B4 !important;
            z-index: 18; /* 🔧 次C层级略低于副C */
        }
        
        /* 普通成员 - 散落分布在各个位置 */
        .battle-report-card.special-period[data-special-style="master"] .baiye-member-item {
            z-index: 1; /* 默认层级 */
        }
        .battle-report-card.special-period[data-special-style="master"] .baiye-member-item:nth-child(1) {
            top: 45%; left: 8%; transform: scale(0.95); z-index: 2; /* 🔧 left从10%改为8%，避免溢出 */
        }
        .battle-report-card.special-period[data-special-style="master"] .baiye-member-item:nth-child(2) {
            top: 25%; left: 42%; transform: scale(0.95); z-index: 3; /* 🔧 left从45%改为42% */
        }
        .battle-report-card.special-period[data-special-style="master"] .baiye-member-item:nth-child(3) {
            top: 62%; left: 28%; transform: scale(0.95); z-index: 4; /* top从70%改为62%，防止底部溢出 */
        }
        .battle-report-card.special-period[data-special-style="master"] .baiye-member-item:nth-child(4) {
            top: 35%; left: 62%; transform: scale(0.95); z-index: 5; /* left从72%改为62%，防止右侧溢出 */
        }
        .battle-report-card.special-period[data-special-style="master"] .baiye-member-item:nth-child(5) {
            top: 68%; left: 50%; transform: scale(0.95); z-index: 6; /* top从75%改为68%，防止底部溢出 */
        }
        .battle-report-card.special-period[data-special-style="master"] .baiye-member-item:nth-child(6) {
            top: 50%; left: 38%; transform: scale(0.95); z-index: 7; /* 🔧 left从40%改为38% */
        }
        .battle-report-card.special-period[data-special-style="master"] .baiye-member-item:nth-child(7) {
            top: 55%; left: 65%; transform: scale(0.95); z-index: 8; /* top从60%改为55%，left从75%改为65%，防止右侧溢出 */
        }
        /* 第8个及以后的成员 - 随机分布在不同位置，避免重叠 */
        .battle-report-card.special-period[data-special-style="master"] .baiye-member-item:nth-child(8) {
            top: 20%; left: 12%; transform: scale(0.9); z-index: 9; /* 🔧 left从15%改为12% */
        }
        .battle-report-card.special-period[data-special-style="master"] .baiye-member-item:nth-child(9) {
            top: 72%; left: 38%; transform: scale(0.9); z-index: 10; /* top从80%改为72%，left从45%改为38%，防止底部溢出 */
        }
        .battle-report-card.special-period[data-special-style="master"] .baiye-member-item:nth-child(10) {
            top: 40%; left: 52%; transform: scale(0.9); z-index: 11; /*  left从55%改为52% */
        }
        
        /* ========== 钻石样式 - 卡牌翻转布局 ==========
           核心效果：所有成员平铺排列，特殊成员卡片默认翻开状态（可见内容），普通成员半翻开或合上状态
        */
        .battle-report-card.special-period[data-special-style="diamond"] {
            background: linear-gradient(135deg, rgba(139, 0, 0, 0.15), rgba(26, 0, 0, 0.1)) !important; /* ✅ 暗红色半透明背景 */
            box-shadow: 0 0 40px rgba(139, 0, 0, 0.5), inset 0 0 25px rgba(139, 0, 0, 0.15) !important; /* ✅ 红色外发光+内阴影 */
            border: 3px solid #8b0000 !important; /* ✅ 深红色边框 */
        }
        
        .battle-report-card.special-period[data-special-style="diamond"] .period-title {
            color: #FFD700 !important; /* ✅ 金色标题 */
            text-shadow: 0 2px 6px rgba(0,0,0,0.5) !important; /* 金色标题 + 柔和阴影 */
            font-size: 2.6rem !important;
        }
        
        /* 钻石布局：两行五列 */
        .battle-report-card.special-period[data-special-style="diamond"] .baiye-layout-wrapper {
            display: grid !important;
            grid-template-columns: repeat(5, 1fr);
            grid-template-rows: auto auto;
            gap: 1rem; /* ✅ 减小间距，适应更长的卡片 */
            padding: 2.5rem; /* ✅ 增加内边距 */
            max-width: 1100px; /* ✅ 调整最大宽度，适应更窄的卡片 */
            margin: 0 auto;
            position: relative;
            perspective: 1000px; /* ✅ 添加3D透视效果 */
        }
        
        /* 隐藏原来的颁奖台和普通成员容器 */
        .battle-report-card.special-period[data-special-style="diamond"] .baiye-podium-section,
        .battle-report-card.special-period[data-special-style="diamond"] .baiye-grid-section {
            display: contents !important;
        }
        
        /* ✅ 卡片容器 - 提供3D透视空间 */
        .battle-report-card.special-period[data-special-style="diamond"] .baiye-member-item,
        .battle-report-card.special-period[data-special-style="diamond"] .member-card {
            width: 160px;  /* ✅ 统一宽度 - 适中 */
            height: 480px; /* ✅ 统一高度 - 非常长，形成明显的竖条卡牌 */
            perspective: 1000px; /* ✅ 3D透视效果 */
            cursor: pointer; /* ✅ 鼠标指针显示为手型 */
        }
        
        /* ✅ 卡片内部包装器 - 负责翻转动画 */
        .battle-report-card.special-period[data-special-style="diamond"] .baiye-member-item > .card-inner,
        .battle-report-card.special-period[data-special-style="diamond"] .member-card > .card-inner {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d; /* ✅ 保持3D变换 */
            transition: transform 0.6s ease-in-out; /* ✅ 平滑翻转动画 */
            transform: rotateY(180deg); /* ✅ 初始状态：背面朝上 */
        }
        
        /* ✅ 翻开状态 */
        .battle-report-card.special-period[data-special-style="diamond"] .baiye-member-item.flipped > .card-inner,
        .battle-report-card.special-period[data-special-style="diamond"] .member-card.flipped > .card-inner {
            transform: rotateY(0deg); /* ✅ 翻转到正面 */
        }
        
        /* ✅ SSR金卡翻开瞬间的爆炸动画 - 震撼效果！*/
        .battle-report-card.special-period[data-special-style="diamond"] .baiye-member-item.podium-first.flipped > .card-inner,
        .battle-report-card.special-period[data-special-style="diamond"] .baiye-member-item.podium-second.flipped > .card-inner,
        .battle-report-card.special-period[data-special-style="diamond"] .baiye-member-item.podium-third.flipped > .card-inner,
        .battle-report-card.special-period[data-special-style="diamond"] .member-card.podium-first.flipped > .card-inner,
        .battle-report-card.special-period[data-special-style="diamond"] .member-card.podium-second.flipped > .card-inner,
        .battle-report-card.special-period[data-special-style="diamond"] .member-card.podium-third.flipped > .card-inner {
            animation: ssr-flip-burst 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        }
        
        @keyframes ssr-flip-burst {
            0% {
                transform: rotateY(180deg) scale(0.8);
                filter: brightness(0.5) blur(5px);
            }
            50% {
                transform: rotateY(90deg) scale(1.2);
                filter: brightness(2) blur(0px);
                box-shadow: 0 0 100px rgba(255, 215, 0, 1), 0 0 150px rgba(255, 215, 0, 0.8);
            }
            75% {
                transform: rotateY(0deg) scale(1.1);
                filter: brightness(1.5);
            }
            100% {
                transform: rotateY(0deg) scale(1.05);
                filter: brightness(1.2);
            }
        }
        
        /* ✅ 卡片正面和背面通用样式 */
        .battle-report-card.special-period[data-special-style="diamond"] .card-front,
        .battle-report-card.special-period[data-special-style="diamond"] .card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden; /* ✅ 隐藏背面 */
            border-radius: 12px;
            box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
            overflow: hidden;
        }
        
        /* ✅ 卡片正面样式（成员信息）- 暗红血月主题 */
        .battle-report-card.special-period[data-special-style="diamond"] .card-front {
            background: linear-gradient(135deg, rgba(139, 0, 0, 0.7), rgba(26, 0, 0, 0.5)) !important; /* ✅ 暗红色半透明渐变 */
            border: 3px solid rgba(139, 0, 0, 0.9) !important; /* ✅ 深红色边框 */
            transform: rotateY(0deg); /* ✅ 正面朝向用户 */
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            padding-top: 1rem;
        }
        
        /* ✅ 卡片背面样式（问号）- 完全不透明 */
        .battle-report-card.special-period[data-special-style="diamond"] .card-back {
            background: linear-gradient(135deg, #8b0000 0%, #4a0e0e 50%, #1a0000 100%) !important; /* ✅ 暗红血月渐变 */
            border: 3px solid #FFD700 !important; /* ✅ 金色边框 */
            transform: rotateY(180deg) !important; /* ✅ 背面朝向用户（初始状态）*/
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            z-index: 2 !important; /* ✅ 确保在最上层 */
            opacity: 1 !important; /* ✅ 强制完全不透明 */
            box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.6), 0 0 25px rgba(139, 0, 0, 0.7) !important; /* ✅ 内阴影+红色外发光增强战斗气息 */
        }
        
        /* ✅ 问号样式 - 金色与红色搭配 */
        .battle-report-card.special-period[data-special-style="diamond"] .question-mark {
            font-size: 100px !important;
            font-weight: bold !important;
            color: #FFD700 !important;
            text-shadow: 0 2px 8px rgba(255,215,0,0.3) !important;
            display: block !important;
        }
        
        /* ✅ 特殊成员翻开后的SSR火焰燃烧效果 */
        .battle-report-card.special-period[data-special-style="diamond"] .member-card.podium-first.flipped,
        .battle-report-card.special-period[data-special-style="diamond"] .member-card.podium-second.flipped,
        .battle-report-card.special-period[data-special-style="diamond"] .member-card.podium-third.flipped,
        .battle-report-card.special-period[data-special-style="diamond"] .baiye-member-item.podium-first.flipped,
        .battle-report-card.special-period[data-special-style="diamond"] .baiye-member-item.podium-second.flipped,
        .battle-report-card.special-period[data-special-style="diamond"] .baiye-member-item.podium-third.flipped {
            /* ✅ 炽热火焰光晕 */
            box-shadow: 
                0 0 18px rgba(255, 69, 0, 0.9),
                0 0 36px rgba(255, 140, 0, 0.7),
                0 0 54px rgba(255, 69, 0, 0.5),
                inset 0 0 25px rgba(255, 69, 0, 0.4) !important;
            border: 3px solid #FF4500 !important; /* ✅ 橙红色边框 */
            animation: ssr-flame-glow 2s ease-in-out infinite, ssr-fire-particles 1.5s ease-out infinite;
            z-index: 10;
            transform: scale(1.05);
            background: linear-gradient(to top, rgba(255, 69, 0, 0.4) 0%, rgba(255, 140, 0, 0.2) 50%, transparent 100%) !important; /* ✅ 底部向上渐变 */
        }
        
        /* ✅ SSR火焰呼吸灯动画 - 炽热跳动 */
        @keyframes ssr-flame-glow {
            0%, 100% { 
                box-shadow: 
                    0 0 18px rgba(255, 69, 0, 0.9),
                    0 0 36px rgba(255, 140, 0, 0.7),
                    0 0 54px rgba(255, 69, 0, 0.5),
                    inset 0 0 25px rgba(255, 69, 0, 0.4);
                filter: brightness(1) saturate(1); /* ✅ 无滤镜，头像清晰 */
            }
            33% {
                box-shadow: 
                    0 0 22px rgba(255, 69, 0, 1),
                    0 0 44px rgba(255, 140, 0, 0.8),
                    0 0 66px rgba(255, 69, 0, 0.6),
                    inset 0 0 30px rgba(255, 69, 0, 0.5);
                filter: brightness(1.05) saturate(1.05);
            }
            66% { 
                box-shadow: 
                    0 0 20px rgba(255, 69, 0, 0.95),
                    0 0 40px rgba(255, 140, 0, 0.75),
                    0 0 60px rgba(255, 69, 0, 0.55),
                    inset 0 0 28px rgba(255, 69, 0, 0.45);
                filter: brightness(1.02) saturate(1.02);
            }
        }
        
        /* ✅ 火焰粒子特效 - 从底部向上燃烧 */
        @keyframes ssr-fire-particles {
            0% {
                background-image: 
                    radial-gradient(circle at 30% 90%, rgba(255, 69, 0, 0.6) 0%, transparent 20%),
                    radial-gradient(circle at 50% 95%, rgba(255, 140, 0, 0.5) 0%, transparent 15%),
                    radial-gradient(circle at 70% 88%, rgba(255, 69, 0, 0.6) 0%, transparent 18%);
                background-size: 100% 100%;
                transform: translateY(0);
            }
            50% {
                background-image: 
                    radial-gradient(circle at 35% 70%, rgba(255, 69, 0, 0.5) 0%, transparent 25%),
                    radial-gradient(circle at 50% 75%, rgba(255, 140, 0, 0.4) 0%, transparent 20%),
                    radial-gradient(circle at 65% 68%, rgba(255, 69, 0, 0.5) 0%, transparent 23%);
                background-size: 105% 105%;
                transform: translateY(-10px);
            }
            100% {
                background-image: 
                    radial-gradient(circle at 40% 50%, rgba(255, 69, 0, 0.3) 0%, transparent 30%),
                    radial-gradient(circle at 50% 55%, rgba(255, 140, 0, 0.25) 0%, transparent 25%),
                    radial-gradient(circle at 60% 48%, rgba(255, 69, 0, 0.3) 0%, transparent 28%);
                background-size: 110% 110%;
                transform: translateY(-20px);
            }
        }
        
        /* ✅ 普通成员翻开后的效果 - 暗红血月主题 */
        .battle-report-card.special-period[data-special-style="diamond"] .baiye-member-item.flipped {
            box-shadow: 0 15px 40px rgba(139, 0, 0, 0.7), 0 0 30px rgba(255, 215, 0, 0.5) !important; /* ✅ 红色+金色光晕 */
            border-color: #8b0000 !important; /* ✅ 深红色边框 */
        }
        
        /* ✅ SSR金卡粒子爆炸特效 - 伪元素实现 */
        .battle-report-card.special-period[data-special-style="diamond"] .baiye-member-item.podium-first.flipped::before,
        .battle-report-card.special-period[data-special-style="diamond"] .baiye-member-item.podium-second.flipped::before,
        .battle-report-card.special-period[data-special-style="diamond"] .baiye-member-item.podium-third.flipped::before,
        .battle-report-card.special-period[data-special-style="diamond"] .member-card.podium-first.flipped::before,
        .battle-report-card.special-period[data-special-style="diamond"] .member-card.podium-second.flipped::before,
        .battle-report-card.special-period[data-special-style="diamond"] .member-card.podium-third.flipped::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200%;
            height: 200%;
            transform: translate(-50%, -50%);
            background: radial-gradient(circle, rgba(255, 215, 0, 0.3) 0%, transparent 70%);
            animation: ssr-particle-burst 2s ease-out infinite;
            pointer-events: none;
            z-index: -1;
        }
        
        @keyframes ssr-particle-burst {
            0% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0.5);
            }
            50% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1.2);
            }
            100% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(1.5);
            }
        }
        
        /* ✅ 钻石布局 - 卡片容器基础样式覆盖（移除外层背景/边框/阴影，由card-front/card-back提供）*/
        .battle-report-card.special-period[data-special-style="diamond"] .baiye-member-item,
        .battle-report-card.special-period[data-special-style="diamond"] .member-card {
            background: none !important; /* ✅ 不使用背景，避免干扰card-back */
            border-color: transparent !important;
            box-shadow: none !important; /* ✅ 移除阴影，由card-back提供 */
        }
        
        /* ✅ 钻石布局 - hover时完全禁用全局效果 */
        .battle-report-card.special-period[data-special-style="diamond"] .baiye-member-item:hover,
        .battle-report-card.special-period[data-special-style="diamond"] .member-card:hover {
            background: transparent !important;
            border-color: transparent !important;
            transform: none !important;
        }
        
        .battle-report-card.special-period[data-special-style="diamond"] .baiye-member-item:hover::before,
        .battle-report-card.special-period[data-special-style="diamond"] .member-card:hover::before,
        .battle-report-card.special-period[data-special-style="diamond"] .baiye-member-item:hover::after,
        .battle-report-card.special-period[data-special-style="diamond"] .member-card:hover::after {
            display: none !important;
        }
        
        /* ✅ 钻石布局 - 保留头像hover火焰光晕 */
        .battle-report-card.special-period[data-special-style="diamond"] .baiye-member-item:hover .member-avatar,
        .battle-report-card.special-period[data-special-style="diamond"] .member-card:hover .member-avatar {
            box-shadow: 0 0 18px rgba(255, 69, 0, 0.8), inset 0 0 12px rgba(255, 69, 0, 0.4) !important;
            transform: scale(1.05) !important;
        }
        
        /* ✅ 钻石布局 - 覆盖称号hover金色渐变 */
        .battle-report-card.special-period[data-special-style="diamond"] .baiye-member-item:hover .member-name,
        .battle-report-card.special-period[data-special-style="diamond"] .member-card:hover .member-name {
            color: #FFE4B5 !important;
            background: none !important;
            -webkit-background-clip: unset !important;
            -webkit-text-fill-color: #FFE4B5 !important;
            background-clip: unset !important;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        }
        
        /* ✅ 钻石布局 - 卡片正面称号纯色 */
        .battle-report-card.special-period[data-special-style="diamond"] .card-front .member-name {
            color: #FFE4B5 !important;
            background: none !important;
            -webkit-background-clip: unset !important;
            -webkit-text-fill-color: #FFE4B5 !important;
            background-clip: unset !important;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        }
        
        /* ===== 响应式适配 ===== */
        @media (max-width: 768px) {
            .card-controls { 
                flex-wrap: wrap; 
                gap: 0.8rem;
                padding: 1.5rem 0 0;
            }
            
            .control-btn {
                padding: 0.6rem 1.2rem;
                font-size: 0.9rem;
            }
            
            .period-title {
                font-size: 2rem;
            }
            
            /* 钻石布局移动端适配 - 保持两行五列，但缩小间距 */
            .battle-report-card.special-period[data-special-style="diamond"] .baiye-layout-wrapper {
                grid-template-columns: repeat(5, 1fr);
                gap: 1rem;
                padding: 1rem;
            }
            
            /* 其他布局改为上下布局 */
            .baiye-layout-wrapper:not(.special-period[data-special-style="diamond"]) {
                display: flex;
                flex-direction: column;
                gap: 2rem;
            }
            
            .baiye-podium-section {
                display: flex;
                flex-direction: row;
                gap: 1rem;
                min-width: max-content;
            }
            
            .baiye-grid-section {
                display: grid !important;
                grid-template-columns: repeat(3, 1fr) !important;
                gap: 1rem;
            }
            
            .modal-content { 
                padding: 1.5rem;
                margin: 1rem;
            }
        }
        
        @media (max-width: 480px) {
            /* 小屏幕移动端 */
            .members-display {
                display: block;
                overflow-x: auto;
            }
            
            .baiye-podium-section {
                display: flex;
                flex-direction: row;
                gap: 0.8rem;
                min-width: max-content;
            }
            
            .baiye-grid-section {
                display: grid !important;
                grid-template-columns: repeat(3, 1fr) !important;
                gap: 0.8rem;
            }
            
            .control-btn {
                padding: 0.5rem 1rem;
                font-size: 0.85rem;
            }
            
            .period-title {
                font-size: 1.6rem;
            }
            
            .battle-report-card {
                padding: 2rem 1rem 1.5rem;
            }
            
            /* 钻石布局小屏幕适配 - 改为两行五列滚动 */
            .battle-report-card.special-period[data-special-style="diamond"] .baiye-layout-wrapper {
                grid-template-columns: repeat(5, minmax(120px, 1fr));
                gap: 0.8rem;
                padding: 0.5rem;
                overflow-x: auto;
            }
        }
        
        @media (max-width: 480px) {
            /* 小屏幕移动端 */
            .baiye-layout-wrapper {
                display: flex;
                flex-direction: column;
                gap: 1.5rem;
            }
            
            .baiye-podium-section {
                display: flex;
                flex-direction: row;
                gap: 0.8rem;
                min-width: max-content;
            }
            
            .baiye-grid-section {
                display: grid !important;
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 0.8rem;
            }
        }
        
        /* 模态框通用样式 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 99999;
            backdrop-filter: blur(5px);
        }
        .modal-overlay.active {
            display: flex;
        }
        .modal-overlay .modal-content {
            background: #FFF8E7;
            border-radius: 16px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.35), 0 0 0 2px rgba(218,165,32,0.4), 0 0 40px rgba(218,165,32,0.12);
            padding: 0;
            margin: 1rem;
            width: 90%;
            max-width: 900px;
            max-height: 85vh;
            overflow-y: auto;
            opacity: 1 !important;
            transform: none !important;
            position: relative;
            border: none !important;
            text-align: left;
            animation: modalSlideIn 0.3s ease-out;
        }
        @keyframes modalSlideIn {
            from { opacity: 0 !important; transform: translateY(-20px) scale(0.97) !important; }
            to { opacity: 1 !important; transform: none !important; }
        }
        .modal-overlay .modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1rem 1.5rem;
            border-bottom: 2px solid rgba(184,134,11,0.2);
            background: linear-gradient(135deg, #B8860B 0%, #DAA520 40%, #E8B923 60%, #B8860B 100%);
            border-radius: 16px 16px 0 0;
            font-family: -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        .modal-overlay .modal-header h3 {
            margin: 0;
            font-size: 1.1rem;
            font-weight: 700;
            white-space: nowrap;
            letter-spacing: 1px;
            color: #3E2200;
            text-shadow: 0 1px 0 rgba(255,215,0,0.3) !important;
            font-family: 'Ma Shan Zheng', cursive, SimHei, STHeiti, sans-serif !important;
        }
        .modal-overlay .modal-close {
            position: relative;
            background: rgba(62,34,0,0.12);
            border: 1px solid rgba(62,34,0,0.15);
            cursor: pointer;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            flex-shrink: 0;
            overflow: hidden;
        }
        .modal-overlay .modal-close::before,
        .modal-overlay .modal-close::after {
            content: '';
            position: absolute;
            width: 14px;
            height: 2px;
            background: rgba(62,34,0,0.6);
            border-radius: 2px;
            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .modal-overlay .modal-close::before { transform: rotate(45deg); }
        .modal-overlay .modal-close::after { transform: rotate(-45deg); }
        .modal-overlay .modal-close:hover {
            background: rgba(220,50,50,0.15);
            border-color: rgba(220,50,50,0.3);
            transform: rotate(90deg) scale(1.1);
            box-shadow: 0 0 12px rgba(220,50,50,0.2);
        }
        .modal-overlay .modal-close:hover::before,
        .modal-overlay .modal-close:hover::after {
            background: #c0392b;
            width: 16px;
            height: 2.5px;
        }
        .modal-overlay .modal-close:active {
            transform: rotate(90deg) scale(0.95);
        }

        /* ========== 管理面板按钮样式 ========== */
        .btn {
            display: inline-block;
            padding: 0.6rem 1.2rem;
            font-size: 0.9rem;
            font-weight: 600;
            line-height: 1.4;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            cursor: pointer;
            border: 2px solid transparent;
            border-radius: 6px;
            transition: all 0.2s ease;
            user-select: none;
            color: #fff;
            background: #6c757d;
        }
        .btn:hover { opacity: 0.9; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
        .btn:active { transform: translateY(0); box-shadow: none; }
        .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

        .btn-primary {
            background: linear-gradient(135deg, #B8860B, #DAA520);
            color: #fff;
            border-color: #8B6914;
            text-shadow: 0 1px 2px rgba(0,0,0,0.2);
        }
        .btn-primary:hover {
            background: linear-gradient(135deg, #9B7209, #C49518);
            border-color: #7A5B0C;
        }

        .btn-success {
            background: linear-gradient(135deg, #2E7D32, #43A047);
            color: #fff;
            border-color: #1B5E20;
            text-shadow: 0 1px 2px rgba(0,0,0,0.2);
        }
        .btn-success:hover {
            background: linear-gradient(135deg, #1B5E20, #2E7D32);
            border-color: #145218;
        }

        .btn-danger {
            background: linear-gradient(135deg, #C62828, #E53935);
            color: #fff;
            border-color: #B71C1C;
            text-shadow: 0 1px 2px rgba(0,0,0,0.2);
        }
        .btn-danger:hover {
            background: linear-gradient(135deg, #B71C1C, #C62828);
            border-color: #8E1313;
        }

        .btn-warning {
            background: linear-gradient(135deg, #E65100, #F57C00);
            color: #fff;
            border-color: #BF360C;
            text-shadow: 0 1px 2px rgba(0,0,0,0.2);
        }
        .btn-warning:hover {
            background: linear-gradient(135deg, #BF360C, #E65100);
            border-color: #9E2A0B;
        }

        .btn-secondary {
            background: linear-gradient(135deg, #455A64, #607D8B);
            color: #fff;
            border-color: #37474F;
            text-shadow: 0 1px 2px rgba(0,0,0,0.2);
        }
        .btn-secondary:hover {
            background: linear-gradient(135deg, #37474F, #455A64);
        }

        .btn-sm {
            padding: 0.35rem 0.75rem;
            font-size: 0.8rem;
        }

        /* ========== 管理面板表单样式 ========== */
        #simple-management-modal input[type="text"],
        #simple-management-modal textarea,
        #simple-management-modal select {
            width: 100%;
            padding: 0.7rem 0.8rem;
            border: 2px solid #C9B97A;
            border-radius: 6px;
            font-size: 0.95rem;
            color: #3E2C00;
            background: #FFFDF5;
            transition: border-color 0.2s, box-shadow 0.2s;
            margin-bottom: 1rem;
        }
        #simple-management-modal textarea {
            min-height: 100px;
            resize: vertical;
        }
        #simple-management-modal input[type="text"]:focus,
        #simple-management-modal textarea:focus,
        #simple-management-modal select:focus {
            outline: none;
            border-color: #B8860B;
            box-shadow: 0 0 0 3px rgba(184,134,11,0.15);
        }
        #simple-management-modal input::placeholder,
        #simple-management-modal textarea::placeholder {
            color: #A08840;
            opacity: 1;
        }

        /* ========== 管理面板标题样式 ========== */
        #simple-management-modal h4 {
            font-family: 'Ma Shan Zheng', cursive, SimHei, STHeiti, sans-serif !important;
            font-size: 1.2rem !important;
            color: #4A3000 !important;
            font-weight: normal !important;
            text-shadow: none !important;
            margin: 0 0 0.8rem 0;
            padding-bottom: 0.4rem;
            border-bottom: 2px solid rgba(184,134,11,0.25);
        }

        /* ========== 管理面板成员列表样式 ========== */
        #simpleMembersList .member-row {
            display: flex;
            align-items: center;
            padding: 0.45rem 0.8rem;
            border-bottom: 1px solid rgba(184,134,11,0.15);
            transition: background 0.2s;
            gap: 0.6rem;
            flex-wrap: nowrap;
        }
        #simpleMembersList .member-row:hover {
            background: rgba(218,165,32,0.08);
        }
        #simpleMembersList .member-row:last-child { border-bottom: none; }
        #simpleMembersList .member-actions {
            display: flex;
            align-items: center;
            gap: 0.3rem;
            flex-shrink: 0;
            margin-left: auto;
        }
        #simpleMembersList .member-avatar {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #C9B97A;
            flex-shrink: 0;
            background: #F5F0DC;
        }
        #simpleMembersList .member-avatar-placeholder {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            border: 2px solid #C9B97A;
            flex-shrink: 0;
            background: linear-gradient(135deg, #F5F0DC, #E8E0C8);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.95rem;
            color: #8B6914;
        }
        #simpleMembersList .member-details {
            flex: 1;
            min-width: 0;
            overflow: hidden;
        }
        #simpleMembersList .member-name-line {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            flex-wrap: nowrap;
            overflow: hidden;
        }
        #simpleMembersList .member-name {
            font-size: 0.92rem !important;
            font-weight: 600 !important;
            color: #3E2C00 !important;
            font-family: 'Ma Shan Zheng', cursive, SimHei, sans-serif !important;
            text-shadow: none !important;
            white-space: nowrap;
            line-height: 1.3;
        }
        #simpleMembersList .member-name:hover {
            transform: none !important;
            text-shadow: none !important;
        }
        #simpleMembersList .member-title-badge {
            display: inline-block;
            padding: 0.1rem 0.45rem;
            border-radius: 10px;
            font-size: 0.72rem;
            background: linear-gradient(135deg, #FFF8E1, #FFF3CD);
            border: 1px solid #DAA520;
            color: #8B6914;
            white-space: nowrap;
            flex-shrink: 0;
        }
        #simpleMembersList .member-role-badge {
            display: inline-block;
            padding: 0.1rem 0.4rem;
            border-radius: 10px;
            font-size: 0.7rem;
            font-weight: 700;
            color: #fff;
            white-space: nowrap;
            flex-shrink: 0;
        }
        #simpleMembersList .member-role-badge.role-main-c {
            background: linear-gradient(135deg, #C62828, #E53935);
        }
        #simpleMembersList .member-role-badge.role-vice-c {
            background: linear-gradient(135deg, #E65100, #F57C00);
        }
        #simpleMembersList .member-role-badge.role-sub-c {
            background: linear-gradient(135deg, #B8860B, #DAA520);
        }
        #simpleMembersList .member-role-badge.role-normal {
            background: linear-gradient(135deg, #546E7A, #78909C);
            font-weight: 500;
        }
        #simpleMembersList .member-actions .btn-danger {
            width: auto !important;
            padding: 0.3rem 0.5rem;
            font-size: 0.75rem;
        }
        #simpleMembersList .member-role-select {
            flex-shrink: 0;
            padding: 0.25rem 0.3rem;
            border: 2px solid #C9B97A;
            border-radius: 6px;
            font-size: 0.75rem;
            font-weight: 600;
            color: #4A3000;
            background: #FFFDF5;
            cursor: pointer;
            transition: border-color 0.2s;
            max-width: 65px;
        }
        #simpleMembersList .member-role-select:focus {
            outline: none;
            border-color: #B8860B;
        }

        /* 管理面板内所有按钮取消全局100%宽度 */
        #simple-management-modal .btn {
            width: auto !important;
        }
        #simpleAddMemberForm .btn {
            width: auto !important;
        }

        /* ========== 管理面板公告提示框 ========== */
        .admin-tip-box {
            margin-bottom: 0.8rem;
            padding: 0.7rem 1rem;
            background: linear-gradient(135deg, #FFF8E1, #FFF3CD);
            border: 2px solid #DAA520;
            border-radius: 6px;
            font-size: 0.88rem;
            color: #5C3A00;
            line-height: 1.6;
        }
        .admin-tip-box strong {
            color: #8B6914;
        }

        /* ========== 新增成员表单样式 ========== */
        #simpleAddMemberForm {
            background: linear-gradient(135deg, #FFFDF5, #FFF8E1) !important;
            border: 2px solid #DAA520 !important;
            padding: 1.2rem !important;
            border-radius: 8px !important;
            margin-bottom: 1rem;
        }
        #simpleAddMemberForm h5 {
            font-family: 'Ma Shan Zheng', cursive, SimHei, STHeiti, sans-serif !important;
            font-size: 1.1rem !important;
            color: #4A3000 !important;
            text-shadow: none !important;
            margin: 0 0 0.8rem 0;
        }
        #simpleAddMemberForm input[type="text"] {
            width: 100%;
            padding: 0.6rem 0.8rem;
            border: 2px solid #C9B97A;
            border-radius: 6px;
            font-size: 0.95rem;
            color: #3E2C00;
            background: #FFFDF5;
            margin-bottom: 0.6rem;
            transition: border-color 0.2s, box-shadow 0.2s;
        }
        #simpleAddMemberForm input[type="text"]:focus {
            outline: none;
            border-color: #B8860B;
            box-shadow: 0 0 0 3px rgba(184,134,11,0.15);
        }
        #simpleAddMemberForm input[type="text"]::placeholder {
            color: #A08840;
            opacity: 1;
        }

        /* ========== 期数选择器样式 ========== */
        .period-selector {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            padding: 1rem 1.2rem;
            background: linear-gradient(135deg, #FFF8E1, #FFF3CD);
            border: 2px solid #DAA520;
            border-radius: 8px;
            margin-bottom: 1.5rem;
        }
        .period-selector label {
            font-family: 'Ma Shan Zheng', cursive, SimHei, STHeiti, sans-serif;
            font-size: 1.05rem;
            color: #4A3000;
            white-space: nowrap;
            text-shadow: none;
        }
        .period-selector select {
            flex: 1;
            padding: 0.55rem 0.8rem;
            border: 2px solid #C9B97A;
            border-radius: 6px;
            font-size: 0.95rem;
            color: #3E2C00;
            background: #FFFDF5;
            cursor: pointer;
            transition: border-color 0.2s, box-shadow 0.2s;
        }
        .period-selector select:focus {
            outline: none;
            border-color: #B8860B;
            box-shadow: 0 0 0 3px rgba(184,134,11,0.15);
        }
        .period-selector .period-badge {
            display: inline-flex;
            align-items: center;
            padding: 0.25rem 0.6rem;
            border-radius: 12px;
            font-size: 0.78rem;
            font-weight: 600;
            white-space: nowrap;
        }
        .period-badge.current {
            background: linear-gradient(135deg, #2E7D32, #43A047);
            color: #fff;
        }
        .period-badge.special {
            background: linear-gradient(135deg, #B8860B, #DAA520);
            color: #fff;
        }
        .period-info-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.5rem 0;
            margin-bottom: 1rem;
            border-bottom: 2px solid rgba(184,134,11,0.2);
        }
        .period-info-bar .period-title-display {
            font-family: 'Ma Shan Zheng', cursive, SimHei, STHeiti, sans-serif;
            font-size: 1.1rem;
            color: #5C3A00;
            text-shadow: none;
        }
        .period-info-bar .period-member-count {
            font-size: 0.85rem;
            color: #7A6830;
        }

        /* 时间轴列表样式 */
        .timeline-list {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .timeline-item {
            display: flex;
            align-items: center;
            padding: 0.9rem 1.5rem;
            border-bottom: 1px solid rgba(218,165,32,0.12);
            cursor: pointer;
            transition: all 0.25s ease;
        }
        .timeline-item:last-child { border-bottom: none; }
        .timeline-item:hover {
            background: linear-gradient(90deg, rgba(218,165,32,0.08), rgba(255,215,0,0.12), rgba(218,165,32,0.08));
            padding-left: 1.8rem;
        }
        .timeline-item .tl-number {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: linear-gradient(135deg, #8B6914, #B8860B);
            color: #FFF8DC;
            font-weight: 500;
            font-size: 0.8rem;
            flex-shrink: 0;
            margin-right: 1rem;
            font-family: -apple-system, sans-serif;
            box-shadow: 0 2px 6px rgba(139,105,20,0.3);
            text-shadow: 0 1px 1px rgba(0,0,0,0.2);
        }
        .timeline-item .tl-info { flex: 1; min-width: 0; }
        .timeline-item .tl-title {
            font-family: 'Ma Shan Zheng', cursive, SimHei, STHeiti, sans-serif !important;
            font-size: 1.15rem !important;
            color: #5C3A00 !important;
            font-weight: normal !important;
            text-shadow: none !important;
            margin: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            letter-spacing: 0.5px;
        }
        .timeline-item .tl-badge {
            display: inline-block;
            padding: 0.15rem 0.6rem;
            border-radius: 12px;
            font-size: 0.7rem;
            font-weight: 600;
            margin-top: 0.35rem;
            font-family: -apple-system, sans-serif;
            letter-spacing: 0.5px;
        }
        .timeline-item .tl-badge.challenger {
            background: linear-gradient(135deg, #FFD700, #FFA500);
            color: #4A2800;
            box-shadow: 0 1px 4px rgba(255,165,0,0.3);
        }
        .timeline-item .tl-badge.grandmaster {
            background: linear-gradient(135deg, #DAA520, #B8860B);
            color: #FFF8DC;
            box-shadow: 0 1px 4px rgba(184,134,11,0.3);
        }
        .timeline-item .tl-badge.master {
            background: linear-gradient(135deg, #E8C860, #D4A017);
            color: #3E2200;
            box-shadow: 0 1px 4px rgba(212,160,23,0.3);
        }
        .timeline-item .tl-badge.diamond {
            background: linear-gradient(135deg, #F0D860, #DAA520);
            color: #4A3000;
            box-shadow: 0 1px 4px rgba(218,165,32,0.3);
        }
        .timeline-item .tl-badge.normal {
            background: rgba(218,165,32,0.15);
            color: #8B6914;
            border: 1px solid rgba(218,165,32,0.3);
        }
        /* 登录模态框专用样式 */
        .lock-overlay {
            padding: 1rem 0 0.5rem;
            animation: lockFadeIn 0.4s ease;
        }
        @keyframes lockFadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .lock-overlay .lock-icon-big {
            font-size: 3.5rem;
            margin-bottom: 0.8rem;
            display: block;
            animation: lockShake 0.5s ease;
        }
        @keyframes lockShake {
            0%,100% { transform: translateX(0); }
            20%,60% { transform: translateX(-8px); }
            40%,80% { transform: translateX(8px); }
        }
        .lock-overlay .lock-msg {
            color: #c0392b !important;
            font-family: 'Ma Shan Zheng', cursive, SimHei, STHeiti, sans-serif !important;
            font-size: 1.3rem !important;
            font-weight: bold !important;
            text-shadow: none !important;
            margin-bottom: 0.6rem;
        }
        .lock-overlay .lock-countdown {
            color: #e67e22 !important;
            font-family: 'Ma Shan Zheng', cursive, SimHei, STHeiti, sans-serif !important;
            font-size: 2rem !important;
            font-weight: bold !important;
            text-shadow: none !important;
            letter-spacing: 3px;
            margin-bottom: 0.6rem;
        }
        .lock-overlay .lock-hint {
            color: #DAA520 !important;
            font-family: 'Ma Shan Zheng', cursive, SimHei, STHeiti, sans-serif !important;
            font-size: 0.95rem !important;
            text-shadow: none !important;
        }
        .login-modal-body {
            padding: 2rem 2rem 1.8rem;
            text-align: center;
        }
        .login-modal-body .lock-icon {
            font-size: 2.5rem;
            margin-bottom: 0.8rem;
            display: block;
        }
        .login-modal-body .login-title {
            font-size: 0.95rem;
            color: #6B4C1E;
            margin-bottom: 1.5rem;
            font-family: -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
            letter-spacing: 0.5px;
            text-shadow: none !important;
            font-weight: normal !important;
            line-height: 1.6;
        }
        .login-modal-body .login-input {
            width: 100%;
            padding: 0.85rem 1rem;
            padding-right: 40px;
            border: 2px solid #DAA520;
            border-radius: 10px;
            font-size: 1rem;
            outline: none;
            transition: border-color 0.2s, box-shadow 0.2s;
            box-sizing: border-box;
            font-family: -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background: #fff;
            color: #3E2200;
        }
        .pwd-eye-wrapper {
            position: relative;
            width: 100%;
        }
        .pwd-eye-toggle {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            color: #B8A080;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            transition: all 0.2s;
            user-select: none;
        }
        .pwd-eye-toggle:hover {
            color: #9E2A2B;
            background: rgba(158,42,43,0.08);
        }
        .pwd-eye-toggle.active {
            color: #9E2A2B;
        }
        .pwd-eye-toggle svg {
            pointer-events: none;
        }
        .login-modal-body .login-input::placeholder {
            color: #C9A84C;
        }
        .login-modal-body .login-input:focus {
            border-color: #B8860B;
            box-shadow: 0 0 0 3px rgba(218,165,32,0.2);
        }
        .login-modal-body .login-error {
            color: #C0392B;
            font-size: 0.85rem;
            margin-top: 0.5rem;
            display: none;
        }
        .login-modal-body .login-btn {
            width: 100%;
            padding: 0.85rem;
            margin-top: 1.2rem;
            background: linear-gradient(135deg, #DAA520 0%, #F0C040 40%, #FFD700 60%, #DAA520 100%);
            color: #3E2200;
            border: 2px solid #B8860B;
            border-radius: 10px;
            font-size: 1rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.25s;
            font-family: -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
            letter-spacing: 2px;
            text-shadow: 0 1px 0 rgba(255,215,0,0.3);
        }
        .login-modal-body .login-btn:hover {
            background: linear-gradient(135deg, #E8B923 0%, #FFD700 40%, #FFE44D 60%, #E8B923 100%);
            border-color: #8B6914;
            box-shadow: 0 4px 20px rgba(218,165,32,0.4), 0 0 15px rgba(255,215,0,0.15);
            transform: translateY(-1px);
        }
        .login-modal-body .login-btn:active {
            transform: translateY(0);
        }