/* ==========================================================================
   ch2-5.css — 第 2~5 章共用样式
   ch2- 序幕·开启   ch3- 班级相册   ch4- 外号揭秘   ch5- 时光大事记

   主题：黑金。颜色优先继承 base.css 的 :root 变量，缺失时用本地回落值。
   速度：--ch-sp = 1 / speed（预览模式 ×3 时由 JS 设为 0.3333）。
        本文件所有 transition / animation 时长都乘 var(--ch-sp)，
        保证预览模式下动画与 setTimeout 同步加速。
   布局：#stage / .chapter-root 已是 fixed inset:0（base.css），本章直接铺满。
   ========================================================================== */

/* ============================================================ 公共容器 */
.ch2-wrap,
.ch3-wrap,
.ch4-wrap,
.ch5-wrap {
  --ch-gold: var(--gold, #d4af37);
  --ch-gold-lt: var(--gold-lt, #f0d878);
  --ch-gold-dk: var(--gold-dk, #8a6d1f);
  --ch-ivory: var(--text, #e9e6dd);
  --ch-dim: var(--text-dim, #8b8f9a);
  --ch-sp: 1;                 /* 速度因子：1/1 或 1/3 */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  color: var(--ch-ivory);
  text-align: center;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}

/* 章节标题（自绘，不依赖 ceremony.css，避免耦合） */
.ch2-h1, .ch3-h1, .ch4-h1, .ch5-h1 {
  margin: 0;
  font-size: clamp(24px, 3.2vw, 46px);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  filter: drop-shadow(0 4px 16px rgba(212, 175, 55, 0.28));
  color: #f0c74a;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55),
    0 -1px 0 rgba(120, 84, 8, 0.45),
    0 0 22px rgba(255, 200, 70, 0.32);
}
.ch3-sub, .ch4-sub, .ch5-sub {
  margin: 12px 0 0;
  font-size: clamp(12px, 1.15vw, 18px);
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  color: var(--ch-dim);
}

/* ==========================================================================
   第 2 章 · 序幕·开启
   ========================================================================== */
.ch2-wrap {
  background: radial-gradient(120% 90% at 50% 42%, #17140d 0%, #0b0a07 46%, #030303 100%);
}

/* 金色粒子画布 */
.ch2-canvas {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity calc(1.6s * var(--ch-sp)) ease;
  pointer-events: none;
}
.ch2-wrap.ch2-dots .ch2-canvas { opacity: 0.95; }

/* 底部金色柔光 */
.ch2-glow {
  position: absolute;
  left: 50%;
  bottom: -22vh;
  width: 120vw;
  height: 60vh;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(212, 175, 55, 0.30) 0%, rgba(212, 175, 55, 0) 70%);
  opacity: 0;
  transition: opacity calc(2.4s * var(--ch-sp)) ease;
  pointer-events: none;
}
.ch2-wrap.ch2-dots .ch2-glow { opacity: 1; }

/* 电影黑边 */
.ch2-bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 0;
  background: #000;
  z-index: 6;
  transition: height calc(1.1s * var(--ch-sp)) cubic-bezier(0.22, 0.8, 0.3, 1);
  pointer-events: none;
}
.ch2-bar--top { top: 0; }
.ch2-bar--bottom { bottom: 0; }
.ch2-wrap.ch2-bars .ch2-bar { height: 8vh; }

/* 暗角 + 颗粒，增强胶片感 */
.ch2-vignette {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: radial-gradient(75% 65% at 50% 46%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.72) 100%);
  pointer-events: none;
}
.ch2-grain {
  position: absolute;
  top: -20%;
  right: -20%;
  bottom: -20%;
  left: -20%;
  background-image:
    repeating-radial-gradient(circle at 17% 32%, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px),
    repeating-radial-gradient(circle at 71% 64%, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 4px);
  opacity: 0.5;
  pointer-events: none;
}

/* 正文舞台（缓慢推近，制造电影感） */
.ch2-stage {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 6vw;
  animation: ch2-zoom calc(24s * var(--ch-sp)) linear both;
}
@keyframes ch2-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.045); }
}

/* 主标题：逐字显现
   注意：不能 white-space:nowrap —— 班级名一长就会顶出屏幕，
   这里允许换行（ch2.js 会在「届」后插一个软换行），保证整行都看得见。 */
.ch2-title {
  position: relative;
  margin: 0 auto;
  max-width: 94vw;
  font-size: clamp(26px, 4.2vw, 72px);
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.22;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: keep-all;
}
/* 「2026届」后面强制换行，第二行放班级名 + 毕业典礼 */
.ch2-br { display: block; height: 0.14em; line-height: 0; font-size: 0; }
.ch2-ch {
  display: inline-block;
  opacity: 0;
  color: #f4f0e4;
  text-shadow: 0 0 34px rgba(212, 175, 55, 0.35);
}
.ch2-title.ch2-play .ch2-ch {
  animation: ch2-char-in calc(1s * var(--ch-sp)) cubic-bezier(0.2, 0.85, 0.25, 1) both;
  animation-delay: var(--d, 0s);
}
@keyframes ch2-char-in {
  0%   { opacity: 0; transform: translateY(26px) scale(1.16); filter: blur(12px); }
  55%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.ch2-ch--gold {
  filter: drop-shadow(0 0 18px rgba(212, 175, 55, 0.55));
  color: #f0c74a;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55),
    0 -1px 0 rgba(120, 84, 8, 0.45),
    0 0 22px rgba(255, 200, 70, 0.32);
}

/* 标题金色扫光（一次性掠过） */
.ch2-sheen {
  position: absolute;
  top: -12%;
  left: 0;
  width: 42%;
  height: 124%;
  background: linear-gradient(100deg,
    rgba(255, 244, 200, 0) 0%,
    rgba(255, 244, 200, 0.12) 42%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 244, 200, 0.12) 58%,
    rgba(255, 244, 200, 0) 100%);
  transform: translateX(-160%) skewX(-14deg);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}
