/* ============================================================================
   开场界面（白色背景）
   内容：站名标题 + 网站作者 / 网站参与协作（圆形裁剪头像）
        + 「您是否准备好开启本站？」+ 后台可配秒数的倒计时
   ============================================================================
   这一屏压在整个站点最上层（z-index 比启动画面 #bootscreen 的 900 还高），
   由 assets/js/intro.js 动态生成并控制。这里只管长相。

   排版是「表格化」的，不是随手 flex-wrap —— 这是让它看起来规整的关键：
     桌面端    [ 标签 ][ 头像串··············· ]   标签右对齐、头像串左对齐，
              所有行的头像都从同一条竖线开始；配合虚线分隔，像一份正式名单。
     窄屏      [        标签        ]             标签居中，头像串换到下一行，
              [      头像串        ]             同样从中间往两边排，不会错位。
   两种形态都是整行切换（断点控制），所以永远不会出现「一半换行一半不换行」。
   ========================================================================== */

.intro {
  position: fixed;
  inset: 0;
  z-index: 1200;                 /* 必须高于 #bootscreen 的 900 */
  background: #fff;
  /* 白色底上做「修饰」：不用一张图、全部用渐变叠出来（加载零成本、任意分辨率都清晰）
       ① 顶部一层淡蓝冷光，把标题区托起来
       ② 右下角一层暖金余光，和站内的金色呼应
       ③ 一层极细的点阵网格，白底不再是一块死白
       ④ 一圈从边缘往里的白色渐晕，视线自动收到中间的名单上 */
  background-image:
    radial-gradient(1200px 620px at 50% -8%, #f7f9ff 0%, rgba(255, 255, 255, 0) 62%),
    radial-gradient(760px 420px at 88% 108%, #fff8f0 0%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(560px 340px at 6% 96%, rgba(212, 175, 55, .075) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(rgba(150, 160, 180, .16) 1px, transparent 1.2px),
    radial-gradient(120% 78% at 50% 50%, rgba(255, 255, 255, 0) 52%, rgba(244, 246, 250, .85) 100%);
  background-size: auto, auto, auto, 22px 22px, auto;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  opacity: 1;
  transition: opacity .6s ease;
}
.intro.gone { opacity: 0; pointer-events: none; }

.intro-inner {
  width: 100%;
  max-width: 1060px;
  padding: clamp(10px, 1.6vh, 22px) 28px clamp(12px, 1.8vh, 26px);
  display: flex;
  flex-direction: column;
  align-items: stretch;          /* 子块整行铺开，左右对称才像网站 */
  text-align: center;
  /* 定位 = flex 居中 + #introTop 的实测留白（见 intro.js 的 settle） */
}

/* 名单上方的留白：唯一决定「居中偏下多少」的东西（intro.js 的 settle 实测设置） */
#introTop { flex: 0 0 auto; height: 0; }

/* ================================================================ 标题区 */
.intro-head { margin-bottom: clamp(12px, 2.2vh, 30px); }

.intro-logo {
  display: block;
  margin: 0 auto clamp(12px, 1.8vh, 20px);
  height: clamp(52px, 7.2vh, 78px);
  width: auto;
  object-fit: contain;
}

.intro-title {
  margin: 0;
  font-size: clamp(30px, 4.4vw, 62px);
  font-weight: 800;
  letter-spacing: clamp(4px, 0.9vw, 12px);
  color: #14161c;
  line-height: 1.18;
  /* 字距把右边缘推开了，缩一点回来保持视觉居中 */
  text-indent: clamp(4px, 0.9vw, 12px);
}

/* 副标题：两侧短线，中间是小字说明 */
.intro-sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: clamp(12px, 1.8vh, 18px) 0 0;
  font-size: clamp(12px, 1.3vw, 16px);
  letter-spacing: clamp(2px, 0.4vw, 5px);
  color: #949aa6;
}
.intro-sub-line {
  flex: 0 1 clamp(28px, 7vw, 96px);
  height: 1px;
  background: linear-gradient(90deg, rgba(160, 168, 182, 0), rgba(160, 168, 182, .66));
}
.intro-sub-line:last-child {
  background: linear-gradient(90deg, rgba(160, 168, 182, .66), rgba(160, 168, 182, 0));
}

/* ================================================================ 名单区
   需求原文：
     「网站作者冒号，头像应该跟在冒号后面，一行一行的，手机端和电脑端都要保持，
       那个网站协助参与也是同理就是上下两行」
   所以：**每一组 = 一行**，标签在左、头像串紧跟冒号往右排；
   一行排不下时头像是往下接着排（不是把整组挤成一列），
   两组合起来正好是上下两行。 */
.intro-who {
  position: relative;
  /* 名单区收紧：上下留白减半、内部行距靠拢，整块看起来是一张「名片」而不是散落的字 */
  padding: clamp(4px, 0.8vh, 10px) 0;
  border-radius: clamp(14px, 1.6vw, 22px);
  /* 极淡的卡片底：白色页面上把名单区「托」起来，边缘用内阴影收口，不做生硬的描边 */
  background:
    linear-gradient(180deg, rgba(249, 250, 253, 0.9) 0%, rgba(255, 255, 255, 0.55) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 0 0 1px rgba(232, 235, 242, 0.9),
    0 18px 42px -30px rgba(24, 30, 46, 0.35);
}
/* 上下两条渐隐细线：比通铺的 1px 实线柔和，两端自然淡出 */
.intro-who::before,
.intro-who::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(198, 204, 216, 0) 0%,
    rgba(198, 204, 216, 0.75) 22%,
    rgba(198, 204, 216, 0.75) 78%,
    rgba(198, 204, 216, 0) 100%);
}
.intro-who::before { top: 0; }
.intro-who::after { bottom: 0; }

