#app {
  min-height: 100vh;
  position: relative;
  padding: 0 0.16rem;
  box-sizing: border-box;
}

.body-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 10.8rem;
  overflow: hidden;
  pointer-events: none;
}
.body-bg .bg-mask {
  position: absolute;
  width: 100%;
  height: 4.32rem;
  background: linear-gradient(0deg, rgba(240, 106, 22, 0) 0%, rgba(199, 82, 8, 0.92) 30.72%, #e45e06 49.86%, #ff6c07 92.59%);
}
.body-bg .bg-img {
  position: absolute;
  top: -0.54rem;
  left: 50%;
  transform: translateX(-50%);
  background: url('https://static.fhyx.com/images/application/pc/common/ranking/body-bg.webp') center top / contain no-repeat;
  width: 13.65rem;
  height: 7.68rem;
  aspect-ratio: 16/9;
  mix-blend-mode: overlay;
  mask-image: linear-gradient(0deg, rgba(240, 106, 22, 0) 0%, #ff6c07 92.59%);
  mask-mode: alpha;
  mask-composite: intersect;
  mask-clip: no-clip;
  mask-repeat: no-repeat;
  mask-size: 9.7rem 6.32rem;
}
.body-bg .dots {
  position: absolute;
  z-index: 1;
  left: -0.66rem;
  top: -0.36rem;
  width: 20.35rem;
  height: 22.85rem;
  background: url('https://static.fhyx.com/images/application/pc/common/ranking/game-cover-bg.webp') no-repeat;
  mix-blend-mode: overlay;
  mask-image: linear-gradient(to right, #f06a16, #de5700);
  mask-mode: alpha;
  mask-composite: intersect;
  mask-clip: no-clip;
  mask-repeat: no-repeat;
  mask-size: 100% 5.37rem;
}

.header-title {
  position: relative;
  z-index: 1;
  text-align: center;
  overflow: hidden;
}
.header-title .title {
  color: #fff;
  text-shadow: -1px 0 6.3px #ba3800;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: -0.006rem;
  margin-top: 1.65rem;
}
.header-title .slogan {
  color: #fff;
  font-size: 0.24rem;
  font-weight: 350;
  line-height: 1em;
  letter-spacing: 0.0144rem;
  margin-top: 0.05rem;
}

.board-update {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  z-index: 1;
  color: #fff;
  font-size: 0.18rem;
  font-weight: 350;
  letter-spacing: 0.0108rem;
}

.tabs-bar {
  position: sticky;
  top: 1.4rem;
  z-index: 10;
  display: flex;
  justify-content: center;
  margin-top: 0.2rem;
}
.tabs-bar.is-app {
  top: 0.1rem;
}
.tabs-bar .tabs-inner {
  display: flex;
  align-items: center;
  height: 0.9rem;
  padding: 0rem 0.32rem 0.1rem;
  backdrop-filter: blur(0.02rem);
  gap: 0.55rem;
  border-radius: 0.15rem;
  background: rgba(255, 255, 255, 0.07);
  box-shadow:
    -0.01rem -0.01rem rgba(255, 255, 255, 0.3),
    inset -0.01rem -0.01rem 0.01rem rgba(255, 255, 255, 0.1);
  border: 0.01rem solid rgba(255, 255, 255, 0.1);
  box-sizing: border-box;
  overflow-x: auto;
}
.tabs-bar .tabs-inner.fixed {
  backdrop-filter: blur(0.5rem);
}
.tabs-bar .tab-item {
  flex-shrink: 0;
  position: relative;
  color: #fff;
  font-size: 0.26rem;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  transition: text-shadow 0.2s;
}
.tabs-bar .tab-item::before {
  content: '';
  position: absolute;
  width: 50%;
  height: 0.05rem;
  border-radius: 0.04rem;
  background: #fff;
  bottom: -0.08rem;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
}
.tabs-bar .tab-item:hover,
.tabs-bar .tab-item.active {
  text-shadow: 0.01rem 0 0 currentColor;
}
.tabs-bar .tab-item:hover::before,
.tabs-bar .tab-item.active::before {
  opacity: 1;
  transition: opacity 0.2s;
}

/* ===== 主体布局 ===== */
.page-body {
  position: relative;
  z-index: 1;
  padding-bottom: calc(0.72rem + env(--safe-area-inset-bottom, 0px));
  margin-top: 0.21rem;
}

/* ===== 左侧筛选浮窗 ===== */
.sidebar {
  position: sticky;
  top: 2.4rem;
  z-index: 10;
  box-sizing: border-box;
  margin-top: 0.36rem;
}
.sidebar.is-app {
  top: 1.1rem;
}
.sidebar .filter-box {
  color: #fff;
  font-size: 0.16rem;
  font-weight: 500;
  padding-bottom: 0.14rem;
  display: flex;
  gap: 0.13rem;
  position: relative;
}
.filter-box .filter-group {
}
.filter-box .filter-group-label {
  height: 0.53rem;
  border-radius: 0.15rem;
  background: rgba(108, 67, 58, 0.2);
  padding: 0 0.14rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  display: flex;
  align-items: center;
  gap: 0.09rem;
  box-shadow:
    1px -1px rgba(255, 255, 255, 0.3),
    -1px 1px rgba(255, 255, 255, 0.3),
    inset -1px 1px rgba(0, 0, 0, 0.1),
    inset 1px -1px rgba(0, 0, 0, 0.1);
}
.sidebar.fixed .filter-box .filter-group-label {
  backdrop-filter: blur(0.5rem);
}
.filter-box .filter-group-label .title {
  color: #fff;
  font-family: Inter;
  font-size: 0.22rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.filter-box .filter-group-label.checked .title {
  color: #e45a1b;
}
.filter-box .filter-group-label .arrow .icon {
  width: 0.09rem;
  height: 0.08rem;
  background: url('https://static.fhyx.com/images/application/pc/common/ranking/arrow.png') center/contain no-repeat;
}
.filter-box .filter-group-label.open .arrow .icon {
  transform: rotate(180deg);
}
.filter-box .filter-list {
  position: absolute;
  left: 0;
  bottom: -0.12rem;
  width: 100%;
  transform: translateY(100%);
  width: 7.15rem;
  border-radius: 0.15rem;
  background: rgba(108, 67, 58, 0.2);
  backdrop-filter: blur(20px);
  padding: 0.16rem 0.3rem;
  box-sizing: border-box;
}
.filter-box .filter-year-list {
  display: flex;
  flex-direction: column;
  gap: 0.04rem;
}
.filter-box .filter-year-list .filter-year {
  height: 0.58rem;
  border-radius: 0.1rem;
  color: #fff;
  font-size: 0.26rem;
  font-weight: 400;
  text-align: center;
  line-height: 0.58rem;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s;
}
.filter-box .filter-year-list .filter-year.active {
  background: #ca561f;
}
.filter-box .filter-tag-list {
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.08rem;
  column-gap: 0.11rem;
}
.filter-box .filter-group-tag .filter-group-label {
  max-width: 1.9rem;
}
.filter-box .filter-tag-list .filter-tag {
  min-width: 1.48rem;
  height: 0.58rem;
  border-radius: 0.1rem;
  padding: 0 0.24rem;
  box-sizing: border-box;
  color: #fff;
  font-size: 0.26rem;
  font-weight: 400;
  text-align: center;
  line-height: 0.58rem;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s;
}
.filter-box .filter-tag-list .filter-tag.active {
  background: #ca561f;
}

/* ===== 表格区域 ===== */
.table-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.table-row {
  position: relative;
  display: flex;
  height: 1.65rem;
  border-radius: 0.18rem;
  border: 1px solid #55514c;
  background: rgba(12, 8, 5, 0.7);
  overflow: hidden;
}
.table-row.rank-1 {
  border: 1px solid #ffe49c;
  background: linear-gradient(278deg, rgba(188, 139, 37, 0.3) -4.83%, rgba(203, 174, 96, 0.5) 42.53%, rgba(185, 142, 58, 0.4) 76.14%, #ccaf5f 99.97%);
  box-shadow: 0 -1px 18px 7px rgba(255, 216, 0, 0.15);
}
.table-row.rank-2 {
  border: 1px solid #8d8d8d;
  background: linear-gradient(269deg, #0f0a05 11.42%, #44464e 74.63%);
  box-shadow: 0 -1px 18px -1px rgba(216, 216, 216, 0.15);
}
.table-row.rank-3 {
  border: 1px solid #8d8d8d;
  background: linear-gradient(269deg, #0f0a05 11.42%, #2f1911 74.63%);
  box-shadow: 0 -1px 18px -1px rgba(216, 216, 216, 0.15);
}
.table-row .left {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: -1px 0 -1px -1px;
}
.table-row .left .game-thumb {
  position: relative;
  width: 2.13rem;
  height: 1.2rem;
  overflow: hidden;
}
.table-row .left .game-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.18rem;
  border: 1px solid #bdbdbd;
  box-sizing: border-box;
}
.table-row.rank-1 .left .game-thumb img {
  border: 1px solid #ffe49c;
}
.table-row.rank-2 .left .game-thumb img {
  border: 1px solid #bdbdbd;
}
.table-row.rank-3 .left .game-thumb img {
  border: 1px solid #bdbdbd;
}
.table-row .game-thumb .rank-badge {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  min-width: 0.36rem;
  height: 0.3rem;
  line-height: 0.3rem;
  border-radius: 0.18rem 0;
  background: linear-gradient(0deg, #f97c2d 0%, #f97c2d 100%);
  text-align: center;

  color: #fff;
  font-size: 0.18rem;
  font-weight: 700;
  letter-spacing: 0.0072rem;
}
.table-row.rank-1 .game-thumb .rank-badge {
  width: 0.68rem;
  background: linear-gradient(261deg, #a76f0e 2.34%, #ffcf3b 99.07%);
}
.table-row.rank-2 .game-thumb .rank-badge {
  width: 0.68rem;
  background: linear-gradient(261deg, #575757 2.34%, #9e9fa2 99.07%);
}
.table-row.rank-3 .game-thumb .rank-badge {
  width: 0.68rem;
  background: linear-gradient(261deg, #655336 2.34%, #826f45 99.07%);
}
.table-row .left .date {
  color: #fff;
  font-size: 0.18rem;
  font-weight: 350;
  letter-spacing: 0.0108rem;
  margin-top: 0.06rem;
}
.table-row .change-num {
  position: absolute;
  bottom: 0.3rem;
  right: 0.3rem;
  color: #fff;
  font-size: 0.22rem;
  font-weight: 700;
}
.table-row .change-num.same {
  color: transparent;
  font-size: 0;
  width: 0.29rem;
  height: 0.07rem;
  background-color: #0554ff;
}
.table-row .change-num.down {
  color: #75f505;
}
.table-row .change-num.down::before {
  content: '';
  display: inline-block;
  width: 0px;
  height: 0px;
  border-top: 0.135rem solid #75f505;
  border-left: 0.0975rem solid transparent;
  border-right: 0.0975rem solid transparent;
  margin-bottom: 0.02rem;
}
.table-row .change-num.up {
  color: #f54e05;
}
.table-row .change-num.up::before {
  content: '';
  display: inline-block;
  width: 0px;
  height: 0px;
  border-bottom: 0.135rem solid #f54e05;
  border-left: 0.0975rem solid transparent;
  border-right: 0.0975rem solid transparent;
  margin-bottom: 0.02rem;
}
.table-row .change-num.new {
  font-size: 0;
}
.table-row .change-num.new::before {
  display: inline-block;
  content: 'new';
  width: 0.33rem;
  height: 0.2rem;
  color: #fff;
  font-size: 0.1rem;
  font-weight: 700;
  letter-spacing: 0.01rem;
  border-radius: 0.04rem;
  background: #f54e05;
  text-align: center;
  line-height: 0.2rem;
}
.table-row .main {
  flex: 1;
  min-width: 0;
  padding: 0.24rem 0.18rem 0 0.16rem;
  box-sizing: border-box;
}
.table-row .game-name {
  color: #fff;
  font-size: 0.26rem;
  font-weight: 700;
  letter-spacing: 0.0156rem;
}
.table-row .sales-num {
  color: #fff;
  font-size: 0.2rem;
  font-weight: 350;
  letter-spacing: 0.012rem;
}

.table-row .tags {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.16rem;
  margin-top: 0.1rem;
}
.table-row .tags .tag {
  min-width: 0.935rem;
  height: 0.42rem;
  border-radius: 0.02rem 0.20981rem 0.20981rem 0.20981rem;
  background: rgba(177, 157, 126, 0.1);
  color: #fff;
  font-size: 0.18rem;
  font-weight: 700;
  letter-spacing: 0.0108rem;
  text-align: center;
  line-height: 0.42rem;
  padding: 0 0.26rem;
  box-sizing: border-box;
  backdrop-filter: blur(0.1rem);
  box-shadow:
    -1px -1px rgba(255, 255, 255, 0.5),
    1px 1px rgba(255, 255, 255, 0.2);
}

.online-row {
  height: 1.2rem;
}
.online-row .left .game-thumb {
  width: 2.13rem;
  height: 100%;
}

/* ===== 愿望单 ===== */
.wish-row {
  height: 1.65rem;
}
.wish-row .left .game-thumb {
  width: 2.51rem;
  height: 100%;
}
.wish-row .main {
  padding: 0.16rem 0.15rem 0;
}
.wish-row .tags {
  justify-content: flex-start;
  margin-top: 0.16rem;
}

/* ===== PGA ===== */
.awards {
  display: flex;
  flex-direction: column;
  gap: 0.26rem;
}
.pga-card {
  position: relative;
  /* min-height: 9.93rem; */
  border-radius: 0.18rem;
  border: 1px solid #55514c;
  background: rgba(12, 8, 5, 0.7);
  box-sizing: border-box;

  background-size: cover;
  padding: 0.31rem 0.37rem;
}
.pga-card .pga-card-title {
  position: relative;
  color: #fff;
  font-size: 0.28rem;
  font-weight: 700;
  line-height: 1em;
}
.pga-card .pga-card-desc {
  position: relative;
  color: #fff;
  font-size: 0.26rem;
  font-weight: 350;
  margin-top: 0.16rem;
}
.pga-card .pga-hero {
  display: block;
  position: relative;
  height: 2.79rem;
  border-radius: 0.18rem;
  background: #d9d9d9;
  overflow: hidden;
  margin-top: 0.2rem;
  border: 1px solid #ffe49c;
  box-sizing: border-box;
}
.pga-card .pga-hero .pga-hero-rank {
  position: absolute;
  left: 0;
  top: 0;
}
.pga-card .pga-hero .pga-hero-rank::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-top: 0.56rem solid #ef782c;
  border-right: 0.63rem solid transparent;
}
.pga-card .pga-hero .pga-hero-rank-num {
  position: absolute;
  left: 0rem;
  top: 0.03rem;
  z-index: 1;
  width: 0.29rem;
  height: 0.29rem;
  background: url('https://static.fhyx.com/images/application/pc/common/ranking/fire_icon.png') center/contain no-repeat;
  text-align: center;
  line-height: 0.32rem;
  color: #fff;
  font-size: 0.18rem;
  font-weight: 700;
}
.pga-card .pga-hero .pga-hero-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pga-card .pga-hero .pga-hero-name {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 0.5rem;
  width: 100%;
  color: #fff;
  font-size: 0.22rem;
  font-weight: 500;
  text-align: left;
  line-height: 0.5rem;
  background: #ef782c;
  padding-left: 0.17rem;
  box-sizing: border-box;
}
.pga-card .pga-rest {
  display: flex;
  gap: 0.21rem;
  row-gap: 0.25rem;
  margin-top: 0.35rem;
  flex-wrap: wrap;
}
.pga-card .pga-rest-item {
  width: 3.09149rem;
}
.pga-card .pga-rest-item .main {
  overflow: hidden;
  border-radius: 0.18rem;
  border: 1px solid #ffe49c;
  box-sizing: border-box;
  background: #d9d9d9;
  height: 1.67rem;
  position: relative;
}
.pga-card .pga-rest-item .pga-rest-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pga-card .pga-rest-item .pga-rest-rank {
  position: absolute;
  left: 0;
  top: 0;
}
.pga-card .pga-rest-item .pga-hero-rank-num {
  position: absolute;
  left: 0.06rem;
  top: 0.02rem;
  z-index: 1;
  color: #fff;
  font-size: 0.18rem;
  font-weight: 700;
}
.pga-card .pga-rest-item .pga-rest-rank::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-top: 0.45rem solid #ef782c;
  border-right: 0.45rem solid transparent;
}
.pga-card .pga-rest-item .pga-rest-name {
  height: 0.33rem;
  width: 100%;
  color: #fff;
  font-size: 0.2rem;
  font-weight: 500;
  text-align: center;
  line-height: 0.33rem;
}

/* ===== IGN ===== */
.ign-row {
  height: 1.2rem;
}
.ign-row .left .game-thumb {
  width: 2.13rem;
  height: 100%;
}
.ign-row .main {
  position: relative;
  padding: 0.16rem 0.15rem 0;
}
.ign-row .game-name {
  padding-right: 0.6rem;
  box-sizing: border-box;
}
.ign-row .tags {
  justify-content: flex-start;
}
.ign-row .score-num {
  position: absolute;
  z-index: 1;
  top: 0.11rem;
  right: 0.15rem;
  width: 0.44rem;
  height: 0.47rem;
  background: url('https://static.fhyx.com/images/application/pc/common/ranking/ign_source_bg.png') center/contain no-repeat;
  color: #fff;
  font-size: 0.18rem;
  font-weight: 700;
  text-align: center;
  line-height: 0.47rem;
}

.meta-row .score-num {
  min-width: 0.38rem;
  height: 0.38rem;
  border-radius: 0.08rem;
  background: #00ce7a;
  color: #000;
  font-size: 0.2rem;
  font-weight: 700;
  line-height: 0.38rem;
}

/* ===== 游戏悬浮公告浮窗 ===== */
.game-popup {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
  width: 4.91rem;
  min-height: 3.91rem;
  border-radius: 0.18rem;
  border: 0.01rem solid #8d8d8d;
  background: linear-gradient(180deg, #140b06 48.56%, #140b06 100%);
  box-shadow: 0 -0.01rem 0.18rem -0.01rem rgba(216, 216, 216, 0.15);
}
.game-popup .popup-cover-bg {
  height: 2.14rem;
  border-radius: 0.18rem;
  overflow: hidden;
  border-bottom: 0.01rem solid #bdbdbd;
  box-sizing: border-box;
}
.game-popup img,
.game-popup video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.game-popup .popup-body {
  padding: 0.1rem 0.13rem 0.13rem;
  box-sizing: border-box;
}
.game-popup .popup-info-box {
  display: flex;
  gap: 0.1rem;
}
.game-popup .popup-info-box .popup-banner {
  width: 1.85rem;
  height: 0.89rem;
  border-radius: 0.09rem;
  border: 0.01rem solid #bdbdbd;
  box-sizing: border-box;
  overflow: hidden;
  flex-shrink: 0;
}
.game-popup .popup-info-box .popup-title {
  color: #fff;
  font-size: 0.2rem;
  font-weight: 700;
  margin-top: 0.05rem;
}
.game-popup .popup-info-box .popup-price {
  color: #f54e05;
  font-size: 0.2rem;
  line-height: 0.2rem;
  font-weight: 700;
  display: flex;
  line-height: 0.2rem;
  margin-top: 0.06rem;
}
.game-popup .popup-info-box .popup-price small {
  font-size: 0.14rem;
  line-height: 0.25rem;
}
.game-popup .popup-info-box .popup-review {
  color: #eb9c37;
  font-size: 0.12rem;
  font-weight: 350;
  margin-top: 0.08rem;
}
.game-popup .popup-release {
  color: #fff;
  font-size: 0.14rem;
  font-weight: 350;
  margin-top: 0.06rem;
}
.game-popup .popup-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.game-popup .popup-bottom .popup-tags {
  display: flex;
  gap: 0.08rem;
  margin-top: 0.1rem;
  flex-wrap: wrap;
}
.game-popup .popup-bottom .popup-tag {
  min-width: 0.58rem;
  height: 0.24rem;
  padding: 0 0.14rem;
  box-sizing: border-box;
  border-radius: 0.04rem;
  background: rgba(177, 157, 126, 0.2);
  color: #fff;
  font-size: 0.14rem;
  font-weight: 350;
  text-align: center;
  line-height: 0.24rem;
  box-shadow:
    -0.01rem -0.01rem rgba(255, 255, 255, 0.3),
    0.01rem 0.01rem rgba(255, 255, 255, 0.3);
}

.backtop-btn {
  position: fixed;
  z-index: 10;
  right: 0.2rem;
  bottom: calc(1.2rem + env(--safe-area-inset-bottom, 0px));
  cursor: pointer;
  width: 1rem;
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ca561f;
  border-radius: 50%;
  transition: transform 0.2s;
}
.backtop-btn:active {
  transform: scale(0.9);
}
.backtop-btn .icon {
  width: 0.5rem;
  height: 0.5rem;
  background: url('https://static.fhyx.com/images/application/pc/common/ranking/backtop.png') no-repeat center/contain;
}