/* §4 The Hiss（js/pages/hiss.js）：三屏上下接成一长条连续滚动（js/snap-screens.js，snapMode 'free'）
   层次：3D 画布（各屏背景 + 第 1 屏的视频字 + 第 3 屏的红条）→ 网页层 #hiss z 2（只有第 3 屏红条上的字）→ 导航 100。
   #hiss 抵消浏览器缩放；.track 由脚本按滚动位置往上移（和着色器同一帧）；尺寸都由脚本按屏高写进 CSS 变量 */
#hiss {
  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-hiss #hiss, body.pre-hiss #hiss { display: block; }
#hiss .track { position: absolute; left: 0; top: 0; width: 100%; will-change: transform; }
#hiss .hiss-screen { position: absolute; left: 0; width: 100%; height: var(--sh); top: calc(var(--sh) * var(--k)); }
/* 第 3 屏最底下的红条（红条本身和辉光画在着色器里）上的字：两段并排，左右边界对齐 THE HISS，上下居中 */
#hiss .hiss-foot {
  position: absolute; bottom: 0; left: var(--foot-l); width: var(--foot-w); height: var(--foot-h);
  display: flex; align-items: center; gap: var(--foot-gap);
  color: var(--foot-ink, #000);
  font: 400 var(--foot-size)/var(--foot-line) var(--font-body);
}
#hiss .hiss-foot .col { flex: 1 1 0; }
#hiss.foot-nowrap .hiss-foot .col { flex: 0 1 auto; white-space: nowrap; }   /* 每段一行：两段各自按内容宽，靠左右两端 */
#hiss.foot-nowrap .hiss-foot { justify-content: space-between; }
#hiss .hiss-foot { text-shadow: 0 0 .5em rgba(0, 0, 0, var(--foot-shadow, 0)), 0 0 .15em rgba(0, 0, 0, var(--foot-shadow, 0)); }
#hiss .hiss-foot .col:last-child { text-align: right; }
#hiss .hiss-foot p { margin: 0; }
#hiss .hiss-foot em { font-style: italic; }   /* 游戏名 Control / Control Resonant（2026-10-23） */
#hiss .hiss-foot .label { display: none; font: 400 calc(var(--foot-size) * .78)/1.3 var(--font-label); letter-spacing: .14em; text-transform: uppercase; margin-bottom: .35em; }
#hiss.foot-labels .hiss-foot .label { display: block; }
#hiss .hiss-foot a { color: inherit; text-decoration: none; pointer-events: auto; cursor: pointer; border-bottom: 1px solid transparent; }
#hiss .hiss-foot a:hover { border-bottom-color: currentColor; }
/* 第几屏（01 / 03，js/snap-screens.js，默认关）：左下角 */
#hiss .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: #eee7dd;
}
/* 第 2 屏：ANALYSIS OF HISS THREAT（五栏档案）。左右边界 = THE HISS；上下位置、--an-fit（放不下时的缩小比例）由脚本算 */
#hiss .hiss-an {
  position: absolute; left: var(--an-l); width: var(--an-w); top: 0;
  color: var(--an-ink, #e8e2d8);
  --an-fit: 1;
}
#hiss .an-meta, #hiss .part-no, #hiss .an-conf {
  font: 400 var(--an-label)/1.3 var(--font-label); letter-spacing: .14em; text-transform: uppercase;
}
#hiss .an-meta { display: flex; justify-content: space-between; gap: 2em; padding-bottom: .8em; border-bottom: 1px solid currentColor; opacity: .75; }
#hiss .an-head h2 {
  margin: .32em 0 0; font: 700 calc(var(--an-title) * var(--an-fit))/1 var(--font-display); letter-spacing: -.015em; text-transform: uppercase;
}
#hiss .an-conf { color: var(--an-accent); margin-top: .9em; }
#hiss .an-cols { display: flex; gap: var(--an-gap); margin-top: calc(var(--an-head-gap) * var(--an-fit)); }
#hiss .part { flex: 1 1 0; min-width: 0; font: 400 calc(var(--an-body) * var(--an-fit))/var(--an-line) var(--font-body); }
#hiss .part-no { color: var(--an-accent); }
#hiss .part h3 {
  margin: .35em 0 .7em; padding-bottom: .55em; border-bottom: 1px solid currentColor;
  font: 700 calc(var(--an-part) * var(--an-fit))/1.1 var(--font-display); letter-spacing: -.005em;
}
#hiss .part p { margin: 0 0 var(--an-para); }
#hiss .part p.refer { opacity: .6; margin-top: calc(var(--an-para) * 1.6); }
/* 五个窗口（第八轮）：.part = 隐形边界的窗口（裁切；五个一样宽、一样高 = flex 默认拉伸到最高那篇），后面透出视频（着色器按 .part 的位置画）；
   .part-in = 黑底 + 字，平时停在窗口外（I、III、V 在上方，II、IV 在下方），鼠标进来（.on）滑进窗口 */