/* 一组 = 一行：标签 + 头像串，同一个 flex 行里往右排 */
.intro-prow {
  /* 两列网格：第 1 列标签（右对齐，两行标签右边缘在同一条竖线上），
     第 2 列头像。这样「网站作者 / 网站参与协作」的左边缘完全对齐，
     头像也从同一条竖线开始排，一眼就看得出是一张整齐的名单。 */
  display: grid;
  grid-template-columns: minmax(132px, 190px) 1fr;
  align-items: center;
  justify-content: center;
  column-gap: clamp(12px, 1.4vw, 22px);
  row-gap: clamp(4px, 0.7vh, 10px);
  padding: clamp(6px, 1vh, 14px) clamp(10px, 1.6vw, 24px);
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}
/* 两组之间：一条短的分隔线，只在中间一小段，别拉满整行 */
.intro-prow + .intro-prow {
  border-top: 1px dashed #e9ecf3;
}
.intro-prow + .intro-prow::before { content: none; }

/* 标签：[文字][全角冒号]，紧跟在头像串左边，和第一排头像垂直居中对齐 */
.intro-plabel {
  display: flex;
  flex: 0 0 auto;
  align-items: baseline;
  justify-content: flex-end;
  text-align: right;
  margin-right: 0;
  /* 字号整体放大一档：原来 15~21px 太小，站远了根本看不清写的什么 */
  font-size: clamp(17px, 1.75vw, 24px);
  font-weight: 700;
  color: #1a1d24;
  letter-spacing: 2px;
  white-space: nowrap;
}
.intro-plabel-t { letter-spacing: clamp(1px, 0.25vw, 3px); }
.intro-plabel-c {
  margin-left: 2px;
  color: #9aa1af;                /* 冒号比正文淡一点，视线自然滑到头像上 */
  font-weight: 600;
}

/* 头像串：紧跟标签往右一字排开；放不下就接着往下一行排（整体仍然居中） */
.intro-pfigs {
  display: flex;
  flex: 0 1 auto;
  align-items: flex-start;
  justify-content: flex-start;   /* 从同一条竖线开始排，整齐 */
  flex-wrap: wrap;
  gap: clamp(10px, 1.3vh, 18px) clamp(16px, 2vw, 32px);
  min-width: 0;
}

