/*
 * Author: clovis(706706)
 * Version: 0.1.0
 * Compile Date: 2026-11-10 13:37
*/ 
/* 基础 */
*, *::before, *::after {
  box-sizing: border-box; }

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: auto; }
  html:has(.app.is-stage-short), body:has(.app.is-stage-short) {
    overflow: hidden; }
  html:has(.app.is-stage-long), body:has(.app.is-stage-long) {
    overflow-x: hidden;
    overflow-y: auto; }

h1, h2, h3, h4, h5, h6, p {
  margin: 0; }

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none; }

li {
  margin: 0;
  padding: 0; }

a {
  color: inherit;
  text-decoration: none; }

a[href], button:not(:disabled) {
  cursor: pointer; }

button, input, select, textarea {
  margin: 0;
  font: inherit;
  color: inherit; }

button {
  padding: 0;
  border: 0;
  background: transparent; }

img {
  border: 0; }

.img-container {
  position: relative; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

th, td {
  position: relative;
  padding: 0; }

.hidden {
  display: none !important; }

[v-cloak] {
  display: none; }

/* 设计稿外壳：尺寸来自 #app 上的 --design-w / --design-h；无缩放、不视口居中 */
.app {
  position: relative;
  width: calc(var(--design-w) * 1px);
  min-height: calc(var(--design-h) * 1px); }
  .app > main {
    position: relative;
    width: 100%;
    min-height: inherit; }
  .app > nav {
    position: fixed; }
  .app.is-stage-short .main-wrapper {
    overflow: hidden; }
  .app.is-stage-long {
    min-height: calc(var(--design-h) * 1px); }
    .app.is-stage-long .main-wrapper {
      height: calc(var(--design-h) * 1px); }

.main-wrapper {
  position: relative;
  width: calc(var(--design-w) * 1px);
  max-width: calc(var(--design-w) * 1px);
  height: calc(var(--design-h) * 1px); }

/* mixin */
@font-face {
  font-family: "HYXueJunJ";  
  src: url("https://zfvideo.99.com/games/zf/act/2026/weapon/font/HYXueJunJ-regular.woff2") format("woff2"), url("https://zfvideo.99.com/games/zf/act/2026/weapon/font/HYXueJunJ-regular.woff") format("woff"), url("https://zfvideo.99.com/games/zf/act/2026/weapon/font/HYXueJunJ-regular.ttf") format("truetype");
  font-weight: 400; }

body {
  font: 18px/1.5 "Microsoft Yahei"; }

.app {
  background-color: #1c1c20; }

.main-wrapper > .swiper-container {
  position: relative;
  z-index: 0;
  width: 1920px;
  height: 1080px;
  overflow: hidden; }

.main-wrapper > .swiper-container > .swiper-wrapper {
  transform: none !important; }

.main-wrapper > .swiper-container > .swiper-wrapper > .page.swiper-slide {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  z-index: 0;
  width: 1920px;
  height: 1080px;
  visibility: hidden; }
  .main-wrapper > .swiper-container > .swiper-wrapper > .page.swiper-slide.active {
    visibility: visible; }
  .main-wrapper > .swiper-container > .swiper-wrapper > .page.swiper-slide.mask {
    pointer-events: none; }

.page-banner {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1080px;
  background-image: url("https://img6.99.com/zf/activity/2026/11/weapons/img/img-1-3.png");
  background-repeat: no-repeat; }
  .page-banner .banner-video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    opacity: 0; }
    .page-banner .banner-video.is-ready {
      opacity: 1; }
  .page-banner .banner-title {
    position: absolute;
    left: 875px;
    top: 581px;
    width: 826px;
    height: 426px;
    background-image: url("https://img6.99.com/zf/activity/2026/11/weapons/img/img-1-4.png");
    background-repeat: no-repeat; }

.page-weapon {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1080px;
  background-image: url("https://img6.99.com/zf/activity/2026/11/weapons/img/img-55-69.png");
  background-repeat: no-repeat; }
  .page-weapon .weapon-title {
    position: absolute;
    left: 746px;
    top: 59px;
    width: 413px;
    height: 118px;
    background-image: url("https://img6.99.com/zf/activity/2026/11/weapons/img/img-55-70.png");
    background-repeat: no-repeat; }

.panel-weapon-info {
  position: absolute;
  left: 249px;
  top: 163px;
  width: 580px;
  height: 320px;
  padding: 35.6px 93px 97px 86.9px;
  background-image: url("https://img6.99.com/zf/activity/2026/11/weapons/img/img-55-72.png");
  background-repeat: no-repeat; }
  .panel-weapon-info::before {
    content: "";
    position: absolute;
    left: 47px;
    top: 28px;
    width: 365px;
    height: 62px;
    background-image: url("https://img6.99.com/zf/activity/2026/11/weapons/img/img-55-74.png");
    background-repeat: no-repeat;
    pointer-events: none; }
  .panel-weapon-info .weapon-name {
    position: absolute !important;
    word-wrap: break-word;
    transform: translate(-50%, -50%);
    text-align: center;
    left: 218.4px;
    top: 54.6px;
    z-index: 1;
    min-width: 265px;
    font-family: "HYXueJunJ";
    font-size: 38px;
    font-weight: 400;
    line-height: 37.92578px;
    letter-spacing: -0.57px;
    white-space: nowrap;
    background-image: linear-gradient(180deg, #fff088 0%, #fffac2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 10px #af7d1b); }
  .panel-weapon-info .weapon-desc {
    position: absolute;
    left: 87px;
    top: 103px;
    width: 400px;
    height: 120px;
    color: #edddca;
    font-family: "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.135px; }

.weapon-inset-frame {
  position: absolute;
  left: 365px;
  top: 505px;
  width: 293px;
  height: 293px;
  pointer-events: none;
  user-select: none;
  z-index: 0; }
  .weapon-inset-frame::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: url("https://img6.99.com/zf/activity/2026/11/weapons/img/s-pic.png") center/contain no-repeat;
    pointer-events: none; }
  .weapon-inset-frame .weapon-inset-animation {
    position: absolute;
    z-index: 1;
    left: 28px;
    top: 28px;
    width: 237px;
    height: 237px;
    object-fit: contain;
    border-radius: 50%; }

.weapon-stage {
  position: absolute;
  left: 670px;
  top: 310px;
  width: 580px;
  height: 476px; }
  .weapon-stage::before {
    content: "";
    position: absolute;
    left: 101px;
    top: -32px;
    z-index: 0;
    width: 454px;
    height: 599px;
    background-image: url("https://img6.99.com/zf/activity/2026/11/weapons/img/img-55-136.png");
    background-repeat: no-repeat;
    pointer-events: none; }
  .weapon-stage.is-level-02::before {
    background-image: url("https://img6.99.com/zf/activity/2026/11/weapons/img/img-55-135.png"); }
  .weapon-stage.is-level-03::before {
    top: -139px;
    height: 706px;
    background-image: url("https://img6.99.com/zf/activity/2026/11/weapons/img/img-55-134.png"); }
  .weapon-stage.is-level-04::before {
    top: -139px;
    height: 707px;
    background-image: url("https://img6.99.com/zf/activity/2026/11/weapons/img/img-55-133.png"); }

.weapon-preview {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 580px;
  height: 476px; }
  .weapon-preview .img-container {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center; }
  .weapon-preview img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain; }

.weapon-pager {
  position: absolute;
  left: 246px;
  top: 423px;
  display: flex;
  flex-direction: row;
  gap: 1158px; }
  .weapon-pager .btn-pager {
    position: relative;
    flex-shrink: 0;
    width: 138px;
    height: 328px;
    background-repeat: no-repeat; }
  .weapon-pager .is-variant-prev {
    transform: translate(0, 1px); }

.tab-weapon {
  position: absolute;
  left: 300px;
  top: 833px;
  width: 1320px;
  height: 170px;
  display: flex;
  flex-wrap: nowrap; }
  .tab-weapon .tab-weapon-item {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: 170px;
    color: #a3957c;
    background: url("https://img6.99.com/zf/activity/2026/11/weapons/img/img-55-138.png") center top/158px 159px no-repeat; }
  .tab-weapon .img-container {
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -79px;
    width: 158px;
    height: 159px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; }
  .tab-weapon .tab-weapon-icon {
    display: block;
    max-width: 76px;
    max-height: 76px;
    width: auto;
    height: auto; }
  .tab-weapon .tab-weapon-label {
    position: absolute;
    left: 50%;
    top: 122px;
    width: 93px;
    max-width: 100%;
    height: 26px;
    transform: translateX(-50%);
    background: url("https://img6.99.com/zf/activity/2026/11/weapons/img/icon-txt.png") center/100% 100% no-repeat;
    font: 18px/26px "Microsoft YaHei", sans-serif;
    text-align: center;
    white-space: nowrap; }

.tab-level {
  position: absolute;
  left: 1173px;
  top: 277px;
  width: 241px;
  height: 560px;
  background-image: url("https://img6.99.com/zf/activity/2026/11/weapons/img/img-55-162.png");
  background-repeat: no-repeat; }
  .tab-level .tab-level-list {
    position: absolute;
    left: 83px;
    top: 159px;
    width: 199px;
    height: 393px; }
  .tab-level .tab-level-item {
    position: absolute;
    width: 93px;
    height: 95px;
    background-repeat: no-repeat; }
    .tab-level .tab-level-item::after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-image: inherit;
      background-position: inherit;
      background-size: inherit;
      background-repeat: no-repeat;
      opacity: 0.65;
      pointer-events: none; }
    .tab-level .tab-level-item.is-variant-01 {
      left: 0;
      top: 298px;
      background-image: url("https://img6.99.com/zf/activity/2026/11/weapons/img/img-55-165.png"); }
    .tab-level .tab-level-item.is-variant-02 {
      left: 70px;
      top: 212px;
      background-image: url("https://img6.99.com/zf/activity/2026/11/weapons/img/img-55-167.png"); }
    .tab-level .tab-level-item.is-variant-03 {
      left: 106px;
      top: 113px;
      background-image: url("https://img6.99.com/zf/activity/2026/11/weapons/img/img-55-169.png"); }
    .tab-level .tab-level-item.is-variant-04 {
      left: 102px;
      top: 0;
      background-image: url("https://img6.99.com/zf/activity/2026/11/weapons/img/img-55-171.png"); }

.page-soul {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1080px;
  background-image: url("https://img6.99.com/zf/activity/2026/11/weapons/img/img-55-23.png");
  background-repeat: no-repeat; }
  .page-soul .soul-title {
    position: absolute;
    left: 746px;
    top: 104px;
    width: 413px;
    height: 128px;
    background-image: url("https://img6.99.com/zf/activity/2026/11/weapons/img/img-55-34.png");
    background-repeat: no-repeat; }
  .page-soul .soul-pool, .page-soul .soul-orbs {
    position: absolute;
    inset: 0;
    pointer-events: none; }
  .page-soul .item-soul {
    position: absolute; }
    .page-soul .item-soul .img-container {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center; }
    .page-soul .item-soul .item-soul-icon {
      flex: none;
      width: auto;
      height: auto;
      max-width: none;
      user-select: none; }
    .page-soul .item-soul .soul-caption {
      position: absolute;
      z-index: 2;
      width: 82px;
      min-height: 252px;
      background: url("https://img6.99.com/zf/activity/2026/11/weapons/img/img-55-44.png") left top/100% auto no-repeat; }
    .page-soul .item-soul .soul-name {
      margin: 0;
      writing-mode: vertical-rl;
      text-orientation: upright;
      white-space: nowrap;
      font-family: "HYXueJunJ", "Microsoft YaHei", sans-serif;
      font-weight: 400;
      font-size: 34px;
      line-height: 36px;
      letter-spacing: 3px;
      background-image: linear-gradient(180deg, #d8aa52 0%, #ffff77 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent; }
    .page-soul .item-soul.is-soul-bf {
      left: 453px;
      top: 232px;
      width: 129px;
      height: 124px; }
      .page-soul .item-soul.is-soul-bf .soul-caption {
        left: -65px;
        top: -48px;
        padding: 50px 0 0 18px; }
      .page-soul .item-soul.is-soul-bf .soul-name {
        letter-spacing: 8px; }
    .page-soul .item-soul.is-soul-sw {
      left: 1214px;
      top: 308px;
      width: 114px;
      height: 111px; }
      .page-soul .item-soul.is-soul-sw .soul-caption {
        left: 132px;
        top: -63px;
        padding: 51px 0 0 24px;
        background-image: url("https://img6.99.com/zf/activity/2026/11/weapons/img/img-55-48.png"); }
      .page-soul .item-soul.is-soul-sw .soul-name {
        letter-spacing: 10px; }
    .page-soul .item-soul.is-soul-hszb {
      left: 769px;
      top: 427px;
      width: 106px;
      height: 105px; }
      .page-soul .item-soul.is-soul-hszb .soul-caption {
        left: -55px;
        top: -45px;
        padding: 35px 0 0 22px; }
      .page-soul .item-soul.is-soul-hszb .soul-name {
        font-size: 28px;
        line-height: 30px;
        letter-spacing: 2px; }
    .page-soul .item-soul.is-soul-hfgl {
      left: 537px;
      top: 620px;
      width: 133px;
      height: 128px; }
      .page-soul .item-soul.is-soul-hfgl .soul-caption {
        left: -67px;
        top: -60px;
        padding: 41px 0 0 22px; }
    .page-soul .item-soul.is-soul-hbsc {
      left: 1366px;
      top: 611px;
      width: 98px;
      height: 94px; }
      .page-soul .item-soul.is-soul-hbsc .soul-caption {
        left: 108px;
        top: -69px;
        padding: 33px 0 0 22px;
        background-image: url("https://img6.99.com/zf/activity/2026/11/weapons/img/img-55-48.png"); }
    .page-soul .item-soul.is-color-blue {
      width: 132px;
      height: 128px; }
    .page-soul .item-soul.is-color-green {
      width: 109px;
      height: 105px; }
    .page-soul .item-soul.is-color-purple {
      width: 159px;
      height: 155px; }
    .page-soul .item-soul.is-soul-b1 {
      left: 552px;
      top: 410px; }
    .page-soul .item-soul.is-soul-b2 {
      left: 1137px;
      top: 634px; }
    .page-soul .item-soul.is-soul-g1 {
      left: 1010px;
      top: 568px; }
    .page-soul .item-soul.is-soul-g2 {
      left: 653px;
      top: 311px; }
    .page-soul .item-soul.is-soul-p1 {
      left: 802px;
      top: 579px; }
    .page-soul .item-soul.is-soul-p2 {
      left: 945px;
      top: 411px; }

.soul-tip {
  position: absolute;
  left: 596px;
  top: 855px;
  width: 728px;
  height: 36px;
  background-image: url("https://img6.99.com/zf/activity/2026/11/weapons/img/img-55-39.png");
  background-repeat: no-repeat; }
  .soul-tip .soul-tip-text {
    position: absolute !important;
    word-wrap: break-word;
    transform: translate(-50%, -50%);
    text-align: center;
    left: 364px;
    top: 17.5px;
    min-width: 392px;
    color: #fffa77;
    font-size: 20px;
    font-weight: 400;
    line-height: 25.40039px;
    letter-spacing: 0;
    white-space: nowrap; }

.btn-details {
  position: absolute;
  left: 850px;
  top: 895px;
  width: 219px;
  height: 61px;
  background-image: url("https://img6.99.com/zf/activity/2026/11/weapons/img/img-55-36.png");
  background-repeat: no-repeat; }
  .btn-details .btn-details-label {
    position: absolute !important;
    word-wrap: break-word;
    transform: translate(-50%, -50%);
    text-align: center;
    left: 108px;
    top: 25.5px;
    min-width: 90px;
    color: #714e29;
    font-size: 22px;
    font-weight: 400;
    line-height: 29.03613px;
    letter-spacing: 0;
    white-space: nowrap; }

.nav-activity {
  right: 24px;
  top: 287px;
  width: 108px;
  height: 322px; }
  .nav-activity::before {
    content: "";
    position: absolute;
    left: 44px;
    top: 47px;
    width: 25px;
    height: 369px;
    background-image: url("https://img6.99.com/zf/activity/2026/11/weapons/img/img-55-80.png");
    background-repeat: no-repeat;
    pointer-events: none; }
  .nav-activity .nav-activity-item {
    position: absolute;
    left: 0;
    width: 108px;
    height: 106px;
    background-image: url("https://img6.99.com/zf/activity/2026/11/weapons/img/img-55-81.png");
    background-repeat: no-repeat; }
    .nav-activity .nav-activity-item.is-variant-home {
      top: 0; }
    .nav-activity .nav-activity-item.is-variant-weapon {
      top: 109px; }
    .nav-activity .nav-activity-item.is-variant-soul {
      top: 216px; }
  .nav-activity .nav-activity-label {
    position: absolute !important;
    word-wrap: break-word;
    transform: translate(-50%, -50%);
    text-align: center;
    left: 55px;
    min-width: 46px;
    color: #ffd68e;
    font-family: "HYXueJunJ";
    font-size: 22px;
    font-weight: 400;
    line-height: 21.95703px;
    letter-spacing: -0.396px; }
  .nav-activity .is-variant-home .nav-activity-label {
    top: 52px;
    white-space: nowrap; }
  .nav-activity .is-variant-weapon .nav-activity-label {
    top: 53px; }
  .nav-activity .is-variant-soul .nav-activity-label {
    top: 52px; }

.page-banner .btn-play {
  position: absolute;
  left: 1620px;
  top: 720px;
  z-index: 2;
  width: 99px;
  height: 96px;
  background: url("https://img6.99.com/zf/activity/2026/11/weapons/img/btn-play.png") center/contain no-repeat;
  border-radius: 50%; }

.video-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 24px 24px;
  background: rgba(0, 0, 0, 0.86); }

.video-dialog {
  position: relative;
  width: 1100px;
  max-width: 100%;
  max-height: 100%;
  border: 1px solid rgba(229, 186, 110, 0.7);
  background: #000;
  box-shadow: 0 0 36px rgba(216, 158, 67, 0.2); }

.weapon-video {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100vh - 86px);
  background: #000; }

.video-close {
  position: absolute;
  right: 0;
  top: -46px;
  width: 38px;
  height: 38px;
  border: 1px solid #d7b471;
  border-radius: 50%;
  color: #ffe4b2;
  background: #231a10;
  font: 30px/34px Arial, sans-serif; }

.video-error {
  padding: 16px;
  color: #ffe4b2;
  text-align: center; }

.app.is-stage-short {
  --page-title-safe-top: calc(540px + (53px - 50vh) / var(--app-scale, 1)); }
  .app.is-stage-short .page-weapon .weapon-title {
    top: max(59px, var(--page-title-safe-top)); }
  .app.is-stage-short .page-soul .soul-title {
    top: max(104px, var(--page-title-safe-top)); }

.page-soul .item-soul::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none; }
.page-soul .item-soul .img-container {
  z-index: 1; }
.page-soul .item-soul.is-color-blue::before {
  background-image: url("https://img6.99.com/zf/activity/2026/11/weapons/img/icon-blue.png"); }
.page-soul .item-soul.is-color-green::before {
  background-image: url("https://img6.99.com/zf/activity/2026/11/weapons/img/icon-green.png"); }
.page-soul .item-soul.is-color-purple::before {
  background-image: url("https://img6.99.com/zf/activity/2026/11/weapons/img/icon-purple.png"); }
.page-soul .item-soul.is-soul-bf::before {
  left: -60px;
  top: -53px;
  width: 237px;
  height: 234px;
  background-image: url("https://img6.99.com/zf/activity/2026/11/weapons/img/soul/orb-01.png"); }
.page-soul .item-soul.is-soul-sw::before {
  left: -147px;
  top: -84px;
  width: 345px;
  height: 341px;
  background-image: url("https://img6.99.com/zf/activity/2026/11/weapons/img/soul/orb-02.png"); }
.page-soul .item-soul.is-soul-hszb::before {
  left: -34px;
  top: -36px;
  width: 175px;
  height: 177px;
  background-image: url("https://img6.99.com/zf/activity/2026/11/weapons/img/soul/orb-05.png"); }
.page-soul .item-soul.is-soul-hfgl::before {
  left: -71px;
  top: -70px;
  width: 390px;
  height: 271px;
  background-image: url("https://img6.99.com/zf/activity/2026/11/weapons/img/soul/orb-03.png"); }
.page-soul .item-soul.is-soul-hbsc::before {
  left: -68px;
  top: -70px;
  width: 237px;
  height: 236px;
  background-image: url("https://img6.99.com/zf/activity/2026/11/weapons/img/soul/orb-04.png"); }

.public_top_full_bg {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%; }

#app > #logo {
  position: fixed;
  left: 24px;
  top: 60px;
  z-index: 50;
  width: 7vw;
  min-width: 84px;
  max-width: 140px;
  height: auto;
  margin: 0;
  padding: 0;
  line-height: 0;
  background: none !important; }
  #app > #logo a {
    display: block; }
  #app > #logo img {
    display: block;
    width: 100% !important;
    height: auto; }

