/* 小SA 视觉小说 · 播放器原型
 * 配色沿用自习室界面统一层（ui-kit.css）的两种面：纸色（米黄纸、酒红）和夜色（深木色、金色）。
 * 桌面舞台 16:9；触屏横屏铺满视口，画面延伸到边缘，交互内容放进安全区。 */

:root {
  --novel-safe-t: env(safe-area-inset-top, 0px); --novel-safe-r: env(safe-area-inset-right, 0px);
  --novel-safe-b: env(safe-area-inset-bottom, 0px); --novel-safe-l: env(safe-area-inset-left, 0px);
  --paper: #f8f3ea; --paper-2: #f1e9dc; --card: #fffdf8; --line: #e3d7c5; --line-strong: #cdbda3;
  --ink: #43352d; --ink-soft: #8a7462; --wine: #8a4a45; --wine-deep: #6f3835;
  --night: #201812; --night-2: #2b2118; --night-line: rgba(216, 176, 120, .26); --cream: #f3e6cf; --cream-soft: #c9b391;
  --gold: #e6b468; --gold-deep: #c98533;
  --serif: "Songti SC", "STSongti-SC-Regular", "Noto Serif SC", "Noto Serif CJK SC", "Source Han Serif SC", "SimSun", serif;
  --sans: -apple-system, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --hand: "Kaiti SC", "STKaiti", "KaiTi", "Songti SC", serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
@font-face { font-family: "Songti SC"; font-weight: 400; src: local("Songti SC Regular"), local("STSongti-SC-Regular"), local("Songti SC"), local("Noto Serif CJK SC"), local("Noto Serif SC"), local("Source Han Serif SC"), local("SimSun"); }
@font-face { font-family: "Songti SC"; font-weight: 700; src: local("Songti SC Bold"), local("STSongti-SC-Bold"), local("Noto Serif CJK SC Bold"), local("Noto Serif SC Bold"), local("Source Han Serif SC Bold"), local("SimSun"); }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0b0a08; color: var(--cream); font-family: var(--sans); -webkit-tap-highlight-color: transparent; }
html, body { overflow: hidden; overscroll-behavior: none; touch-action: pan-x pan-y; }
body { height: 100vh; height: 100dvh; -webkit-text-size-adjust: 100%; }
:where(#home, .modal-card, .menu.qa, #phone-list, #backlog-list, #soundpanel, #dev) { touch-action: pan-y; overscroll-behavior: contain; }
input[type="range"] { touch-action: none; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; }
[hidden] { display: none !important; }
body[data-screen="home"] #app, body[data-screen="play"] #home { display: none; }

/* ---------- 竖屏提示 ---------- */
#rotate { display: none; position: fixed; inset: 0; z-index: 100; background: #0b0a08; color: var(--cream); place-content: center; justify-items: center; gap: 10px; text-align: center; padding: max(24px, var(--novel-safe-t)) max(24px, var(--novel-safe-r)) max(24px, var(--novel-safe-b)) max(24px, var(--novel-safe-l)); }
#rotate svg { width: 72px; height: 72px; color: var(--gold); }
#rotate p { margin: 6px 0 0; font: 600 20px/1.4 var(--serif); letter-spacing: .1em; }
#rotate small { color: var(--cream-soft); font-size: 13px; line-height: 1.6; }
#rotate button, #btn-rotate-room, #btn-rotate-home { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; text-decoration: none; color: var(--cream); margin-top: 12px; padding: 10px 22px; border-radius: 999px; border: 1px solid var(--night-line); background: var(--night-2); }
/* 只有剧情舞台要横屏；档案柜和小说阅读页竖屏也能看（2026-10-18 用户同意） */
@media (orientation: portrait) and (pointer: coarse) { body[data-screen="play"] #rotate { display: grid; } }

/* ---------- 档案柜（目录） ---------- */
#home { height: 100%; overflow: auto; padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  background: radial-gradient(120% 90% at 50% 0%, #3a2a1d, #160f0a 70%); }
.home-head, #volumes, .settings-wrap { max-width: 980px; margin: 0 auto; }
.home-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 6px 4px 16px; border-bottom: 1px solid var(--night-line); }
.home-head small { color: var(--gold); letter-spacing: .3em; font-size: 11px; }
.home-head h1 { margin: 4px 0 0; font: 600 30px/1.2 var(--serif); letter-spacing: .14em; color: var(--cream); }
.home-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.home-actions span { color: var(--cream-soft); font-size: 13px; }
.home-actions button, .settings-wrap summary { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--night-line); background: rgba(43, 33, 24, .8); color: var(--cream); font-size: 14px; }
.home-actions button:hover { border-color: var(--gold-deep); }
.volume { margin-top: 22px; }
.volume h2 { margin: 0 0 12px; font: 600 17px/1.4 var(--serif); letter-spacing: .12em; color: var(--gold); }
.chapter-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
/* 每一章是档案柜里的一份牛皮纸文件夹，左上角带一个标签 */
.chapter { position: relative; display: grid; gap: 6px; align-content: start; text-align: left; min-height: 120px; padding: 22px 16px 14px; border: 1px solid #c9a978; border-radius: 4px 12px 12px 12px;
  background: linear-gradient(180deg, #e7cf9f, #d9bb84); color: #3b2a1a; box-shadow: 0 10px 26px rgba(0, 0, 0, .35); transition: transform .18s var(--ease), box-shadow .18s; }
.chapter::before { content: ""; position: absolute; left: -1px; top: -12px; width: 46%; height: 13px; border: 1px solid #c9a978; border-bottom: 0; border-radius: 8px 8px 0 0; background: #e7cf9f; }
.chapter:not(:disabled):hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0, 0, 0, .42); }
.chapter .ch-no { font-size: 12px; letter-spacing: .18em; color: #7a5a35; }
.chapter .ch-title { font: 600 19px/1.35 var(--serif); letter-spacing: .06em; }
.chapter .ch-status { margin-top: auto; font-size: 13px; color: var(--wine-deep); }
.chapter .ch-time { font-size: 12px; color: #7a5a35; }
.chapter.done .ch-status { color: #5d6b3c; }
.chapter.locked { filter: grayscale(.7) brightness(.7); }
.chapter.locked .ch-status { color: #4a3a2a; }
/* 差研究时长的章节：进度条 + 「去自习室专注」（2026-10-18，读完上一章起再专注 60 分钟，卷末 90） */
.chapter .ch-bar { display: block; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--wine-deep) calc(var(--p, 0) * 100%), rgba(74, 58, 42, .22) 0); }
.chapter .ch-go { font-size: 12px; color: #7a5a35; }
.chapter.locked:not(:disabled) { cursor: pointer; }
.loading-line, .err { color: var(--cream-soft); }
.settings-wrap { margin-top: 26px; }
.settings-wrap summary { display: inline-block; list-style: none; }
.settings-wrap summary::-webkit-details-marker { display: none; }
#settings { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px 22px; margin-top: 14px; padding: 16px; border: 1px solid var(--night-line); border-radius: 14px; background: rgba(32, 24, 18, .7); }
#settings label { display: grid; gap: 6px; font-size: 14px; color: var(--cream); }
#settings small { color: var(--cream-soft); font-size: 12px; }
#settings input { accent-color: var(--gold-deep); }
#settings label.check { grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; }
#settings label.check small { grid-column: 1 / -1; }
.dev-only { display: none !important; }
body.dev .dev-only { display: grid !important; }

/* ---------- 弹窗（称呼） ---------- */
.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(16, 12, 9, .62); padding: calc(16px + var(--novel-safe-t)) calc(16px + var(--novel-safe-r)) calc(16px + var(--novel-safe-b)) calc(16px + var(--novel-safe-l)); }
.modal-card { width: min(420px, 100%); max-height: 100%; overflow: auto; background: var(--paper); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 20px; padding: 22px; box-shadow: 0 30px 110px rgba(0, 0, 0, .45); }
.modal-card h2 { margin: 0 0 14px; font: 600 20px/1.3 var(--serif); letter-spacing: .08em; }
.field { display: grid; gap: 6px; margin: 0 0 14px; border: 0; padding: 0; font-size: 14px; }
.field input[type=text], .field input:not([type]) { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); font-size: 16px; }
.field legend { padding: 0; margin-bottom: 6px; }
.field label { display: inline-flex; gap: 6px; align-items: center; margin-right: 18px; }
.field small { color: var(--ink-soft); font-size: 12px; line-height: 1.6; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; }
.modal-actions button, .end-card button, .tomato-actions button { padding: 9px 20px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); }
button.primary { background: var(--wine); border-color: var(--wine-deep); color: #fff; }
.theme-night button.primary { background: var(--gold-deep); border-color: var(--gold); color: #2b1c08; }

/* ---------- 舞台 ---------- */
#app { position: fixed; inset: 0; height: 100vh; height: 100dvh; display: grid; place-items: center; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
body.dev #app { right: 320px; }
#stage { position: relative; width: min(100%, calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 16 / 9)); aspect-ratio: 16 / 9; container-type: size; overflow: hidden; background: #000; user-select: none; -webkit-user-select: none; cursor: default; }
@supports not (height: 100dvh) { #stage { width: min(100%, calc(100vh * 16 / 9)); } }
/* A separate content rectangle keeps every dialogue, choice, phone, log and control clear of cutouts. */
#safe-ui { position: absolute; inset: 0; z-index: 10; container-type: size; }
#titlecard { padding: var(--novel-safe-t) var(--novel-safe-r) var(--novel-safe-b) var(--novel-safe-l); }
@media (orientation: landscape) and (pointer: coarse) {
  #app { padding: 0; }
  #stage { width: 100%; height: 100%; aspect-ratio: auto; }
  #safe-ui { inset: var(--novel-safe-t) var(--novel-safe-r) var(--novel-safe-b) var(--novel-safe-l); }
  /* Artwork fills the entire stage, including the cutout margins. */
  #safe-ui { --shade-t: var(--novel-safe-t); --shade-r: var(--novel-safe-r); --shade-b: var(--novel-safe-b); --shade-l: var(--novel-safe-l); }
}
#bg, #sprites, #cg { position: absolute; inset: 0; }
#bg > img, #cg > img { width: 100%; height: 100%; object-fit: cover; display: block; }
#bg > .bg-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.bg-black { background: #000; }
/* 氛围层：在背景和立绘之间；CSS 尺寸写死，画布按它定像素，不会自己越长越大 */
#fxcanvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
#sprites { z-index: 1; }
#cg { z-index: 2; }

/* 占位背景：地点名 + 按地点算出来的色调，等主美出图 */
.ph-bg { position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 6cqh), repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 6cqh),
    linear-gradient(165deg, hsl(var(--hue) 32% 80%), hsl(calc(var(--hue) + 35) 24% 60%)); }
.ph-bg.night { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 6cqh), repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 6cqh),
    radial-gradient(70% 60% at 30% 40%, hsl(var(--hue) 30% 22%), hsl(calc(var(--hue) + 30) 30% 8%)); }
