/* ==========================================================================
   ch10-11.css — 第 10 章「签名留念墙」+ 第 11 章「最终定格」
   命名前缀：ch10- / ch11-（不与其他篇章、不与 .c-* 通用组件冲突）
   ========================================================================== */

/* ============================================================ 第 10 章 · 签名留念墙 */
/* 浅灰渐变亮底 —— 与其他篇章的黑色明显区分 */
.ch10-wrap {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #262b33;
  background:
    radial-gradient(circle at 12% 8%, rgba(212, 175, 55, 0.10), transparent 42%),
    radial-gradient(circle at 88% 92%, rgba(120, 144, 200, 0.10), transparent 45%),
    linear-gradient(135deg, #fcfdff 0%, #eef1f6 45%, #dfe5ee 100%);
  --ch10-hud-right: 210px;   /* 右上角全局 HUD 宽度，标题行右侧留白 */
  --ch10-ink: #262b33;
  --ch10-dim: #7b8493;
  --ch10-line: rgba(31, 41, 55, 0.12);
  --ch10-gold: #d4af37;
}

/* ---------------------------------------------------------- 顶部标题 + 签名人数 */
.ch10-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  /* 右侧留白：避开全局 HUD 的倒计时（右上）与节点标记（右上第二列） */
  /* 上下内边距收窄一点，把高度让给画板（用户要求：绘画范围再大一丢丢） */
  padding: 8px calc(var(--ch10-hud-right, 210px) + 16px) 4px 20px;
}

.ch10-title {
  margin: 0;
  font-size: clamp(19px, 2.0vw, 34px);
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #1f2937;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.8);
}

.ch10-count {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex: none;
  padding: 10px 24px;
  font-size: clamp(15px, 1.3vw, 22px);
  font-weight: 600;
  color: #4b5563;
  white-space: nowrap;
  background: #ffffff;
  border: 1px solid rgba(212, 175, 55, 0.5);
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(31, 41, 55, 0.10), inset 0 0 0 3px rgba(212, 175, 55, 0.06);
}
.ch10-count-num {
  font-size: 1.55em;
  font-weight: 800;
  line-height: 1;
  color: #b8860b;
  font-variant-numeric: tabular-nums;
  min-width: 1.1em;
  text-align: center;
}
.ch10-count-unit { color: var(--ch10-dim); }
.ch10-count.pulse { animation: ch10Pulse 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes ch10Pulse {
  0%   { transform: scale(1); box-shadow: 0 8px 22px rgba(31, 41, 55, 0.10); }
  40%  { transform: scale(1.13); box-shadow: 0 0 0 10px rgba(212, 175, 55, 0.16); }
  100% { transform: scale(1); }
}

/* ---------------------------------------------------------- 主体：左工具栏 + 右画板 */
.ch10-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  /* 工具条横在上面、画板占满下面：
     画板因此拿到几乎整屏宽度（1440 屏上约 1420×760），
     比原来「左侧 252px 竖栏」多出约 100px 宽 / 60px 高。 */
  flex-direction: column;
  gap: 8px;
  /* 底部留白收到 74px：滚动字幕条 + 进度条仍不会被画板盖住，
     但「继续下一章」按钮原来空出来的那 26px 全部还给画板。 */
  padding: 0 10px 74px;
}

.ch10-tools {
  /* ===== 浮动工具面板：收起来只是一个按钮，点开才展开 =====
     用户要求：颜色 / 画笔做成一个按钮，点开就展开、再点收起，面板还能拖动，
     清除画板和保存图片也一起收进这个面板里。
     用 position:fixed 是刻意的：不管外层容器有没有 overflow/transform，
     面板都不会被裁掉；拖动改的就是 left/top（见 ch10.js 的 initDrag）。 */
  position: fixed;
  /* 默认放左下角：右上角被「章节进度 HUD」占着，手机竖屏时还容易跑出屏幕。
     位置随时可拖，拖过的位置会记在 localStorage。 */
  top: auto;
  bottom: 104px;
  left: 18px;
  right: auto;
  z-index: 9000;
  touch-action: none;
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;                 /* 手柄拖动时不触发页面滚动 */
  /* ★ 手机点「继续下一章」没反应的根因就在这里：
     这是 position:fixed 的纵向 flex 容器且没有高度，浏览器会把它拉伸成一整条
     右栏（实测 390×844 上容器从 top 一直盖到屏底），右下角继续按钮的命中点
     于是被这个透明容器吃掉 —— elementFromPoint 返回 ASIDE.ch10-tools 而不是按钮，
     click 事件根本没到按钮上。容器本身不接收点击，只放行里面的按钮和面板。 */
  pointer-events: none;
}

