/* css 页面背景*/

body{
  margin:0;
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:    radial-gradient(circle at 50% 20%, rgba(34,197,94,0.18), transparent 55%),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.04) 0px,
      rgba(255,255,255,0.04) 2px,
      transparent 2px,
      transparent 34px
    ),
    radial-gradient(circle at top,#C97800,#8A4A00 70%);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial;
}

/* ===== 手机页面（唯一有背景的区域） ===== */
.mobile-shell{
  width:100%;
  max-width:420px;
  min-height:100vh;

  background:
    radial-gradient(circle at 50% 20%, rgba(34,197,94,0.18), transparent 55%),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.04) 0px,
      rgba(255,255,255,0.04) 2px,
      transparent 2px,
      transparent 34px
    ),
    radial-gradient(circle at top,#C97800,#8A4A00 70%);

  display:flex;
  justify-content:center;
  align-items:center;
}

/* ===== 白色内容卡片 ===== */
.box{
  width:90%;
  max-width:300px;
  background:#fff;
  padding:26px 24px 80px;
  border-radius:18px;
  text-align:center;
  position:relative;
  box-shadow:0 20px 50px rgba(0,0,0,.55);
}

/* 标题 */
.brand{
  font-size:24px;
  font-weight:800;
  color:#111827;
  margin-bottom:18px;
  letter-spacing:.6px;
}
/* 分割线 */
.divider{
  width:100%;
  height:1px;
  margin:12px 0 18px;
  background:linear-gradient(
    to right,
    transparent,
    #e5e7eb,
    transparent
  );
}
/* 旋转 */
.xuanzhuan{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-bottom:14px;
}
/* 旋转框架 */
.reel{
  width:52px;
  height:52px;
  background:#f9fafb;
  border-radius:10px;
  font-size:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:inset 0 0 0 1px #e5e7eb, 0 6px 14px rgba(0,0,0,.15);
}
/* 文案 */
.title{
  font-size:18px;
  margin-bottom:14px;
  color:#111827;
}
/* 修改加载圆圈大小 */
.circle{
  position:relative;
  width:100px;
  height:100px;
  margin:0 auto 10px;
}
/* 圆圈加载 */
svg{ transform:rotate(-90deg); }
.bg{ stroke:#e5e7eb; }
.progress{
  stroke:#22c55e;
  stroke-linecap:round;
  stroke-dasharray: 326.7256;
  stroke-dashoffset: 0;
  animation: spin 1.5s linear infinite;
}
@keyframes spin{
  0%{ stroke-dashoffset: 326.7256; }
  100%{ stroke-dashoffset: 0; }
}

/* 圆圈中间 Logo */
.circle-logo{
  position:absolute;
  top:50%;
  left:50%;
  width:56px; /* 修改加载圆圈内logo大小 */
  height:56px; /* 修改加载圆圈内logo大小 */
  transform:translate(-50%,-50%);
  border-radius:12px;
  background:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}

.circle-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
}

/* 友情提示 */
.tip{
  font-size:14px; /*  修改文字大小 */
  color:#6b7280;
  margin-bottom:15px; /*  修改文字与按钮的间距 */
}

/* 按钮容器 */
.btn-wrap{
  display:flex;
  flex-direction:column;
  gap:0;
}

/* 按钮 */
.enter-btn{
  width:100%;
  flex:none;
  height:12vw;
  max-height:54px;
  border:none;
  border-radius:14px;
  background:linear-gradient(180deg,#22c55e,#15803d);
  color:#fff;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:2px;
  font-weight:600;
}

/* 按钮主文案 */
.btn-main{
  font-size:clamp(14px,4vw,16px);
  font-weight:600;
}
/* 按钮副文案 */
.btn-sub{
  font-size:clamp(10px,3vw,12px);
  color:#d1d5db;
  line-height:1;
}

/* 按钮扫光 */
.enter-btn::before{
  content:"";
  position:absolute;
  top:-20%;
  left:-60%;
  width:50%;
  height:140%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-20deg);
  animation:shine 2.6s infinite;
}
@keyframes shine{
  from{left:-60%;}
  to{left:120%;}
}

/* 手势动画 */
.icon-hand{
  font-size:24px;
  display:inline-block;
  transform-origin:70% 80%;
  animation:mousePress 1.15s infinite ease-in-out;
}
@keyframes mousePress{
  0%{transform:rotate(-18deg) translate(0,0) scale(1);}
  35%{transform:rotate(-18deg) translate(3px,4px) scale(0.85);}
  55%{transform:rotate(-18deg) translate(3px,4px) scale(0.85);}
  100%{transform:rotate(-18deg) translate(0,0) scale(1);}
}
/* 底部分割线 */
.flag-divider{
  position:absolute;
  bottom:45px;      /*  控制“线”和国旗的距离 */
  left:24px;
  right:24px;
  height:1px;
  background:linear-gradient(to right,transparent,#e5e7eb,transparent);
}

/* 年份 + 国旗行（居中版） */
.flag-row{
  position:absolute;
  bottom:12px;
  left:12px;
  right:12px;
  display:flex;
  align-items:center;
  justify-content:center; /*  关键：整体居中 */
  gap:8px;               /* © 2026 和国旗的间距 */
  font-size:12px;
  color:#9ca3af;
}

/* 隐藏的文案。看是否有助于谷歌收录 */
.seo-text{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}