/* XH-UI-VISUAL-TUNE-03A — user-approved visual refinements only. */

html,
body {
  overflow-x: hidden !important;
}

/* WAP homepage carousel: 820:300 standard; legacy artwork remains centered and unstretched. */
.homeNew[data-v-7ada146e] .carousel,
.homeNew .carousel {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
  background: #eef7ff;
}

.homeNew[data-v-7ada146e] .carousel #slide,
.homeNew .carousel #slide {
  width: 100% !important;
}

.homeNew[data-v-7ada146e] .carousel .swiper-container,
.homeNew .carousel .swiper-container {
  height: auto !important;
  aspect-ratio: 82 / 30;
  overflow: hidden !important;
}

.homeNew[data-v-7ada146e] .carousel .swiper-wrapper,
.homeNew[data-v-7ada146e] .carousel .swiper-slide,
.homeNew .carousel .swiper-wrapper,
.homeNew .carousel .swiper-slide {
  height: 100% !important;
}

/*
 * Swiper calculates its loop transform from viewport coordinates in this
 * legacy build.  Offset the wrapper back to the container origin without
 * replacing Swiper's own transform, so the active slide fills the banner.
 */
.homeNew[data-v-7ada146e] .carousel .swiper-wrapper,
.homeNew .carousel .swiper-wrapper {
  position: relative;
  left: -10px;
}

.homeNew[data-v-7ada146e] .carousel img,
.homeNew .carousel img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Approved home text V2: preserve wording and interaction, refine typography only. */
.homeNew[data-v-7ada146e] .userPanel-user h6,
.homeNew .userPanel-user h6 {
  color: #315b7d !important;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
  text-shadow: 0 1px 2px rgba(36, 84, 122, .16);
}

.homeNew[data-v-7ada146e] .userPanel-user .toLogin,
.homeNew .userPanel-user .toLogin {
  color: #3b6f97 !important;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: .01em;
  line-height: 1.35;
  text-shadow: 0 1px 1px rgba(36, 84, 122, .12);
}

/* Approved secondary menu: compact blue-white pill system. */
.game-container .gameTags-container {
  gap: .16rem;
  padding: .02667rem .04rem .08rem;
  scrollbar-width: none;
}

.game-container .gameTags-container::-webkit-scrollbar {
  display: none;
}

.game-container .gameTags-container .tag {
  flex: 0 0 auto;
  min-width: 1.68rem;
  padding: 0 .3rem !important;
  border: 1px solid #d7e7f3 !important;
  border-radius: .4rem !important;
  background: #fff !important;
  color: #607e96 !important;
  box-shadow: 0 .04rem .14rem rgba(44, 105, 151, .06);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-weight: 500;
  text-align: center;
}

.game-container .gameTags-container .tag.active,
.game-container .gameTags-container .tag.router-link-active {
  border-color: #63afe2 !important;
  background: #eaf7ff !important;
  color: #246fa8 !important;
  box-shadow: inset .08rem 0 #3b9be3, 0 .04rem .16rem rgba(48, 142, 205, .12);
}