.ch2-title.ch2-sheen .ch2-sheen {
  animation: ch2-sheen calc(2.6s * var(--ch-sp)) cubic-bezier(0.4, 0, 0.3, 1) both;
}
@keyframes ch2-sheen {
  0%   { opacity: 0; transform: translateX(-160%) skewX(-14deg); }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(320%) skewX(-14deg); }
}

/* 副标题 */
.ch2-sub {
  margin: 2.4vh 0 0;
  max-width: 62vw;
  font-size: clamp(14px, 1.5vw, 26px);
  letter-spacing: 0.1em;
  line-height: 1.95;
  color: rgba(233, 230, 221, 0.82);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity calc(1.4s * var(--ch-sp)) ease, transform calc(1.4s * var(--ch-sp)) ease;
}
.ch2-wrap.ch2-sub-on .ch2-sub { opacity: 1; transform: translateY(0); }

/* 金色分隔线 */
.ch2-rule {
  position: relative;
  width: min(46vw, 620px);
  height: 1px;
  margin: 3.4vh auto 0;
  background: linear-gradient(90deg, transparent, var(--ch-gold) 30%, var(--ch-gold-lt) 50%, var(--ch-gold) 70%, transparent);
  transform: scaleX(0);
  transition: transform calc(1.3s * var(--ch-sp)) cubic-bezier(0.2, 0.8, 0.25, 1);
}
.ch2-rule::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--ch-gold-lt);
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.9);
}
.ch2-wrap.ch2-rule-on .ch2-rule { transform: scaleX(1); }

/* 落款 */
.ch2-seal {
  margin-top: 2.6vh;
  padding: 6px 20px;
  font-size: clamp(11px, 1vw, 16px);
  letter-spacing: 0.62em;
  text-indent: 0.62em;
  color: var(--ch-gold-lt);
  border: 1px solid rgba(212, 175, 55, 0.42);
  border-radius: 2px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity calc(1.6s * var(--ch-sp)) ease, transform calc(1.6s * var(--ch-sp)) ease,
              letter-spacing calc(2s * var(--ch-sp)) ease;
}
.ch2-wrap.ch2-seal-on .ch2-seal {
  opacity: 1;
  transform: translateY(0);
  letter-spacing: 0.78em;
  text-indent: 0.78em;
}

/* 最后 3 秒：缓缓变暗（黑场由 core 的 #veil 接走，不会闪） */
.ch2-dim {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 7;
  background: #000;
  opacity: 0;
  transition: opacity calc(3.4s * var(--ch-sp)) ease-in;
  pointer-events: none;
}
.ch2-wrap.ch2-dim-on .ch2-dim { opacity: 0.94; }

/* ==========================================================================
   第 3 章 · 班级相册（拍立得照片墙）
   ========================================================================== */
.ch3-wrap {
  background:
    radial-gradient(90% 70% at 50% 22%, rgba(212, 175, 55, 0.10) 0%, rgba(212, 175, 55, 0) 62%),
    linear-gradient(170deg, #0a0b10 0%, #050508 60%, #030304 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5vh 4vw 9vh;
}
.ch3-head {
  flex: none;
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity calc(1s * var(--ch-sp)) ease, transform calc(1s * var(--ch-sp)) ease;
}
.ch3-wrap.ch3-head-on .ch3-head { opacity: 1; transform: translateY(0); }

/* 照片墙网格（行列数由 JS 依据卡片数量设置） */
.ch3-wall {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  gap: clamp(18px, 2vw, 34px);
  width: min(1120px, 66vw);
  max-height: 66vh;
  margin-top: 2.4vh;
  perspective: 1400px;
}

/* 单元格：负责“错落”（随机倾斜 + 上下偏移） */
.ch3-cell {
  position: relative;
  /* 站位对齐：格子只负责占位，不做位移/旋转，避免相邻卡片互相压住 */
  transform: none;
  min-height: 0;
  min-width: 0;
}

/* 拍立得卡片：负责“飞入” */
.ch3-card {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 3.2% 3.2% 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, #fdfbf5 0%, #ece5d5 100%);
  border-radius: 3px;
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.62), 0 2px 0 rgba(255, 255, 255, 0.35) inset;
  opacity: 0;
  transform: translateY(90px) translateZ(-160px) rotate(-7deg) scale(0.86);
  transition: opacity calc(0.75s * var(--ch-sp)) ease,
              transform calc(0.95s * var(--ch-sp)) cubic-bezier(0.16, 0.9, 0.26, 1.08),
              box-shadow calc(0.95s * var(--ch-sp)) ease;
}
.ch3-cell.ch3-on .ch3-card {
  opacity: 1;
  transform: translateY(0) translateZ(0) rotate(0) scale(1);
  box-shadow: 0 26px 52px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(212, 175, 55, 0.35);
}
/* 落位后轻微呼吸浮动 */
.ch3-cell.ch3-float .ch3-card {
  animation: ch3-float calc(7s * var(--ch-sp)) ease-in-out infinite;
  animation-delay: var(--fd, 0s);
}
@keyframes ch3-float {
  0%, 100% { transform: translateY(0) rotate(0) scale(1); }
  50%      { transform: translateY(-7px) rotate(0.35deg) scale(1.006); }
}

/* 照片区域 */
.ch3-photo {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: #1b1d24;
}
.ch3-img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* ★ 原来是 cover：图片被裁掉一块，用户反馈「显示不全」。
     改成 contain：整张图完整显示，比例不对的地方留深色边。 */
  object-fit: contain;
  background: #07080c;
  display: block;
}

