html, body {
            margin: 0;
            padding: 0;
            background: #000;
            color: #fff;
            font-family: "Microsoft YaHei", sans-serif;
            overflow: hidden;
            touch-action: manipulation;
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
            -webkit-tap-highlight-color: transparent;
        }

        /* 移动端顶部广告 - 默认隐藏 */
        #mobile-top-ad {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            max-width: 100vw;
            z-index: 1001;
            background: #000;
            overflow: hidden;
            touch-action: none;
            -webkit-touch-callout: none;
            pointer-events: auto;
            cursor: pointer;
        }

        #mobile-top-ad img {
            width: 100%;
            max-width: 100%;
            height: auto;
            max-height: 75px;
            display: block;
            object-fit: cover;
            object-position: center;
            pointer-events: none;
            user-select: none;
            -webkit-user-select: none;
        }

        /* PC端广告 - 默认隐藏，在实时动态下方 */
        #pc-ad {
            display: none;
            width: 100%;
            margin-top: 8px;
            background: #000;
            border-radius: 8px;
            text-align: center;
            line-height: 0;
            touch-action: none;
            -webkit-touch-callout: none;
            cursor: pointer;
        }

        #pc-ad img {
            width: 100%;
            height: auto;
            max-height: 150px;
            display: block;
            border-radius: 8px;
            pointer-events: none;
            user-select: none;
            -webkit-user-select: none;
        }

        /* 地球容器 - 向上偏移60px */
        #globeViz {
            position: absolute;
            top: -60px;
            left: 0;
            width: 100%;
            height: 100%;
        }
        
        /* 标题区域 */
        #header {
            position: absolute; top: 20px; width: 100%; text-align: center; z-index: 10;
            pointer-events: none; /* 让鼠标事件穿透到地球 */
        }
        h1 { margin: 0; font-size: 3.75rem; text-shadow: 0 0 10px #ffcc00; color: #ffcc00; letter-spacing: 2px; transition: opacity 0.5s ease; }
        .subtitle { font-size: 1.5rem; color: #ccc; margin-top: 8px; }

        /* 欢迎提示 */
        #welcome-toast {
            position: absolute; top: 180px; left: 50%; transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.85); border: 2px solid #ffcc00;
            padding: 15px 25px; border-radius: 20px; color: #ffcc00;
            opacity: 0; transition: opacity 1s; z-index: 10;
            text-align: center; line-height: 1.4;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
            font-weight: bold;
        }

        /* 灯泡点亮动画 */
        #light-bulb-animation {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 100;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            pointer-events: none;
        }

        .light-bulb {
            font-size: 30vh;
            line-height: 1;
            animation: bulbPulse 2s ease-in-out infinite, bulbGlow 2s ease-in-out infinite;
            filter: drop-shadow(0 0 30px rgba(255, 204, 0, 0.8));
        }

        @keyframes bulbPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }

        @keyframes bulbGlow {
            0%, 100% { 
                filter: drop-shadow(0 0 30px rgba(255, 204, 0, 0.8)) drop-shadow(0 0 60px rgba(255, 204, 0, 0.4));
            }
            50% { 
                filter: drop-shadow(0 0 50px rgba(255, 204, 0, 1)) drop-shadow(0 0 100px rgba(255, 204, 0, 0.6));
            }
        }

        .light-success-text {
            font-size: 1.8rem;
            color: #ffcc00;
            font-weight: bold;
            margin-top: 20px;
            text-shadow: 0 0 20px rgba(255, 204, 0, 0.5);
            animation: textFadeIn 1s ease-out;
        }

        .light-success-text span {
            color: #fff;
            font-size: 2.2rem;
            display: block;
            margin-top: 10px;
        }

        .light-welcome-text {
            font-size: 1.2rem;
            color: #ccc;
            margin-top: 15px;
            max-width: 80vw;
            line-height: 1.6;
            animation: textFadeIn 1s ease-out 0.5s both;
        }

        @keyframes textFadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* 移动端灯泡动画适配 */
        @media (max-width: 768px) {
            .light-bulb {
                font-size: 25vh;
            }
            .light-success-text {
                font-size: 1.4rem;
            }
            .light-success-text span {
                font-size: 1.8rem;
            }
            .light-welcome-text {
                font-size: 1rem;
                max-width: 90vw;
            }
        }

        /* 统计数字样式 */
        .stat-number {
            color: #fff;
            font-weight: bold;
            display: inline-block;
            position: relative;
            transition: all 0.3s ease;
            min-width: 20px;
            text-align: center;
        }
        
        /* 数字 +1 动画 */
        @keyframes numberPulse {
            0% { transform: scale(1); color: #fff; }
            30% { transform: scale(1.5); color: #ffcc00; text-shadow: 0 0 20px #ffcc00; }
            60% { transform: scale(1.3); color: #ffcc00; }
            100% { transform: scale(1); color: #fff; }
        }
        
        .stat-number.updating {
            animation: numberPulse 0.6s ease-out;
        }
        
        /* +1 浮动动画 */
        @keyframes floatUp {
            0% { 
                opacity: 1; 
                transform: translateY(0) scale(1); 
            }
            50% {
                opacity: 1;
                transform: translateY(-20px) scale(1.2);
            }
            100% { 
                opacity: 0; 
                transform: translateY(-40px) scale(0.8); 
            }
        }
        
        .plus-one {
            position: absolute;
            top: -25px;
            left: 50%;
            transform: translateX(-50%);
            color: #ffcc00;
            font-weight: bold;
            font-size: 0.9em;
            pointer-events: none;
            animation: floatUp 1s ease-out forwards;
            text-shadow: 0 0 10px rgba(255, 204, 0, 0.8);
            white-space: nowrap;
            z-index: 100;
        }

        /* 底部统计面板 - 响应式处理 */
        #stats-panel {
            position: absolute; bottom: 0; left: 0; width: 100%;
            background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
            padding: 20px; box-sizing: border-box; display: flex;
            justify-content: space-between; align-items: flex-end; z-index: 10;
            pointer-events: none;
        }
        .stats-content { 
            pointer-events: auto; 
            min-width: 300px; /* 设置最小宽度 */
            flex: 1; /* 允许弹性伸缩 */
            margin: 0 10px; /* 添加左右间距 */
            height: 260px; /* 统一容器高度 */
            display: flex;
            flex-direction: column;
        }
        
        /* 限制单个组件的最大宽度以确保正确显示 */
        @media (min-width: 769px) {
            .stats-content,
            .blessings-barrage-container,
            .live-updates-container {
                max-width: 600px; /* 增加PC端最大宽度 */
                height: 260px; /* 统一容器高度 */
                display: flex;
                flex-direction: column;
            }

            /* PC端显示广告 */
            #pc-ad {
                display: block;
            }

            /* PC端实时动态内容区域高度统一 */
            .live-updates-container .live-comments-container {
                height: 220px;
                flex: 1;
            }
        }

        /* PC端宽屏优化 */
        @media (min-width: 1200px) {
            .stats-content,
            .blessings-barrage-container,
            .live-updates-container {
                max-width: 800px; /* 在大屏幕上进一步增加宽度 */
                height: 260px; /* 统一容器高度 */
            }

            .live-comments-container {
                max-width: 100%; /* 允许更大宽度 */
                height: 220px; /* 统一高度 */
            }

            /* 大屏幕也显示广告 */
            #pc-ad {
                display: block;
            }

            /* 大屏幕实时动态内容区域高度统一 */
            .live-updates-container .live-comments-container {
                height: 220px;
            }
        }

        /* 统一实时动态与排行榜内容高度（PC端） */
        .stats-panel-body {
            height: 220px; /* PC端统一高度 */
            box-sizing: border-box;
            width: 100%;
            max-width: 100%;
            scrollbar-gutter: stable both-edges;
            flex: 1;
        }

        /* 排行榜内容区域样式 - 与实时动态容器样式一致 */
        .leaderboard-content {
            font-size: 0.9rem; text-align: left;
            pointer-events: auto; background: rgba(0,0,0,0.5); padding: 10px; border-radius: 8px;
            width: 100%; /* 在flex容器中适应空间 */
            height: 220px; /* 统一高度 */
            overflow-y: auto; /* 内容区域可滚动 */
            padding-right: 10px; /* 与实时动态一致 */
            box-sizing: border-box;
        }
        
        /* 排行榜滚动条样式 - 与实时动态样式一致 */
        .leaderboard-content::-webkit-scrollbar {
            width: 8px !important;
            background: rgba(0,0,0,0.3) !important; /* 确保滚动条轨道背景 */
        }
        
        .leaderboard-content::-webkit-scrollbar-track {
            background: rgba(0,0,0,0.3) !important; /* 深色背景 */
            border-radius: 4px !important;
            box-shadow: inset 0 0 4px rgba(0,0,0,0.3) !important; /* 添加内阴影 */
        }
        
        .leaderboard-content::-webkit-scrollbar-thumb {
            background: linear-gradient(to bottom, #ffcc00, #ffaa00) !important; /* 渐变背景 */
            border-radius: 4px !important;
            border: 1px solid rgba(255, 255, 255, 0.3) !important; /* 添加边框 */
            min-height: 20px !important; /* 确保最小高度 */
        }
        
        .leaderboard-content::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(to bottom, #ffdd33, #ffbb33) !important; /* 悬停时的渐变背景 */
        }
        
        .leaderboard-content::-webkit-scrollbar-corner {
            background: rgba(0,0,0,0.5) !important;
        }

        /* 滚动条上下按钮样式 - 与实时动态一致 */
        .leaderboard-content::-webkit-scrollbar-button {
            width: 8px !important;
            height: 12px !important;
            background: linear-gradient(to bottom, #ffcc00, #ffaa00) !important;
            border-radius: 4px !important;
            display: block !important;
            border: 1px solid rgba(255, 255, 255, 0.3) !important;
        }
        
        /* 确保排行榜滚动条在各种浏览器中的一致性 */
        .leaderboard-content {
            -ms-overflow-style: scrollbar; /* Internet Explorer 10+ */
            scrollbar-width: thin; /* Firefox */
            scrollbar-color: #ffcc00 rgba(0,0,0,0.3); /* Firefox 滚动条颜色 */
        }
        
        /* 加载动画 */
        #loading {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: #000; display: flex; flex-direction: column;
            justify-content: center; align-items: center; z-index: 1000;
            transition: opacity 0.5s ease-out;
        }
        .loading-spinner {
            width: 60px; height: 60px; border: 3px solid rgba(255, 204, 0, 0.3);
            border-top-color: #ffcc00; border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        .loading-text {
            margin-top: 20px; color: #ffcc00; font-size: 1.2rem;
            animation: pulse 1.5s ease-in-out infinite;
        }
        .loading-hint {
            margin-top: 15px; color: #aaa; font-size: 0.9rem;
            animation: pulse 1.5s ease-in-out infinite;
            text-align: center;
            padding: 0 20px;
            max-width: 300px;
        }
        /* PC端显示PC提示，隐藏移动端提示 */
        .loading-hint-pc {
            display: block;
            white-space: nowrap;
            max-width: none;
        }
        .loading-hint-mobile {
            display: none;
        }
        /* 移动端适配 */
        @media (max-width: 768px) {
            .loading-hint-pc {
                display: none;
            }
            .loading-hint-mobile {
                display: block;
            }
        }
        @keyframes pulse {
            0%, 100% { opacity: 0.6; }
            50% { opacity: 1; }
        }
        
        /* 手机端适配 */
        @media (max-width: 768px) {
            /* 防止页面横向溢出 */
            html, body {
                max-width: 100vw;
                overflow-x: hidden;
            }
            
            /* 移动端显示顶部广告 */
            #mobile-top-ad {
                display: block;
                width: 100%;
                max-width: 100vw;
            }

            /* 调整标题位置，为广告留出空间 */
            #header {
                top: 75px;
            }

            /* 移动端地球容器调整 - 确保缩放后无黑边 */
            #globeViz {
                top: -30px;
                width: 100vw;
                height: 100vh;
                transform: scale(1.15);
                transform-origin: center center;
            }

            h1 { font-size: 1.5rem; }
            .subtitle { font-size: 0.85rem; margin-top: 5px; }
            /* 移动端+1动画调整 */
            .plus-one {
                font-size: 0.7em;
                top: -20px;
            }
            #welcome-toast {
                font-size: 0.9rem;
                width: 80%;
                max-width: 80%;
                left: 50%;
                transform: translateX(-50%);
                box-sizing: border-box;
                top: 155px;
            }
            
            #stats-panel { 
                flex-direction: column; 
                align-items: center; 
                width: 100%;
                padding: 10px; /* 减少移动端的内边距 */
                box-sizing: border-box; /* 确保padding不会增加总宽度 */
            }
            
            .stats-content { 
                width: 100%; /* 在移动端使用统一宽度 */
                max-width: 100%; /* 确保不超过父容器 */
                margin: 5px 0; /* 调整上下间距 */
                flex: none; /* 不使用弹性伸缩，避免撑破 */
                box-sizing: border-box; /* 确保padding不会增加总宽度 */
            }
            
            /* 确保排行榜在移动端与实时动态对齐 */

            
            .stats-panel-body {
                height: 120px; /* 移动端固定高度 */
                box-sizing: border-box;
            }

            
            .live-comments-container {
                max-width: 100%;
                width: 100%; /* 确保宽度占满容器 */
                height: 120px;
                max-height: 120px; /* 限制最大高度 */
                min-height: 60px; /* 确保最小高度 */
                overflow-y: auto; /* 允许纵向滚动 */
                overflow-x: hidden; /* 隐藏横向滚动 */
                -webkit-overflow-scrolling: touch; /* iOS平滑滚动 */
                background: rgba(0,0,0,0.5); /* 与PC端样式一致 */
                border-radius: 8px; /* 与PC端样式一致 */
                padding: 10px; /* 与PC端样式一致 */
                line-height: 1.3; /* 优化行高 */
                box-sizing: border-box; /* 确保padding不影响整体尺寸 */
                /* 完全隐藏滚动条 */
                scrollbar-width: none !important; /* Firefox */
                -ms-overflow-style: none !important; /* IE 10+ */
            }
            
            /* 针对iOS Safari的特殊处理 */
            .live-comments-container * {
                -webkit-overflow-scrolling: touch;
            }
            
            /* 强制隐藏横向滚动条 */
            .live-comments-container::-webkit-scrollbar:horizontal {
                display: none !important;
                height: 0 !important;
                width: 0 !important;
                background: transparent !important;
                opacity: 0 !important;
            }
            
            /* 移动端实时动态滚动条 - 完全隐藏滚动条 */
            .live-comments-container::-webkit-scrollbar,
            .live-comments-container::-webkit-scrollbar-track,
            .live-comments-container::-webkit-scrollbar-thumb,
            .live-comments-container::-webkit-scrollbar-button,
            .live-comments-container::-webkit-scrollbar-corner,
            .live-comments-container::-webkit-resizer {
                width: 0 !important;
                height: 0 !important;
                background: transparent !important;
                display: none !important;
                opacity: 0 !important;
                visibility: hidden !important;
            }
            
            /* 确保内容不导致横向滚动 */
            .live-comments-container .live-comments-list {
                overflow-x: hidden !important;
                width: 100% !important;
            }
            
            .leaderboard-content {
                max-width: 100%;
                width: 100%; /* 确保宽度占满容器 */
                height: 120px;
                max-height: 120px; /* 限制最大高度 */
                min-height: 60px; /* 确保最小高度 */
                overflow-y: scroll; /* 确保有滚动条 */
                -webkit-overflow-scrolling: touch; /* iOS平滑滚动 */
                background: rgba(0,0,0,0.5); /* 与PC端样式一致 */
                border-radius: 8px; /* 与PC端样式一致 */
                padding: 10px !important; /* 强制覆盖PC端的padding-right: 8px */
                line-height: 1.3; /* 优化行高 */
                box-sizing: border-box; /* 确保padding不影响整体尺寸 */
                padding-right: 10px !important; /* 确保右边距与其他区域一致 */
                /* 强制显示滚动条 */
                scrollbar-width: thin;
                scrollbar-color: #ffcc00 rgba(0,0,0,0.3);
            }
            
            /* 移动端排行榜滚动条 */
            .leaderboard-content::-webkit-scrollbar {
                width: 6px !important;
                background: rgba(0,0,0,0.3) !important;
                display: block !important;
            }
            
            .leaderboard-content::-webkit-scrollbar-track {
                background: rgba(0,0,0,0.3) !important;
                border-radius: 3px !important;
            }
            
            .leaderboard-content::-webkit-scrollbar-thumb {
                background: linear-gradient(to bottom, #ffcc00, #ffaa00) !important;
                border-radius: 3px !important;
                min-height: 20px !important;
            }
            
            .comment-item {
                font-size: 0.75rem;
                white-space: nowrap; /* 保持不换行 */
                overflow: hidden; /* 隐藏溢出内容 */
                text-overflow: ellipsis; /* 文字溢出显示省略号 */
                max-width: 100%; /* 确保不超过容器宽度 */
            }
        }
        
        /* 底部版权信息 */
        #footer {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            text-align: center;
            padding: 5px 0;
            background: rgba(0, 0, 0, 0.7);
            color: #aaa;
            font-size: 0.8rem;
            z-index: 20;
            pointer-events: auto;
        }
        
        #footer p {
            margin: 0;
            padding: 0;
            font-size: 0.7rem;
        }
        
        /* 音乐播放按钮样式 */
        .music-control {
            position: fixed;
            right: 20px;
            top: calc(50% - 35px);
            transform: translateY(-50%);
            z-index: 100;
        }
        
        .music-btn {
            background: rgba(0, 0, 0, 0.7);
            border: 2px solid #ffcc00;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            box-shadow: 0 0 15px rgba(255, 204, 0, 0.3);
            backdrop-filter: blur(5px);
        }

        .music-btn:hover {
            background: rgba(255, 204, 0, 0.2);
            box-shadow: 0 0 25px rgba(255, 204, 0, 0.6);
            transform: scale(1.1);
        }
        
        /* 清屏按钮样式 - PC端 */
        .clear-screen-btn {
            background: rgba(0, 0, 0, 0.7);
            border: 2px solid #00c9ff;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            box-shadow: 0 0 15px rgba(0, 201, 255, 0.3);
            backdrop-filter: blur(5px);
            margin-top: 10px;
        }
        
        .clear-screen-btn:hover {
            background: rgba(0, 201, 255, 0.2);
            box-shadow: 0 0 25px rgba(0, 201, 255, 0.6);
            transform: scale(1.1);
        }
        
        .clear-screen-icon {
            font-size: 20px;
            margin-bottom: 1px;
        }
        
        .clear-screen-text {
            font-size: 10px;
            color: #00c9ff;
            font-weight: bold;
        }
        
        /* 全屏按钮样式 - PC端 */
        .fullscreen-btn {
            background: rgba(0, 0, 0, 0.7);
            border: 2px solid #ffcc00;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            box-shadow: 0 0 15px rgba(255, 204, 0, 0.3);
            backdrop-filter: blur(5px);
            margin-top: 10px;
        }
        
        .fullscreen-btn:hover {
            background: rgba(255, 204, 0, 0.2);
            box-shadow: 0 0 25px rgba(255, 204, 0, 0.6);
            transform: scale(1.1);
        }
        
        .fullscreen-icon {
            font-size: 20px;
            margin-bottom: 1px;
            color: #ffcc00;
            text-shadow: 0 0 5px rgba(255, 204, 0, 0.8);
        }
        
        .fullscreen-text {
            font-size: 10px;
            color: #ffcc00;
            font-weight: bold;
            text-shadow: 0 0 5px rgba(255, 204, 0, 0.8);
        }
        
        /* 放大缩小按钮样式 - PC端 */
        .zoom-btn {
            background: rgba(0, 0, 0, 0.7);
            border: 2px solid #00ff88;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            box-shadow: 0 0 15px rgba(0, 255, 136, 0.3);
            backdrop-filter: blur(5px);
            margin-top: 10px;
        }
        
        .zoom-btn:hover {
            background: rgba(0, 255, 136, 0.2);
            box-shadow: 0 0 25px rgba(0, 255, 136, 0.6);
            transform: scale(1.1);
        }
        
        .zoom-icon {
            font-size: 28px;
            color: #00ff88;
            font-weight: bold;
            text-shadow: 0 0 5px rgba(0, 255, 136, 0.8);
        }
        
        /* 清屏模式样式 */
        .clear-screen-mode {
            cursor: pointer;
        }

        .clear-screen-mode .stats-panel,
        .clear-screen-mode .music-control,
        .clear-screen-mode .header,
        .clear-screen-mode .loading-overlay,
        .clear-screen-mode .subtitle-container,
        .clear-screen-mode .wap-danmaku-container,
        .clear-screen-mode #mobile-top-ad,
        .clear-screen-mode .live-updates-container {
            opacity: 0 !important;
            pointer-events: none !important;
            transition: opacity 0.5s ease;
        }
        
        .clear-screen-mode .exit-clear-screen {
            position: fixed;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.7);
            color: #00c9ff;
            padding: 12px 24px;
            border-radius: 20px;
            border: 1px solid #00c9ff;
            font-size: 14px;
            z-index: 9999;
            opacity: 0;
            transition: opacity 0.5s ease;
            pointer-events: none;
            text-align: center;
            line-height: 1.6;
            white-space: pre-line;
        }
        
        .clear-screen-mode.show-hint .exit-clear-screen {
            opacity: 1;
        }
        
        /* 邀请点亮按钮样式 */
        .invite-btn {
            background: rgba(0, 0, 0, 0.7);
            border: 2px solid #ffcc00;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            box-shadow: 0 0 15px rgba(255, 204, 0, 0.3);
            backdrop-filter: blur(5px);
            margin-bottom: 10px;
        }

        .invite-btn:hover {
            background: rgba(255, 204, 0, 0.2);
            box-shadow: 0 0 25px rgba(255, 204, 0, 0.6);
            transform: scale(1.1);
        }

        .invite-icon {
            font-size: 20px;
            margin-bottom: 1px;
        }

        .invite-text {
            font-size: 10px;
            color: #ffcc00;
            font-weight: bold;
        }

        /* 祝福/感悟按钮样式 */
        .blessing-btn {
            background: rgba(0, 0, 0, 0.7);
            border: 2px solid #ffcc00;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            padding-top: 6px;
            cursor: pointer;
            margin-bottom: 10px;
            transition: all 0.3s ease;
        }
        
        .blessing-btn:hover {
            background: rgba(255, 204, 0, 0.2);
            box-shadow: 0 0 25px rgba(255, 204, 0, 0.6);
            transform: scale(1.1);
        }
        
        .blessing-icon {
            font-size: 22px;
            margin-bottom: 1px;
            line-height: 1;
        }

        .blessing-text {
            font-size: 10px;
            color: #ffcc00;
            font-weight: bold;
            line-height: 1.2;
        }
        
        /* 祝福弹出层样式 */
        .blessing-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }
        
        .blessing-modal.active {
            display: flex;
        }
        
        .blessing-modal-content {
            background: linear-gradient(135deg, rgba(0,0,0,0.95), rgba(20,20,20,0.95));
            border: 2px solid #ffcc00;
            border-radius: 15px;
            max-width: 400px;
            width: 90%;
            padding: 25px;
            box-shadow: 0 0 30px rgba(255, 204, 0, 0.3);
        }
        
        .blessing-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .blessing-close-btn {
            background: none;
            border: none;
            color: #ffcc00;
            font-size: 20px;
            cursor: pointer;
            padding: 0;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .blessing-close-btn:hover {
            color: #fff;
        }
        
        .blessing-textarea {
            width: 100%;
            min-height: 100px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid #ffcc00;
            border-radius: 8px;
            padding: 10px;
            color: #fff;
            font-size: 14px;
            resize: vertical;
            box-sizing: border-box;
            margin-bottom: 5px;
        }
        
        .blessing-textarea::placeholder {
            color: #888;
        }
        
        .blessing-textarea:focus {
            outline: none;
            border-color: #ffdd33;
            box-shadow: 0 0 10px rgba(255, 204, 0, 0.3);
        }
        
        .blessing-char-count {
            text-align: right;
            color: #888;
            font-size: 12px;
            margin-bottom: 15px;
        }
        
        .blessing-input {
            width: 100%;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid #ffcc00;
            border-radius: 8px;
            padding: 10px;
            color: #fff;
            font-size: 14px;
            box-sizing: border-box;
            margin-bottom: 15px;
        }
        
        .blessing-input::placeholder {
            color: #888;
        }
        
        .blessing-input:focus {
            outline: none;
            border-color: #ffdd33;
            box-shadow: 0 0 10px rgba(255, 204, 0, 0.3);
        }
        
        .blessing-submit-btn {
            width: 100%;
            background: linear-gradient(135deg, #ffcc00, #ffaa00);
            border: none;
            border-radius: 25px;
            padding: 12px;
            color: #000;
            font-weight: bold;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .blessing-submit-btn:hover {
            background: linear-gradient(135deg, #ffdd33, #ffbb33);
            box-shadow: 0 0 20px rgba(255, 204, 0, 0.5);
        }
        
        .blessing-submit-btn:disabled {
            background: #666;
            cursor: not-allowed;
        }

        .blessing-view-all-btn {
            width: 100%;
            background: linear-gradient(135deg, #00c9ff, #92fe9d);
            border: none;
            border-radius: 25px;
            padding: 12px;
            color: #000;
            font-weight: bold;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 10px;
        }

        .blessing-view-all-btn:hover {
            background: linear-gradient(135deg, #00d9ff, #a2ffad);
            box-shadow: 0 0 20px rgba(0, 201, 255, 0.5);
        }

        /* 感悟弹幕容器 - PC端与实时动态同高 */
        .blessings-barrage-container {
            pointer-events: auto;
            min-width: 300px;
            flex: 1;
            margin: 0 10px;
            display: flex;
            flex-direction: column;
        }
        
        .blessings-barrage-wrapper {
            height: 220px; /* PC端统一高度 */
            overflow-y: auto; /* 改为可滚动 */
            background: rgba(0, 0, 0, 0.5);
            border-radius: 8px;
            padding: 10px;
            position: relative;
            box-sizing: border-box;
        }

        .blessings-barrage {
            display: flex;
            flex-direction: column;
            /* 移除动画 */
        }

        .barrage-item {
            padding: 6px 8px;
            font-size: 0.75rem;
            line-height: 1.4;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: flex;
            align-items: center;
            min-height: 24px;
            box-sizing: border-box;
            cursor: pointer;
            transition: background 0.2s;
            background: rgba(255, 204, 0, 0.15);
            border-left: 2px solid #ffcc00;
            border-radius: 2px;
            margin-bottom: 4px;
            position: relative;
        }

        .barrage-item:hover {
            background: rgba(255, 204, 0, 0.35) !important;
            transform: translateX(3px);
            box-shadow: 0 2px 8px rgba(255, 204, 0, 0.3);
        }

        /* 奇数行背景色 */
        .blessings-barrage .barrage-item:nth-child(odd) {
            background: rgba(255, 204, 0, 0.15);
        }

        /* 偶数行背景色 */
        .blessings-barrage .barrage-item:nth-child(even) {
            background: rgba(0, 255, 200, 0.15);
        }

        /* 尾部渐变效果 */
        .blessings-barrage .barrage-item::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 15px;
            height: 100%;
            background: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.5) 100%);
            pointer-events: none;
        }
        
        .barrage-content {
            color: #fff;
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .barrage-from {
            color: #ffcc00;
            font-size: 11px;
            margin-left: 8px;
            flex-shrink: 0;
        }
        
        /* 实时动态容器样式 - 与乡音寄语保持一致 */
        .live-updates-container {
            pointer-events: auto;
            min-width: 300px;
            flex: 1;
            margin: 0 10px;
            display: flex;
            flex-direction: column;
        }
        
        /* 移动端适配 */
        @media (max-width: 768px) {
            .blessing-btn {
                width: 45px;
                height: 45px;
                margin-bottom: 8px;
            }

            .blessing-icon {
                font-size: 18px;
            }

            .blessing-text {
                font-size: 10px;
            }

            .blessings-barrage-container,
            .live-updates-container {
                width: 100%;
                max-width: 100%;
                margin: 5px 0;
                flex: none;
            }

            .blessings-barrage-wrapper {
                height: 120px; /* 移动端与实时动态同高 */
            }

            .barrage-item {
                padding: 3px 6px;
                font-size: 0.7rem;
                min-height: 18px;
                margin-bottom: 3px;
            }

            /* 移动端弹出层样式 */
            .blessing-modal-content {
                max-width: 85% !important;
                width: 85% !important;
                padding: 20px 15px !important;
                margin: 0 auto !important;
            }

            /* WAP端隐藏PC乡音寄语容器 */
            .blessings-barrage-container {
                display: none !important;
            }

            /* WAP端弹幕容器 */
            .wap-danmaku-container {
                display: block !important;
                width: 100%;
                height: 72px; /* 3行高度 */
                position: relative;
                overflow: visible;
                background: rgba(0, 0, 0, 0.3);
                border-radius: 8px;
                margin: 5px 0;
                pointer-events: none; /* 容器不拦截点击 */
            }

            .wap-danmaku-track {
                position: absolute;
                width: 100%;
                height: 24px;
                overflow: visible;
                pointer-events: none; /* 轨道不拦截点击 */
            }

            #wap-danmaku-track-1 { top: 0; }
            #wap-danmaku-track-2 { top: 24px; }
            #wap-danmaku-track-3 { top: 48px; }

            .wap-danmaku-item {
                position: absolute;
                left: 100%;
                white-space: nowrap;
                font-size: 0.75rem;
                color: #fff;
                padding: 2px 8px;
                background: rgba(255, 204, 0, 0.2);
                border-radius: 12px;
                cursor: pointer;
                animation: danmakuMove linear forwards;
                max-width: 200px;
                overflow: hidden;
                text-overflow: ellipsis;
                will-change: transform;
                pointer-events: auto; /* 弹幕元素可以接收点击 */
                z-index: 100; /* 确保弹幕在最上层 */
            }

            @keyframes danmakuMove {
                from { transform: translateX(0); }
                to { transform: translateX(calc(-100vw - 100%)); }
            }
        }

        /* PC端隐藏WAP弹幕 */
        .wap-danmaku-container {
            display: none;
        }
        
        .music-btn.playing {
            background: rgba(255, 204, 0, 0.3);
            box-shadow: 0 0 30px rgba(255, 204, 0, 0.8);
            animation: musicPulse 2s ease-in-out infinite;
        }
        
        @keyframes musicPulse {
            0%, 100% {
                box-shadow: 0 0 20px rgba(255, 204, 0, 0.6);
            }
            50% {
                box-shadow: 0 0 35px rgba(255, 204, 0, 1);
            }
        }
        
        .music-icon {
            font-size: 24px;
            margin-bottom: 2px;
        }
        
        .music-status {
            font-size: 10px;
            color: #ffcc00;
            font-weight: bold;
        }
        
        /* 移动端音乐按钮适配 */
        @media (max-width: 768px) {
            .music-control {
                right: 10px;
                top: auto;
                bottom: 155px;
                transform: none;
            }

            .music-btn {
                width: 45px;
                height: 45px;
            }

            .music-icon {
                font-size: 18px;
            }

            .music-status {
                font-size: 8px;
            }

            /* 移动端邀请按钮 */
            .invite-btn {
                width: 45px;
                height: 45px;
                margin-bottom: 8px;
            }

            .invite-icon {
                font-size: 18px;
            }

            .invite-text {
                font-size: 10px;
            }
            
            /* 移动端排行按钮 */
            .ranking-btn-mobile {
                display: flex;
                margin-top: 10px;
                background: rgba(0, 0, 0, 0.7);
                border: 2px solid #ffcc00;
                border-radius: 50%;
                width: 45px;
                height: 45px;
                cursor: pointer;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                transition: all 0.3s ease;
                box-shadow: 0 0 15px rgba(255, 204, 0, 0.3);
                backdrop-filter: blur(5px);
            }
            
            .ranking-btn-mobile:hover {
                background: rgba(255, 204, 0, 0.2);
                box-shadow: 0 0 25px rgba(255, 204, 0, 0.6);
                transform: scale(1.1);
            }
            
            .ranking-icon {
                font-size: 18px;
                margin-bottom: 1px;
            }
            
            .ranking-text {
                font-size: 10px;
                color: #ffcc00;
                font-weight: bold;
            }
            
            /* 清屏按钮样式 */
            .clear-screen-btn {
                display: flex;
                margin-top: 10px;
                background: rgba(0, 0, 0, 0.7);
                border: 2px solid #00c9ff;
                border-radius: 50%;
                width: 45px;
                height: 45px;
                cursor: pointer;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                transition: all 0.3s ease;
                box-shadow: 0 0 15px rgba(0, 201, 255, 0.3);
                backdrop-filter: blur(5px);
            }
            
            .clear-screen-btn:hover {
                background: rgba(0, 201, 255, 0.2);
                box-shadow: 0 0 25px rgba(0, 201, 255, 0.6);
                transform: scale(1.1);
            }
            
            .clear-screen-icon {
                font-size: 18px;
                margin-bottom: 1px;
            }
            
            .clear-screen-text {
                font-size: 10px;
                color: #00c9ff;
                font-weight: bold;
            }
            
            /* 全屏按钮样式 - 移动端 */
            .fullscreen-btn {
                display: flex;
                margin-top: 10px;
                background: rgba(0, 0, 0, 0.7);
                border: 2px solid #ffcc00;
                border-radius: 50%;
                width: 45px;
                height: 45px;
                cursor: pointer;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                transition: all 0.3s ease;
                box-shadow: 0 0 15px rgba(255, 204, 0, 0.3);
                backdrop-filter: blur(5px);
            }
            
            .fullscreen-btn:hover {
                background: rgba(255, 204, 0, 0.2);
                box-shadow: 0 0 25px rgba(255, 204, 0, 0.6);
                transform: scale(1.1);
            }
            
            .fullscreen-icon {
                font-size: 18px;
                margin-bottom: 1px;
                color: #ffcc00;
                text-shadow: 0 0 5px rgba(255, 204, 0, 0.8);
            }

            .fullscreen-text {
                font-size: 10px;
                color: #ffcc00;
                font-weight: bold;
                text-shadow: 0 0 5px rgba(255, 204, 0, 0.8);
            }

            /* 放大缩小按钮样式 - 移动端 */
            .zoom-btn {
                display: flex;
                margin-top: 8px;
                background: rgba(0, 0, 0, 0.7);
                border: 2px solid #00ff88;
                border-radius: 50%;
                width: 45px;
                height: 45px;
                cursor: pointer;
                align-items: center;
                justify-content: center;
                transition: all 0.3s ease;
                box-shadow: 0 0 15px rgba(0, 255, 136, 0.3);
                backdrop-filter: blur(5px);
            }
            
            .zoom-btn:hover {
                background: rgba(0, 255, 136, 0.2);
                box-shadow: 0 0 25px rgba(0, 255, 136, 0.6);
                transform: scale(1.1);
            }
            
            .zoom-icon {
                font-size: 22px;
                color: #00ff88;
                font-weight: bold;
                text-shadow: 0 0 5px rgba(0, 255, 136, 0.8);
            }

            /* 移动端排行弹出层 */
            .ranking-modal {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.85);
                z-index: 1000;
                justify-content: center;
                align-items: center;
            }
            
            .ranking-modal.active {
                display: flex;
            }
            
            .ranking-modal-content {
                background: linear-gradient(135deg, rgba(0,0,0,0.95), rgba(20,20,20,0.95));
                border: 2px solid #ffcc00;
                border-radius: 15px;
                width: 90%;
                max-width: 400px;
                max-height: 80vh;
                display: flex;
                flex-direction: column;
                box-shadow: 0 0 30px rgba(255, 204, 0, 0.3);
            }
            
            .ranking-modal-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 15px 20px;
                border-bottom: 1px solid #333;
            }
            
            .ranking-close-btn {
                background: none;
                border: none;
                color: #ffcc00;
                font-size: 24px;
                cursor: pointer;
                padding: 0;
                width: 30px;
                height: 30px;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: all 0.3s ease;
            }
            
            .ranking-close-btn:hover {
                transform: scale(1.2);
                text-shadow: 0 0 10px #ffcc00;
            }
            
            .ranking-modal-body {
                padding: 15px 20px;
                overflow-y: auto;
                max-height: 60vh;
            }
            
            /* 移动端隐藏底部排行榜 */
            #stats-panel .stats-content.leaderboard {
                display: none;
            }
            
            /* 移动端实时动态位置调整 */
            #stats-panel {
                bottom: 10px;
                padding: 10px;
            }
            
            .stats-content {
                margin: 0;
            }
            
            /* 移动端只显示实时动态 */
            #stats-panel .stats-content:not(.leaderboard) {
                width: 100%;
                max-width: 100%;
            }
        }
        
        /* PC端隐藏移动端按钮和弹出层 */
        @media (min-width: 769px) {
            .ranking-btn-mobile,
            .ranking-modal {
                display: none !important;
            }
        }
        
        /* 实时动态评论区样式 - 与排行榜样式一致 */
        .live-comments-container {
            height: 250px;
            overflow-y: auto;
            background: rgba(0,0,0,0.5);
            border-radius: 8px;
            padding: 10px;
            padding-right: 10px;
            max-width: 100%;
            width: 100%; /* 确保在flex容器中正确适应 */
            box-sizing: border-box; /* 确保padding不影响整体尺寸 */
        }
        
        .live-comments-list {
            display: flex;
            flex-direction: column; /* 正常排列，最新消息在底部 */
            height: auto;
            gap: 3px;
            width: 100%; /* 确保宽度不会超出容器 */
            max-height: 100%; /* 确保不会超出父容器高度 */
            overflow-y: auto; /* 确保可以滚动 */
        }
        
        /* 移动端实时动态列表样式 */
        @media (max-width: 768px) {
            .live-comments-list {
                flex-direction: column;
                overflow-y: auto;
            }
            
            /* 确保移动端评论项有足够的空间显示 */
            .comment-item {
                padding: 3px 6px; /* 减少内边距以节省空间 */
                min-height: 18px; /* 确保最小高度 */
            }
        }
        
        .comment-item {
            font-size: 0.75rem;
            color: #fff;
            padding: 6px 8px; /* 增加垂直方向的内边距以确保垂直居中 */
            background: rgba(255, 204, 0, 0.15); /* 默认背景色 */
            border-left: 2px solid #ffcc00; /* 统一的黄色边框 */
            animation: fadeInSlide 0.2s ease-out;
            min-width: fit-content;
            border-radius: 2px;
            white-space: nowrap; /* 防止文字换行 */
            overflow: hidden; /* 隐藏溢出内容 */
            text-overflow: ellipsis; /* 文字溢出显示省略号 */
            max-width: 100%; /* 限制最大宽度 */
            line-height: 1.4; /* 增加行高，确保文字完整显示 */
            box-sizing: border-box; /* 确保padding不影响整体宽度 */
            display: flex; /* 使用flex布局 */
            align-items: center; /* 垂直居中对齐 */
            min-height: 24px; /* 增加最小高度 */
            position: relative; /* 为伪元素定位 */
        }
        
        /* 奇数行背景色 */
        .live-comments-list .comment-item:nth-child(odd) {
            background: rgba(255, 204, 0, 0.15);
        }
        
        /* 偶数行背景色 */
        .live-comments-list .comment-item:nth-child(even) {
            background: rgba(0, 255, 200, 0.15); /* 青绿色背景 */
        }
        
        /* 尾部渐变效果 */
        .live-comments-list .comment-item::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 15px;
            height: 100%;
            background: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.5) 100%);
            pointer-events: none;
        }
        
        /* PC端优化 */
        @media (min-width: 769px) {
            .comment-item {
                font-size: 0.8rem; /* PC端稍微增大字体 */
                padding: 7px 10px; /* 增加垂直内边距 */
                white-space: nowrap; /* 确保文字不换行 */
                overflow: hidden; /* 隐藏溢出内容 */
                text-overflow: ellipsis; /* 文字溢出显示省略号 */
                line-height: 1.4; /* 确保文字完整显示 */
                min-height: 26px; /* 确保最小高度 */
                display: flex; /* 使用flex布局 */
                align-items: center; /* 垂直居中对齐 */
            }
        }
        
        /* 大屏幕优化 */
        @media (min-width: 1200px) {
            .comment-item {
                font-size: 0.85rem; /* 大屏幕进一步增大字体 */
                padding: 8px 12px; /* 增加垂直内边距 */
                white-space: nowrap; /* 确保文字不换行 */
                overflow: hidden; /* 隐藏溢出内容 */
                text-overflow: ellipsis; /* 文字溢出显示省略号 */
                line-height: 1.4; /* 确保文字完整显示 */
                min-height: 28px; /* 确保最小高度 */
                display: flex; /* 使用flex布局 */
                align-items: center; /* 垂直居中对齐 */
            }
        }
        

        
        @keyframes fadeInSlide {
            0% {
                opacity: 0;
                transform: translateY(5px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        /* 简化颜色方案，减少视觉干扰 - 由:nth-child选择器控制 */
        .comment-item {
            border-left: 2px solid #ffcc00;
        }
        
        /* Kaspersky风格专业级发光效果 */
        @keyframes kasperskyGlow {
            0% { 
                filter: drop-shadow(0 0 1px rgba(255, 204, 0, 0.8))
                        drop-shadow(0 0 2px rgba(255, 204, 0, 0.6))
                        drop-shadow(0 0 4px rgba(255, 204, 0, 0.4))
                        drop-shadow(0 0 8px rgba(255, 204, 0, 0.2));
            }
            50% { 
                filter: drop-shadow(0 0 2px rgba(255, 204, 0, 1))
                        drop-shadow(0 0 4px rgba(255, 204, 0, 0.8))
                        drop-shadow(0 0 8px rgba(255, 204, 0, 0.6))
                        drop-shadow(0 0 16px rgba(255, 204, 0, 0.4));
            }
            100% { 
                filter: drop-shadow(0 0 1px rgba(255, 204, 0, 0.8))
                        drop-shadow(0 0 2px rgba(255, 204, 0, 0.6))
                        drop-shadow(0 0 4px rgba(255, 204, 0, 0.4))
                        drop-shadow(0 0 8px rgba(255, 204, 0, 0.2));
            }
        }
        
        @keyframes kasperskyPulse {
            0% { opacity: 0.9; }
            50% { opacity: 1; }
            100% { opacity: 0.9; }
        }
        
        .kaspersky-arc {
            animation: kasperskyGlow 2s ease-in-out infinite;
            stroke-linecap: round;
            stroke-linejoin: round;
            mix-blend-mode: screen; /* 屏幕混合模式，增强发光效果 */
        }
        
        /* 实时动态和乡音寄语滚动条样式 - 与排行榜样式一致 */
        .live-comments-container::-webkit-scrollbar,
        .blessings-barrage-wrapper::-webkit-scrollbar {
            width: 8px !important;
            background: rgba(0,0,0,0.3) !important; /* 确保滚动条轨道背景 */
        }

        .live-comments-container::-webkit-scrollbar-track,
        .blessings-barrage-wrapper::-webkit-scrollbar-track {
            background: rgba(0,0,0,0.3) !important; /* 深色背景 */
            border-radius: 4px !important;
            box-shadow: inset 0 0 4px rgba(0,0,0,0.3) !important; /* 添加内阴影 */
        }

        /* 滚动条上下按钮样式 */
        .live-comments-container::-webkit-scrollbar-button,
        .blessings-barrage-wrapper::-webkit-scrollbar-button {
            width: 8px !important;
            height: 12px !important;
            background: linear-gradient(to bottom, #ffcc00, #ffaa00) !important; /* 与滚动块一致的渐变 */
            border-radius: 4px !important;
            display: block !important;
            border: 1px solid rgba(255, 255, 255, 0.3) !important; /* 添加边框 */
        }

        .live-comments-container::-webkit-scrollbar-thumb,
        .blessings-barrage-wrapper::-webkit-scrollbar-thumb {
            background: linear-gradient(to bottom, #ffcc00, #ffaa00) !important; /* 渐变背景 */
            border-radius: 4px !important;
            border: 1px solid rgba(255, 255, 255, 0.3) !important; /* 添加边框 */
            min-height: 20px !important; /* 确保最小高度 */
        }

        .live-comments-container::-webkit-scrollbar-thumb:hover,
        .blessings-barrage-wrapper::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(to bottom, #ffdd33, #ffbb33) !important; /* 悬停时的渐变背景 */
        }

        /* 针对不同系统的特殊处理 */
        @media screen and (-webkit-min-device-pixel-ratio: 0) {
            .live-comments-container::-webkit-scrollbar-thumb,
            .blessings-barrage-wrapper::-webkit-scrollbar-thumb {
                background: linear-gradient(to bottom, #ffcc00, #ffaa00) !important;
            }
        }

        .live-comments-container::-webkit-scrollbar-thumb:hover,
        .blessings-barrage-wrapper::-webkit-scrollbar-thumb:hover {
            background: #ffaa00;
        }

        .live-comments-container::-webkit-scrollbar-corner,
        .blessings-barrage-wrapper::-webkit-scrollbar-corner {
            background: rgba(0,0,0,0.5) !important;
        }
        
        /* 确保滚动条始终可见 */
        .live-comments-container {
            -ms-overflow-style: scrollbar; /* Internet Explorer 10+ */
            scrollbar-width: thin; /* Firefox */
            scrollbar-color: #ffcc00 rgba(0,0,0,0.3); /* Firefox 滚动条颜色 */
        }
        
        /* 微信浏览器特殊处理 - 确保滚动条样式一致 */
        .wechat .live-comments-container,
        .wechat .leaderboard-content,
        .wechat .stats-panel-body {
            overflow-y: scroll !important;
            -webkit-overflow-scrolling: touch !important;
        }
        
        /* 微信浏览器滚动条样式 */
        .wechat .live-comments-container::-webkit-scrollbar,
        .wechat .leaderboard-content::-webkit-scrollbar,
        .wechat .stats-panel-body::-webkit-scrollbar {
            width: 8px !important;
            height: 8px !important;
            display: block !important;
            background: rgba(0,0,0,0.3) !important;
        }
        
        .wechat .live-comments-container::-webkit-scrollbar-track,
        .wechat .leaderboard-content::-webkit-scrollbar-track,
        .wechat .stats-panel-body::-webkit-scrollbar-track {
            background: rgba(0,0,0,0.3) !important;
            border-radius: 4px !important;
        }
        
        .wechat .live-comments-container::-webkit-scrollbar-thumb,
        .wechat .leaderboard-content::-webkit-scrollbar-thumb,
        .wechat .stats-panel-body::-webkit-scrollbar-thumb {
            background: linear-gradient(to bottom, #ffcc00, #ffaa00) !important;
            border-radius: 4px !important;
            border: 1px solid rgba(255, 255, 255, 0.3) !important;
            min-height: 20px !important;
        }
        
        /* 手机端适配 */
        @media (max-width: 768px) {
            .live-comments-container {
                max-width: 100%;
                width: 100%; /* 确保宽度占满容器 */
                height: 120px;
                max-height: 120px; /* 限制最大高度 */
                overflow-y: auto; /* 确保有滚动条 */
            }
            
            .comment-item {
                font-size: 0.7rem; /* 移动端稍微小一点的字体 */
                padding: 6px 6px; /* 移动端的内边距 */
                white-space: nowrap; /* 保持不换行 */
                overflow: hidden; /* 隐藏溢出内容 */
                text-overflow: ellipsis; /* 文字溢出显示省略号 */
                max-width: calc(100% - 20px); /* 确保不超过容器宽度并留出空间 */
                line-height: 1.4; /* 确保文字完整显示 */
                min-height: 20px; /* 确保最小高度 */
                display: flex; /* 使用flex布局 */
                align-items: center; /* 垂直居中对齐 */
            }
            
            #stats-panel { 
                flex-direction: column; 
                align-items: stretch; 
                width: 100%;
                padding: 10px; /* 减少移动端的内边距 */
                box-sizing: border-box;
                overflow-x: hidden;
            }
            
            .stats-content { 
                width: 100% !important; /* 在移动端使用统一宽度 */
                max-width: 100% !important; /* 确保不超过父容器 */
                margin: 5px 0 !important; /* 调整上下间距 */
                margin-left: 0 !important;
                margin-right: 0 !important;
                flex: none; /* 不使用弹性伸缩，避免撑破 */
                min-width: 0 !important; /* 允许在窄屏完整收缩 */
                align-self: stretch;
                box-sizing: border-box;
                overflow-x: hidden;
            }
            
            .leaderboard { 
                width: 100% !important; 
                margin-top: 10px; 
                text-align: left; 
            }

            .live-comments-container,
            .leaderboard-content {
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box;
            }

            .leaderboard-content {
                overflow-x: hidden;
            }

            .stats-panel-body {
                width: 100% !important;
                max-width: 100% !important;
            }

            .leaderboard-content table {
                width: 100% !important;
                table-layout: fixed;
            }

            .leaderboard-content th,
            .leaderboard-content td {
                word-break: break-word;
            }
        }
        
        /* 平板端适配 */
        @media (min-width: 769px) and (max-width: 1024px) {
            .live-comments-container,
            .leaderboard-content {
                max-width: 550px; /* 平板端统一宽度 */
            }

            /* 平板端显示广告 */
            #pc-ad {
                display: block;
            }

            /* 平板端实时动态内容区域高度压缩 */
            .live-updates-container .live-comments-container {
                height: 140px;
            }
        }

        /* 统一实时动态与排行榜滚动条样式（PC/移动端一致） */
        .stats-panel-body::-webkit-scrollbar {
            width: 8px !important;
            background: rgba(0,0,0,0.3) !important;
        }

        .stats-panel-body::-webkit-scrollbar-track {
            background: rgba(0,0,0,0.3) !important;
            border-radius: 4px !important;
            box-shadow: inset 0 0 4px rgba(0,0,0,0.3) !important;
        }

        .stats-panel-body::-webkit-scrollbar-thumb {
            background: linear-gradient(to bottom, #ffcc00, #ffaa00) !important;
            border-radius: 4px !important;
            border: 1px solid rgba(255, 255, 255, 0.3) !important;
            min-height: 20px !important;
        }

        .stats-panel-body::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(to bottom, #ffdd33, #ffbb33) !important;
        }

        .stats-panel-body::-webkit-scrollbar-button {
            width: 8px !important;
            height: 12px !important;
            background: linear-gradient(to bottom, #ffcc00, #ffaa00) !important;
            border-radius: 4px !important;
            display: block !important;
            border: 1px solid rgba(255, 255, 255, 0.3) !important;
        }

        .stats-panel-body::-webkit-scrollbar-corner {
            background: rgba(0,0,0,0.5) !important;
        }

        .stats-panel-body {
            -ms-overflow-style: scrollbar;
            scrollbar-width: thin;
            scrollbar-color: #ffcc00 rgba(0,0,0,0.3);
        }

        /* 移动端强制两块等宽（覆盖所有前置规则） */
        @media (max-width: 768px) {
            #stats-panel {
                width: 100% !important;
            }

            #stats-panel .stats-content,
            #stats-panel .stats-content.leaderboard {
                flex: 0 0 100% !important;
                width: 100% !important;
                max-width: 100% !important;
            }

            #stats-panel .live-comments-container,
            #stats-panel #ranking-list,
            #stats-panel .stats-panel-body {
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box;
            }
        }

        /* 强制排行榜样式与实时动态一致，确保对齐 */
        .live-comments-container,
        .leaderboard-content {
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
            background: rgba(0,0,0,0.5) !important;
            border-radius: 8px !important;
            padding: 0 !important;
            overflow-y: auto !important;
        }

        .leaderboard-content {
            overflow-x: hidden !important;
        }

        .live-comments-list,
        .leaderboard-inner {
            padding: 10px !important;
            box-sizing: border-box;
        }

        @media (max-width: 768px) {
            #stats-panel {
                align-items: stretch !important;
            }

            #stats-panel .stats-content {
                margin-left: 0 !important;
                margin-right: 0 !important;
            }
        }