<template>
  <div @click.once="handleFirstInteraction">
    <!-- 第一部分：百日大战主题 - 使用banner0.png图片 -->
    <section class="theme-section card-game">
      <div class="theme-container">
        <img src="/banner0.png" alt="百日大战主题" class="banner-image bai-day-battle">
      </div>
    </section>



    <!-- 任务设置模块 -->
    <section class="task-settings-section card-game">
      <div class="task-title-container">
        <h1 class="game-title" v-if="taskSettings?.mainTitle">任务: <span class="game-title-highlight">{{
          taskSettings.mainTitle }} </span> </h1>
        <p class="game-subtitle" v-if="taskSettings?.subtitle">{{ taskSettings.subtitle }}</p>
      </div>
    </section>

    <!-- 第三部分：奖金设置（图片形式） -->
    <section v-if="localDisplayConfig.showBonusModule" class="bonus-section card-game" 
      @mousedown="startBonusDrag"
      @touchstart="startBonusTouch"
      @click.stop>
      <div class="bonus-awards-container">
        <div><img src="/award1.png" alt="一等奖" class="award-image"></div>
        <div><img src="/award2.png" alt="二等奖" class="award-image"></div>
        <div><img src="/award3.png" alt="三等奖" class="award-image"></div>
      </div>
    </section>

    <!-- 第四部分：总战绩 -->
    <section class="total-score-section card-game">
      <div class="total-score-container">
        <div class="game-subtitle total-score-total-title">
          <img src="/completed_performance.png" 
  alt="总战绩" 
  style="width: 880px; display: block; margin: 0 auto; height: auto;" 
  class="total-score-total-image">
        </div>
        <div class="total-score-content">
          <div class="total-score-item">
            <span class="score-value total-score-total-value">{{ localDisplayConfig.team?.totalScoreColumn?.displayStyle === 'amount' ? '¥' : '' }}{{ totalTeamScore }}</span>
          </div>
        </div>
      </div>
    </section>

    <!-- 第五部分：排名明细 -->
    <section class="rankings-section card-game">
      <div class="rankings-container">

        <!-- 战区排名 -->
        <div class="team-rankings">
          <!-- 战区排名宣传语 -->
          <div class="team-rankings-propagation">
            <img src="/team-propagation.png" alt="虎狼之师" class="team-rankings-propagation-image"
            style="width: 500px; height: auto">
          </div>
          <!-- 战区冠军 -->
          <div class="team-champion">
            <div class="team-logo" :class="{ 'photo-container': localDisplayConfig.championLogos?.teamChampionType === 'photo' }">
              <img v-if="localDisplayConfig.championLogos?.teamChampion"
                :src="localDisplayConfig.championLogos.teamChampion" alt="战区冠军" 
                class="champion-logo"
                :style="localDisplayConfig.championLogos?.teamChampionType === 'photo' 
                  ? { 
                      width: localDisplayConfig.championLogos?.teamChampionPhotoWidth + 'px', 
                      height: localDisplayConfig.championLogos?.teamChampionPhotoHeight + 'px',
                      objectFit: 'cover'
                    } 
                  : { 
                      width: localDisplayConfig.championLogos?.teamChampionSize + 'px', 
                      height: localDisplayConfig.championLogos?.teamChampionSize + 'px'
                    }
                ">
              <img v-else src="/crown.png" alt="战区冠军" class="champion-logo" />
            </div>
            <div class="champion-name">
              {{ teamRankings[0]?.name || '暂无冠军' }}
            </div>
          </div>
          <div class="team-rankings-container">
            <h2 class="game-subtitle">战区排名</h2>
            <div class="rank-table">
              <div class="table-header" :style="{ 'grid-template-columns': teamGridTemplate }">
                <span class="rank-col" :style="{ textAlign: localDisplayConfig.team?.columnAlignments?.rank || 'left' }">排名</span>
                <span class="name-col" :style="{ textAlign: localDisplayConfig.team?.columnAlignments?.name || 'left' }">战区名称</span>
                <span class="score-col" :style="{ textAlign: localDisplayConfig.team?.columnAlignments?.score || 'left' }">{{ localDisplayConfig.team?.totalScoreColumn?.displayName || '业绩' }}</span>
                <span v-if="localDisplayConfig.team?.showMemberCount" class="member-col" :style="{ textAlign: localDisplayConfig.team?.columnAlignments?.memberCount || 'left' }">人数</span>
                <span v-if="localDisplayConfig.team?.showLeader" class="leader-col" :style="{ textAlign: localDisplayConfig.team?.columnAlignments?.leader || 'left' }">将军</span>
                <span v-if="localDisplayConfig.team?.showBonus" class="bonus-col" :style="{ textAlign: localDisplayConfig.team?.columnAlignments?.bonus || 'left' }">奖金</span>
              </div>
              <div v-for="(item, index) in filteredTeamRankings" :key="item.id" class="table-row"
                :style="{ 'grid-template-columns': teamGridTemplate }" :class="{
                  'top-three': index < 3,
                  'highlight': index === 0
                }">
                <span class="rank-col" :style="{ textAlign: localDisplayConfig.team?.columnAlignments?.rank || 'left' }">{{ index + 1 }}</span>
                <span class="name-col" :style="{ textAlign: localDisplayConfig.team?.columnAlignments?.name || 'left' }">{{ item.name }}</span>
                <span class="score-col" :style="{ textAlign: localDisplayConfig.team?.columnAlignments?.score || 'left' }">{{ localDisplayConfig.team?.totalScoreColumn?.displayStyle === 'amount' ? '¥' : '' }}{{ formatNumber(item.totalScore) }}</span>
                <span v-if="localDisplayConfig.team?.showMemberCount" class="member-col" :style="{ textAlign: localDisplayConfig.team?.columnAlignments?.memberCount || 'left' }">{{ item.memberCount }}人</span>
                <span v-if="localDisplayConfig.team?.showLeader" class="leader-col" :style="{ textAlign: localDisplayConfig.team?.columnAlignments?.leader || 'left' }">{{ item.leader }}</span>
                <span v-if="localDisplayConfig.team?.showBonus" class="bonus-col" :style="{ textAlign: localDisplayConfig.team?.columnAlignments?.bonus || 'left' }">¥{{ item.bonus }}</span>
              </div>

            </div>
          </div>
        </div>

        <div class="individual-rankings">
          <!-- 英雄排名宣传语 -->
          <div class="individual-rankings-propagation">
            <img src="/individual-propagation.png" alt="虎狼之师" class="individual-rankings-propagation-image"
    style="width: 500px; height: auto">
          </div>          
          <!-- 英雄冠军 -->
          <div class="individual-champion">
              <div class="champion-content">
                <div class="individual-avatar champion-container">
                  <div class="crown-animation" :class="{'crown-animation-run': localDisplayConfig.crown?.animationEnabled}" v-if="filteredIndividualRankings.length > 0" :style="{
                    fontSize: (localDisplayConfig.crown?.size || localDisplayConfig.championLogos?.individualChampionSize * 0.8) + 'px'
                  }">
                    👑
                  </div>
                  <img v-if="filteredIndividualRankings[0]?.avatar && filteredIndividualRankings[0].avatar.startsWith('/')"
                    :src="filteredIndividualRankings[0].avatar" alt="冠军头像" class="avatar-image avatar-image-champion"
                    :style="{ width: localDisplayConfig.championLogos?.individualChampionSize + 'px', height: localDisplayConfig.championLogos?.individualChampionSize + 'px' }">
                  <img v-else-if="localDisplayConfig.championLogos?.individualChampion"
                    :src="localDisplayConfig.championLogos.individualChampion" alt="英雄冠军" class="champion-logo"
                    :style="{ width: localDisplayConfig.championLogos?.individualChampionSize + 'px', height: localDisplayConfig.championLogos?.individualChampionSize + 'px' }">
                  <div v-else class="champion-log">
                    <span 
                    :style="{ fontSize: localDisplayConfig.championLogos?.individualChampionSize ? (localDisplayConfig.championLogos.individualChampionSize * 0.8) + 'px' : '2rem' }">
                    {{ filteredIndividualRankings[0]?.avatar || '👤' }}
                  </span>
                  </div>                  
                </div>
                <div class="champion-name">
                  {{ filteredIndividualRankings[0]?.name || '暂无冠军' }}
                </div>
              </div>
            </div>
          <!-- 英雄排名 -->
          <div class="individual-rankings-container">
            <h2 class="game-subtitle">英雄排名</h2>
            <div class="rank-table">
              <div class="table-header" :style="{ 'grid-template-columns': individualGridTemplate }">
                <span class="rank-col" :style="{ textAlign: localDisplayConfig.individual?.columnAlignments?.rank || 'left' }">排名</span>
                <span v-if="localDisplayConfig.individual?.showAvatar" class="avatar-col">头像</span>
                <span class="name-col" :style="{ textAlign: localDisplayConfig.individual?.columnAlignments?.name || 'left' }">姓名</span>
                <span v-if="localDisplayConfig.individual?.showTeam" class="team-col" :style="{ textAlign: localDisplayConfig.individual?.columnAlignments?.team || 'left' }">{{
                  localDisplayConfig.individual?.teamColumn?.displayName || '战区' }}</span>
                <span class="score-col" :style="{ textAlign: localDisplayConfig.individual?.columnAlignments?.score || 'left' }">{{ localDisplayConfig.individual?.scoreColumn?.displayName || '业绩' }}</span>
                <span v-if="localDisplayConfig.individual?.showLevel" class="level-col" :style="{ textAlign: localDisplayConfig.individual?.columnAlignments?.level || 'left' }">等级</span>
                <span v-if="localDisplayConfig.individual?.showDepartment" class="dept-col" :style="{ textAlign: localDisplayConfig.individual?.columnAlignments?.department || 'left' }">部门</span>
                <span v-if="localDisplayConfig.individual?.showBonus" class="bonus-col" :style="{ textAlign: localDisplayConfig.individual?.columnAlignments?.bonus || 'left' }">奖金</span>
              </div>
              <div v-for="(item, index) in filteredIndividualRankings" :key="item.id" class="table-row"
                :style="{ 'grid-template-columns': individualGridTemplate }" :class="{
                'top-three': index < 3,
                'highlight': index === 0
              }">
                <span class="rank-col" :style="{ textAlign: localDisplayConfig.individual?.columnAlignments?.rank || 'left' }">{{ index + 1 }}</span>
                <span v-if="localDisplayConfig.individual?.showAvatar" class="avatar-col">
                  <img v-if="item.avatar && item.avatar.startsWith('/')" :src="item.avatar" alt="头像"
                    class="avatar-image">
                  <span v-else>{{ item.avatar || '👤' }}</span>
                </span>
                <span class="name-col" :style="{ textAlign: localDisplayConfig.individual?.columnAlignments?.name || 'left' }">{{ item.name || '-' }}</span>
                <span v-if="localDisplayConfig.individual?.showTeam" class="team-col" :style="{ textAlign: localDisplayConfig.individual?.columnAlignments?.team || 'left' }">{{ item.team || '-' }}</span>
                <span class="score-col" :style="{ textAlign: localDisplayConfig.individual?.columnAlignments?.score || 'left' }">{{ localDisplayConfig.individual?.scoreColumn?.displayStyle === 'amount' ? '¥' : '' }}{{ formatNumber(item.score) }}</span>
                <span v-if="localDisplayConfig.individual?.showLevel" class="level-col" :style="{ textAlign: localDisplayConfig.individual?.columnAlignments?.level || 'left' }"
                  :class="`level-${item.level}`">{{ item.level }}</span>
                <span v-if="localDisplayConfig.individual?.showDepartment" class="dept-col" :style="{ textAlign: localDisplayConfig.individual?.columnAlignments?.department || 'left' }">{{ item.department }}</span>
                <span v-if="localDisplayConfig.individual?.showBonus" class="bonus-col" :style="{ textAlign: localDisplayConfig.individual?.columnAlignments?.bonus || 'left' }">¥{{ item.bonus }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 浮动倒计时组件 -->
    <div class="timer-float glow-border" :style="{ right: '20px', top: '10px' }">
      <span class="label">距离结束还有：</span>
      <div class="countdown" style="display: flex; gap: 15px;">
        <span class="time-item timer-number">{{ days }}天</span>
        <span class="time-item timer-number">{{ hours }}时</span>
        <span class="time-item timer-number">{{ minutes }}分</span>
        <span class="time-item timer-number">{{ seconds }}秒</span>
      </div>
    </div>

    <!-- 浮动管理员入口 -->
    <div class="admin-entry-float">
      <button @click="goToAdmin" class="btn-game-secondary">
        🔐 管理员入口
      </button>
    </div>
  </div>
</template>

<script setup>
  
import { ref,  onBeforeMount, onMounted, onUnmounted, watch, computed, reactive, proxyRefs } from 'vue';
import { useRouter } from 'vue-router';
import {
  individualRankings as importedIndividualRankings,
  teamRankings as importedTeamRankings,
  bonusRules,
  displayConfig,
  battleEndTime,
  initializeData,
  musicConfig as importedMusicConfig
} from '../data/mockData.js';
import { readConfig } from '../services/configService.js';
import { musicPlayer } from '../utils/musicPlayer';

// 创建默认显示配置的函数
function createDefaultDisplayConfig() {
  return {
    championLogos: {
      teamChampion: '',
      teamChampionSize: 60,
      teamChampionType: 'avatar', // 'avatar' 或 'photo'
      teamChampionPhotoWidth: 120,
      teamChampionPhotoHeight: 80,
      individualChampion: '',
      individualChampionSize: 60
    },
    crownPosition: {
      top: -100, // 皇冠位置的top值，默认-100px
      left: null, // 皇冠位置的left值，默认null（使用居中）
      right: null, // 皇冠位置的right值，默认null
      bottom: null // 皇冠位置的bottom值，默认null
    },
    subtitleImage: {
      src: '/completed_performance.png',
      width: 200,
      height: 60,
      alt: '总战绩'
    },
    individual: {
      scoreColumn: {
        displayName: '业绩',
        displayStyle: 'number'
      },
      teamColumn: {
        displayName: '战区'
      },
      showLevel: true,
      showDepartment: true,
      showBonus: false,
      showTeam: true, // 默认显示战区列
      showAvatar: false, // 默认不显示头像列
      defaultDisplayRows: 0, // 默认显示所有行
      filterZeroScore: false, // 默认不过滤业绩为0的记录
      columnWidths: {
        team: 120 // 默认战区列宽
      },
      columnAlignments: {
        rank: 'left',
        name: 'left',
        score: 'left',
        level: 'left',
        department: 'left',
        team: 'left',
        bonus: 'left'
      }
    },
    team: {
      totalScoreColumn: {
        displayName: '战绩',
        displayStyle: 'number'
      },
      showMemberCount: true,
      showLeader: true,
      showBonus: false,
      defaultDisplayRows: 0, // 默认显示所有行
      filterZeroScore: false, // 默认不过滤业绩为0的记录
      columnWidths: {},
      columnAlignments: {
        rank: 'left',
        name: 'left',
        score: 'left',
        memberCount: 'left',
        leader: 'left',
        bonus: 'left'
      }
    }
  };
}

// 创建默认奖金规则的函数
function createDefaultBonusRules() {
  return [
    { rank: '1-3', description: '前三名', individualBonus: '¥10000, ¥8000, ¥5000', teamBonus: '¥50000, ¥30000, ¥20000' },
    { rank: '4-10', description: '四至十名', individualBonus: '¥3000/人', teamBonus: '¥10000/队' },
    { rank: '11-20', description: '十一至二十名', individualBonus: '¥1000/人', teamBonus: '¥5000/队' }
  ];
}

// 初始化默认显示配置
const defaultDisplayConfig = createDefaultDisplayConfig();

// 深度合并配置，确保所有必要属性都存在
function mergeConfig(config1, config2) {
  if (!config2) return config1;
  const merged = { ...config1 };
  for (const key in config2) {
    if (config2.hasOwnProperty(key)) {
      if (typeof config2[key] === 'object' && config2[key] !== null) {
        merged[key] = mergeConfig(merged[key] || {}, config2[key]);
      } else {
        // 确保所有非对象类型的属性也被正确复制
        merged[key] = config2[key];
      }
    }
  }
  return merged;
}

// 响应式数据 - 使用ref包装导入的数据，确保响应式更新
const individualRankings = ref(importedIndividualRankings || []);
const teamRankings = ref(importedTeamRankings || []);

// 计算属性 - 过滤后的个人排名数据
const filteredIndividualRankings = computed(() => {
  let filtered = individualRankings.value;
  // 如果配置了过滤业绩为0的记录
  if (localDisplayConfig.value?.individual?.filterZeroScore) {
    filtered = filtered.filter(item => item.score > 0);
  }
  return filtered;
});

// 计算属性 - 过滤后的战区排名数据
const filteredTeamRankings = computed(() => {
  let filtered = teamRankings.value;
  // 如果配置了过滤业绩为0的记录
  if (localDisplayConfig.value?.team?.filterZeroScore) {
    filtered = filtered.filter(item => item.totalScore > 0);
  }
  return filtered;
});

// 格式化数字为中国人习惯的金额表达方式（使用万分位分隔符）
function formatNumber(num) {
  if (num === null || num === undefined || isNaN(num)) return '0';
  const numStr = num.toString();
  // 先处理小数部分
  const parts = numStr.split('.');
  let integerPart = parts[0];
  const decimalPart = parts.length > 1 ? '.' + parts[1] : '';
  
  // 对于整数部分，从右往左每四位添加一个逗号（万分位分隔）
  const formattedInteger = integerPart.replace(/\B(?=(\d{4})+(?!\d))/g, ',');
  
  return formattedInteger + decimalPart;
}

// 计算属性 - 所有战区业绩总和
const totalTeamScore = computed(() => {
  const total = teamRankings.value.reduce((total, team) => {
    return total + (team.totalScore || 0);
  }, 0);
  return formatNumber(total);
});
// 确保即使displayConfig存在，也要和默认配置合并，保证结构完整性
const localDisplayConfig = ref(() => {
  if (displayConfig) {
    const configCopy = JSON.parse(JSON.stringify(displayConfig));
    const merged = mergeConfig(defaultDisplayConfig, configCopy);
    
    // 确保所有必要属性都存在
    if (!merged.individual) merged.individual = { ...defaultDisplayConfig.individual };
    if (!merged.team) merged.team = { ...defaultDisplayConfig.team };
    
    // 确保columnAlignments属性存在
    if (!merged.individual.columnAlignments) {
      merged.individual.columnAlignments = { ...defaultDisplayConfig.individual.columnAlignments };
    }
    if (!merged.team.columnAlignments) {
      merged.team.columnAlignments = { ...defaultDisplayConfig.team.columnAlignments };
    }
    
    // 确保defaultDisplayRows属性存在
    if (merged.individual.defaultDisplayRows === undefined) {
      merged.individual.defaultDisplayRows = defaultDisplayConfig.individual.defaultDisplayRows;
    }
    if (merged.team.defaultDisplayRows === undefined) {
      merged.team.defaultDisplayRows = defaultDisplayConfig.team.defaultDisplayRows;
    }
    
    return merged;
  }
  return defaultDisplayConfig;
});
const taskSettings = ref({
  mainTitle: '3000万',
  subtitle: '时间: 2025-11-12 - 2026-02-08'
});


const localMusicConfig = ref({
  enabled: true,
  filePath: '',
  volume: 1
});

// 添加首次交互处理函数
const handleFirstInteraction = () => {
  console.log("用户首次交互触发");
  if (localMusicConfig.value.enabled) {
    console.log("尝试播放音乐...");
    musicPlayer.play();
  } else {
    console.log("音乐未启用，跳过播放");
  }
};

// 加载任务设置和初始化所有数据
onBeforeMount(async () => {
  try {
    // 首先初始化所有数据，确保从服务器获取最新配置
    await initializeData();

    // 然后重新获取最新的数据
    const config = await readConfig();
    if (config) {
      // 更新任务设置
      if (config.taskSettings) {
        taskSettings.value = config.taskSettings;
      }

      // 直接从config中更新排名数据，确保使用最新的服务器数据
      if (config.individualRankings && config.individualRankings.length > 0) {
        individualRankings.value = config.individualRankings;
      }

      if (config.teamRankings && config.teamRankings.length > 0) {
        teamRankings.value = config.teamRankings;
      }

      // 更新显示配置
      if (config.displayConfig) {
        const configCopy = JSON.parse(JSON.stringify(config.displayConfig));
        localDisplayConfig.value = mergeConfig(defaultDisplayConfig, configCopy);
      }

      if (config.music) {
        localMusicConfig.value = config.music;
        console.log("从服务器加载的音乐配置:", config.music);
        console.log("音乐文件路径:", config.music.filePath);
        console.log("音乐是否启用:", config.music.enabled);
        console.log("音乐音量:", config.music.volume);
        console.log("音量类型:", typeof config.music.volume);
      }


    }
  } catch (error) {
    console.error('加载数据失败:', error);
  }
});

// 定义英雄排名表中每行默认高度
const tableIndividualTopThreeHeight = 3 * 47.5; // 前三名高度px
const tableIndividualRowHeight = 34.5; // 其他行高度px
const tableIndividualReserveHeight = 10; // 保留空间高度px

// 更新CSS变量，将默认显示行数传递给样式
watch(
  () => localDisplayConfig.value?.individual?.defaultDisplayRows,
  (newValue) => {
    if (newValue && newValue > 0) {
      const otherRowsHeight = (newValue - 3) * tableIndividualRowHeight;
      const actualHeight = tableIndividualTopThreeHeight + otherRowsHeight + tableIndividualReserveHeight;
      document.documentElement.style.setProperty('--individual-default-height', `${actualHeight}px`);
      document.documentElement.style.setProperty('--individual-overflow-y', 'auto');
      document.documentElement.style.setProperty('--individual-overflow-x', 'auto');
      document.documentElement.style.setProperty('--individual-scroll-lock', '');
    } else {
      // 根据实际数据条数计算高度
      const otherRowsHeight = (filteredIndividualRankings.value.length - 3) * tableIndividualRowHeight;
      const actualHeight = tableIndividualTopThreeHeight + otherRowsHeight + tableIndividualReserveHeight;
      document.documentElement.style.setProperty('--individual-default-height', `${actualHeight}px`);
      document.documentElement.style.setProperty('--individual-overflow-y', 'hidden');
      document.documentElement.style.setProperty('--individual-overflow-x', 'hidden');
      document.documentElement.style.setProperty('--individual-scroll-lock', 'lock');
    }
  },
  { immediate: true }
);

// 当英雄排名数据变化时，重新计算高度（如果当前是显示所有行模式）
watch(
  () => filteredIndividualRankings.value.length,
  () => {
    console.log('filteredIndividualRankings.value.length', filteredIndividualRankings.value.length);
    const displayRows = localDisplayConfig.value?.individual?.defaultDisplayRows;
    if (!displayRows || displayRows === 0) {
      // 根据实际数据条数计算高度
      const otherRowsHeight = (filteredIndividualRankings.value.length - 3) * tableIndividualRowHeight;
      const actualHeight = tableIndividualTopThreeHeight + otherRowsHeight + tableIndividualReserveHeight;
      document.documentElement.style.setProperty('--individual-default-height', `${actualHeight}px`);
      document.documentElement.style.setProperty('--individual-overflow-y', 'hidden');
      document.documentElement.style.setProperty('--individual-overflow-x', 'hidden');
      document.documentElement.style.setProperty('--individual-scroll-lock', 'lock');
    }
  }
);

// 定义战区排名表中每行默认高度
const tableTeamTopThreeHeight = 3 * 48; // 前三名高度px
const tableTeamRowHeight = 48; // 其他行高度px
const tableTeamReserveHeight = 20; // 保留空间高度px

// 添加监听以同步战区排名默认显示行数配置到CSS变量
watch(
  () => localDisplayConfig.value?.team?.defaultDisplayRows,
  (newValue) => {
    if (newValue && newValue > 0) {
      const otherRowsHeight = (newValue - 3) * tableTeamRowHeight;
      const actualHeight = tableTeamTopThreeHeight + otherRowsHeight + tableTeamReserveHeight;
      document.documentElement.style.setProperty('--team-default-height', `${actualHeight}px`);
      document.documentElement.style.setProperty('--team-overflow-y', 'auto');
      document.documentElement.style.setProperty('--team-overflow-x', 'auto');
      document.documentElement.style.setProperty('--team-scroll-lock', '');
    } else {
      // 根据实际数据条数计算高度
      const otherRowsHeight = (teamRankings.value.length - 3) * tableTeamRowHeight;
      const actualHeight = tableTeamTopThreeHeight + otherRowsHeight + tableTeamReserveHeight;
      document.documentElement.style.setProperty('--team-default-height', `${actualHeight}px`);
      document.documentElement.style.setProperty('--team-overflow-y', 'hidden');
      document.documentElement.style.setProperty('--team-overflow-x', 'hidden');
      document.documentElement.style.setProperty('--team-scroll-lock', 'lock');
    }
  },
  { immediate: true }
);

// 当战区数据变化时，重新计算高度（如果当前是显示所有行模式）
watch(
  () => teamRankings.value.length,
  () => {
    const displayRows = localDisplayConfig.value?.team?.defaultDisplayRows;
    if (!displayRows || displayRows === 0) {
      // 根据实际数据条数计算高度
      const otherRowsHeight = (teamRankings.value.length - 3) * tableTeamRowHeight;
      const actualHeight = tableTeamTopThreeHeight + otherRowsHeight + tableTeamReserveHeight;
      document.documentElement.style.setProperty('--team-default-height', `${actualHeight}px`);
      document.documentElement.style.setProperty('--team-overflow-y', 'hidden');
      document.documentElement.style.setProperty('--team-overflow-x', 'hidden');
      document.documentElement.style.setProperty('--team-scroll-lock', 'lock');
    }
  }
);

// 监听冠军字体大小配置变化，更新CSS变量
watch(
  () => localDisplayConfig.value?.championLogos,
  (newConfig) => {
    if (newConfig) {
      // 设置战区冠军字体大小
      if (newConfig.teamChampionFontSize) {
        document.documentElement.style.setProperty('--team-champion-font-size', newConfig.teamChampionFontSize + 'rem');
      }
      // 设置英雄冠军字体大小
      if (newConfig.individualChampionFontSize) {
        document.documentElement.style.setProperty('--individual-champion-font-size', newConfig.individualChampionFontSize + 'rem');
      }
    }
  },
  { immediate: true, deep: true }
);

// 监听皇冠位置配置变化，更新皇冠位置
watch(
  () => localDisplayConfig.value?.crownPosition,
  (newConfig) => {
    if (newConfig) {
      // 更新top值
      if (newConfig.top !== null && newConfig.top !== undefined) {
        document.documentElement.style.setProperty('--crown-top', newConfig.top + 'px');
      } else {
        document.documentElement.style.removeProperty('--crown-top');
      }
      
      // 更新left值
      if (newConfig.left !== null && newConfig.left !== undefined) {
        document.documentElement.style.setProperty('--crown-left', newConfig.left + 'px');
      } else {
        document.documentElement.style.removeProperty('--crown-left');
      }
      
      // 更新right值
      if (newConfig.right !== null && newConfig.right !== undefined) {
        document.documentElement.style.setProperty('--crown-right', newConfig.right + 'px');
      } else {
        document.documentElement.style.removeProperty('--crown-right');
      }
      
      // 更新bottom值
      if (newConfig.bottom !== null && newConfig.bottom !== undefined) {
        document.documentElement.style.setProperty('--crown-bottom', newConfig.bottom + 'px');
      } else {
        document.documentElement.style.removeProperty('--crown-bottom');
      }
    }
  },
  { deep: true, immediate: true }
);

// 确保奖金规则有默认值
const displayBonusRules = computed(() => {
  return Array.isArray(bonusRules) && bonusRules.length > 0
    ? bonusRules
    : createDefaultBonusRules();
});

const router = useRouter();

// 计算英雄排名表格的列布局
const individualGridTemplate = computed(() => {
  try {
    const config = localDisplayConfig.value?.individual;
    if (!config) return '60px 1fr 120px 80px 80px';

    // 确保showTeam默认为true
    if (config.showTeam === undefined) {
      config.showTeam = true;
    }

    const widths = config.columnWidths || {};
    const cols = [];

    cols.push((widths.rank || 60) + 'px'); // 排名

    // 头像列 - 根据配置决定是否显示
    if (config.showAvatar) {
      cols.push((widths.avatar || 60) + 'px'); // 头像
    }

    cols.push((widths.name === 1 || widths.name === '1') ? '1fr' : (widths.name || 120) + 'px'); // 姓名

    // 战区列（在姓名列后面）
    if (config.showTeam) {
      cols.push((widths.team === 1 || widths.team === '1') ? '1fr' : (widths.team || 120) + 'px'); // 战区
    }

    cols.push((widths.score || 80) + 'px'); // 分数

    if (config.showLevel) {
      cols.push((widths.level || 80) + 'px'); // 等级
    }

    if (config.showDepartment) {
      cols.push((widths.department === 1 || widths.department === '1') ? '1fr' : (widths.department || 100) + 'px'); // 部门
    }

    if (config.showBonus) {
      cols.push((widths.bonus || 80) + 'px'); // 奖金
    }

    return cols.join(' ');
  } catch (error) {
    console.error('计算英雄排名表格布局出错:', error);
    return '60px 1fr 120px 80px 80px'; // 兜底布局（不包含头像列）
  }
});

// 计算战区排名表格的列布局
const teamGridTemplate = computed(() => {
  try {
    const config = localDisplayConfig.value?.team;
    if (!config) return '60px 1fr 80px 80px';

    const widths = config.columnWidths || {};
    const cols = [];

    cols.push((widths.rank || 60) + 'px'); // 排名
    cols.push((widths.name === 1 || widths.name === '1') ? '1fr' : (widths.name || 150) + 'px'); // 战区名
    cols.push((widths.score || 80) + 'px'); // 分数

    if (config.showMemberCount) {
      cols.push((widths.memberCount || 60) + 'px'); // 人数
    }

    if (config.showLeader) {
      cols.push((widths.leader === 1 || widths.leader === '1') ? '1fr' : (widths.leader || 120) + 'px'); // 队长
    }

    if (config.showBonus) {
      cols.push((widths.bonus || 80) + 'px'); // 奖金
    }

    return cols.join(' ');
  } catch (error) {
    console.error('计算战区排名表格布局出错:', error);
    return '60px 1fr 80px 80px'; // 兜底布局
  }
});

// 倒计时状态
const days = ref(0);
const hours = ref(0);
const minutes = ref(0);
const seconds = ref(0);

let countdownInterval = null;
// 倒计时位置状态已移除，直接在模板中使用固定位置
// 奖金设置模块位置状态 - 使用reactive存储实际定位值
const bonusPosition = reactive({ x: 'auto', y: 'auto' });

let isDragging = false;
let isBonusDragging = false;
let dragOffset = { x: 0, y: 0 };
let bonusDragOffset = { x: 0, y: 0 };

// 节流函数
function throttle(func, limit) {
  let inThrottle;
  return function () {
    const args = arguments;
    const context = this;
    if (!inThrottle) {
      func.apply(context, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}



// 开始拖动奖金模块（鼠标事件）
const startBonusDrag = (e) => {
  e.stopPropagation(); // 阻止事件冒泡
  isBonusDragging = true;
  // 计算鼠标相对于元素左上角的偏移量
  const rect = e.currentTarget.getBoundingClientRect();
  bonusDragOffset.x = e.clientX - rect.left;
  bonusDragOffset.y = e.clientY - rect.top;
  // 提高拖动时的性能，临时禁用动画效果
  e.currentTarget.style.transition = 'none';
  e.preventDefault();
};

// 开始拖动奖金模块（触摸事件）
const startBonusTouch = (e) => {
  e.stopPropagation(); // 阻止事件冒泡
  e.preventDefault(); // 阻止默认行为，如滚动
  
  const touch = e.touches[0];
  isBonusDragging = true;
  
  // 计算触摸点相对于元素左上角的偏移量
  const rect = e.currentTarget.getBoundingClientRect();
  bonusDragOffset.x = touch.clientX - rect.left;
  bonusDragOffset.y = touch.clientY - rect.top;
  
  // 提高拖动时的性能，临时禁用动画效果
  e.currentTarget.style.transition = 'none';
};

// 结束拖动（鼠标和触摸事件）
const endDrag = (e) => {
  isDragging = false;

  if (isBonusDragging) {
    // 恢复动画效果
    const bonusElement = document.querySelector('.bonus-section');
    if (bonusElement) {
      bonusElement.style.transition = '';
    }
  }
  isBonusDragging = false;
};

// 结束触摸拖动
const endTouch = (e) => {
  if (isBonusDragging) {
    // 恢复动画效果
    const bonusElement = document.querySelector('.bonus-section');
    if (bonusElement) {
      bonusElement.style.transition = '';
    }
  }
  isBonusDragging = false;
};

// 优化的拖动函数 - 使用节流减少更新频率（鼠标事件）
const drag = throttle((e) => {
  if (isDragging) {
    drumsPosition.value.x = e.clientX - dragOffset.x;
    drumsPosition.value.y = e.clientY - dragOffset.y;
  }
  if (isBonusDragging) {
    // 计算新的位置
    const newX = e.clientX - bonusDragOffset.x;
    const newY = e.clientY - bonusDragOffset.y;

    // 确保元素不会被拖出视口
    const windowWidth = window.innerWidth;
    const windowHeight = window.innerHeight;
    const element = document.querySelector('.bonus-section');

    if (element) {
      const elementWidth = element.offsetWidth;
      const elementHeight = element.offsetHeight;

      // 限制在视口内，添加一些边距
      const limitedX = Math.max(10, Math.min(newX, windowWidth - elementWidth - 10));
      const limitedY = Math.max(10, Math.min(newY, windowHeight - elementHeight - 10));

      // 使用优化的更新函数更新奖金模块位置
      requestAnimationFrame(() => {
        bonusPosition.x = limitedX;
        bonusPosition.y = limitedY;
        // 直接设置元素样式确保实时更新
        element.style.left = `${limitedX}px`;
        element.style.top = `${limitedY}px`;
        element.style.right = 'auto';
        element.style.bottom = 'auto';
      });
    }
  }
}, 10); // 10ms节流，约100FPS

// 优化的触摸拖动函数 - 使用节流减少更新频率
const touchMove = throttle((e) => {
  if (isBonusDragging) {
    e.preventDefault(); // 阻止页面滚动
    
    const touch = e.touches[0];
    // 计算新的位置
    const newX = touch.clientX - bonusDragOffset.x;
    const newY = touch.clientY - bonusDragOffset.y;

    // 确保元素不会被拖出视口
    const windowWidth = window.innerWidth;
    const windowHeight = window.innerHeight;
    const element = document.querySelector('.bonus-section');

    if (element) {
      const elementWidth = element.offsetWidth;
      const elementHeight = element.offsetHeight;

      // 限制在视口内，添加一些边距
      const limitedX = Math.max(10, Math.min(newX, windowWidth - elementWidth - 10));
      const limitedY = Math.max(10, Math.min(newY, windowHeight - elementHeight - 10));

      // 使用优化的更新函数更新奖金模块位置
      requestAnimationFrame(() => {
        bonusPosition.x = limitedX;
        bonusPosition.y = limitedY;
        // 直接设置元素样式确保实时更新
        element.style.left = `${limitedX}px`;
        element.style.top = `${limitedY}px`;
        element.style.right = 'auto';
        element.style.bottom = 'auto';
      });
    }
  }
}, 10); // 10ms节流，约100FPS

// 计算倒计时
const calculateCountdown = () => {
  // 使用配置的结束时间
  const endDateStr = `${battleEndTime.date}T${battleEndTime.time}`;
  const endDate = new Date(endDateStr).getTime();
  const now = new Date().getTime();
  const distance = endDate - now;

  if (distance > 0) {
    days.value = Math.floor(distance / (1000 * 60 * 60 * 24));
    hours.value = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    minutes.value = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    seconds.value = Math.floor((distance % (1000 * 60)) / 1000);
  }
};

// 跳转到管理员页面
const goToAdmin = () => {
  router.push('/admin');
};

const handleResize = () => {
  // 计算并设置排名明细区域的最小高度，使其底部与视口对齐
  const rankingsSection = document.querySelector('.rankings-section');
  if (rankingsSection) {
    const windowHeight = window.innerHeight;
    const rankingsTop = rankingsSection.offsetTop;
    const rankingsMinHeight = windowHeight - rankingsTop - 20; // 减去一些边距
    if (rankingsMinHeight > 0) {
      rankingsSection.style.minHeight = rankingsMinHeight + 'px';
    }
  }
};

onMounted(async () => {
  try {
    // 异步初始化数据
    await initializeData();

    localMusicConfig.value = await readConfig().music;

    if (localMusicConfig.value.enabled) {
      // 获取音量设置，如果没有则使用默认值0.5
      const volume = localMusicConfig.value.volume !== undefined ? localMusicConfig.value.volume : 0.5;
      console.log("音乐配置信息:", localMusicConfig.value);
      console.log("音乐文件路径:", localMusicConfig.value.filePath);
      console.log("音乐是否启用:", localMusicConfig.value.enabled);
      console.log("音乐音量:", volume);
      console.log("音量类型:", typeof volume);
      
      // 检查音乐文件是否存在
      if (localMusicConfig.value.filePath) {
        console.log("正在检查音乐文件是否存在...");
        fetch(localMusicConfig.value.filePath)
          .then(response => {
            console.log("音乐文件状态:", response.status, response.statusText);
            if (response.ok) {
              console.log("音乐文件存在，可以正常访问");
            } else {
              console.error("音乐文件无法访问，状态码:", response.status);
            }
          })
          .catch(error => {
            console.error("检查音乐文件时出错:", error);
          });
      }
      
      musicPlayer.initMusicConfig(localMusicConfig.value.filePath, localMusicConfig.value.enabled, volume);
      // 注意：由于浏览器自动播放策略限制，这里不直接调用play()
      // 而是等待用户的第一次交互（点击）后再播放
      console.log("音乐已准备就绪，等待用户首次交互后播放...");
    } else {
      musicPlayer.pause();
      console.log("音乐未启用，已暂停");
    }
    // 更新本地显示配置，确保columnAlignments属性存在
    if (displayConfig) {
      const configCopy = JSON.parse(JSON.stringify(displayConfig));
      const defaultConfig = createDefaultDisplayConfig();
      const merged = mergeConfig(defaultConfig, configCopy);
      
      // 确保columnAlignments属性存在
      if (!merged.individual.columnAlignments) {
        merged.individual.columnAlignments = { ...defaultConfig.individual.columnAlignments };
      }
      if (!merged.team.columnAlignments) {
        merged.team.columnAlignments = { ...defaultConfig.team.columnAlignments };
      }
      
      localDisplayConfig.value = merged;
    } else {
      localDisplayConfig.value = createDefaultDisplayConfig();
    }
  } catch (error) {
    console.error('初始化数据失败:', error);
    // 使用默认配置
    localDisplayConfig.value = createDefaultDisplayConfig();
  }

  calculateCountdown();
  countdownInterval = setInterval(calculateCountdown, 10); // 改为10ms更新一次以显示毫秒
  // 监听窗口大小变化，确保排名明细与底部对齐
  window.addEventListener('resize', handleResize);
  handleResize(); // 初始调整

  // 添加拖放相关的事件监听
  document.addEventListener('mousemove', drag);
  document.addEventListener('mouseup', endDrag);
  
  // 添加触摸事件监听
  document.addEventListener('touchmove', touchMove, { passive: false });
  document.addEventListener('touchend', endTouch);
  document.addEventListener('touchcancel', endTouch);
});

// 监听结束时间变化（在真实环境中，可能需要通过props或store来监听）
const handleBattleEndTimeChange = () => {
  calculateCountdown();
};

// 监听显示配置变化（在真实环境中，可能需要通过props或store来监听）
const handleDisplayConfigChange = () => {
  // 更新本地配置
  localDisplayConfig.value = { ...displayConfig };
};

// 这里模拟监听配置变化
// 在实际项目中，可能需要通过WebSocket或轮询来更新配置

onUnmounted(() => {
  // 强制暂停音乐
  musicPlayer.pause();
  musicPlayer.setMuted(true);

  if (countdownInterval) clearInterval(countdownInterval);
  window.removeEventListener('resize', handleResize);

  // 移除拖放相关的事件监听
  document.removeEventListener('mousemove', drag);
  document.removeEventListener('mouseup', endDrag);
  
  // 移除触摸事件监听
  document.removeEventListener('touchmove', touchMove);
  document.removeEventListener('touchend', endTouch);
  document.removeEventListener('touchcancel', endTouch);
});
</script>

<style lang="scss" scoped>
@keyframes crownFloat {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-5px) rotate(2deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}
.avatar-image-champion {
  object-fit: cover;
  border-radius: 50%;
}

/* 冠军模块样式 */
.champion-section {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  gap: 20px;
}

.team-champion,
.individual-champion {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 15px;
  margin-bottom: 0; 
}

.team-logo {
  font-size: 0;
  margin-bottom: 0;
  display: inline-block;
  color: gold;
}

.individual-avatar {
  font-size: 2rem;
  margin-bottom: 5px;
  display: inline-block;
}

/* 冠军头像容器 */
.champion-container {
  position: relative;
  display: inline-block;
}

/* 皇冠动画效果 */
.crown-animation {
  position: absolute;
  left: var(--crown-left, 50%);
  right: var(--crown-right, auto);
  top: var(--crown-top, -100px);
  bottom: var(--crown-bottom, auto);
  transform: var(--crown-left, translateX(-50%));
  z-index: 10;
  text-shadow: 0 0 10px var(--gold-primary), 0 0 20px var(--gold-secondary);
}

.crown-animation-run {
  animation: crownFloat 2s ease-in-out infinite, crownGlow 3s ease-in-out infinite;
}

/* 皇冠浮动动画 */
@keyframes crownFloat {
  0% {
    transform: translateX(-50%) translateY(0) rotate(-10deg);
  }
  50% {
    transform: translateX(-50%) translateY(-5px) rotate(10deg);
  }
  100% {
    transform: translateX(-50%) translateY(0) rotate(-10deg);
  }
}

/* 皇冠发光效果动画 */
@keyframes crownGlow {
  0%, 100% {
    text-shadow: 0 0 10px var(--gold-primary), 0 0 20px var(--gold-secondary);
  }
  50% {
    text-shadow: 0 0 15px var(--gold-primary), 0 0 30px var(--gold-secondary), 0 0 40px var(--gold-tertiary);
  }
}


@keyframes crownGlow {
  0%, 100% {
    text-shadow: 0 0 10px var(--gold-primary), 0 0 20px var(--gold-secondary);
  }
  50% {
    text-shadow: 0 0 15px var(--gold-primary), 0 0 30px var(--gold-secondary), 0 0 40px rgba(255, 215, 0, 0.5);
  }
}

.champion-logo {
  object-fit: cover;
  max-width: 120px;
  border-radius: 50%;
}

.photo-container .champion-logo {
  max-width: unset !important;
  border-radius: 0 !important;
}


.avatar-image {
  width: 30px;
  height: 30px;
  object-fit: cover;
  vertical-align: middle;
  border-radius: 50%;
}

.champion-title {
  font-size: 0.9rem;
  color: #999;
  margin-bottom: 3px;
}

.champion-name {
  font-size: var(--individual-champion-font-size, 1.8rem);
  font-weight: bold;
  color: gold;
}

/* 战区冠军名称特殊样式 */
.team-champion .champion-name {
  font-size: var(--team-champion-font-size, 1.8rem);
}

/* 基础样式 */
:root {
  --gold-primary: #ffd700;
  --gold-secondary: #ffed4a;
  --purple-primary: #6c5ce7;
  --purple-secondary: #a29bfe;
}


/* 主题容器样式 - 添加居中对齐 */
.theme-container {
  text-align: center;
}

.bai-day-battle {
  width: 1200px;
}

/* Banner图片样式 - 居中显示 */
.banner-image {
  max-width: 90%;
  height: auto;
  display: inline-block;
  border-radius: 8px;
}

.bonus-section {
  position: fixed;
  cursor: move;
  transition: transform 0.2s ease;
  z-index: 9999; /* 设置最高层级，确保在最上层显示 */
}

/* 奖金图片容器样式 - Flex布局居中且保持一行 */
.bonus-awards-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  flex-wrap: nowrap;
}

/* 奖金图片样式 */
.award-image {
  width: auto;
  height: 120px;
  /* border-radius: 8px; */
  /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
  /* transition: transform 0.2s ease, box-shadow 0.2s ease; */
}

.award-image:hover {
  transform: translateY(-5px);
  /* box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); */
}


/* 响应式设计 */
@media (max-width: 768px) {

  .total-score-total-image {
    width: 340px !important; /* 调整总战绩图片大小，覆盖内联样式 */
  }
  
  /* 移动端总战绩金额字体调小 */
  .total-score-total-value {
    font-size: 5rem !important; /* 调小总战绩金额字体 */
    margin-top: -40px !important; /* 调整与图片的间距 */
  }

  .team-rankings-propagation-image {
    width: 200px !important; /* 覆盖内联样式 */
  }

  .individual-rankings-propagation-image {
    width: 200px !important; /* 覆盖内联样式 */
  }
  
  /* 战区排名宣传语容器调整 */
  .team-rankings-propagation {
    position: relative;
    z-index: 5; /* 提高z-index避免被其他元素遮挡 */
    margin-bottom: 70px; /* 进一步增大战区冠军的间距 */
  }
  
  /* 英雄排名宣传语容器调整 */
  .individual-rankings-propagation {
    position: relative;
    z-index: 5; /* 提高z-index避免被其他元素遮挡 */
    margin-bottom: 10px; /* 减小英雄榜虎狼之师图片与个人英雄图片的距离 */
  }
  
  /* 移动端战区冠军布局调整，与个人英雄冠军保持一致 */
  .team-champion {
    margin-bottom: 30px; /* 增加与下方战区排名标题的间距 */
    padding: 10px; /* 调整内边距 */
    min-height: 120px; /* 确保与英雄冠军有相同的视觉权重 */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* 移动端英雄冠军布局调整 */
  .individual-champion {
    margin-bottom: -10px; /* 恢复为修改之前的间距 */
    padding: 10px; /* 与战区冠军保持一致的内边距 */
    min-height: 120px; /* 确保与战区冠军有相同的视觉权重 */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* 确保两个排名区域在移动端有相同的起始位置 */
  .team-rankings,
  .individual-rankings {
    position: relative;
    z-index: 2; /* 统一的层级 */
    padding-top: 10px; /* 统一的顶部内边距 */
  }
  
  /* 战区和英雄排名容器在移动端的统一样式 */
  .team-rankings-container,
  .individual-rankings-container {
    margin-top: 20px; /* 与上方冠军图片的统一间距 */
  }

  /* 隐藏倒计时模块 */
  .timer-float {
    display: none !important;
  }

  /* 隐藏管理员入口 */
  .admin-entry-float {
    display: none !important;
  }

  /* 奖金模块垂直居中显示，两侧20px间距 */
  .bonus-section {
    /* 背景全部取消设置 **/
    background: none !important;

    position: static !important;
    margin: 20px auto;
    width: calc(100% - 40px);
    max-width: none;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
  }

  /* 保留响应式中的padding设置，但移除其他可能冲突的位置样式 */
  .bonus-section {
    padding: 8px; /* 减小padding */
  }

  .bonus-awards-container {
    gap: 10px;
    scale: 0.8;
  }
  
  /* 确保图片容器有足够的显示空间 */
  .team-rankings, .individual-rankings {
    position: relative;
    z-index: 2; /* 确保排名区域在奖金模块之上 */
  }

  .timer-float {
    font-size: 0.9rem;
  }

  .timer-float .countdown {
    gap: 8px;
  }
}

@media (max-width: 480px) {
  .banner-image {
    margin-bottom: 15px;
  }

  .award-image {
    max-width: 100%;
  }

  .timer-float {
    font-size: 0.8rem;
  }
}

/* 浮动倒计时样式 - 科技感 */
.timer-float {
  position: absolute;
  background: linear-gradient(135deg, rgba(23, 25, 35, 0.95), rgba(23, 25, 35, 0.85));
  padding: 15px 20px;
  border-radius: 12px;
  z-index: 950;
  cursor: move;
  backdrop-filter: blur(10px);
  border: 1px solid #3a3f51;
  box-shadow:
    0 0 15px rgba(0, 255, 255, 0.3),
    inset 0 0 10px rgba(0, 255, 255, 0.1);
  animation: borderPulse 3s infinite alternate;
  transition: all 0.3s ease;
}

.timer-float:hover {
  transform: scale(1.05);
  box-shadow:
    0 0 25px rgba(0, 255, 255, 0.5),
    inset 0 0 15px rgba(0, 255, 255, 0.2);
}

@keyframes borderPulse {
  0% {
    box-shadow:
      0 0 10px rgba(0, 255, 255, 0.2),
      inset 0 0 5px rgba(0, 255, 255, 0.1);
  }

  100% {
    box-shadow:
      0 0 20px rgba(0, 255, 255, 0.5),
      inset 0 0 15px rgba(0, 255, 255, 0.3);
  }
}

.card-game {
  /* 半透明背景，增强层次感 */
  background: transparent;
  /* padding: 20px;
  margin-bottom: 30px; */
  /* 强化阴影效果 */
  border: 0;
}



/* 主题部分 */
.theme-section {
  background: transparent;
  text-align: center;
}

.main-title {
  font-size: 2.5rem;
  color: var(--gold-primary);
  margin-bottom: 8px;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  font-weight: bold;
  letter-spacing: 2px;
}

.subtitle {
  font-size: 1.2rem;
  color: #fff;
  margin-bottom: 20px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.countdown {
  font-size: 1.2rem;
  margin-top: 20px;
}

.timer {
  display: inline-block;
  background: linear-gradient(45deg, #6c5ce7, #a29bfe);
  color: white;
  padding: 12px 25px;
  border-radius: 50px;
  font-weight: bold;
  margin-bottom: 14px;
  /* 下移4px */
}

/* 科技感倒计时标签 */
.timer-float .label {
  color: #00e5ff;
  font-family: 'Courier New', monospace;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 0 5px rgba(0, 229, 255, 0.7);
  display: block;
  margin-bottom: 10px;
}

/* 科技感时间项 */
.time-item {
  background: linear-gradient(135deg, #1a1d2e, #2d3748);
  padding: 8px 12px;
  border-radius: 8px;
  margin: 0 5px;
  font-size: 1.3rem;
  font-family: 'Courier New', monospace;
  font-weight: bold;
  color: #00e5ff;
  text-shadow: 0 0 10px rgba(0, 229, 255, 0.8);
  border: 1px solid #00e5ff;
  box-shadow:
    0 0 10px rgba(0, 229, 255, 0.3),
    inset 0 0 5px rgba(0, 229, 255, 0.2);
  transition: all 0.2s ease;
  min-width: 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.time-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.2), transparent);
  animation: shine 2s infinite;
}

.time-item:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 15px rgba(0, 229, 255, 0.5),
    inset 0 0 10px rgba(0, 229, 255, 0.3);
}

.time-item.milliseconds {
  font-size: 1rem;
  color: #ff3d00;
  border-color: #ff3d00;
  text-shadow: 0 0 10px rgba(255, 61, 0, 0.8);
  animation: pulse 1s infinite alternate;
}

.time-item.milliseconds::before {
  background: linear-gradient(90deg, transparent, rgba(255, 61, 0, 0.2), transparent);
}

@keyframes shine {
  100% {
    left: 100%;
  }
}

@keyframes pulse {
  0% {
    box-shadow:
      0 0 10px rgba(255, 61, 0, 0.3),
      inset 0 0 5px rgba(255, 61, 0, 0.2);
  }

  100% {
    box-shadow:
      0 0 15px rgba(255, 61, 0, 0.6),
      inset 0 0 10px rgba(255, 61, 0, 0.4);
  }
}

/* 毫秒闪烁动画增强紧张感 */
@keyframes blink {

  0%,
  50% {
    opacity: 1;
    transform: scale(1);
  }

  51%,
  100% {
    opacity: 0.7;
    transform: scale(0.95);
  }
}



/* 按钮样式 */
.btn-game-secondary {
  background: linear-gradient(45deg, #6c5ce7, #a29bfe);
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 30px;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(108, 92, 231, 0.4);
  transition: all 0.3s ease;
  border: 2px solid rgba(255, 255, 255, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-game-secondary:hover {
  transform: scale(1.1) translateY(-2px);
  box-shadow: 0 6px 30px rgba(108, 92, 231, 0.6);
  background: linear-gradient(45deg, #7f7fd5, #86a8e7);
}

/* 排名部分 */
.rankings-section {
  margin: 0 20px 30px 20px;
}

.rankings-container {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: center;
  background: none;
  border: none;
}

.individual-rankings,
.team-rankings {
  flex: 1;
  min-width: 350px;
  max-width: 550px;
}

/* 为指定的容器添加背景和边框 */
.team-rankings-container,
.individual-rankings-container {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 15px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 215, 0, 0.5);
  padding: 15px;
}

.section-title {
  color: #d63031;
  text-align: center;
  margin-bottom: 15px;
  font-size: 1.6rem;
}

.task-settings-section {
  margin-top: -220px;
}

.task-title-container {
  padding: 30px 40px;
  text-align: center;
}

.task-title-container .game-title {
  color: #ffffff;
  font-size: 2.5rem;
  font-weight: bold;
  margin: 0 0 15px 0;
  animation: glow-pulse 2s infinite alternate;
}

.task-title-container .game-title .game-title-highlight {
  font-size: 3.5rem;
}

.task-title-container .game-subtitle {
  color: #ffffff;
  font-size: 1.5rem;
  margin: 0;
}

@keyframes glow-pulse {
  0% {
    text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
  }

  100% {
    text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2), 0 0 20px rgba(255, 255, 255, 0.8);
  }
}

.rank-table {
  border-radius: 10px;
  overflow: hidden;
  overflow-y: auto;
  position: relative;
  margin-top: 0.8rem;
  max-height: 420px;
 // 只对左侧战区的.rank-table生效（通过父容器限定）
  .team-rankings-container & {
    -ms-overflow-style: none; /* IE/Edge 隐藏 */
    scrollbar-width: none; /* Firefox 隐藏 */
  }
  // Chrome/Safari 隐藏左侧滚动条（伪元素必须单独写）
  .team-rankings-container &::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
  }

  // ========== 新增：右侧英雄排名滚动条保留原样 ==========
  .individual-rankings-container & {
    -ms-overflow-style: auto; /* 恢复IE/Edge默认 */
    scrollbar-width: auto; /* 恢复Firefox默认 */
  }
  // Chrome/Safari 恢复右侧滚动条
  .individual-rankings-container &::-webkit-scrollbar {
    display: block !important;
    width: 6px !important; // 恢复默认滚动条宽度
  }
 
}

.table-header {
  background: linear-gradient(45deg, #6c5ce7, #a29bfe);
  color: white;
  display: grid;
  padding: 12px 10px;
  font-weight: bold;
  position: sticky;
  top: 0;
  z-index: 10;
  /* 增强标题可读性 */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.team-rankings .table-header {
  position: sticky;
  top: 0;
  z-index: 10;
}

.table-row {
  display: grid;
  padding: 12px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  /* 浅色背景增强可读性 */
  background: rgba(255, 255, 255, 0.9);
  color: #333;
}

.team-rankings .table-row {
  padding: 12px 10px;
}

.table-row:hover {
  background-color: rgba(255, 255, 255, 0.95);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.table-row.top-three {
  background-color: rgba(255, 243, 205, 0.95);
  font-size: 1.1rem;
  font-weight: bold;
  color: #000;
  transform: scale(1.02);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  z-index: 2;
  position: relative;
}

.table-row.top-three:hover {
  transform: scale(1.03);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

/* 前三名特殊背景色，增强亮度和对比度 - 确保英雄排名和战区排名样式一致 */
.team-rankings-container .table-row:nth-child(1),
.individual-rankings-container .table-row:nth-child(1) {
  background: linear-gradient(135deg, #ffd700, #403f3c);
  color: #333;
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
}

.team-rankings-container .table-row:nth-child(2),
.individual-rankings-container .table-row:nth-child(2) {
  background: linear-gradient(135deg, #c0c0c0, #e0e0e0);
  color: #333;
  box-shadow: 0 6px 20px rgba(192, 192, 192, 0.4);
}

.team-rankings-container .table-row:nth-child(3),
.individual-rankings-container .table-row:nth-child(3) {
  background: linear-gradient(135deg, #cd7f32, #d7ccc8);
  color: #333;
  box-shadow: 0 6px 20px rgba(205, 127, 50, 0.4);
}

.table-row.highlight {
  background: linear-gradient(135deg, #ffd32a, #ff7979);
}

.level-SSS {
  color: #ffd700;
  font-weight: bold;
}

.level-SS {
  color: #c0c0c0;
  font-weight: bold;
}

.level-S {
  color: #cd7f32;
  font-weight: bold;
}

.level-A {
  color: #4caf50;
  font-weight: bold;
}

.level-B {
  color: #2196f3;
  font-weight: bold;
}

/* 浮动管理员入口 */
.admin-entry-float {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 1000;
}

/* 管理员按钮使用通用按钮样式 */
.admin-entry-float .btn-game-secondary {
  font-size: 0.8rem;
  padding: 8px 16px;
  min-width: 80px;
  border-radius: 6px;
}

/* 针对高度大于1080分辨率的精确优化 */


/* 移动端背景图片设置 - 全局样式 */
  /* 总战绩部分样式 */
.total-score-section {
  margin: 20px auto;
  max-width: 1200px;
  padding: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  animation: fadeIn 0.5s ease-in-out;
}

.total-score-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* 移除空的total-score-content规则集以避免SCSS警告 */


.total-score-item {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  padding: 10px;
  min-height: 60px; /* 确保有足够的高度来展示垂直居中效果 */
}

.score-value {
  font-size: calc(var(--individual-champion-font-size, 6rem) * 2);
  font-weight: bold;
  color: #fff2c4;
  text-shadow: 0 0 10px rgba(0, 0, 0, .8), 0 0 20px rgb(16 16 16 / 30%), 1px 1px 2px rgba(0, 0, 0, .8);
}

.total-score-total-value {
  margin-top: -40px;
}

/* 战区冠军分数特殊样式 */
.team-champion .score-value {
  font-size: calc(var(--team-champion-font-size, 1.8rem) * 4);
  text-shadow: 
    0 0 15px rgba(255, 215, 0, 0.7),
    0 0 30px rgba(255, 215, 0, 0.4),
    2px 2px 3px rgba(0, 0, 0, 0.9);
}

/* 照片容器样式 */
.team-logo.photo-container {
  overflow: hidden;
  margin-top: -97px;
}

.individual-champion {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  gap: 30px;
}

.team-rankings-propagation {
  align-items: center;
  display: flex;
  justify-content: center;
}

.individual-rankings-propagation {
  align-items: center;
  display: flex;
  justify-content: center;
}

@media (max-width: 768px) {

    .total-score-total-title {
      align-items: center;
      display: flex;
      justify-content: center;
    }
    
    /* 战区排名容器设置 - 根据配置决定显示行数和滚动行为 */
    .team-rankings-container .rank-table {
      position: relative;
      min-height: auto;
      /* 移动端强制显示所有行，覆盖JS动态设置的CSS变量 */
      height: auto !important;
      max-height: none !important;
      overflow-y: visible !important;
      overflow-x: auto !important;
      /* 强制覆盖CSS变量 */
      --team-default-height: auto !important;
      --team-overflow-y: visible !important;
      --team-overflow-x: auto !important;
    }
    
    /* 移动端战区排名显示所有内容，不受滚动锁定影响 */
    :root[style*="--team-scroll-lock: lock"] .team-rankings-container .rank-table {
      overflow-y: visible !important;
      overflow-x: auto !important;
      height: auto !important;
      min-width: auto !important;
      width: 100% !important;
    }
    
    /* 确保表格内容在移动端正确显示 */
    :root[style*="--team-scroll-lock: lock"] .team-rankings-container .rank-table .table-header,
    :root[style*="--team-scroll-lock: lock"] .team-rankings-container .rank-table .table-row {
      min-width: auto !important;
      width: 100% !important;
      overflow-x: visible !important;
      white-space: nowrap !important;
    }

    .individual-rankings-propagation {
      margin-top: -40px;
      padding-bottom: 10px;
      margin-bottom: 20px; /* 恢复为修改之前的间距 */
    }
      
    .individual-rankings {
      margin-top: 60px; /* 增加排名列表的顶部间距 */
    }
    
    /* 移动端战区排名容器位置调整 */
    .team-rankings {
      margin-top: 0; /* 确保与英雄排名区域在统一水平线 */
    }
    
    /* 英雄排名容器设置 - 根据配置决定显示行数和滚动行为 */
    .individual-rankings-container .rank-table {
      position: relative;
      min-height: auto;
      /* 移动端强制显示所有行，覆盖JS动态设置的CSS变量 */
      height: auto !important;
      max-height: none !important;
      overflow-y: visible !important;
      overflow-x: auto !important;
      /* 隐藏滚动条 */
      -ms-overflow-style: none;
      scrollbar-width: none;
      /* 强制覆盖CSS变量 */
      --individual-default-height: auto !important;
      --individual-overflow-y: visible !important;
      --individual-overflow-x: auto !important;
    }
    
    /* 移动端英雄排名显示所有内容，不受滚动锁定影响 */
    :root[style*="--individual-scroll-lock: lock"] .individual-rankings-container .rank-table {
      overflow-y: visible !important;
      overflow-x: auto !important;
      height: auto !important;
      min-width: auto !important;
      width: 100% !important;
    }
    
    /* 确保表格内容在移动端正确显示 */
    :root[style*="--individual-scroll-lock: lock"] .individual-rankings-container .rank-table .table-header,
    :root[style*="--individual-scroll-lock: lock"] .individual-rankings-container .rank-table .table-row {
      min-width: auto !important;
      width: 100% !important;
      overflow-x: visible !important;
      white-space: nowrap !important;
    }
    
    /* 移动端非前三名字体放大 */
    .team-rankings-container .table-row:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)),
    .individual-rankings-container .table-row:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)) {
      font-size: 1.1rem;
    }
    
    /* 移动端名次列水平垂直居中 */
    .team-rankings-container .table-header > :first-child,
    .individual-rankings-container .table-header > :first-child,
    .team-rankings-container .table-row > :first-child,
    .individual-rankings-container .table-row > :first-child {
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
    
    /* 确保前三名特殊样式在移动端正确显示 */
  .team-rankings-container .table-row.top-three,
  .individual-rankings-container .table-row.top-three {
    transform: scale(1);
    box-shadow: none;
    position: static;
  }
  
  .team-rankings-container .table-row:nth-child(1),
  .team-rankings-container .table-row:nth-child(2),
  .team-rankings-container .table-row:nth-child(3),
  .individual-rankings-container .table-row:nth-child(1),
  .individual-rankings-container .table-row:nth-child(2),
  .individual-rankings-container .table-row:nth-child(3) {
    box-shadow: none;
    z-index: 1;
  }
  
  /* 当设置为禁止滚动时，确保战区排名容器不允许滚动 */
  :root[style*="--team-scroll-lock: lock"] .team-rankings-container {
    overflow: visible !important;
    height: auto !important;
  }
  
  :root[style*="--team-scroll-lock: lock"] .team-rankings-container .rank-table {
    overflow: hidden !important;
    display: block;
    min-width: auto !important;
    width: 100% !important;
  }
  
  /* 确保表格头部和行在禁止滚动模式下能够完整显示内容 */
  :root[style*="--team-scroll-lock: lock"] .team-rankings-container .table-header,
  :root[style*="--team-scroll-lock: lock"] .team-rankings-container .table-row {
    min-width: auto !important;
    width: 100% !important;
    overflow-x: visible !important;
    white-space: normal !important;
  }
  
  /* 英雄排名列表隐藏水平滚动条 */
  .individual-rankings-container .rank-table::-webkit-scrollbar {
    width: 6px; /* 保留垂直滚动条 */
    height: 0; /* 隐藏水平滚动条 */
  }

  /* 移除原有卡片背景，让内容在背景图上显示 */
  .card-game {
    background: transparent;
    box-shadow: none;
  }

  /* 主题部分调整 */
  .theme-section {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .banner-image {
    width: 100%;
    height: auto;
  }



  /* 2. 倒计时模块调整 - 移至冠军战区上方，缩小时间显示为一行 */
  .timer-float {
    position: relative;
    right: auto;
    top: auto;
    margin: 10px auto;
    width: 95%;
    padding: 8px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    text-align: center;
  }

  .timer-float .label {
    font-size: 0.9rem;
    display: block;
    margin-bottom: 5px;
  }

  .countdown {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
  }

  .time-item {
    font-size: 0.85rem;
    padding: 4px 6px;
    background: rgba(255, 215, 0, 0.2);
    border-radius: 4px;
    border: 1px solid rgba(255, 215, 0, 0.5);
  }

  /* 任务设置调整 */
  .task-settings-section {
    margin-top: -100px;
    /* 调整负边距 */
  }

  .task-title-container {
    padding: 15px;
  }

  .task-title-container .game-title {
    font-size: 1.6rem;
  }

  .task-title-container .game-title-highlight {
    font-size: 2rem;
  }

  .task-title-container .game-subtitle {
    font-size: 1rem;
  }

  /* 排名部分调整 */
  .rankings-section {
    margin: 0 10px 20px 10px;
  }

  .rankings-container {
    flex-direction: column;
    gap: 10px;
  }

  .individual-rankings,
  .team-rankings {
    min-width: auto;
    width: 100%;
    /* 调整顺序，确保倒计时在冠军上方 */
    display: flex;
    flex-direction: column;
  }

  /* 将倒计时移动到冠军上方的位置 */
  .team-rankings {
    order: -1;
  }

  .team-rankings-container,
  .individual-rankings-container {
    padding: 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.95);
  }
  
  /* 当设置为禁止滚动时，确保战区排名容器不允许滚动 */
  :root[style*="--team-scroll-lock: lock"] .team-rankings-container {
    overflow: visible !important;
    height: auto !important;
  }
  
  :root[style*="--team-scroll-lock: lock"] .team-rankings-container .rank-table {
    overflow: hidden !important;
    white-space: nowrap;
    display: block;
  }

  /* 表格调整 */
  .rank-table {
    min-height: 250px;
    /* 移除最大高度限制，允许显示所有行 */
    overflow-x: hidden;
    /* 禁止横向滚动 */
    overflow-y: auto;
    /* 允许纵向滚动 */
    /* 隐藏移动端滚动条 */
    -ms-overflow-style: none;
    scrollbar-width: none;
    display: flex;
    flex-direction: column;
  }
  
  /* 隐藏WebKit浏览器移动端滚动条 */
  .rank-table::-webkit-scrollbar {
    display: none;
  }
  
  /* 英雄排名列表设置 - 根据配置决定显示行数和滚动行为 */
    .individual-rankings-container .rank-table {
      overflow-x: hidden !important;
      /* 禁止横向滚动 */
      height: var(--individual-default-height, auto) !important;
      overflow-y: var(--individual-overflow-y, auto) !important;
      /* 确保英雄排名列表隐藏滚动条 */
      -ms-overflow-style: none;
      scrollbar-width: none;
      display: flex;
      flex-direction: column;
    }
    
    /* 当设置了滚动锁定时，禁止所有滚动 */
    :root[style*="--individual-scroll-lock: lock"] .individual-rankings-container {
      overflow: visible !important;
      height: auto !important;
    }
    
    :root[style*="--individual-scroll-lock: lock"] .individual-rankings-container .rank-table {
      overflow: hidden !important;
      white-space: nowrap;
      display: block;
    }
  
  .individual-rankings-container .rank-table::-webkit-scrollbar {
    display: none;
  }

  .table-header {
    font-size: 1rem;
    padding: 8px 6px;
    min-width: 500px;
    /* 固定表头，防止滚动时移动 */
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.95);
  }

  .table-row {
    font-size: 0.9rem;
    padding: 8px 6px;
    min-width: 500px;
    /* 确保行内容不会被截断 */
    overflow: visible;
  }

  /* 冠军部分调整 */
  .team-champion,
  .individual-champion {
    margin: 5px 0;
  }

  /* 管理员入口调整 */
  .admin-entry-float {
    position: relative;
    top: auto;
    right: auto;
    margin: 10px;
    text-align: center;
  }

  .btn-game-secondary {
    padding: 10px 15px;
    font-size: 0.9rem;
  }

  /* 3. 奖金模块调整 - 移至底部显示 */
  .bonus-section {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;
    padding: 10px;
    z-index: 1000;
    transform: translateY(0);
    transition: transform 0.3s ease;
    box-shadow: none;
  }

  .bonus-awards-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .award-image {
    height: 120px;
    width: auto;
  }

  /* 确保重要内容优先显示 */
  .rank-col,
  .name-col,
  .score-col {
    font-weight: bold;
  }

  /* 为底部奖金模块留出空间 */
  .admin-entry-float {
    margin-bottom: 100px;
  }

  /* 针对极小屏幕的特殊处理 */
  @media (max-width: 480px) {
    .table-header {
      font-size: 0.9rem;
      padding: 8px 6px;
      min-width: 450px;
    }

    .table-row {
      min-width: 450px;
      font-size: 0.75rem;
      padding: 6px 4px;
    }

    .game-title {
      font-size: 1.4rem;
    }

    .game-title-highlight {
      font-size: 1.7rem;
    }

    .award-image {
      height: 120px;
    }

    .countdown {
      gap: 6px;
    }

    .time-item {
      font-size: 0.8rem;
      padding: 3px 5px;
    }
  }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {

  /* 增大点击区域 */
  .btn-game-secondary {
    padding: 12px 24px;
    font-size: 1rem;
  }

  /* 移除hover效果，添加触摸反馈 */
  .table-row:active {
    background-color: rgba(255, 255, 255, 0.95);
    transform: scale(1.01);
  }

  .btn-game-secondary:active {
    transform: scale(0.98);
  }
}

/* 响应式设计，1200px以上显示 */
@media (min-width: 1920px) {
  .bonus-section {
    top: 360px;
    left: 320px;
  }
}


@media (min-width: 2000px) {
  .bonus-section {
    position: fixed;
    top: 360px;
    left: 720px;
    z-index: 9999; /* 设置最高层级，确保在最上层显示 */
    cursor: move;
    transition: transform 0.2s ease;
  }
}
.team-rankings-container .rank-table {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}
.team-rankings-container .rank-table::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
}
</style>