/* ── 221B 占位阶段样式。舞台尺寸全用 cqw（相对舞台宽度），不用 JS 算。── */
/* UI 字体（§12b，0919 CY 同意打包）：思源宋体 CN + Libre Baskerville 按用到的字子集化，见 工具/做字体子集.py；纸上的字另走 数据/文件排版表.js */
@font-face { font-family: "源宋"; src: url("素材/字体/源宋-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Libre Baskerville"; src: url("素材/字体/LibreBaskerville.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "La Belle Aurore"; src: url("素材/字体/LaBelleAurore.woff2") format("woff2"); font-weight: 400; font-display: block; }   /* 0930 CY 选：华生日记的手写体（OFL，素材/字体/OFL-LaBelleAurore.txt）；系统手写体只有 Mac 有 */
:root { --墨: #1a1714; --纸: #efe6d3; --纸暗: #d9cdb4; --金: #b9924a; --灰: #8a8378; --红: #8b3a2f;
        /* §12b：字号三档（正文 / 辅 / 记号）；UI 字体中英各一套（打包子集见 素材/字体/，未打包前退系统字） */
        --字正文: 1.5cqw; --字辅: 1.2cqw; --字记号: 1cqw;
        --字体中: "Libre Baskerville", "源宋", "Songti SC", "Noto Serif CJK SC", serif;   /* 中文句里的拉丁字母也用 Baskerville，汉字和中文标点落到源宋 */
        --字体英: "Libre Baskerville", Baskerville, Georgia, serif; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0d0c0b; color: var(--纸); font-family: var(--字体中); }
html[lang="en"] body { font-family: var(--字体英); }
button, select, input, textarea { font-family: inherit; }   /* 1006 CY：按钮默认不继承字体（浏览器给 Arial）——选语言 / 继续 / 从头开始 / 布袋和拉铃的名签都成了黑体，和游戏里别的字不一样 */
#外框 { position: fixed; inset: 0; display: grid; place-items: center; container-type: size; }
#舞台 { position: relative; width: min(100cqw, 100cqh * 16 / 9); aspect-ratio: 16 / 9; background: #2b2520; overflow: hidden; container-type: inline-size; user-select: none; }
#舞台 > div { position: absolute; }

/* 墙与热层（0927 四面墙；热区 = 编号图逐像素，见 引擎/热层.js） */
#场景 { inset: 0; overflow: hidden; background: #2b2520; }
.热层 { position: absolute; inset: 0; }
.热层 > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.热层.无图 { background: repeating-linear-gradient(45deg, #2b2520 0 1.5cqw, #332c26 1.5cqw 3cqw); }
.热层 > img:not([src]), .热层 > img[src=""] { display: none; }
.热层 .描层 { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 0 .25cqw rgba(239,230,211,.55)); }
.热层.提示中 .描层 { animation: 呼吸描 1.6s ease-in-out infinite; }
@keyframes 呼吸描 { 50% { opacity: .25; } }
#舞台.指着 { cursor: pointer; }
#名签 { position: absolute; z-index: 23; font-size: 1.2cqw; color: var(--金); letter-spacing: .12em; pointer-events: none; opacity: 0; transition: opacity .12s; text-shadow: 0 0 .4cqw #000, 0 0 .8cqw #000; white-space: nowrap; transform: translate(-50%, -130%); }
/* 图标按钮（0928 CY 看过样稿定）：外框就是对话框那两张九宫格图（金线 + 深底）缩小，里面是脚本画的线条（index.html 的 <symbol>），金色渐变同对话框线。
   深底是 ::before 绝对定位，所以按钮本身不能是 static（否则深底铺到外层容器上——0928 密码轮数字被盖住就是这个）。
   左上角一个位置给「回去 / 关上 / 放下」：右缘在 8cqw、顶在 2cqw（文件层的纸按这个位置排过，钮和纸的缝 = 2cqw） */
.钮 { --角: .85cqw; --边: 3.6cqw; position: absolute; width: var(--边); height: var(--边); padding: 0; margin: 0; cursor: pointer; isolation: isolate;
      display: grid; place-items: center; background: none; font: inherit;
      border: var(--角) solid transparent; border-image: url("素材/界面/对话框_线.png") 100 fill / var(--角) / 0 stretch; }
.钮::before { content: ""; position: absolute; inset: calc(-1 * var(--角)); z-index: -1; pointer-events: none;
      border: var(--角) solid transparent; border-image: url("素材/界面/对话框_底.png") 100 fill / var(--角) / 0 stretch; opacity: .82; }
.钮 svg { width: 2.1cqw; height: 2.1cqw; margin: -.3cqw; overflow: visible; fill: none; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; pointer-events: none;
      filter: drop-shadow(0 .06cqw .08cqw rgba(0,0,0,.8)); }
.钮:hover svg { filter: brightness(1.25) drop-shadow(0 0 .3cqw rgba(248,186,102,.55)); }
.钮:disabled { opacity: .3; cursor: default; } .钮:disabled svg { filter: none; }
.钮:focus { outline: none; } .钮:focus-visible { outline: .1cqw solid var(--金); outline-offset: .2cqw; }
.钮.小 { --角: .7cqw; --边: 2.8cqw; position: relative; } .钮.小 svg { width: 1.7cqw; height: 1.7cqw; }
#特写层 .返回, #文件层 .关闭, #信封层 .关闭 { left: 1.2cqw; top: 2cqw; z-index: 5; }   /* 1006 CY：左缘和左转墙箭头对齐（1.2cqw，右边箭头离右缘也是 1.2）；原来右缘在 8cqw */
.转身 { top: calc(50% - var(--边) / 2); z-index: 1; }
/* 1006 CY：全屏钮——左上角那一列、返回 / × 正下方；只在没全屏时出（点开始已自动全屏，按 Esc 退了才用得着） */
#全屏钮 { left: 1.2cqw; top: calc(2cqw + var(--边) + 2cqw); z-index: 26; }   /* 1006 CY：优先级最高——没全屏就出、对话中也能点（压在框遮 24 之上）；自动段 / 黑屏字卡里不出（见「自动段」一节） */   /* 和上面那只钮隔 2cqw，同「钮和纸的缝」 */   /* 1005 CY 抓出钮里两道细横线：translateY(-50%) 落在半像素上，九宫格边图和中间那块接缝露出来；改用 top 定位（布局位置会对齐像素） */
#转左 { left: 1.2cqw; } #转右 { right: 1.2cqw; }
#特写层 .旧帧 { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
#舞台.显示热区 .热层 .描层 { outline: .2cqw dashed rgba(255,80,80,.6); }

/* 层 */
#特写层 { inset: 0; background: #14110e; z-index: 2; }
#运镜层 { inset: 0; z-index: 2; background: #14110e; cursor: pointer; }   /* 墙 → 特写的推镜：一屏一帧画在 canvas 上；运动中点一下跳到终点 */
#氛围层 { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }   /* 尘埃 + 火苗光晕（引擎/氛围.js），压在墙 / 特写 / 运镜之上、框和信封层之下 */
#运镜层 > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.特写图, .特写内容 { position: absolute; inset: 0; }   /* §12c：特写图占满舞台，对话框压在上面 */
.特写内容 { pointer-events: none; } .特写内容 > * { pointer-events: auto; }
.特写图 { background: #2b2520 center / cover no-repeat; }
.特写图层 { position: absolute; inset: 0; background: center / cover no-repeat; pointer-events: none; }
.特写图.无图 { background: repeating-linear-gradient(45deg, #2b2520 0 1.5cqw, #332c26 1.5cqw 3cqw); }
.特写图.无图::after { content: attr(data-名) " · 特写图待生成"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: rgba(239,230,211,.45); font-size: 1.8cqw; letter-spacing: .2cqw; }
/* 信封特写（0925 样稿）：原件 + 并排译文卡，整组在框上方，框压在底下照常出她那句 */
#信封层 { inset: 0; z-index: 4; background: rgba(8,6,4,.78); display: flex; align-items: flex-start; justify-content: center; gap: 2cqw; padding-top: 5cqw; cursor: pointer; }
#信封层 img { width: 50cqw; box-shadow: 0 .6cqw 2cqw rgba(0,0,0,.6); cursor: default; }
#信封层 .译文 { width: 30cqw; max-height: none; font-size: 1.3cqw; line-height: 1.8; cursor: default; }
#信封层.单件 { align-items: center; padding-top: 0; padding-bottom: 14cqw; }   /* 拿起来看：透明底单张，居中、让开底部的框 */
#信封层.单件 img { width: auto; height: 38cqw; max-width: 56cqw; object-fit: contain; box-shadow: none; filter: drop-shadow(0 .8cqw 1.6cqw rgba(0,0,0,.55)); pointer-events: none; }   /* 图已按内容裁边（工具/裁单件.py），统一按高度放 */
#信封层.单件 .译文 { width: 24cqw; }   /* 1001：宽图（报纸、琴谱）+ 译文栏原来总宽 90cqw，左边压到关闭钮底下——收到 56 + 2 + 24 = 82，整组让开 8cqw 的钮 */
#信封层 .译文 p { margin: 0 0 .5em; } #信封层 .译文 .项 { color: var(--金); font-size: .85em; letter-spacing: .08em; display: block; }
/* 文件组：原件 + （中文模式）译文；位置由 设置.文件.译文位置 决定（并排 / 下方） */
.文件组 { display: flex; align-items: flex-start; gap: 2cqw; max-width: 96cqw; max-height: 52cqw; }
.文件组[data-位置="并排"].带译文 .纸 { max-width: 44cqw; }   /* 0928：并排时英文纸最宽 44、中文栏 34，左右留空 10%——关上钮右缘在 8%，钮和纸的缝 = 纸和译文的缝 = 2cqw */
.文件组[data-位置="下方"] { flex-direction: column; align-items: center; gap: 1.2cqw; }
.文件组[data-位置="下方"].带译文 .纸 { max-height: 33cqw; }
.译文 { width: 34cqw; max-height: 50cqw; overflow-y: auto; box-sizing: border-box; padding: 1.6cqw 2cqw; background: rgba(20,17,14,.92); color: var(--纸);
        border-left: .3cqw solid var(--金); font-family: var(--字体, inherit); font-size: var(--字号, 1.5cqw); line-height: var(--行距, 1.8); text-align: left; overflow-wrap: anywhere; }
.文件组[data-位置="下方"] .译文 { width: var(--纸宽, 62cqw); max-width: 62cqw; max-height: 16cqw; border-left: 0; border-top: .3cqw solid var(--金); }
.译文 p { margin: 0; text-wrap: pretty; } .译文 p.空行 { height: .9em; } .译文 .右, .译文 .署名, .译文 .日期 { text-align: right; } .译文 .抬头 { text-align: center; } .译文 .居中 { text-align: center; } .译文 .小 { font-size: .85em; }
.译文 .节 { margin-bottom: .7em; } .译文.索引 .节 p { padding-left: 2.5em; text-indent: -1em; } .译文 .节 h4 { margin: 0 0 .3em; }
.译文 .链接 { text-decoration: underline; cursor: pointer; color: #d9a05a; }
.译文 .块.发票 { margin-top: 1cqw; padding: .6cqw 1cqw; border: .12cqw solid var(--灰); font-size: .85em; }
.译文 .涂黑 { background: rgba(236,226,206,.8); color: transparent; border-radius: .08em; }   /* 0930 CY：译文底是深色，黑块看不见——改成和译文字同色的浅色块 */
#文件层 .翻页 { position: absolute; left: 50%; bottom: 2cqw; transform: translateX(-50%); display: flex; gap: 1.2cqw; }
#文件层 .翻页 .钮 { position: relative; }
.钮:focus-visible, .钮:focus { outline: none; }   /* 0930 CY：方向键翻页后按钮出一圈焦点框 */
.子热区 { position: absolute; cursor: pointer; border-radius: .6cqw; display: flex; align-items: flex-end; justify-content: center; padding: .4cqw; font-size: 1.4cqw; color: var(--纸); transition: box-shadow .15s, background .15s; }
.子热区 span { background: rgba(0,0,0,.6); padding: .2cqw .6cqw; border-radius: .3cqw; white-space: nowrap; opacity: 0; transition: opacity .15s; pointer-events: none; }
.子热区:hover { box-shadow: inset 0 0 0 .25cqw rgba(255,240,200,.85), 0 0 1.2cqw rgba(255,230,160,.6); background: rgba(255,240,200,.08); }
.子热区:hover span, #舞台.显示热区 .子热区 span { opacity: 1; }
#舞台.显示热区 .子热区 { box-shadow: inset 0 0 0 .2cqw rgba(255,80,80,.8); }
.子热区.排 { bottom: 3%; height: 12%; background: rgba(20,17,14,.75); border: .12cqw solid rgba(239,230,211,.4); align-items: center; }
.子热区.排 span { opacity: 1; background: transparent; }
.子热区.拆过 { opacity: .55; }
.物件 { min-width: 9cqw; min-height: 6cqw; border: .2cqw solid rgba(239,230,211,.4); background: rgba(185,146,74,.2); display: grid; place-items: center; font-size: 1.4cqw; cursor: pointer; padding: .5cqw; }
.视图_化学台 .试剂排 { display: flex; gap: 1.5cqw; width: 100%; }
.视图_化学台 .台面 { display: flex; gap: 1.5cqw; width: 100%; margin-top: 2cqw; }
.本生灯.亮 { background: rgba(80,120,200,.45); }
.蒸发皿.有碘 { background: rgba(90,40,110,.45); }
.视图_墙 .弹孔板 { position: absolute; inset: 0; }
.孔 { position: absolute; width: 2.2cqw; height: 2.2cqw; margin: -1.1cqw; border-radius: 50%; background: #17110d; box-shadow: inset 0 0 .4cqw #000, 0 0 0 .35cqw #7a6248; }
.孔.白 { background: #e9e3d8; box-shadow: inset 0 0 .3cqw #b9b0a0, 0 0 0 .35cqw #8a7358; }
.孔.点 { width: 1.4cqw; height: 1.4cqw; margin: -.7cqw; cursor: default; }
.视图_公文箱 .轮组 { position: absolute; left: 50%; top: 43.7%; transform: translate(-50%, -50%); display: flex; justify-content: center; align-items: center; gap: 2.4cqw; width: 21.4cqw; height: 15cqw; background: rgba(12,10,8,.94); border-radius: .3cqw; }   /* 0929：盖住整个转轮窗口（原来那块半透明小板挡不住渲染图里的转轮，上下露出 9 / 2 跟叠上去的数字成两套）；位置 / 大小按 12_公文箱.jpg（0929 缩小上移重渲）量的，三列中心对三个轮 */
.轮 { display: grid; gap: .5cqw; justify-items: center; }
.试, .翻页钮 button, .话题列表 button:not(.钮), .再来, #调试面板 button, #调试面板 select { font-size: 1.5cqw; padding: .5cqw 1.2cqw; background: var(--纸暗); color: var(--墨); border: 0; cursor: pointer; }
.轮 .数 { width: 5cqw; height: 6cqw; display: grid; place-items: center; font-size: 4cqw; background: #3a2f25; color: var(--金); border: .2cqw solid var(--金); }
.试 { align-self: flex-end; }
.翻页钮 { display: flex; gap: 1cqw; align-items: flex-start; }

#文件层 { inset: 0; background: rgba(10,8,6,.85); display: grid; place-items: start center; padding-top: 2cqw; box-sizing: border-box; z-index: 10; }   /* 0928 CY：纸顶和关上钮（top 2cqw）对齐，不再上下居中 */
/* 纸：尺寸/纸色/字全部来自 数据/文件排版表.js（引擎按语言写成 CSS 变量），这里只放默认值和结构 */
.纸 { width: var(--纸宽, 62cqw); height: var(--纸高, auto); max-height: 50cqw; overflow-y: auto; overflow-x: hidden;
      background: var(--纸图, none) center / cover, var(--纸色, var(--纸)); color: var(--墨色, var(--墨));
      padding: var(--边距, 3cqw 4cqw); font-family: var(--字体, inherit); font-size: var(--字号, 1.7cqw); line-height: var(--行距, 1.75); text-align: var(--对齐, left);
      transform: rotate(var(--转, 0deg)); box-shadow: 0 1cqw 3cqw rgba(0,0,0,.6); overflow-wrap: anywhere; }
.纸 p { margin: 0; text-wrap: pretty; } .纸 p.空行 { height: 1.1em; }
.纸 h3, .纸 h4 { margin: 0 0 .4em; font-weight: bold; }
.纸 .右, .纸 .署名, .纸 .日期 { text-align: right; } .纸 .抬头 { text-align: center; }   /* 0928：商号信笺 / 账单抬头是印好的，居中 */
.纸 .居中 { text-align: center; }
.纸 .小 { font-size: .8em; }
.纸 .署名 { padding-right: 6%; } .纸 .附言 { margin-top: .2em; }
.纸 .抬头 { line-height: 1.3; letter-spacing: .04em; }
.纸[data-语="英"] .抬头 { font-family: var(--印刷字体, Baskerville, serif); font-size: .9em; }   /* 信头是印的，正文是手写 */
.纸 .链接 { text-decoration: underline; cursor: pointer; color: var(--红); }
.纸 .节 { margin-bottom: .9em; } .纸.索引 .节 p { padding-left: 3em; text-indent: -1em; }   /* 0928：悬挂缩进，一条笔记折行不和下一条混 */ .纸 .节 h4 { letter-spacing: .05em; }
.纸 .纸包, .译文 .纸包 { color: #3a2e22; margin-top: 1.5cqw; padding: 1cqw; background: #e3d6bc; border: .15cqw dashed var(--金); cursor: pointer; text-align: center; font-family: "Songti SC", serif; font-size: 1.4cqw; }
.纸 .块.发票 { margin-top: 2cqw; padding: 1cqw 1.4cqw; border: .12cqw solid var(--灰); font-family: Baskerville, "Times New Roman", serif; font-size: .85em; line-height: 1.5; background: rgba(255,255,255,.35); }
.纸[data-语="中"] .块.发票 { font-family: inherit; }
.纸.标签 { text-align: var(--对齐, center); border: .18cqw double rgba(60,40,20,.45); outline: .5cqw solid var(--纸色, var(--纸)); }
.纸.标签[data-语="英"] p:first-child { letter-spacing: .15em; }
.纸.空白 { min-height: var(--纸高, 30cqw); }
.纸.示范纸 p { color: var(--墨色, #1c2a5a); }
.纸 .涂黑 { background: #14110f; color: transparent; border-radius: .08em; padding: 0 .05em; box-shadow: 0 0 .12em #14110f; }   /* 后来的墨涂掉的字：比旧墨黑亮 */
.纸.日记 p { margin-bottom: .25em; }   /* 0930 分段后收紧：段落靠首行缩进分，8/30 五段一页放下 */
/* 0928 CY：正文段后间距稍大于行距（正文段落 = 不带类的段；称呼 / 地址 / 署名这些连着的短行不加） */
.纸 p:not([class]), .纸 p[class=""], .译文 p:not([class]), .译文 p[class=""] { margin-bottom: .45em; }
.纸.索引 .节 p, .译文.索引 .节 p { margin-bottom: .25em; }
.纸.日记 p:not([class]), .纸.日记 p[class=""] { margin-bottom: .25em; }   /* 0930：日记分段后收紧（上面那条 .45em 会压过 .纸.日记 p），8/30 五段一页放下 */
/* 0928 书信格式（CY：该有格式的东西都要有）：正文段首缩进、段间不空行；称呼 / 地址 / 抬头 / 日期 / 署名 / 附言带类，不缩进 */
.纸.信 p:not([class]), .纸.便条 p:not([class]), .纸.日记 p:not([class]), .纸.日记 p[class=""] { text-indent: 1.6em; }
.译文.信 p:not([class]), .译文.便条 p:not([class]), .译文.日记 p:not([class]), .译文.日记 p[class=""] { text-indent: 2em; }
.译文.标签 { text-align: var(--对齐, center); }
.译文.信 p:not([class]), .译文.便条 p:not([class]), .译文.日记 p:not([class]), .译文.日记 p[class=""] { text-align: justify; }   /* 0928：中文正文两端对齐，行尾贴右边缘，落款才对得齐 */
.账 { display: flex; justify-content: space-between; gap: 1em; } .账 .额 { white-space: nowrap; }
.账.合计 { border-top: .1cqw solid currentColor; margin-top: .3em; padding-top: .2em; }
.纸.污_硝酸银 { box-shadow: inset 4cqw -4cqw 0 -3cqw #6b4a2a; }
.纸.污_稀硫酸 { box-shadow: inset -4cqw 4cqw 0 -3cqw #b08a3a; }
.纸.污_蒸馏水 { filter: saturate(.85); }

/* ── 底部通用框（设计文档 §12b，0919 定稿）──
   四类文字同一个框；说话人行永远占位；正文 2 行、放不下翻页；文字按内线绝对定位（不借内边距，边框宽 > 内线到文字距离时内边距会成负数）。
   边框 = 素材/界面/对话框_线.png 九宫格（角 100 px ↔ 2.25cqw，四边拉伸，1 px = 0.0225cqw）；底 = 对话框_底.png（内线以内的遮罩）同一套九宫格叠在下面。 */
#框 { --角: 2.25cqw; --线到边: .7cqw; --栏: 56cqw; --左右: 1.2cqw; --上: .35cqw; --下: 1.2cqw; --人行: 1.9cqw; --行区: 5.25cqw; --浓: .72;
      left: 50%; transform: translateX(-50%); bottom: 2cqw; isolation: isolate; z-index: 25; cursor: pointer;
      width: calc(var(--栏) + 2 * var(--左右) + 2 * var(--线到边));
      height: calc(var(--上) + var(--人行) + var(--行区) + var(--下) + 2 * var(--线到边));
      border: var(--角) solid transparent; border-image: url("素材/界面/对话框_线.png") 100 fill / var(--角) / 0 stretch; padding: 0; }
#框::before { content: ""; position: absolute; inset: calc(-1 * var(--角)); z-index: -1; pointer-events: none;
      border: var(--角) solid transparent; border-image: url("素材/界面/对话框_底.png") 100 fill / var(--角) / 0 stretch; opacity: var(--浓); }
#框 .内容 { position: absolute; left: calc(var(--线到边) + var(--左右) - var(--角)); right: calc(var(--线到边) + var(--左右) - var(--角)); top: calc(var(--线到边) + var(--上) - var(--角)); }
#框 .说话人 { height: var(--人行); font-size: var(--字辅); line-height: 1.4; color: var(--金); letter-spacing: .12em; }
#框 .正文 { height: var(--行区); font-size: var(--字正文); line-height: 1.75; overflow: hidden; color: #efe6d3; text-wrap: pretty; }   /* pretty：避免最后一行只剩一个字（孤字） */
html[lang="en"] #框 .正文 { line-height: 1.5; }
#框 .正文 .句 { animation: 浮现 .15s ease-out; }
@keyframes 浮现 { from { opacity: 0; } }
/* 两组两种色：人物的声音（台词 / 内心）暖纸，组内差一档；镜头的描述（观察 / 叙述）冷灰 */
/* 0919：框里只有 Bella 的声音（看 / 停）和台词，一种墨色；讲故事的人在黑幕层 */
/* 选项（0927）：框里只放她说的话；动作是另一类东西，单独一排浮在框上方——右端对齐框里文字的右沿，和框隔固定一段距离，
   每个选项一块小底板（同框的深色半透明底 + 细金线），框的大小、留白、阅读原点都不动（0927 CY：塞进下边距挤破了留白） */
#框 .选 { position: absolute; right: calc(var(--线到边) + var(--左右) - var(--角)); bottom: calc(100% + var(--角) + .8cqw); display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .8cqw; }   /* 1fr：一排按钮等宽，取最宽那个（0927 CY：一大一小） */
#框 .选:empty { display: none; }
#框 .选 button { font: inherit; font-size: var(--字辅); line-height: 1; letter-spacing: .12em; color: var(--金); padding: .7cqw 1.4cqw; min-width: 7cqw; text-align: center; cursor: pointer;
                 background: rgba(14,11,9,.82); border: .1cqw solid rgba(185,146,74,.7); border-radius: .2cqw; box-shadow: 0 .2cqw .8cqw rgba(0,0,0,.45); }
#框 .选 button:hover { color: var(--纸); border-color: var(--金); background: rgba(40,31,22,.9); }
#框 .记号 { position: absolute; right: calc(var(--线到边) + var(--左右) - var(--角)); bottom: calc(var(--线到边) + .3 * var(--下) - var(--角)); font-size: var(--字记号); line-height: 1; color: var(--灰); }
#框遮 { inset: 0; z-index: 24; cursor: pointer; }
/* 0930 CY 选 B：按说话人上色——Bella（观察 / 内心 / 她说的话）保持纸白，姨妈玫瑰红，福尔摩斯冷灰蓝（黑屏字卡）；名签和正文同色 */
:root { --姨妈色: #eaa29c; --福尔摩斯色: #a9c4e0; }
#框[data-人^="姨妈"] .说话人, #框[data-人^="姨妈"] .正文 { color: var(--姨妈色); }
#黑幕层[data-人="姨妈"] .人, #黑幕层[data-人="姨妈"] p { color: var(--姨妈色); }
#黑幕层[data-人="福尔摩斯"] .人, #黑幕层[data-人="福尔摩斯"] p { color: var(--福尔摩斯色); }
#框.只选项::before { display: none; } #框.只选项 > :not(.选) { visibility: hidden; } #框.只选项 { background: none; box-shadow: none; border-image: none; }   /* 0930：没有句子、只给选项（拿到钥匙点门）——框不画，只留框上方那排按钮 */   /* 出句期间盖住舞台：点到哪里都只算"下一句" */

#话题层 { left: 10cqw; right: 10cqw; bottom: 12cqw; z-index: 10; background: rgba(20,17,14,.95); padding: 1.5cqw 2cqw; border: .15cqw solid rgba(239,230,211,.3); }
#话题层 h3 { margin: 0 0 1cqw; font-weight: normal; font-size: 1.6cqw; color: var(--灰); }
.话题列表 { display: flex; flex-wrap: wrap; gap: 1cqw; }
.话题列表 button.问过 { opacity: .5; }
#话题层 .话题关 { --角: .7cqw; --边: 2.8cqw; right: 1cqw; top: 1cqw; }   /* 0928：「不问了」→ 面板右上角 ×（同 Esc） */

/* 进袋提示（1006 CY：原来在屏幕顶部正中、黑底方块，和布袋隔着半个屏幕、样子也跟别处不搭）——挂在布袋下面、名签那一行再往下一行，
   右边和布袋图标对齐（1006 CY：提示和名签几乎不会同时出现，跟布袋走；长句往左长）；字照名签：金字、字距、黑光晕、不带底；淡入淡出 */
#提示 { right: 1.4cqw; top: 8.4cqw; font-size: 1.2cqw; color: var(--金); letter-spacing: .12em; white-space: nowrap; text-shadow: 0 0 .4cqw #000, 0 0 .8cqw #000; z-index: 27; pointer-events: none; }
#提示:not([hidden]) { animation: 提示淡 1.8s ease both; }
@keyframes 提示淡 { 0% { opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
/* 口袋（0928 CY 看样稿定）：右上角布袋，点开挂出 3×3 格；外框同对话框 / 图标按钮；没拿到的是虚线空格（自己画的线段——CSS dashed 细线会连成实线） */
#物品栏 { right: 1.4cqw; top: 1cqw; z-index: 3; }
#舞台.无物品栏 #物品栏 { display: none; }
#物品栏 .袋 { position: absolute; right: 0; top: 0; padding: 0; border: 0; background: none; cursor: pointer; }
#物品栏 .袋 img { display: block; height: 4.8cqw; filter: brightness(.6) drop-shadow(0 .2cqw .3cqw rgba(0,0,0,.6)); }   /* 0928 CY：布袋太亮、在整个画面里太突出，压暗（CY 定收起 60%、展开 80%） */
#物品栏 .袋:hover img, #物品栏 .袋.开 img { filter: brightness(.8) drop-shadow(0 0 .5cqw rgba(248,186,102,.4)) drop-shadow(0 .2cqw .3cqw rgba(0,0,0,.6)); }
#物品栏 .袋:focus { outline: none; }
#物品栏 .袋.新 img { animation: 进袋 1.1s ease-out; }   /* 0930 CY：东西放进布袋，布袋亮一下、轻轻一动 */
@keyframes 进袋 { 0% { filter: brightness(.6); transform: none; } 25% { filter: brightness(1.15) drop-shadow(0 0 .8cqw rgba(248,186,102,.7)); transform: translateY(-.25cqw) rotate(-4deg); }
                 55% { transform: translateY(0) rotate(3deg); } 100% { filter: brightness(.6); transform: none; } }
#物品栏 .盘 { --角: .85cqw; --格: 4.8cqw; --缝: .35cqw; position: absolute; right: 0; top: 5.4cqw; isolation: isolate;
      border: var(--角) solid transparent; border-image: url("素材/界面/对话框_线.png") 100 fill / var(--角) / 0 stretch; }
#物品栏 .盘::before { content: ""; position: absolute; inset: calc(-1 * var(--角)); z-index: -1; pointer-events: none;
      border: var(--角) solid transparent; border-image: url("素材/界面/对话框_底.png") 100 fill / var(--角) / 0 stretch; opacity: .86; }
#物品栏 .网 { display: grid; grid-template-columns: repeat(3, var(--格)); grid-template-rows: repeat(3, var(--格)); gap: var(--缝); margin: -.2cqw; }
#物品栏 .格 { position: relative; padding: 0; font: inherit; border: .08cqw solid rgba(230,173,98,.38); border-radius: .15cqw; display: grid; place-items: center; background: rgba(255,235,200,.025); }
#物品栏 button.格 { cursor: pointer; }
#物品栏 button.格:hover { border-color: rgba(248,186,102,.9); background: rgba(248,186,102,.08); }
#物品栏 .格.空 { --虚: rgba(230,173,98,.5); --粗: .08cqw; border: 0; background:
      repeating-linear-gradient(90deg, var(--虚) 0 .5cqw, transparent .5cqw .82cqw) top / 100% var(--粗) no-repeat,
      repeating-linear-gradient(90deg, var(--虚) 0 .5cqw, transparent .5cqw .82cqw) bottom / 100% var(--粗) no-repeat,
      repeating-linear-gradient(180deg, var(--虚) 0 .5cqw, transparent .5cqw .82cqw) left / var(--粗) 100% no-repeat,
      repeating-linear-gradient(180deg, var(--虚) 0 .5cqw, transparent .5cqw .82cqw) right / var(--粗) 100% no-repeat; }
#物品栏 .格 img { max-width: 76%; max-height: 76%;   /* 0928 CY：不顶满，四周留一样的边 */ object-fit: contain; filter: drop-shadow(0 .15cqw .25cqw rgba(0,0,0,.7)); pointer-events: none; }
#物品栏 .格 i { font-style: normal; font-size: 1cqw; color: rgba(239,230,211,.6); pointer-events: none; }
#物品栏 .名 { position: absolute; right: 0; top: calc(100% + var(--角) + .5cqw); font-size: 1.2cqw; color: var(--金); letter-spacing: .12em; white-space: nowrap; text-shadow: 0 0 .4cqw #000, 0 0 .8cqw #000; pointer-events: none; }
#黑幕层 { inset: 0; background: #000; display: grid; place-content: center; gap: 2cqw; z-index: 20; cursor: pointer; }
#黑幕层 p { margin: 0; font-size: 2.4cqw; letter-spacing: .2cqw; text-align: left; max-width: 60cqw; line-height: 1.7; justify-self: center; text-wrap: balance; }
#黑幕层 .人 { font-size: 1.2cqw; letter-spacing: .12em; color: var(--金); text-align: left; justify-self: center; }
#黑幕层 p:lang(zh) { word-break: keep-all; }   /* 1005：中文只在标点处断（「福尔⏎摩斯」）；lang 是 zh-CN，所以用 :lang(zh) */
html[lang="en"] #黑幕层 p { letter-spacing: 0; }      /* 1005：小写正文不加字距 */
.再来 { justify-self: center; }
.再来.结尾钮 { position: absolute; left: 50%; bottom: 6cqw; transform: translateX(-50%); }   /* 0930 CY：周四最后一行出「回到标题」时字卡不许被推上去——只这一个钮脱离网格钉在底部（选语言 / 继续两个钮还在网格里） */
.选语言 { font-size: 1.6cqw; padding: .8cqw 2.4cqw; min-width: 12cqw; }
/* 1006 CY：标题画面排版——字号三级（标题 3.6 > 按钮 1.6 > 说明 1.2），间距三档（组内 0.8 / 大板块之间 4.5 / 说明区内 2.5）。
   黑幕层平时 gap 2cqw（字卡用），标题页改成 0、间距全由下面各块的 margin-top 给 */
#黑幕层.标题页 { gap: 0; }
#黑幕层.标题页 p { font-size: 3.6cqw; line-height: 1.2; text-align: center; }
#黑幕层.标题页 .副标题 { margin: .8cqw 0 0; }
.语言行 { justify-self: center; margin-top: 4.5cqw; display: flex; gap: 2cqw; }
#黑幕层.标题页 .耳机注 { margin-top: 4.5cqw; }
.耳机注 .键注 { margin-top: 0;   /* 1006 CY：操作说明在前、耳机建议在后 */ display: flex; justify-content: center; align-items: flex-start; gap: 4cqw; }
/* 1006 CY 定：副标题紧贴主标题（抵掉一半网格间距），小一号、金色、字距放开，和两只钮之间再隔开 */
.副标题 { justify-self: center; margin: -1.2cqw 0 1.2cqw; font-size: 1.4cqw; color: var(--金); letter-spacing: .18em; cursor: default; }
/* 1006 CY：标题画面「建议佩戴耳机游玩」——两只钮下面隔开一段，中英两行，辅字号、灰、字距同名签；不抢标题和钮 */
.耳机注 { justify-self: center; margin-top: 2.5cqw; display: grid; gap: .5cqw; text-align: center; font-size: var(--字辅); color: var(--灰); letter-spacing: .12em; cursor: default; }
.耳机注 [lang="en"] { letter-spacing: .04em; }
/* 1006 CY：按键说明——三个图标（线框鼠标左键填实 / 空格键 / 线框鼠标右键填实），下面中英两个短词；线条同图标按钮的金线 */
.耳机注 .耳机行 { margin-top: 2cqw; }   /* + 耳机注自身行距 .5 = 说明区内 2.5 */
.键注 .项 { display: grid; grid-template-rows: 3.2cqw auto auto; justify-items: center; align-items: center; gap: .35cqw; }   /* 图标行等高，三组的字才对得齐 */
.键注 .标 { width: 2.6cqw; height: 2.6cqw; overflow: visible; fill: none; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.键注 .键 { box-sizing: border-box; height: 2.2cqw; min-width: 9cqw; padding: 0 1cqw; display: grid; place-items: center;
      border: .12cqw solid #e2a75b; border-radius: .35cqw; color: #e2a75b; font-size: 1cqw; letter-spacing: .08em; }

#脚手架 { position: fixed; left: 8px; bottom: 8px; display: flex; gap: 6px; }
#脚手架 button { font-size: 12px; padding: 4px 10px; background: #333; color: #ddd; border: 0; cursor: pointer; }
#调试面板 { position: fixed; right: 0; top: 0; bottom: 0; width: 320px; background: rgba(0,0,0,.92); color: #cfc; font: 11px/1.4 monospace; padding: 8px; overflow: auto; z-index: 99; }
.调试工具 { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
#调试面板 button, #调试面板 select { font-size: 11px; padding: 3px 6px; }
.状态看 { white-space: pre-wrap; margin: 0; }
[hidden] { display: none !important; }
#信封层.压文件 { z-index: 12; }   /* 1003 CY：索引本里点纸包，弹壳的拿起来看要压在纸上面（文件层 10，框 / 框遮更高） */
/* 拉铃：问姨妈的入口（1003 CY）——布袋左边，同高、同样压暗；悬停提亮 + 名签；第一次出现晃一下 */
#拉铃 { position: absolute; right: 7cqw; top: 1cqw; z-index: 3; padding: 0; border: 0; background: none; cursor: pointer; }
#拉铃 img { display: block; height: 4.8cqw; filter: brightness(.6) drop-shadow(0 .2cqw .3cqw rgba(0,0,0,.6)); transform-origin: 50% 18%; }
#拉铃:hover img { filter: brightness(.8) drop-shadow(0 0 .5cqw rgba(248,186,102,.4)) drop-shadow(0 .2cqw .3cqw rgba(0,0,0,.6)); }
#拉铃:focus { outline: none; }
#拉铃 .签 { position: absolute; left: 50%; top: 100%; transform: translate(-50%, .4cqw); font-size: 1.2cqw; color: var(--金); letter-spacing: .12em; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s; text-shadow: 0 0 .4cqw #000, 0 0 .8cqw #000; }
#拉铃:hover .签 { opacity: 1; }
#拉铃.新 img { animation: 拉铃晃 1.6s ease-out; }
@keyframes 拉铃晃 { 0% { transform: none; filter: brightness(.6); } 15% { transform: rotate(9deg); filter: brightness(1.1) drop-shadow(0 0 .8cqw rgba(248,186,102,.7)); }
                   35% { transform: rotate(-6deg); } 55% { transform: rotate(3.5deg); } 75% { transform: rotate(-1.5deg); } 100% { transform: none; filter: brightness(.6); } }
/* 1003 CY：「点布袋，展开紧贴布袋的置物格；点旁边的呼唤铃，出现的却是中下部的选项框」——问姨妈的话题列表改成从拉铃正下方挂下来，
   外框、底色、格子线、悬停全照布袋的盘；标题和 × 不要（名签已经写着「问姨妈」；收起同布袋：再点拉铃 / Esc / 点别处）。 */
#话题层 { left: auto; bottom: auto; right: 7cqw; top: 6.4cqw; z-index: 10; padding: 0; background: none; isolation: isolate;
      --角: .85cqw; border: var(--角) solid transparent; border-image: url("素材/界面/对话框_线.png") 100 fill / var(--角) / 0 stretch; }
#话题层::before { content: ""; position: absolute; inset: calc(-1 * var(--角)); z-index: -1; pointer-events: none;
      border: var(--角) solid transparent; border-image: url("素材/界面/对话框_底.png") 100 fill / var(--角) / 0 stretch; opacity: .86; }
#话题层 h3, #话题层 .话题关 { display: none; }
#话题层 .话题列表 { flex-direction: column; flex-wrap: nowrap; gap: .35cqw; margin: -.2cqw; }
#话题层 .话题列表 button:not(.钮) { display: block; width: 100%; text-align: left; font-size: 1.4cqw; padding: .5cqw 1.4cqw; white-space: nowrap;
      color: rgba(239,230,211,.9); background: rgba(255,235,200,.025); border: .08cqw solid rgba(230,173,98,.38); border-radius: .15cqw; }
#话题层 .话题列表 button:not(.钮):hover { border-color: rgba(248,186,102,.9); background: rgba(248,186,102,.08); color: var(--金); }
#拉铃.开 img { filter: brightness(.8) drop-shadow(0 0 .5cqw rgba(248,186,102,.4)) drop-shadow(0 .2cqw .3cqw rgba(0,0,0,.6)); }
#舞台.无物品栏 #拉铃 { display: none; }   /* 同布袋：平台 / 显影那一拍这类藏物品栏的特写里也不出 */
/* 名签：布袋和拉铃同一种（1003 CY：拉铃有、布袋没有）——悬停出、展开时收（不压住挂下来的盘） */
#物品栏 .袋 .签 { position: absolute; left: 50%; top: 100%; transform: translate(-50%, .4cqw); font-size: 1.2cqw; color: var(--金); letter-spacing: .12em; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s; text-shadow: 0 0 .4cqw #000, 0 0 .8cqw #000; }
#物品栏 .袋:hover .签 { opacity: 1; }
#物品栏 .袋.开 .签, #拉铃.开 .签 { opacity: 0; }

/* ── 自动段（1005 CY 定）：过场不用点 ⇒ 电影黑边（上下各 13.5%，≈ 2.39:1）+ 台词当字幕出在下黑边里、不带框、没有小三角；
      布袋 / 拉铃 / 转身箭头隐藏；整屏不接点击（#自动遮）。黑边出现 = 只用看，黑边收起 = 轮到玩家。 ── */
#舞台 .黑边 { position: absolute; left: 0; right: 0; height: 0; background: #000; z-index: 22; pointer-events: none; transition: height 1.2s ease-in-out; }
#舞台 .黑边.上 { top: 0; } #舞台 .黑边.下 { bottom: 0; }
#舞台.自动段 .黑边 { height: 13.5%; }
#舞台.黑边慢 .黑边 { transition-duration: 2.4s; }   /* 开幕：黑边慢慢打开 */
#舞台.黑边瞬 .黑边 { transition: none; }
#舞台.自动段 #拉铃, #舞台.自动段 #物品栏, #舞台.自动段 .转身 { opacity: 0; pointer-events: none; }
#舞台.自动段 #全屏钮, #黑幕层:not([hidden]) ~ #全屏钮 { display: none; }   /* 1006 CY：自动段和黑屏字卡里不出（破坏美感）；其余时候没全屏就出、对话中也能点 */
#拉铃, #物品栏, .转身 { transition: opacity .6s; }
#自动遮 { position: absolute; inset: 0; z-index: 21; cursor: default; }
#框.字幕:not([hidden]) { left: 0; right: 0; bottom: 0; width: auto; height: 13.5%; transform: none; border: none; border-image: none; background: none; box-shadow: none;
      display: flex; align-items: center; justify-content: center; cursor: default; }
#框.字幕::before, #框.字幕 .记号, #框.字幕 .选 { display: none; }
#框.字幕 .内容 { position: static; display: flex; flex-direction: column; align-items: center; }
#框.字幕 .说话人 { height: auto; font-size: calc(var(--字辅) * .9); margin-bottom: .2cqw; }
#框.字幕 .说话人:empty { display: none; }
#框.字幕 .正文 { height: auto; overflow: visible; text-align: center; }
/* 虚化（开幕的墙、周四最后一行背后的墙）：压暗 + 模糊，2.5 s 过渡 */
#场景, #氛围层 { transition: filter 2.5s ease-in-out; }
#场景.虚化, #氛围层.虚化 { filter: blur(7px) brightness(.4); }
#黑幕层.透底 { background: transparent; cursor: default; }
#黑幕层.浮出 { background: rgba(0,0,0,.55); transition: background 2.5s ease-in-out; }   /* 周四最后一行：从黑里浮出虚化的 A 墙 */

/* ── 预载进度（1006 CY：网页版全部预加载，引擎/预载.js）：标题画面底部一条细金线 + 中英小字；点了开始还没下完 → 黑底，同一条线居中 ── */
/* 1006 CY 改：进度区放进黑幕层的排版里（排在最后一块），不再 absolute 钉底——原来慢网多出两行提示时往上长、压住「建议佩戴耳机游玩」。
   字区按最多几行预留高度、内容顶对齐：两行变四行时进度线和上面的东西都不动。标题 / 续玩画面最多 4 行，加载画面（只剩已选语言）最多 2 行 */
#预载 { justify-self: center; width: max-content; min-width: 26cqw; margin-top: 4.5cqw; display: grid; gap: .8cqw; justify-items: center; align-content: start; pointer-events: none;
      --行: 1.4cqw; min-height: calc(.12cqw + .8cqw + 4 * var(--行) + 3 * .35cqw + .4cqw); }
#黑幕层:not(.标题页) > #预载:not(.加载) { margin-top: 2.5cqw; }   /* 续玩画面黑幕层自带 2cqw 行距，合起来也是 4.5 */
#预载.加载 { margin-top: 0; min-height: calc(.12cqw + .8cqw + 2 * var(--行) + .35cqw + .4cqw); }
#预载 .线 { width: 26cqw;   /* 和两个语言按钮同宽；断网 / 不支持那行英文比它长，字区按内容宽居中，线长不变 */ height: .12cqw; background: rgba(226,167,91,.18); }
#预载 .线 i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #d4964e, #f8ba66); transition: width .3s linear; }
#预载 .字 { display: grid; gap: .35cqw; justify-items: center; font-size: 1cqw; line-height: var(--行); color: var(--灰); letter-spacing: .08em; white-space: nowrap; }
#预载 .字 [lang="en"] { letter-spacing: .03em; }
#预载 .字 .注 { color: #6f685e; }
#预载 .字 .注 { margin-top: .4cqw; } #预载 .字 .注 + .注 { margin-top: 0; }   /* 慢网那句提示和进度隔开一点（只出一种语言时也隔开） */
#预载 .字 span:empty { display: none; }