/* 只把真正可交互的子元素放出来（容器保持透明、不吃点击） */
.ch10-tfab,
.ch10-tpanel { pointer-events: auto; }

/* ---- 收起态的圆角按钮 ---- */
.ch10-tfab {
  /* 收起态只剩一个圆形符号按钮（不再有「画笔与颜色」文字）。
     用原色（白底 + 细边框），不再用蓝紫渐变。
     点一下 = 展开面板；按住拖动 = 拖到任意位置（见 ch10.js initDrag）。 */
  display: none;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: move;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 50%;
  box-shadow: 0 10px 26px rgba(17, 24, 39, 0.22);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ch10-tfab:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(17, 24, 39, 0.28); }
.ch10-tfab:active { transform: scale(0.96); }
.ch10-tfab-ico { font-size: 26px; line-height: 1; pointer-events: none; }
.ch10-tfab-dot {
  /* 右下角小圆点 = 当前画笔颜色 */
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 15px;
  height: 15px;
  background: #22252b;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14);
  pointer-events: none;
}

/* ---- 展开态的面板 ---- */
.ch10-tpanel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(392px, calc(100vw - 28px));
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  padding: 10px 12px 12px;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid var(--ch10-line);
  border-radius: 18px;
  box-shadow: 0 22px 54px rgba(31, 41, 55, 0.20);
  animation: ch10PanelIn 0.2s ease both;
}
@keyframes ch10PanelIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

