/* ====== modern css reset ====== */

/* 1. 移除所有默认 margin/padding */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 2. 设置默认字体和字体平滑 */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-size-adjust: 100%;
}

/* 3. 统一基础字体样式 */
body {
  line-height: 1.5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: #0b0b0b; 
  color: #333;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh; 
  overflow-x: hidden;
  overflow-y: auto;
}

/* 4. 移除列表样式 */
ul,
ol {
  list-style: none;
}

/* 5. 移除超链接默认样式 */
a {
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s, transform 0.1s;
}

a:active {
  transform: scale(0.98);
  opacity: 0.9;
}

/* 6. 媒体元素基础设置 */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 7. 表单元素继承字体 */
input,
button,
textarea,
select {
  font: inherit;
}

/* 8. 移除默认 button 样式 */
button {
  border: none;
  background: none;
  cursor: pointer;
}

/* =========================================
   设备背景处理 (非阻塞优化)
   ========================================= */

/* 默认大屏幕直接加载 PC 背景 */
@media (min-width: 769px) {
  body {
    background: url(../media/pc5.webp) no-repeat center center fixed;
    background-size: cover;
  }
}

/* 移动端背景优化：改为 scroll 避免移动端高频重绘卡顿 */
@media (max-width: 768px) {
  body {
    background: url(../imgs/bg.webp) no-repeat center center scroll;
    background-size: cover;
  }
}

/* 保留 JS 兼容类 */
body.is-pc {
  background: url(../media/pc5.webp) no-repeat center center fixed;
  background-size: cover;
}

body.is-mobile {
  background: url(../imgs/bg.webp) no-repeat center center scroll;
  background-size: cover;
}

.video, 
body.is-pc .video, 
body.is-mobile .video {
  display: none !important;
}

/* =========================================
   内容布局样式 (解决底部遮挡与重叠)
   ========================================= */

.main {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 默认垂直居中 */
  align-items: center;     /* 水平居中 */
  background: rgba(0, 0, 0, 0.34);
  /* 重点优化：增加 padding-bottom: 80px，为固定在底部的 .corp 留出安全空间，解决压边重叠 */
  padding: 40px 20px 80px 20px; 
}

/* 针对 PC 矮屏幕/低分辨率窗口适配：防止垂直居中强行将中间卡片推到底部栏上 */
@media (min-width: 769px) and (max-height: 750px) {
  .main {
    justify-content: flex-start;
    padding-top: 30px;
  }
}

.logo {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 30px;
}

.content {
  width: 100%;
  max-width: 400px; 
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  border-radius: 12px;
  padding: 35px 40px; /* 稍微压缩内部高度，提升空间容错率 */
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  position: relative;
  z-index: 10;
}

/* 进度圆环样式 */
.circular-chart {
  width: 200px;
  height: 200px;
}

.circle-bg {
  fill: none;
  stroke: #eee;
  stroke-width: 3.8;
}

.circle {
  fill: none;
  stroke: #02B95E;
  stroke-width: 3.8;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke-dasharray 0.6s ease;
}

.percentage {
  fill: #02B95E;
  font-family: 'Arial', sans-serif;
  font-size: 0.5em;
  text-anchor: middle;
}

/* 按钮与文字样式 */
.continue_btn {
  width: 100%;
}

.continue_btn a {
  display: block;
  width: 100%;
  height: 53px;
  border-radius: 6px;
  background: url(../imgs/continue_btn.png) no-repeat;
  background-size: 100% 100%;
  margin-top: 20px;
  margin-bottom: 30px;
}

.help {
  color: #FF1919;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 20px;
  text-align: center;
  margin-bottom: 9px;
}

.tips {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #909090;
  text-align: center;
  margin-bottom: 20px;
}

.domains {
  width: 100%;
}

.domains a {
  display: block;
  width: 100%;
  height: 53px;
  border-radius: 6px;
  margin-bottom: 13px;
  background-size: 100% 100%;
}

.ios { background: url(../imgs/ios_btn.png) no-repeat; }
.android { background: url(../imgs/android_btn.png) no-repeat; margin-bottom: 0 !important; }

/* 底部区域 (PC端吸底栏) */
.corp {
  width: 100%;
  position: fixed; 
  bottom: 0;
  left: 0;
  height: 60px; /* 固定高度，确保与 padding-bottom 的对齐空间一致 */
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.65); /* 稍微提升深色底透明度，增强对比度 */
  padding: 15px;
  z-index: 20;
}

.corp img {
  height: 30px;
  width: auto;
  opacity: 0.8;
}

/* =========================================
   移动端 (Mobile) 特殊覆盖
   ========================================= */

@media (max-width: 768px) {
  /* 移动端隐藏 PC 的 Logo 和原本的吸底条 */
  body.is-mobile .logo,
  body.is-mobile .corp {
    display: none;
  }

  body.is-mobile .main {
    justify-content: center; 
    padding: 20px 20px 80px 20px; /* 预留 80px 空间给底部赞助商 .corp-h5 */
  }

  /* 针对移动端低高度屏幕适配 */
  @media (max-height: 650px) {
    body.is-mobile .main {
      justify-content: flex-start;
      padding-top: 20px;
    }
  }

  body.is-mobile .content {
    width: 90%; 
    max-width: 360px;
    padding: 30px 20px;
    margin: 0;
  }

  /* --- 移动端底部图片恢复原始排版 --- */
  .corp-h5 {
    display: block !important;
    position: fixed;    /* 固定在屏幕底部 */
    bottom: 20px;       /* 距离底部高度 */
    left: 0;
    width: 100%;
    z-index: 5;
  }

  .corp-h5 .imgs {
    display: flex;
    justify-content: center; /* 横向居中排开 */
    align-items: center;
    gap: 10px;               /* 图片间距 */
  }

  .corp-h5 .imgs img {
    height: 18px;            /* 还原截图中的小图标尺寸 */
    width: auto;
    opacity: 0.8;
  }

  /* 移动端元素尺寸微调 */
  body.is-mobile .circular-chart {
    width: 45vw;
    height: 45vw;
    max-width: 180px;
    max-height: 180px;
  }

  body.is-mobile .continue_btn a {
    height: 13vw;
    max-height: 55px;
    margin-bottom: 6vw;
  }

  body.is-mobile .domains a {
    height: 13vw;
    max-height: 55px;
  }
}

/* PC 端隐藏 H5 专用组件 */
body.is-pc .corp-h5 {
  display: none;
}