@media (max-width: 1366px) {
  #app > #logo {
    left: 16px;
    top: 57px; }
 }

@media (max-width: 800px) {
  #app > #logo {
    left: 12px;
    top: 55px; }
 }

.go-footer {
  position: fixed;
  bottom: 30px;
  right: 30px;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  color: #000;
  background: rgba(255, 255, 255, 0.75);
  z-index: 60;
  padding: 0 20px;
  border-radius: 15px; }
  .go-footer i {
    display: inline-block;
    width: 22px;
    height: 22px;
    background: url("https://img6.99.com/zf/activity/2026/11/weapons/img/icon-arrow.png") no-repeat;
    margin-left: 5px;
    vertical-align: middle; }

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  max-height: 80vh;
  overflow: auto;
  padding: 20px 0;
  font-size: 12px;
  color: #fff;
  background: #000;
  z-index: 50; }
  .footer a {
    color: #fff; }

.app {
  --app-scale: 1;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  min-height: 0; }

.app > main {
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  min-width: 0;
  min-height: 0;
  transform: scale(var(--app-scale, 1)); }

.app.is-stage-short {
  overflow: hidden; }

.app.is-stage-short > main {
  top: 50%;
  transform-origin: center center; }

.app.is-stage-long {
  min-height: 100%;
  height: calc(var(--design-h) * 1px * var(--app-scale, 1)); }

.app.is-stage-long > main {
  top: 0;
  transform-origin: top center; }

.main-wrapper {
  position: absolute;
  width: calc(var(--design-w) * 1px);
  max-width: calc(var(--design-w) * 1px);
  height: calc(var(--design-h) * 1px);
  min-height: 0;
  -webkit-mask-image: var(--stage-edge-mask, none);
  mask-image: var(--stage-edge-mask, none);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%; }

.app.is-stage-short .main-wrapper {
  top: 50%;
  left: 50%;
  margin: calc(var(--design-h) * -0.5 * 1px) 0 0 calc(var(--design-w) * -0.5 * 1px);
  overflow: hidden; }

.app.is-stage-long .main-wrapper {
  top: 0;
  left: 50%;
  margin: 0 0 0 calc(var(--design-w) * -0.5 * 1px); }

.app > nav {
  transform: scale(var(--app-scale, 1));
  transform-origin: top left; }

.app.is-scale-locked {
  --stage-edge-mask: linear-gradient(to right, rgba(135, 224, 253, 0) 0%, #87e0fd 1%, #000000 99%, rgba(5, 171, 224, 0)); }

/* ==========================================================================
   01. Shared animation helpers
   ========================================================================== */
@keyframes aniFadeIn {
  from {
    opacity: 0; }

  to {
    opacity: 1; } }

/* ==========================================================================
   02. Page mask transition
   ========================================================================== */
.main-wrapper > .swiper-container > .swiper-wrapper > .page.swiper-slide.active.mask {
  z-index: 20;
  -webkit-mask-image: url("https://img6.99.com/zf/activity/2026/11/weapons/img/masks/mask-center.png");
  mask-image: url("https://img6.99.com/zf/activity/2026/11/weapons/img/masks/mask-center.png");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 3000% 100%;
  mask-size: 3000% 100%;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  -webkit-animation: pageMaskCenter 0.8s steps(29) both;
  animation: pageMaskCenter 0.8s steps(29) both; }

@keyframes pageMaskCenter {
  100% {
    -webkit-mask-position: 100% center;
    mask-position: 100% center; } }

/* ==========================================================================
   03. Weapon entrances, controls and ground light
   ========================================================================== */
/* Keep entrance transforms on wrappers so artwork alignment is unchanged. */
.page-weapon {
  /* Keep the light anchored; only the outgoing stage fades during switching. */ }
  .page-weapon .weapon-info-entry, .page-weapon .weapon-stage-entry {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; }
  .page-weapon .panel-weapon-info {
    pointer-events: auto; }
  .page-weapon.active .weapon-info-entry {
    animation: weaponInfoReveal 0.5s 0.3s both; }
  .page-weapon.active .tab-weapon, .page-weapon.active .weapon-pager {
    animation: weaponControlsReveal 0.5s 0.9s both; }
  .page-weapon .weapon-display-enter-active {
    transition: opacity 0.15s ease; }
  .page-weapon .weapon-display-leave-active {
    transition: opacity 0.22s ease;
    pointer-events: none; }
  .page-weapon .weapon-display-enter {
    opacity: 0; }
  .page-weapon .weapon-display-leave-to {
    opacity: 0; }
  .page-weapon .weapon-info-enter-active {
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
    .page-weapon .weapon-info-enter-active .weapon-desc {
      animation: weaponDescriptionReveal 0.5s 0.08s both; }
  .page-weapon .weapon-info-leave-active {
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: none; }
  .page-weapon .weapon-info-enter {
    opacity: 0;
    transform: translateX(-20%); }
  .page-weapon .weapon-info-leave-to {
    opacity: 0;
    transform: translateX(20px); }
  .page-weapon .tab-weapon-item {
    transition: color 0.3s ease; }
    .page-weapon .tab-weapon-item.is-active {
      color: #fff; }
      .page-weapon .tab-weapon-item.is-active .tab-weapon-label {
        background-image: url("https://img6.99.com/zf/activity/2026/11/weapons/img/icon-txt-on.png"); }
    .page-weapon .tab-weapon-item::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 0;
      margin-left: -79px;
      width: 158px;
      height: 159px;
      background: url("https://img6.99.com/zf/activity/2026/11/weapons/img/img-55-139.png") no-repeat;
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none; }
    .page-weapon .tab-weapon-item .img-container {
      transition: transform 0.3s ease, filter 0.3s ease; }
    .page-weapon .tab-weapon-item:hover::before, .page-weapon .tab-weapon-item:focus-visible::before, .page-weapon .tab-weapon-item.is-active::before {
      opacity: 1; }
    .page-weapon .tab-weapon-item:hover .img-container, .page-weapon .tab-weapon-item:focus-visible .img-container, .page-weapon .tab-weapon-item.is-active .img-container {
      transform: translateY(-4px) scale(1.04);
      filter: brightness(1.1); }
    .page-weapon .tab-weapon-item:active .img-container {
      transform: translateY(-1px) scale(0.98); }
  .page-weapon .btn-pager, .page-weapon .tab-level-item {
    transition: transform 0.3s ease, filter 0.3s ease; }
    .page-weapon .btn-pager:hover, .page-weapon .btn-pager:focus-visible, .page-weapon .tab-level-item:hover, .page-weapon .tab-level-item:focus-visible {
      filter: brightness(1.15); }
  .page-weapon .btn-pager::before {
    content: "";
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    pointer-events: none;
    animation: weaponPagerDrift 1.8s ease-in-out infinite;
    animation-play-state: paused; }
  .page-weapon .btn-pager.is-variant-prev::before {
    background-image: url("https://img6.99.com/zf/activity/2026/11/weapons/img/img-55-78.png");
    --pager-drift: -10px; }
  .page-weapon .btn-pager.is-variant-next::before {
    background-image: url("https://img6.99.com/zf/activity/2026/11/weapons/img/img-55-77.png");
    --pager-drift: 10px; }
  .page-weapon.active .btn-pager::before {
    animation-play-state: running; }
  .page-weapon.active .btn-pager:hover::before, .page-weapon.active .btn-pager:focus-visible::before {
    animation-play-state: paused; }
  .page-weapon .tab-level-item:hover, .page-weapon .tab-level-item:focus-visible {
    transform: translateY(-3px); }
  .page-weapon .tab-weapon-item:focus-visible, .page-weapon .tab-level-item:focus-visible, .page-weapon .btn-pager:focus-visible {
    outline: 2px solid #ffe374;
    outline-offset: -12px; }

.tab-level .tab-level-item.is-active::after, .tab-level .tab-level-item.is-normal:hover::after {
  opacity: 0.4; }
.tab-level .tab-level-item.is-variant-01.is-active, .tab-level .tab-level-item.is-variant-01.is-normal:hover {
  background-image: url("https://img6.99.com/zf/activity/2026/11/weapons/img/img-55-166.png"); }
.tab-level .tab-level-item.is-variant-02.is-active, .tab-level .tab-level-item.is-variant-02.is-normal:hover {
  background-image: url("https://img6.99.com/zf/activity/2026/11/weapons/img/img-55-168.png"); }
.tab-level .tab-level-item.is-variant-03.is-active, .tab-level .tab-level-item.is-variant-03.is-normal:hover {
  background-image: url("https://img6.99.com/zf/activity/2026/11/weapons/img/img-55-170.png"); }
.tab-level .tab-level-item.is-variant-04.is-active, .tab-level .tab-level-item.is-variant-04.is-normal:hover {
  background-image: url("https://img6.99.com/zf/activity/2026/11/weapons/img/img-55-172.png"); }

@keyframes weaponPagerDrift {
  0%, 100% {
    transform: translateX(0); }

  50% {
    transform: translateX(var(--pager-drift)); } }

@keyframes weaponInfoReveal {
  from {
    opacity: 0;
    transform: translateX(-116px); }

  to {
    opacity: 1;
    transform: translateX(0); } }

@keyframes weaponControlsReveal {
  from {
    opacity: 0;
    transform: translateY(28px); }

  to {
    opacity: 1;
    transform: translateY(0); } }

@keyframes weaponDescriptionReveal {
  from {
    opacity: 0;
    transform: translateX(-16px); }

  to {
    opacity: 1;
    transform: translateX(0); } }

/* Separate emergence and idle transforms from image alignment and stage transitions. */
.page-weapon .weapon-emergence {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  clip-path: polygon(-100% -100%, 200% -100%, 200% 112%, -100% 112%); }
.page-weapon .weapon-hover {
  position: absolute;
  inset: 0; }
.page-weapon .weapon-preview {
  transform-origin: 56% 50%;
  filter: brightness(1.38) drop-shadow(0 0 6px rgba(var(--ground-light-rgb), 0.72)) drop-shadow(0 0 20px rgba(var(--ground-light-rgb), 0.48)); }
.page-weapon.active .weapon-stage::before {
  animation: weaponLightLaunch 0.8s ease-out both, weaponLightBreathe 3.8s 0.8s ease-in-out infinite; }
.page-weapon.active .weapon-ground-light {
  animation: weaponLightLaunch 0.65s ease-out both; }
.page-weapon.active .weapon-preview {
  animation: weaponEmerge 1.15s 0.48s cubic-bezier(0.22, 0.7, 0.3, 1) both; }
.page-weapon.active .weapon-hover {
  animation: weaponHover 4.2s 1.63s ease-in-out infinite both; }

@keyframes weaponLightLaunch {
  0% {
    opacity: 0;
    transform: scaleY(0.025); }

  18% {
    opacity: 1; }

  72% {
    opacity: 1;
    transform: scaleY(1.06); }

  100% {
    opacity: 1;
    transform: scaleY(1); } }

/* Light builds with the ascent instead of starting bright and dimming. */
@keyframes weaponEmerge {
  0%, 8% {
    opacity: 0;
    transform: translateY(270px) scale(0.64);
    filter: brightness(0.72) drop-shadow(0 0 0px rgba(var(--ground-light-rgb), 0)) drop-shadow(0 0 0px rgba(var(--ground-light-rgb), 0)); }

  35% {
    opacity: 0.85;
    filter: brightness(1.02) drop-shadow(0 0 2px rgba(var(--ground-light-rgb), 0.24)) drop-shadow(0 0 6px rgba(var(--ground-light-rgb), 0.12)); }

  72% {
    opacity: 1;
    filter: brightness(1.22) drop-shadow(0 0 4px rgba(var(--ground-light-rgb), 0.5)) drop-shadow(0 0 13px rgba(var(--ground-light-rgb), 0.3)); }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: brightness(1.38) drop-shadow(0 0 6px rgba(var(--ground-light-rgb), 0.72)) drop-shadow(0 0 20px rgba(var(--ground-light-rgb), 0.48)); } }

@keyframes weaponHover {
  0%, 100% {
    transform: translateY(0); }

  50% {
    transform: translateY(-13px); } }

/* Ground light stays behind the weapon and shares its keyed tier transition. */
.page-weapon .weapon-stage {
  --ground-light-rgb: 126, 255, 151; }
  .page-weapon .weapon-stage.is-level-02 {
    --ground-light-rgb: 123, 208, 255; }
  .page-weapon .weapon-stage.is-level-03 {
    --ground-light-rgb: 219, 150, 255; }
  .page-weapon .weapon-stage.is-level-04 {
    --ground-light-rgb: 255, 211, 104; }
  .page-weapon .weapon-stage::before {
    filter: brightness(1.2);
    transform-origin: center calc(100% - 56px); }
.page-weapon .weapon-ground-light {
  position: absolute;
  left: 101px;
  top: 295px;
  z-index: 0;
  width: 454px;
  height: 240px;
  pointer-events: none;
  transform-origin: center calc(100% - 24px); }
  .page-weapon .weapon-ground-light::before {
    content: "";
    position: absolute;
    left: 18px;
    bottom: 2px;
    width: 410px;
    height: 48px;
    background: radial-gradient(ellipse, rgba(255, 250, 221, 0.48) 0%, rgba(var(--ground-light-rgb), 0.3) 28%, rgba(var(--ground-light-rgb), 0) 70%);
    transform-origin: center;
    animation: weaponGroundPulse 3.8s ease-in-out infinite;
    animation-play-state: paused; }
.page-weapon .weapon-ground-ray {
  position: absolute;
  left: 10%;
  bottom: 24px;
  width: 7px;
  height: 156px;
  border-radius: 60% 60% 0 0;
  background: linear-gradient(to top, rgba(255, 255, 231, 0.9), rgba(var(--ground-light-rgb), 0.65) 24%, rgba(var(--ground-light-rgb), 0) 100%);
  box-shadow: 0 4px 12px rgba(var(--ground-light-rgb), 0.22);
  filter: blur(1px);
  opacity: 0;
  transform-origin: center bottom;
  animation: weaponLightRise 2.8s ease-out infinite;
  animation-play-state: paused; }
  .page-weapon .weapon-ground-ray::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 3px;
    height: 5px;
    border-radius: 50%;
    background: rgb(var(--ground-light-rgb));
    box-shadow: 0 0 7px rgba(var(--ground-light-rgb), 0.9);
    opacity: 0;
    animation: weaponLightSpark 3.2s ease-out infinite;
    animation-play-state: paused; }
  .page-weapon .weapon-ground-ray:nth-child(2) {
    left: 22%;
    height: 215px;
    width: 5px;
    animation-delay: -1.6s; }
  .page-weapon .weapon-ground-ray:nth-child(3) {
    left: 36%;
    height: 180px;
    width: 9px;
    animation-delay: -0.7s; }
  .page-weapon .weapon-ground-ray:nth-child(4) {
    left: 49%;
    height: 235px;
    width: 5px;
    animation-delay: -2.1s; }
  .page-weapon .weapon-ground-ray:nth-child(5) {
    left: 62%;
    height: 190px;
    width: 8px;
    animation-delay: -1.1s; }
  .page-weapon .weapon-ground-ray:nth-child(6) {
    left: 74%;
    height: 160px;
    width: 5px;
    animation-delay: -2.5s; }
  .page-weapon .weapon-ground-ray:nth-child(7) {
    left: 86%;
    height: 120px;
    width: 6px;
    animation-delay: -0.3s; }
  .page-weapon .weapon-ground-ray:nth-child(2n)::after {
    animation-delay: -1.2s;
    animation-duration: 2.7s; }
  .page-weapon .weapon-ground-ray:nth-child(3n)::after {
    animation-delay: -2.3s;
    animation-duration: 3.7s; }
.page-weapon.active .weapon-stage::before, .page-weapon.active .weapon-ground-light::before, .page-weapon.active .weapon-ground-ray, .page-weapon.active .weapon-ground-ray::after {
  animation-play-state: running; }

@keyframes weaponLightBreathe {
  0%, 100% {
    filter: brightness(1.12); }

  50% {
    filter: brightness(1.38); } }

@keyframes weaponGroundPulse {
  0%, 100% {
    opacity: 0.6;
    transform: scaleX(0.94); }

  50% {
    opacity: 1;
    transform: scaleX(1.04); } }

@keyframes weaponLightRise {
  0% {
    opacity: 0;
    transform: scaleY(0.12) scaleX(0.7); }

  25% {
    opacity: 0.65; }

  60% {
    opacity: 0.36; }

  100% {
    opacity: 0;
    transform: scaleY(1.08) scaleX(0.45); } }

@keyframes weaponLightSpark {
  0% {
    opacity: 0;
    transform: translateY(0); }

  18% {
    opacity: 0.85; }

  100% {
    opacity: 0;
    transform: translateY(-210px); } }

/* ==========================================================================
   04. Tier arc expansion
   ========================================================================== */
/* All tier buttons start at tier 4, then follow the same design-space arc.
   Top-left positions: IV (102, 0), III (106, 113), II (70, 212), I (0, 298).
   Sample a single cubic curve so the three moving buttons share its trajectory. */
@keyframes weaponTierOneArc {
  0% {
    transform: translate(102px, -298px);
    pointer-events: none; }

  5% {
    transform: translate(107.66223px, -263.44px); }

  10% {
    transform: translate(109.53249px, -231.81588px); }

  15% {
    transform: translate(108.28168px, -202.92426px); }

  20% {
    transform: translate(104.51251px, -176.57805px); }

  25% {
    transform: translate(98.76489px, -152.60559px); }

  30% {
    transform: translate(91.52088px, -130.84982px); }

  35% {
    transform: translate(83.2094px, -111.16747px); }

  40% {
    transform: translate(74.21069px, -93.42835px); }

  45% {
    transform: translate(64.86034px, -77.51465px); }

  50% {
    transform: translate(55.45313px, -63.32031px); }

  55% {
    transform: translate(46.24651px, -50.75045px); }

  60% {
    transform: translate(37.46381px, -39.72083px); }

  65% {
    transform: translate(29.29708px, -30.15736px); }

  70% {
    transform: translate(21.90972px, -21.99568px); }

  75% {
    transform: translate(15.43872px, -15.18079px); }

  80% {
    transform: translate(9.99667px, -9.66669px); }

  85% {
    transform: translate(5.6734px, -5.41614px); }

  90% {
    transform: translate(2.53737px, -2.4004px); }

  95% {
    transform: translate(0.63671px, -0.59909px);
    pointer-events: none; }

  100% {
    transform: translate(0px, 0px);
    pointer-events: auto; } }

@keyframes weaponTierTwoArc {
  0% {
    transform: translate(32px, -212px);
    pointer-events: none; }

  5% {
    transform: translate(36.20284px, -188.81895px); }

  10% {
    transform: translate(38.61367px, -167.34719px); }

  15% {
    transform: translate(39.51638px, -147.4967px); }

  20% {
    transform: translate(39.17005px, -129.18579px); }

  25% {
    transform: translate(37.81055px, -112.33887px); }

  30% {
    transform: translate(35.65201px, -96.88613px); }

  35% {
    transform: translate(32.88822px, -82.76339px); }

  40% {
    transform: translate(29.69395px, -69.91181px); }

  45% {
    transform: translate(26.22613px, -58.27774px); }

  50% {
    transform: translate(22.625px, -47.8125px); }

  55% {
    transform: translate(19.01514px, -38.47223px); }

  60% {
    transform: translate(15.50643px, -30.21773px); }

  65% {
    transform: translate(12.19487px, -23.01428px); }

  70% {
    transform: translate(9.16337px, -16.83157px); }

  75% {
    transform: translate(6.48242px, -11.64355px); }

  80% {
    transform: translate(4.21069px, -7.42835px); }

  85% {
    transform: translate(2.39548px, -4.16818px); }

  90% {
    transform: translate(1.07319px, -1.84927px); }

  95% {
    transform: translate(0.26957px, -0.46183px);
    pointer-events: none; }

  100% {
    transform: translate(0px, 0px);
    pointer-events: auto; } }

@keyframes weaponTierThreeArc {
  0% {
    transform: translate(-4px, -113px);
    pointer-events: none; }

  5% {
    transform: translate(-1.68272px, -101.33864px); }

  10% {
    transform: translate(0.11656px, -90.40627px); }

  15% {
    transform: translate(1.46523px, -80.18149px); }

  20% {
    transform: translate(2.42586px, -70.64422px); }

  25% {
    transform: translate(3.0564px, -61.77576px); }

  30% {
    transform: translate(3.41035px, -53.55864px); }

  35% {
    transform: translate(3.53696px, -45.9767px); }

  40% {
    transform: translate(3.48134px, -39.01498px); }

  45% {
    transform: translate(3.28469px, -32.65974px); }

  50% {
    transform: translate(2.98438px, -26.89844px); }

  55% {
    transform: translate(2.61407px, -21.71968px); }

  60% {
    transform: translate(2.2039px, -17.11322px); }

  65% {
    transform: translate(1.78054px, -13.06993px); }

  70% {
    transform: translate(1.36727px, -9.58182px); }

  75% {
    transform: translate(0.98413px, -6.64197px); }

  80% {
    transform: translate(0.64794px, -4.24454px); }

  85% {
    transform: translate(0.37236px, -2.3848px); }

  90% {
    transform: translate(0.168px, -1.05903px); }

  95% {
    transform: translate(0.04237px, -0.26463px);
    pointer-events: none; }

  100% {
    transform: translate(0px, 0px);
    pointer-events: auto; } }

.page-weapon .tab-level-item.is-variant-04 {
  z-index: 4; }
.page-weapon.active .tab-level {
  animation: aniFadeIn 0.35s 0.35s both; }
.page-weapon.active .tab-level-item.is-variant-01 {
  animation: weaponTierOneArc 1.2s 0.65s linear backwards; }
.page-weapon.active .tab-level-item.is-variant-02 {
  animation: weaponTierTwoArc 1.05s 0.75s linear backwards; }
.page-weapon.active .tab-level-item.is-variant-03 {
  animation: weaponTierThreeArc 0.85s 0.85s linear backwards; }

/* ==========================================================================
   05. Rising light particles
   ========================================================================== */
/* Decorative motes originate at the ground line, behind the weapon artwork. */
.page-weapon .weapon-stage {
  --particle-deep: #20b94e;
  --particle-pale: #d8ffe3; }
  .page-weapon .weapon-stage.is-level-02 {
    --particle-deep: #238fe3;
    --particle-pale: #dcefff; }
  .page-weapon .weapon-stage.is-level-03 {
    --particle-deep: #a34ade;
    --particle-pale: #f0dfff; }
  .page-weapon .weapon-stage.is-level-04 {
    --particle-deep: #e5a321;
    --particle-pale: #fff3d0; }
.page-weapon .weapon-ground-particles {
  position: absolute;
  inset: 0;
  pointer-events: none; }
.page-weapon .weapon-ground-particle {
  position: absolute;
  border-radius: 50%;
  color: var(--particle-deep);
  background: radial-gradient(circle, #fff 0%, var(--particle-pale) 24%, currentColor 60%, transparent 100%);
  box-shadow: 0 0 4px 1px var(--particle-pale), 0 0 10px 2px currentColor, 0 0 20px currentColor;
  opacity: 0;
  animation: weaponParticleRise 4s linear infinite;
  animation-play-state: paused; }
  .page-weapon .weapon-ground-particle:nth-child(1) {
    left: 42%;
    bottom: 25px;
    width: 7px;
    height: 7px;
    --particle-drift: -5px;
    --particle-rise: -309px;
    animation-duration: 5.5s;
    animation-delay: -0.37s; }
  .page-weapon .weapon-ground-particle:nth-child(2) {
    left: 79%;
    bottom: 32px;
    width: 6px;
    height: 6px;
    --particle-drift: 12px;
    --particle-rise: -338px;
    animation-duration: 4.6s;
    animation-delay: -0.74s; }
  .page-weapon .weapon-ground-particle:nth-child(3) {
    left: 25%;
    bottom: 24px;
    width: 5px;
    height: 5px;
    --particle-drift: -16px;
    --particle-rise: -367px;
    animation-duration: 5.9s;
    animation-delay: -1.11s; }
  .page-weapon .weapon-ground-particle:nth-child(4) {
    left: 62%;
    bottom: 31px;
    width: 4px;
    height: 4px;
    --particle-drift: 1px;
    --particle-rise: -396px;
    animation-duration: 5s;
    animation-delay: -1.48s; }
  .page-weapon .weapon-ground-particle:nth-child(5) {
    left: 8%;
    bottom: 23px;
    width: 7px;
    height: 7px;
    --particle-drift: 18px;
    --particle-rise: -425px;
    animation-duration: 6.3s;
    animation-delay: -1.85s; }
  .page-weapon .weapon-ground-particle:nth-child(6) {
    left: 45%;
    bottom: 30px;
    width: 6px;
    height: 6px;
    --particle-drift: -10px;
    --particle-rise: -283px;
    animation-duration: 5.4s;
    animation-delay: -2.22s; }
  .page-weapon .weapon-ground-particle:nth-child(7) {
    left: 82%;
    bottom: 22px;
    width: 5px;
    height: 5px;
    --particle-drift: 7px;
    --particle-rise: -312px;
    animation-duration: 4.5s;
    animation-delay: -2.59s; }
  .page-weapon .weapon-ground-particle:nth-child(8) {
    left: 28%;
    bottom: 29px;
    width: 4px;
    height: 4px;
    --particle-drift: -21px;
    --particle-rise: -341px;
    animation-duration: 5.8s;
    animation-delay: -2.96s; }
  .page-weapon .weapon-ground-particle:nth-child(9) {
    left: 65%;
    bottom: 21px;
    width: 7px;
    height: 7px;
    --particle-drift: -4px;
    --particle-rise: -370px;
    animation-duration: 4.9s;
    animation-delay: -3.33s; }
  .page-weapon .weapon-ground-particle:nth-child(10) {
    left: 11%;
    bottom: 28px;
    width: 6px;
    height: 6px;
    --particle-drift: 13px;
    --particle-rise: -399px;
    animation-duration: 6.2s;
    animation-delay: -3.7s; }
  .page-weapon .weapon-ground-particle:nth-child(11) {
    left: 48%;
    bottom: 20px;
    width: 5px;
    height: 5px;
    --particle-drift: -15px;
    --particle-rise: -428px;
    animation-duration: 5.3s;
    animation-delay: -4.07s; }
  .page-weapon .weapon-ground-particle:nth-child(12) {
    left: 85%;
    bottom: 27px;
    width: 4px;
    height: 4px;
    --particle-drift: 2px;
    --particle-rise: -286px;
    animation-duration: 4.4s;
    animation-delay: -4.44s; }
  .page-weapon .weapon-ground-particle:nth-child(13) {
    left: 31%;
    bottom: 19px;
    width: 7px;
    height: 7px;
    --particle-drift: 19px;
    --particle-rise: -315px;
    animation-duration: 5.7s;
    animation-delay: -4.81s; }
  .page-weapon .weapon-ground-particle:nth-child(14) {
    left: 68%;
    bottom: 26px;
    width: 6px;
    height: 6px;
    --particle-drift: -9px;
    --particle-rise: -344px;
    animation-duration: 4.8s;
    animation-delay: -5.18s; }
  .page-weapon .weapon-ground-particle:nth-child(15) {
    left: 14%;
    bottom: 18px;
    width: 5px;
    height: 5px;
    --particle-drift: 8px;
    --particle-rise: -373px;
    animation-duration: 6.1s;
    animation-delay: -5.55s; }
  .page-weapon .weapon-ground-particle:nth-child(16) {
    left: 51%;
    bottom: 25px;
    width: 4px;
    height: 4px;
    --particle-drift: -20px;
    --particle-rise: -402px;
    animation-duration: 5.2s;
    animation-delay: -5.92s; }
  .page-weapon .weapon-ground-particle:nth-child(17) {
    left: 88%;
    bottom: 32px;
    width: 7px;
    height: 7px;
    --particle-drift: -3px;
    --particle-rise: -431px;
    animation-duration: 4.3s;
    animation-delay: -6.29s; }
  .page-weapon .weapon-ground-particle:nth-child(18) {
    left: 34%;
    bottom: 24px;
    width: 6px;
    height: 6px;
    --particle-drift: 14px;
    --particle-rise: -289px;
    animation-duration: 5.6s;
    animation-delay: -6.66s; }
  .page-weapon .weapon-ground-particle:nth-child(19) {
    left: 71%;
    bottom: 31px;
    width: 5px;
    height: 5px;
    --particle-drift: -14px;
    --particle-rise: -318px;
    animation-duration: 4.7s;
    animation-delay: -7.03s; }
  .page-weapon .weapon-ground-particle:nth-child(20) {
    left: 17%;
    bottom: 23px;
    width: 4px;
    height: 4px;
    --particle-drift: 3px;
    --particle-rise: -347px;
    animation-duration: 6s;
    animation-delay: -7.4s; }
  .page-weapon .weapon-ground-particle:nth-child(21) {
    left: 54%;
    bottom: 30px;
    width: 7px;
    height: 7px;
    --particle-drift: 20px;
    --particle-rise: -376px;
    animation-duration: 5.1s;
    animation-delay: -7.77s; }
  .page-weapon .weapon-ground-particle:nth-child(22) {
    left: 91%;
    bottom: 22px;
    width: 6px;
    height: 6px;
    --particle-drift: -8px;
    --particle-rise: -405px;
    animation-duration: 4.2s;
    animation-delay: -8.14s; }
  .page-weapon .weapon-ground-particle:nth-child(23) {
    left: 37%;
    bottom: 29px;
    width: 5px;
    height: 5px;
    --particle-drift: 9px;
    --particle-rise: -434px;
    animation-duration: 5.5s;
    animation-delay: -8.51s; }
  .page-weapon .weapon-ground-particle:nth-child(24) {
    left: 74%;
    bottom: 21px;
    width: 4px;
    height: 4px;
    --particle-drift: -19px;
    --particle-rise: -292px;
    animation-duration: 4.6s;
    animation-delay: -8.88s; }
.page-weapon.active .weapon-ground-particle {
  animation-play-state: running; }

@keyframes weaponParticleRise {
  0% {
    opacity: 0;
    color: var(--particle-deep);
    transform: translate3d(0, 0, 0) scale(0.65); }

  10% {
    opacity: 1;
    color: var(--particle-deep); }

  40% {
    opacity: 0.9; }

  75% {
    opacity: 0.45;
    color: var(--particle-pale); }

  100% {
    opacity: 0;
    color: var(--particle-pale);
    transform: translate3d(var(--particle-drift), var(--particle-rise), 0) scale(0.45); } }

/* ==========================================================================
   06. Soul orbs, synchronized captions and detail hover
   ========================================================================== */
.page-soul .item-soul {
  --float-x: 4px;
  --float-y: -14px;
  --float-duration: 5.4s;
  --float-delay: -0.8s;
  --reveal-delay: 0.65s;
  --reveal-duration: 0.85s;
  opacity: 0;
  transform: scale(0);
  transform-origin: center center; }
  .page-soul .item-soul:nth-child(2) {
    --reveal-delay: 0.695s; }
  .page-soul .item-soul:nth-child(3) {
    --reveal-delay: 0.74s; }
  .page-soul .item-soul:nth-child(4) {
    --reveal-delay: 0.785s; }
  .page-soul .item-soul:nth-child(5) {
    --reveal-delay: 0.83s; }
  .page-soul .item-soul:nth-child(6) {
    --reveal-delay: 0.875s; }
  .page-soul .item-soul:nth-child(7) {
    --reveal-delay: 0.92s; }
  .page-soul .item-soul:nth-child(8) {
    --reveal-delay: 0.965s; }
  .page-soul .item-soul:nth-child(9) {
    --reveal-delay: 1.01s; }
  .page-soul .item-soul:nth-child(10) {
    --reveal-delay: 1.055s; }
  .page-soul .item-soul:nth-child(11) {
    --reveal-delay: 1.1s; }
  .page-soul .item-soul:nth-child(2) {
    --float-x: -5px;
    --float-y: -17px;
    --float-duration: 6.2s;
    --float-delay: -3.1s; }
  .page-soul .item-soul:nth-child(3) {
    --float-x: 5px;
    --float-y: -15px;
    --float-duration: 5.8s;
    --float-delay: -2.2s; }
  .page-soul .item-soul:nth-child(4) {
    --float-x: -4px;
    --float-y: -13px;
    --float-duration: 6.6s;
    --float-delay: -4.7s; }
  .page-soul .item-soul:nth-child(5) {
    --float-x: -3px;
    --float-y: -10px;
    --float-duration: 4.6s;
    --float-delay: -1.5s; }
  .page-soul .item-soul:nth-child(6) {
    --float-x: 3px;
    --float-y: -12px;
    --float-duration: 5.1s;
    --float-delay: -3.6s; }
  .page-soul .item-soul:nth-child(7) {
    --float-x: -4px;
    --float-y: -11px;
    --float-duration: 4.9s;
    --float-delay: -0.3s; }
  .page-soul .item-soul:nth-child(8) {
    --float-x: 3px;
    --float-y: -9px;
    --float-duration: 4.3s;
    --float-delay: -2.8s; }
  .page-soul .item-soul:nth-child(9) {
    --float-x: -3px;
    --float-y: -10px;
    --float-duration: 5.6s;
    --float-delay: -1.9s; }
  .page-soul .item-soul:nth-child(10) {
    --float-x: 4px;
    --float-y: -12px;
    --float-duration: 6s;
    --float-delay: -4.2s; }
  .page-soul .item-soul:nth-child(11) {
    --float-x: -4px;
    --float-y: -14px;
    --float-duration: 5.3s;
    --float-delay: -2.5s; }
  .page-soul .item-soul::before {
    animation: soulGlowBreathe 3.8s ease-in-out var(--float-delay) infinite;
    animation-play-state: paused; }
.page-soul.active .item-soul {
  animation: soulOrbReveal var(--reveal-duration) ease-out var(--reveal-delay) both, soulOrbFloat var(--float-duration) ease-in-out calc(var(--reveal-delay) + var(--reveal-duration)) infinite; }
.page-soul.active .item-soul::before {
  animation-play-state: running; }

.page-soul .btn-details {
  cursor: pointer;
  transform-origin: center;
  transition: transform 0.25s ease, filter 0.25s ease; }
  .page-soul .btn-details:hover, .page-soul .btn-details:focus-visible {
    transform: translateY(-3px) scale(1.025);
    filter: brightness(1.15) drop-shadow(0 0 12px rgba(255, 210, 93, 0.55)); }
  .page-soul .btn-details:focus-visible {
    outline: 2px solid #ffe69b;
    outline-offset: 3px; }
  .page-soul .btn-details:active {
    transform: translateY(0) scale(0.985);
    filter: brightness(1.07) drop-shadow(0 0 5px rgba(255, 210, 93, 0.35)); }

@keyframes soulOrbReveal {
  0% {
    opacity: 0;
    transform: scale(0); }

  65% {
    opacity: 1;
    transform: scale(1.06); }

  100% {
    opacity: 1;
    transform: scale(1); } }

@keyframes soulOrbFloat {
  0%, 100% {
    transform: translate3d(0, 0, 0); }

  50% {
    transform: translate3d(var(--float-x), var(--float-y), 0); } }

@keyframes soulGlowBreathe {
  0%, 100% {
    filter: brightness(1); }

  50% {
    filter: brightness(1.12); } }

/* ==========================================================================
   07. Falling maple leaves
   ========================================================================== */
/* Fall, small wind sway and leaf tilt use separate transform layers. */
.falling-leaves {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  /* Two leaves per canopy, with staggered timing and inward curved falls. */
  /* An occasional left-canopy leaf drifts farther toward the lower middle. */ }
  .falling-leaves .falling-leaf {
    position: absolute;
    top: var(--leaf-top);
    height: calc(100% + 100px - var(--leaf-top));
    animation: mapleLeafFall var(--leaf-duration) linear var(--leaf-entry-delay) infinite both; }
  .falling-leaves .falling-leaf-sway {
    display: block;
    width: 100%;
    animation: mapleLeafSway var(--sway-duration) ease-in-out var(--leaf-delay) infinite alternate; }
  .falling-leaves .falling-leaf-image {
    display: block;
    width: 100%;
    height: auto;
    animation: mapleLeafTumble var(--spin-duration) ease-in-out var(--leaf-delay) infinite alternate;
    backface-visibility: visible; }
  .falling-leaves .falling-leaf, .falling-leaves .falling-leaf-sway, .falling-leaves .falling-leaf-image {
    animation-play-state: paused; }
  .falling-leaves .falling-leaf:nth-child(1) {
    width: 83px;
    --leaf-delay: -4.73s;
    --sway-duration: 7.1s;
    --spin-duration: 8.4s;
    --leaf-sway: 11px;
    --leaf-opacity: 0.72;
    --leaf-rotation: 7deg; }
  .falling-leaves .falling-leaf:nth-child(2) {
    width: 94px;
    --leaf-delay: -9.46s;
    --sway-duration: 7.8s;
    --spin-duration: 9.3s;
    --leaf-sway: 14px;
    --leaf-opacity: 0.56;
    --leaf-rotation: -26deg; }
  .falling-leaves .falling-leaf:nth-child(3) {
    width: 105px;
    --leaf-delay: -14.19s;
    --sway-duration: 8.5s;
    --spin-duration: 10.2s;
    --leaf-sway: 17px;
    --leaf-opacity: 0.8;
    --leaf-rotation: 21deg; }
  .falling-leaves .falling-leaf:nth-child(4) {
    width: 75px;
    --leaf-delay: -18.92s;
    --sway-duration: 9.2s;
    --spin-duration: 11.1s;
    --leaf-sway: 20px;
    --leaf-opacity: 0.64;
    --leaf-rotation: -12deg; }
  .falling-leaves .falling-leaf:nth-child(1) {
    left: 87%;
    --leaf-top: -35px;
    --leaf-drift: -360px;
    --leaf-duration: 24s;
    --leaf-entry-delay: 0s; }
  .falling-leaves .falling-leaf:nth-child(2) {
    left: 5%;
    --leaf-top: 95px;
    --leaf-drift: 420px;
    --leaf-duration: 29s;
    --leaf-entry-delay: 7.1s; }
  .falling-leaves .falling-leaf:nth-child(3) {
    left: 99%;
    --leaf-top: 225px;
    --leaf-drift: -280px;
    --leaf-duration: 27s;
    --leaf-entry-delay: 14.6s; }
  .falling-leaves .falling-leaf:nth-child(4) {
    left: 9%;
    --leaf-top: 10px;
    --leaf-drift: 850px;
    --leaf-duration: 36s;
    --leaf-entry-delay: 23.3s; }

.page.active .falling-leaves .falling-leaf, .page.active .falling-leaves .falling-leaf-sway, .page.active .falling-leaves .falling-leaf-image {
  animation-play-state: running; }

@keyframes mapleLeafFall {
  0% {
    transform: translate3d(calc(var(--leaf-drift) * 0), 0%, 0); }

  4.1% {
    transform: translate3d(calc(var(--leaf-drift) * 0.0168), 4.05%, 0); }

  8.2% {
    transform: translate3d(calc(var(--leaf-drift) * 0.04258), 8.2%, 0); }

  12.3% {
    transform: translate3d(calc(var(--leaf-drift) * 0.07643), 12.45%, 0); }

  16.4% {
    transform: translate3d(calc(var(--leaf-drift) * 0.11744), 16.8%, 0); }

  20.5% {
    transform: translate3d(calc(var(--leaf-drift) * 0.16469), 21.25%, 0); }

  24.6% {
    transform: translate3d(calc(var(--leaf-drift) * 0.21726), 25.8%, 0); }

  28.7% {
    transform: translate3d(calc(var(--leaf-drift) * 0.27424), 30.45%, 0); }

  32.8% {
    transform: translate3d(calc(var(--leaf-drift) * 0.33472), 35.2%, 0); }

  36.9% {
    transform: translate3d(calc(var(--leaf-drift) * 0.39778), 40.05%, 0); }

  41% {
    transform: translate3d(calc(var(--leaf-drift) * 0.4625), 45%, 0); }

  45.1% {
    transform: translate3d(calc(var(--leaf-drift) * 0.52797), 50.05%, 0); }

  49.2% {
    transform: translate3d(calc(var(--leaf-drift) * 0.59328), 55.2%, 0); }

  53.3% {
    transform: translate3d(calc(var(--leaf-drift) * 0.65751), 60.45%, 0); }

  57.4% {
    transform: translate3d(calc(var(--leaf-drift) * 0.71974), 65.8%, 0); }

  61.5% {
    transform: translate3d(calc(var(--leaf-drift) * 0.77906), 71.25%, 0); }

  65.6% {
    transform: translate3d(calc(var(--leaf-drift) * 0.83456), 76.8%, 0); }

  69.7% {
    transform: translate3d(calc(var(--leaf-drift) * 0.88532), 82.45%, 0); }

  73.8% {
    transform: translate3d(calc(var(--leaf-drift) * 0.93042), 88.2%, 0); }

  77.9% {
    transform: translate3d(calc(var(--leaf-drift) * 0.96895), 94.05%, 0); }

  82% {
    transform: translate3d(calc(var(--leaf-drift) * 1), 100%, 0); }

  0% {
    opacity: 0; }

  5%, 71% {
    opacity: var(--leaf-opacity); }

  82%, 100% {
    opacity: 0;
    transform: translate3d(var(--leaf-drift), 100%, 0); } }

@keyframes mapleLeafSway {
  from {
    transform: translate3d(calc(var(--leaf-sway) * -1), 0, 0); }

  to {
    transform: translate3d(var(--leaf-sway), 0, 0); } }

@keyframes mapleLeafTumble {
  0% {
    transform: rotate(calc(var(--leaf-rotation) - 18deg)) rotateY(-25deg); }

  45% {
    transform: rotate(calc(var(--leaf-rotation) + 12deg)) rotateY(52deg); }

  100% {
    transform: rotate(calc(var(--leaf-rotation) - 6deg)) rotateY(-12deg); } }

/* ==========================================================================
   08. Copyright panel transition
   ========================================================================== */
.go-footer:focus-visible {
  outline: 2px solid #ffe374;
  outline-offset: 3px; }
.go-footer i {
  transition: transform 0.3s; }
.go-footer.show i {
  transform: rotate(180deg); }

.footer {
  transform: translateY(100%);
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.2s linear, visibility 0s 0.2s; }
  .footer.show {
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s; }

/* ==========================================================================
   09. Pause when the document is hidden
   ========================================================================== */
.is-page-hidden .page-weapon .btn-pager::before, .is-page-hidden .page-weapon .weapon-preview, .is-page-hidden .page-weapon .weapon-hover, .is-page-hidden .page-weapon .weapon-ground-light, .is-page-hidden .page-weapon .weapon-stage::before, .is-page-hidden .page-weapon .weapon-ground-light::before, .is-page-hidden .page-weapon .weapon-ground-ray, .is-page-hidden .page-weapon .weapon-ground-ray::after, .is-page-hidden .page-weapon .weapon-ground-particle {
  animation-play-state: paused; }

.is-page-hidden .page-weapon.active .tab-level, .is-page-hidden .page-weapon.active .tab-level-item {
  animation-play-state: paused; }

.is-page-hidden .page-soul .item-soul, .is-page-hidden .page-soul .item-soul::before {
  animation-play-state: paused; }

.is-page-hidden .page.active .falling-leaves .falling-leaf, .is-page-hidden .page.active .falling-leaves .falling-leaf-sway, .is-page-hidden .page.active .falling-leaves .falling-leaf-image {
  animation-play-state: paused; }

/* ==========================================================================
   10. Navigation and video control states
   ========================================================================== */
.nav-activity .nav-activity-item.is-active, .nav-activity .nav-activity-item.is-normal:hover {
  background-image: url("https://img6.99.com/zf/activity/2026/11/weapons/img/img-55-84.png"); }
.nav-activity .nav-activity-item.is-active .nav-activity-label {
  background-image: linear-gradient(180deg, #fef2ba 0%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 10px #ffb400); }

/* Homepage trailer controls */
.page-banner .btn-play {
  transition: transform 0.25s ease, filter 0.25s ease; }
  .page-banner .btn-play:hover, .page-banner .btn-play:focus-visible {
    transform: scale(1.08);
    filter: brightness(1.2) drop-shadow(0 0 12px rgba(255, 195, 89, 0.65)); }
  .page-banner .btn-play:focus-visible {
    outline: 2px solid #ffe3a0;
    outline-offset: 4px; }
  .page-banner .btn-play:active {
    transform: scale(0.98); }

.video-close {
  transition: color 0.2s ease, background-color 0.2s ease; }
  .video-close:focus-visible {
    outline: 2px solid #ffe3a0;
    outline-offset: 3px; }
  .video-close:hover, .video-close:focus-visible {
    color: #fff;
    background-color: #64451e; }