.intro-fig {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(5px, 0.8vh, 9px);
  animation: introFigIn .62s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
/* 依次错开弹入，显得有精神 */
.intro-fig:nth-child(1) { animation-delay: .06s; }
.intro-fig:nth-child(2) { animation-delay: .14s; }
.intro-fig:nth-child(3) { animation-delay: .22s; }
.intro-fig:nth-child(4) { animation-delay: .30s; }
.intro-fig:nth-child(5) { animation-delay: .38s; }
.intro-fig:nth-child(6) { animation-delay: .46s; }
.intro-fig:nth-child(7) { animation-delay: .54s; }
.intro-fig:nth-child(8) { animation-delay: .62s; }
.intro-fig:nth-child(9) { animation-delay: .70s; }
.intro-fig:nth-child(10) { animation-delay: .78s; }

@keyframes introFigIn {
  from { opacity: 0; transform: translateY(16px) scale(.84); }
  to   { opacity: 1; transform: none; }
}

/* 圆形裁剪：大小统一、永远是正圆，原图方的长的都不变形 */
.intro-av {
  /* 尺寸同时受宽度和高度约束：1440×900 上是 96px，768 高的笔记本上自动缩到 78px，
     保证「标题 + 名单 + 按钮」永远在一屏里，不用下滑。 */
  width: clamp(58px, min(6.2vw, 10.2vh), 96px);
  height: clamp(58px, min(6.2vw, 10.2vh), 96px);
  border-radius: 50%;
  object-fit: cover;             /* 关键：按短边裁切 */
  object-position: center 28%;   /* 人像头部通常偏上，取景稍偏上更自然 */
  background: #f2f3f7;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px #e6e9f0, 0 6px 16px rgba(22, 26, 38, .10);
  flex: 0 0 auto;
}
/* 没图 / 图挂了 → 首字占位，风格保持一致 */
.intro-av--ph {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 700;
  color: #a2a8b4;
  background: #f6f7fa;
  border-color: #fff;
  box-shadow: 0 0 0 1px #e6e9f0;
}

.intro-name {
  font-size: clamp(13px, 1.25vw, 16px);   /* 原来 12~15px，偏小 */
  font-weight: 600;
  color: #4d525d;
  letter-spacing: .5px;
  max-width: 6.5em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================ 询问 / 确认 */
.intro-ask { transition: opacity .4s ease, transform .4s ease; }
.intro-ask.gone {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  visibility: hidden;
  position: absolute;            /* 收走后不再占位，把舞台让给倒计时 */
}

.intro-q {
  margin: 0 0 10px;
  font-size: clamp(20px, 2.5vw, 32px);
  font-weight: 800;
  letter-spacing: clamp(2px, 0.5vw, 6px);
  color: #14161c;
  text-indent: clamp(2px, 0.5vw, 6px);
}
.intro-note {
  margin: 0 0 clamp(18px, 2.6vh, 30px);
  font-size: clamp(12px, 1.3vw, 16px);
  letter-spacing: 1px;
  color: #949aa6;
}

.intro-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: clamp(16px, 1.7vw, 21px);
  font-weight: 700;
  letter-spacing: 8px;
  text-indent: 8px;              /* 字距造成的右偏，缩回来才是真居中 */
  color: #fff;
  padding: 15px 46px;
  min-width: clamp(180px, 22vw, 250px);
  border-radius: 999px;
  background: linear-gradient(135deg, #2c3554 0%, #131826 100%);
  box-shadow: 0 10px 26px rgba(20, 24, 34, .22);
  transition: transform .2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .2s, filter .2s;
}
.intro-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(20, 24, 34, .3); filter: brightness(1.08); }
.intro-btn:active { transform: translateY(0) scale(.985); }
.intro-btn:focus-visible { outline: 3px solid #f0a63a; outline-offset: 3px; }

/* ================================================================ 倒计时 */
.intro-cd {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2vh, 22px);
}
.intro-cd.on { display: flex; }

/* 进度环：conic-gradient 画，外面再套一圈白边显得干净 */
.intro-cd-ring {
  --intro-p: 0%;
  position: relative;            /* ::before 的定位基准（里面那圈白色） */
  width: clamp(190px, 26vh, 300px);
  height: clamp(190px, 26vh, 300px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    conic-gradient(#c9cfdc var(--intro-p), #eef0f5 0);
  transition: background .5s linear;
}
.intro-cd-ring::before {
  content: '';
  position: absolute;
  width: clamp(168px, 23vh, 266px);
  height: clamp(168px, 23vh, 266px);
  border-radius: 50%;
  background: #fff;
}
.intro-cd-num {
  position: relative;
  font-size: clamp(84px, 15vh, 168px);
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  /* 前 10 秒：冷静的深色（一种颜色） */
  color: #1b2130;
  transition: color .45s ease;
}
/* 10 秒之后：橙色，提醒「快开始了」 */
.intro-cd-num.is-warn { color: #f08a1e; }
.intro-cd.is-warn .intro-cd-ring { background: conic-gradient(#f5a83f var(--intro-p), #fdeed8 0); }

/* 数字每跳一次来个呼吸，现场一眼看出在动 */
.intro-cd-num.tick { animation: introTick .9s ease-out; }
@keyframes introTick {
  0%   { transform: scale(1); }
  22%  { transform: scale(1.13); }
  100% { transform: scale(1); }
}

.intro-cd-txt {
  font-size: clamp(13px, 1.4vw, 18px);
  letter-spacing: 2px;
  color: #949aa6;
}
.intro-cd.is-warn .intro-cd-txt { color: #d9801a; }
.intro-cd.done .intro-cd-num { color: #2f9e6a; }
.intro-cd.done .intro-cd-ring { background: conic-gradient(#5ec394 var(--intro-p), #e6f5ee 0); }

/* ================================================================ 窄屏 */
/* 本来就是横排继承了桌面端的居中结构，这里只需收紧间距、缩小头像，
   让一行能排下更多人，排不下时自动换行（换行后仍然居中）。 */
@media (max-width: 780px) {
  .intro-inner { padding: 20px 18px 26px; }

  .intro-prow { grid-template-columns: minmax(96px, 118px) 1fr; row-gap: 8px; padding: 10px 6px; }
  .intro-who { border-color: #f1f3f7; }

  /* 头像缩小一档，一屏能放下更多人 */
  .intro-av { width: clamp(52px, 15vw, 68px); height: clamp(52px, 15vw, 68px); border-width: 2px; }
  .intro-name { max-width: 5.4em; font-size: 12px; }
  .intro-pfigs { gap: 14px 18px; }
}

/* 矮屏（横屏手机 / 小笔记本）：压缩留白，保证名单尽量靠中、按钮不丢 */
@media (max-height: 720px) {
  .intro-inner { padding: 14px 18px 18px; }
  .intro-head { margin-bottom: 18px; }
  .intro-logo { height: 46px; margin-bottom: 10px; }
  .intro-prow { padding: 8px 6px; }
  .intro-note { margin-bottom: 16px; }
  .intro-btn { padding: 12px 40px; }
}

@media (max-height: 560px) {
  .intro-head { margin-bottom: 10px; }
  .intro-logo { height: 38px; }
  .intro-title { font-size: clamp(24px, 4vw, 38px); }
  .intro-prow { padding: 6px 6px; row-gap: 6px; }
  .intro-av { width: 46px; height: 46px; }
  .intro-note { display: none; }              /* 最挤时先舍提示语，保住按钮 */
  .intro-cd-ring { width: clamp(140px, 40vh, 210px); height: clamp(140px, 40vh, 210px); }
  .intro-cd-ring::before { width: clamp(122px, 35vh, 186px); height: clamp(122px, 35vh, 186px); }
}

/* 手机横屏（矮而宽）：纵向只有 360~420px，名单按桌面尺寸排会顶到屏幕外，
   把头像和间距整体压小，保证「名单 + 提示 + 确认按钮」全都在一屏里。 */
@media (max-height: 470px) and (min-width: 620px) {
  .intro-inner { padding: 10px 20px 12px; max-width: 920px; }
  .intro-head { margin-bottom: 8px; }
  .intro-logo { height: 32px; margin-bottom: 6px; }
  .intro-title { font-size: clamp(22px, 3.4vw, 34px); }
  .intro-sub { margin-top: 4px; font-size: 12px; }
  .intro-prow { padding: 4px 4px; row-gap: 4px; grid-template-columns: minmax(84px, 104px) 1fr; }
  .intro-plabel { font-size: 14px; letter-spacing: 1px; }
  .intro-pfigs { gap: 8px 14px; }
  .intro-av { width: 38px; height: 38px; border-width: 2px; }
  .intro-name { font-size: 11px; }
  .intro-q { font-size: clamp(15px, 2.2vw, 20px); margin-bottom: 6px; }
  .intro-note { display: none; }
  .intro-btn { margin-top: 8px; padding: 10px 34px; }
  .intro-cd-ring { width: clamp(120px, 30vh, 160px); height: clamp(120px, 30vh, 160px); }
  .intro-cd-ring::before { width: clamp(104px, 26vh, 140px); height: clamp(104px, 26vh, 140px); }
  .intro-cd-num { font-size: clamp(48px, 13vh, 76px); }
}

@media (prefers-reduced-motion: reduce) {
  .intro-fig { animation: none; }
  .intro-cd-num.tick { animation: none; }
  .intro { transition: none; }
  .intro-cd-ring { transition: none; }
}

/* ============================================================ 加载进度页
   倒计时走完后，开场白不立刻消失，而是就地变成这一块进度条，
   一直显示到「启动画面真的挂好」为止 —— 修掉从前那段「倒计时完了却没有任何提示」的空窗。 */
.intro-ld {
  margin-top: clamp(10px, 1.8vh, 22px);
  width: min(520px, 74vw);
  margin-left: auto;
  margin-right: auto;
  animation: introLdIn .5s ease both;
}
@keyframes introLdIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.intro-ld-bar {
  height: 10px;
  border-radius: 999px;
  background: #eceef4;
  box-shadow: inset 0 1px 3px rgba(24, 30, 46, .12);
  overflow: hidden;
}
.intro-ld-bar > i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #f0a63a, #e2703a);
  transition: width .28s ease;
}
.intro-ld-txt {
  margin-top: 12px;
  font-size: clamp(15px, 1.5vw, 20px);   /* 现场后排也要看得清这一步在干嘛 */
  font-weight: 600;
  letter-spacing: 1px;
  color: #4d525d;
}
/* 网络慢时变得可点：整块提示「点这里刷新重试」 */
.intro-cd.is-slow { cursor: pointer; }
.intro-cd.is-slow .intro-ld-txt { color: #d9801a; text-decoration: underline; }
/* 倒计时环在加载阶段收起来，让位给进度条 */
.intro-cd.is-loading .intro-cd-ring { display: none; }

/* ============================================================================
   ==================  开场确认页 · 统一重整层（最终版）  ==================
   用户要求：「确认页 UI 的字体、颜色、大小全部重整，要规整好看」。
   下面按一套统一规格重排，不再零散打补丁。

   规格（桌面 1440×900 实测）
     字族     PingFang SC / 微软雅黑 / Noto Sans SC（中文优先，数字用等宽表格数字）
     主色     #16202f   标题、问句、按钮底色系
     次色     #5c667a   说明文字        #8d97a8  副标题 / 小节标记
     强调     #3f6fd8 → #6a54c8   确认按钮渐变（站内蓝色同族）
     标题     42px/800      副标题 18px/500
     问句     30px/800      说明   16px/500
     点名标签 24px/700      两行共用 236px 固定列宽 → 右边缘必然对齐
     头像     98px 正圆      名字   17px/600
     确认按钮 260×62        圆角胶囊、字号 20px、字距 10px（缩回 10px 才是真居中）
     矮屏     按 800px 高度断点整体缩一档（1366×768 实测不滚动、按钮完整在屏内）

   ★ 对齐的关键（也是之前 32px 错位的真凶）：
     intro.js 的 row() 原先把每一行打了「内联 + !important」的 flex 样式，
     而内联 !important 在 CSS 层叠里比外部样式表的 !important 还高一级 ——
     所以两行各自 justify-content:center 居中，标签右边缘实测差 65px。
     现在 intro.js 不再写这些内联样式（见 intro.js 的 forceInline 注释），
     这里用 grid + 写死的 236px 列宽，两行的标签右边缘和头像左边缘必然对齐。
   ========================================================================== */
.intro,
.intro button,
.intro input {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Hiragino Sans GB", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

/* ---- 标题区 ---- */
.intro-head { text-align: center; margin-bottom: clamp(16px, 2.6vh, 30px); }
.intro-logo { height: 62px; margin-bottom: 12px; }
.intro-title {
  margin: 0;
  font-size: clamp(30px, 3.1vw, 42px);
  font-weight: 800;
  letter-spacing: 2px;
  color: #16202f;
}
.intro-sub {
  margin: 10px 0 0;
  font-size: clamp(14px, 1.35vw, 18px);
  font-weight: 500;
  letter-spacing: 1.5px;
  color: #8d97a8;
}
.intro-sub-line { background: linear-gradient(90deg, transparent, #d8dee9, transparent); }

/* ---- 名单区：两行共用同一套列宽 ---- */
.intro-who {
  padding: clamp(8px, 1.2vh, 14px) clamp(10px, 1.4vw, 18px);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(250, 251, 254, .95) 0%, rgba(255, 255, 255, .6) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 0 0 0 1px rgba(230, 234, 242, .95),
    0 16px 44px -30px rgba(24, 30, 46, .4);
}
.intro-prow {
  display: grid;
  grid-template-columns: 236px 1fr;      /* 写死列宽 → 两行真对齐 */
  align-items: center;
  justify-content: start;
  justify-items: start;
  column-gap: 26px;
  row-gap: 10px;
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  padding: clamp(8px, 1.1vh, 14px) 8px;
}
.intro-plabel {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;             /* 右对齐 → 两行右边缘同一条竖线 */
  width: 236px;
  box-sizing: border-box;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #16202f;
  white-space: nowrap;
}
.intro-plabel-c { margin-left: 2px; color: #9aa4b6; font-weight: 600; }
.intro-pfigs {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;           /* 左对齐 → 两行头像同一条竖线 */
  flex-wrap: wrap;
  width: 100%;
  min-width: 0;
  gap: clamp(12px, 1.6vh, 20px) clamp(20px, 2.2vw, 34px);
}
.intro-fig { gap: 10px; }
.intro-av {
  width: clamp(66px, min(6.8vw, 11vh), 112px);
  height: clamp(66px, min(6.8vw, 11vh), 112px);
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px #e2e7f0, 0 8px 20px rgba(22, 26, 38, .12);
}
.intro-name {
  max-width: 7.2em;
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 600;
  letter-spacing: .5px;
  color: #3c4658;
}

/* ---- 询问 / 确认 ---- */
.intro-ask { text-align: center; }
.intro-q {
  margin: 0 0 12px;
  font-size: clamp(21px, 2.2vw, 30px);
  font-weight: 800;
  letter-spacing: 4px;
  text-indent: 4px;
  color: #16202f;
}
.intro-note {
  margin: 0 0 clamp(16px, 2.4vh, 26px);
  font-size: clamp(13px, 1.15vw, 16px);
  font-weight: 500;
  letter-spacing: 1px;
  color: #5c667a;
}
.intro-btn {
  font-family: inherit;
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 700;
  letter-spacing: 10px;
  text-indent: 10px;
  color: #fff;
  padding: 0;
  height: clamp(56px, 6.9vh, 62px);
  min-width: clamp(220px, 19vw, 260px);
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #3f6fd8 0%, #5a58cc 52%, #6a54c8 100%);
  box-shadow: 0 14px 32px rgba(63, 111, 216, .34), inset 0 2px 0 rgba(255, 255, 255, .18);
  transition: transform .2s cubic-bezier(.22, 1, .36, 1), box-shadow .2s, filter .2s;
}
.intro-btn:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 18px 40px rgba(63, 111, 216, .42); }
.intro-btn:active { transform: translateY(0) scale(.985); }
.intro-btn:focus-visible { outline: 3px solid #f0a63a; outline-offset: 4px; }

/* ---- 倒计时 / 进度条：颜色统一到同一族 ---- */
.intro-cd-num { color: #16202f; font-weight: 900; }
.intro-cd-txt { font-size: clamp(14px, 1.3vw, 18px); font-weight: 600; letter-spacing: 1.5px; color: #5c667a; }
.intro-ld-txt { font-weight: 600; letter-spacing: 1px; color: #3c4658; }
.intro-ld-bar > i { background: linear-gradient(90deg, #3f6fd8, #6a54c8); }

/* ---- 矮屏（768 高的笔记本）：整体缩一档，标题+名单+按钮仍在一屏内 ---- */
@media (max-height: 800px) {
  .intro-head { margin-bottom: 14px; }
  .intro-logo { height: 48px; margin-bottom: 8px; }
  .intro-title { font-size: clamp(26px, 2.6vw, 34px); }
  .intro-prow { grid-template-columns: 210px 1fr; column-gap: 22px; padding: 7px 8px; }
  .intro-plabel { width: 210px; font-size: 21px; }
  /* 1366×768 实测：min(6vw, 9.4vh)=72px，头像偏小；改成按视口高度给，稳定在 82px */
  .intro-av { width: clamp(64px, 10.6vh, 82px); height: clamp(64px, 10.6vh, 82px); }
  .intro-name { font-size: 15px; }
  .intro-q { font-size: clamp(19px, 2vw, 26px); margin-bottom: 8px; }
  .intro-note { margin-bottom: 14px; font-size: 13px; }
  .intro-btn { height: 54px; min-width: 210px; font-size: 18px; letter-spacing: 8px; text-indent: 8px; }
}

/* ---- 窄屏：列宽放不下，切成「标签在上 / 头像在下」并居中 ---- */
@media (max-width: 860px) {
  .intro-prow { grid-template-columns: 1fr; justify-items: center; column-gap: 0; }
  .intro-plabel { width: auto; justify-content: center; }
  .intro-pfigs { width: auto; justify-content: center; }
}

/* ---- 「绝不偷偷跑掉」的提醒态：120 秒没人点，按钮呼吸、加一行提示，但不自动开始 ---- */
.intro-btn--nudge { animation: introNudge 1.6s ease-in-out infinite; }
@keyframes introNudge {
  0%, 100% { box-shadow: 0 14px 32px rgba(63, 111, 216, .34); }
  50%      { box-shadow: 0 14px 32px rgba(63, 111, 216, .34), 0 0 0 12px rgba(63, 111, 216, .16); }
}
.intro-hint--nudge {
  margin: 12px 0 0;
  font-size: clamp(13px, 1.1vw, 15px);
  font-weight: 600;
  letter-spacing: 1px;
  color: #3f6fd8;
  animation: introLdIn .4s ease both;
}
@media (prefers-reduced-motion: reduce) { .intro-btn--nudge { animation: none; } }