/* ---- 拖动手柄 ---- */
.ch10-tbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 8px;
  border-bottom: 1px dashed #e6e9f0;
  cursor: grab;
  touch-action: none;
}
.ch10-tools.is-drag .ch10-tbar { cursor: grabbing; }
.ch10-tbar-grip { font-size: 15px; color: #9aa1af; letter-spacing: 1px; }
.ch10-tbar-txt { flex: 1 1 auto; font-size: 13px; font-weight: 700; color: #333a48; letter-spacing: 0.06em; }
.ch10-tbar-x {
  flex: none;
  padding: 4px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #4a5566;
  cursor: pointer;
  background: #f1f3f8;
  border: 1px solid #e2e6ef;
  border-radius: 999px;
}
.ch10-tbar-x:hover { background: #e7ebf4; }

/* 收起 / 展开两态互斥：收起只露按钮，展开只露面板 */
.ch10-tools.is-closed .ch10-tfab { display: flex; }
.ch10-tools.is-closed .ch10-tpanel { display: none; }
.ch10-tools:not(.is-closed) .ch10-tfab { display: none; }

/* 工具条里的每一组：标签一行、控件横着排 */
.ch10-tools .ch10-grp { display: flex; align-items: center; gap: 8px; }
.ch10-tools .ch10-glbl { margin: 0; font-size: 11px; letter-spacing: 0.14em; white-space: nowrap; }
.ch10-tools .ch10-grp-act { margin-left: auto; gap: 10px; }
.ch10-tools .ch10-tip { display: none; }

.ch10-glbl {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--ch10-dim);
}

/* 笔型：大按钮，适合触摸 */
.ch10-pens { display: flex; gap: 6px; }
.ch10-tool {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 6px 12px;
  font-size: 15px;
  font-weight: 700;
  color: #3b4350;
  background: #f4f6f9;
  border: 1px solid var(--ch10-line);
  border-radius: 13px;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.16s ease, background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.ch10-tool:hover { background: #eef1f6; }
.ch10-tool:active { transform: scale(0.96); }
.ch10-tool.on {
  color: #2b2200;
  background: linear-gradient(135deg, #fff6d5, #f3d071);
  border-color: rgba(212, 175, 55, 0.9);
  box-shadow: 0 8px 18px rgba(212, 175, 55, 0.32);
}
.ch10-tool-ico { font-size: 21px; line-height: 1; }
.ch10-tool-txt { font-size: 14px; letter-spacing: 0.04em; }
/* 橡皮擦独占一行，视觉上是一个"模式" */
.ch10-tool--eraser { }
.ch10-tool--eraser.on {
  background: linear-gradient(135deg, #e8f1ff, #c9dcf8);
  border-color: rgba(70, 120, 200, 0.6);
  box-shadow: 0 8px 18px rgba(70, 120, 200, 0.25);
}

/* 颜色：10 个色块 */
.ch10-colors { display: flex; flex-wrap: nowrap; gap: 6px; }
.ch10-swatch {
  position: relative;
  /* 固定尺寸圆点：原来 width:100% + aspect-ratio + min-height:40px，
     在横向工具条里宽度被压成 10px、高度却still硬撑 40px，一叠就是 4254px。 */
  flex: none;
  width: 34px;
  height: 34px;
  padding: 0;
  background: var(--c, #22252b);
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(31, 41, 55, 0.22), 0 0 0 1px rgba(31, 41, 55, 0.08);
  touch-action: manipulation;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.ch10-swatch:active { transform: scale(0.92); }
.ch10-swatch.on {
  transform: scale(1.12);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.95), 0 6px 16px rgba(31, 41, 55, 0.28);
}
.ch10-swatch.on::after {
  content: '✓';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  place-items: center;
  font-size: 15px;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

/* 粗细：4 档圆点 */
.ch10-sizes { display: flex; gap: 6px; }
.ch10-size {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 64px;
  padding: 6px 2px;
  background: #f4f6f9;
  border: 1px solid var(--ch10-line);
  border-radius: 13px;
  cursor: pointer;
  touch-action: manipulation;
  transition: all 0.18s ease;
}
.ch10-size i { display: block; border-radius: 50%; background: #3b4350; }
.ch10-size b { font-size: 12px; font-weight: 700; color: var(--ch10-dim); }
.ch10-size.on {
  background: linear-gradient(135deg, #fff6d5, #f3d071);
  border-color: rgba(212, 175, 55, 0.9);
}
.ch10-size.on i { background: #1f2937; }
.ch10-size.on b { color: #6b5200; }

/* 保存 / 清空 */
.ch10-grp-act { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.ch10-act {
  min-height: 52px;
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 700;
  color: #3b4350;
  background: #ffffff;
  border: 1px solid var(--ch10-line);
  border-radius: 13px;
  cursor: pointer;
  touch-action: manipulation;
  transition: all 0.18s ease;
}
.ch10-act:hover { background: #f4f6f9; }
.ch10-act:active { transform: scale(0.97); }
.ch10-act--danger {
  color: #b3261e;
  background: #fff5f4;
  border-color: rgba(179, 38, 30, 0.35);
}
.ch10-act--danger:hover { background: #ffe9e7; }

.ch10-tip {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.75;
  text-align: center;
  color: var(--ch10-dim);
}

/* ---------------------------------------------------------- 画板 */
.ch10-board {
  position: relative;
  /* 画板是这一章唯一的主角：工具面板已经改成浮动面板不占布局，
     所以画板可以放心再高一大截（用户要求「画画区域体积增加多点」）。
     1440×900 实测：工具条占位时代只有 640px，现在按 62vh 起步能到 750px 以上。 */
  flex: 1 1 auto;
  min-width: 0;
  /* ★ max() 在老内核（360 兼容模式 / 老安卓 WebView）不被支持，
     整条 min-height 会被丢弃，画板高度直接塌掉 —— 用户说的「画板该大点」
     有一半就是这个原因。先给 px 兜底，再写 vh 覆盖。 */
  min-height: 340px;
  min-height: 64vh;
  overflow: hidden;
  touch-action: none;                 /* 触摸书写不触发页面滚动 */
  border: 1px solid var(--ch10-line);
  border-radius: 20px;
  background:
    linear-gradient(rgba(31, 41, 55, 0.045) 1px, transparent 1px) 0 0 / 100% 36px,
    linear-gradient(90deg, rgba(31, 41, 55, 0.045) 1px, transparent 1px) 0 0 / 36px 100%,
    #ffffff;
  box-shadow: inset 0 2px 16px rgba(31, 41, 55, 0.06), 0 16px 40px rgba(31, 41, 55, 0.12);
}

.ch10-canvas {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;                 /* 关键：手指在画布上只画线，不滚动 */
  cursor: crosshair;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.ch10-hint {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(16px, 1.9vw, 32px);
  letter-spacing: 0.24em;
  color: #bcc3ce;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.ch10-hint.off { opacity: 0; }

/* 画板中心的第二行提示：告诉观众「准备好了就点右下角继续」。
   比主提示小一号、更淡，落在主提示下方；落笔后跟主提示一起淡出。 */
.ch10-cue {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% + 46px));
  font-size: clamp(12px, 1.05vw, 17px);
  letter-spacing: 0.18em;
  color: #ccd2db;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.ch10-cue.off { opacity: 0; }

/* ---------------------------------------------------------- 右下角继续按钮 */
.ch10-next {
  position: absolute;
  user-select: none;
  right: 30px;
  bottom: 44px;
  z-index: 40;
  min-height: 48px;
  padding: 12px 28px;
  font-size: clamp(15px, 1.2vw, 19px);
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #3b2c05;
  background: linear-gradient(135deg, #ffeaa8, #eccb63 55%, #d4af37);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 999px;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 10px 26px rgba(184, 134, 11, 0.34);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  animation: ch10NextGlow 2.6s ease-in-out infinite;
}
.ch10-next:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(184, 134, 11, 0.45); }
.ch10-next:active { transform: scale(0.97); }
@keyframes ch10NextGlow {
  0%, 100% { box-shadow: 0 10px 26px rgba(184, 134, 11, 0.34); }
  50%      { box-shadow: 0 10px 34px rgba(184, 134, 11, 0.62); }
}


/* ---- 撤销按钮（新增）---- */
.ch10-act--undo {
  color: #2b4d7a;
  background: #eef3fb;
  border-color: #cfdcf0;
}
.ch10-act--undo:hover { background: #e2ebf9; border-color: #b9cdea; }

/* 收起态按钮：可点可拖（触摸拖动时不滚动页面） */
.ch10-tfab { touch-action: none; }

/* ---------------------------------------------------------- 清空确认弹层（自定义，不用原生 confirm） */
.ch10-mask {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 20, 28, 0.55);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s;
}
.ch10-mask.on { opacity: 1; visibility: visible; }

.ch10-dialog {
  /* 弹窗加大：旧的是 520px，光「所有签名都会被擦掉…」两行就占满，
     按钮挤在下沿。放大到 620px 并给足内边距。 */
  width: min(620px, 94vw);
  padding: 34px 40px 30px;
  text-align: center;
  background: #ffffff;
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(15, 20, 28, 0.45);
  transform: translateY(16px) scale(0.96);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.ch10-mask.on .ch10-dialog { transform: none; }

.ch10-dlg-ico { font-size: 44px; line-height: 1; }
.ch10-dlg-title {
  margin: 12px 0 8px;
  font-size: clamp(19px, 1.7vw, 27px);
  font-weight: 800;
  color: #1f2937;
}
.ch10-dlg-text {
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 1.85;
  color: #6b7280;
}
.ch10-dlg-btns { display: flex; gap: 12px; user-select: none; }
.ch10-dlg-btn {
  flex: 1;
  min-height: 58px;
  font-size: 16px;
  font-weight: 700;
  color: #3b4350;
  background: #f3f5f8;
  border: 1px solid var(--ch10-line);
  border-radius: 14px;
  cursor: pointer;
  touch-action: manipulation;
  transition: all 0.18s ease;
}
.ch10-dlg-btn:hover { background: #e9edf3; }
.ch10-dlg-btn:active { transform: scale(0.98); }
.ch10-dlg-btn--ok {
  color: #ffffff;
  background: linear-gradient(135deg, #e2564a, #c0392b);
  border-color: #c0392b;
  box-shadow: 0 10px 22px rgba(192, 57, 43, 0.3);
}
.ch10-dlg-btn--ok:hover { background: linear-gradient(135deg, #ea6a5e, #cb4433); }

/* ---------------------------------------------------------- 第 10 章窄屏适配 */
@media (max-width: 1180px) {
  .ch10-head { padding-right: 26px; }
}
@media (max-width: 900px), (max-height: 620px) {
  .ch10-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px 6px;
  }
  .ch10-body {
    flex-direction: column;
    gap: 10px;
    padding: 2px 10px 70px;
  }
  /* 工具已是浮动面板，不参与布局：这里只把它挪到右下角，别再挤画板 */
  .ch10-tools {
    top: auto;
    right: 10px;
    bottom: 64px;
    padding: 0;
  }
  .ch10-tpanel {
    width: min(330px, calc(100vw - 24px));
    max-height: 46vh;
    padding: 8px 10px 10px;
  }
  .ch10-grp { flex: none; }
  .ch10-grp-act { margin-top: 0; }
  .ch10-pens { grid-template-columns: repeat(2, 104px); }
  .ch10-colors { grid-template-columns: repeat(5, 36px); }
  .ch10-sizes { grid-template-columns: repeat(4, 60px); }
  .ch10-tip { display: none; }
  .ch10-next { bottom: 40px; right: 16px; }
}
@media (max-height: 720px) {
  .ch10-tool { min-height: 46px; }
  .ch10-size { min-height: 54px; }
  .ch10-act { min-height: 44px; }
}

/* ============================================================ 第 11 章 · 最终定格 */
.ch11-wrap {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000000;                /* 全屏纯黑 */
  --ch11-hud-right: 210px;
}

/* 烟花画布（粒子系统） */
.ch11-fw {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* 微弱金色柔光，让纯黑有层次 */
.ch11-vignette {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 54%, rgba(212, 175, 55, 0.10) 0%, rgba(0, 0, 0, 0) 58%),
    radial-gradient(ellipse at 50% 128%, rgba(212, 175, 55, 0.14) 0%, rgba(0, 0, 0, 0) 62%);
}

.ch11-main {
  position: relative;
  z-index: 2;
  padding: 0 5vw 4vh;
  text-align: center;
  pointer-events: none;
}

/* 顶部小字：毕业 · 闭幕式（用户要求「淡白色字体」）。
   用低不透明度纯白 + 拉开的字间距，做出仪式感细排版；
   刻意不抢下面金色大字的视觉中心，并比大字早一点淡入。 */
.ch11-topline {
  margin: 0 0 clamp(14px, 2.4vh, 30px);
  font-size: clamp(13px, 1.35vw, 24px);
  font-weight: 500;
  letter-spacing: 0.62em;
  text-indent: 0.62em;              /* 抵消末尾多出的字间距，保证视觉居中 */
  color: rgba(255, 255, 255, 0.58);
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.22);
  animation: ch11TopIn 1.1s ease both;
}
@keyframes ch11TopIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* 主文字：金色巨大居中（年份 + 班级由 JS 拼接后写入） */
.ch11-title {
  margin: 0;
  font-size: clamp(40px, 8.2vw, 172px);
  font-weight: 900;
  line-height: 1.16;
  letter-spacing: 0.06em;
  /* 金色主文字：**不再用 background-clip:text 的渐变**。
     原因：渐变裁进文字后，一屏里的字会一半偏暗一半偏亮（同一块渐变按整个行盒铺，
     字宽超过行盒时左右两端落在渐变的不同位置），大字号下尤其明显。
     改成纯色 + 两层金色投影，颜色均匀，金属感靠发光来做，不再有明暗割裂。 */
  color: #f0c74a;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55),
    0 -1px 0 rgba(120, 84, 8, 0.45),
    0 0 34px rgba(255, 196, 60, 0.42),
    0 8px 26px rgba(0, 0, 0, 0.68);
  animation: ch11TitleIn var(--ch11-title-in, 1.5s) cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes ch11TitleIn {
  0%   { opacity: 0; transform: scale(0.86) translateY(20px); letter-spacing: 0.3em; }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: none; letter-spacing: 0.06em; }
}
/* 原来这里有一组 ch11Shimmer（来回扫 background-position 做流光）。
   已删除：它正是「金色大字一半暗一半亮」的根源 —— 渐变被裁进文字后，
   流光扫过时整行字的不同位置落在渐变的不同色阶上。现在靠上面的 text-shadow 发光。 */

/* 副文字：白色 */
.ch11-sub {
  margin: clamp(18px, 2.6vh, 40px) 0 0;
  font-size: clamp(15px, 1.85vw, 38px);
  font-weight: 400;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 0 24px rgba(255, 255, 255, 0.22), 0 4px 18px rgba(0, 0, 0, 0.8);
  animation: ch11SubIn var(--ch11-sub-in, 1.2s) cubic-bezier(0.22, 1, 0.36, 1) var(--ch11-sub-delay, 0.75s) both;
}
@keyframes ch11SubIn {
  from { opacity: 0; transform: translateY(16px); letter-spacing: 0.55em; }
  to   { opacity: 1; transform: none; letter-spacing: 0.3em; }
}

/* 右上角：倒计时归零提示 */
.ch11-badge {
  position: absolute;
  top: 22px;
  right: var(--ch11-hud-right, 210px);
  z-index: 3;
  padding: 10px 24px;
  font-size: clamp(14px, 1.25vw, 22px);
  font-weight: 800;
  letter-spacing: 0.14em;
  white-space: nowrap;
  color: #ffeaa8;
  background: rgba(12, 12, 14, 0.72);
  border: 1px solid rgba(212, 175, 55, 0.62);
  border-radius: 999px;
  box-shadow: 0 0 28px rgba(212, 175, 55, 0.32), inset 0 0 18px rgba(212, 175, 55, 0.12);
  backdrop-filter: blur(6px);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-14px) scale(0.94);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.ch11-badge.on {
  opacity: 1;
  transform: none;
  animation: ch11BadgePulse 2.4s ease-in-out 0.6s infinite;
}
@keyframes ch11BadgePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 28px rgba(212, 175, 55, 0.32); }
  50%      { transform: scale(1.05); box-shadow: 0 0 44px rgba(212, 175, 55, 0.6); }
}

/* 底部：重新播放 */
.ch11-bottom {
  position: absolute;
  left: 50%;
  bottom: 52px;
  z-index: 3;
  transform: translateX(-50%);
  text-align: center;
}
.ch11-replay {
  user-select: none;
  -webkit-user-select: none;
  min-height: 56px;
  padding: 14px 38px;
  font-size: clamp(15px, 1.25vw, 20px);
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #ffeaa8;
  background: rgba(212, 175, 55, 0.10);
  border: 1px solid rgba(212, 175, 55, 0.62);
  border-radius: 999px;
  cursor: pointer;
  touch-action: manipulation;
  backdrop-filter: blur(6px);
  transition: all 0.25s ease;
}
.ch11-replay:hover {
  color: #17130a;
  background: linear-gradient(135deg, #ffeaa8, #d4af37);
  box-shadow: 0 0 34px rgba(212, 175, 55, 0.55);
  transform: translateY(-2px);
}
.ch11-replay:active { transform: scale(0.97); }
.ch11-replay-tip {
  margin-top: 9px;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.34);
}

/* 点击重新播放时的黑场过渡 */
.ch11-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9;
  background: #000000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}
.ch11-wrap.ch11-out::after { opacity: 1; }

/* ---------------------------------------------------------- 第 11 章窄屏适配 */
@media (max-width: 900px) {
  .ch11-badge {
    top: auto;
    right: 16px;
    bottom: 178px;
    padding: 8px 16px;
    transform: translateY(14px) scale(0.94);
  }
  .ch11-badge.on { transform: none; }
  .ch11-bottom { bottom: 86px; }
  .ch11-sub { letter-spacing: 0.2em; text-indent: 0.2em; }
}

/* ==================================================================
   手机竖屏（≤640px）：签名墙工具栏改成「一组一行」竖着铺开。
   原来是一整排横向滚动，手机上根本看不出能滑，
   「粗细 / 保存图片 / 清空画板」全在屏幕外，等于点不到。
   ================================================================== */
@media (max-width: 640px) {
  /* 手机上的画板要吃掉「标题行 + 底部留白」之外的全部高度：
     旧值 340px 在 844 高的屏上只占四成，签名没地方落笔。 */
  .ch10-board {
    min-height: 360px;
    min-height: calc(100vh - 190px);
  }
  /* 手机上的标题行原来要占掉一百多像素（标题 + 右上角 HUD 区留白），
     压紧之后画板再高一点 */
  .ch10-head {
    padding: 2px 10px 0;
    min-height: 0;
  }
  .ch10-title {
    font-size: 17px;
    letter-spacing: 0.06em;
  }
  .ch10-sub { display: none; }
  .ch10-body {
    padding: 2px 10px 92px;
  }
  .ch10-tools {
    /* 同样是浮动面板：只压尺寸，不占画板的地方 */
    top: auto;
    right: 8px;
    bottom: 58px;
    padding: 0;
  }
  .ch10-grp { flex: 0 0 100%; }          /* 每组独占一行，不再左右滑 */
  .ch10-glbl { margin-bottom: 6px; font-size: 11px; }
  .ch10-pens { grid-template-columns: repeat(5, 1fr); }
  .ch10-tool {
    min-height: 42px;
    justify-content: center;
    padding: 6px 4px;
  }
  .ch10-tool-ico { font-size: 20px; }
  .ch10-tool-txt { display: none; }      /* 只留图标，5 个笔型刚好一排 */
  .ch10-tool--eraser { grid-column: auto; }
  .ch10-colors { grid-template-columns: repeat(10, 1fr); gap: 4px; }
  .ch10-swatch { min-height: 36px; }
  .ch10-sizes { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .ch10-size { min-height: 44px; }
  .ch10-grp-act { flex-direction: row; margin-top: 0; }
  .ch10-act { flex: 1 1 0; min-height: 44px; padding: 7px 10px; font-size: 14px; }
  .ch10-tip { display: none; }
  .ch10-next { bottom: 40px; right: 12px; }
}

/* 留言墙关闭按钮在手机上再放大一点 */
@media (max-width: 640px) {
  .ch8-x { width: 40px; height: 40px; min-width: 40px; font-size: 17px; }
}

/* ---------- 老浏览器兜底：aspect-ratio 是 Chromium 88 才支持的属性 ----------
   访客里有 Chrome/86 的浏览器（360极速浏览器 / 旧版 Edge），它不认 aspect-ratio，
   色块会失去 1:1 比例变成扁矩形。用 padding-bottom 撑高度的经典写法兜底，
   只在「不支持 aspect-ratio」的浏览器里生效，新浏览器行为完全不变。 */
@supports not (aspect-ratio: 1 / 1) {
  .ch10-swatch::before {
    content: '';
    display: block;
    padding-bottom: 100%;
  }
}

/* ============================================================ 41 个名字拼「九二班」
   由 assets/js/chapters/ch11-names.js 现场生成，播完自己摘掉 DOM。
   层级：烟花(1) < 名字(3) < 主标题(.ch11-main, z-index 2 的兄弟节点里靠后) < 白光(9)
   名字用等宽/无衬线小字 + 冷白发光，在纯黑底上最清楚，也不会和金标题抢眼。 */
.ch11-names {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
}
.ch11-names.on { display: flex; }

.ch11-names-in {
  /* 纯定位画布：宽高由 JS 按方阵实际大小写死，里面的字块全部绝对定位 */
  position: relative;
  display: block;
  width: 84vw;
  height: 46vh;
}

.ch11-name {
  /* 绝对定位 + JS 直接写 left/top/width/height（见 ch11-names.js 的 layoutTiles）：
     41 块严格等宽等高的正方阵，不再依赖 grid 的隐式布局，量出来的宽高永远是准的。 */
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 2px;
  will-change: transform, opacity;
  font-size: clamp(9px, 1.06vw, 16px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: 0.01em;
  word-break: break-all;
  color: #f4fdff;
  background: rgba(150, 232, 255, 0.08);
  border: 1px solid rgba(160, 234, 255, 0.42);
  border-radius: 5px;
  text-shadow: 0 0 10px rgba(140, 226, 255, 0.85), 0 0 22px rgba(80, 180, 255, 0.45);
  box-shadow: 0 0 14px rgba(60, 170, 255, 0.22), inset 0 0 8px rgba(120, 210, 255, 0.16);
  will-change: transform, opacity;
}

/* 中心炸开的白光：和名字四散同时发生，把「拼字 → 烟花」这一下衔接起来 */
.ch11-nameflash {
  position: absolute;
  left: 50%;
  top: 46%;
  z-index: 9;
  width: 15vmax;
  height: 15vmax;
  margin-left: -7.5vmax;
  margin-top: -7.5vmax;
  pointer-events: none;
  opacity: 0;
  border-radius: 50%;
  transform: scale(0.12);
  background: radial-gradient(circle,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(255, 248, 214, 0.85) 16%,
    rgba(255, 214, 110, 0.42) 38%,
    rgba(255, 178, 40, 0.14) 62%,
    rgba(0, 0, 0, 0) 80%);
  mix-blend-mode: screen;
}
.ch11-nameflash.on { animation: ch11NameFlash 1.6s cubic-bezier(.18,.75,.3,1) both; }

@keyframes ch11NameFlash {
  0%   { opacity: 0;    transform: scale(0.12); }
  10%  { opacity: 1;    transform: scale(1.05); }
  32%  { opacity: 0.92; transform: scale(1.5); }
  100% { opacity: 0;    transform: scale(3.6); }
}

/* 手机：字更小、格子更密，保证 41 块还是一整片 */
@media (max-width: 640px) {
  .ch11-names-in { width: 94vw; }
  .ch11-name { font-size: clamp(8px, 2.1vw, 12px); border-radius: 4px; padding: 1px 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .ch11-nameflash.on { animation-duration: 0.6s; }
}

/* ============================================================ 全班名单（最终定格）
   需求：名单要「整齐排在『故事不会结束』下面」，不能跟标题打架。
   —— 用独立的自动换行网格，列宽固定，人数多少都不会挤到标题上。
   —— 主标题字号大，所以这里限制整体高度并留出上边距，小屏自动缩小字号。 */
.ch11-roster {
  margin: clamp(12px, 1.8vh, 26px) auto 0;
  width: min(1080px, 88vw);
  max-height: 36vh;                       /* 超过就内部滚动，绝不顶到标题、也不压按钮 */
  overflow-y: auto;
  overflow-x: hidden;
  /* 整块做成一张「名单卡」：深色半透明底 + 极细金边，
     41 个名字落在同一个视觉容器里，比散在背景上整齐 */
  padding: 11px 20px 12px;
  background: linear-gradient(180deg, rgba(10, 14, 26, 0.62), rgba(10, 14, 26, 0.38));
  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(4px);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 175, 55, 0.45) transparent;
  pointer-events: auto;                   /* 名单能滚动 */
}
.ch11-roster.on { opacity: 1; transform: none; }
.ch11-roster::-webkit-scrollbar { width: 5px; }
.ch11-roster::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 55, 0.4);
  border-radius: 99px;
}

/* 分隔标题：两条渐变细线夹一行小字 */
.ch11-roster-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(8px, 1.2vh, 16px);
}
.ch11-roster-line {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.55), transparent);
}
.ch11-roster-lbl {
  flex: none;
  font-size: clamp(11px, 1.02vw, 15px);
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  color: rgba(240, 199, 74, 0.82);
  white-space: nowrap;
  text-shadow: 0 0 16px rgba(240, 199, 74, 0.28);
}

/* 名字网格：等宽列 + 居中，换行整齐 */
.ch11-roster-body {
  display: block;
  padding: 0;
}

.ch11-roster-name {
  display: block;
  width: 100%;
  padding: 2px;
  font-size: clamp(11.5px, 1.02vw, 16px);
  font-weight: 600;
  line-height: 1.34;
  text-align: center;
  /* 原来用冷白色 —— 41 个名字一片白，跟背景糊在一起就是「乱」。
     改成暖米金：比金色沉、比白色有层次，和整章的金色主调一致。 */
  color: #f0dfb8;
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
  animation: ch11NameIn 0.5s ease both;
  animation-delay: calc(var(--i, 0) * 0.018s);
}

/* ---- 分组：男生 / 女生 各一行小标签 + 自己的网格 ---- */
.ch11-roster-group + .ch11-roster-group { margin-top: 7px; }
.ch11-roster-gtag {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  padding-left: 2px;
  font-size: clamp(11px, 1vw, 14px);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(240, 199, 74, 0.9);
}
.ch11-roster-gdot {
  width: 5px;
  height: 5px;
  flex: none;
  border-radius: 50%;
  background: rgba(240, 199, 74, 0.85);
  box-shadow: 0 0 8px rgba(240, 199, 74, 0.6);
}
.ch11-roster-gn {
  margin-left: 2px;
  padding: 0 7px;
  border-radius: 99px;
  font-size: 0.86em;
  font-weight: 800;
  letter-spacing: 0;
  color: #2a1f06;
  background: rgba(240, 199, 74, 0.85);
}
.ch11-roster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: clamp(2px, 0.32vh, 5px) clamp(4px, 0.7vw, 12px);
  justify-items: center;
}
@keyframes ch11NameIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* 名字多的时候列可以更密 */
@media (min-width: 1400px) {
  .ch11-roster-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
}
@media (max-width: 900px) {
  .ch11-roster { width: 94vw; max-height: 36vh; padding: 12px 14px 14px; }
  .ch11-roster-grid { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); }
  .ch11-roster-name { font-size: 11.5px; letter-spacing: 0.02em; }
}
@media (max-height: 700px) {
  .ch11-roster { max-height: 30vh; }
}


/* ============================================================
   面板滚动修复（用户反馈：面板显示不全，不知道还能往下滑）
   面板内容比屏幕高时，以前是直接溢出到屏幕外，底部按钮看不见也点不到。
   现在限高 + 内部滚动，并在底部放一条渐变遮罩暗示「还有内容」。
   ============================================================ */
.ch10-tpanel {
  max-height: 74vh;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* 滚动条做细一点，不抢视觉 */
.ch10-tpanel::-webkit-scrollbar { width: 6px; }
.ch10-tpanel::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 3px;
}
/* 底部渐隐，让人一眼看出「下面还有」 */
.ch10-tpanel::after {
  content: "";
  position: sticky;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  height: 22px;
  margin-top: -22px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.96));
}