/* 占位内容：渐变底 + 序号 + 相机图标 + “照片占位” */
.ch3-photo > .ch3-no,
.ch3-photo > .ch3-ico,
.ch3-photo > .ch3-mark {
  position: absolute;
  z-index: 2;
}
.ch3-no {
  top: 2%;
  left: 6%;
  font-size: clamp(30px, 4.2vw, 74px);
  font-weight: 800;
  line-height: 1;
  color: rgba(255, 255, 255, 0.16);
  letter-spacing: -0.02em;
}
.ch3-ico {
  left: 50%;
  top: 46%;
  width: clamp(30px, 3vw, 48px);
  height: clamp(22px, 2.2vw, 35px);
  margin: calc(clamp(22px, 2.2vw, 35px) / -2) 0 0 calc(clamp(30px, 3vw, 48px) / -2);
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: 5px;
}
.ch3-ico::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42%;
  height: 42%;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255, 255, 255, 0.75);
  border-radius: 50%;
}
.ch3-ico::after {
  content: '';
  position: absolute;
  left: 12%;
  top: -6px;
  width: 30%;
  height: 5px;
  border-radius: 2px 2px 0 0;
  background: rgba(255, 255, 255, 0.55);
}
.ch3-mark {
  left: 0;
  right: 0;
  bottom: 8%;
  font-size: clamp(11px, 1vw, 15px);
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: rgba(255, 255, 255, 0.72);
}

/* 8 套占位渐变，避免整墙同色。
   注意：原来的 8 套太深（#2b3a55→#16202f 这种），叠上照片后整面墙看着就是「没颜色」。
   现在每套都提到高饱和 + 中高明度，照片没到位时也能一眼看出是五颜六色的一墙。 */