/* Approved favorites/provider sidebar V2: use the real provider thumbnails already in DOM. */
.game-container .gameNav {
  border-right: 1px solid #e1edf5;
  background: linear-gradient(180deg, #f8fcff 0%, #f3f8fc 100%) !important;
  scrollbar-width: none;
}

.game-container .gameNav::-webkit-scrollbar {
  display: none;
}

.game-container .gameNav .navItem {
  position: relative;
  margin: .12rem .12rem 0;
  width: calc(100% - .24rem) !important;
  padding: .16rem .08rem .12rem !important;
  border: 1px solid transparent;
  border-radius: .2rem;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 .04rem .16rem rgba(40, 92, 132, .06);
  box-sizing: border-box;
}

.game-container .gameNav .navItem.active {
  border-color: #91c9ed;
  background: #edf8ff !important;
  box-shadow: inset .08rem 0 #3999df, 0 .06rem .18rem rgba(43, 130, 190, .11);
}

.game-container .gameNav .navItem .navItem-icon,
.game-container .gameNav .navItem img {
  width: .82rem !important;
  height: .82rem !important;
  border-radius: .18rem !important;
  object-fit: contain !important;
  background: #fff;
  box-shadow: 0 .03rem .12rem rgba(38, 91, 131, .12);
}

.game-container .gameNav .navItem .navItem-title {
  margin-top: .1rem !important;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
  color: #55748d !important;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-weight: 500;
  line-height: 1.25;
}

.game-container .gameNav .navItem.active .navItem-title {
  color: #236fa8 !important;
  font-weight: 600;
}

/* Collection page uses actual game/provider art; refine card hierarchy without placeholders. */
.collection .collect-wrap {
  margin: .16rem .28rem 0;
  width: calc(100% - .56rem) !important;
  height: 2.72rem !important;
  padding: .22rem !important;
  border: 1px solid #dfebf4;
  border-radius: .24rem;
  background: linear-gradient(135deg, #fff 50%, #f0f8fe 100%);
  box-shadow: 0 .08rem .28rem rgba(40, 91, 130, .08);
  box-sizing: border-box;
}

.collection .collect-wrap .van-image,
.collection .collect-wrap img {
  width: 2.24rem !important;
  height: 2.24rem !important;
  border-radius: .2rem !important;
  object-fit: cover !important;
}

.collection .collect-wrap .info {
  margin-left: .34rem !important;
  border-bottom: 0 !important;
}

.collection .collect-wrap .info .text {
  margin: .55rem 0 .34rem !important;
}

.collection .collect-wrap .info .text p {
  color: #315b7d !important;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-weight: 600 !important;
}

.collection .collect-wrap .info .text .van-icon {
  color: #e0a63a !important;
}

/* Keep the fixed WAP canvas centered without adding its screen offset to Swiper geometry. */
@media (min-width: 521px) {
  body {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    background: #edf3f8 !important;
  }

  #app {
    width: 500px !important;
    max-width: 500px !important;
    margin: 0 !important;
    transform: translateX(calc((100vw - 500px) / 2));
    background: #fff;
    box-shadow: 0 12px 42px rgba(39, 85, 121, .13);
  }

  .homeNew[data-v-7ada146e] .carousel .swiper-wrapper,
  .homeNew .carousel .swiper-wrapper {
    left: calc((500px - 100vw) / 2 - 10px);
  }
}

/* PC keeps the original fixed WAP canvas and single-column provider list. */
@media (min-width: 769px) {
  html {
    height: 100% !important;
    min-height: 100%;
    background: #edf3f8;
  }

  body,
  #app {
    min-height: 100% !important;
    height: 100% !important;
  }

  body {
    overflow-y: hidden !important;
  }

  .navBar,
  .bottom-nav,
  .van-tabbar {
    right: auto !important;
    left: 50% !important;
    width: 100% !important;
    max-width: 500px !important;
    transform: translateX(-50%);
  }

  .homeNew[data-v-7ada146e],
  .homeNew {
    position: absolute !important;
    width: 100% !important;
    min-height: 0 !important;
    height: 100% !important;
  }

  .homeNew[data-v-7ada146e] .main,
  .homeNew .main {
    height: calc(100% - 7.2rem) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .homeNew[data-v-7ada146e] .cube-scroll-wrapper,
  .homeNew .cube-scroll-wrapper {
    height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: none;
  }

  .homeNew[data-v-7ada146e] .cube-scroll-wrapper::-webkit-scrollbar,
  .homeNew .cube-scroll-wrapper::-webkit-scrollbar {
    display: none;
  }

  .homeNew[data-v-7ada146e] .cube-scroll-list-wrapper,
  .homeNew .cube-scroll-list-wrapper {
    overflow: visible !important;
  }

  .homeNew[data-v-7ada146e] .gameNav {
    min-height: 0;
    height: 100% !important;
  }

  .homeNew[data-v-7ada146e] .gameNavCover {
    height: 100% !important;
    min-height: 0;
  }

  .homeNew[data-v-7ada146e] .gameNavCover-container,
  .homeNew[data-v-7ada146e] .gameNavCover-container-tile {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: .26667rem .26667rem 2.2rem 0 !important;
    box-sizing: border-box;
    font-size: initial !important;
  }

  .homeNew[data-v-7ada146e] .gameNavCover-container .gameNavCover-items,
  .homeNew[data-v-7ada146e] .gameNavCover-container-tile .gameNavCover-items {
    width: 100% !important;
    min-width: 0;
    margin: 0 !important;
  }

  .homeNew[data-v-7ada146e] .gameNavCover-container img,
  .homeNew[data-v-7ada146e] .gameNavCover-container-tile img {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }
}

@media (max-width: 768px) {
  .homeNew[data-v-7ada146e] .main,
  .homeNew .main {
    height: calc(100% - 4.7rem) !important;
  }
}