/* §6 The Mold（js/pages/mold.js）：三屏上下接成一长条连续滚动（js/snap-screens.js）
   层次：3D 画布（纸 + 第 1 屏的字 + 霉菌 + 香气，都在着色器里）→ 网页层 #mold z 2（屏的内容，以后加）→ 导航 100。
   #mold 抵消浏览器缩放；.track 由脚本按滚动位置往上移（和着色器同一帧） */
#mold {
  position: fixed; inset: 0; z-index: 2; display: none; opacity: 0; pointer-events: none; overflow: hidden;
  -webkit-user-select: none; user-select: none;
  zoom: var(--unzoom, 1);
  --sh: 100vh;
}
body.page-mold #mold, body.pre-mold #mold { display: block; }
#mold .track { position: absolute; left: 0; top: 0; width: 100%; will-change: transform; }
#mold .mold-screen { position: absolute; left: 0; width: 100%; height: var(--sh); top: calc(var(--sh) * var(--k)); }
/* 第 3 屏最底下的 credit：条（黄）画在着色器里，这里只有字。同 Hiss / Hedron：全宽、左右各留 heroMarginL、上下居中、两段靠两端 */
#mold .mold-foot {
  position: absolute; left: var(--foot-ml); right: var(--foot-ml); bottom: 0; height: var(--foot-h);
  display: flex; justify-content: space-between; align-items: center; gap: 2em;
  color: var(--foot-ink, #1e2927);
  font: 400 var(--foot-size)/1.4 var(--font-body);
}
#mold.no-foot .mold-foot { display: none; }
#mold .mold-foot p { margin: 0; white-space: nowrap; }
#mold .mold-foot p:last-child { text-align: right; }
#mold .mold-foot em { font-style: italic; }
#mold .mold-foot a { color: inherit; text-decoration: none; pointer-events: auto; cursor: pointer; border-bottom: 1px solid transparent; }
#mold .mold-foot a:hover { border-bottom-color: currentColor; }
/* 第 2 屏：人员须知 + Underhill / Lewis 的争论 + 尸检印章。网页层只负责排版（visibility: hidden），
   脚本把每个词按排好的位置画进遮罩、在着色器里画（在霉菌下面、会被吃）。左右边界 = THE MOLD 的字墨；尺寸由脚本按屏高写进变量，--m2-fit = 放不下时整体缩小 */
#mold .mold-s2 {
  position: absolute; left: var(--m2-l); width: var(--m2-w); top: var(--m2-top);
  visibility: hidden; color: #1e2927;
  --m2-fit: 1;
  font: 400 calc(var(--m2-body) * var(--m2-fit))/var(--m2-line) var(--font-body);
}
#mold .mold-s2.show-dom { visibility: visible; }
#mold .m2-meta, #mold .m2-label, #mold .m2-by {
  font: 400 calc(var(--m2-label) * var(--m2-fit))/1.35 var(--font-label); letter-spacing: .14em; text-transform: uppercase;
}
#mold .m2-meta { display: flex; justify-content: space-between; padding-bottom: .8em; border-bottom: 1px solid currentColor; }
#mold .m2-cols {
  display: grid; grid-template-columns: var(--m2-brief-w) 1fr 1fr; grid-template-rows: auto auto;
  column-gap: var(--m2-gap); row-gap: calc(var(--m2-gap) * .8); margin-top: calc(var(--m2-gap) * .9);
}
#mold .m2-brief { grid-row: 1 / span 2; }
#mold .m2-brief h2 { margin: 0 0 .55em; font: 700 calc(var(--m2-title) * var(--m2-fit))/1.02 var(--font-display); letter-spacing: -.015em; text-transform: uppercase; }
#mold .mold-s2 p { margin: 0 0 var(--m2-para); }
#mold .m2-doc h3 { margin: .35em 0 .5em; font: 700 calc(var(--m2-doc-title) * var(--m2-fit))/1.1 var(--font-display); }
#mold .m2-by { display: flex; flex-direction: column; gap: .2em; padding-bottom: .7em; margin-bottom: .9em; border-bottom: 1px solid currentColor; }
#mold .m2-sign { margin-top: 1em; }
#mold .mold-s2 strong { font-weight: 700; }
#mold .mold-s2 .redacted { display: inline-block; width: 6.5em; height: .95em; vertical-align: -0.14em; background: currentColor; }
/* 尸检结论：黄底（着色器里画）、深色框线的印章，放在争论两篇下面 */
#mold .m2-stamp {
  grid-column: 2 / span 2; grid-row: 2; align-self: end;
  padding: .9em 1.1em; border: 2px solid currentColor;
  display: flex; flex-direction: column; gap: .45em;
}
#mold .m2-cause { font: 700 calc(var(--m2-doc-title) * 1.15 * var(--m2-fit))/1.05 var(--font-display); text-transform: uppercase; letter-spacing: .01em; }
#mold .mold-s2.no-stamp .m2-stamp { display: none; }
/* 第 3 屏：霉菌敌人图鉴。同第 2 屏：网页层只排版（visibility: hidden），字和线稿画进遮罩、在着色器里画。
   左右边界 = THE MOLD 的字墨；上 = --m3-top，高 = 到底部 credit 条上面；左边阅读栏（放不下时 --m3-fit 缩小）+ 右边格子 */
