body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f5f5f5;
        }

        h1 {
            text-align: center;
            color: #333;
            font-size: 24px;
        }

        .modal {
            display: none;
            /* 默认隐藏 */
            position: fixed;
            z-index: 2000;
            /* 确保在最上层 */
            left: 0;
            top: 0;
            width: 100%;
            /* 覆盖全宽 */
            height: 100%;
            /* 覆盖全高 */
            overflow: hidden;
            /* 防止页面滚动 */
            background-color: rgba(0, 0, 0, 0.6);
            /* 半透明黑色背景 */
            /* 使弹窗内容垂直和水平居中 (Flexbox方法更简洁) */
            display: flex;
            align-items: center;
            /* 垂直居中 */
            justify-content: center;
            /* 水平居中 */
        }

        /* 弹窗主体内容 */
        .modal-content {
            background-color: #ffffff;
            /* 关键：移除固定 width, max-width, margin */
            /* 使用 padding, max-height, 和 overflow-y 来控制内容溢出 */
            padding: 20px;
            border: 1px solid #888;
            border-radius: 8px;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            animation-name: modalopen;
            animation-duration: 0.4s;
            /* 允许在小屏幕上缩小宽度 */
            width: 90%;
            max-width: 600px;
            /* 在大屏幕上限制最大宽度 */
            /* 关键：限制最大高度并允许内部滚动 */
            max-height: 85vh;
            /* 最大高度为视口高度的 85% */
            display: flex;
            flex-direction: column;
            /* 内容垂直排列 */
        }

        /* 弹窗内容区域 (包含标题和正文) */
        .modal-content-inner {
            overflow-y: auto;
            /* 内容过多时垂直滚动 */
            -webkit-overflow-scrolling: touch;
            /* iOS 设备的弹性滚动 */
            flex: 1;
            /* 占据剩余空间 */
            margin-bottom: 15px;
            /* 与按钮间距 */
        }

        /* 弹窗标题 */
        #announcement-title {
            margin-top: 0;
            margin-bottom: 15px;
            color: #333;
            font-size: 20px;
            text-align: center;
            flex-shrink: 0;
            /* 防止标题被压缩 */
        }

        /* 弹窗正文 */
        #announcement-content {
            line-height: 1.6;
            font-size: 16px;
            word-wrap: break-word;
            overflow-wrap: break-word;
            /* pre-wrap 保留换行和空格，同时允许自动换行 */
            white-space: pre-wrap;
            flex-shrink: 0;
            /* 防止内容被压缩 */
        }

        /* 关闭按钮 (右上角 x) */
        .close {
            color: #aaaaaa;
            position: absolute;
            /* 绝对定位到 modal-content 右上角 */
            top: 15px;
            right: 20px;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
            z-index: 2001;
            /* 确保在内容之上 */
        }

        .close:hover,
        .close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }

        /* “我知道了”按钮 */
        .modal-ok-button {
            background-color: #4CAF50;
            /* 绿色 */
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            align-self: flex-end;
            /* 按钮靠右对齐 */
            flex-shrink: 0;
            /* 防止按钮被压缩 */
        }

        .modal-ok-button:hover {
            background-color: #45a049;
        }

        /* --- 手机端特定优化 --- */
        @media (max-width: 768px) {
            .modal-content {
                width: 95%;
                /* 更窄的屏幕使用更宽的比例 */
                padding: 15px;
                max-width: none;
                /* 移除大屏幕最大宽度限制 */
                max-height: 90vh;
                /* 在手机上允许更高一点 */
                border-radius: 6px;
            }

            #announcement-title {
                font-size: 18px;
                margin-bottom: 12px;
            }

            #announcement-content {
                font-size: 15px;
            }

            .close {
                font-size: 24px;
                top: 10px;
                right: 15px;
            }

            .modal-ok-button {
                padding: 8px 16px;
                font-size: 15px;
            }
        }

        @media (max-width: 480px) {
            .modal-content {
                width: 97%;
                /* 最窄屏幕更宽 */
                padding: 12px;
                max-height: 92vh;
                /* 更大的显示比例 */
                border-radius: 5px;
            }

            #announcement-title {
                font-size: 17px;
                margin-bottom: 10px;
            }

            #announcement-content {
                font-size: 14px;
            }

            .close {
                font-size: 22px;
                top: 8px;
                right: 12px;
            }

            .modal-ok-button {
                padding: 7px 14px;
                font-size: 14px;
            }
        }

        /* Tab容器 */
        .tab-container {
            width: 95%;
            margin: 20px auto;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            padding: 15px;
        }

        .tab-buttons {
            display: flex;
            border-bottom: 1px solid #ddd;
            margin-bottom: 15px;
        }

        .tab-button {
            padding: 10px 20px;
            background-color: #f1f1f1;
            border: none;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }

        .tab-button.active {
            background-color: #4CAF50;
            color: white;
        }

        .tab-button:hover:not(.active) {
            background-color: #ddd;
        }

        /* 角色类型和视图类型Tab */
        .role-view-tabs {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
            flex-wrap: wrap;
        }

        .role-tab, .view-tab {
            padding: 8px 16px;
            background-color: #e7e7e7;
            border: none;
            border-radius: 20px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.2s ease;
        }

        .role-tab.active, .view-tab.active {
            background-color: #4CAF50;
            color: white;
        }

        .role-tab:hover, .view-tab:hover {
            background-color: #d0d0d0;
        }

        /* 筛选设置区域 */
        .filter-settings {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 15px;
            flex-wrap: wrap;
        }

        .min-games-filter {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .min-games-filter input {
            width: 60px;
            padding: 5px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .min-games-filter input[type="checkbox"] {
            width: auto;
        }

        /* 筛选区域容器 */
        .filter-section {
            width: 95%;
            margin: 20px auto;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            padding: 15px;
            position: relative; /* Add this for absolute positioning of merge checkbox */
        }

        /* 筛选标题 */
        .filter-section h3 {
            margin-top: 0;
            margin-bottom: 15px;
            font-size: 18px;
        }

        /* 可多选的 Tab 按钮容器 */
        .filter-tabs-container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        /* 可多选的 Tab 按钮样式 */
        .filter-tab {
            padding: 8px 16px;
            background-color: #e7e7e7;
            border: none;
            border-radius: 20px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.2s ease;
            white-space: nowrap;
        }

        .filter-tab:hover {
            background-color: #d0d0d0;
        }

        .filter-tab.active {
            background-color: #4CAF50;
            color: white;
        }
        
        /* 排行榜表格 */
        #rankings-table {
            width: 95%;
            border-collapse: collapse;
            background-color: #fff;
            display: none;
            font-size: 14px;
        }
        #rankings-table th, #rankings-table td {
            border: 1px solid #ddd;
            padding: 10px 8px;
            text-align: left;
            white-space: nowrap;
        }
        #rankings-table th {
            background-color: #4CAF50;
            color: white;
            text-align: center;
            font-size: 15px;
            cursor: pointer;
            user-select: none;
            position: relative;
        }
        #rankings-table th:hover {
             background-color: #45a049;
        }
        #rankings-table tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        #rankings-table tr:hover {
            background-color: #f1f1f1;
        }
        
        /* 排序图标样式 */
        .sort-icon {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 12px;
            opacity: 0.7;
        }
        .sort-icon.asc::after {
            content: "▲";
        }
        .sort-icon.desc::after {
            content: "▼";
        }
        .sort-icon.inactive {
             opacity: 0.3;
        }

        /* 状态信息 */
        #loading, #error, #info-message, #warning-message {
            width: 95%;
            margin: 20px auto;
            text-align: center;
            font-size: 18px;
        }
        #error { color: red; }
        #info-message { color: #555; }
        #warning-message { 
            color: #ff6b00; 
            font-size: 14px;
            text-align: left;
            background-color: #fffbe6;
            padding: 10px;
            border-radius: 5px;
            margin: 10px auto;
            width: 95%;
        }

        .centered-cell {
            text-align: center;
        }

        /* 手机端响应式优化 */
        @media (max-width: 768px) {
            body {
                margin: 10px;
            }
            
            h1 {
                font-size: 20px;
                margin: 15px 0;
            }
            
            .tab-container, .filter-section {
                width: 95%;
                margin: 15px 0;
                padding: 12px;
            }
            
            .filter-section h3 {
                font-size: 16px;
                margin-bottom: 12px;
            }
            
            .filter-tab, .role-tab, .view-tab {
                padding: 6px 14px;
                font-size: 13px;
            }
            
            #rankings-table {
                font-size: 13px;
            }
            
            #rankings-table th, #rankings-table td {
                padding: 8px 6px;
            }
            
            #rankings-table th {
                font-size: 14px;
            }
            
            .sort-icon {
                font-size: 11px;
                right: 6px;
            }
            
            #loading, #error, #info-message {
                width: 100%;
                font-size: 16px;
            }
        }
        
        @media (max-width: 480px) {
            body {
                margin: 8px;
            }
            
            h1 {
                font-size: 18px;
                margin: 12px 0;
            }
            
            .tab-container, .filter-section {
                padding: 10px;
            }
            
            .filter-section h3 {
                font-size: 15px;
                margin-bottom: 10px;
            }
            
            .filter-tab, .role-tab, .view-tab {
                padding: 5px 12px;
                font-size: 12px;
                border-radius: 15px;
            }
            
            #rankings-table {
                font-size: 12px;
            }
            
            #rankings-table th, #rankings-table td {
                padding: 6px 4px;
            }
            
            #rankings-table th {
                font-size: 13px;
            }
            
            .sort-icon {
                font-size: 10px;
                right: 4px;
            }
            
            #loading, #error, #info-message {
                font-size: 15px;
            }
            
            .min-games-filter {
                flex-direction: column;
                align-items: flex-start;
                gap: 5px;
            }
            
            .role-view-tabs {
                flex-direction: column;
                gap: 5px;
            }
        }
        
        .watermark {
            position: fixed;
            opacity: 0.1;
            font-size: 30px;
            font-weight: bold;
            color: #000;
            pointer-events: none;
            z-index: 9999;
            transform: rotate(-30deg); /* 倾斜角度 */
        }

        .watermark-top-left {
            top: 30%;
            left: 20%;
        }

        .watermark-top-right {
            top: 30%;
            right: 20%;
            transform: rotate(-30deg); /* 右上角水印向右倾斜 */
        }

        .watermark-bottom-left {
            bottom: 30%;
            left: 20%;
            transform: rotate(-30deg); /* 左下角水印向右倾斜 */
        }

        .watermark-bottom-right {
            bottom: 30%;
            right: 20%;
            transform: rotate(-30deg); /* 右下角水印向左倾斜 */
        }

        /* 手机端适配 */
        @media (max-width: 768px) {
            .watermark {
                font-size: 25px;
            }
            
            .watermark-top-left {
                top: 30%;
                left: 5%;
            }
            
            .watermark-top-right {
                top: 30%;
                right: 5%;
            }
            
            .watermark-bottom-left {
                bottom: 30%;
                left: 5%;
            }
            
            .watermark-bottom-right {
                bottom: 30%;
                right: 5%;
            }
        }

        @media (max-width: 480px) {
            .watermark {
                font-size: 18px;
            }
            
            .watermark-top-left {
                top: 30%;
                left: 5%;
            }
            
            .watermark-top-right {
                top: 30%;
                right: 5%;
            }
            
            .watermark-bottom-left {
                bottom: 30%;
                left: 5%;
            }
            
            .watermark-bottom-right {
                bottom: 30%;
                right: 5%;
            }
        }

        /* 横向滚动支持 */
        .table-container {
            width: 95%;
            margin: 20px auto;
            overflow-x: auto;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        @media (max-width: 768px) {
            .table-container {
                width: 100%;
                margin: 15px 0;
            }
        }

        /* 弹窗样式优化 */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.4);
            overflow: hidden; /* 防止弹窗本身滚动 */
        }

        .modal-content {
            background-color: #fefefe;
            margin: 5% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 90%;
            max-width: 1000px;
            border-radius: 8px;
            position: relative;
            max-height: 90vh;
            overflow: hidden;
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
            position: absolute;
            right: 20px;
            top: 15px;
            z-index: 1001;
        }

        #detail-title {
            margin-top: 0;
            font-size: 20px;
            margin-right: 30px;
        }

        /* 关键修复：弹窗内容区域设置 */
        .modal-content-inner {
            max-height: calc(90vh - 100px);
            overflow: auto;
            -webkit-overflow-scrolling: touch;
            padding-top: 10px;
        }

        #detail-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
            font-size: 14px;
            min-width: 800px; /* 确保表格有足够的最小宽度 */
        }

        #detail-table th, #detail-table td {
            border: 1px solid #ddd;
            padding: 10px 12px;
            text-align: center;
        }

        #detail-table th {
            background-color: #4CAF50;
            color: white;
        }

        /* 手机端弹窗优化 */
        @media (max-width: 768px) {
            .modal-content {
                width: 95%;
                margin: 2% auto;
                padding: 15px;
                padding-top: 50px;
            }
            
            #detail-title {
                font-size: 18px;
                margin-top: 0;
                margin-right: 40px;
            }
            
            .close {
                font-size: 24px;
                padding: 5px;
                right: 15px;
                top: 10px;
            }
            
            #detail-table {
                font-size: 14px;
            }
            
            #detail-table th, #detail-table td {
                padding: 8px 10px;
            }
        }

        @media (max-width: 480px) {
            .modal-content {
                width: 95%;
                margin: 2% auto;
                padding: 12px;
                padding-top: 45px;
            }
            
            #detail-title {
                font-size: 16px;
                margin-right: 35px;
            }
            
            .close {
                font-size: 20px;
                padding: 2px;
                right: 12px;
                top: 8px;
            }
            
            #detail-table {
                font-size: 13px;
            }
            
            #detail-table th, #detail-table td {
                padding: 6px 8px;
            }
            
            /* 关键修复：手机端表格容器 - 只允许横向滚动 */
            .modal-content-inner {
                max-height: calc(90vh - 80px);
                overflow-x: auto; /* 只允许横向滚动 */
                overflow-y: auto; /* 允许纵向滚动 */
                -webkit-overflow-scrolling: touch;
            }
            
            #detail-table {
                min-width: 100%; /* 表格至少占满容器宽度 */
                width: auto; /* 允许表格根据内容自动扩展 */
            }
        }
        
        /* 合并队伍前身选项 */
        .merge-teams-filter {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .title-container {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px; /* 按钮和标题之间的间距 */
            margin: 20px 0;
            position: relative;
        }
         
        /* 返回按钮样式 */
        .back-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background-color: #4CAF50; /* 绿色背景 */
            color: white;
            border-radius: 50%; /* 圆形按钮 */
            text-decoration: none;
            font-size: 20px;
            font-weight: bold;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* 添加阴影 */
            transition: background-color 0.3s, transform 0.2s;
            flex-shrink: 0; /* 防止按钮在小屏幕上被压缩 */
        }
         
        .back-button:hover {
            background-color: #45a049; /* 悬停时颜色变深 */
            transform: scale(1.05); /* 悬停时轻微放大 */
        }
         
        .back-button:active {
            transform: scale(0.95); /* 点击时缩小 */
        }
         
        /* 手机端响应式优化 */
        @media (max-width: 768px) {
            .title-container {
                gap: 12px;
                margin: 15px 0;
            }
         
            .back-button {
                width: 36px;
                height: 36px;
                font-size: 18px;
            }
         
            h1 {
                font-size: 20px;
                margin: 0;
            }
        }
         
        @media (max-width: 480px) {
            .title-container {
                gap: 10px;
                margin: 12px 0;
            }
         
            .back-button {
                width: 32px;
                height: 32px;
                font-size: 16px;
            }
         
            h1 {
                font-size: 18px;
            }
        }

        /* 可点击单元格样式 */
        .clickable-cell {
            cursor: pointer;
            color: #1e88e5;
            text-decoration: underline;
            transition: all 0.2s ease;
        }

        .clickable-cell:hover {
            background-color: #e3f2fd;
            color: #0d47a1;
        }

        /* 角色链接样式 */
        .role-link {
            display: inline-block;
            margin-right: 5px;
            margin-bottom: 3px;
            padding: 2px 6px;
            background-color: #e3f2fd;
            color: #1e88e5;
            border-radius: 3px;
            text-decoration: none;
            font-size: 12px;
            transition: all 0.2s ease;
        }

        .role-link:hover {
            background-color: #bbdefb;
            color: #0d47a1;
        }

        /* H2H-like 新增样式 (Player Filter) */
        /***** 新增：系列筛选 UI 样式 *****/
        /* 赛事系列容器 */
        .series-container {
            margin-bottom: 10px;
            border: 1px solid #e0e0e0;
            border-radius: 5px;
        }

        .series-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 15px;
            background-color: #f9f9f9;
            cursor: pointer;
            user-select: none;
        }

        .series-header:hover {
            background-color: #f0f0f0;
        }

        .series-title {
            font-weight: bold;
            font-size: 16px;
            color: #333;
        }

        .series-toggle {
            font-size: 18px;
            transition: transform 0.3s ease;
        }

        .series-toggle.collapsed {
            transform: rotate(-90deg);
        }

        .series-content {
            padding: 0 15px;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease, padding 0.3s ease;
        }

        .series-content.expanded {
            padding: 15px;
            max-height: 1000px; /* 足够大的值以适应内容 */
        }

        .series-actions {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
        }

        .series-action-btn {
            padding: 5px 10px;
            background-color: #f0f0f0;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            font-size: 12px;
        }

        .series-action-btn:hover {
            background-color: #e0e0e0;
        }

        /* 阶段选项容器 */
        .phases-container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        /* 可多选的阶段按钮样式 */
        .phase-tab {
            padding: 8px 16px;
            background-color: #e7e7e7;
            border: none;
            border-radius: 20px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.2s ease;
            white-space: nowrap;
        }

        .phase-tab:hover {
            background-color: #d0d0d0;
        }

        .phase-tab.active {
            background-color: #4CAF50;
            color: white;
        }

        /* 全局操作按钮 */
        .global-actions {
            margin-top: 20px;
            text-align: center;
        }

        .global-action-btn {
            padding: 10px 20px;
            background-color: #2196F3;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            margin: 0 10px;
        }

        .global-action-btn:hover {
            background-color: #0b7dda;
        }
        /***** 新增样式结束 *****/