/* ===== 基础工具样式 ===== */
    .content-auto { content-visibility: auto; }
    .text-shadow { text-shadow: 0 2px 6px rgba(0,0,0,0.5); }
    .hover-scale { transition: transform 0.3s ease; }
    .hover-scale:hover { transform: scale(1.03); }
    .bg-mask { background-color: rgba(0,0,0,0.65); }

    /* ===== 积分榜背景（单独写，不影响 hero） ===== */
	.rank-bg {
	  position: relative; /* 新增：给伪元素提供定位基准 */
	  background-image: url('../images/bg/bg1.jpg');
	  background-position: center;
	  background-size: cover;
	  background-repeat: no-repeat;
	}

	/* 底部100px渐变到黑色的遮罩 */
	.rank-bg::after {
	  content: '';
	  position: absolute;
	  left: 0;
	  bottom: 0;
	  width: 100%;
	  height: 200px; /* 渐变区域高度，可自行调整 */
	  /* 从底部纯黑色，向上渐变到完全透明 */
	  background: linear-gradient(to top, #000000, transparent);
	  pointer-events: none; /* 关键：不遮挡元素内部的按钮/链接点击 */
	}
	/* 移动端适配：屏幕宽度 ≤768px 时生效 */
  @media (max-width: 480px) {
  .rank-bg {
    background: none !important; /* 彻底清除所有背景 */
  }
  .rank-bg::after {
    display: none !important; /* 隐藏渐变遮罩 */
  }
}

    /* ===== Hero 轮播区域 ===== */
    #hero {
      position: relative;
      height: 560px;           /* 手机端 - 确保文字和按钮完整显示 */
      overflow: hidden;
    }

    @media (min-width: 768px) {
      #hero { height: 600px; }  /* 平板 */
    }

    @media (min-width: 1024px) {
      #hero { height: 900px; }  /* 桌面端 - 沉浸式巨幅轮播 */
    }

    /* 每张幻灯片：绝对定位铺满，默认隐藏 */
    .slide {
      position: absolute;
      inset: 0;
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      opacity: 0;
      transition: opacity 0.8s ease-in-out;
      pointer-events: none;
      overflow: hidden;
    }

    /* 桌面端：允许右侧图片向上溢出 slide 顶部 */
    @media (min-width: 1024px) {
      .slide {
        overflow: visible;
      }
      /* 保留遮罩层的裁剪效果 */
      .slide::after {
        pointer-events: none;
      }
    }

    /* 激活的幻灯片 */
    .slide.active {
      opacity: 1;
      pointer-events: auto;
    }

    /* 遮罩层（每张幻灯片都有） */
    .slide::after {
      content: '';
      position: absolute;
      inset: 0;
      background-color: rgba(0, 0, 0, 0.60);
    }

    /* 内容层（在遮罩之上） */
    .slide-content {
      position: absolute;
      inset: 0;
      z-index: 2;
      display: flex;
      align-items: center;      /* 文字居中，900px大轮播下更协调 */
    }

    /* 轮播指示器（点） */
    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: rgba(255,255,255,0.45);
      border: none;
      cursor: pointer;
      transition: background-color 0.3s, transform 0.3s;
      padding: 0;
    }
    .dot.active {
      background-color: #ffffff;
      transform: scale(1.25);
    }

    /* 左右箭头 */
    .hero-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10;
      background: rgba(255,255,255,0.15);
      border: none;
      color: white;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      font-size: 18px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s;
    }
    .hero-arrow:hover {
      background: rgba(255,255,255,0.30);
    }
    .hero-arrow.prev { left: 16px; }
    .hero-arrow.next { right: 16px; }

        