#mold .mold-s3 {
  position: absolute; left: var(--m3-l); width: var(--m3-w); top: var(--m3-top);
  visibility: hidden; color: #1e2927;
  font: 400 var(--m3-body)/var(--m3-line) var(--font-body);
}
#mold .mold-s3.show-dom { visibility: visible; }
#mold .m3-meta, #mold .m3-label, #mold .m3-cap, #mold .m3-sign {
  font: 400 var(--m3-label)/1.35 var(--font-label); letter-spacing: .14em; text-transform: uppercase;
}
#mold .m3-meta { display: flex; justify-content: space-between; padding-bottom: .8em; border-bottom: 1px solid currentColor; }
#mold .m3-body {
  display: flex; gap: var(--m3-gap); margin-top: calc(var(--m3-gap) * .8);
  height: calc(var(--m3-h) - 3em);
}
#mold .m3-read { flex: 0 0 var(--m3-panel-w); min-width: 0; overflow: hidden; --m3-fit: 1; font-size: calc(var(--m3-body) * var(--m3-fit)); }
#mold .m3-read .m3-label { font-size: calc(var(--m3-label) * var(--m3-fit)); }
#mold .m3-read h3 { margin: .25em 0 .3em; font: 700 calc(var(--m3-name) * var(--m3-fit))/1.02 var(--font-display); letter-spacing: -.01em; }
#mold .m3-kicker { margin-bottom: 1.1em; }
#mold .m3-li { position: relative; padding-left: 1.2em; margin: 0 0 .5em; }
#mold .m3-li.lvl1 { padding-left: 2.4em; }
#mold .m3-li.gap, #mold .m3-head.gap { margin-top: 1em; }
#mold .m3-dash { position: absolute; left: 0; }
#mold .m3-li.lvl1 .m3-dash { left: 1.2em; }
#mold .m3-head { font-weight: 700; text-decoration: underline; margin: .6em 0 .4em; }
#mold .m3-sign { margin-top: 1.4em; padding-top: .8em; border-top: 1px solid currentColor; font-size: calc(var(--m3-label) * var(--m3-fit)); }
#mold .mold-s3 .redacted { display: inline-block; width: 6.5em; height: .95em; vertical-align: -0.14em; background: currentColor; }
#mold .m3-grid {
  flex: 1 1 0; min-width: 0; display: grid;
  grid-template-columns: repeat(var(--m3-cols), 1fr); grid-auto-rows: 1fr; gap: var(--m3-cell-gap);
}
#mold .m3-cell { display: flex; flex-direction: column; min-height: 0; }
#mold .m3-pic { flex: 1 1 0; min-height: 0; position: relative; display: flex; align-items: flex-end; justify-content: center; }
/* 没有手绘的那一格（Mold Spitter）：一个问号（同 Hiss 图鉴的 Barrier） */
#mold .m3-q { font: 400 calc(var(--m3-name) * 3.2)/1 var(--font-label); padding-bottom: .1em; }
#mold .m3-cap { display: flex; flex-direction: column; gap: .2em; padding-top: .6em; margin-top: .5em; border-top: 1px solid currentColor; font-size: var(--m3-cap); }
#mold .m3-name { align-self: flex-start; }
/* 导航卡片上的霉菌（js/pages/mold.js 的 CARD）：贴在卡片上的小画布，正片叠底——白不变、霉菌的颜色印在纸上、黑字还是黑的；不接收鼠标 */
#nav .mold-card { position: absolute; pointer-events: none; mix-blend-mode: multiply; opacity: 0; }
/* 盖在条目上面（cardCover）：第二层 = 黑底上的霉菌（预乘的颜色），相加补到被压暗的地方 */
#nav .mold-card.add { mix-blend-mode: plus-lighter; }
#mold .snap-indicator {
  position: absolute; left: calc(var(--sh) * .04); bottom: calc(var(--sh) * .02);
  font: 400 calc(var(--sh) * .011)/1 var(--font-label); letter-spacing: .14em; color: #1e2927;
}