#hiss .hiss-an.windows .part { position: relative; overflow: hidden; pointer-events: auto; }
#hiss .hiss-an.windows .part-in {
  box-sizing: border-box; height: 100%; padding: var(--an-win-pad);
  background: var(--an-panel, #000);
  transition: transform var(--an-slide, .7s) var(--an-slide-ease, ease);
}
#hiss .hiss-an.windows .part[data-from="top"] .part-in { transform: translateY(-101%); }
#hiss .hiss-an.windows .part[data-from="bottom"] .part-in { transform: translateY(101%); }
#hiss .hiss-an.windows .part.on .part-in { transform: none; }
#hiss .hiss-an.windows .part.instant .part-in { transition: none; }
#hiss .part .mark { color: var(--an-accent); }
#hiss .part .redacted { display: inline-block; width: 6.5em; height: .95em; vertical-align: -0.14em; background: currentColor; }
/* 大标题画在着色器里（遮罩 + 渗墨，hiss.js 的 drawTitleMask）：网页层这行字只占位、量位置 */
#hiss .hiss-an.gl-title .an-head h2 { visibility: hidden; }
/* 第 3 屏：Hiss 图鉴（第十一轮）。左右边界 = THE HISS；上下由脚本按屏高写进 --be-top / --be-bottom。
   上：档案头 + 大标题（同第 2 屏）；下：左边阅读栏 + 右边标本格（7 × 2），鼠标移到格子上换阅读栏的内容、其他格子变暗 */
