/* ==========================================================================
   index.css — prepaid_center/index.html 专属样式
   BEM 前缀: idx-
   单位: rem（flexible.js: 1rem = viewWidth / 10）
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 全局 Reset（仅限本页范围）
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  min-height: -webkit-fill-available;
  height: calc(var(--vh, 1vh) * 100);
  height: 100dvh;
  overflow: hidden;
  font-family:
    Arial, "Microsoft YaHei", "PingFang TC", "Noto Sans TC", sans-serif;
}

img {
  display: block;
  max-width: 100%;
}

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

button {
  border: 0;
  cursor: pointer;
  background: transparent;
  outline: none;
}

a {
  display: block;
  text-decoration: none;
  outline: none;
}

/* --------------------------------------------------------------------------
   2. 主竖向全屏 Swiper
   -------------------------------------------------------------------------- */
.idx-main-swiper {
  width: 100%;
  height: 100%;
  height: calc(var(--vh, 1vh) * 100);
  height: 100dvh;
  /* 必须固定高度，Swiper 竖向模式才能全屏翻页 */
}

/* --------------------------------------------------------------------------
   3. 通用屏幕样式
   -------------------------------------------------------------------------- */
.idx-slide {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* 全屏背景图 */
.idx-slide__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: inherit;
  object-position: top;
  z-index: 0;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   4. 第一屏 P1
   -------------------------------------------------------------------------- */
.idx-p1-content {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}

/* 储值按钮：右上角，上边距 15px，右边距 18px */
.idx-p1-btn-pay {
  position: absolute;
  top: 0.08rem; /* 15px ÷ 192px = 0.078rem */
  right: 0.09rem; /* 18px ÷ 192px = 0.094rem */
  z-index: 2;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.idx-p1-btn-pay:hover {
  opacity: 0.85;
  transform: translateY(-0.02rem);
}

/* 下载按钮组：底部 50px，间距 10px，按图片自然尺寸显示 */
.idx-p1-download {
  position: absolute;
  bottom: 0.26rem; /* 50px ÷ 192px = 0.26rem */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.05rem; /* 10px ÷ 192px = 0.052rem */
  align-items: center;
  z-index: 2;
}

.idx-p1-download__btn {
  display: block;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

.idx-p1-download__btn:hover {
  transform: translateY(-0.03rem);
  opacity: 0.85;
}

/* 向下滚动提示按鈕：固定在屏幕底部，最后一屏隐藏 */
.idx-p1-scroll-hint {
  position: fixed;
  bottom: 0.08rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  z-index: 2;
  animation: idx-bounce 1.8s ease-in-out infinite alternate;
}

.idx-p1-scroll-hint img {
  width: 0.3rem;
}

@keyframes idx-bounce {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateX(-50%) translateY(0.08rem);
    opacity: 0.65;
  }
}

/* --------------------------------------------------------------------------
   5. 第二屏 P2
   -------------------------------------------------------------------------- */
.idx-p2-content {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding-left: 0.9375rem; /* 180px ÷ 192px */
  padding-bottom: 0.1rem;
}

.idx-p2-fb-module {
  position: relative;
  display: inline-block;
}

.idx-p2-fb-module__bg {
  display: block;
  max-width: 100%;
  max-height: 100%;
  max-height: calc(var(--vh, 1vh) * 100);
  max-height: 100dvh;
  object-fit: contain;
}

.idx-p2-fb-module__iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px; /* 615px ÷ 192px */
  height: 480px; /* 560px ÷ 192px */
  border: 0;
  margin-top: 33px;
  margin-left: 0;
}
.idx-p2-fb-module__iframe iframe {
  width: 100%;
  height: 100%;
  max-height: 100%;
  /* max-width: 500px;
  max-height: 480px; */
}

/* --------------------------------------------------------------------------
   6. 第三屏 P3 — flexbox 布局
   -------------------------------------------------------------------------- */
.idx-p3-content {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Banner 轮播父容器：占满剩余空间
 * overflow 不裁剪，保证两侧卡片可见 */
.idx-p3-banner-area {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: visible;
  flex-direction: column;
  padding-bottom: 0.1rem;
}

/* Banner Swiper 容器
 * 宽度 = 中间卡片(492px) + 两侧可见宽度(397-50)×2 = 1186px → 6.18rem
 * 高度 = 中间卡片高度(602px) + 分页器余量 → 3.45rem
 */
.idx-banner-swiper {
  width: 6.18rem; /* 1186px ÷ 192px，适配三张卡片视觉宽度 */
  height: 3.135rem; /* slide 流式排列，需显式高度 = 单卡 602px */

  overflow: hidden; /* 两侧卡片由 transform 层叠居中，超出部分裁切 */
}

/* slide 流式排列，垂直居中于容器 */
.idx-banner-swiper .swiper-wrapper {
  align-items: center;
}

/*
 * Banner 单张幻灯片
 * 宽度统一设为中间卡片宽度（492px）以保证 Swiper 布局一致
 * 其余幻灯片默认缩小并隐藏在中间三张后面
 */
.idx-banner-swiper__slide {
  width: 2.5625rem; /* 492px ÷ 192px */
  height: 3.135rem; /* 602px ÷ 192px */
  display: flex;
  align-items: center;
  justify-content: center;
  /* transform/opacity/zIndex 由 index.js 的 updateBannerSlides 按 slide.progress 设 inline；
     transition 由 setTransition 钩子按切换 duration 设；
     默认隐藏，待 JS 初始化定位后再显现，避免首屏闪烁。
     保持 swiper 默认流式定位(非 absolute)，swiperSlideOffset/progress 才能正确计算 */
  opacity: 0;
  transform: translateX(0) scale(0);
  z-index: 0;
}

.idx-banner-swiper__slide img {
  width: 2.5625rem; /* 492px */
  height: 3.135rem; /* 602px */
  /* object-fit: cover; */
  border-radius: 0.06rem;
  box-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.55);
  cursor: pointer;
}

/* 卡片的 transform/opacity/zIndex 统一由 index.js 的 updateBannerSlides
   按 slide.progress 设置，不再使用 swiper-slide-active/prev/next 类驱动 */

/* Banner 分页器 */
.idx-banner-swiper__pagination {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 0.03rem;
  z-index: 10;
  width: auto !important;
  flex: 0 0 auto;
}

.idx-banner-swiper__pagination .swiper-pagination-bullet {
  width: 0.06rem;
  height: 0.06rem;
  background: #997956;
  border-radius: 50%;
  opacity: 1;
  transition:
    background 0.25s ease,
    transform 0.25s ease;
}

.idx-banner-swiper__pagination .swiper-pagination-bullet-active {
  background: #fdca4e;
  transform: scale(1.2);
}

/* --------------------------------------------------------------------------
   Banner 图片预览弹框
   -------------------------------------------------------------------------- */
.idx-banner-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
}

