/*
 * Dropball Mega H5 页面样式
 * --------------------------------------------------
 * rem 适配方案：设计稿宽 375px，令 1rem = 10px
 * 通过 html font-size 随视口宽度等比缩放，实现手机/平板自适应
 * 换算公式：rem = 设计稿 px / 10
 * 全部尺寸均使用 rem，无 px
 */

/* 导入 Kanit 字体（Google Fonts CDN，支持 300-700 字重） */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&display=swap');

/* 全局重置 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* 视口宽 375px 时 => 10px，整页等比缩放铺满视口宽度 */
  font-size: calc(100vw / 37.5);
}

body {
  margin: 0 auto;
  font-family: Kanit, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimHei, Arial, Helvetica,
    sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* 页面主容器：宽 37.5rem(=375px) 等比占满视口宽 */
.h5 {
  position: relative;
  width: 37.5rem;
  min-height: 100vh;
  overflow-x: hidden; /* 裁掉导航栏左右溢出部分 */
  background: #233177;
}

/* ============ 内容区：主视觉背景图 + 浮层 ============ */
.contents {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 34rem 2.6rem 1.9rem; /* 顶部留白 340 用于显示背景主视觉 */
  width: 37.5rem;
  height: 66.7rem;
  background-image: url(./image/msifv26x-w9b393d.webp);
  background-position: 0 0;
  background-size: 100% auto; /* 背景图铺满内容区 */
  background-repeat: no-repeat;
}

/* 第一组浮层容器 */
.autoWrapper {
  position: relative;
  width: 32.3rem;
  height: 22.4rem;
}

/* 椭圆渐变光晕 */
.ellipse7637 {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  width: 32.3rem;
  height: 22.4rem;
  background-image: linear-gradient(180.1deg, #050d3900 -28.7%, #233177 19.38%);
  filter: blur(0.8rem);
}

/* How 说明图 */
.how {
  position: absolute;
  top: 6.1rem;
  left: -0.8rem;
  width: 33rem;
  height: 11.9rem;
}

/* How To Play 问号图标 */
.howToPlay {
  position: absolute;
  top: 13.2rem;
  right: -1.9rem;
  width: 5.2rem;
  height: 5.4rem;
}

/* 标题：Turn into Real Rewards */
.title {
  position: absolute;
  top: 0;
  right: -1.2rem;
  width: 35.5rem;
  height: 12rem;
}

/* Diamond Redemption 主按钮 */
.btn01 {
  position: absolute;
  bottom: -2.3rem;
  left: 0.8rem;
  width: 30.8rem;
  height: 5.3rem;
}

/* 第二组浮层容器 */
.autoWrapper2 {
  position: relative;
  margin-top: 3.1rem;
  width: 30.8rem;
  height: 5.3rem;
}

/* Play Now 次按钮 */
.btn02 {
  position: absolute;
  top: 0;
  left: 0;
  width: 30.8rem;
  height: 5.3rem;
}

/* 底部合规提示文案 */
.a18OnlyPlayResponsib {
  position: absolute;
  bottom: -1.4rem;
  width: 100%;
  height: 1.5rem;
  text-align: center;
  line-height: 1.5rem;
  color: #ffffff99;

  font-size: 1rem;
}

/* ============ 顶部导航栏 ============ */
/* frame：顶部背景图横条，左偏移以铺满导航背景 */
.frame {
  position: absolute;
  top: 0;
  left: -5.5rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0.7rem 6.8rem 1.2rem 7.4rem;
  width: 48.5rem;
  height: 6.6rem;
  background-image: url(./image/msifv26x-h9wdkyt.png);
  background-position: center -0.6rem;
  background-size: cover;
  background-repeat: no-repeat;
}

/* 顶部 logo */
.dropballMega3 {
  width: 6.1rem;
  height: 4.7rem;
}

/* 登录/注册按钮组 */
.frame1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.7rem;
  width: 17.8rem;
  min-width: 17.8rem;
}

/* Sign In / Sign Up 按钮（共用样式） */
.group2117133515 {
  flex-shrink: 0;
  width: 8.4rem;
  height: 3.3rem;
}

/* 可点击元素交互态：按钮与图标加手型指针 */
.btn01,
.btn02,
.group2117133515,
.howToPlay {
  cursor: pointer;
  -webkit-transition: -webkit-transform 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}

/* 按下时轻微缩小反馈 */
.btn01.active,
.btn01:active,
.btn02.active,
.btn02:active,
.group2117133515.active,
.group2117133515:active {
  transform: scale(0.97);
  -webkit-transform: scale(0.97);
}

/* ============================================================
 * 弹出层：5 steps 玩法说明（1:1 还原 1_298 设计）
 * 命名空间 .popup-overlay 隔离，避免与首页样式冲突
 * ============================================================ */

/* 遮罩层：fixed 覆盖整屏，默认隐藏 */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  inset: 0;
  z-index: 100;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.45);
  display: none;
  -webkit-overflow-scrolling: touch;
}