.ch3-g1 .ch3-photo { background: linear-gradient(138deg, #4f79d8 0%, #2c3f92 52%, #1c2a68 100%); }
.ch3-g2 .ch3-photo { background: linear-gradient(138deg, #a95cc6 0%, #6a2f86 52%, #43175a 100%); }
.ch3-g3 .ch3-photo { background: linear-gradient(138deg, #35b191 0%, #177256 52%, #0d4635 100%); }
.ch3-g4 .ch3-photo { background: linear-gradient(138deg, #dda63a 0%, #9a6417 52%, #63400c 100%); }
.ch3-g5 .ch3-photo { background: linear-gradient(138deg, #8f79e6 0%, #56439f 52%, #332764 100%); }
.ch3-g6 .ch3-photo { background: linear-gradient(138deg, #e0738a 0%, #9c3b53 52%, #642033 100%); }
.ch3-g7 .ch3-photo { background: linear-gradient(138deg, #3fa9dd 0%, #1c6b96 52%, #104157 100%); }
.ch3-g8 .ch3-photo { background: linear-gradient(138deg, #9fc94f 0%, #628421 52%, #3d5410 100%); }


/* ===== 照片框的「五颜六色」——第二轮加强 =====
   用户反馈：相框五颜六色「仍然没颜色」。实测两个原因：
     ① 原来只做了 1px 彩色描边 + 顶部 3px 高光，照片一铺满就全被盖住；
     ② 后台配的 9 张「照片」是 377×263 全黑图（平均 rgb(1,1,1)），
        黑图盖住相框，看上去就是一点颜色都没有。
   这一轮把颜色做成真正压在照片**上面**的一层：
     ① 卡片外圈：3px 实描边 + 外发光
     ② 照片四周：同色内描边（inset box-shadow，叠在图上）
     ③ 照片里面：对角彩色薄纱（低透明度，照片看得清、颜色也看得见）
   8 套颜色固定不随机，同一张照片每轮颜色一致，看着才像设计过的。 */
.ch3-g1 { --ch3-c: #6f97e8; --ch3-c2: rgba(111, 151, 232, 0.55); --ch3-c3: rgba(111, 151, 232, 0.42); }
.ch3-g2 { --ch3-c: #c47cdd; --ch3-c2: rgba(196, 124, 221, 0.55); --ch3-c3: rgba(196, 124, 221, 0.42); }
.ch3-g3 { --ch3-c: #4fd0ac; --ch3-c2: rgba(79, 208, 172, 0.55); --ch3-c3: rgba(79, 208, 172, 0.42); }
.ch3-g4 { --ch3-c: #f0bd52; --ch3-c2: rgba(240, 189, 82, 0.55); --ch3-c3: rgba(240, 189, 82, 0.42); }
.ch3-g5 { --ch3-c: #a48ff0; --ch3-c2: rgba(164, 143, 240, 0.55); --ch3-c3: rgba(164, 143, 240, 0.42); }
.ch3-g6 { --ch3-c: #f08a9c; --ch3-c2: rgba(240, 138, 156, 0.55); --ch3-c3: rgba(240, 138, 156, 0.42); }
.ch3-g7 { --ch3-c: #5cc2ea; --ch3-c2: rgba(92, 194, 234, 0.55); --ch3-c3: rgba(92, 194, 234, 0.42); }
.ch3-g8 { --ch3-c: #b6d95e; --ch3-c2: rgba(182, 217, 94, 0.55); --ch3-c3: rgba(182, 217, 94, 0.42); }

/* ① 卡片外圈：3px 实描边 + 外发光
   注意：原来这圈彩色描边只写在 .ch3-on（当前高亮那张）上，
   实测 9 格里只有 1 格有颜色、其余 8 格是白框 —— 用户看到的「没颜色」就是这个。
   现在「每一张」都有自己颜色的 2px 描边，轮到它时再加粗到 3px 并发光。 */
.ch3-cell .ch3-card {
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.5),
              0 0 0 2px var(--ch3-c, #6f97e8);
}
.ch3-cell .ch3-photo { border-color: var(--ch3-c, #6f97e8); }
.ch3-cell.ch3-on .ch3-card {
  box-shadow: 0 26px 52px rgba(0, 0, 0, 0.7),
              0 0 0 3px var(--ch3-c, #6f97e8),
              0 0 34px -4px var(--ch3-c2, rgba(111, 151, 232, 0.55));
}
/* ②③ 照片内部：同色内描边 + 对角彩色薄纱，压在照片上面，黑图也盖不住 */
.ch3-photo::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 3;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 6px var(--ch3-c2, rgba(111, 151, 232, 0.55)),
    inset 0 0 44px -10px var(--ch3-c2, rgba(111, 151, 232, 0.55));
  background: linear-gradient(150deg,
    var(--ch3-c3, rgba(111, 151, 232, 0.42)) 0%,
    rgba(255, 255, 255, 0) 46%,
    var(--ch3-c3, rgba(111, 151, 232, 0.42)) 100%);
  opacity: 0.92;
}
/* 照片本体排在彩色层下面，别把颜色盖掉 */
.ch3-img { z-index: 1; }

/* 快门闪光 */
.ch3-flash {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 4;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
.ch3-cell.ch3-shot .ch3-flash { animation: ch3-shot calc(0.55s * var(--ch-sp)) ease-out 1; }
@keyframes ch3-shot {
  0%   { opacity: 0.92; }
  100% { opacity: 0; }
}

/* 卡片底部说明条：方便老师替换照片 */
.ch3-cap {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  height: clamp(24px, 3.1vh, 34px);
  padding: 0 2px;
  color: #3b3527;
}
.ch3-cap-no {
  flex: none;
  font-size: clamp(10px, 0.9vw, 13px);
  font-weight: 800;
  color: #8a6d1f;
  letter-spacing: 0.04em;
}
.ch3-cap-tx {
  flex: 1 1 auto;
  min-width: 0;
  font-size: clamp(9px, 0.72vw, 12px);
  line-height: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #6b6350;
}

/* 图片加载失败：退化为占位样式 */
.ch3-cell.ch3-bad .ch3-img { display: none; }
.ch3-cell.ch3-bad .ch3-photo { background: repeating-linear-gradient(45deg, #2a2a2a 0 10px, #202020 10px 20px); }
.ch3-cell.ch3-bad .ch3-photo::after {
  content: '图片加载失败，请检查路径';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10%;
  font-size: clamp(10px, 0.8vw, 13px);
  color: rgba(255, 255, 255, 0.7);
}

/* 金色扫光（全部卡片落位后掠过整面墙一次） */
.ch3-shine {
  position: absolute;
  top: -8%;
  right: -12%;
  bottom: -8%;
  left: -12%;
  z-index: 5;
  background: linear-gradient(100deg,
    rgba(255, 246, 210, 0) 38%,
    rgba(255, 246, 210, 0.20) 50%,
    rgba(255, 246, 210, 0) 62%);
  transform: translateX(-120%);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}
.ch3-wrap.ch3-shine-on .ch3-shine { animation: ch3-shine calc(2.6s * var(--ch-sp)) ease-in-out 1; }
@keyframes ch3-shine {
  0%   { opacity: 0; transform: translateX(-120%); }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(120%); }
}

/* 收尾文案 */
.ch3-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3.6vh;
  z-index: 6;
  font-size: clamp(14px, 1.4vw, 24px);
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  color: var(--ch-gold-lt);
  text-shadow: 0 0 22px rgba(212, 175, 55, 0.4);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity calc(1.6s * var(--ch-sp)) ease, transform calc(1.6s * var(--ch-sp)) ease;
  pointer-events: none;
}
.ch3-wrap.ch3-foot-on .ch3-foot { opacity: 1; transform: translateY(0); }

/* 结尾轻推暗场 */
.ch3-wrap.ch3-end .ch3-wall {
  transform: scale(1.03);
  filter: brightness(0.66) saturate(0.9);
  transition: transform calc(4s * var(--ch-sp)) ease, filter calc(4s * var(--ch-sp)) ease;
}

/* ==========================================================================
   第 4 章 · 外号揭秘
   ========================================================================== */
.ch4-wrap {
  background:
    radial-gradient(60% 52% at 50% 44%, rgba(212, 175, 55, 0.16) 0%, rgba(212, 175, 55, 0) 68%),
    linear-gradient(180deg, #0a0a0c 0%, #060607 100%);
}
/* 聚光灯 */
.ch4-spot {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 78vw;
  height: 78vw;
  max-width: 1200px;
  max-height: 1200px;
  transform: translate(-50%, -50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 238, 180, 0.10) 0%, rgba(255, 238, 180, 0) 70%);
  pointer-events: none;
}
/* 浮尘 */
.ch4-dust {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
}
.ch4-dust i {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 226, 150, 0.65);
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.8);
  animation: ch4-dust calc(9s * var(--ch-sp)) linear infinite;
  animation-delay: var(--dd, 0s);
  opacity: 0;
}
@keyframes ch4-dust {
  0%   { opacity: 0; transform: translateY(20px) scale(0.6); }
  25%  { opacity: 0.9; }
  75%  { opacity: 0.7; }
  100% { opacity: 0; transform: translateY(-90px) scale(1.1); }
}

.ch4-head {
  position: absolute;
  left: 0;
  right: 0;
  top: 5.5vh;
  z-index: 3;
  transition: opacity calc(0.9s * var(--ch-sp)) ease, transform calc(0.9s * var(--ch-sp)) ease;
}
.ch4-wrap.ch4-run .ch4-head { opacity: 0.3; transform: scale(0.86) translateY(-6px); }
.ch4-hint {
  margin: 10px 0 0;
  font-size: clamp(12px, 1.1vw, 17px);
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  color: var(--ch-dim);
}

/* 主卡片 */
.ch4-card {
  position: absolute;
  left: 50%;
  top: 52%;
  width: min(820px, 70vw);
  min-height: min(46vh, 420px);
  padding: 5vh 4vw 4.4vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6vh;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.96);
  background: linear-gradient(160deg, rgba(24, 22, 16, 0.94) 0%, rgba(10, 10, 12, 0.96) 100%);
  border: 1px solid rgba(212, 175, 55, 0.5);
  border-radius: 6px;
  box-shadow:
    0 0 0 1px rgba(212, 175, 55, 0.12),
    0 26px 70px rgba(0, 0, 0, 0.75),
    inset 0 0 60px rgba(212, 175, 55, 0.07);
  transition: opacity calc(0.45s * var(--ch-sp)) ease, transform calc(0.45s * var(--ch-sp)) ease;
}
.ch4-wrap.ch4-card-on .ch4-card { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.ch4-wrap.ch4-out .ch4-card { opacity: 0; transform: translate(-50%, -50%) scale(0.97); }
.ch4-wrap.ch4-finale .ch4-card { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }

/* 四角描金 */
.ch4-corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(212, 175, 55, 0.85);
}
.ch4-corner:nth-of-type(1) { left: -1px; top: -1px; border-right: 0; border-bottom: 0; }
.ch4-corner:nth-of-type(2) { right: -1px; top: -1px; border-left: 0; border-bottom: 0; }
.ch4-corner:nth-of-type(3) { left: -1px; bottom: -1px; border-right: 0; border-top: 0; }
.ch4-corner:nth-of-type(4) { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }

/* 计数 */
.ch4-idx {
  position: absolute;
  right: 16px;
  top: 12px;
  font-size: clamp(11px, 0.85vw, 14px);
  letter-spacing: 0.16em;
  color: rgba(212, 175, 55, 0.75);
}

/* 姓名 */
.ch4-name {
  font-size: clamp(26px, 2.8vw, 48px);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  color: var(--ch-ivory);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity calc(0.7s * var(--ch-sp)) ease, transform calc(0.7s * var(--ch-sp)) ease;
}
.ch4-wrap.ch4-name-on .ch4-name { opacity: 1; transform: translateY(0); }
.ch4-name::after {
  content: '';
  display: block;
  width: 56px;
  height: 1px;
  margin: 14px auto 0;
  background: linear-gradient(90deg, transparent, var(--ch-gold), transparent);
}

/* 外号：盖章式砸下 */
.ch4-nickbox {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(80px, 12vh, 150px);
  width: 100%;
}
.ch4-nick {
  position: relative;
  z-index: 2;
  font-size: clamp(46px, 6.4vw, 118px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0.03em;
  opacity: 0;
  transform: scale(3.4) rotate(-18deg);
  filter: drop-shadow(0 0 30px rgba(212, 175, 55, 0.75));
  color: #f0c74a;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55),
    0 -1px 0 rgba(120, 84, 8, 0.45),
    0 0 22px rgba(255, 200, 70, 0.32);
}
.ch4-wrap.ch4-nick-on .ch4-nick { animation: ch4-stamp calc(0.62s * var(--ch-sp)) cubic-bezier(0.18, 1.7, 0.4, 1) both; }
@keyframes ch4-stamp {
  0%   { opacity: 0; transform: scale(3.4) rotate(-18deg); }
  42%  { opacity: 1; }
  62%  { transform: scale(0.9) rotate(-3deg); }
  80%  { transform: scale(1.06) rotate(-6.5deg); }
  100% { opacity: 1; transform: scale(1) rotate(-5deg); }
}
/* 盖章冲击波 */
.ch4-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 130px;
  height: 130px;
  margin: -65px 0 0 -65px;
  border: 2px solid rgba(212, 175, 55, 0.85);
  border-radius: 50%;
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}
.ch4-wrap.ch4-nick-on .ch4-ring { animation: ch4-ring calc(0.85s * var(--ch-sp)) ease-out 1; }
@keyframes ch4-ring {
  0%   { opacity: 0.95; transform: scale(0.25); border-width: 8px; }
  100% { opacity: 0; transform: scale(3.1); border-width: 1px; }
}
/* 盖章时卡片震动 */
.ch4-wrap.ch4-nick-on .ch4-card { animation: ch4-shake calc(0.5s * var(--ch-sp)) cubic-bezier(0.36, 0.07, 0.19, 0.97) 1; }
@keyframes ch4-shake {
  0%, 100% { transform: translate(-50%, -50%) translate(0, 0) rotate(0); }
  15%      { transform: translate(-50%, -50%) translate(-9px, 4px) rotate(-0.5deg); }
  32%      { transform: translate(-50%, -50%) translate(8px, -3px) rotate(0.45deg); }
  50%      { transform: translate(-50%, -50%) translate(-5px, 2px) rotate(-0.3deg); }
  70%      { transform: translate(-50%, -50%) translate(4px, -1px) rotate(0.2deg); }
  86%      { transform: translate(-50%, -50%) translate(-2px, 1px) rotate(-0.1deg); }
}

/* 那句话 */
.ch4-line {
  min-height: 3.2em;
  font-size: clamp(15px, 1.5vw, 26px);
  line-height: 1.7;
  letter-spacing: 0.1em;
  color: rgba(233, 230, 221, 0.9);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity calc(1s * var(--ch-sp)) ease, transform calc(1s * var(--ch-sp)) ease;
}
.ch4-line::before { content: '「'; color: rgba(212, 175, 55, 0.75); }
.ch4-line::after { content: '」'; color: rgba(212, 175, 55, 0.75); }
.ch4-wrap.ch4-line-on .ch4-line { opacity: 1; transform: translateY(0); }

/* 收尾：外号墙 */
.ch4-wall {
  position: absolute;
  left: 50%;
  top: 54%;
  z-index: 4;
  width: min(1180px, 84vw);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(8px, 1vw, 16px);
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity calc(0.6s * var(--ch-sp)) ease;
}
.ch4-wrap.ch4-finale .ch4-wall { opacity: 1; }
.ch4-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 8px;
  background: linear-gradient(160deg, rgba(26, 23, 16, 0.94), rgba(10, 10, 12, 0.94));
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 4px;
  box-shadow: 0 0 26px rgba(212, 175, 55, 0.12), inset 0 0 24px rgba(212, 175, 55, 0.06);
  opacity: 0;
  animation: ch4-chip-in calc(0.6s * var(--ch-sp)) cubic-bezier(0.2, 1.5, 0.4, 1) both;
  animation-delay: var(--cd, 0s);
}
@keyframes ch4-chip-in {
  from { opacity: 0; transform: scale(0.5) rotate(-6deg); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}
.ch4-chip b {
  font-size: clamp(13px, 1.05vw, 18px);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--ch-dim);
}
.ch4-chip i {
  font-style: normal;
  font-size: clamp(17px, 1.6vw, 30px);
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #f0c74a;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55),
    0 -1px 0 rgba(120, 84, 8, 0.45),
    0 0 22px rgba(255, 200, 70, 0.32);
}
.ch4-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4vh;
  z-index: 5;
  font-size: clamp(14px, 1.35vw, 23px);
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  color: var(--ch-gold-lt);
  text-shadow: 0 0 20px rgba(212, 175, 55, 0.45);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity calc(1.4s * var(--ch-sp)) ease, transform calc(1.4s * var(--ch-sp)) ease;
  pointer-events: none;
}
.ch4-wrap.ch4-foot-on .ch4-foot { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   第 5 章 · 时光大事记
   ========================================================================== */
.ch5-wrap {
  background:
    radial-gradient(80% 60% at 50% 46%, rgba(212, 175, 55, 0.09) 0%, rgba(212, 175, 55, 0) 66%),
    linear-gradient(180deg, #08090d 0%, #040406 100%);
}
.ch5-head {
  position: absolute;
  left: 0;
  right: 0;
  top: 4vh;
  z-index: 9;                     /* ★ 原来 z-index:3，被 .ch5-axis(z-index:2) 的节点卡片压住，标题看不见 */
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
  text-align: center;             /* ★ 补上居中：原来 left/right:0 拉满宽度却没有 text-align，标题贴在左上角被轴线挡 */
  transition: opacity calc(1s * var(--ch-sp)) ease, transform calc(1s * var(--ch-sp)) ease;
}
.ch5-head .ch5-h1 { text-align: center; }
.ch5-head .ch5-sub { text-align: center; }
.ch5-wrap.ch5-head-on .ch5-head { opacity: 1; transform: translateY(0); }

/* 轴线 */
.ch5-axis {
  position: absolute;
  left: 6vw;
  right: 6vw;
  top: 47%;
  height: 0;
  z-index: 2;
}
.ch5-line {
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 2px;
  background: linear-gradient(90deg, rgba(120, 122, 130, 0.15), rgba(150, 152, 160, 0.5) 50%, rgba(120, 122, 130, 0.15));
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition: transform calc(1.7s * var(--ch-sp)) cubic-bezier(0.2, 0.8, 0.25, 1);
}
.ch5-wrap.ch5-line-on .ch5-line { transform: scaleX(1); }
.ch5-fill {
  position: absolute;
  left: 0;
  top: -1px;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--ch-gold-dk), var(--ch-gold), var(--ch-gold-lt));
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.75);
  transition: width calc(0.85s * var(--ch-sp)) cubic-bezier(0.3, 0.8, 0.3, 1);
}

/* 节点（位置由 JS 设置 left，初始为暗灰色） */
.ch5-node {
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  opacity: 0;
  transition: opacity calc(0.9s * var(--ch-sp)) ease;
}
.ch5-wrap.ch5-dots-on .ch5-node { opacity: 1; }

.ch5-date {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  font-size: clamp(11px, 1vw, 17px);
  font-weight: 700;
  letter-spacing: 0.1em;
  white-space: nowrap;
  color: #6a6d76;                     /* 未到：暗灰 */
  transition: color calc(0.7s * var(--ch-sp)) ease, text-shadow calc(0.7s * var(--ch-sp)) ease;
}
.ch5-dot {
  position: absolute;
  left: 50%;
  top: 0;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  background: #3a3d45;                /* 未到：暗灰 */
  border: 1px solid #5a5d66;
  transform: rotate(45deg);
  transition: background calc(0.6s * var(--ch-sp)) ease, border-color calc(0.6s * var(--ch-sp)) ease,
              box-shadow calc(0.6s * var(--ch-sp)) ease, transform calc(0.6s * var(--ch-sp)) cubic-bezier(0.2, 1.6, 0.4, 1);
}
/* 已到：金色发光并一直保持 */
.ch5-node.ch5-on .ch5-dot {
  background: linear-gradient(135deg, #fff3c8, var(--ch-gold) 60%, var(--ch-gold-dk));
  border-color: var(--ch-gold-lt);
  box-shadow: 0 0 16px rgba(212, 175, 55, 0.95), 0 0 34px rgba(212, 175, 55, 0.45);
  transform: rotate(45deg) scale(1.25);
}
.ch5-node.ch5-on .ch5-date {
  color: var(--ch-gold-lt);
  text-shadow: 0 0 16px rgba(212, 175, 55, 0.6);
}

/* 节点卡片：依次弹出 */
.ch5-card {
  position: absolute;
  left: 50%;
  top: 34px;
  width: min(196px, 11.4vw);
  min-width: 118px;
  padding: 12px 10px 13px;
  text-align: center;
  background: linear-gradient(165deg, rgba(26, 24, 17, 0.95), rgba(10, 10, 12, 0.96));
  border: 1px solid rgba(212, 175, 55, 0.42);
  border-radius: 4px;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.7), inset 0 0 26px rgba(212, 175, 55, 0.06);
  opacity: 0;
  transform: translate(-50%, 16px) scale(0.9);
  transition: opacity calc(0.55s * var(--ch-sp)) ease,
              transform calc(0.7s * var(--ch-sp)) cubic-bezier(0.2, 1.4, 0.4, 1);
  pointer-events: none;
}
.ch5-card::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -7px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  background: #14120d;
  border-left: 1px solid rgba(212, 175, 55, 0.42);
  border-top: 1px solid rgba(212, 175, 55, 0.42);
  transform: rotate(45deg);
}
.ch5-wrap.ch5-dots-on .ch5-card {
  /* ★ 时间轴一画出来，7 个时间点的标题就全部显示，
     不再「一个一个慢慢冒」（用户反馈：每个时间段都不显示标题）。
     当前走到的那一个由下面的 .ch5-on 再提亮。 */
  opacity: 0.92;
  transform: translate(-50%, 0) scale(0.96);
}
.ch5-node.ch5-on .ch5-card { opacity: 1; transform: translate(-50%, 0) scale(1); }
.ch5-node.ch5-on.ch5-was .ch5-card {
  /* ★ 关键修复：原来走过去的卡片会 opacity:0 直接消失，
     用户看到的就是「每个时间段都不显示标题」。
     改成走过去的卡片保持显示（略微压暗一点做区分），
     一条时间轴上 7 个时间点的标题始终都看得见。 */
  opacity: 0.94;
  transform: translate(-50%, 0) scale(0.97);
}
.ch5-t {
  display: block;
  font-size: clamp(14px, 1.25vw, 21px);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ch-gold-lt);
}
.ch5-d {
  display: block;
  margin-top: 7px;
  font-style: normal;
  font-size: clamp(11px, 0.9vw, 14px);
  line-height: 1.6;
  color: rgba(233, 230, 221, 0.78);
}
/* JS 在窄屏时给根节点加 .ch5-tight：收紧卡片，避免相邻节点互相压住 */
.ch5-wrap.ch5-tight .ch5-card { width: min(168px, 16vw); padding: 10px 10px 12px; }
.ch5-wrap.ch5-tight .ch5-d { font-size: 11px; }
.ch5-wrap.ch5-tight .ch5-date { font-size: 12px; }

/* 收尾：所有节点一起呼吸闪烁一次 */
.ch5-wrap.ch5-breath .ch5-dot {
  animation: ch5-breath calc(1.5s * var(--ch-sp)) ease-in-out var(--pd, 0s) 1;
}
.ch5-wrap.ch5-breath .ch5-date {
  animation: ch5-breath-txt calc(1.5s * var(--ch-sp)) ease-in-out var(--pd, 0s) 1;
}
@keyframes ch5-breath {
  0%, 100% { box-shadow: 0 0 16px rgba(212, 175, 55, 0.95), 0 0 34px rgba(212, 175, 55, 0.45); }
  45%      { box-shadow: 0 0 30px rgba(255, 240, 180, 1), 0 0 70px rgba(212, 175, 55, 0.9); transform: rotate(45deg) scale(1.5); }
}
@keyframes ch5-breath-txt {
  0%, 100% { text-shadow: 0 0 16px rgba(212, 175, 55, 0.6); }
  45%      { text-shadow: 0 0 30px rgba(255, 240, 180, 1); }
}

.ch5-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5vh;
  z-index: 4;
  font-size: clamp(15px, 1.5vw, 26px);
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  color: var(--ch-gold-lt);
  text-shadow: 0 0 24px rgba(212, 175, 55, 0.5);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity calc(1.5s * var(--ch-sp)) ease, transform calc(1.5s * var(--ch-sp)) ease;
  pointer-events: none;
}
.ch5-wrap.ch5-foot-on .ch5-foot { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   窄屏 / 小屏兜底（大屏为主，这里只保证不溢出）
   ========================================================================== */
@media (max-width: 1180px) {
  .ch5-card { width: min(170px, 17vw); padding: 10px 10px 12px; }
  .ch3-wall { width: 82vw; max-height: 62vh; }
}
@media (max-width: 820px) {
  .ch4-card { width: 88vw; padding: 4vh 5vw; }
  .ch4-wall { grid-template-columns: repeat(2, 1fr); width: 92vw; }
  .ch3-wall { width: 92vw; }
  .ch5-axis { left: 3vw; right: 3vw; }
  .ch5-card { width: 128px; }
  .ch5-d { display: none; }
  .ch2-title { font-size: min(7.4vw, 36px); letter-spacing: 0.03em; }
}

/* ============================================================
   第 4 章收尾 · 全班名单板
   左边男生（蓝色）/ 右边女生（粉色），名字左右交替逐个出现；
   列数与字号由 JS 按容器实测尺寸计算（rbFit），整屏铺得下不滚动。
   ============================================================ */
.ch4-rb {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4.5vh 3.5vw 5.5vh;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.7s;
}
.ch4-rb.on { opacity: 1; visibility: visible; transform: none; }

/* 名单板出场后，前面的卡片 / 外号墙 / 落款淡出，免得同屏太乱 */
.ch4-roster-on .ch4-head,
.ch4-roster-on .ch4-card,
.ch4-roster-on .ch4-wall,
.ch4-roster-on .ch4-foot {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

.ch4-rb-head { flex: none; text-align: center; }
.ch4-rb-title {
  margin: 0;
  font-size: clamp(19px, 2.5vw, 36px);
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  color: var(--gold);
  text-shadow: 0 4px 18px rgba(212, 175, 55, 0.35);
}
.ch4-rb-sub {
  margin: 8px 0 0;
  font-size: clamp(12px, 1.1vw, 16px);
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.6);
}
.ch4-rb-sub b { color: var(--gold); font-weight: 700; }

.ch4-rb-cols {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  /* minmax(0,1fr)：不然内容一多，网格会被撑大导致溢出画外 */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(10px, 1.5vw, 24px);
}
.ch4-rb-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: clamp(9px, 1.3vh, 18px) clamp(9px, 1.1vw, 18px);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
}
.ch4-rb-col--boys {
  border-color: rgba(110, 170, 255, 0.42);
  background: linear-gradient(180deg, rgba(56, 132, 255, 0.16), rgba(56, 132, 255, 0.04));
  box-shadow: 0 0 40px rgba(40, 110, 220, 0.16) inset;
}
.ch4-rb-col--girls {
  border-color: rgba(255, 150, 200, 0.42);
  background: linear-gradient(180deg, rgba(255, 105, 180, 0.16), rgba(255, 105, 180, 0.04));
  box-shadow: 0 0 40px rgba(220, 60, 140, 0.16) inset;
}
.ch4-rb-lab {
  flex: none;
  margin: 0 0 10px;
  text-align: center;
  font-size: clamp(13px, 1.25vw, 18px);
  font-weight: 700;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
}
.ch4-rb-col--boys .ch4-rb-lab { color: #a9d2ff; }
.ch4-rb-col--girls .ch4-rb-lab { color: #ffc0dd; }

.ch4-rb-list {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr;   /* 列数由 JS 覆盖 */
  gap: 6px;
  align-content: start;
  overflow: hidden;
}
.ch4-rb-name {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 4px;
  border-radius: 9px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(10px) scale(0.9);
  transition: opacity 0.34s ease, transform 0.34s cubic-bezier(0.2, 1.3, 0.4, 1);
}
.ch4-rb-name.in { opacity: 1; transform: none; }
.ch4-rb-col--boys .ch4-rb-name {
  color: #d8ebff;
  background: linear-gradient(135deg, rgba(56, 132, 255, 0.34), rgba(56, 132, 255, 0.14));
  border: 1px solid rgba(120, 180, 255, 0.5);
  box-shadow: 0 3px 12px rgba(30, 90, 200, 0.18);
}
.ch4-rb-col--girls .ch4-rb-name {
  color: #ffe0ee;
  background: linear-gradient(135deg, rgba(255, 105, 180, 0.34), rgba(255, 105, 180, 0.14));
  border: 1px solid rgba(255, 160, 205, 0.5);
  box-shadow: 0 3px 12px rgba(190, 50, 120, 0.18);
}
.ch4-rb-none {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

/* 手机 / 矮屏：男女生上下两栏 */
@media (max-width: 760px), (max-height: 620px) {
  .ch4-rb { padding: 2.5vh 12px 4vh; gap: 8px; }
  .ch4-rb-cols { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .ch4-rb-lab { margin-bottom: 5px; letter-spacing: 0.2em; }
  .ch4-rb-sub { margin-top: 5px; }
}

/* ================================================================
   手机竖屏：7 个时间点的横向卡片必然重叠，
   这里改成「竖排列表」——日期 + 标题一行一条，可上下滑动。
   触发条件足够窄，PC / 投影仪 / 平板横屏都不受影响。
   ================================================================ */
@media (max-width: 820px) {
  .ch5-axis {
    position: absolute;
    left: 7vw;
    right: 7vw;
    top: 26%;
    bottom: 10%;
    height: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 2;
  }
  .ch5-line, .ch5-fill { display: none; }
  .ch5-node {
    position: static;
    display: block;
    width: auto;
    height: auto;
    opacity: 1 !important;
    margin: 0 0 9px;
    text-align: left;
  }
  .ch5-date {
    position: static;
    display: inline-block;
    transform: none;
    bottom: auto;
    left: auto;
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--ch-gold-lt);
    margin: 0 0 3px;
    text-shadow: none;
  }
  .ch5-dot { display: none; }
  /* 注意：JS 在窄屏会给根节点加 .ch5-tight（卡片 16vw），
     所以这里必须用同等权重的选择器，否则宽度会被压成 60 多像素。 */
  .ch5-wrap .ch5-card,
  .ch5-wrap.ch5-tight .ch5-card {
    position: static;
    display: block;
    width: auto;
    min-width: 0;
    max-width: none;
    padding: 9px 12px 10px;
    opacity: 1 !important;
    transform: none !important;
    text-align: left;
    border-radius: 8px;
  }
  .ch5-wrap .ch5-card::before { display: none; }
  .ch5-wrap .ch5-t, .ch5-wrap.ch5-tight .ch5-t { font-size: 15px; }
  .ch5-wrap .ch5-d, .ch5-wrap.ch5-tight .ch5-d { font-size: 12px; margin-top: 2px; }
  /* 手机端标题再往下让一点，避开浏览器顶部地址栏和刘海区域 */
  .ch5-head { top: 6vh; z-index: 20; }
  .ch5-head .ch5-h1 { font-size: 23px; line-height: 1.2; }
  .ch5-head .ch5-sub { font-size: 12px; margin-top: 3px; }
}

/* 手机端：右上角的「章节进度」浮层会压住章节标题（用户反馈手机上看不到标题）。
   窄屏直接隐藏它，标题和内容都清爽。 */
@media (max-width: 820px) {
  #marks { display: none !important; }
}