/* ====== 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 背景，不等待 JS 的 class 加上 */
@media (min-width: 769px) {
  body {
    background: url(../media/pc5.webp) no-repeat center center fixed;
    background-size: cover;
  }
}

/* 优化：默认小屏幕直接加载 移动端 背景 */
@media (max-width: 768px) {
  body {
    background: url(../imgs/bg.webp) no-repeat center center fixed;
    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 fixed;
  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: 40px 20px;
  /* 优化：利用 GPU 加速渲染，防止图片加载时的复合图层闪烁 */
  backface-visibility: hidden;
  will-change: transform;
}

.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: 40px 50px;
  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';
  font-weight: 700;
  font-size: 20px;
  text-align: center;
  margin-bottom: 9px;
}

.tips {
  font-family: 'Inter';
  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;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.56);
  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;
    /* 重点：底部预留空间，防止卡片挡住底部的赞助商图 */
    padding-bottom: 80px; 
  }

  body.is-mobile .content {
    width: 90%; 
    max-width: 360px;
    padding: 30px 20px;
    margin: 0; /* 依靠父级 flex 居中 */
  }

  /* --- 移动端底部图片恢复原始排版 --- */
  .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;
}