@charset "utf-8";
@font-face {
  font-family: "SourceHanSerifCN-Heavy-Subset";
  src: url("../img/SourceHanSerifCN-Heavy-subset.ttf") format("truetype");
  unicode-range: U+002B, U+0030-0039, U+4E00, U+4E09, U+4E0E, U+4E14, U+4E66, U+4E8C, U+4E91, U+4E94, U+4EF6, U+4EFB, U+4F7F, U+500D, U+5143, U+5165, U+5168, U+5173, U+5177, U+51B2, U+5230, U+526F, U+529B, U+529F, U+52B1, U+5305, U+5316, U+5341, U+5347, U+534E, U+5373, U+53C2, U+53CC, U+53D6, U+53EF, U+540D, U+542F, U+5446, U+548C, U+54C1, U+54DE, U+56DB, U+5750, U+57CE, U+5929, U+5956, U+5B9D, U+5C42, U+5C71, U+5DF2, U+5E2E, U+5F00, U+5F3A, U+5F97, U+610F, U+6216, U+6218, U+63D0, U+653E, U+6570, U+65E0, U+65E5, U+661F, U+6708, U+672C, U+679A, U+699C, U+6A59, U+6B21, U+6B66, U+6BCF, U+6D77, U+7075, U+7528, U+767B, U+771F, U+77F3, U+793C, U+795E, U+7ADE, U+7B2C, U+7B49, U+7BB1, U+7D20, U+7D2B, U+7D2F, U+7EA7, U+7EB9, U+7ECF, U+7FFB, U+805A, U+81F3, U+8272, U+83B7, U+84DD, U+88C5, U+88F3, U+89C2, U+89D2, U+8BA1, U+8BC4, U+8C37, U+8D21, U+8D28, U+8DEF, U+8EAB, U+8FBE, U+901A, U+91CF, U+9632, U+9636, U+9646, U+96D5, U+9886, U+9A6C, U+9A8C, U+9A91, U+9B42, U+9F0E, U+FF08-FF09, U+FF0C, U+FF1A;
}
@font-face {
  font-family: "SourceHanSerifCN-Bold-Subset";
  src: url("../img/SourceHanSerifCN-Bold-subset.ttf") format("truetype");
  unicode-range: U+002D-002E, U+0030-0039, U+4E00, U+4E03, U+4E07, U+4E09, U+4E16, U+4E45, U+4E5D, U+4E8C, U+4EEA, U+4EF7, U+503C, U+5143, U+5165, U+5168, U+516B, U+516D, U+5212, U+52A0-52A1, U+5305, U+5341, U+5343, U+5347, U+5355, U+53CC, U+53F7, U+540D, U+5546, U+5578, U+5668, U+56DB, U+56DE, U+575B, U+57CE, U+5854, U+5929, U+5956, U+5B9D, U+5BAB, U+5DE1, U+5FA1, U+6218, U+6276, U+6301, U+64BC, U+65E0, U+65E5, U+661F, U+670D, U+6781, U+6807, U+699C, U+6B21, U+6BB5, U+6BBF, U+6BCF, U+6C38, U+6D3B, U+6D77, U+6E0A, U+767E, U+76EE, U+793C, U+79F0, U+7B2C, U+7EA7, U+81F3, U+8272, U+82CD, U+8352, U+866C, U+89D2, U+8BA1, U+8D4F, U+8DC3, U+8FD4, U+8FDB, U+901F, U+90E8, U+91CF, U+957F, U+9601, U+9636, U+964D, U+9650, U+9707, U+9752, U+9876, U+9886, U+9A6C, U+9F99;
}
@font-face {
  font-family: "SourceHanSansCN-Medium-Subset";
  src: url("../img/SourceHanSansCN-Medium-subset.ttf") format("truetype");
  unicode-range: U+0028-002A, U+0030-0035, U+003A, U+00B7, U+3010-3011, U+4E45, U+4ED9, U+4FA3, U+5143, U+517D, U+51E4, U+541B, U+5750, U+5929, U+5F71, U+60C5, U+65E0, U+65F6, U+6708, U+67D3, U+683C, U+6850, U+68A7, U+6A59, U+6C38, U+6D77, U+6E05, U+7075, U+72D0, U+73CD, U+76D2, U+76F8, U+77F3, U+793C, U+7B26, U+7B3C, U+7D2B, U+7EA7, U+7F18, U+88C5, U+8986, U+8D85, U+9189, U+91D1, U+94F8, U+971C, U+98CE, U+98DE, U+9A6C, U+9A91, U+9E3F, U+9ED1, U+9F99, U+FF1A;
}
@font-face {
  font-family: "SourceHanSerifCN-Medium-Subset";
  src: url("../img/SourceHanSerifCN-Medium-subset.ttf") format("truetype");
  unicode-range: U+0028-002A, U+002D-002E, U+0030-003A, U+0078, U+00B7, U+3001, U+4E03, U+4E07, U+4E0A, U+4E1D, U+4E39, U+4E45, U+4E5D, U+4E89, U+4E94, U+4EAB, U+4EBF, U+4ED9, U+4EE4, U+4EF6, U+4F53, U+4FA0, U+4FA3, U+5143, U+5148, U+5151, U+516B, U+516D, U+5175, U+5178, U+51B0, U+51C6, U+5229, U+5230, U+5238, U+524D, U+529B, U+529F, U+52CB, U+52FE, U+5305, U+5323, U+5343, U+5370, U+53F7, U+540D, U+54C1, U+5524, U+5578, U+5668, U+56DE, U+56FE, U+5730, U+5750, U+575B, U+5854, U+58EB, U+5927, U+5929, U+5B9D, U+5BAB, U+5BB6, U+5C0A, U+5C5E, U+5C71, U+5DFE, U+5E03, U+5E16, U+5E3C, U+5E7B, U+5F55, U+5F69, U+5F85, U+5FA1, U+5FAE, U+5FC3, U+6027, U+609F, U+60C5, U+6218, U+622A, U+6240, U+62EC, U+6362, U+653B, U+65E5, U+65F6, U+661F, U+6656, U+6676, U+6700, U+6708-6709, U+670D, U+671F, U+672C, U+673A, U+6761, U+6781, U+6807, U+683C, U+68C9, U+6905, U+699C, U+6A59, U+6B66, U+6B8B, U+6BBF, U+6C38, U+6CB3, U+6CC9, U+6CD5, U+6CE8, U+6D46, U+6D51, U+6DA6, U+6DB2, U+6DB5, U+6DEC, U+6EE1, U+706B, U+7075, U+70B9, U+7247, U+7269, U+7384, U+7389, U+73A9, U+73CD, U+73E0, U+749E, U+767E, U+7684, U+76D2, U+76EE, U+76F8, U+771F, U+77F3, U+788E, U+793C, U+795E, U+79BB, U+79D8, U+79F0, U+7AE0, U+7B26, U+7B49, U+7BB1, U+7C4D, U+7CBE, U+7D2B, U+7EA2, U+7EA7, U+7ECF, U+7EF6, U+7F18, U+7F3A, U+7FE0-7FE1, U+81F3, U+826F, U+8272, U+8282, U+82F1, U+8352, U+84DD, U+8695, U+86CB, U+884C, U+88C5, U+89E3, U+8BC0, U+8C6A, U+8D4F-8D50, U+8DB3, U+8F7B, U+8FBE, U+8FD8, U+9009, U+91CA, U+91D1, U+94C1, U+94F6, U+94F8, U+950B, U+9526, U+95F4, U+9601, U+9633, U+9636, U+968F, U+96C6, U+9752, U+98CE, U+98DE, U+9A8C, U+9A91, U+9AD8, U+9B42, U+9B44, U+9E21, U+9F99, U+FF08-FF09, U+FF1A;
}
@font-face {
  font-family: "SourceHanSansCN-Regular-subset";
  src: url("../img/SourceHanSansCN-Regular-subset.ttf") format("truetype");
  unicode-range: U+0028, U+002A-002B, U+002D, U+0030-0039, U+003C, U+003E, U+0057, U+00B7, U+201C-201D, U+3001-3002, U+3010-3011, U+4E00, U+4E07, U+4E09-4E0B, U+4E0D-4E0E, U+4E24, U+4E2A, U+4E2D, U+4E39-4E3A, U+4E66, U+4E70, U+4E7E, U+4E8C, U+4E94, U+4EA6, U+4EAB, U+4EC5, U+4ED1, U+4EE4-4EE5, U+4EEA, U+4EF6-4EF7, U+4EFB, U+4F1A, U+4F34, U+4F53, U+4F5C, U+4F60, U+4F7F, U+4FA0, U+500D, U+503C, U+5143, U+5148, U+514D, U+5151, U+5165, U+5168, U+516D, U+5173, U+5175, U+5177-5178, U+517B, U+5185, U+51B0, U+51B3, U+51C6, U+51FB, U+5203, U+5206, U+5212, U+5219, U+521B, U+521D, U+522B, U+5230, U+5236, U+5238, U+524D, U+526F, U+529B, U+529F-52A1, U+52A8, U+52B1, U+52CB, U+52FE, U+5305, U+5316, U+5323, U+533A, U+5341, U+5343, U+5347, U+534E, U+5355, U+5361, U+5370, U+5373, U+5386, U+53C2, U+53CC, U+53D1, U+53D6-53D7, U+53EF, U+53F2, U+5404, U+540D-540E, U+5446, U+5468, U+548C, U+54C1, U+54DE, U+5524, U+5546, U+5609, U+5668, U+56DB, U+56DE, U+56F4, U+56FE, U+5728, U+5747, U+5750, U+5764, U+57CE, U+5904, U+5907, U+5916, U+591A, U+5927, U+5929, U+5956, U+5973, U+597D, U+5B50, U+5B8C, U+5B9A, U+5B9D, U+5BB6, U+5BB9, U+5BF9, U+5BFC, U+5C06, U+5C0F, U+5C11, U+5C55, U+5C71, U+5D4C, U+5DE5, U+5DF2, U+5E03, U+5E2E, U+5E74, U+5E76, U+5E8F, U+5E94, U+5EA6, U+5EFA, U+5F00, U+5F15, U+5F3A, U+5F53, U+5F55, U+5F69, U+5F97, U+5FA1, U+5FAE, U+5FC3, U+6027, U+603B, U+609F, U+60C5, U+610F, U+620F-6210, U+6216, U+6218, U+622A, U+6240, U+624B, U+6253, U+6276, U+628A, U+62BD, U+62EC, U+62FF, U+6301, U+6307, U+6309, U+6362, U+636E, U+6392, U+63D0, U+653E, U+65B0, U+65E0, U+65E5, U+65F6, U+6606, U+660E, U+661F, U+6676, U+6697, U+66F4, U+6700, U+6708-6709, U+670D, U+671F, U+672C, U+673A, U+675F, U+6761, U+6765, U+67B6, U+67E5, U+6807, U+6839, U+6843, U+68C9, U+699C, U+6A59, U+6B21, U+6B62, U+6B64, U+6B66, U+6B8B, U+6BB5, U+6BCF, U+6C42, U+6C5F, U+6CC9, U+6CD5, U+6CE8, U+6D3B, U+6D3E, U+6D51, U+6D77, U+6DA6, U+6DB2, U+6DB5, U+6DEC, U+6E38, U+6E90, U+6EE1, U+6FC0, U+706B, U+7075, U+70B9, U+7167, U+724C, U+7269, U+7279, U+72EC, U+7384, U+7389, U+73A9, U+73C0, U+73CD, U+73E0, U+7422, U+749E, U+7528, U+767B, U+7684, U+76EE, U+76F8, U+770B, U+771F, U+77F3, U+7802, U+7834, U+793A, U+793C, U+795E, U+79CD, U+79D8, U+79EF, U+7A00, U+7AE0, U+7B26, U+7B49, U+7BAD, U+7BB1, U+7C4D, U+7C7B, U+7CBE, U+7D20, U+7D2B, U+7D2F, U+7EA6-7EA7, U+7ECF, U+7ED3, U+7EED, U+7FE0-7FE1, U+7FFB, U+8003, U+805A, U+80FD, U+81EA, U+81F3, U+826F, U+8272, U+82B1, U+82F1, U+8303, U+8352, U+83B7, U+884C, U+88C5, U+8981, U+89C2, U+89C4, U+89C9, U+89D2, U+89E3, U+8BA1, U+8BBE, U+8BC0, U+8BC4, U+8BE6, U+8BF4, U+8BF7, U+8C37, U+8C6A, U+8D1F, U+8D21, U+8D28, U+8D2D, U+8D39, U+8D4F-8D50, U+8DC3, U+8DEF, U+8F7B, U+8FB0, U+8FBE, U+8FD8, U+8FDB, U+9009, U+901A, U+901F-9020, U+9022, U+9053, U+90E8, U+91CF, U+91D1, U+94C1, U+94DC, U+94F6, U+94F8, U+9576, U+95E8, U+95F4, U+9632, U+9635-9636, U+9650, U+9664, U+968F, U+96BE, U+96C6, U+9700, U+9732, U+9762, U+987A, U+9886, U+9A8C, U+9A91, U+9AD8, U+9B42, U+9B44, U+9F99, U+FF01, U+FF08-FF09, U+FF0C, U+FF1A-FF1B;
}
@font-face {
  font-family: "SourceHanSerifCN-SemiBold-Subset";
  src: url("../img/SourceHanSerifCN-SemiBold-subset.ttf") format("truetype");
  unicode-range: U+002A, U+0030-0036, U+0039, U+0057, U+3001-3002, U+4E0D, U+4E24, U+4E2A, U+4E39, U+4ED1, U+500D, U+503C, U+5165, U+516B, U+5185, U+529B, U+529F-52A0, U+5361, U+53CC, U+53D6, U+53EF, U+540E, U+5468, U+5728, U+590D, U+5916, U+591A, U+5927, U+5929, U+5C06, U+5F00, U+5F97, U+6062, U+6301, U+653E, U+65B0, U+65E5, U+65F6, U+6606, U+66F4, U+6700, U+6708, U+670D, U+6B21, U+6B64, U+6BCF, U+7075, U+70B9, U+767B, U+7684, U+7B2C, U+7EA7, U+7ECF, U+7EED, U+81F3, U+8272, U+83B7, U+89D2, U+8D77, U+8FD8, U+95F4, U+9646, U+9886, U+989D, U+9996, U+9A8C, U+FF08-FF09, U+FF0C, U+FF1A;
}
@font-face {
  font-family: "SourceHanSerifCN-Regular-Subset";
  src: url("../img/SourceHanSerifCN-Regular-subset.ttf") format("truetype");
  unicode-range: U+0026, U+002E, U+0030-0039, U+3001-3002, U+4E00, U+4E03, U+4E07, U+4E0A, U+4E2D, U+4E8E, U+4E91, U+4EAB, U+4EBF, U+4EC5, U+4EEA, U+4EF7, U+4F18, U+503C, U+5148, U+516B-516D, U+5230, U+524D, U+52B1, U+5348, U+5355, U+5361, U+53CA, U+53D6, U+540C-540D, U+575B, U+5956, U+5B8C, U+5B9E, U+5C06, U+5E38, U+5E8F, U+5F00, U+5FA1, U+5FC3, U+6210, U+622A, U+6309, U+636E, U+6392, U+653E, U+6570, U+65B0, U+65E5, U+65F6, U+660E, U+661F, U+66F4, U+6700, U+6708, U+670D, U+672C, U+6781, U+6807, U+699C, U+6B21, U+6B62, U+6BBF, U+6BCF, U+6CD5, U+70B9, U+7167, U+7684, U+76EE, U+76F8, U+793A, U+7ADE, U+7B49, U+7EA7, U+7ECF, U+82E5, U+89C4, U+8BF4, U+8BF7, U+8D4F, U+8D77, U+8F7B, U+8FBE, U+95F4, U+9601, U+9636, U+975E, U+9886, U+9A8C, U+FF08-FF09, U+FF0C, U+FF1A-FF1B;
}
.font-serif-regular {
  font-family: "SourceHanSerifCN-Regular-Subset";
}
.font-serif-heavy {
  font-family: "SourceHanSerifCN-Heavy-Subset";
  user-select: none;
}
.font-serif-bold {
  font-family: "SourceHanSerifCN-Bold-Subset";
  user-select: none;
}
.font-sans-medium {
  font-family: "SourceHanSansCN-Medium-Subset";
  user-select: none;
}
.font-sans-regular {
  font-family: "SourceHanSansCN-Regular-Subset";
  user-select: none;
}
.font-serif-medium {
  font-family: "SourceHanSerifCN-Medium-Subset";
}
.font-serif-semibold {
  font-family: "SourceHanSerifCN-SemiBold-Subset";
}
.nowrap {
  white-space: nowrap;
}
.text-gold {
  background: linear-gradient(to bottom, #ffffff, #ffecc1);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.text-blue {
  background: linear-gradient(to bottom, #ffffff, #bdc2ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* PC 1920 设计稿；全 px、无 rem、无 @media
   缩放靠 pc/index.shtml 的 elementFit()：zoom = 屏宽/1920 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  text-decoration: none;
  overflow: visible;
}
.none {
  display: none;
}
html,
body {
  width: 100%;
  height: 100%;
}
body {
  min-width: 1400px;
  width: 100%;
  overflow-x: hidden;
  background-color: #000;
  font-family: 'SimSun', 'Arial', sans-serif;
}
/* 高 = full-bg-part1(1080) + full-bg-part2(6584)，切图分界变了要同步改 */
.wrap {
  position: relative;
  min-width: 1400px;
  height: 7664px;
  overflow: hidden;
}
/* 1320 居中列，只给 .head 的主标题用 */
.bar {
  position: relative;
  width: 1320px;
  height: 100%;
  margin: 0 auto;
}
.text-center {
  text-align: center;
}
p > span.b {
  font-weight: bold;
}
.gold2 {
  color: #fff29c;
}
.side-column {
  position: fixed;
  z-index: 10;
  top: 50%;
  right: 24px;
  width: 155px;
  height: 338px;
  margin-top: -169px;
  /* 338 / 2 */
  background: url(../img/nav-bg.png) no-repeat;
}
.side-column ul {
  position: relative;
  width: 100%;
  height: 100%;
  /* 行盒高 39 = nav-hover.png 的高，文字用 line-height 在行内居中；
       top 是把文字墨迹对到原 nav 图的墨迹位置上实测的；nav5 有雪佛龙，文字要下移避让 */
}
.side-column ul li {
  position: absolute;
  left: 0;
  width: 100%;
  height: 39px;
  line-height: 39px;
  text-align: center;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  /* hover 光晕条 136x39，横向居中于 155 的面板；没做淡入（background-image 不能 transition） */
}
.side-column ul li:hover,
.side-column ul li.active {
  background-image: url(../img/nav-hover.png);
}
.side-column ul li.text {
  color: #5e7cbf;
  background-image: unset;
}
.side-column ul li.nav1 {
  top: 17px;
}
.side-column ul li.nav2 {
  top: 56px;
}
.side-column ul li.nav3 {
  top: 94px;
}
.side-column ul li.nav4 {
  top: 132px;
}
.side-column ul li.nav5 {
  top: 197px;
}
/* 头部：背景是切好的整图，视觉元素已烘进图里 */
.head {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 1080px;
  background: url(../img/full-bg-part1.jpg) 50% 0 no-repeat;
}
.head .logo {
  position: absolute;
  left: 50px;
  /* TODO 按设计稿量 */
  top: 40px;
  z-index: 2;
  width: 287px;
  height: 133px;
  background: url(../img/logo.png) no-repeat;
}
.head .logo a {
  display: block;
  width: 100%;
  height: 100%;
}
.head .title {
  position: absolute;
  left: 50%;
  top: 474px;
  margin-left: -665px;
  width: 1330px;
  height: 567px;
  background: url(../img/title-main.png) 50% 0 no-repeat;
  text-indent: -9999em;
  animation: sloganAni 0.4s 0s linear both;
}
.head .title-sub {
  position: absolute;
  left: 50%;
  top: 902px;
  margin-left: -323px;
  width: 647px;
  height: 72px;
  background: url(../img/title-sub.png) 50% 0 no-repeat;
  text-indent: -9999em;
}
/* 主标题入场：放大淡入 → 落定后小幅抖动（照 20241009 移植） */
@keyframes sloganAni {
  0% {
    transform: scale(1.8);
    opacity: 0;
  }
  60% {
    transform: scale(1);
    opacity: 1;
  }
  65% {
    transform: translate(-4px, -4px);
  }
  70% {
    transform: translate(0, 0);
  }
  75% {
    transform: translate(4px, 4px);
  }
  80% {
    transform: translate(0, 0);
  }
  85% {
    transform: translate(-4px, 4px);
  }
  90% {
    transform: translate(0, 0);
  }
  95% {
    transform: translate(4px, -4px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
/* 内容区：背景是一整张 1920x6584，紧接 head 底部。
   .part1 从 y=1120 开始而内容区从 1080 开始，差的 40 用 padding-top 补；
   ⚠️ 不能换成 .part1 的 margin-top —— 会和外层 margin 折叠，把背景图顶下去 40px */
.content {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding-top: 40px;
  background: url(../img/full-bg-part2.jpg) 50% 0 no-repeat;
  /* 版块标题公共部分，默认文字模式；出图后换图片模式（见 .part1 .sub-title） */
}
.content .sub-title {
  width: 100%;
  height: 121px;
  background-repeat: no-repeat;
  background-position: 50%;
  font-size: 48px;
  line-height: 121px;
  color: #ffe9a8;
  text-align: center;
}
/* 各屏满幅 1920，屏内坐标可直接写设计稿值（.partN 的 top = 设计稿 y − 屏起始 y）；
   起始位置/高度变了必须同步改（四屏和 6544 = 背景高 6584 − padding-top 40）：
     .part1 1120/1350  .part2 2470/2177  .part3 4647/1038  .part4 5685/1979 */
/* 通用 tab 单元（part1 / part2 / part4 共用）
   .tab-group > a ↔ .tab-content > .tab-li 按顺序一一对应，有几个 a 就有几个 .tab-li
   ⚠️ .tab-content 必须是 .tab-group 的兄弟节点 —— js/index.js 靠 siblings('.tab-content') 找容器
   位置（position / left / top / width）各版块不同，由 partN.less 给 */
.tab-content .tab-li {
  display: none;
}
.tab-content .tab-li.active {
  display: block;
}
.part1 {
  position: relative;
  width: 100%;
  height: 1350px;
  /* 两栏容器：左 682 表格 / 右 398+ 奖励，整体居中 */
  /* ---------- 左：榜单表格 ---------- */
  /* 表头：独立于滚动区，固定在表格框顶部（随表格一起「冻结」） */
  /* ---------- 未开榜态（.clothes-tab.tab-mask） ----------
     表头 .clothes-head 照常显示，只把内容区换成居中的「期待上榜」。
     盒子与 .table-scroll 同区域（left 14 / top 88 / 645×426），二者互斥显示。
     ⚠️ 两个坐标必须与 .table-scroll 保持一致，改了一处要同步改另一处。 */
  /* 表头 + 表体共用同一套列宽（两处都写 width/table-layout，保证列对齐） */
  /* 表头定位在表格框内区顶部（内蓝区 y16 起），底部一条分隔线 */
  /* ---------- 右：坐骑奖励 ---------- */
  /* 坐骑立绘（素材 471x370）：顶部与表格帧顶齐平略上 */
  /* 「呆呆哞飞椅」蓝色横幅（素材 293x61，底图不带文字，文字走 HTML） */
  /* 奖励面板（素材 398x218） */
  /* 表格下方提示（设计稿在表格外，靠左） */
}
.part1 .sub-title {
  height: 226px;
  background-image: url(../img/part1/part1-title.png);
  text-indent: -9999em;
}
.part1 .tab-group {
  position: absolute;
  left: 50%;
  top: 276px;
  margin-left: -350px;
  width: 700px;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 110px;
}
.part1 .tab-group a {
  outline: none;
  width: 269px;
  height: 65px;
  cursor: pointer;
  /* 精灵图 tab-btns.png 540x132（part1/part2 共用）：单元格 269x65，pitch 271x67（缝 2px）
         0:未激活-蓝浅(0 0)  1:未激活-蓝深(-271px 0)
         2:激活-红浅(0 -67px)  3:激活-红深(-271px -67px)
         映射：常规=蓝深 / hover=红浅 / active=红深（蓝浅备用）
         ⚠️ hover 规则统一写在 motion.less ①，优先级高于此处，不要在这里重复定义 */
  background: url(../img/tab-btns.png) -271px 0 no-repeat;
}
.part1 .tab-group a.active {
  background-position: -271px -67px;
}
.part1 .tab-group a h3 {
  font-size: 24px;
  line-height: 65px;
  text-align: center;
}
.part1 .tab-content {
  position: absolute;
  left: 50%;
  top: 387px;
  margin-left: -583px;
  /* 1165 / 2 取整，避免半像素导致精灵图发虚 */
  width: 1165px;
  /* 精灵图 198x976，单元格 98x487 */
  /* 展开面板：贴住 tag 右边，487 - 455 上下各留 16 */
}
.part1 .tab-content .tag-cont {
  width: 1165px;
  height: 487px;
  overflow: hidden;
}
.part1 .tab-content .tag-ul {
  display: flex;
}
.part1 .tab-content .tag-ul li {
  position: relative;
  width: 98px;
  height: 487px;
  cursor: pointer;
  transition: width 0.5s ease;
  /* .curr = 展开态；tag 本身没有选中态美术，后续出图在 .tag 上接 */
}
.part1 .tab-content .tag-ul li.curr {
  width: 871px;
  /* 98 + 773 */
}
.part1 .tab-content .tag-ul li.curr .tag-grade {
  width: 773px;
}
.part1 .tab-content .tag {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 98px;
  height: 487px;
  text-indent: -9999em;
  background: url(../img/part1/part1-tags-btns.png) no-repeat;
}
.part1 .tab-content .tag.tag1 {
  background-position: 0 0;
}
.part1 .tab-content .tag.tag2 {
  background-position: -100px 0;
}
.part1 .tab-content .tag.tag3 {
  background-position: 0 -489px;
}
.part1 .tab-content .tag.tag4 {
  background-position: -100px -489px;
}
.part1 .tab-content .tag-grade {
  position: absolute;
  left: 98px;
  top: 16px;
  z-index: 8;
  overflow: hidden;
  width: 0;
  height: 455px;
  transition: width 0.5s ease;
}
.part1 .tab-content .tag-grade img {
  display: block;
  width: 773px;
  /* 素材 773x455，1:1 */
  height: 455px;
}
.part1 .tab-content .desc-text {
  position: static;
  width: 964px;
  margin: 62px auto 0;
  color: #eaeaea;
  font-size: 20px;
  line-height: 36px;
}
.part1 .tab-content .desc-text span {
  font-weight: bold;
  color: #ffffff;
}
.part1 .tab-content .desc-text a {
  color: #ffda75;
  text-decoration: underline;
}
.part1 .tab-content .desc-text em {
  color: #ffda75;
}
.part1 .tab-content .desc-text.desc-text2 {
  position: static;
  margin: 0 auto;
  width: 1165px;
  color: #eaeaea;
  font-size: 20px;
  line-height: 36px;
}
.part1 .tab-content .desc-text.desc-text2 span {
  font-weight: bold;
  color: #ffffff;
}
.part1 .clothes-cont {
  display: flex;
  justify-content: center;
  margin: 24px auto 0;
  width: 1165px;
}
.part1 .clothes-tab {
  position: relative;
  box-sizing: border-box;
  /* 素材 part1-2-table-bg1.png 682x551 1:1；可见边框在 x6..676 / y7..543 */
  width: 682px;
  height: 551px;
  background: url(../img/part1/part1-2-table-bg1.png) no-repeat;
}
.part1 .table-scroll {
  position: absolute;
  left: 14px;
  top: 88px;
  box-sizing: border-box;
  width: 645px;
  height: 426px;
  overflow-y: auto;
  overflow-x: hidden;
  /* 蓝色系滚动条 */
}
.part1 .table-scroll::-webkit-scrollbar {
  width: 6px;
  background: rgba(160, 195, 245, 0.35);
}
.part1 .table-scroll::-webkit-scrollbar-thumb {
  background: #a9c8f0;
  border-radius: 3px;
}
.part1 .rank-empty {
  position: absolute;
  left: 14px;
  top: 88px;
  width: 645px;
  height: 426px;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 40px;
}
.part1 .clothes-tab.tab-mask .table-scroll {
  display: none;
}
.part1 .clothes-tab.tab-mask .rank-empty {
  display: flex;
}
.part1 .clothes-tab.tab-mask .rank-empty::after {
  content: '';
  width: 452px;
  height: 11px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url(../img/part1/dec.png) no-repeat;
}
.part1 .clothes-head,
.part1 .clothes-tab .table-scroll > table {
  width: 656px;
  border-collapse: collapse;
  table-layout: fixed;
  color: #fff;
}
.part1 .clothes-head th,
.part1 .clothes-tab .table-scroll > table th,
.part1 .clothes-head td,
.part1 .clothes-tab .table-scroll > table td {
  text-align: center;
  font-weight: normal;
  padding: 0;
  box-sizing: border-box;
}
.part1 .clothes-head .w-rank,
.part1 .clothes-tab .table-scroll > table .w-rank {
  width: 130px;
}
.part1 .clothes-head .w-server,
.part1 .clothes-tab .table-scroll > table .w-server {
  width: 198px;
}
.part1 .clothes-head .w-score,
.part1 .clothes-tab .table-scroll > table .w-score {
  width: 150px;
}
.part1 .clothes-head .w-role,
.part1 .clothes-tab .table-scroll > table .w-role {
  width: 178px;
}
.part1 .clothes-head {
  position: absolute;
  left: 14px;
  top: 16px;
  /* 每个 th 默认底部画满线 */
  /* 每行第一个 th：左侧内收 10px */
  /* 每行最后一个 th：右侧内收 10px */
}
.part1 .clothes-head th {
  height: 72px;
  font-size: 24px;
  line-height: 72px;
  color: #fff;
  border-bottom: none;
  position: relative;
}
.part1 .clothes-head th::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(235, 243, 255, 0.85);
  /* 边框颜色 */
}
.part1 .clothes-head tr > th:first-child::after {
  left: 30px;
}
.part1 .clothes-head tr > th:last-child::after {
  right: 30px;
}
.part1 .clothes-tab .table-scroll > table td {
  /* 排行榜内容用系统衬线（角色名是任意字，子集字体覆盖不到，统一交给系统衬线更整齐）；
         末尾 serif 兜底，系统无衬线时由浏览器默认字体接管 */
  font-family: "Songti SC", "STSong", "SimSun", "Noto Serif CJK SC", "Source Han Serif SC", serif;
  height: 58px;
  font-size: 20px;
  line-height: 58px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.part1 .clothes-rank {
  position: relative;
  width: 483px;
  height: 551px;
}
.part1 .rank-role {
  position: absolute;
  left: 50px;
  top: -24px;
  width: 471px;
  height: 370px;
  pointer-events: none;
}
.part1 .rank-role img {
  display: block;
  width: 471px;
  height: 370px;
}
.part1 .rank-role-title {
  position: absolute;
  left: 86px;
  top: 266px;
  padding-top: 5px;
  width: 293px;
  height: 61px;
  font-size: 26px;
  line-height: 61px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  background: url(../img/part1/part1-2-role-title-bg.png) no-repeat;
}
.part1 .rank-prize {
  position: absolute;
  left: 26px;
  top: 329px;
  width: 398px;
  height: 218px;
  background: url(../img/part1/part1-2-table-bg2.png) no-repeat;
}
.part1 .rank-ul {
  position: absolute;
  left: 0;
  top: 7px;
  width: 398px;
}
.part1 .rank-ul li {
  width: 398px;
  height: 66px;
  text-align: center;
}
.part1 .rank-ul .rank-badge {
  display: inline-block;
  height: 31px;
  font-size: 19px;
  line-height: 31px;
  color: #b62803;
  font-weight: bold;
  text-align: center;
}
.part1 .rank-ul .rank-badge.rank-badge1 {
  width: 109px;
  background: url(../img/part1/part1-2-title-bg1.png) no-repeat;
}
.part1 .rank-ul .rank-badge.rank-badge2 {
  width: 142px;
  background: url(../img/part1/part1-2-title-bg2.png) no-repeat;
}
.part1 .rank-ul p {
  margin-top: 2px;
  font-size: 20px;
  line-height: 28px;
  color: #fffef5;
}
.part1 .tab-content .table-tip {
  margin-left: 14px;
  width: 682px;
  font-size: 17px;
  line-height: 26px;
  color: #eaeaea;
}
.part2 {
  position: relative;
  width: 100%;
  height: 2113px;
  /* 版块标题（设计稿 y 2470），写法同 .part1 */
  /* 榜切换（设计稿 y 2758）：精灵图 540x65，单元格 269x65，未点击 0 0 / 点击 -271px 0 */
  /* 说明文案（设计稿 y 2881）；字号行高与 .part1 保持一致
     ⚠️ 已移入各 .tab-li 内部，改为普通流（不再绝对定位到 part2 上） */
  /* tab 内容容器（设计稿首条 y 3055）：定位在这层，.tab-li 的显隐在 tab.less
     容器宽 1052 = part2-rank-bar-dec.png 的宽度（即坠饰的最外沿）
     ⚠️ .desc-text 已移入 .tab-li 内部，容器上移到说明文案处（不再单独绝对定位） */
  /* 排名条：条高 283、块间距 40（pitch 323）
     前三条占满容器（卷轴图 985 居中，左右各余 33.5 给坠饰），
     第 4 行是两条半宽并排（485 x 2 + 82 = 1052） */
  /* 底图 985x283（坠饰已从图里拿掉），在 1052 的容器里居中 */
  /* 坠饰：只有第一条（第一名）有。dec 图 1052x211 正好等于容器宽，铺满即可
     top 是拿「去掉坠饰前那一版渲染」的金色像素行剖面做互相关量出来的；不吃点击（会盖住 title-sub / gifts） */
  /* 半宽条的并排行 */
  /* 标题牌 247x50：条图上边线在图片第 15 行，牌中线压在该线上 → top = -10 */
  /* 称号行与奖励行：只留版位，内容由接口填 */
  /* ===== 常规服-装评榜：表格（复用 2024 版思路）=====
     几何取自设计稿 2.png（1196x1429，1:1）：
       外框左 15 / 右 1180（宽 1165）；竖线 x=376、x=743 → 三列 361 / 367 / 437
       表头高 66；行 pitch 65；每榜 5 行 = 325
     外框素材 part4-table-bg.png（1196x1244）内部完全平整，格线全由 CSS 画 */
  /* 屏内说明（设计稿 3 行，行距 34，ink 高约 21 → 字号 20 / 行高 34）
     标签「参与范围：」在左（设计稿 x76），正文块缩进到 x196（相对帧左 76 → 74/120）
     表格宽 1196 > 容器 1052，要居中于整屏 → 以「容器左 434 而表格左应 362」向左顶 72px */
  /* 滚动视口：网格顶与帧素材顶对齐（设计稿实测：帧素材顶 = 表头区顶 = 素材 y0）
     左右内沿 15..1180；右侧多让 6px 给滚动条 → 视口宽 1171，表格本体仍 1165
     表头独立固定在 y15..81（高 66），表体从 y81 起，高 1190 - 66 = 1124 */
  /* 表头 + 表体共用同一套列宽（两处都写 width/table-layout，保证列对齐） */
  /* 表头定位在帧内区顶部，底部一条分隔线 */
}
.part2 .sub-title {
  height: 226px;
  background-image: url(../img/part2/part2-title.png);
  text-indent: -9999em;
}
.part2 .tab-group {
  position: absolute;
  left: 50%;
  top: 288px;
  margin-left: -350px;
  width: 700px;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 110px;
}
.part2 .tab-group a {
  outline: none;
  width: 269px;
  height: 65px;
  cursor: pointer;
  /* 精灵图 tab-btns.png 540x132（part1/part2 共用）：单元格 269x65，pitch 271x67（缝 2px）
         0:未激活-蓝浅(0 0)  1:未激活-蓝深(-271px 0)
         2:激活-红浅(0 -67px)  3:激活-红深(-271px -67px)
         映射：常规=蓝深 / hover=红浅 / active=红深（蓝浅备用）
         ⚠️ hover 规则统一写在 motion.less ②，优先级高于此处，不要在这里重复定义 */
  background: url(../img/tab-btns.png) -271px 0 no-repeat;
}
.part2 .tab-group a.active {
  background-position: -271px -67px;
}
.part2 .tab-group a h3 {
  font-size: 24px;
  line-height: 65px;
  text-align: center;
}
.part2 .desc-text {
  width: 964px;
  margin: 0 auto;
  color: #eaeaea;
  font-size: 20px;
  line-height: 36px;
}
.part2 .desc-text a {
  padding-left: 4px;
  color: #ffda75;
  text-decoration: underline;
}
.part2 .desc-text span.b {
  font-weight: bold;
}
.part2 .tab-content {
  position: absolute;
  left: 50%;
  top: 409px;
  margin-left: -526px;
  /* 1052 / 2 */
  width: 1052px;
}
.part2 .rank-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 50px;
}
.part2 .rank-item {
  position: relative;
  height: 283px;
  background-repeat: no-repeat;
}
.part2 .rank-item.full {
  width: 1052px;
  background-image: url(../img/part2/part2-rank-bar-full.png);
  background-position: 50% 0;
}
.part2 .rank-item.full:first-child::after {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 1052px;
  height: 211px;
  background: url(../img/part2/part2-rank-bar-dec.png) no-repeat;
  pointer-events: none;
}
.part2 .rank-row {
  display: flex;
  gap: 20px;
  padding: 0px 31px;
}
.part2 .rank-item.half {
  width: 485px;
  background-image: url(../img/part2/part2-rank-bar-half.png);
  /* 半宽条 3 件（第四至十名 / 第十一至二十名 各含紫金石）：
       3*111 + 2*60 = 453，在 485 内只剩 32px（左右各 16）过贴边；
       gap 收到 30 → 3*111 + 2*30 = 393，左右各余 46 */
}
.part2 .rank-item.half .gifts {
  gap: 17px;
  /* 半宽档更挤：组内间距跟着收到 17，左分割线也相应对到半格 -8.5 */
}
.part2 .rank-item.half .gifts .gifts-group {
  gap: 17px;
}
.part2 .rank-item.half .gifts .gifts-group::before {
  left: -8.5px;
}
.part2 .rank-tag {
  position: absolute;
  left: 50%;
  top: -10px;
  z-index: 2;
  margin-left: -124px;
  width: 247px;
  height: 50px;
  background: url(../img/part2/part2-tag-rank.png) no-repeat;
  font-family: "SourceHanSerifCN-Heavy-Subset";
  font-size: 26px;
  line-height: 50px;
  color: #fcf6e9;
  text-align: center;
}
.part2 .title-sub {
  position: absolute;
  left: 0;
  top: 51px;
  width: 100%;
  font-size: 19px;
  line-height: 34px;
  color: #eaf7ff;
  text-align: center;
}
.part2 .rank-row .title-sub {
  top: 54px;
}
.part2 .gifts {
  position: absolute;
  left: 0;
  top: 92px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 道具间距：⚠️ 上限由「最右一件的道具名不得压到条图内沿」决定，不是拍脑袋。
       条图 985 宽居中（左右各 33.5 给坠饰）；.gift-name 宽 160 而道具只有 95，
       文字比道具每侧多出 32.5 —— 6 件时中心距必须 ≲163，否则末件文字出框。
       取 55（中心距 150）：按最宽文字块算最右沿留 4px，按实际文字（≈126）算留 21px。
       半宽档另有覆盖（gap 17，条窄） */
  gap: 55px;
  /* ===== 道具分组（对齐 M 版 .gifts-group）=====
       分组归属完全照搬 M：坐骑等单件是裸 .gift，不参与分组，只有带铭牌的才包组。
       M 第一行是双行、三选一组靠「横线」分隔；PC 全是单行 → 统一改用「左分割线」。
       ::before = 左分割线（line-h.png 实为 2x150 的竖线素材，两端淡出）
       ::after  = 「n 选 n」小铭牌 153x27，悬在组的正中下方（1of3 换图） */
}
.part2 .gifts .gift {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 95px;
  height: 95px;
  background: url(../img/part2/part2-gift-bg.png) no-repeat;
  background-size: cover;
  /* 道具图标：PC 原先没写尺寸（按素材原始 88px 渲染），这里显式收到 75 */
}
.part2 .gifts .gift .gift-icon {
  width: 75px;
  height: 75px;
}
.part2 .gifts .gift .img {
  width: 100px;
}
.part2 .gifts .gift .gift-name {
  position: absolute;
  /* 道具从 111 缩到 95（-16），文字跟着上移同样距离，
           否则组底上移后「n选n」铭牌会压到道具名上（铭牌是相对组底定位的） */
  top: 98px;
  font-size: 18px;
  line-height: 1.2;
  width: 160px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* 白字本体始终在最上层；蓝色描边交给 ::before 垫在下面。
           不用 -webkit-text-stroke + paint-order —— paint-order 对 HTML 文本
           在 Safari 全系 / Chrome<123 / 老 Android WebView 下无效，stroke 会盖死
           白字（表现为「白字变蓝」）。见 memory/2026-10-12.md */
  color: #ffffff;
  isolation: isolate;
}
.part2 .gifts .gift .gift-name::before {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  color: transparent;
  -webkit-text-stroke: 3px #2c55b5d0;
  white-space: pre-line;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}
.part2 .gifts .gifts-group {
  position: relative;
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 0 10px;
  box-sizing: border-box;
  /* 线落在组与左邻之间：.gifts 的 gap 55 → 半格 -27.5（半宽档 gap 17，另在下面覆盖） */
  /* 铭牌：从组底（.gift 下沿）再往下 40px 起 —— 道具名占组底 9~49px，
         而铭牌横向正落在两件道具的空隙里，所以纵向与文字有少量重叠也不打架 */
}
.part2 .gifts .gifts-group::before {
  content: '';
  position: absolute;
  left: -27.5px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 150px;
  background: url(../img/part2/line-h.png) no-repeat;
}
.part2 .gifts .gifts-group::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -67px;
  transform: translateX(-50%);
  width: 153px;
  height: 27px;
  background: url(../img/part2/1of2.png) no-repeat;
}
.part2 .gifts .gifts-group[data-type="1of3"]::after {
  background-image: url(../img/part2/1of3.png);
}
.part2 .desc-text2 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 1059px;
  font-size: 20px;
  line-height: 34px;
  color: #eaeaea;
  text-align: left;
}
.part2 .desc-text2 .desc-label {
  position: absolute;
  left: 76px;
  top: 0;
}
.part2 .desc-text2 .desc-body {
  margin-left: 181px;
  width: 1000px;
}
.part2 .desc-text2 .desc-body p {
  margin: 0;
}
.part2 .desc-text2 span.b {
  font-weight: bold;
}
.part2 .grade-table-bg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 130px;
  width: 1196px;
  height: 1244px;
  background: url(../img/part2/part4-table-bg.png) no-repeat;
  box-sizing: border-box;
}
.part2 .grade-table {
  position: absolute;
  left: 15px;
  top: 81px;
  width: 1171px;
  height: 1124px;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  /* 蓝色系滚动条：轨 rgba(60,102,168,.35) / 滑块 #5b8fd4 */
}
.part2 .grade-table::-webkit-scrollbar {
  width: 6px;
  background: rgba(60, 102, 168, 0.35);
}
.part2 .grade-table::-webkit-scrollbar-thumb {
  background: #5b8fd4;
  border-radius: 3px;
}
.part2 .grade-head,
.part2 .grade-table table {
  width: 1165px;
  border-collapse: collapse;
  color: #ffffff;
  table-layout: fixed;
  /* 四列定宽 266 / 177 / 338 / 384 = 1165
       比例取自客户 2026-10 新设计稿的竖线位置（x = 265 / 436 / 762，表宽 1124） */
}
.part2 .grade-head th,
.part2 .grade-table table th,
.part2 .grade-head td,
.part2 .grade-table table td {
  text-align: center;
  font-size: 16px;
  line-height: 24px;
  font-weight: normal;
  padding: 0;
  box-sizing: border-box;
}
.part2 .grade-head .w-th1,
.part2 .grade-table table .w-th1 {
  width: 266px;
}
.part2 .grade-head .w-th2,
.part2 .grade-table table .w-th2 {
  width: 177px;
}
.part2 .grade-head .w-th3,
.part2 .grade-table table .w-th3 {
  width: 338px;
}
.part2 .grade-head .w-th4,
.part2 .grade-table table .w-th4 {
  width: 384px;
}
.part2 .grade-head {
  position: absolute;
  left: 15px;
  top: 15px;
}
.part2 .grade-head th {
  height: 66px;
  padding-top: 22px;
  font-size: 24px;
  line-height: 28px;
  color: #ffffff;
  border-bottom: 1px solid #ffffff;
  vertical-align: top;
}
.part2 .grade-table table {
  /* 「要求」列：rowspan 跨 5 行，只在榜底画线（组与组之间与上一组共用同一条）；
       内容顶部内缩 107（设计稿实测：榜名 ink 距榜顶 107） */
}
.part2 .grade-table table td {
  height: 65px;
  border-bottom: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
}
.part2 .grade-table table td.lastcol {
  border-right: 0;
}
.part2 .grade-table table td.req-cell {
  height: 325px;
  padding-top: 104px;
  border-bottom: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
  vertical-align: top;
}
.part2 .grade-table table .rank-name {
  font-size: 26px;
  line-height: 30px;
  font-weight: bold;
  color: #ffffff;
}
.part2 .grade-table table .rank-cond {
  margin-top: 6px;
  font-size: 16px;
  line-height: 27px;
  color: #ffffff;
}
.part2 .grade-note {
  font-size: 18px;
  line-height: 28px;
  color: #eaeaea;
  position: absolute;
  left: 10px;
  top: 1376px;
}
.part2 .grade-note span.w3 {
  display: inline-block;
  width: 54px;
}
.part3 {
  position: relative;
  width: 100%;
  height: 1038px;
}
.part3 .sub-title {
  height: 226px;
  background-image: url(../img/part3/part3-title.png);
  text-indent: -9999em;
}
.part3 .bg {
  position: absolute;
  left: 50%;
  margin-left: -765.5px;
  width: 1363px;
  height: 506px;
  background-image: url(../img/part3/part3-bg.png);
}
.part3 .horse {
  position: absolute;
  left: -120px;
  top: -220px;
  width: 723px;
  height: 790px;
  background-image: url(../img/part3/part3-horse.png);
}
.part3 .texts-title {
  position: absolute;
  top: 84px;
  right: 300px;
  height: 61px;
  width: 417px;
  background-image: url(../img/part3/part3-h3-bg.png);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 3px;
}
.part3 .texts-title h3 {
  font-size: 28px;
  color: #ffffff;
}
.part3 .texts {
  position: absolute;
  left: 50%;
  top: 152px;
  margin-left: -36px;
  width: 660px;
  color: #ffffff;
  font-size: 22px;
  line-height: 26px;
  text-align: justify;
}
.part3 .texts a {
  padding-left: 4px;
  color: #ffda75;
  text-decoration: underline;
}
.part3 .texts p {
  margin-top: 18px;
}
.part4 {
  position: relative;
  width: 100%;
  height: 1979px;
  /* 内容统一入口：底板 part4-content-bg.png 1196×1159 */
  /* ===== 每日加速（data-index=1）：三块蓝底横幅 part4-item-bg-10.png 1150×283 ===== */
  /* ===== 升级领奖（data-index=2）：等级卡 2 列 3 行 part4-item-bg.png 553×283 ===== */
  /* ===== 活跃领奖（data-index=3）：整行 part4-item-bg-7/8.png 1150×203；半行 part4-item-bg-9.png 570×203 ===== */
  /* ===== 目标奖励（data-index=4）/ 限量商城（data-index=6）：共用 panel part4-item-bg-11.png 1150×1003 ===== */
  /* 目标奖励：表头钉顶 + 表体内部滚动 */
  /* 限量商城：6 行 × 5 道具 */
  /* ===== 进阶领奖（data-index=5）===== */
}
.part4 .sub-title {
  height: 226px;
  background-image: url(../img/part4/part4-title.png);
  text-indent: -9999em;
  position: absolute;
  top: -38px;
}
.part4 .texts {
  position: absolute;
  left: 50%;
  top: 194px;
  margin-left: -600px;
  width: 1200px;
  color: #ffffff;
  font-size: 22px;
  line-height: 30px;
  text-align: justify;
}
.part4 .texts a {
  padding-left: 4px;
  color: #ffda75;
  text-decoration: underline;
}
.part4 .texts span {
  font-weight: bold;
}
.part4 .texts span.gold {
  font-weight: normal;
  color: #fff29c;
}
.part4 .texts span.gold2 {
  font-weight: normal;
  color: #fff29c;
}
.part4 > .tab-group {
  position: absolute;
  left: 50%;
  top: 396px;
  margin-left: -600px;
  display: flex;
  width: 1200px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.part4 > .tab-group a {
  -webkit-tap-highlight-color: transparent;
  outline: none;
  user-select: none;
  -webkit-user-drag: none;
  border: none;
  position: relative;
  width: 193px;
  height: 166px;
  cursor: pointer;
  /* 精灵图 part4-btns.png 388x334：单元格 193x166，pitch 195x168（缝 2px）
         0:未激活-蓝浅(0 0)  1:未激活-蓝深(-195px 0)
         2:激活-红浅(0 -168px)  3:激活-红深(-195px -168px)
         映射：常规=蓝深 / hover=红浅 / active=红深（蓝浅备用）
         ⚠️ hover 规则统一写在 motion.less ③，优先级高于此处，不要在这里重复定义 */
  background: url(../img/part4/part4-btns.png) -195px 0 no-repeat;
}
.part4 > .tab-group a.active {
  background-position: -195px -168px;
}
.part4 > .tab-group a h4 {
  position: absolute;
  top: 33%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ffffff;
  width: 100%;
  font-size: 27px;
  line-height: 1.1;
  height: 60px;
}
.part4 > .tab-content {
  position: absolute;
  left: 50%;
  top: 601px;
  margin-left: -600px;
  display: flex;
  width: 1200px;
}
.part4 > .tab-content > .tab-li {
  position: relative;
  outline: none;
  width: 1196px;
  height: 1159px;
  cursor: pointer;
}
.part4 .content {
  position: absolute;
  left: 0;
  top: 0;
  width: 1196px;
  height: 1159px;
  background: url(../img/part4/part4-content-bg.png) no-repeat;
}
.part4 .content[data-index="1"] .line {
  position: absolute;
  width: 1120px;
  height: 1.5px;
  background-color: #9ab0d1;
  left: 50%;
  transform: translateX(-50%);
}
.part4 .content[data-index="1"] .line[data-index="1"] {
  top: 400px;
}
.part4 .content[data-index="1"] .line[data-index="2"] {
  top: 800px;
}
.part4 .content[data-index="1"] .double-block {
  position: absolute;
  left: 50%;
  margin-left: -575px;
  width: 1150px;
  height: 283px;
}
.part4 .content[data-index="1"] .double-block[data-index="1"] {
  top: 110px;
}
.part4 .content[data-index="1"] .double-block[data-index="1"] .double-icon {
  left: 26px;
  top: -56px;
}
.part4 .content[data-index="1"] .double-block[data-index="1"] .double-title {
  left: 61%;
  top: 20px;
}
.part4 .content[data-index="1"] .double-block[data-index="1"] .double-text {
  left: 445px;
  top: -6px;
}
.part4 .content[data-index="1"] .double-block[data-index="2"] {
  top: 473px;
}
.part4 .content[data-index="1"] .double-block[data-index="2"] .double-icon {
  top: -67px;
  left: 62%;
}
.part4 .content[data-index="1"] .double-block[data-index="2"] .double-title {
  left: 64%;
  top: 25px;
}
.part4 .content[data-index="1"] .double-block[data-index="2"] .double-text {
  left: 142px;
  top: 28px;
}
.part4 .content[data-index="1"] .double-block[data-index="3"] {
  top: 839px;
}
.part4 .content[data-index="1"] .double-block[data-index="3"] .double-title {
  left: 50%;
  transform: translateX(-50%);
  top: 26px;
  margin-left: unset;
}
.part4 .content[data-index="1"] .double-block[data-index="3"] .double-text {
  top: 31px;
}
.part4 .content[data-index="1"] .double-title {
  position: absolute;
  left: 50%;
  top: -70px;
  margin-left: -263.5px;
  width: 527px;
  height: 61px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url(../img/part4/part4-texts-title.png) no-repeat;
}
.part4 .content[data-index="1"] .double-title[data-type="l4"] {
  width: 287px;
  height: 61px;
  background: url(../img/part4/part4-texts-title-l4.png) no-repeat;
}
.part4 .content[data-index="1"] .double-title[data-type="l6"] {
  width: 382px;
  height: 61px;
  background: url(../img/part4/part4-texts-title-l6.png) no-repeat;
}
.part4 .content[data-index="1"] .double-title h3 {
  margin: 0;
  padding-top: 4px;
  font-size: 30px;
  color: #ffffff;
}
.part4 .content[data-index="1"] .double-cont {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.part4 .content[data-index="1"] .double-icon {
  position: absolute;
  left: 40px;
  top: -30px;
}
.part4 .content[data-index="1"] .double-text {
  position: absolute;
  left: 382px;
  top: 48px;
  display: flex;
  align-items: center;
  height: 283px;
  margin: 0;
  width: 619px;
  font-size: 24px;
  line-height: 1.75;
  color: #eafaff;
}
.part4 .content[data-index="1"] .double-text span {
  color: #fff29c;
}
.part4 .content[data-index="1"] .double-block[data-index="3"] .double-text {
  left: 60px;
  width: 1030px;
  justify-content: center;
  text-align: center;
}
.part4 .content[data-index="2"] {
  background: url(../img/part4/part4-content-bg-2.png) no-repeat;
}
.part4 .content[data-index="2"] .intro {
  position: absolute;
  left: 50%;
  top: 116px;
  margin-left: -563px;
  width: 1126px;
  color: #eaeaea;
  font-size: 24px;
  line-height: 30px;
  text-align: center;
}
.part4 .content[data-index="2"] .intro p {
  margin: 0;
}
.part4 .content[data-index="2"] .texts-title {
  position: absolute;
  left: 50%;
  top: 32px;
  margin-left: -263.5px;
  width: 527px;
  height: 61px;
  background: url(../img/part4/part4-texts-title.png) no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}
.part4 .content[data-index="2"] .texts-title h3 {
  margin: 0;
  padding-top: 4px;
  font-size: 30px;
  color: #fff;
}
.part4 .content[data-index="2"] .items {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 203px;
  display: flex;
  flex-wrap: wrap;
  column-gap: 30px;
  row-gap: 8px;
  width: 1135px;
  height: 750px;
}
.part4 .content[data-index="2"] .item {
  position: relative;
  width: 552px;
  height: 222px;
  background: url(../img/part4/part4-item-bg-13.png) no-repeat;
}
.part4 .content[data-index="2"] .item .gifts-value {
  position: absolute;
  right: 6px;
  top: 20px;
  width: 75px;
  height: 98px;
  font-size: 16px;
  white-space: pre-wrap;
  text-align: center;
  line-height: 18px;
  color: #fff;
}
.part4 .content[data-index="2"] .item-title {
  position: absolute;
  left: 0;
  top: 19px;
  width: 100%;
  text-align: center;
}
.part4 .content[data-index="2"] .item-title h4 {
  margin: 0;
  font-size: 28px;
  line-height: 30px;
  background: linear-gradient(to bottom, #ffffff, #bdc2ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.part4 .content[data-index="2"] .gifts {
  position: absolute;
  left: 50%;
  top: 79px;
  margin-left: -181px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 360px;
  gap: 20px;
}
.part4 .content[data-index="2"] .gifts.n2 {
  padding: 0 30px;
  box-sizing: border-box;
}
.part4 .content[data-index="2"] .gift {
  position: relative;
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url(../img/part4/part4-gift-bg.png) no-repeat;
  background-size: cover;
}
.part4 .content[data-index="2"] .gift .gift-icon {
  width: 75px;
  height: 75px;
}
.part4 .content[data-index="2"] .gift .gift-name {
  position: absolute;
  left: 50%;
  top: 93px;
  margin-left: -80px;
  width: 160px;
  font-size: 18px;
  line-height: 23px;
  color: #ffffff;
  text-align: center;
}
.part4 .content[data-index="3"] {
  width: 1196px;
  height: 1348px;
  background: url(../img/part4/part4-content-bg2.png) no-repeat;
}
.part4 .content[data-index="3"] .intro {
  position: absolute;
  left: 50%;
  top: 36px;
  margin-left: -563px;
  width: 1126px;
  color: #eaeaea;
  font-size: 24px;
  line-height: 30px;
  text-align: center;
}
.part4 .content[data-index="3"] .intro p {
  margin: 0;
}
.part4 .content[data-index="3"] .rows {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 125px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  height: 1209px;
}
.part4 .content[data-index="3"] .row {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 10px;
}
.part4 .content[data-index="3"] .active-block {
  position: relative;
}
.part4 .content[data-index="3"] .active-block[data-type="1"] {
  width: 1134px;
  height: 164px;
  background: url(../img/part4/part4-item-bg-7.png) no-repeat;
}
.part4 .content[data-index="3"] .active-block[data-type="1"] .active-text1 {
  position: absolute;
  left: 40px;
  top: 78px;
  width: 773px;
  font-size: 19px;
  line-height: 1.5;
  color: #fff;
  text-align: left;
}
.part4 .content[data-index="3"] .active-block[data-type="1"] .active-text2 {
  position: absolute;
  right: 30px;
  top: 62px;
  width: 250px;
}
.part4 .content[data-index="3"] .active-block[data-type="1"] .active-text2 p {
  margin: 0;
  font-size: 20px;
  color: #fff;
  text-align: center;
}
.part4 .content[data-index="3"] .active-block[data-type="1"] .active-text2 h5 {
  margin: 4px 0 0;
  font-size: 28px;
  color: #fff;
  text-align: center;
}
.part4 .content[data-index="3"] .active-block[data-type="2"] {
  width: 1134px;
  height: 164px;
  background: url(../img/part4/part4-item-bg-8.png) no-repeat;
}
.part4 .content[data-index="3"] .active-block[data-type="2"] .active-text1 {
  position: absolute;
  left: 50%;
  top: 77px;
  margin-left: -510px;
  width: 1020px;
  font-size: 19px;
  line-height: 1.5;
  color: #fff;
  text-align: center;
}
.part4 .content[data-index="3"] .active-block .active-cond {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 4px;
  margin: 0;
  font-size: 24px;
  white-space: nowrap;
  background: linear-gradient(to bottom, #ffffff, #bdc2ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.part4 .content[data-index="4"] .intro {
  position: absolute;
  left: 50%;
  top: 36px;
  margin-left: -563px;
  width: 1126px;
  color: #eaeaea;
  font-size: 20px;
  line-height: 30px;
  text-align: center;
}
.part4 .content[data-index="4"] .intro p {
  margin: 0;
}
.part4 .content[data-index="4"] .panel {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 132px;
  width: 1135px;
  height: 1003px;
  box-sizing: border-box;
  background: url(../img/part4/part4-item-bg-11.png) no-repeat;
}
.part4 .content[data-index="4"] .panel {
  top: 143px;
}
.part4 .content[data-index="4"] .grade-head {
  position: absolute;
  z-index: 2;
}
.part4 .content[data-index="4"] .grade-table {
  position: absolute;
  top: 76px;
  width: 1133px;
  height: 870px;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}
.part4 .content[data-index="4"] .grade-table::-webkit-scrollbar {
  width: 6px;
  background: #96aad3;
}
.part4 .content[data-index="4"] .grade-table::-webkit-scrollbar-thumb {
  background: #d5e3ff;
}
.part4 .content[data-index="4"] .grade-head,
.part4 .content[data-index="4"] .grade-table table {
  width: 1133px;
  border-collapse: collapse;
  table-layout: fixed;
  color: #ffffff;
}
.part4 .content[data-index="4"] .grade-head th,
.part4 .content[data-index="4"] .grade-table table th,
.part4 .content[data-index="4"] .grade-head td,
.part4 .content[data-index="4"] .grade-table table td {
  padding: 0 10px;
  text-align: center;
  vertical-align: middle;
}
.part4 .content[data-index="4"] .grade-head .w-th1,
.part4 .content[data-index="4"] .grade-table table .w-th1 {
  width: 300px;
}
.part4 .content[data-index="4"] .grade-head .w-th2,
.part4 .content[data-index="4"] .grade-table table .w-th2 {
  width: 600px;
}
.part4 .content[data-index="4"] .grade-head .w-th,
.part4 .content[data-index="4"] .grade-table table .w-th {
  width: 198px;
}
.part4 .content[data-index="4"] .grade-head th {
  height: 67px;
  font-size: 26px;
  line-height: 67px;
  color: #ffffff;
  border-bottom: 1px solid rgba(235, 243, 255, 0.85);
}
.part4 .content[data-index="4"] .grade-table td {
  height: 72px;
  font-size: 20px;
  line-height: 30px;
  border-right: 1px solid rgba(235, 243, 255, 0.55);
  border-bottom: 1px solid rgba(235, 243, 255, 0.55);
  box-sizing: border-box;
}
.part4 .content[data-index="4"] .lastcol {
  border-right: 0;
}
.part4 .content[data-index="6"] {
  background: url(../img/part4/part4-content-bg-s.png) no-repeat;
}
.part4 .content[data-index="6"] .intro {
  position: absolute;
  left: 50%;
  top: 45px;
  margin-left: -563px;
  width: 1126px;
  color: #eaeaea;
  font-size: 20px;
  line-height: 30px;
  text-align: center;
}
.part4 .content[data-index="6"] .intro p {
  margin: 0;
}
.part4 .content[data-index="6"] .panel {
  padding-top: 35px;
  position: absolute;
  left: 50%;
  top: 138px;
  transform: translateX(-50%);
  width: 1130px;
  height: 1003px;
  box-sizing: border-box;
  background: url(../img/part4/part4-item-bg-12.png) no-repeat;
}
.part4 .content[data-index="6"] .reach-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  height: 161px;
  margin: 0;
  padding: 0 40px;
  list-style: none;
}
.part4 .content[data-index="6"] .reach-row .reach-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 一行 8 个：8×128 = 1024 ≤ 内容宽 1070（panel 1150 − padding 40×2） */
  width: 128px;
  list-style: none;
}
.part4 .content[data-index="6"] .reach-gift {
  width: 90px;
  height: 89px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url(../img/part4/part4-gift-bg.png) no-repeat;
  background-size: cover;
}
.part4 .content[data-index="6"] .reach-gift img {
  display: block;
  width: 70px;
  height: 70px;
}
.part4 .content[data-index="6"] .reach-name {
  margin: 4px 0 0;
  width: 128px;
  font-size: 18px;
  line-height: 24px;
  color: #ffffff;
  text-align: center;
  font-weight: normal;
}
.part4 .content[data-index="5"] {
  background: url(../img/part4/part4-content-bg-s.png) no-repeat;
}
.part4 .content[data-index="5"] .sub-tab-group {
  position: absolute;
  left: 50%;
  top: 58px;
  margin-left: -600px;
  width: 1200px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.part4 .content[data-index="5"] .sub-tab-group a {
  position: relative;
  width: 277px;
  height: 80px;
  outline: none;
  cursor: pointer;
  background: url(../img/part4/sub-tag-bgs.png) -277px 0 no-repeat;
}
.part4 .content[data-index="5"] .sub-tab-group a.active {
  background-position: 0 0;
}
.part4 .content[data-index="5"] .sub-tab-group a h4 {
  position: absolute;
  left: 0;
  top: 13px;
  width: 100%;
  margin: 0;
  font-size: 26px;
  line-height: 34px;
  color: #ffffff;
  text-align: center;
}
.part4 .content[data-index="5"] .sub-tab-group a span {
  position: absolute;
  left: 0;
  top: 47px;
  width: 100%;
  font-size: 22px;
  line-height: 24px;
  color: #ffffff;
  text-align: center;
  font-weight: normal;
}
.part4 .content[data-index="5"] .sub-tab-group a.active h4,
.part4 .content[data-index="5"] .sub-tab-group a.active span {
  color: #ffffff;
}
.part4 .content[data-index="5"] .sub-tab-group a .free {
  position: absolute;
  left: 214px;
  top: 21px;
  width: 39px;
  height: 39px;
  background: url(../img/part4/free.png) no-repeat;
}
.part4 .content[data-index="5"] .intro {
  position: absolute;
  left: 50%;
  top: 162px;
  margin-left: -505px;
  width: 1010px;
  color: #eaeaea;
  font-size: 20px;
  line-height: 30px;
  text-align: center;
  margin-top: 0;
}
.part4 .content[data-index="5"] .sub-tab-content {
  position: absolute;
  left: 0;
  top: 0;
  width: 1196px;
}
.part4 .content[data-index="5"] .prize-items {
  position: absolute;
  left: 0;
  top: 0;
  width: 1196px;
  height: 100%;
}
.part4 .content[data-index="5"] .prize {
  position: absolute;
  box-sizing: border-box;
  width: 563px;
  height: 259px;
  background: url(../img/part4/part4-item-bg.png) no-repeat;
  /* 第 1 行两枚稍宽（553），第 2 行三枚稍窄（363，part4-item-bg-3） */
}
.part4 .content[data-index="5"] .prize:nth-child(1) {
  left: 32px;
  top: 264px;
}
.part4 .content[data-index="5"] .prize:nth-child(2) {
  right: 32px;
  top: 264px;
}
.part4 .content[data-index="5"] .prize:nth-child(3) {
  left: 32px;
  top: 561px;
  width: 370px;
  background-image: url(../img/part4/part4-item-bg-3.png);
}
.part4 .content[data-index="5"] .prize:nth-child(4) {
  left: 413px;
  top: 561px;
  width: 370px;
  background-image: url(../img/part4/part4-item-bg-3.png);
}
.part4 .content[data-index="5"] .prize:nth-child(5) {
  right: 32px;
  top: 561px;
  width: 370px;
  background-image: url(../img/part4/part4-item-bg-3.png);
}
.part4 .content[data-index="5"] .prize-text {
  position: absolute;
  left: 0;
  top: 10px;
  height: 50px;
  width: 100%;
  padding: 0 20px;
  text-align: center;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.part4 .content[data-index="5"] .prize-text p {
  margin: 0;
  font-size: 22px;
  line-height: 28px;
  background: linear-gradient(to bottom, #ffffff, #bdc2ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.part4 .content[data-index="5"] .prize-gifts {
  position: absolute;
  left: 0;
  top: 85px;
  width: 100%;
  height: 111px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 60px;
  margin-left: -8px;
}
.part4 .content[data-index="5"] .prize-gifts.small {
  justify-content: space-around;
  left: 18px !important;
  gap: 0px;
  width: 95%;
}
.part4 .content[data-index="5"] .prize-gifts .prize-gift {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 111px;
  height: 111px;
  background: url(../img/part4/part4-gift-bg.png) no-repeat;
}
.part4 .content[data-index="5"] .prize-gifts .prize-gift img {
  display: block;
  width: 88px;
  height: 88px;
}
.part4 .content[data-index="5"] .prize-gifts .prize-gift h5 {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: absolute;
  left: 50%;
  top: 113px;
  margin-left: -80px;
  width: 160px;
  height: 80px;
  margin-top: 0;
  font-size: 18px;
  line-height: 23px;
  color: #ffffff;
  text-align: center;
  font-weight: normal;
}
.part4 .content[data-index="5"] .prize:nth-child(n+3) .prize-text p {
  font-size: 19px;
  line-height: 25px;
}
.part4 .content[data-index="5"] .prize:nth-child(n+3) .prize-gifts .prize-gift h5 {
  width: 130px;
  margin-left: -65px;
  font-size: 16px;
  line-height: 21px;
}
/* 弹层 */
.popup {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
}
.popup.show {
  display: block;
}
.popup .popup-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.popup .close-btn {
  position: absolute;
  right: -20px;
  top: -20px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  background: url(../img/close-btn.png) no-repeat center / contain;
}
.popup .icon-tit {
  font-size: 20px;
  line-height: 30px;
  color: #f3d99b;
  text-align: center;
}
.popup .icon-lihe {
  display: flex;
  justify-content: center;
}
.popup .icon-li {
  margin: 0 12px;
  text-align: center;
}
.popup .icon-li .icon-bg {
  width: 100px;
  height: 100px;
}
.popup .icon-li img {
  width: 100%;
}
.popup .icon-li .icon-name {
  font-size: 14px;
  line-height: 22px;
  color: #fff;
}
.video-popup .popup-content {
  width: 1280px;
  height: 720px;
}
.video-popup .popup-content video {
  width: 100%;
  height: 100%;
}
/* ============================================================
   通用动效（PC）：纯 CSS，不改 JS
   ⚠️ 所有面板切换都是 display:none ↔ block，**display 不能 transition**，
      所以入场一律用 @keyframes 动画（元素从 display:none 变 block 时会重新触发动画），
      而不是 transition（transition 在这里不会生效）。
   ⚠️ 只做「入场」不做「出场」：出场需要 JS 延时配合，纯 CSS 做不到，
      且切换瞬间旧面板被 display:none 掉，做不出淡出。保持简单。
   ============================================================ */
/* ---------- 1. 面板淡入（tab 切换内容区） ---------- */
/* 所有 .tab-li 被加 .active（display:block）时播放 */
@keyframes panelIn {
  0% {
    opacity: 0;
    transform: translateY(14px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ---------- 1b. part4 子项逐条上浮（移植自 M 版） ----------
   「活跃领奖」7 条 .row（.rows 是 flex column）/「升级领奖」6 个 .item（.items 是 flex wrap，2 列）
   每条错开 100ms。复用上面的同一机制：.tab-li 是 display:none ↔ block，
   每次切进来都重新触发动画，不用 JS。
   ⚠️ 延迟梯度靠 nth-child 写死 —— .row / .item 增删时同步补删（当前 7 条 / 6 个）。 */
@keyframes rowFadeUp {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* 活跃领奖：7 条 .row —— .row 自身无 hover/transform，用 both 定格结束态即可 */
.part4 .tab-content > .tab-li.active .rows > .row {
  animation: rowFadeUp 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.part4 .tab-content > .tab-li.active .rows > .row:nth-child(1) {
  animation-delay: 0ms;
}
.part4 .tab-content > .tab-li.active .rows > .row:nth-child(2) {
  animation-delay: 100ms;
}
.part4 .tab-content > .tab-li.active .rows > .row:nth-child(3) {
  animation-delay: 200ms;
}
.part4 .tab-content > .tab-li.active .rows > .row:nth-child(4) {
  animation-delay: 300ms;
}
.part4 .tab-content > .tab-li.active .rows > .row:nth-child(5) {
  animation-delay: 400ms;
}
.part4 .tab-content > .tab-li.active .rows > .row:nth-child(6) {
  animation-delay: 500ms;
}
.part4 .tab-content > .tab-li.active .rows > .row:nth-child(7) {
  animation-delay: 600ms;
}
/* 升级领奖：6 个 .item
   🔴 这里必须用 backwards 而不是 both：.item 另有 hover{transform}（见下面第 3 节），
      动画填充态在层叠中高于普通声明 —— both 的 forwards 会把 transform 钉在 translateY(0)，
      让 hover 的上浮位移失效（filter 仍生效，所以肉眼像「只亮不动」）。backwards 只吃起始态。 */
.part4 .tab-content > .tab-li.active .items > .item {
  animation: rowFadeUp 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}
.part4 .tab-content > .tab-li.active .items > .item:nth-child(1) {
  animation-delay: 0ms;
}
.part4 .tab-content > .tab-li.active .items > .item:nth-child(2) {
  animation-delay: 100ms;
}
.part4 .tab-content > .tab-li.active .items > .item:nth-child(3) {
  animation-delay: 200ms;
}
.part4 .tab-content > .tab-li.active .items > .item:nth-child(4) {
  animation-delay: 300ms;
}
.part4 .tab-content > .tab-li.active .items > .item:nth-child(5) {
  animation-delay: 400ms;
}
.part4 .tab-content > .tab-li.active .items > .item:nth-child(6) {
  animation-delay: 500ms;
}
/* ---------- 2. 按钮动效基元 ---------- */
/* 通用「按下回弹」：给 .tab-group > a / .popup-btn 等按钮用 */
@keyframes btnPress {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}
/* ---------- 3. 应用到具体单元 ---------- */
.tab-content {
  /* ⚠️ 只命中「直接子级」.tab-li，避免 part4 二级 tab 里的 .tab-li 也被赋动画（会双重播放） */
}
.tab-content > .tab-li.active {
  animation: panelIn 0.38s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
/* ---------- 有状态按钮：hover 切到「浅色」底图 ----------
   2026 设计新出 2x2 精灵图（浅/深 × 未激活/激活），四格靠 background-position 切：
     ✅ 常规 = 深 · 未激活　　✅ hover = 浅 · 未激活　　✅ active = 深 · 激活
   ❌ 已处于 .active 的按钮不加额外反馈（用户已定：不要「已选中还闪一下」）。
   ⚠️ `:not(.active)` 必须写 —— 否则 .active 按钮 hover 时会被同一条规则反向切回常规格。
   ⚠️ 各版块的「格子偏移」不同，且 part4 二级 tab 是**反向**的（常规 -258 / 激活 0），
      所以只能逐条写死，不能抽公共类。 */
/* ①② part1 / part2 榜单切换：共用精灵图 tab-btns.png —— 0:蓝浅(0 0) / 1:蓝深(-271px 0)
      / 2:红浅(0 -67px) / 3:红深(-271px -67px)
      映射：常规=蓝深 / hover=红浅 / active=红深（蓝浅备用） */
.part1 .tab-group > a:not(.active):hover,
.part2 .tab-group > a:not(.active):hover {
  background-position: 0 -67px;
}
/* ③ part4 一级 tab：精灵图 2x2 —— 0:蓝浅(0 0) / 1:蓝深(-195px 0)
      / 2:红浅(0 -168px) / 3:红深(-195px -168px)
      映射：常规=蓝深 / hover=红浅 / active=红深（蓝浅备用）
      ⚠️ hover 不再复用「激活格」——设计专门出了 hover 态（红浅），与 active（红深）不同 */
.part4 > .tab-group > a:not(.active):hover {
  background-position: 0 -168px;
}
/* ④ part4 二级 tab（阶段一~四礼包）：⚠️ 反向 —— 常规 -258px 0 / 激活 0 0 */
.part4 .prize-table .tab-group > a:not(.active):hover {
  background-position: 0 0;
}
.part4 .prize-table .tab-group > a:not(.active):hover h4,
.part4 .prize-table .tab-group > a:not(.active):hover span {
  color: #9c2d06;
}
/* tab 切换按钮：按下回弹
   ⚠️ 提亮 filter 保留（叠在切换后的底图上），但去掉原来的 transform 上浮，
      避免和 .side-column li 的位移观感打架；filter 是独立图层、不影响精灵图定位 */
.tab-group > a {
  transition: filter 0.25s ease;
  will-change: filter;
}
.tab-group > a:not(.active):hover {
  filter: brightness(1.1) drop-shadow(0 0 6px rgba(255, 226, 150, 0.55));
}
.tab-group > a:active {
  animation: btnPress 0.22s ease;
}
/* 右侧悬浮导航：hover 已有光晕条，这里补一个轻微右移 + 提亮过渡 */
.side-column li {
  transition: transform 0.22s ease, filter 0.22s ease;
}
.side-column li:hover {
  filter: brightness(1.12);
}
/* 弹层按钮（.popup-btn）——若某处用作大按钮，同样给 hover/按压反馈 */
.popup-btn {
  transition: filter 0.25s ease, transform 0.18s ease;
}
.popup-btn:hover {
  filter: brightness(1.12);
}
.popup-btn:active {
  animation: btnPress 0.22s ease;
}
/* part4 .item（奖励格子）：hover 轻微放大，给「可点」暗示 */
.part4 .items .item,
.part4 .double-block,
.part4 .active-block,
.part4 .prize,
.part4 .newbie-list li,
.part4 .reach-panel,
.part2 .rank-item,
.reach-item,
.prize-gift,
.gift {
  transition: transform 0.25s ease, filter 0.25s ease;
}
.part4 .items .item:hover,
.part4 .double-block:hover,
.part4 .active-block:hover,
.part4 .prize:hover,
.part4 .newbie-list li:hover,
.part4 .reach-panel:hover,
.part2 .rank-item:hover,
.reach-item:hover,
.prize-gift:hover,
.gift:hover {
  transform: translateY(-4px) scale(1.015);
  filter: brightness(1.08);
}
/* part1 四个 tag（未展开的那几个）：hover 提亮，暗示可点
   ⚠️ .tag 是绝对定位的精灵图元素，只加 filter 不加 transform，
      避免和 .tag-li 的 width transition 打架 */
.tag-ul > li {
  transition: filter 0.22s ease;
}
.tag-ul > li:hover .tag {
  filter: brightness(1.18);
}
/* 弹层：遮罩淡入 + 内容轻微放大浮现（.show 由 JS 加/去） */
@keyframes popupFade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes popupContentIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.94);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
.popup.show {
  animation: popupFade 0.26s ease both;
  /* ⚠️ .popup-content 本身带 translate(-50%,-50%) 居中，动画里必须完整重写这个 transform，
     否则会丢掉居中、内容跳到左上角 */
}
.popup.show .popup-content {
  animation: popupContentIn 0.32s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}