.idx-banner-modal__img {
  /* 按原始尺寸显示，超出则等比缩放至上限 */
  max-width: 90vw;
  max-height: 90%;
  max-height: calc(var(--vh, 1vh) * 90);
  max-height: 90dvh;
  width: auto;
  height: auto;
  object-fit: contain;
}

.idx-banner-modal__close {
  position: fixed;
  top: 20px;
  top: calc(var(--vh, 1vh) * 2);
  top: 2dvh;
  right: 3vw;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  cursor: pointer;
  transition: background 0.25s ease;
}

.idx-banner-modal__close:hover {
  background: rgba(255, 255, 255, 0.4);
}

/* --------------------------------------------------------------------------
   7. Footer（第三屏底部）
   -------------------------------------------------------------------------- */
.idx-footer {
  flex-shrink: 0;
  background: #171717;
  color: #777;
}

.idx-footer__inner {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  width: min(100%, 12rem);
  margin: 0 auto;
  padding: 0.18rem 0.4rem;
}

/* 游戏 Logo */
.idx-footer__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 2vw;
}

.idx-footer__logo img {
  height: auto;
  width: auto;
  object-fit: contain;
}

/* 分级图 + 免责声明区域 */
.idx-footer__rating-block {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.16rem;
  min-width: 0;
}

.idx-footer__level {
  flex-shrink: 0;
  width: auto;
  height: auto;
}

.idx-footer__disclaimers ul {
  display: grid;
  gap: 0.04rem;
}

.idx-footer__disclaimers li {
  color: #777;
  font-size: 0.08rem;
  line-height: 1.5;
}