/* 手机模式（html.mob，2026-10-29 用户：同 Hiss——去掉第 1、2 屏，直接左右滑看第 3 屏的敌人图鉴；不要文字，只展示遮罩效果；底部 disclaimer 删掉、底栏的条留着）。
   js/snap-screens.js 在手机模式下直接停在最后一屏、不接受滚动；mold.js 的 mob:swipex / mob:tap 换 s3Sel。
   网页层本来就是 visibility: hidden、只给遮罩排版：一次只排选中的那一格、放大到整块（线稿贴底居中，画进遮罩、在着色器里画）；
   档案头、阅读栏、格子下的编号 / 名字 display none（rasterWords / rasterBorders 跳过 display none 的元素）；没有手绘那一格的问号照旧画。
   底栏：黄条画在着色器里（uFoot），这里只藏字 */
html.mob #mold .mold-foot { display: none; }
html.mob #mold .mold-s3 { left: 8vw; width: 84vw; }
html.mob #mold .m3-meta, html.mob #mold .m3-cap { display: none; }
html.mob #mold .m3-body { height: var(--m3-h); margin-top: 0; }
html.mob #mold .m3-grid { display: block; position: relative; }
html.mob #mold .m3-cell { display: none; }
html.mob #mold .m3-cell.on { display: flex; position: absolute; inset: 0; }
/* 敌人名字显示在顶部（同日用户：敌人条目的名字还是要显示在顶部）：阅读栏重新显示、只留名字（h3），在图鉴最上面居中；名字照样画进遮罩（rasterWords），插图排在名字下面、占满剩下的高度 */
html.mob #mold .m3-body { flex-direction: column; gap: 2.5vh; }
html.mob #mold .m3-read { display: block; flex: 0 0 auto; width: auto; overflow: visible; }
html.mob #mold .m3-read > :not(h3) { display: none; }
html.mob #mold .m3-read h3 { margin: 0; font-size: var(--mob-name, 8vw); line-height: 1.05; text-align: center; }
html.mob #mold .m3-grid { flex: 1 1 auto; min-height: 0; }
/* 第 2 屏的内容手机上全部删掉（同日用户：严格来说手机版删掉了所有第二屏内容）：整屏 display none（屏都是按 --k 绝对定位的，不影响第 1、3 屏的位置；
   遮罩 / 栅格化量到 display none 的元素会跳过或得到 0 框）。手机上本来也滑不到第 2 屏（标题 ↔ 图鉴直接切） */
html.mob #mold .mold-screen.s2 { display: none; }
/* 没有手绘那一只（Spitter）的问号：手机上放大的格子里上下居中，同 Hiss 的 Barrier（同日用户；电脑版贴底，和别的线稿对齐） */
html.mob #mold .m3-q { align-self: center; padding-bottom: 0; }