.ph-label { position: absolute; left: 4cqh; top: 3.2cqh; display: grid; gap: .6cqh; justify-items: start; color: rgba(40, 30, 22, .62); }
.ph-bg.night .ph-label { color: rgba(243, 230, 207, .5); }
.ph-label b { font: 600 4.4cqh/1.2 var(--serif); letter-spacing: .12em; }
.ph-label span { font-size: 2.6cqh; letter-spacing: .1em; }
.ph-label small { font-size: 2.2cqh; letter-spacing: .3em; opacity: .7; }

/* 立绘：画布 1200×1800，底边贴舞台底，高度约为舞台的 95% */
.sprite { position: absolute; bottom: 0; height: 95%; aspect-ratio: 2 / 3; translate: -50% 0; transition: opacity .3s ease, translate .3s var(--ease), filter .3s ease, left .4s var(--ease); }
.sprite[data-pos="left"] { left: 22%; }
.sprite[data-pos="center"] { left: 50%; }
.sprite[data-pos="right"] { left: 78%; }
.sprite > img, .sprite > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; object-position: bottom; }
.sprite > .swap { animation: swap .12s linear; }
@keyframes swap { from { opacity: 0; } }
.sprite.in, .sprite.out { opacity: 0; translate: -50% 1.5%; }
/* 每张背景可以给立绘配一个滤镜（manifest 的 spriteFilter），让人物融进场景的光里 */
.sprite > img { filter: var(--sprite-filter, none); }
.sprite.dim { filter: brightness(.72) saturate(.85); }
.ph-sprite .ph-name { font: 700 64px var(--serif); fill: var(--ink); letter-spacing: 6px; }
.ph-sprite .ph-expr { font: 36px var(--sans); fill: var(--ink-soft); }

#cg { opacity: 0; transition: opacity .6s ease; pointer-events: none; }
#cg.on { opacity: 1; }
.ph-cg { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 2cqh; padding: 0 12cqh; text-align: center; color: rgba(243, 230, 207, .82);
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .04) 0 2cqh, transparent 2cqh 4cqh), radial-gradient(80% 70% at 50% 45%, #3c3022, #120d09); }
.ph-cg b { font: 600 4.6cqh/1.5 var(--serif); letter-spacing: .08em; }
.ph-cg small { font-size: 2.4cqh; letter-spacing: .3em; opacity: .7; }

/* ---------- 【画面】：隔着玻璃 / 失焦 / 压暗，晃动 ---------- */
#bg, #fxcanvas, #sprites, #cg { transition: filter 1.2s ease; }
.view-glass #bg, .view-glass #fxcanvas, .view-glass #sprites, .view-glass #cg { filter: saturate(.62) brightness(.9) blur(1px); }
.view-blur #bg, .view-blur #fxcanvas, .view-blur #sprites, .view-blur #cg { filter: blur(3px); }
.view-dark #bg, .view-dark #fxcanvas, .view-dark #sprites, .view-dark #cg { filter: brightness(.62) saturate(.8); }
#stage::after { content: ""; position: absolute; inset: 0; z-index: 9; pointer-events: none; opacity: 0; transition: opacity 1.2s ease;
  background: radial-gradient(ellipse 75% 70% at 50% 45%, transparent 55%, rgba(0, 0, 0, .5)); }
#stage.view-glass::after, #stage.view-dark::after { opacity: 1; }
.shake #bg, .shake #fxcanvas, .shake #sprites, .shake #cg { animation: shake .5s cubic-bezier(.3, .6, .4, 1); }
@keyframes shake { 0% { transform: scale(1.03); } 18% { transform: scale(1.03) translate(-.7cqh, .4cqh); } 38% { transform: scale(1.03) translate(.6cqh, -.3cqh); } 58% { transform: scale(1.03) translate(-.35cqh, .2cqh); } 78% { transform: scale(1.03) translate(.15cqh, 0); } 100% { transform: scale(1); } }