/* .active 时显示 */
.popup-overlay.active {
  display: block;
}

/* 弹出层主体（对应 1_298 设计 .h5，改名避免冲突） */
.popup-h5 {
  position: relative;
  display: flex;
  align-items: flex-start;
  width: 37.5rem;
  margin: 0 auto;
  padding: 1.4rem 1rem 0 0.9rem;
}

/* 内容容器 */
.popup-h5 .frame6 {
  position: relative;
  width: 35.6rem;
}

/* 顶部 "5 steps..." 标题区（背景图 + 文案） */
.popup-h5 .frame5 {
  padding: 5rem 1rem 5rem 2rem; /* 780px 底部留白为设计稿原值 */
  margin-top: 2.3rem;
  background-image: url(./image/image.png), url(./image/bg.jpg);
  background-position: 0 0;
  background-size: 100% auto, 100% 100%;
  border-radius: 2rem;
  background-repeat: no-repeat;
}

.popup-h5 .a5StepsToTurnDiamond {
  line-height: 2.4rem;
  color: #fff28d;
  font-size: 1.6rem;
  text-align: center;
  width: 100%;
}

/* "How To Participate" 标题图 */
.popup-h5 .howToParticipate1 {
  position: absolute;
  top: 0rem;
  left: 2.3rem;
  width: 31.2rem;
  height: 7.1rem;
  background-image: url(./image/msihgnkl-fx9k0jj.webp);
  background-position: 0 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0.3rem 0.3rem #00000080);
}

/* 5 个步骤容器 */
.popup-h5 .frame9 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  width: 31.1rem;
  height: calc(100vh - 17.5rem);
  padding-bottom: 2.8rem;
  overflow-x: hidden;
  overflow-y: auto;
}

/* 步骤说明文案：白色（普通文字） */
.popup-h5 .toEnjoyThisPromotion {
  line-height: 2rem;
  color: #ffffff;
  font-size: 1.6rem;
  font-weight: 500;
}

/* 步骤说明文案：黄色（强调） */
.popup-h5 .toEnjoyThisPromotion2 {
  line-height: 2rem;
  color: #fffb00;
  font-size: 1.6rem;
  font-weight: 500;
  -webkit-text-stroke: none;
  text-stroke: none;
}

/* 步骤说明文案：段落容器（黑色基底，实际可见文字由 span 覆盖为白/黄） */
.popup-h5 .toEnjoyThisPromotion3 {
  margin: 0.1rem 0 0;
  width: 31.1rem;
  text-align: center;
  line-height: 2rem;
  color: #000000;
  font-size: 1.6rem;
  font-weight: 500;
}
.step1,
.step2,
.step3,
.step4,
.step5 {
  margin: 1rem 0;
}

/* step3 / step5 整段白色文案 */
.popup-h5 .chooseTheCasualAppYo {
  margin: 0.1rem 0 0;
  width: 30rem;
  text-align: center;
  line-height: 2rem;
  color: #ffffff;
  font-size: 1.6rem;
  font-weight: 500;
  -webkit-text-stroke: 0.05rem #004ce7;
  text-stroke: 0.05rem #004ce7;
}

/* step4 段落容器 */
.popup-h5 .redeemedAmountOfDiam {
  margin: 0.1rem 0 0;
  width: 30rem;
  text-align: center;
  line-height: 2rem;
  color: #000000;
  font-size: 1.6rem;
  font-weight: 500;
  -webkit-text-stroke: 0.05rem #004ce7;
  text-stroke: 0.05rem #004ce7;
}

/* 步骤配图尺寸 */
.popup-h5 .frame8 {
  margin-top: -0.1rem;
  width: 28.4rem;
  height: 15.6rem;
}

.popup-h5 .frame82 {
  width: 28.4rem;
  height: 15.6rem;
}

/* 各步骤布局（flex 纵向居中） */
.popup-h5 .step1 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-items: center;
  align-self: stretch;
  padding-bottom: 0.4rem;
}

.popup-h5 .step2 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-items: center;
  align-self: stretch;
  padding-bottom: 1.3rem;
}

.popup-h5 .step3 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-items: center;
  align-self: stretch;
  padding: 0 0.5rem 2.4rem 0.6rem;
}

.popup-h5 .step4 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-items: center;
  align-self: stretch;
  padding: 0 0.5rem 1.3rem 0.6rem;
}

.popup-h5 .step5 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-items: center;
  align-self: stretch;
  padding: 0 0.5rem 2.8rem 0.6rem;
}
.popup-h5 .btn03 {
  position: absolute;
  bottom: 1.6rem;
  left: 2.2rem;
  width: 31.1rem;
  height: 6.4rem;
}