/* Hero 轮播右侧图片区域样式 */
.hero-image-box {
  position: relative;
  overflow: hidden;
  animation: fadeInUp 0.8s ease-out;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.hero-image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.hero-image-box:hover img {
  transform: scale(1.03);
}

/* ✅ 桌面端：图片区域独立于 flex 流，使用绝对定位 */
@media (min-width: 1024px) {
  .hero-image-wrapper {
    position: absolute;
    right: 1%;

    width: 44%;
    display: flex;
    justify-content: center;
    padding: 0;
    z-index: 5;
    pointer-events: none;
  }
  .hero-image-wrapper .hero-image-box {
    width: 100%;
    height: 800px;
	top:80px;
    overflow: hidden;
    box-shadow: none;
  }
  .hero-image-wrapper .hero-image-box img {
    object-position: center top;
  }
  /* 左侧文字区域 */
  .hero-text-area {
    padding-right: 0;
    max-width: 58%;
  }
}

/* ✅ 平板端：回归 flex 布局，图片在右侧自然排列 */
@media (max-width: 1023px) and (min-width: 768px) {
  .hero-image-wrapper {
    position: relative;
    z-index: 5;
  }
  .hero-image-wrapper .hero-image-box {
    height: 380px;
    max-height: 450px;
  }
}

/* ✅ 移动端自动隐藏（767px 以下不显示） */
@media (max-width: 767px) {
  .hero-image-box {
    display: none !important;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
        /* ===== 直播播放器区域 ===== */
    .player-wrapper {
      position: relative;
      width: 100%;
      background: #000;
      /* 移除 overflow:hidden，避免裁切 iframe 内部的播放控制条和比赛切换栏 */
    }
    /*
      官方直播页面实际有三层：
        1. 16:9 视频画面
        2. 播放控制条（~55px）
        3. 底部比赛切换 Tab 栏（球队名 + VS，~110px）
      因此需要预留 165px+ 才能完整显示
    */
    .player-aspect {
      position: relative;
      width: 100%;
      /* 移动端：视频高度(56.25vw) + 200px（播放控制条~55px + 比赛切换Tab栏~145px） */
      height: calc(56.25vw + 200px);
      min-height: 500px;
    }
    .player-aspect iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: none;
      display: block;
    }
    /* 桌面端：限最大合理高度，视频 + 控制条 + 比赛切换栏都可见 */
    @media (min-width: 1024px) {
      .player-aspect {
        /* 容器宽度约为视口 60%（减去侧边栏），视频高 = 60vw×56.25% + 200px */
        height: calc(60vw * 0.5625 + 200px);
        max-height: 90vh;
        min-height: 600px;
      }
    }

    /* ===== 首页赛事直播全屏沉浸式播放器 ===== */
    .live-player-immersive {
      position: relative;
      width: 100%;
      background: #000;
      /* 视频(100vw*0.5625) + 控制条(~55px) + 比赛切换栏(~145px) */
      height: calc(100vw * 0.5625 + 200px);
      min-height: 500px;
      max-height: calc(100vh - 56px);
    }
    .live-player-immersive iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: none;
      display: block;
    }
    /* 移动端：完整显示视频 + 控制条 + 比赛切换栏（默认不设 overflow）*/
    @media (min-width: 1024px) {
      /* PC 端：overflow:hidden 裁剪顶部 -80px 溢出（隐藏客户端条），300px 预留底部控制区 */
      .live-player-immersive {
        height: calc(100vw * 0.5625 + 300px);
        max-height: none;
        min-height: 650px;
        overflow: hidden;
      }
      .live-player-immersive iframe {
        /* 向上偏移 80px 隐藏顶部客户端条 → overflow:hidden 裁剪不溢出到上方轮播 */
        top: -65px;
        left: 0;
        width: 100%;
        height: calc(100% + 65px);
      }
    }
    @media (min-width: 1600px) {
      .live-player-immersive {
        /* 宽屏限制最大高度，避免视频过大 */
        max-height: 1200px;
      }
    }

    /* ===== 实时徽章动画 ===== */
    .live-dot {
      width: 8px; height: 8px;
      background: #ef4444;
      border-radius: 50%;
      flex-shrink: 0;
      animation: livePulse 1.4s infinite;
    }
    @keyframes livePulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.6); }
      50%       { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
    }

    /* ===== 侧边信息面板滚动 ===== */
    .sidebar-scroll {
      max-height: 420px;
      overflow-y: auto;
      scrollbar-width: thin;
      scrollbar-color: #0E7C3B #f1f1f1;
    }
    .sidebar-scroll::-webkit-scrollbar { width: 4px; }
    .sidebar-scroll::-webkit-scrollbar-thumb { background: #0E7C3B; border-radius: 4px; }

    /* ===== 视频源切换按钮 ===== */
    .source-btn {
      transition: all 0.2s;
    }
    .source-btn.active {
      background: #0E7C3B;
      color: #fff;
      border-color: #0E7C3B;
    }

    /* ===== 页脚顶部分隔线 ===== */
    .footer-divider { border-color: rgba(255,255,255,0.08); }