#hiss .hiss-be {
  position: absolute; left: var(--be-l); width: var(--be-w); top: var(--be-top); bottom: var(--be-bottom);
  display: flex; flex-direction: column; color: var(--an-ink, #e8e2d8);
}
#hiss .be-head h2 { margin: .32em 0 0; font: 700 var(--an-title)/1 var(--font-display); letter-spacing: -.015em; text-transform: uppercase; }
#hiss .be-body { flex: 1; min-height: 0; display: flex; gap: var(--be-gap); margin-top: var(--be-gap); }
/* 阅读栏 */
#hiss .be-panel { flex: 0 0 var(--be-panel-w); min-width: 0; font: 400 var(--be-body, var(--an-body))/var(--an-line) var(--font-body); }
#hiss .be-read.in { animation: be-in var(--be-fade, .25s) ease-out; }
@keyframes be-in { from { opacity: 0; transform: translateY(.4em); } to { opacity: 1; transform: none; } }
#hiss .be-no, #hiss .be-kicker, #hiss .be-cap { font: 400 var(--be-label, var(--an-label))/1.3 var(--font-label); letter-spacing: .14em; text-transform: uppercase; }
#hiss .be-no { color: var(--an-accent); }
#hiss .be-panel h3 { margin: .3em 0 .25em; font: 700 var(--be-name)/1 var(--font-display); letter-spacing: -.01em; }
#hiss .be-kicker { opacity: .65; padding-bottom: 1em; margin-bottom: 1.1em; border-bottom: 1px solid currentColor; }
#hiss .be-panel p { margin: 0 0 var(--an-para); }
#hiss .be-panel .redacted { display: inline-block; width: 6.5em; height: .95em; vertical-align: -0.14em; background: currentColor; }
/* 标本格 */
#hiss .be-grid { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(var(--be-cols), 1fr); grid-auto-rows: 1fr; gap: var(--be-cell-gap); }
#hiss .be-cell {
  all: unset; box-sizing: border-box; min-height: 0; display: flex; flex-direction: column; cursor: default; pointer-events: auto;   /* 不可点：不用手指（第十二轮用户） */
  border-top: 1px solid rgba(232, 226, 216, .25); padding-top: .5em;
  opacity: var(--be-dim, .3); transition: opacity var(--be-fade, .25s) linear;
  will-change: opacity;   /* 一直是独立的合成层：悬停前后插图的缩放方式不变（第十二轮用户：08 悬停时插图变糊） */
}
#hiss .be-cell.on, #hiss .be-cell:focus-visible { opacity: 1; border-top-color: var(--an-accent); }
#hiss .be-fig { flex: 1; min-height: 0; display: flex; align-items: flex-end; justify-content: center; }
#hiss .be-fig img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }   /* 等比放大到格子里、贴底；墨版是带透明通道的 PNG（第十七轮：原来 mix-blend-mode: screen 穿不过格子的合成组，扣掉的黑块挡住视频） */
#hiss .hiss-be.paper .be-fig img { mix-blend-mode: normal; }
#hiss .be-cap { display: flex; justify-content: space-between; gap: .6em; margin-top: .6em; font-size: var(--be-cap); }
#hiss .be-cap span:first-child { color: var(--an-accent); }
/* 没有插图的（Hiss Barrier）：Interstate 的问号（第十二轮用户；原来是红色细圈 + No image on file） */
#hiss .be-q { font: 400 var(--be-q)/1 var(--font-label); color: var(--be-q-color, #d6d1ca); mix-blend-mode: screen; }
/* Barrier 那一格（第十三轮）：插图大小的窗口（宽 = 格子宽、高按宽高比，贴底，不到格子顶上那条线），着色器按它的位置透出视频；问号居中叠在上面 */
#hiss .hiss-be.qglyph .be-q { visibility: hidden; }   /* 问号本身是遮罩（第十四轮）：字形画在着色器里透出视频，网页层只占位 */
#hiss .be-qwin { position: relative; width: 100%; aspect-ratio: var(--be-q-aspect, .62); max-height: 100%; display: flex; align-items: center; justify-content: center; }
#hiss .hiss-be.gl-title .be-head h2 { visibility: hidden; }   /* 大标题画在着色器里（遮罩 + HISS 渗墨）：网页层只占位 */
/* 第 3 屏图鉴：一排的排法（2026-10-25，beLayout 'row'）：14 格插图压小排成一排在上（高 --be-row-h），阅读栏在下（宽 --be-row-panel-w，靠左），
   正文分几栏（--be-row-text-cols）；编号 / 名字 / 小标题横跨全部栏。原来的「左阅读栏 + 右 7 × 2 格」= beLayout 'grid'（上面那些规则，不动） */
#hiss .hiss-be.row .be-body { flex-direction: column; }
#hiss .hiss-be.row .be-grid { order: 0; flex: 0 0 var(--be-row-h); height: var(--be-row-h); min-height: 0; grid-auto-rows: 100%; }   /* min-height 0：不然插图的原始高度会把这一排撑高 */
#hiss .hiss-be.row .be-panel { order: 1; flex: 1 1 auto; width: var(--be-row-panel-w); min-height: 0; }
#hiss .hiss-be.row .be-read { column-count: var(--be-row-text-cols); column-gap: var(--be-gap); }
#hiss .hiss-be.row .be-read > .be-no, #hiss .hiss-be.row .be-read > h3, #hiss .hiss-be.row .be-read > .be-kicker { column-span: all; }
#hiss .hiss-be.row .be-read p { break-inside: avoid-column; }
#hiss .hiss-be.row .be-cap { font-size: var(--be-cap); }
#hiss .hiss-be.row .be-cap span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#hiss .hiss-be.row .be-qwin { width: auto; height: 100%; max-width: 100%; }   /* 格子变窄：窗口按高度定、宽高比不变 */
/* 鼠标移到插图上（.on）：一道竖着穿过头部（或中心）的红色条状光晕（2026-10-25，beGlow）。left 由脚本按头部位置写（placeGlows）；
   外层 = 模糊的宽晕（::before），里面一条更亮的细芯（::after）；screen 叠在插图上（只和格子里的插图混合，格子外的视频 / 黑底照常） */