/* ---------- 开章标题卡 ---------- */
#titlecard { position: absolute; inset: 0; z-index: 52; display: grid; place-content: center; justify-items: center; gap: 1.8cqh; background: #0d0a07; color: var(--cream); cursor: pointer; animation: fade .8s ease; transition: opacity .6s ease; }
#titlecard.out { opacity: 0; }
#tc-vol { font: 400 2.6cqh/1.4 var(--serif); letter-spacing: .4em; color: var(--gold); animation: rise 1s var(--ease) .1s both; }
.tc-rule { width: 22cqh; height: 1px; background: linear-gradient(90deg, transparent, rgba(230, 180, 104, .7), transparent); animation: grow 1.2s var(--ease) .2s both; }
#tc-title { font: 600 7cqh/1.25 var(--serif); letter-spacing: .3em; padding-left: .3em; animation: rise 1.1s var(--ease) .3s both; }
#tc-no { font: 400 2.4cqh/1.4 var(--serif); letter-spacing: .3em; color: var(--cream-soft); animation: rise 1s var(--ease) .5s both; }
@keyframes grow { from { transform: scaleX(0); opacity: 0; } }

/* ---------- 文字框 ---------- */
#textbox { position: absolute; left: 7%; right: 7%; bottom: 4cqh; min-height: 25cqh; padding: 4.2cqh 5cqh 3.6cqh; border-radius: 1.8cqh; z-index: 10; animation: tb-in .3s var(--ease);
  background: rgba(248, 243, 234, .94); color: var(--ink); border: 1px solid var(--line-strong); box-shadow: 0 1.5cqh 5cqh rgba(0, 0, 0, .28); }
.theme-night #textbox { background: rgba(32, 24, 18, .88); color: var(--cream); border-color: var(--night-line); }
@keyframes tb-in { from { opacity: 0; translate: 0 1.2cqh; } }
#speaker { position: absolute; left: 4cqh; top: -2.8cqh; padding: .7cqh 2.6cqh; border-radius: 999px; background: var(--wine); color: #fff; font: 700 clamp(12px, 3cqh, 24px)/1.3 var(--serif); letter-spacing: .12em; box-shadow: 0 .6cqh 1.6cqh rgba(0, 0, 0, .2); }
.theme-night #speaker { background: var(--gold-deep); color: #2b1c08; }
#text { margin: 0; font: 400 clamp(13px, 3.5cqh, 30px)/1.8 var(--serif); letter-spacing: .03em; white-space: pre-wrap; }
#textbox.narr #text { color: inherit; }
#more { position: absolute; right: 3.4cqh; bottom: 2.4cqh; width: 0; height: 0; border-left: 1cqh solid transparent; border-right: 1cqh solid transparent; border-top: 1.3cqh solid currentColor; opacity: .55; animation: more 1.2s ease-in-out infinite; }
@keyframes more { 50% { translate: 0 .6cqh; opacity: .3; } }