/* 右侧：用户协议 + 版权 */
.idx-footer__links-block {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.06rem;
}

.idx-footer__nav {
  display: flex;
  align-items: center;
  gap: 0.08rem;
}

.idx-footer__nav-btn {
  color: #8e8e8e;
  font-size: 0.08rem;
  padding: 0;
  cursor: pointer;
  transition: color 0.2s ease;
}

.idx-footer__nav-btn:hover {
  color: #c8c8c8;
}

.idx-footer__nav-sep {
  color: #555;
  font-size: 0.09rem;
  line-height: 1;
}

.idx-footer__copyright {
  color: #747474;
  font-size: 0.08rem;
  white-space: nowrap;
}
/* --------------------------------------------------------------------------
   8. Vue 模板兜底
   [v-cloak] 隐藏未编译模板，避免 Vue 首次渲染前出现 [[ ]] 闪烁
   -------------------------------------------------------------------------- */
[v-cloak] {
  display: none;
}

/* 移动端专属 Logo 默认在 PC 端隐藏 */
.idx-p1-logo-mobile {
  display: none;
}

.idx-banner-swiper__control {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-top: 0.02rem;
  gap: 0.2rem;
  z-index: 10;
}

.idx-banner-swiper__control .idx-banner-swiper__pagination {
  position: relative;
  bottom: auto;
  left: auto;
  right: auto;
  width: auto;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.idx-banner-swiper__control .swiper-pagination-bullet {
  width: 0.07rem;
  height: 0.07rem;
  background: #a27e57;
  opacity: 0.45;
  border-radius: 50%;
  transition:
    background-color 0.25s ease,
    transform 0.25s ease,
    opacity 0.25s ease;
  margin: 0 0.04rem;
  cursor: pointer;
}

.idx-banner-swiper__control .swiper-pagination-bullet-active {
  background: #dbb36e;
  opacity: 1;
  transform: scale(1.33);
}

.idx-banner-swiper__control .idx-banner-swiper__btn {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  width: auto;
  height: auto;
  padding: 0.06rem;
  margin: 0;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.75;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
  transform: none;
}

.idx-banner-swiper__control .idx-banner-swiper__btn img {
  width: auto;
  height: 0.16rem;
  display: block;
  transition: transform 0.2s ease;
}

.idx-banner-swiper__control .idx-banner-swiper__btn:hover {
  opacity: 1;
}

.idx-banner-swiper__control .idx-banner-swiper__btn:active img {
  transform: scale(0.9);
}

.idx-banner-swiper__control .idx-banner-swiper__btn--prev,
.idx-banner-swiper__control .idx-banner-swiper__btn--next {
  position: static;
  left: auto;
  right: auto;
  transform: none;
}

/* --------------------------------------------------------------------------
   9. 移动端适配 (<= 768px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  /* Banner 预览弹框：移动端关闭按钮移至底部居中 */
  .idx-banner-modal__img {
    max-height: 78%;
    max-height: calc(var(--vh, 1vh) * 78);
    max-height: 78dvh;
  }
  .idx-banner-modal__close {
    top: auto;
    right: auto;
    bottom: 6%;
    bottom: calc(var(--vh, 1vh) * 6);
    bottom: 6dvh;
    left: 50%;
    transform: translateX(-50%);
    width: 52px;
    height: 52px;
  }

  /* P1 首屏调整 */
  .idx-p1-logo-mobile {
    display: block;
    position: absolute;
    top: 4%;
    top: calc(var(--vh, 1vh) * 4);
    top: 4dvh;
    left: 5vw;
    width: 35vw;
    z-index: 10;
  }
  .idx-p1-btn-pay {
    top: 0.06rem;
    right: 0.16rem;
    max-width: 36vw;
  }
  .idx-p1-btn-pay img {
    width: 100%;
    height: auto;
  }
  .idx-p1-download {
    bottom: 8%;
    bottom: calc(var(--vh, 1vh) * 8);
    bottom: 8dvh;
    left: 5vw;
    width: 90vw;
    flex-wrap: wrap;
    gap: 2vw 3vw;
    justify-content: center;
    transform: none;
  }
  .idx-p1-download__btn {
    width: 40%; /* 2x2 布局 */
  }
  .idx-p1-download__btn img {
    width: 100%;
    height: auto;
  }
  .idx-p1-scroll-hint {
    bottom: 2%;
    bottom: calc(var(--vh, 1vh) * 2);
    bottom: 2dvh;
  }

  /* P2 新闻页调整 */
  .idx-p2-fb-module {
    width: 9.21rem;
    height: 10.35rem;
    padding-left: 0;
    margin: 0 auto;
    margin-bottom: 1.2rem;
  }
  .idx-p2-content {
    padding-left: 0;
    justify-content: center;
    align-items: flex-end;
  }
  .idx-p2-fb-module__bg {
    object-fit: contain;
  }
  .idx-p2-fb-module__iframe {
    width: 6.68rem;
    height: 6.4rem;
    margin-left: 0;
    margin-top: 0.4rem;
  }
  .idx-p2-fb-module__iframe iframe {
    /* max-width: 6.68rem; */
    height: 100%;
    width: 100%;
  }

  /* P3 轮播区域调整 */
  /* .idx-p3-banner-area {
    margin-bottom: 2vh;
  } */
  .idx-banner-swiper {
    width: 100vw;
    height: 8.08rem; /* slide 8.08rem + 上下 padding 0.5rem */
    /* padding: 0.5rem 0; */
  }
  .idx-banner-swiper__slide {
    width: 6.66rem;
    height: 8.08rem;
    justify-content: flex-start;
  }
  .idx-banner-swiper__slide img {
    width: 6.66rem;
    height: 8.08rem;
  }

  /* 移动端卡片 transform 同样由 JS updateBannerSlides 按 progress 控制 */
  /* Mobile Banner Swiper Control overrides */
  .idx-banner-swiper__control {
    margin-top: 0.2rem;
    gap: 0.6rem;
  }
  .idx-banner-swiper__control .idx-banner-swiper__pagination {
    gap: 0.16rem;
  }
  .idx-banner-swiper__control .swiper-pagination-bullet {
    width: 0.18rem;
    height: 0.18rem;
    margin: 0 0.08rem;
  }
  .idx-banner-swiper__control .idx-banner-swiper__btn {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    width: auto;
    height: auto;
    padding: 0.2rem;
    transform: none;
  }
  .idx-banner-swiper__control .idx-banner-swiper__btn img {
    width: auto;
    height: 0.5rem;
  }
  .idx-banner-swiper__control .idx-banner-swiper__btn--prev,
  .idx-banner-swiper__control .idx-banner-swiper__btn--next {
    position: static;
    left: auto;
    right: auto;
    transform: none;
  }

  /* Footer 调整 */
  .idx-footer {
    height: auto;
    padding: 1vw 2vw;
    background: #171717;
  }
  .idx-footer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2vw;
    height: auto;
  }
  .idx-footer__links-block {
    display: contents; /* 使 nav 和 copyright 成为直接子元素，可利用 order 排序 */
  }
  .idx-footer__nav {
    order: 1;
    display: flex;
    justify-content: center;
    gap: 4vw;
    margin-bottom: 1vw;
  }
  .idx-footer__nav-btn {
    font-size: 3.2vw;
    color: #a0a0a0;
  }
  .idx-footer__nav-sep {
    font-size: 3.2vw;
    color: #444;
  }
  .idx-footer__logo {
    order: 2;
    margin: 1vw 0;
    display: flex;
    width: 100%;
    justify-content: space-around;
  }
  .idx-footer__logo img {
    width: 32vw;
    height: auto;
  }
  .idx-footer__copyright {
    order: 3;
    font-size: 2.8vw;
    color: #747474;
    text-align: center;
  }
  .idx-footer__rating-block {
    order: 4;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4vw;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 2vw;
    text-align: left;
  }
  .idx-footer__level {
    width: 14vw;
    height: auto;
    flex-shrink: 0;
  }
  .idx-footer__disclaimers {
    flex: 1;
    min-width: 0;
  }
  .idx-footer__disclaimers ul {
    display: flex;
    flex-direction: column;
    gap: 1vw;
    padding: 0;
    margin: 0;
  }
  .idx-footer__disclaimers li {
    font-size: 2.7vw;
    line-height: 1.2;
    color: #777;
    text-align: left;
    list-style: none;
  }
  .idx-p1-scroll-hint img {
    width: 1.5rem;
  }
}