#hiss .be-fig { position: relative; }
#hiss .be-glow {
  position: absolute; left: 50%; top: 50%; width: var(--be-glow-spread); height: calc(100% * var(--be-glow-len));
  transform: translate(-50%, -50%); pointer-events: none; opacity: 0; transition: opacity var(--be-fade, .25s) linear; mix-blend-mode: screen;
}
#hiss .be-glow::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent, var(--be-glow) 22%, var(--be-glow) 78%, transparent);
  filter: blur(var(--be-glow-blur));
}
#hiss .be-glow::after {
  content: ''; position: absolute; top: 4%; bottom: 4%; left: 50%; width: var(--be-glow-w); transform: translateX(-50%);
  background: linear-gradient(to bottom, transparent, var(--be-glow-core) 18%, var(--be-glow-core) 82%, transparent);
  filter: blur(calc(var(--be-glow-w) * .6));
}
#hiss .hiss-be.glow .be-cell.on .be-glow { opacity: var(--be-glow-a); }

/* 手机模式（html.mob，2026-10-29 用户：去掉第 1、2 屏，直接左右滑看第 3 屏的敌人图鉴；不要文字，只展示遮罩效果；底部 disclaimer 删掉、底栏的视频条留着）。
   js/snap-screens.js 在手机模式下直接停在最后一屏、不接受滚动；hiss.js 的 mob:swipex / mob:tap 换 beSel。
   一次只显示选中的那一格，放大到整块（插图贴底居中、扣掉的粉色 / 问号照旧透出视频——遮罩按网页层的格子位置画，换一只时重画）。
   文字（大标题、阅读栏、格子下的编号名字）都不显示：大标题只是 visibility hidden + 不占地方（着色器里也不画），其余 display none */
html.mob #hiss .hiss-foot { display: none; }
html.mob #hiss .hiss-be { left: 8vw; width: 84vw; top: 9vh; }
html.mob #hiss .be-head { position: absolute; visibility: hidden; }
html.mob #hiss .be-body { position: relative; margin-top: 0; }
html.mob #hiss .be-grid { display: block; position: relative; }
html.mob #hiss .be-cell { display: none; pointer-events: none !important; }   /* 不挡 js/mob.js 的滑动 / 轻点（按钮上的触摸 mob.js 不管） */
html.mob #hiss .be-cell.on { display: flex; position: absolute; inset: 0; opacity: 1; border-top-color: transparent; }
html.mob #hiss .be-cap { display: none; }
/* 敌人名字显示在顶部（同日用户：敌人条目的名字还是要显示在顶部）：阅读栏重新显示、只留名字（h3），在图鉴最上面居中；插图排在名字下面、占满剩下的高度 */
html.mob #hiss .be-body { flex-direction: column; gap: 2.5vh; }
html.mob #hiss .be-panel { display: block; flex: 0 0 auto; width: auto; overflow: visible; }
html.mob #hiss .be-read > :not(h3) { display: none; }
html.mob #hiss .be-read h3 { margin: 0; font-size: var(--mob-name, 8vw); line-height: 1.05; text-align: center; }
html.mob #hiss .be-grid { flex: 1 1 auto; min-height: 0; }
/* 第 2 屏的内容手机上全部删掉（同日用户：严格来说手机版删掉了所有第二屏内容）：整屏 display none（屏都是按 --k 绝对定位的，不影响第 1、3 屏的位置；
   遮罩 / 栅格化量到 display none 的元素会跳过或得到 0 框）。手机上本来也滑不到第 2 屏（标题 ↔ 图鉴直接切） */
html.mob #hiss .hiss-screen.s2 { display: none; }
/* 换一只的动画（同日用户：翻页太生硬）：选中那一格和名字的透明度 = hiss.js 的 SW.a（--mob-a，暗下去 → 换 → 亮起来）；着色器里透出的视频跟着 uCellA 一起变。
   阅读栏原来换一篇时的「从下面浮上来」动画（be-in）在手机上关掉，免得和这个打架 */
html.mob #hiss .be-cell.on, html.mob #hiss .be-read h3 { opacity: var(--mob-a, 1); transition: none; }
html.mob #hiss .be-read.in { animation: none; }