/* ---------- 选项与问答 ---------- */
.menu { position: absolute; z-index: 20; display: grid; gap: 1.6cqh; }
.menu.choice { left: 50%; top: 46%; translate: -50% -50%; width: min(62%, 120cqh); }
/* 问答从文字框的位置弹出，两列排题，角色留在画面里 */
.menu.qa { left: 7%; right: 7%; bottom: 4cqh; max-height: 62%; overflow: auto; padding: 2.6cqh 3cqh 3cqh; grid-template-columns: 1fr 1fr; gap: 1.2cqh 1.6cqh; border-radius: 2cqh; background: rgba(248, 243, 234, .96); border: 1px solid var(--line-strong); box-shadow: 0 2cqh 6cqh rgba(0, 0, 0, .35); }
.theme-night .menu.qa { background: rgba(32, 24, 18, .94); border-color: var(--night-line); }
.menu-prompt { margin: 0 0 .6cqh; text-align: center; font: 600 3.2cqh/1.5 var(--serif); color: #fff; text-shadow: 0 .3cqh 1cqh rgba(0, 0, 0, .6); }
.menu-item { display: flex; align-items: center; gap: 1.6cqh; width: 100%; padding: 2.2cqh 3.4cqh; border-radius: 1.4cqh; text-align: left;
  font: 400 clamp(13px, 3.3cqh, 28px)/1.45 var(--serif); letter-spacing: .03em; background: rgba(255, 253, 248, .95); color: var(--ink); border: 1px solid var(--line-strong); box-shadow: 0 .8cqh 2.4cqh rgba(0, 0, 0, .18); transition: background-color .18s, border-color .18s, translate .18s var(--ease); }
.menu-item:not(:disabled):hover, .menu-item:focus-visible { border-color: var(--wine); background: #fff; translate: .6cqh 0; outline: none; }
.theme-night .menu-item { background: rgba(43, 33, 24, .96); color: var(--cream); border-color: var(--night-line); }
.theme-night .menu-item:not(:disabled):hover, .theme-night .menu-item:focus-visible { border-color: var(--gold); background: #33281d; }
.qa-head, .qa-end { grid-column: 1 / -1; }
.qa-head { display: flex; align-items: baseline; justify-content: space-between; gap: 2cqh; padding: 0 .6cqh 1cqh; border-bottom: 1px solid var(--line); color: var(--ink); }
.theme-night .qa-head { border-color: var(--night-line); color: var(--cream); }
.qa-head b { font: 600 3.6cqh/1.3 var(--serif); letter-spacing: .12em; }
.qa-head span { font-size: 2.4cqh; opacity: .65; }
.menu.qa .menu-item { box-shadow: none; padding: 1.8cqh 2.8cqh; }
.qa-label { flex: 1; }
.qa-tag { font-style: normal; font-size: 2.2cqh; padding: .3cqh 1.4cqh; border-radius: 999px; border: 1px solid currentColor; color: var(--wine); opacity: .85; }
.theme-night .qa-tag { color: var(--gold); }
/* 问过的题：变淡，前面画一个勾 */
.menu-item.asked { opacity: .58; }
.menu-item.asked::before { content: ""; flex: none; width: 1.4cqh; height: .8cqh; border-left: .4cqh solid currentColor; border-bottom: .4cqh solid currentColor; rotate: -45deg; translate: 0 -.3cqh; }
.qa-end { justify-content: center; margin-top: .6cqh; background: var(--wine) !important; color: #fff !important; border-color: var(--wine-deep) !important; }
.theme-night .qa-end { background: var(--gold-deep) !important; color: #2b1c08 !important; border-color: var(--gold) !important; }
.qa-end:disabled { opacity: .45; translate: none !important; }

/* ---------- 纸条（> 引用块） ---------- */
#note { position: absolute; inset: 0; z-index: 15; display: grid; place-items: center; --shade-color: rgba(0, 0, 0, .28); }
.paper-slip { width: min(46%, 90cqh); padding: 5cqh 5.4cqh 4cqh; rotate: -1.2deg; color: #3b2c22; border-radius: .6cqh;
  background: repeating-linear-gradient(180deg, transparent 0 5.2cqh, rgba(120, 90, 60, .12) 5.2cqh 5.4cqh), #fffaf0; box-shadow: 0 2cqh 5cqh rgba(0, 0, 0, .35); animation: slip .35s var(--ease); }
.paper-slip p { margin: 0; font: 400 clamp(14px, 3.6cqh, 30px)/1.5 var(--hand); letter-spacing: .06em; }
.paper-slip p.sign { margin-top: 1.6cqh; text-align: right; }
@keyframes slip { from { opacity: 0; translate: 0 3cqh; rotate: -4deg; } }

/* ---------- 手机（2026-10-22 改成聊天软件样式：头像、群名人数、连发合并、正在输入、时间、撤回、照片） ---------- */
#phone { position: absolute; inset: 0; z-index: 15; --shade-color: rgba(0, 0, 0, .25); }
.phone-frame { --av: max(26px, 5.4cqh); --fs: max(13px, 2.5cqh); --fs-s: max(12px, 1.75cqh); position: absolute; right: 12%; top: 9%; bottom: 4%; aspect-ratio: 9 / 17; display: grid; grid-template-rows: auto 1fr auto; border-radius: 4.4cqh; padding: 1.2cqh; background: #16130f; box-shadow: 0 3cqh 7cqh rgba(0, 0, 0, .5), inset 0 0 0 .3cqh #3a332b; animation: phone .35s var(--ease); }
@keyframes phone { from { opacity: 0; translate: 0 6cqh; } }
.phone-frame.buzz { animation: buzz .32s ease-in-out; }
@keyframes buzz { 20% { rotate: -1.4deg; } 40% { rotate: 1.2deg; } 60% { rotate: -.8deg; } 80% { rotate: .4deg; } }
.phone-frame header { position: relative; display: flex; justify-content: center; align-items: baseline; gap: .2em; padding: max(10px, 2.2cqh) 2.6em max(8px, 1.4cqh); font: 600 var(--fs)/1.3 var(--sans); color: #1d1d1d; background: #f3f3f3; border-radius: 3.4cqh 3.4cqh 0 0; border-bottom: 1px solid #dcdcdc; }
.phone-frame header b { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone-frame header .count { flex: none; font-weight: 400; color: #666; }
/* 返回箭头和右上角「…」只是样子 */
.phone-frame header::before { content: ''; position: absolute; left: 1.1em; top: 50%; width: .55em; height: .55em; border: solid #333; border-width: 0 0 .14em .14em; rotate: 45deg; translate: 0 -30%; }
.phone-frame header::after { content: ''; position: absolute; right: 1em; top: 50%; width: 1.1em; height: .25em; translate: 0 -50%; background: radial-gradient(circle, #333 .11em, transparent .13em) 0 50% / .37em 100% repeat-x; }
#phone-list { overflow: auto; display: flex; flex-direction: column; gap: max(6px, 1.2cqh); padding: max(10px, 1.8cqh) max(8px, 1.4cqh); background: #ededed; scrollbar-width: none; }
#phone-list::-webkit-scrollbar { display: none; }
.phone-frame footer { display: flex; align-items: center; gap: .5em; padding: max(6px, 1.1cqh) max(8px, 1.4cqh); background: #f6f6f6; border-top: 1px solid #dedede; border-radius: 0 0 3.4cqh 3.4cqh; font-size: var(--fs-s); }
.phone-input { flex: 1; padding: .55em .9em; border-radius: .5em; background: #fff; color: #aaa; }
.phone-plus { flex: none; width: 1.9em; height: 1.9em; border-radius: 50%; border: .13em solid #555; background: linear-gradient(#555, #555) center / 50% .13em no-repeat, linear-gradient(#555, #555) center / .13em 50% no-repeat; }
.msg { display: flex; align-items: flex-start; gap: max(6px, 1.1cqh); animation: msg .25s var(--ease); }
.msg.me { flex-direction: row-reverse; }
.msg.cont { margin-top: calc(max(6px, 1.2cqh) * -.45); }
@keyframes msg { from { opacity: 0; translate: 0 1.5cqh; } }
.chat-face.person-face { width: var(--av); border-radius: 18%; box-shadow: none; }
.chat-face.person-face.initial { font-size: calc(var(--av) * .46); }
.chat-face.spacer { flex: none; width: var(--av); }
.chat-face img.fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.msg-body { display: grid; justify-items: start; gap: .25em; min-width: 0; max-width: calc(100% - 2 * var(--av) - 2 * max(6px, 1.1cqh)); }
.msg.me .msg-body { justify-items: end; }
.msg-from { font-size: var(--fs-s); color: #888; padding-left: .2em; }
.msg .bubble { position: relative; padding: .55em .8em; border-radius: .45em; background: #fff; color: #1d1d1d; font: 400 var(--fs)/1.45 var(--sans); word-break: break-word; }
.msg.me .bubble { background: #a9e88a; }
/* 第一条带个小尖角，连发的不带 */
.msg:not(.cont) .bubble::before { content: ''; position: absolute; top: .75em; left: -.35em; border: .38em solid transparent; border-left: 0; border-right-color: #fff; }
.msg.me:not(.cont) .bubble::before { left: auto; right: -.35em; border-left: .38em solid #a9e88a; border-right: 0; }
.bubble.dots { min-width: 2.6em; color: #999; }
.bubble.dots::after { content: '\2022\2022\2022'; letter-spacing: .2em; animation: dots 1.1s ease-in-out infinite; }
@keyframes dots { 50% { opacity: .35; } }
.msg-sys { align-self: center; max-width: 86%; padding: .25em .7em; border-radius: .4em; background: rgba(0, 0, 0, .06); color: #8a8a8a; font-size: var(--fs-s); text-align: center; animation: msg .25s var(--ease); }
.msg-sys.msg-time { background: none; padding: 0; }
.msg .sticker { display: grid; place-items: center; width: max(72px, 15cqh); aspect-ratio: 1; border-radius: .45em; overflow: hidden; background: repeating-linear-gradient(45deg, #f4f4f4 0 1cqh, #e8e8e8 1cqh 2cqh); color: #888; text-align: center; padding: .4em; font-size: var(--fs-s); }
.msg .sticker img { width: 100%; height: 100%; object-fit: contain; }
.msg .photo { display: block; width: max(110px, 22cqh); aspect-ratio: 4 / 3; border-radius: .45em; overflow: hidden; background: #d9d9d9; }
.msg .photo img { width: 100%; height: 100%; object-fit: cover; }
.msg .photo.empty { display: grid; place-content: center; justify-items: center; gap: .4em; padding: .6em; color: #777; font-size: var(--fs-s); text-align: center; }
.photo .cam { position: relative; width: 2.2em; height: 1.6em; border: .14em solid #888; border-radius: .3em; }
.photo .cam::after { content: ''; position: absolute; inset: 0; margin: auto; width: .7em; height: .7em; border: .14em solid #888; border-radius: 50%; }
/* 手机开着时，「档案已更新」小字挪到左边，不压手机标题栏（2026-10-22 横屏手机审查：最多盖住手机框两成） */
body:has(#phone:not([hidden])) #cabinet-notes { right: auto; left: 2.4cqh; justify-items: start; }
/* 横屏手机（高度不到 520px）：手机框放大到几乎满高、挪到画面偏左，避开右上角按钮；字不再跟着画面缩到看不清 */
@media (max-height: 520px) {
  .phone-frame { top: 2.5%; bottom: 2.5%; right: auto; left: calc(50% - 46cqh); aspect-ratio: 10 / 16; border-radius: 22px; padding: 6px; }
  .phone-frame header { border-radius: 17px 17px 0 0; }
  .phone-frame footer { border-radius: 0 0 17px 17px; }
}

/* ---------- 纸页（卷末观察记录）：竖排，逐句淡入，最后盖章 ---------- */
#paper { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; --shade-color: #0d0a07; animation: fade .8s ease; }
@keyframes fade { from { opacity: 0; } }
#paper-sheet { position: relative; height: 84%; max-width: 92%; padding: 7cqh 8cqh 11cqh; writing-mode: vertical-rl; overflow: hidden; color: #3b2c22; border-radius: .6cqh;
  background: radial-gradient(120% 90% at 30% 20%, #f6efdc, #e8dcbf); box-shadow: 0 2cqh 8cqh rgba(0, 0, 0, .6); }
#paper-sheet p { margin: 0 .8cqh; font: 400 var(--pfs, clamp(12px, 3.2cqh, 28px))/1.9 var(--serif); letter-spacing: .3em; opacity: 0; transition: opacity 1.4s ease; }
#paper-sheet p.on { opacity: 1; }
/* `---` 分段：空出比句间宽得多的一道（2026-10-22 编剧：以前和句间一样宽，看不出分段） */
#paper-sheet p.gap { margin: 0; block-size: 2em; }
/* 小说写的是「纸的右下角，盖着一枚很小的朱印」 */
#paper-sheet .seal { position: absolute; right: 3.5cqh; bottom: 3cqh; width: 6cqh; height: 6cqh; color: #b33a2e; opacity: 0; scale: 1.3; transition: opacity .6s ease, scale .6s var(--ease); }
#paper-sheet .seal.on { opacity: .9; scale: 1; }
/* 分页时每页左下角的提示（竖排的结尾在左） */
#paper-sheet .paper-more { position: absolute; left: 3.5cqh; bottom: 3cqh; writing-mode: horizontal-tb; font: 400 max(11px, 1.8cqh)/1 var(--sans); color: rgba(59, 44, 34, .55); opacity: 0; transition: opacity .6s ease; }
#paper-sheet .paper-more.on { opacity: 1; }
/* 横屏手机：纸放大、边距和字距收紧，竖排字不用缩得太小 */
@media (max-height: 520px) {
  #paper-sheet { height: 94%; max-width: 96%; padding: 4cqh 5cqh 10.5cqh; }
  #paper-sheet .seal { right: 3cqh; bottom: 2.5cqh; width: 5.5cqh; height: 5.5cqh; }
  #paper-sheet p { letter-spacing: .12em; margin: 0 .5cqh; }
}
#paper-sheet .seal svg { width: 100%; height: 100%; display: block; }

/* ---------- 番茄 ---------- */
#tomato { position: absolute; inset: 0; z-index: 25; display: grid; place-items: center; --shade-color: rgba(0, 0, 0, .35); }
.tomato-card { display: grid; justify-items: center; gap: 1.2cqh; width: min(56%, 100cqh); padding: 4cqh 5cqh; border-radius: 2.4cqh; text-align: center; background: var(--paper); color: var(--ink); border: 1px solid var(--line-strong); box-shadow: 0 2cqh 6cqh rgba(0, 0, 0, .4); }
.theme-night .tomato-card { background: var(--night-2); color: var(--cream); border-color: var(--night-line); }
.tomato-art { width: 15cqh; height: 15cqh; }
#tomato.ringing .tomato-art { animation: ring .12s ease-in-out 8 alternate; }
@keyframes ring { from { rotate: -7deg; } to { rotate: 7deg; } }
#tomato-label { font: 600 3.6cqh/1.4 var(--serif); letter-spacing: .1em; }
#tomato-min { font-size: 2.4cqh; opacity: .7; }
#tomato-hint { margin: .6cqh 0 1cqh; font-size: 2.6cqh; line-height: 1.6; }
.tomato-actions { display: flex; gap: 1.6cqh; flex-wrap: wrap; justify-content: center; }
#tomato.ringing .tomato-actions { visibility: hidden; }

/* ---------- 小游戏（观察） ---------- */
#game { position: absolute; inset: 0; z-index: 25; }
/* 倒计时放左下角，小一号、半透明（2026-10-18 编剧：放在顶部中间会挡住第 2 章要玩家数的天花板）。
   在 #safe-ui 里，手机横屏自动避开刘海；不接点击，点哪儿都照样提前结束 */
.game-hud { position: absolute; left: 2.4cqh; bottom: 2.4cqh; display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 1.6cqh; row-gap: .3cqh; max-width: 46cqw; padding: 1.1cqh 2.4cqh 1.1cqh 2cqh; border-radius: 1.6cqh; background: rgba(20, 15, 10, .5); color: var(--cream); pointer-events: none; }
#game-count { grid-column: 1; grid-row: 1 / span 2; min-width: 2ch; text-align: center; font: 700 4.4cqh/1 var(--serif); color: var(--gold); }
#game-hint { grid-column: 2; font: 600 2.2cqh/1.35 var(--serif); letter-spacing: .08em; }
.game-hud small { grid-column: 2; font-size: 1.6cqh; opacity: .65; }

/* ---------- 本章完 / 记录 ---------- */
#end { position: absolute; inset: 0; z-index: 35; display: grid; place-items: center; --shade-color: rgba(0, 0, 0, .55); animation: fade .6s ease; }
.end-card { display: grid; justify-items: center; gap: 3cqh; padding: 5cqh 8cqh; border-radius: 2.4cqh; background: var(--paper); color: var(--ink); }
.end-card b { font: 600 5cqh/1.2 var(--serif); letter-spacing: .3em; }
.end-card div { display: flex; gap: 1.6cqh; }
#backlog { position: absolute; inset: 0; z-index: 48; display: grid; place-items: center; --shade-color: rgba(10, 8, 6, .7); }
.backlog-panel { display: grid; grid-template-rows: auto 1fr; width: 78%; height: 86%; border-radius: 2cqh; overflow: hidden; background: var(--paper); color: var(--ink); }
.theme-night .backlog-panel { background: var(--night); color: var(--cream); }
.backlog-panel header { display: flex; justify-content: space-between; align-items: center; padding: 2cqh 3cqh; border-bottom: 1px solid var(--line); font: 600 3cqh var(--serif); letter-spacing: .2em; }
.theme-night .backlog-panel header { border-color: var(--night-line); }
.backlog-panel header button { padding: .8cqh 2.4cqh; border-radius: 999px; border: 1px solid currentColor; background: transparent; font-size: 2.4cqh; }
#backlog-list { overflow: auto; padding: 2cqh 4cqh 4cqh; }
.log { display: grid; grid-template-columns: 14cqh 1fr; gap: 2cqh; padding: 1.4cqh 0; border-bottom: 1px dashed var(--line); font: 400 2.8cqh/1.7 var(--serif); white-space: pre-wrap; }
.theme-night .log { border-color: var(--night-line); }
.log b { color: var(--wine); text-align: right; }
.theme-night .log b { color: var(--gold); }
.log.narr span { grid-column: 2; }

/* ---------- 转场、提示、控制条 ---------- */
#fx { position: absolute; inset: 0; z-index: 50; pointer-events: none; opacity: 0; background: #000; transition: opacity .6s ease; }
#fx.black { opacity: 1; background: #000; }
#fx.white { opacity: 1; background: #fff; }
#fx.flash { opacity: .85; background: #fff; transition: none; }
#toasts { position: absolute; left: 50%; top: 3cqh; translate: -50% 0; z-index: 55; display: grid; gap: 1cqh; justify-items: center; pointer-events: none; }
.toast { padding: 1.2cqh 3cqh; border-radius: 999px; background: rgba(248, 243, 234, .95); color: var(--ink); font: 600 2.6cqh/1.4 var(--serif); letter-spacing: .08em; box-shadow: 0 1cqh 3cqh rgba(0, 0, 0, .3); animation: rise .35s var(--ease); transition: opacity .5s ease; }
.toast.warn { background: rgba(32, 24, 18, .9); color: var(--gold); font: 400 2.2cqh/1.4 var(--sans); }
.toast.out { opacity: 0; }
@keyframes rise { from { opacity: 0; translate: 0 -1.5cqh; } }
#hud { position: absolute; right: 2.4cqh; top: 2.4cqh; z-index: 45; display: flex; gap: 1cqh; }
#hud button { min-height: max(32px, 5cqh); padding: .9cqh 2cqh; border-radius: 999px; font-size: clamp(11px, 2.3cqh, 16px); background: rgba(20, 15, 10, .45); color: rgba(255, 250, 240, .9); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#hud button[aria-pressed="true"] { background: var(--gold-deep); color: #2b1c08; border-color: var(--gold); }
body.game-on #hud { visibility: hidden; }
/* 快进中按钮改成「快进中」三个字，宽度先留够，免得整排按钮跳一下 */
#btn-skip { min-width: calc(3em + 4cqh); }
body.ui-hidden #textbox, body.ui-hidden #hud, body.paper-on #hud { visibility: hidden; }

/* ---------- 阅读时的声音面板 ---------- */
#soundpanel { max-height: calc(100% - 6cqh - max(32px, 5cqh)); overflow: auto; position: absolute; right: 2.4cqh; top: calc(3.6cqh + max(32px, 5cqh)); z-index: 46; display: grid; gap: 1.4cqh; width: min(42%, 60cqh); padding: 2.4cqh 2.8cqh; border-radius: 1.8cqh;
  background: rgba(32, 24, 18, .92); color: var(--cream); border: 1px solid var(--night-line); box-shadow: 0 1.5cqh 4cqh rgba(0, 0, 0, .4); animation: rise .25s var(--ease); }
#soundpanel label { display: grid; grid-template-columns: 11cqh 1fr; align-items: center; gap: 1.6cqh; font-size: clamp(11px, 2.4cqh, 16px); }
#soundpanel input { accent-color: var(--gold-deep); width: 100%; }

/* ---------- 开发面板 ---------- */
#dev-open { display: none; position: fixed; right: 0; top: 40%; z-index: 69; padding: 10px 6px; writing-mode: vertical-rl; border-radius: 8px 0 0 8px; border: 1px solid #3a2f24; border-right: 0; background: #15110d; color: #d9ccb6; font-size: 12px; }
body.dev.dev-collapsed #dev { display: none !important; }
body.dev.dev-collapsed #app { right: 0; }
body.dev.dev-collapsed #dev-open { display: block; }
#dev h3 { display: flex; justify-content: space-between; align-items: center; }
#dev h3 button { padding: 2px 10px; }
#dev { position: fixed; right: 0; top: 0; bottom: 0; width: 320px; z-index: 70; overflow: auto; padding: 14px 16px 30px; background: #15110d; color: #d9ccb6; border-left: 1px solid #3a2f24; font: 12px/1.6 var(--sans); }
#dev h3 { margin: 0 0 10px; font-size: 14px; color: var(--gold); }
#dev h4 { margin: 16px 0 6px; font-size: 12px; color: var(--cream-soft); letter-spacing: .1em; }
#dev pre { margin: 0; white-space: pre-wrap; word-break: break-all; color: #b9ab95; }
#dev ul { margin: 0; padding-left: 16px; }
#dev li { color: #e7a37a; }
#dev li.ok { color: #9cc28a; }
#dev-outline { display: grid; gap: 4px; }
#dev button { text-align: left; padding: 5px 8px; border-radius: 6px; border: 1px solid #3a2f24; background: #201912; color: #d9ccb6; font-size: 12px; }
#dev button:hover { border-color: var(--gold-deep); }
.dev-actions { display: flex; gap: 6px; }
.dev-tip { margin-top: 18px; color: #8a7c66; }

@media (prefers-reduced-motion: reduce) {
  #more, #tomato.ringing .tomato-art, #textbox, #titlecard *, .phone-frame.buzz { animation: none; }
  .sprite, #cg, #fx, #paper-sheet p { transition-duration: .01s; }
}

/* Backdrops bleed outside safe-ui; panel contents retain their safe-area geometry. */
:is(#phone, #note, #paper, #tomato, #end, #backlog)::before {
  content: ""; position: absolute; z-index: -1;
  top: calc(0px - var(--shade-t, 0px)); right: calc(0px - var(--shade-r, 0px));
  bottom: calc(0px - var(--shade-b, 0px)); left: calc(0px - var(--shade-l, 0px));
  background: var(--shade-color);
}

/* ---------- 已解锁 CG 画廊 ---------- */
#gallery { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; height: 100dvh; max-height: none; margin: 0; border: 0;
  padding: max(18px, var(--novel-safe-t)) max(24px, var(--novel-safe-r)) max(18px, var(--novel-safe-b)) max(24px, var(--novel-safe-l));
  background: radial-gradient(120% 90% at 50% 0%, #3a2a1d, #160f0a 70%); color: var(--cream); overflow: hidden; }
#gallery[open] { display: flex; flex-direction: column; gap: 12px; }
#gallery::backdrop { background: #160f0a; }
body.gallery-open #rotate { display: none; }
.gallery-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex: none; }
.gallery-head small { font-size: 10px; letter-spacing: .2em; color: var(--gold); }
.gallery-head h2 { margin: 3px 0; font: 600 24px/1.3 var(--serif); letter-spacing: .12em; }
#gallery-count, #gallery-hint { margin: 0; color: var(--cream-soft); font-size: 12px; }
.gallery-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.gallery-actions button, #gallery-view button { min-height: 40px; padding: 8px 14px; border: 1px solid var(--night-line); border-radius: 999px; background: var(--night-2); color: var(--cream); font-size: 13px; }
#gallery button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
#gallery-grid { flex: 1; display: grid; grid-auto-rows: max-content; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); align-content: start; gap: 16px; overflow: auto; min-height: 0; padding: 5px; touch-action: pan-y; overscroll-behavior: contain; }
.gallery-card { display: block; min-width: 0; padding: 0; text-align: left; overflow: hidden; border: 1px solid var(--night-line); border-radius: 10px; background: var(--night-2); }
.gallery-card img, .gallery-locked { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.gallery-card b { display: block; overflow-wrap: anywhere; padding: 12px; font: 400 14px/1.4 var(--serif); }
.gallery-card:not(:disabled):hover { border-color: var(--gold); }
.gallery-locked { display: grid; place-items: center; background: linear-gradient(135deg, #31271e, #201812); color: var(--cream-soft); font: 400 17px var(--serif); letter-spacing: .2em; }
.gallery-card:disabled { opacity: .65; }
#gallery-view { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
#gallery-image { flex: 1; min-height: 0; display: grid; place-items: center; position: relative; }
#gallery-image img { position: absolute; width: 100%; height: 100%; object-fit: contain; }
#gallery-view footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex: none; }
#gallery-caption { text-align: center; margin: 0; font: 400 13px/1.4 var(--serif); }
#gallery-view button:disabled { opacity: .35; }
@media (max-width: 500px) { #gallery-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; } .gallery-card b { font-size: 12px; padding: 9px; } }
@media (max-height: 450px) and (orientation: landscape) { .gallery-head h2 { font-size: 19px; } .gallery-head small { display: none; } #gallery[open] { gap: 8px; } }

/* ---------- 档案柜五个栏目（2026-10-18）：剧情、小说、人物、档案、画廊 ---------- */
#cabinet-tabs { max-width: 980px; margin: 14px auto 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
#cabinet-tabs::-webkit-scrollbar { display: none; }
#cabinet-tabs button { position: relative; flex: none; padding: 8px 18px; border-radius: 999px; border: 1px solid var(--night-line); background: rgba(43, 33, 24, .6); color: var(--cream-soft); font: 600 15px/1.2 var(--serif); letter-spacing: .14em; }
#cabinet-tabs button[aria-selected="true"] { background: linear-gradient(180deg, #e7cf9f, #d9bb84); color: #3b2a1a; border-color: #c9a978; }
#cabinet-tabs .dot { position: absolute; top: 5px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: #d8543f; box-shadow: 0 0 0 2px rgba(32, 24, 18, .9); }
#cabinet-tabs .dot[hidden] { display: none; }
#tab-story, #tab-novel, #tab-people, #tab-files, #tab-mv { max-width: 980px; margin: 0 auto; }
#mv-list { display: grid; gap: 12px; margin-top: 34px; }
.mv-card { position: relative; display: grid; gap: 6px; max-width: 560px; padding: 22px 18px 16px; border: 1px solid #c9b48e; border-radius: 4px 12px 12px 12px; background: linear-gradient(180deg, #efe2c4, #e2cfa6); color: #3b2a1a; text-decoration: none; box-shadow: 0 10px 26px rgba(0, 0, 0, .35); transition: transform .18s var(--ease); }
.mv-card::before { content: ""; position: absolute; left: -1px; top: -12px; width: 40%; height: 13px; border: 1px solid #c9b48e; border-bottom: 0; border-radius: 8px 8px 0 0; background: #efe2c4; }
.mv-card:hover { transform: translateY(-3px); }
.mv-card .ch-title { font: 600 22px/1.35 var(--serif); letter-spacing: .12em; }
.mv-card .mv-tagline { margin: 0 0 6px; font-size: 14px; line-height: 1.7; }
.mv-card small { font-size: 12px; line-height: 1.6; color: #6a4c2b; overflow-wrap: anywhere; }
.mv-card .ch-status { margin-top: 8px; font-size: 13px; color: var(--wine-deep); }
.tab-hint { margin: 20px 4px 14px; color: var(--cream-soft); font-size: 13px; line-height: 1.7; }
/* 小说版：和剧情一样的牛皮纸文件夹，标签颜色浅一点 */
.novel-card { position: relative; display: grid; gap: 6px; align-content: start; text-align: left; min-height: 110px; padding: 22px 16px 14px; border: 1px solid #c9b48e; border-radius: 4px 12px 12px 12px;
  background: linear-gradient(180deg, #efe2c4, #e2cfa6); color: #3b2a1a; box-shadow: 0 10px 26px rgba(0, 0, 0, .35); transition: transform .18s var(--ease); }
.novel-card::before { content: ""; position: absolute; left: -1px; top: -12px; width: 40%; height: 13px; border: 1px solid #c9b48e; border-bottom: 0; border-radius: 8px 8px 0 0; background: #efe2c4; }
.novel-card:not(:disabled):hover { transform: translateY(-3px); }
.novel-card .ch-no { font-size: 12px; letter-spacing: .14em; color: #7a5a35; }
.novel-card .ch-title { font: 600 19px/1.35 var(--serif); letter-spacing: .06em; }
.novel-card .ch-status { margin-top: auto; font-size: 13px; color: var(--wine-deep); }
.novel-card.done .ch-status { color: #5d6b3c; }
.novel-card.locked { filter: grayscale(.75) brightness(.68); }

/* 小说阅读页：纸色竖向长页，字号可调，记住读到哪里 */
#reader { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
  background: var(--paper); color: var(--ink); }
#reader::backdrop { background: #0b0a08; }
.reader-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
  background: rgba(248, 243, 234, .94); border-bottom: 1px solid var(--line); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.reader-bar b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font: 600 15px/1.3 var(--serif); letter-spacing: .1em; }
.reader-bar button { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); font-size: 13px; }
.reader-font { display: flex; gap: 6px; }
#reader-text { max-width: 36em; margin: 0 auto; padding: 28px max(20px, env(safe-area-inset-right)) max(60px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  font-family: var(--serif); line-height: 1.95; letter-spacing: .02em; }
#reader-text .reader-vol { display: block; text-align: center; color: var(--ink-soft); font-size: .72em; letter-spacing: .3em; }
#reader-text h2 { margin: .4em 0 1.6em; text-align: center; font-size: 1.35em; letter-spacing: .16em; color: var(--wine-deep); }
#reader-text p { margin: 0 0 1em; text-indent: 2em; }
#reader-text hr { width: 3em; margin: 2em auto; border: 0; border-top: 1px solid var(--line-strong); }
#reader-text blockquote { margin: 1.2em 1em; padding: .8em 1.1em; background: var(--card); border-left: 3px solid var(--line-strong); font-family: var(--hand); }
#reader-text blockquote p { text-indent: 0; margin: 0 0 .3em; }
#reader-text .reader-end { margin-top: 3em; text-align: center; text-indent: 0; color: var(--ink-soft); letter-spacing: .4em; }

/* 人物档案：一人一张索引卡 */
#people-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.person { padding: 16px 16px 14px; border-radius: 6px; color: var(--ink); box-shadow: 0 10px 24px rgba(0, 0, 0, .35); background-color: #fbf6ec;
  background-image: linear-gradient(180deg, rgba(255, 253, 248, .9), rgba(246, 238, 223, .9)), repeating-linear-gradient(180deg, transparent 0 27px, rgba(138, 116, 98, .16) 27px 28px); }
.person-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.person-head h3 { margin: 0; font: 600 20px/1.2 var(--serif); letter-spacing: .1em; }
.person-face { position: relative; flex: none; width: 64px; aspect-ratio: 1; overflow: hidden; border-radius: 6px; background: #e9dcc6; box-shadow: inset 0 0 0 1px var(--line-strong); }
.person-face img { position: absolute; max-width: none; height: auto; }
.person-face.initial { display: grid; place-items: center; background: var(--c); color: #fffdf8; font: 600 26px/1 var(--serif); }
.person-fields { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 14px; }
.person-fields dt { color: var(--ink-soft); letter-spacing: .1em; }
.person-fields dd { margin: 0; }
.person-fields dd.unknown { color: var(--ink-soft); }
.person h4 { margin: 12px 0 4px; font: 600 13px/1.4 var(--serif); letter-spacing: .3em; color: var(--wine-deep); }
.person-notes { margin: 0; padding-left: 1.1em; font-family: var(--hand); font-size: 15px; line-height: 1.75; }

/* 艾兰档案：文件夹 + 打字的收容记录，黑条和印章都是代码画的 */
#files-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.folder { position: relative; display: grid; gap: 8px; align-content: start; min-height: 130px; padding: 24px 16px 14px; text-align: left; border: 1px solid #8f7a55; border-radius: 4px 12px 12px 12px;
  background: linear-gradient(180deg, #b9a074, #a68b5e); color: #2a1d10; box-shadow: 0 10px 26px rgba(0, 0, 0, .4); overflow: hidden; }
.folder::before { content: ""; position: absolute; right: 14px; top: -1px; width: 38%; height: 12px; border: 1px solid #8f7a55; border-top: 0; border-radius: 0 0 8px 8px; background: #c7af84; }
.folder-no { font: 600 13px/1.3 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .12em; color: #3a2a17; }
.folder-title { font: 600 18px/1.35 var(--serif); letter-spacing: .08em; }
.folder .stamp { position: absolute; right: 12px; bottom: 10px; font-size: 22px; }
.redact { display: inline-block; height: 1.05em; vertical-align: -.17em; border-radius: 1px; background: #16110c; background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0 2px, transparent 2px 5px); }
.redact.block { display: block; height: 1.1em; margin: .25em 0; }
.stamp { display: inline-grid; place-items: center; width: 2.1em; height: 2.1em; border: 3px double #b2322a; border-radius: 6px; color: #b2322a; font: 700 30px/1 var(--serif); transform: rotate(-9deg); opacity: .86; }
.stamp b { font: inherit; }
#dossier { width: min(720px, calc(100% - 24px)); max-height: calc(100% - 24px); padding: 0; border: 0; border-radius: 4px; background: transparent; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
#dossier::backdrop { background: rgba(8, 6, 4, .78); }
.dossier-sheet { padding: 22px 24px 28px; background: #f4efe4; color: #2b2520; font-family: ui-monospace, "SF Mono", Menlo, "PingFang SC", monospace; box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
  background-image: linear-gradient(180deg, rgba(0, 0, 0, .03), transparent 30%); }
.dossier-sheet header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; border-bottom: 2px solid #2b2520; }
.dossier-sheet header small { letter-spacing: .3em; font-size: 12px; }
.dossier-sheet header button { padding: 5px 12px; border: 1px solid #2b2520; border-radius: 3px; background: transparent; color: #2b2520; font: inherit; font-size: 12px; }
#dossier-title { margin: 16px 0 14px; font: 700 22px/1.35 var(--serif); letter-spacing: .1em; }
#dossier-fields { display: grid; grid-template-columns: 6.5em 1fr; gap: 10px 14px; margin: 0; font-size: 14px; line-height: 1.75; }
#dossier-fields dt { font-weight: 700; letter-spacing: .1em; }
#dossier-fields dd { margin: 0; min-width: 0; }
#dossier-fields ul { margin: 0; padding-left: 1.2em; }
#dossier-fields .stamp { font-size: 26px; margin: 2px 0 4px 4px; }

/* 【档案】弹出的小字：右上角，阅读按钮下面，不挡文字、不接点击 */
#cabinet-notes { position: absolute; right: 2.4cqh; top: calc(2.4cqh + max(32px, 5cqh) + 1.4cqh); z-index: 55; display: grid; gap: .8cqh; justify-items: end; pointer-events: none; }
.cabinet-note { padding: .8cqh 2cqh; border-radius: 999px; background: rgba(20, 15, 10, .66); color: var(--cream); font: 400 max(12px, 2.1cqh)/1.4 var(--sans); letter-spacing: .04em; animation: rise .35s var(--ease); transition: opacity .5s ease; }
.cabinet-note.out { opacity: 0; }
@media (max-width: 560px) { #people-list, #files-list { grid-template-columns: 1fr; } #dossier-fields { grid-template-columns: 5em 1fr; } }

.person-view{margin-top:12px;padding:8px 18px;border:1px solid #b8a58b;border-radius:8px;background:#faf5eb;color:#554635;cursor:pointer;font:inherit}

.collection-notice{position:fixed;bottom:calc(24px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);max-width:90vw;padding:10px 20px;border-radius:24px;background:#f8f3ea;color:#554635;box-shadow:0 3px 18px #0004;font:600 14px/1.5 sans-serif;z-index:9999;pointer-events:none}

/* 测试快速模式（?test=1，只在本机）：过渡和动画一律 0 */
body.test *, body.test *::before, body.test *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation-duration: 0s !important; animation-delay: 0s !important; }

/* ---------- 立绘动作（2026-10-23 方案 A：body.motion-on，减少动态效果时没有这个 class） ---------- */
.sprite { transform-origin: 50% 100%; }
/* 立绘截在小腿：一跳、一凑近底边就露出来，底部 8% 渐隐（主美建议） */
body.motion-on .sprite > img { -webkit-mask-image: linear-gradient(to top, transparent 0, #000 8%); mask-image: linear-gradient(to top, transparent 0, #000 8%); }
/* 待机呼吸（阅读设置里打开才有，body.breathe-on，默认关）：竖直方向 0.6%，4.2 秒一次，三个站位错开；流畅模式不呼吸 */
body.motion-on.breathe-on:not(.motion-lite) .sprite > img { transform-origin: 50% 100%; animation: breathe 4.2s ease-in-out infinite; }
body.motion-on.breathe-on:not(.motion-lite) .sprite > img.swap { animation: swap .12s linear, breathe 4.2s ease-in-out .12s infinite; }
body.motion-on.breathe-on:not(.motion-lite) .sprite[data-pos="left"] > img { animation-delay: -1.4s; }
body.motion-on.breathe-on:not(.motion-lite) .sprite[data-pos="right"] > img { animation-delay: -2.8s; }
@keyframes breathe { 50% { transform: scaleY(1.006); } }
/* 漫符：代码画的 SVG，挂在头顶旁边，跟着立绘动 */
.emote { position: absolute; width: 10%; aspect-ratio: 1; translate: -50% -100%; pointer-events: none; z-index: 2; transform-origin: 50% 100%; }
.emote svg { width: 100%; height: 100%; overflow: visible; display: block; }
.emote img { width: 100%; height: 100%; display: block; }
.emote-惊 { width: 14%; animation: emote-pop 1.2s cubic-bezier(.2, 1.6, .4, 1) forwards; }
.emote-汗 { width: 6%; animation: emote-sweat 1.6s ease-in forwards; }
.emote-怒, .emote-问号, .emote-感叹, .emote-心, .emote-省略号 { animation: emote-pop 1.6s cubic-bezier(.2, 1.6, .4, 1) forwards; }
.emote-怒 { animation-name: emote-pulse; }
.emote-音符 { animation: emote-float 1.6s ease-out forwards; }
.emote-亮晶晶 { animation: emote-twinkle 1.6s ease-in-out forwards; }
.emote-阴沉 { width: 14%; animation: emote-gloom 2.4s ease forwards; }
@keyframes emote-pop { 0% { scale: 0; } 18% { scale: 1.15; } 28%, 82% { scale: 1; opacity: 1; } 100% { scale: 1; opacity: 0; } }
@keyframes emote-pulse { 0% { scale: 0; } 15% { scale: 1.2; } 25% { scale: .95; } 40% { scale: 1.12; } 52%, 85% { scale: 1; opacity: 1; } 100% { opacity: 0; } }
@keyframes emote-sweat { 0% { opacity: 0; translate: -50% -120%; } 15% { opacity: 1; translate: -50% -100%; } 80% { opacity: 1; translate: -50% -40%; } 100% { opacity: 0; translate: -50% -20%; } }
@keyframes emote-float { 0% { opacity: 0; translate: -50% -80%; } 20% { opacity: 1; } 100% { opacity: 0; translate: -30% -190%; } }
@keyframes emote-twinkle { 0% { scale: 0; opacity: 0; } 20% { scale: 1.1; opacity: 1; } 40% { scale: .85; } 60% { scale: 1.05; } 85% { opacity: 1; } 100% { scale: .9; opacity: 0; } }
@keyframes emote-gloom { 0% { opacity: 0; translate: -50% -140%; } 25%, 80% { opacity: 1; translate: -50% -100%; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .emote { animation: none !important; } }
#dev-motion select { width: 100%; margin: 4px 0; padding: 4px; background: #201912; color: #d9ccb6; border: 1px solid #3a2f24; border-radius: 6px; }
.dev-motion-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 4px 0; }
.dev-motion-row b { width: 100%; font-size: 11px; color: var(--cream-soft); font-weight: 400; }

/* Unviewed changes / collectible rewards: visible, non-blinking, upper-left. */
.collection-item { position: relative; }
.collection-item > .collection-dot { position: absolute; top: 8px; left: 8px; z-index: 2; width: 9px; height: 9px; border-radius: 50%; background: #e54b4b; box-shadow: 0 0 0 2px #fff6e7; pointer-events: none; }
.collection-item > .collection-dot[hidden] { display: none; }