@charset "utf-8";
/* 战绩切换展示页样式 —— 3v3/5v5 模式 + 2024/2025/2026 年份 */
* { margin:0; padding:0; box-sizing:border-box; }

html,body {
  font-family:"Microsoft YaHei","PingFang SC","Helvetica Neue",Arial,sans-serif;
  color:#111;
}

body {
  min-height:100vh;
  background-color:#10131a;
  /* 用活动原始大背景 bg.jpg 做顶部装饰底，颜色统一收在上面 */
}

/* 顶部活动氛围头（挂载 bg.jpg 作为宽背景） */
.activity-head {
  width:100%;
  background:url(../image/bg.jpg) top center / cover no-repeat #10131a;
  /* 渐变把下方与深色内容衔接自然 */
}
.activity-head-inner {
  max-width:2560px;
  margin:0 auto;
  height:3200px;
  position:relative;
  /* 若需要在此叠加标题文字可放开下面的占位标题 */
}
.activity-title {
  position:absolute;
  left:24px; bottom:16px;
  color:#fff;
  font-size:30px;
  font-weight:700;
  letter-spacing:2px;
  text-shadow:0 2px 8px rgba(0,0,0,.55);
  -moz-user-select:none; -webkit-user-select:none; user-select:none;
}



* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  background: #1a1f2e;          /* 深色背景，可按你页面主题改 */
  color: #fff;
}

.activity-head-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px;
}

/* ===== 顶部赠送按钮区 ===== */
.bg {
  width:436px;
  height:130px;
  transition: opacity 0.25s;
  top:810px;
  left:98px;
}

.stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 10px 0 20px;
}

.stage #modeImg {
  width: 120px;
  height: 120px;
  object-fit: contain;
}

/* ===== 模式按钮组（图片按钮）3v3 / 5v5 =====
   #grp-mode 与 #grp-mode2 现在是【平级兄弟】节点，不再互相嵌套。
   两者的定位基准都是 .activity-head-inner（.stage / .bg 都是 static）：
   #grp-mode  左边缘 98px
   #grp-mode2 左边缘 538px = 98 + 440，与原来嵌在 #grp-mode 里时的横向间距完全一致 */
#grp-mode,
#grp-mode2 {
  position: absolute;
  top: 800px;
}
#grp-mode  { left:  98px; }
#grp-mode2 { left: 538px; }

#grp-mode .tabbtn,
#grp-mode2 .tabbtn {
  cursor: pointer;
  border: 2px solid transparent;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 6px;
  transition: all 0.25s;
}

/* 3v3 / 5v5 两张图始终显示：opacity:1 常驻，
   不再出现“只有 hover / 选中才显形”的情况；
   选中状态由 .active 的底色高亮表示 */
#grp-mode .tabbtn img,
#grp-mode2 .tabbtn img {
  display: block;
  width: 436px;
  height: 130px;
  opacity: 0.5;
  transition: opacity 0.25s;
}

/* 选中时高亮（图片本身常显，这里只做底色提示） */
#grp-mode .tabbtn.active,
#grp-mode2 .tabbtn.active {
  background: rgba(255, 201, 66, 0.15);
}

#grp-mode .tabbtn.active img,
#grp-mode2 .tabbtn.active img {
  opacity: 1;
}

#grp-mode .tabbtn:hover img,
#grp-mode2 .tabbtn:hover img {
  opacity: 0.5;
}

/* ===== 年份按钮组（文字按钮） ===== */
#grp-year {
 top: 800px;             
  left: 98px;             
  width: 300px;            
  height: 80px;            
 padding: 930px  45px;
  display: flex;           
  gap: 0px;  
}

#grp-year .tabbtn {
 cursor: pointer;
 background: transparent;
  padding: 4px;
  /* 关键：<button> 的浏览器默认边框（就是那圈黑色细框）没被重置过，
     这里补上；用透明的 2px 边框占位，去掉后图片位置不会跳动 */
  border: 2px solid transparent;
  border-radius: 8px;
  transition: all 0.25s;
}

/* 当前模式下不存在的年份由 JS 加上 .is-hidden 隐藏（例：3v3 没有 2026），
   切回 5v5 时 JS 会去掉这个 class 自动恢复显示。
   用 display:none 彻底移出布局，后面的按钮不会留下空位 */
#grp-year .tabbtn.is-hidden {
  display: none;
}

#grp-year .tabbtn img {
  width: 145px;          
  height: 55px;
  display: block;
  opacity: 0.5;         
  transition: opacity 0.25s;
}

#grp-year .tabbtn.active {
  background: rgba(255, 201, 66, 0.2);  
  border-radius: 8px;
}

#grp-year .tabbtn.active img {
  width:145px;          /* 统一图片尺寸 */
  height: 55px;
  display: block;
  opacity: 1;          /* 未选中半透明 */
  transition: opacity 0.25s;
}

#grp-year .tabbtn:hover img {
  width: 145px;          /* 统一图片尺寸 */
  height: 55px;
  display: block;
  opacity: 1;          /* 未选中半透明 */
  transition: opacity 0.25s;
}

.now-caption {
  margin: 20px 0 12px;
  display: flex;
  align-items: center;
}

.now-tag {
  display: inline-block;
  width: 6px;
  height: 18px;
  background: #ffc942;
  border-radius: 3px;
}

.table-holder {
  padding: 10px;
  overflow: hidden;
}

.table-holder img {
background:url; width:760px; height:1973px; position:absolute; top:1070px; left:98px;
}