/* ════════════════════════════════════════════════════════════════
   《第 41 天》界面语言 v3.2 —— 「玄案 · 漆器描金」（UI设计-v0.3 预览实施）
   主屏 = 深夜案头的一案简帛文书；视觉转向光荣《三国志V》的
   漆器体系：绛檀为面、乌木为案、描金为框、朱砂为印。
   书体分层：刊刻体=官方露布与碑，手写体=私记与批注，篆体=印。
   浅色「素帛」模式收在阅读设置（body[data-paper='silk']）。
   ════════════════════════════════════════════════════════════════ */

/* ——— 1. 设计令牌 —— 色板「漆器描金 · 黛面」———
   光荣式的配色纪律：棕黄只做框与钮，主色面是黛青（蓝绿灰），
   暖色由描金、米黄木钮、绿缎指令钮、朱砂印来点缀 */
:root {
  /* 玄案 · 日中（黛青漆面）：默认即暗域 */
  --paper: #232a2f;      /* 面板：黛 */
  --paper-hi: #2b343b;   /* 高一档 */
  --paper-lo: #1b2126;   /* 低一档 */
  --desk: #11161a;       /* 玄案（纸下的世界） */
  --ink: #e4d6ae;        /* 米金正文（暖字浮在冷黛上 = 烛火感） */
  --ink-2: #b2a684;
  --ink-3: #7e7a64;
  --rule: #3c4750;        /* 界行：黛灰 */
  --rule-strong: #8a6a38; /* 描金线（框线保留金色） */
  --accent: #c9442a;      /* 朱砂：印泥/血/烽燧 */
  --accent-2: #e06044;
  --accent-wash: rgba(201, 68, 42, .13);
  --brass: #d4af37;       /* 金泥：标题与描金框 */
  --gold-hi: rgba(212, 175, 55, .48);   /* 框的外金线 */
  --gold-dim: rgba(212, 175, 55, .2);   /* 框的内金线 */
  --moss: #8fa57e;
  --cold: #6a8a9a;        /* 石青：水/雨/冬 */
  --candle: #f0bd70;
  --shadow: rgba(0, 0, 0, .55);

  /* 光荣《三国志V》器物色：石青蓝信息面板 / 米黄木钮 / 深绿指令钮 */
  --lapis: #1d3560;       /* 石青蓝：选单与信息面板 */
  --lapis-hi: #274476;
  --lapis-lo: #152544;
  --lapis-ink: #e8e2ce;   /* 蓝面上的米白 */
  --lapis-dim: #9aa8c8;   /* 蓝面上的次级字 */
  --tan: #d8c096;         /* 米黄木钮面 */
  --tan-hi: #e8d2a8;
  --tan-lo: #b89a66;
  --tan-ink: #2e1d0e;     /* 木钮上的深色字 */
  --jade: #2f5238;        /* 深绿指令钮（军事/人事/内政） */
  --jade-hi: #3e6a49;
  --wood: #3a2812;        /* 木框 */
  --signal: #c07030;      /* 橙红选中态（光荣的「结束」） */

  /* 书体层级（全部自托管子集化；隶书暂用系统回退链） */
  --font-serif: 'Noto Serif SC', 'Songti SC', 'Source Han Serif SC', 'Noto Serif CJK SC', 'SimSun', Georgia, serif;
  --font-kai: 'LXGW WenKai', 'Kaiti SC', 'STKaiti', 'KaiTi', 'Noto Serif SC', serif;
  --font-carved: 'HuiwenMincho', 'Songti SC', 'STSong', 'SimSun', 'Noto Serif SC', serif;  /* 铅字刊刻体：露布/公文 */
  --font-stele: 'Qiji', 'HuiwenMincho', 'Songti SC', serif;                                 /* 刻本碑体：碑拓/正史 */
  --font-li: 'STLiti', 'LiSu', 'SimLi', 'FangSong', 'STFangsong', var(--font-carved);  /* 隶书：标题/匾额/按钮（系统回退链） */
  --font-seal: 'ShuowenJiezi', 'HuiwenMincho', 'Songti SC', serif;                          /* 说文篆体：印与封泥 */
  --font-mono: 'SF Mono', 'Menlo', 'Consolas', monospace;

  /* 质地 */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='0.05'/></svg>");
  --stone: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='0.16' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='260' height='260' filter='url(%23s)' opacity='0.14'/></svg>");
  /* 漆面反光：面板顶缘的一线暖光 */
  --sheen: linear-gradient(180deg, rgba(255, 214, 140, .05), transparent 90px);
}

/* ——— 昼夜四相（UIP-3 屏幕随日子呼吸）：令牌整体切换 ———
   四相在黛青家族里明暗变化；暖意由烛光、描金与木钮提供 */
body[data-phase='dawn'] {  /* 平旦 · 蟹壳青 */
  --paper: #262d33; --paper-hi: #2f373e; --paper-lo: #1e2429;
  --desk: #13181c; --rule: #414c55; --rule-strong: #7d6534;
  --ink: #d8d2b4; --ink-2: #a8a488; --ink-3: #75705a;
  --accent: #bc3f28; --accent-2: #d65a40;
}
body[data-phase='dusk'] {  /* 人定 · 暮色黛紫 */
  --paper: #262229; --paper-hi: #2e2933; --paper-lo: #1d1a21;
  --desk: #131016; --rule: #453f4e; --rule-strong: #84643a;
  --ink: #e0cfA6; --ink-2: #ab9c76; --ink-3: #7a7158;
  --accent: #d34e30; --accent-2: #e86a48; --accent-wash: rgba(211, 78, 48, .14);
  --shadow: rgba(0, 0, 0, .6);
}
body[data-phase='night'] {  /* 夜半 · 玄青近黑 */
  --paper: #161c21; --paper-hi: #1d242a; --paper-lo: #10151a;
  --desk: #0a0e12;
  --ink: #d8caa2; --ink-2: #a4936e; --ink-3: #6d6852;
  --rule: #303a43; --rule-strong: #6f5228;
  --accent: #d85a3c; --accent-2: #ea7a58; --accent-wash: rgba(216, 90, 60, .13);
  --brass: #dcb84a; --moss: #8fa57e; --cold: #7fa0b5;
  --shadow: rgba(0, 0, 0, .65);
}

/* ——— 素帛模式（阅读设置的浅色回退：绢本设色 + 松烟墨） ——— */
body[data-paper='silk'] {
  color-scheme: light;
  --paper: #ead9ae; --paper-hi: #f2e4bd; --paper-lo: #dcc793;
  --desk: #7a6748;
  --ink: #2e1d0e; --ink-2: #5a4226; --ink-3: #7d6540;
  --rule: #b89a5e; --rule-strong: #8f6d34;
  --accent: #a8281a; --accent-2: #c03a24; --accent-wash: rgba(168, 40, 26, .08);
  --brass: #8a6a1e; --gold-hi: rgba(138, 106, 30, .5); --gold-dim: rgba(138, 106, 30, .22);
  --moss: #5a6c4e; --cold: #64808f;
  --shadow: rgba(58, 40, 16, .22);
}
body[data-paper='silk'] .doc.iron, body[data-paper='silk'] .doc.annal-canon,
body[data-paper='silk'] .obituary {
  /* 拓片在素帛上依然是黑底白文——碑不随天亮 */
}

/* ——— 2. 基底 ——— */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body { min-height: 100%; }
body {
  font-family: var(--font-serif);
  background: var(--desk);
  color: var(--ink);
  color-scheme: dark;
  line-height: 1.85;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .9s ease, color .9s ease;
  padding-bottom: env(safe-area-inset-bottom);
}
/* 对局页 = 固定单屏外框（一屏之城，内容各自内部滚动；landing 仍是封面文档） */
body:has(#app) { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
/* 桌面的暗角：纸压在世界上的重量 */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 120% 90% at 50% 8%, transparent 55%, rgba(0, 0, 0, .22)),
    var(--grain);
}
::selection { background: var(--accent); color: #f5efdf; }
[hidden] { display: none !important; }

a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--rule); }
a:hover { border-bottom-color: var(--accent); }

#app {
  max-width: 1180px; width: 100%; margin: 0 auto;
  padding: 0 20px; position: relative; z-index: 1;
  flex: 1; min-height: 0; display: flex; flex-direction: column;
}
.view { flex: 1; min-height: 0; }
#view-play { display: flex; flex-direction: column; overflow: hidden; }
#view-archive, #view-admin { display: block; overflow-y: auto; padding: 6px 0 40px; }
/* 档案馆/管理的版心：面板自身留白，文字不贴描金框 */
#view-archive .panel.paper, #view-admin .panel.paper { padding: 28px 36px 32px; }
/* 静默重绘：签名未变时不重播入场动画（状态补丁高频到达） */
[data-quiet='1'] > * { animation: none !important; }

/* 严冬：屏幕边缘结霜（UIP-7 动效挣到的位置） */
body[data-winter='1'] #frost {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 55;
  box-shadow: inset 0 0 90px rgba(170, 205, 235, .34), inset 0 0 220px rgba(150, 190, 230, .18);
  animation: frostIn 2.4s ease both;
}
@keyframes frostIn { from { opacity: 0; } to { opacity: 1; } }

/* 飘雪：两层视差，纯 CSS */
#fx { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 54; }
.snow { position: absolute; inset: -20% 0 0 0; opacity: 0; transition: opacity 3s; }
body[data-winter='1'] .snow { opacity: 1; }
.snow::before, .snow::after {
  content: ''; position: absolute; top: -10vh; left: 0; width: 5px; height: 5px; border-radius: 50%;
  background: transparent;
}
.snow::before {
  box-shadow: 8vw 12vh rgba(235,242,250,.7), 22vw 64vh rgba(235,242,250,.5), 36vw 30vh rgba(235,242,250,.65),
    48vw 78vh rgba(235,242,250,.45), 60vw 16vh rgba(235,242,250,.7), 72vw 52vh rgba(235,242,250,.55),
    84vw 84vh rgba(235,242,250,.6), 94vw 26vh rgba(235,242,250,.7), 15vw 90vh rgba(235,242,250,.4),
    30vw 6vh rgba(235,242,250,.5), 55vw 44vh rgba(235,242,250,.65), 68vw 92vh rgba(235,242,250,.45),
    80vw 8vh rgba(235,242,250,.55), 4vw 48vh rgba(235,242,250,.5), 42vw 68vh rgba(235,242,250,.4),
    90vw 60vh rgba(235,242,250,.65), 26vw 40vh rgba(235,242,250,.5), 64vw 34vh rgba(235,242,250,.45);
  animation: snowFall 13s linear infinite;
}
.snow::after {
  box-shadow: 12vw 34vh rgba(235,242,250,.4), 28vw 76vh rgba(235,242,250,.5), 44vw 20vh rgba(235,242,250,.4),
    58vw 60vh rgba(235,242,250,.5), 76vw 40vh rgba(235,242,250,.4), 88vw 72vh rgba(235,242,250,.5),
    6vw 84vh rgba(235,242,250,.35), 20vw 10vh rgba(235,242,250,.45), 50vw 88vh rgba(235,242,250,.35),
    66vw 4vh rgba(235,242,250,.45), 82vw 18vh rgba(235,242,250,.4), 96vw 44vh rgba(235,242,250,.45),
    35vw 54vh rgba(235,242,250,.35), 70vw 80vh rgba(235,242,250,.4), 2vw 22vh rgba(235,242,250,.35);
  animation: snowFall 19s linear infinite; animation-delay: -6s;
}
@keyframes snowFall { from { transform: translateY(-10vh); } to { transform: translateY(112vh); } }

/* 阶段切换光带（翻页的天光） */
#veil {
  position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: 0;
  background: linear-gradient(100deg, transparent 42%, rgba(255, 240, 205, .2) 50%, transparent 58%);
  background-size: 260% 100%;
}
#veil.sweep { animation: veilSweep 1s ease both; }
@keyframes veilSweep {
  0% { opacity: 0; background-position: 160% 0; }
  18% { opacity: 1; }
  100% { opacity: 0; background-position: -60% 0; }
}

/* ——— 更筹（S4）：页缘五枝更签，城的心跳 ——— */
#watch {
  position: fixed; right: 15px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 13px; z-index: 46;
  opacity: 0; pointer-events: none; transition: opacity .9s;
}
#watch.on { opacity: 1; }
#watch i {  /* 未燃的更签：暗竹 */
  width: 7px; height: 44px; position: relative; border-radius: 2px;
  background: linear-gradient(to top, #332c20, #241f16);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .45);
  opacity: .45; transition: opacity .9s, background-color .9s;
}
#watch i.lit { opacity: 1; background: linear-gradient(to top, #4a3c26, #5d4a2c); }
#watch i.lit::after {  /* 签头更火 */
  content: ''; position: absolute; top: -7px; left: 50%; width: 6px; height: 10px;
  transform: translateX(-50%);
  background: radial-gradient(circle at 50% 78%, #f8dfa8, #e08a3c 70%, transparent 76%);
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  animation: flicker .8s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 5px rgba(232, 168, 76, .85));
}
/* 交割前兆（D41-44）：鼓点先乱——火苗不规则地抖 */
#watch.falter i.lit::after { animation: flicker .3s ease-in-out infinite alternate, falterJit 1.9s steps(3) infinite; }
@keyframes falterJit { 0%, 100% { opacity: .95; } 41% { opacity: .25; } 58% { opacity: .7; } 77% { opacity: .4; } }
/* 交割夜（D45 夜半）：一座座熄灭——UI 能做的最响的事，是把声音都拿走 */
#watch.extinguish i.lit::after { animation: watchOut 1.6s ease-in forwards; }
#watch.extinguish i.lit:nth-of-type(1)::after { animation-delay: .3s; }
#watch.extinguish i.lit:nth-of-type(2)::after { animation-delay: 1.6s; }
#watch.extinguish i.lit:nth-of-type(3)::after { animation-delay: 2.9s; }
@keyframes watchOut {
  0% { opacity: 1; transform: translateX(-50%) scale(1); }
  55% { opacity: .8; transform: translateX(-50%) scale(.82); }
  100% { opacity: 0; transform: translateX(-50%) scale(.3) translateY(3px); }
}
#watch.extinguish i { transition-delay: 3.4s; }

/* ——— 交割夜专场（S5）：烛灭、无天气角标、无动效 ——— */
body[data-day='45'][data-phase='night'] #flow::after { opacity: 0; }
body[data-day='45'][data-phase='night'] #clock .clock-ic { display: none; }
body[data-day='45'][data-phase='night'] #fx, body[data-day='45'][data-phase='night'] #frost { display: none; }

/* ——— 3. 报头：一行瘦刊头（书名 · 时日 · 菜单） ——— */
#topbar {
  position: sticky; top: 0; z-index: 40; flex: none;
  background: var(--paper);
  background-image: var(--sheen), var(--grain);
  padding: 12px 10px 10px;
  transition: background-color .9s ease, color .9s ease;
}
#topbar::after {  /* 报头下的一道描金界行 */
  content: ''; display: block; margin-top: 8px;
  border-top: 1px solid var(--rule-strong);
  opacity: .9;
}
.mast { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.mast-left { display: flex; align-items: center; gap: 12px; }
.mast-kicker {  /* 绿缎带小旗：光荣的标题条 */
  font-size: 10px; letter-spacing: .3em; text-indent: .15em; color: #f0e2b2;
  background: linear-gradient(180deg, var(--jade-hi), var(--jade));
  border: 1px solid var(--wood); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15);
  padding: 3px 10px;
}
.brand {
  font-family: var(--font-li);
  color: var(--brass); text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
  font-size: 20px; letter-spacing: .34em; font-weight: 700; line-height: 1.25;
}
.brand em { font-style: normal; color: var(--accent); }
.clock { font-size: 12.5px; letter-spacing: .12em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.mast-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.badge {  /* 方形小牌，不用胶囊 */
  font-size: 11px; letter-spacing: .14em; color: var(--ink-3);
  border: 1px solid var(--rule); border-radius: 2px; padding: 3px 12px;
  max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: background-color .9s, border-color .9s, color .9s;
}
.badge.llm { color: #a9c0ea; border-color: var(--lapis-hi); }
.menu-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-family: var(--font-li); font-size: 13px; letter-spacing: .22em; text-indent: .1em;
  border: 2px solid transparent;
  background:
    linear-gradient(180deg, var(--tan-hi), var(--tan-lo)) padding-box,
    linear-gradient(180deg, #4a3418, #241608) border-box;
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
  color: var(--tan-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32);
  filter: drop-shadow(1px 2px 0 var(--shadow));
  padding: 5px 15px; cursor: pointer;
  transition: filter .18s;
}
.menu-btn:hover { filter: drop-shadow(1px 2px 0 var(--shadow)) brightness(1.08); }
.menu-btn .icon { width: 14px; height: 14px; }

/* ——— 4. 漆器面板与通用元件 ——— */
.paper {
  background: var(--paper);
  background-image: var(--sheen), var(--grain);
  border: 2px solid #241608;   /* 木色外框：棕黄只做框 */
  /* 描金双框：外金线 + 漆面隔带 + 内金线（光荣漆器盒的工艺） */
  box-shadow:
    inset 0 0 0 1px var(--gold-hi),
    inset 0 0 0 5px var(--paper),
    inset 0 0 0 6px var(--gold-dim),
    3px 5px 0 var(--shadow);
  transition: background-color .9s ease, border-color .9s ease, color .9s ease, box-shadow .9s ease;
}
.panel { margin: 30px 0; }
h1 { font-family: var(--font-li); color: var(--brass); font-size: 27px; letter-spacing: .3em; margin-bottom: 14px; font-weight: 700; text-shadow: 0 1px 0 rgba(0, 0, 0, .5); }
h2 { font-family: var(--font-li); color: var(--brass); font-size: 16px; letter-spacing: .24em; margin: 22px 0 10px; font-weight: 700; }
.kicker { font-size: 11px; letter-spacing: .4em; color: var(--accent); }
.lede { color: var(--ink-2); }
.hint { font-size: 13px; color: var(--ink-3); line-height: 1.7; }

/* 光荣式匾钮：切角 + 木框斜面（透明边框下垫木色渐变，切角后框随形） */
button.primary {  /* 深绿指令钮：光荣「軍事/人事/内政」 */
  font: inherit; font-family: var(--font-li); font-size: 15px;
  border: 2px solid transparent;
  background:
    linear-gradient(180deg, var(--jade-hi), var(--jade)) padding-box,
    linear-gradient(180deg, #5a3f1e, #241608) border-box;
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px);
  color: #f0e2b2;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(230, 210, 150, .32);
  filter: drop-shadow(2px 3px 0 var(--shadow));
  padding: 10px 32px; cursor: pointer; letter-spacing: .3em; text-indent: .3em;
  transition: filter .18s ease, opacity .3s;
}
button.primary:hover { filter: drop-shadow(2px 3px 0 var(--shadow)) brightness(1.15); }
button.primary:active { filter: drop-shadow(1px 1px 0 var(--shadow)) brightness(.96); }
button:disabled { opacity: .45; cursor: wait; }
button.ghost {  /* 米黄木钮：光荣「門下/武將」 */
  font: inherit; font-family: var(--font-li); font-size: 13.5px;
  border: 2px solid transparent;
  background:
    linear-gradient(180deg, var(--tan-hi), var(--tan-lo)) padding-box,
    linear-gradient(180deg, #4a3418, #241608) border-box;
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
  color: var(--tan-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -1px 0 rgba(0, 0, 0, .16);
  filter: drop-shadow(1px 2px 0 var(--shadow));
  padding: 9px 22px; cursor: pointer; letter-spacing: .14em;
  transition: filter .18s;
}
button.ghost:hover { filter: drop-shadow(1px 2px 0 var(--shadow)) brightness(1.08); }
button.ghost:active { filter: drop-shadow(0 0 0 transparent) brightness(.97); }
input, select {
  font: inherit; background: var(--paper-hi); color: var(--ink);
  border: 1px solid var(--rule-strong); padding: 9px 14px; letter-spacing: .04em;
  transition: background-color .9s, border-color .9s, color .9s, box-shadow .25s;
}
input:focus, select:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px var(--accent-wash); }

/* ——— 5. 开局页（卷首语）：外框内居中，超高自滚 ——— */
#setup {
  padding: 42px 50px; position: relative; overflow: hidden;
  animation: fadeUp .7s ease both;
  margin: auto; width: 100%; max-width: 780px;
  max-height: 100%; overflow-y: auto;
}
#setup::before {  /* 右上角的碑额式淡隶水印 */
  content: '建安'; position: absolute; top: -14px; right: 14px;
  writing-mode: vertical-rl; font-family: var(--font-li);
  font-size: 108px; line-height: 1.1; letter-spacing: .06em;
  color: var(--ink); opacity: .055; font-weight: 700; pointer-events: none;
}
#setup .lede { max-width: 46em; margin-top: 10px; font-size: 16.5px; }
.setup-row { display: flex; gap: 22px; align-items: flex-end; flex-wrap: wrap; margin-top: 28px; }
.setup-row label { display: flex; flex-direction: column; font-size: 12px; letter-spacing: .18em; color: var(--ink-3); gap: 6px; }
.setup-row select { min-width: 210px; }
.setup .hint { margin-top: 18px; max-width: 52em; }
.setup-rule { border: none; border-top: 1px solid var(--rule); margin: 22px 0 0; }
.resume-box {
  border: 1px dashed var(--rule-strong); background: var(--paper-hi);
  padding: 18px 22px; margin-top: 24px; transition: background-color .9s;
}
.resume-box h2 { margin: 0 0 8px; }
#resume-list { display: flex; flex-wrap: wrap; gap: 8px; }

/* ——— 6. 对局版式：一页书（浓缩行 / 书页 / 批注条） ——— */
/* 注意：#game 不能持有动画/变换——fixed 子孙（浮卡/覆盖层）需要干净的视口锚点 */
#game { flex: 1; min-height: 0; display: flex; flex-direction: column; animation: none; transform: none; }

/* 境况带：人物一行 + 家底一行，与书页之间一道虚线——状态退到页眉的位置 */
#vitals {
  flex: none; margin: 14px 4px 12px; padding-bottom: 12px;
  border-bottom: 1px dashed var(--rule);
  animation: fadeUp .6s ease both;
}

/* 人物行：一人一牍（剪影姿态 + 名字 + 一句人话），细看收进浮卡 */
.partyline { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pl-char {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-size: 12.5px; color: var(--ink); cursor: pointer; text-align: left;
  background: var(--paper-hi); background-image: var(--grain);
  border: 1px solid #241608; border-left: 3px solid var(--spine, var(--rule-strong));
  box-shadow: inset 0 0 0 1px var(--gold-dim);
  padding: 5px 14px 5px 10px;
  transition: background-color .9s, border-color .9s, transform .25s, opacity .6s, box-shadow .25s;
  animation: fadeUp .5s ease both;
}
.pl-char::before {  /* 牍首的系绳孔 */
  content: ''; flex: none; width: 4px; height: 4px; border-radius: 50%;
  background: var(--desk); box-shadow: inset 0 0 0 1px var(--rule-strong);
}
.pl-char:hover { transform: translateY(-1px); box-shadow: 1px 3px 0 var(--shadow); }
.pl-char[data-sev='1'] { --spine: var(--brass); }
.pl-char[data-sev='2'] { --spine: var(--accent-2); }
.pl-char[data-sev='3'] { --spine: var(--accent); }
.pl-char .pl-fig { width: 19px; height: 19px; color: var(--ink-2); stroke-width: 1.4; }
.pl-char[data-sev='2'] .pl-fig { color: var(--accent-2); }
.pl-char[data-sev='3'] .pl-fig { color: var(--accent); }
.pl-name { font-weight: 700; letter-spacing: .1em; }
.pl-word { color: var(--ink-3); font-size: 11.5px; letter-spacing: .04em; }
.pl-char.dead { opacity: .45; filter: grayscale(.9); --spine: var(--ink-3); }
.pl-char.dead .pl-name::after { content: ' †'; color: var(--accent); }

/* 家底行：门 / 七类家什 / 设施 / 火柴与声响，末尾一枚「细目」 */
.homeline {
  display: flex; align-items: center; gap: 7px 18px; flex-wrap: wrap;
  margin-top: 9px; font-size: 12px; color: var(--ink-2); letter-spacing: .05em;
}
.hl-item { display: inline-flex; align-items: center; gap: 6px; }
.hl-ic { width: 13px; height: 13px; color: var(--ink-3); vertical-align: -2px; }
.hl-label { color: var(--ink-3); font-size: 10.5px; letter-spacing: .2em; }
.hl-goods { font-variant-numeric: tabular-nums; }
.hl-facs { color: var(--ink-3); }
.hl-dim { color: var(--ink-3); }
.hl-alert { color: var(--accent); font-weight: 700; letter-spacing: .08em; }
.homeline b { font-variant-numeric: tabular-nums; }
.hl-detail {
  margin-left: auto; font: inherit; font-size: 11.5px; letter-spacing: .18em;
  color: var(--ink-3); background: none; border: none; cursor: pointer; padding: 0 1px 1px;
  border-bottom: 1px dotted var(--rule-strong); transition: color .25s, border-color .25s;
}
.hl-detail:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* 门板加固（家底行里的可视化门） */
.planks { display: inline-flex; gap: 3px; align-items: center; }
.planks i {
  width: 9px; height: 5px; background: var(--paper-lo);
  box-shadow: inset 0 0 0 1px var(--rule-strong); transform: skewX(-14deg);
  transition: background-color .5s, box-shadow .5s;
}
.planks i.on { background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--ink-2); }

/* 书页：纸面收窄到一行最合适读的宽度，正文居中 */
#flow {
  flex: 1; min-height: 0; position: relative;
  width: min(880px, 100%); margin: 0 auto;
  display: flex; flex-direction: column; overflow: hidden;
}
/* 人定的残烛与夜半的烛光渐晕（UIP-3）：一盏悬在纸面上的暖光池，四周沉入暗色 */
body[data-phase='night'] #flow::after, body[data-phase='dusk'] #flow::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    radial-gradient(ellipse 130% 90% at 50% -6%, rgba(231, 181, 103, .26), rgba(231, 181, 103, .08) 46%, transparent 72%),
    radial-gradient(ellipse 150% 120% at 50% 50%, transparent 52%, rgba(8, 10, 14, .5) 100%);
  transition: opacity 1.5s;
}
body[data-phase='dusk'] #flow::after { opacity: .55; }
#flow-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
#flow-scroll::-webkit-scrollbar { width: 6px; }
#flow-scroll::-webkit-scrollbar-thumb { background: var(--rule-strong); border-radius: 3px; }
#flow-scroll::-webkit-scrollbar-track { background: transparent; }

/* ——— 叙事流：书页正文的排印 ——— */
#narration { max-width: 40em; margin: 0 auto; padding: 28px 34px 52px; font-size: 16.5px; }
body[data-fontsize='s'] #narration { font-size: 15px; }
body[data-fontsize='l'] #narration { font-size: 18.5px; }
#narration p {
  margin-bottom: 1.05em; text-align: justify;
  line-height: 1.92; hanging-punctuation: allow-end;
  text-justify: inter-ideograph;
}
#narration p.fresh { animation: inkSettle .6s ease both; }
@keyframes inkSettle {
  from { opacity: 0; filter: blur(3px); transform: translateY(5px); }
  to { opacity: 1; filter: blur(0); transform: none; }
}
#narration p.streaming::after {
  content: '▍'; color: var(--accent); animation: caretBlink 1s steps(2) infinite; margin-left: 2px;
}
@keyframes caretBlink { 50% { opacity: 0; } }
#narration .sys { color: var(--ink-3); font-size: .82em; letter-spacing: .06em; }
#narration .player-line {
  font-family: var(--font-kai); color: var(--ink-2); font-style: italic;
  border-left: 2.5px solid var(--rule-strong); padding-left: 14px; margin: 14px 0;
  font-size: .94em; text-align: left; transform: rotate(-.25deg);
}
#narration .clarify { color: var(--ink-3); font-style: italic; }

/* 堂屋（人物血肉计划 PR2）：晨间对话块——场记小标、台词缩进、结局拍收束 */
#narration .ensemble-head {
  margin: 1.2em 0 .3em; text-align: center; font-size: .82em; letter-spacing: .35em;
  color: var(--ink-3);
}
#narration p.ensemble { padding-left: 1.2em; }
#narration p.ensemble-beat { margin-top: .2em; text-align: right; color: var(--ink-3); font-style: italic; font-size: .92em; }

/* 首字下沉：每一天开篇的仪式（泥金） */
#narration p.dropcap::first-letter {
  float: left; font-size: 3.1em; line-height: .88; padding: 4px 10px 0 0;
  color: var(--brass); font-weight: 700; text-shadow: 0 1px 0 rgba(0, 0, 0, .4);
}

/* 日分隔回廊 / 续局书签 */
.day-divider {
  display: flex; align-items: center; gap: 16px; margin: 26px 0 16px;
  color: var(--ink-3); font-size: 12.5px; letter-spacing: .5em; text-indent: .5em;
  animation: fadeUp .8s ease both;
}
.day-divider::before, .day-divider::after { content: ''; flex: 1; border-top: 1px solid var(--rule); }
.day-divider b { color: var(--ink-2); letter-spacing: .3em; }
.resume-mark b { color: var(--accent); }

/* 前情提要：旧局没有落库前文时，一段接上书页（同检署牌） */
.recap {
  max-width: 36em; margin: 28px auto; padding: 20px 28px 18px;
  border: 1.5px solid transparent;
  background:
    var(--grain) padding-box,
    linear-gradient(var(--paper-hi), var(--paper-hi)) padding-box,
    linear-gradient(180deg, #4a3418, #241608) border-box;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  filter: drop-shadow(2px 3px 0 var(--shadow));
  animation: fadeUp .9s ease both;
}
.recap p { margin-top: 8px; font-family: var(--font-kai); color: var(--ink-2); line-height: 2; text-align: justify; }

/* ——— 世界停问卡（ask）：嵌在正文里的选择题 ———
   检署牌：木框切角的牌子嵌进书页；急件换朱框（檄文牌）。时过境迁就合上。 */
.ask {
  margin: 30px 0; padding: 20px 26px 18px;
  border: 1.5px solid transparent;
  background:
    var(--grain) padding-box,
    linear-gradient(var(--paper-hi), var(--paper-hi)) padding-box,
    linear-gradient(180deg, #4a3418, #241608) border-box;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  animation: fadeUp .55s ease both;
  transition: opacity .5s;
}
.ask-urgent {  /* 朱框檄文牌 */
  background:
    var(--grain) padding-box,
    linear-gradient(var(--paper-hi), var(--paper-hi)) padding-box,
    linear-gradient(180deg, #b03018, #5a1408) border-box;
}
.ask.flash { animation: fadeUp .55s ease both, askFlash 1.2s ease .1s; }
@keyframes askFlash {
  0% { filter: drop-shadow(0 0 5px var(--accent)); }
  100% { filter: none; }
}
.ask-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.ask-head .card-ic { transform: translateY(2px); }
.ask-title { font-size: 15px; letter-spacing: .24em; font-weight: 700; }
.ask-body p { margin: 6px 0; line-height: 1.9; }
.ask-meta { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; font-size: .82em; color: var(--ink-2); margin: 4px 0; }
.ask-room { letter-spacing: .08em; }
.ask-hint { font-size: .78em; color: var(--ink-3); margin-top: 8px; letter-spacing: .04em; }
.ask .leaders { margin: 6px 0 2px; font-size: .88em; }
.ask-opts { margin-top: 8px; }
.ask.settled { opacity: .55; }
.ask.settled .ask-opts, .ask.settled .ask-hint, .ask.settled .fork-text { display: none; }

/* 选项：正文里的岔路——方寸朱文章 + 虚线行间；点选如钤印，压下即定 */
.opt {
  display: flex; align-items: baseline; gap: 12px; width: 100%; text-align: left;
  font: inherit; font-size: .92em; background: none; color: var(--ink);
  border: none; border-bottom: 1px dotted var(--rule-strong);
  padding: 10px 8px; margin: 3px 0; cursor: pointer; transition: background-color .2s, padding-left .2s;
}
.opt:hover:not(:disabled) { background: var(--accent-wash); padding-left: 10px; }
.opt .key {
  flex: none; width: 20px; height: 20px; display: grid; place-items: center;
  border: 1.5px solid var(--accent); border-radius: 2px; color: var(--accent);
  font-family: var(--font-carved); font-size: 11px; font-weight: 700;
  transform: translateY(3px);
  box-shadow: inset 0 0 0 1px var(--accent-wash);
}
.opt:hover:not(:disabled) .key { background: var(--accent); color: #f3e9d4; }
.opt:active:not(:disabled) .key { transform: translateY(4px) scale(.94); background: var(--accent); color: #f3e9d4; }
.opt .plan-hint { display: block; font-size: .85em; color: var(--ink-3); margin-top: 2px; }
.opt:disabled { cursor: default; }
/* 末位自由输入行（命运导演 P0b）：与选项同宗的第四种可能——自己拿主意。
   虚线笔迹感：像在简帛上补一行批注，不像填表单 */
.opt-free { display: flex; gap: 8px; margin-top: 10px; align-items: stretch; }
.opt-free input {
  flex: 1; min-width: 0;
  background: transparent; border: none; border-bottom: 1px dashed var(--ink-3);
  color: var(--ink); font: inherit; letter-spacing: .02em;
  padding: 6px 2px; outline: none;
}
.opt-free input:focus { border-bottom-color: var(--accent); }
.opt-free input::placeholder { color: var(--ink-3); opacity: .85; }
.free-send {
  border: 1px solid var(--ink-3); background: transparent; color: var(--ink-2);
  font: inherit; font-size: .82em; padding: 4px 12px; cursor: pointer; white-space: nowrap;
}
.free-send:hover { border-color: var(--accent); color: var(--accent); }
.free-send:disabled { opacity: .4; cursor: default; }
.ask.settled .opt-free { display: none; }
/* 黄昏命运区（duskFate）：与方案卡同屏的一张追加入场的问题 */
.fate-box { margin-top: 12px; padding: 10px 12px 4px; border-left: 3px double var(--accent); border-top: 1px solid var(--gold-dim); }
.fate-box .fate-title { font-weight: 700; color: var(--ink); letter-spacing: .06em; margin: 2px 0 6px; }
.fate-box p { margin: 4px 0; line-height: 1.8; }
/* 整卷等墨：卡内一切（选项/挡位/输入行）隐去，只留落墨动画——等待期不可见也不可输入 */
.ask.veiled > *:not(.card-veil) { display: none; }
.card-veil { display: flex; align-items: center; gap: 12px; padding: 22px 10px; color: var(--ink-3); font-size: .84em; letter-spacing: .14em; }
.card-veil .ink-dots { display: inline-flex; gap: 6px; }
.card-veil .ink-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-2); opacity: .2; animation: inkPulse 1.15s ease-in-out infinite; }
.card-veil .ink-dots i:nth-child(2) { animation-delay: .18s; }
.card-veil .ink-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes inkPulse { 0%, 100% { opacity: .18; transform: translateY(0); } 50% { opacity: .95; transform: translateY(-3px); } }
body.motion-off .card-veil .ink-dots i { animation: none; opacity: .55; }
.ask.unveil { animation: fadeUp .6s ease both; }

/* 黄昏夜方针挡位：小字选钮一行（默认跟现行规矩） */
.stance-row { display: flex; align-items: center; gap: 8px; margin: 8px 0 2px; flex-wrap: wrap; }
.stance-label { font-size: .76em; color: var(--ink-3); letter-spacing: .06em; }
.stance { font: inherit; font-size: .78em; color: var(--ink-2); background: none; border: 1px solid var(--rule); padding: 3px 12px; cursor: pointer; border-radius: 2px; }
.stance.on { border-color: var(--accent); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-wash); }
.stance-micro { border-style: dashed; }
.ask.settled .stance-row { display: none; }

/* 晨报「种下的念头」区 */
.dir-box { border-top: 1px dashed var(--ink-3); margin-top: 8px; padding-top: 2px; }
.dir-box .m-kicker { margin-bottom: 2px; }

/* 清单：点线引导（价目 / 容器 / 细目共用） */
.leaders { display: flex; flex-direction: column; gap: 2px; margin: 4px 0; }
.lead-row { display: flex; align-items: baseline; gap: 8px; }
.lead-row .name { flex: none; max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead-row .dots-line { flex: 1; border-bottom: 1.5px dotted var(--rule-strong); transform: translateY(-4px); min-width: 16px; }
.lead-row .qty { flex: none; color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.lead-row.searched .name { text-decoration: line-through; color: var(--ink-3); }
.lead-row.searched .qty { color: var(--ink-3); }

/* 晨报问题行 */
.care-line { font-size: .92em; margin: 4px 0; color: var(--ink-2); }
.care-line.mid { color: var(--ink); }
.care-line.bad { color: var(--accent); font-weight: 500; }
.fork-text { font-size: .95em; color: var(--ink); margin: 8px 0 2px; }

/* 夜里的火柴（停问卡与细目抽屉共用；small 是嵌在行内的小尺） */
.matches { display: flex; gap: 7px; margin: 10px 0 6px; align-items: flex-end; flex-wrap: wrap; }
.match { width: 4px; height: 24px; position: relative; border-radius: 1px;
  background: linear-gradient(to top, #b3906a 68%, #d8ae6b 68%, #efe0b8 94%);
  transition: height .6s ease, opacity .6s, background .6s;
}
.match::after {  /* 未燃尽的火柴：一点火苗 */
  content: ''; position: absolute; top: -7px; left: 50%; width: 5px; height: 8px;
  transform: translateX(-50%);
  background: radial-gradient(circle at 50% 75%, #f8dfa8, #e08a3c 70%, transparent 75%);
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  animation: flicker .8s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 4px rgba(232, 168, 76, .8));
}
@keyframes flicker {
  from { transform: translateX(-50%) scale(1) rotate(-2deg); opacity: .92; }
  to { transform: translateX(-54%) scale(1.18) rotate(2.5deg); opacity: 1; }
}
.match.burnt { height: 10px; opacity: .38; background: #3c362b; }
.match.burnt::after { content: none; }
.matches.small { gap: 4px; margin: 0; display: inline-flex; }
.matches.small .match { height: 14px; width: 3px; }
.matches.small .match::after { width: 4px; height: 6px; top: -5px; }
.matches.small .match.burnt { height: 6px; }
.noise-line { color: var(--accent); font-size: .85em; letter-spacing: .1em; display: inline-flex; align-items: center; gap: 4px; }
.noise-line .rip { display: inline-block; animation: ripple 2.2s ease-in-out infinite; }
@keyframes ripple { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* 视图头部的返回钮：档案馆/管理回到对局（嵌在 H1 里，字号随标题缩一档） */
h1 .view-back { font-size: .38em; vertical-align: middle; margin-left: 14px; letter-spacing: .1em; }

/* ——— 卡脚（统一交互面）：选项 + 刷新命运 + 输入行，都住在停问卡里 ——— */
/* 选项统一红印——谋士与保底一个模样（用户不需要分辨谁来写的） */

/* 刷新命运：一行小字按钮；等待时点一支烛，不转圈 */
.opt-refresh-row { margin-top: 8px; }
.opt-refresh {
  font: inherit; font-size: .8em; letter-spacing: .08em; color: var(--ink-3);
  background: none; border: none; border-bottom: 1px dotted var(--rule-strong);
  padding: 4px 2px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
}
.opt-refresh:hover:not(:disabled) { color: var(--accent); border-bottom-color: var(--accent); }
.opt-refresh:disabled { cursor: default; opacity: .75; }
.opt-refresh .candle {
  width: 9px; height: 14px; position: relative; opacity: 0; transition: opacity .4s;
}
.opt-refresh.thinking .candle { opacity: 1; }
.opt-refresh .candle::after {
  content: ''; position: absolute; bottom: 1px; left: 50%; width: 6px; height: 9px;
  transform: translateX(-50%);
  background: radial-gradient(circle at 50% 78%, var(--candle, #e7b567), #c96f2c 72%, transparent 76%);
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  filter: drop-shadow(0 0 5px rgba(231, 181, 103, .9));
  animation: flicker .7s ease-in-out infinite alternate;
}

/* ——— 覆盖层：选单与细目抽屉（桌面居中一页纸；移动端贴底抽屉） ——— */
#overlay-backdrop {
  position: fixed; inset: 0; z-index: 64; background: rgba(12, 11, 8, .42);
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
body.overlay-open #overlay-backdrop { opacity: 1; pointer-events: auto; }
.sheet {  /* 光荣式石青蓝信息面板：蓝缎底、木框、四角方钉、描金内线 */
  position: fixed; z-index: 70; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(660px, calc(100vw - 40px)); max-height: 82dvh; overflow-y: auto;
  background: var(--lapis);
  background-image:
    linear-gradient(180deg, var(--tan-hi), var(--tan-lo)) 9px 9px / 9px 9px,
    linear-gradient(180deg, var(--tan-hi), var(--tan-lo)) calc(100% - 18px) 9px / 9px 9px,
    linear-gradient(180deg, var(--tan-hi), var(--tan-lo)) 9px calc(100% - 18px) / 9px 9px,
    linear-gradient(180deg, var(--tan-hi), var(--tan-lo)) calc(100% - 18px) calc(100% - 18px) / 9px 9px,
    var(--grain);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  color: var(--lapis-ink);
  border: 2px solid var(--wood);
  box-shadow:
    inset 0 0 0 1px var(--gold-hi),
    inset 0 0 0 6px var(--lapis),
    inset 0 0 0 7px var(--gold-dim),
    6px 10px 0 var(--shadow), 0 24px 60px rgba(0, 0, 0, .5);
  padding: 30px 38px 28px;
  animation: sheetIn .35s cubic-bezier(.2, .8, .3, 1) both;
  scrollbar-width: thin; scrollbar-color: var(--lapis-hi) transparent;
}
/* 蓝面板上的字号层级：标题金、次级雾蓝、红线提亮 */
.sheet .hint { color: var(--lapis-dim); }
.sheet .m-label { color: var(--lapis-dim); }
.sheet .m-kicker { color: var(--accent-2); }
.sheet .m-line b { color: #f0e2b2; }
.sheet .sheet-x { color: var(--lapis-dim); }
.sheet .sheet-x:hover { color: var(--accent-2); }
.sheet .m-user { color: var(--lapis-ink); }
.sheet .m-account { border-top-color: var(--lapis-hi); }
.sheet .m-run {
  background: var(--lapis-hi); border-color: rgba(230, 210, 150, .3); color: var(--lapis-ink);
}
.sheet .m-run:hover:not(:disabled) { border-color: var(--brass); background: var(--lapis-hi); filter: brightness(1.15); }
.sheet .m-run-meta { color: var(--lapis-dim); }
.sheet select, .sheet input { background: var(--lapis-lo); color: var(--lapis-ink); border-color: var(--lapis-hi); }
@keyframes sheetIn { from { opacity: 0; transform: translate(-50%, -48.5%); } to { opacity: 1; transform: translate(-50%, -50%); } }
.sheet-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sheet-x {
  font: inherit; background: none; border: none; color: var(--ink-3); cursor: pointer;
  padding: 6px; display: inline-grid; place-items: center; transition: color .25s, transform .25s;
}
.sheet-x:hover { color: var(--accent); transform: rotate(90deg); }
.sheet-x .icon { width: 16px; height: 16px; }
.sheet-title { font-family: var(--font-li); color: var(--brass); font-size: 22px; letter-spacing: .34em; margin: 4px 0 12px; font-weight: 700; text-shadow: 0 1px 0 rgba(0, 0, 0, .5); }

/* 选单各节 */
.m-sec { margin: 17px 0; }
.m-kicker { font-size: 11px; letter-spacing: .34em; color: var(--accent); margin-bottom: 8px; }
.m-line { font-size: 15px; letter-spacing: .04em; }
.m-line b { color: var(--accent); }
.m-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 9px 0; }
.m-label { font-size: 12px; color: var(--ink-3); letter-spacing: .14em; }
.m-runs { display: flex; flex-direction: column; gap: 8px; }
.m-run {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font: inherit; text-align: left; color: var(--ink);
  background: var(--paper-hi); border: 1px solid var(--rule); padding: 10px 16px; cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.m-run:hover:not(:disabled) { border-color: var(--brass); background: var(--accent-wash); }
.m-run:disabled { opacity: .55; cursor: default; border-style: dashed; }
.m-run-meta { font-size: 11.5px; color: var(--ink-3); letter-spacing: .06em; white-space: nowrap; }
.m-account {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  border-top: 1px solid var(--rule); padding-top: 15px; margin-top: 18px;
}
.m-user { letter-spacing: .12em; font-size: 14px; }
.seg { display: inline-flex; border: 2px solid var(--wood); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); }
.seg button {
  font: inherit; font-family: var(--font-li); font-size: 12.5px; border: none; padding: 6px 16px;
  background: linear-gradient(180deg, var(--tan-hi), var(--tan-lo));
  color: var(--tan-ink); cursor: pointer; letter-spacing: .1em;
  transition: filter .2s, background-color .2s, color .2s;
}
.seg button + button { border-left: 1px solid var(--wood); }
.seg button:hover { filter: brightness(1.07); }
.seg button.on { background: linear-gradient(180deg, var(--jade-hi), var(--jade)); color: #f0e2b2; font-weight: 700; }
#m-abandon.armed {  /* 确认态 = 光荣的橙红「结束」钮 */
  background: linear-gradient(180deg, #d8843f, var(--signal));
  color: #fff3da; border-color: var(--wood);
}
#menu .ghost, #homebook .ghost { padding: 6px 16px; font-size: 13px; }
#menu select { font-size: 13.5px; padding: 6px 10px; }
#menu .primary { font-size: 13.5px; padding: 7px 22px; letter-spacing: .2em; }

/* 细目抽屉各节 */
.hb-sec { margin: 16px 0; }
.hb-line { font-size: 13.5px; margin: 5px 0; }
.hb-line.dim { color: var(--ink-3); }

/* 围城日历（细目抽屉里的时局） */
.siege { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.siege-label {
  flex: none; font-size: 10.5px; letter-spacing: .34em; color: var(--ink-3);
  writing-mode: vertical-rl; line-height: 1;
}
.siege svg { flex: 1; width: 100%; height: 42px; }
.siege .axis { stroke: var(--rule-strong); stroke-width: 1.2; }
.siege line { stroke: var(--rule-strong); stroke-width: 1; }
.siege text { font-family: var(--font-mono); font-size: 7.5px; fill: var(--ink-3); letter-spacing: .04em; }
.siege text.tick-now { fill: var(--accent); font-weight: 700; }
.siege .fog-band { fill: var(--accent-wash); stroke: var(--rule); stroke-dasharray: 3 2; stroke-width: .8; }
.siege .hard-end { stroke: var(--ink-2) !important; stroke-width: 1.8; }
.siege .today-line { stroke: var(--accent) !important; stroke-width: 1.6; }
.siege .today-pin { fill: var(--accent); stroke: none; }

/* 物资图标格（细目抽屉） */
.inv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px 8px; margin-top: 4px; }
.inv-cat {
  grid-column: 1 / -1; font-size: 9.5px; letter-spacing: .3em; color: var(--accent);
  border-bottom: 1px dotted var(--rule); padding-bottom: 2px; margin-top: 6px;
}
.inv-cat:first-child { margin-top: 0; }
.item { display: flex; align-items: center; gap: 5px; min-width: 0; padding: 2px 4px; }
.item .icon { width: 17px; height: 17px; color: var(--ink-2); }
.item-name { font-size: 11.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-qty { margin-left: auto; font-size: 11px; color: var(--accent); font-variant-numeric: tabular-nums; }

/* ——— 人物浮卡：细看一个人（人话 + 制图仪表） ——— */
#char-pop {
  position: fixed; z-index: 82; width: 252px;
  background: var(--paper-hi); background-image: var(--grain);
  border: 1.5px solid #241608; border-left: 4px solid var(--spine, var(--rule-strong));
  box-shadow: 3px 5px 0 var(--shadow), inset 0 0 0 1px var(--gold-dim); padding: 14px 17px 13px;
  font-size: 13px; line-height: 1.65;
  animation: fadeUp .2s ease both;
}
#char-pop[data-sev='1'] { --spine: var(--brass); }
#char-pop[data-sev='2'] { --spine: var(--accent-2); }
#char-pop[data-sev='3'] { --spine: var(--accent); }
.cp-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cp-head .pl-fig { width: 24px; height: 24px; color: var(--ink-2); }
.cp-head b { font-size: 15px; letter-spacing: .14em; }
.cp-role { flex-basis: 100%; font-size: 11px; color: var(--ink-3); letter-spacing: .14em; }
.cp-words { font-size: 12.5px; color: var(--ink-2); margin-top: 6px; font-family: var(--font-kai); }
.gauges {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px;
  margin-top: 8px; padding-top: 7px; border-top: 1px dotted var(--rule);
}
.g { display: flex; align-items: center; gap: 6px; }
.g-label { flex: none; font-size: 9.5px; letter-spacing: .18em; color: var(--ink-3); }
.g-track {
  flex: 1; height: 5px; position: relative;
  background: var(--paper-lo);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.g-track::after {  /* 制图刻度 */
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(20% - 1px), var(--paper-hi) calc(20% - 1px) 20%);
  pointer-events: none;
}
.g-track i {
  position: absolute; left: 0; top: 0; bottom: 0; display: block;
  background: var(--ink-2); transition: width .8s cubic-bezier(.3, .7, .3, 1);
}
.g-hunger .g-track i { background: var(--moss); }
.g-mood .g-track i { background: var(--brass); }
.g-ap .g-track i { background: var(--accent-2); }
.g-harm .g-track i { background: var(--accent); }

/* ——— 档案馆 ——— */
.archive-head { animation: fadeUp .6s ease both; }
.layer-state {
  border: 1px solid var(--rule); background: var(--paper-hi); background-image: var(--grain);
  padding: 15px 21px; margin: 10px 0; font-size: 14px; display: flex; align-items: baseline; gap: 10px;
  transition: background-color .9s, opacity .5s;
}
.layer-state.locked { opacity: .68; border-style: dashed; }
.layer-state b { letter-spacing: .12em; font-family: var(--font-li); }
.layer-state .tag-line { margin-left: auto; font-size: 12px; color: var(--ink-3); letter-spacing: .14em; }
.layer-state:not(.locked) .tag-line { color: var(--moss); }
.doc-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; margin-top: 20px; }
.doc {  /* 竹简：竖条肌理是编联的简 */
  background: var(--paper-hi); border: 1px solid var(--rule);
  background-image: var(--grain), repeating-linear-gradient(90deg, transparent 0 24px, rgba(0, 0, 0, .05) 24px 25px);
  padding: 17px 20px; font-size: 13px; position: relative;
  box-shadow: 2px 3px 0 var(--shadow);
  transition: transform .25s, box-shadow .25s, background-color .9s;
  animation: fadeUp .5s ease both;
}
.doc:hover { transform: translateY(-2px) rotate(-.3deg); box-shadow: 3px 5px 0 var(--shadow); }
.doc .doc-id { color: var(--accent); font-size: 11.5px; letter-spacing: .22em; display: block; margin-bottom: 5px; font-family: var(--font-mono); }
.doc b { letter-spacing: .08em; font-family: var(--font-carved); }  /* 公文题名用刊刻体 */
.doc.silk b { font-family: var(--font-kai); }  /* 缣帛私信：题名也是手迹 */
.doc.silk {  /* 缣帛：私密与情感之物，暗案上的一匹浅色 */
  background: #e2d0a2; background-image: var(--grain); border-color: #b3a377;
  color: #2c2418;
}
.doc.silk b { color: #241d12; }
.doc.silk p { color: #3a3222; }
.doc.silk .doc-id { color: #8e3325; }
.doc.silk summary { color: #6b5b3f; }
.doc.iron {  /* 碑拓：黑底白文，石花斑驳，描金框——真相是被凿出来的 */
  background: #120c06; background-image: var(--stone), var(--grain);
  border: 1px solid #000; color: #ddd2b2;
  font-family: var(--font-stele);
  box-shadow: inset 0 0 0 1px var(--gold-hi), 2px 3px 0 var(--shadow);
  animation: rubIn 1.4s ease both;
}
@keyframes rubIn {  /* 拓片显影：白文自黑底浮现，如真拓 */
  from { opacity: 0; filter: brightness(.35) blur(3px); }
  55% { filter: brightness(.7) blur(1px); }
  to { opacity: 1; filter: none; }
}
.doc.iron b { color: #f0e6c8; font-family: var(--font-stele); }
.doc.iron p { color: #cfc4a4; }
.doc.iron summary { color: #9a8f74; }
.doc.iron .doc-id { color: var(--accent-2); }

/* 封印档案（S4）：解锁过的真相上墙，封泥是碎的——开过就回不去 */
.doc.seal { padding-right: 52px; }
.doc.seal::before, .doc.seal::after {  /* 朱泥封检裂成两半 */
  content: ''; position: absolute; top: 13px; width: 13px; height: 26px;
  box-shadow: inset 0 0 0 1px rgba(243, 233, 212, .22);
  transition: transform .3s ease;
}
.doc.seal::before {  /* 左半 */
  right: 27px; background: linear-gradient(135deg, #c95940, #7e2413);
  clip-path: polygon(0 0, 100% 0, 74% 26%, 100% 52%, 72% 80%, 100% 100%, 0 100%);
  transform: rotate(-4deg);
}
.doc.seal::after {  /* 右半 */
  right: 13px; background: linear-gradient(225deg, #c95940, #7e2413);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 28% 80%, 0 52%, 26% 26%);
  transform: rotate(4deg);
}
.doc.seal:hover::before { transform: rotate(-7deg) translateX(-1px); }
.doc.seal:hover::after { transform: rotate(7deg) translateX(1px); }.doc.iron::after {
  content: '鐵證'; position: absolute; top: 10px; right: 10px;
  font-family: var(--font-seal); font-size: 11px; letter-spacing: .14em;
  background: var(--accent); color: #f3e9d4; border: none; border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(243, 233, 212, .55);
  padding: 2px 6px 3px; transform: rotate(6deg);
}
.doc details { margin-top: 10px; }
.doc summary { cursor: pointer; color: var(--ink-3); font-size: 12px; letter-spacing: .16em; list-style: none; padding: 2px 0; }
.memoir-card { border-left: 3px solid var(--accent); }
.memoir-card .mem-meta { color: var(--ink-3); font-size: 12px; margin: 5px 0 0; font-family: var(--font-kai); }
.memoir-card .mem-text { margin-top: 8px; }
.memoir-card .mem-text p { margin: 0 0 9px; line-height: 1.95; text-align: justify; color: var(--ink-2); }
.doc summary::before { content: '▸ '; color: var(--accent); }
.doc details[open] summary::before { content: '▾ '; }
.doc p { margin-top: 9px; color: var(--ink); text-align: justify; }

/* 史册格双栏：正史=碑拓（黑底白文刊刻体、金泥栏题），野史=帛书（缣底手写体） */
.annal-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 14px; }
.annal-h { font-family: var(--font-li); font-size: 13px; letter-spacing: .4em; margin: 0 0 10px; color: var(--ink-3); }
#canon-annals + .annal-h, .annal-cols > div:first-child > .annal-h { color: var(--brass); }
.annal-cols .doc { animation: fadeUp .5s ease both; }
.doc.annal-canon {
  background: #120c06; background-image: var(--stone), var(--grain);
  border: 1px solid #000; color: #ddd2b2; font-family: var(--font-stele);
  box-shadow: inset 0 0 0 1px var(--gold-hi), 2px 3px 0 var(--shadow);
  animation: rubIn 1.4s ease both;
}
.doc.annal-canon p { color: #cfc4a4; }
.doc.annal-alt {
  background: #e2d0a2; background-image: var(--grain); border-color: #b3a377;
  color: #2c2418; font-family: var(--font-kai);
}
.doc.annal-alt p { color: #3a3222; }
.doc.annal-alt .doc-id { color: #8e3325; font-family: var(--font-mono); }
.doc.annal-alt .mem-meta { color: #6b5b3f; font-family: var(--font-kai); }

/* ——— 管理后台 ——— */
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-bottom: 14px; }
.table th, .table td { border: 1px solid var(--rule); padding: 8px 13px; text-align: left; }
.table th { background: var(--paper-lo); font-weight: 400; letter-spacing: .14em; font-size: 12px; color: var(--brass); }
.table tr { transition: background-color .2s; }
.table tbody tr:hover, .table tr:hover { background: var(--accent-wash); }
.admin-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0; }
.admin-row input, .admin-row select { min-width: 130px; }
.ok { color: var(--moss); } .fail { color: var(--accent); }
#health-history .row { font-size: 12.5px; border-bottom: 1px dotted var(--rule); padding: 3px 0; font-variant-numeric: tabular-nums; }
.preset-cards { display: flex; gap: 14px; margin: 10px 0 14px; flex-wrap: wrap; }
.preset-card { flex: 1; min-width: 240px; text-align: left; background: none; border: 1px solid var(--rule-strong);
  padding: 15px 18px; cursor: pointer; font: inherit; color: var(--ink); border-radius: 2px; transition: border-color .2s, background .2s; }
.preset-card b { display: block; font-size: 14.5px; margin-bottom: 5px; }
.preset-card span { display: block; font-size: 12px; color: var(--ink-3); margin-top: 3px; }
.preset-card:hover, .preset-card.active { border-color: var(--brass); background: var(--accent-wash); }
.admin-advanced { margin: 10px 0; }
.admin-advanced summary { cursor: pointer; color: var(--ink-3); font-size: 12.5px; }
#p-add-result.ok { color: var(--moss); } #p-add-result.fail { color: var(--accent); }

/* ——— Landing：露布栏前的卷首 ——— */
#landing { max-width: 640px; margin: 9vh auto 0; padding: 0 20px 60px; position: relative; z-index: 1; }
.cover { padding: 54px 58px 46px; position: relative; overflow: hidden; animation: fadeUp .9s ease both; }
.cover::before {  /* 碑额式淡隶水印：建安 */
  content: '建安'; position: absolute; top: 6px; right: 26px;
  writing-mode: vertical-rl; font-family: var(--font-li);
  font-size: 150px; line-height: 1.12; letter-spacing: .08em;
  color: var(--ink); opacity: .05; font-weight: 700; pointer-events: none;
}
.cover > * { position: relative; }
.cover .kicker { font-size: 12px; }
.cover h1 { font-family: var(--font-li); color: var(--brass); text-shadow: 0 2px 0 rgba(0, 0, 0, .55); font-size: clamp(42px, 8vw, 58px); letter-spacing: .24em; margin: 12px 0 6px; font-weight: 700; }
.cover h1 em { font-style: normal; color: var(--accent); text-shadow: none; }
.cover .subtitle { font-size: 14px; letter-spacing: .5em; text-indent: .5em; color: var(--ink-2); margin-bottom: 24px; }
.cover .lede { max-width: 40em; }
/* 封泥：一方朱泥白文印，压住这卷帛书的卷首 */
.seal {
  position: absolute; top: 38px; right: 42px; width: 84px; height: 84px; z-index: 2;
  border: none; border-radius: 6px; background: var(--accent); color: #f3e9d4;
  display: grid; place-items: center; text-align: center;
  font-family: var(--font-seal); font-size: 26px; letter-spacing: .12em; line-height: 1.25;
  box-shadow: inset 0 0 0 2px rgba(243, 233, 212, .5), inset 0 0 16px rgba(0, 0, 0, .3), 2px 3px 0 var(--shadow);
  transform: rotate(8deg); opacity: .92; pointer-events: none;
  animation: sealIn 1.2s .5s ease both;
}
.seal::before { content: ''; position: absolute; inset: 6px; border: 1px solid rgba(243, 233, 212, .45); border-radius: 3px; }
@keyframes sealIn { from { opacity: 0; transform: rotate(20deg) scale(1.28); } to { opacity: .92; transform: rotate(8deg) scale(1); } }
.spine {
  position: fixed; left: 20px; top: 50%; transform: translateY(-50%);
  writing-mode: vertical-rl; letter-spacing: .55em; color: var(--ink-3); opacity: .55;
  font-size: 12px; z-index: 0; user-select: none;
}
.landing-form { margin-top: 28px; }
.cover-toc {
  display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center;
  margin-top: 26px; padding: 16px 2px 2px; border-top: 1px solid var(--rule);
}
.cover-toc span { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; letter-spacing: .14em; color: var(--ink-2); }
.cover-toc .icon { width: 16px; height: 16px; color: var(--brass); opacity: .85; }
.landing-tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--rule-strong); margin-bottom: 22px; }
.landing-tabs .tab {
  font: inherit; font-size: 14.5px; letter-spacing: .22em; background: none; border: none;
  color: var(--ink-3); padding: 8px 4px 12px; cursor: pointer; position: relative; transition: color .25s;
}
.landing-tabs .tab::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2.5px;
  background: var(--accent); transform: scaleX(0); transition: transform .3s ease;
}
.landing-tabs .tab.active { color: var(--ink); }
.landing-tabs .tab.active::after { transform: scaleX(1); }
.landing-form .field { display: flex; flex-direction: column; font-size: 12.5px; letter-spacing: .16em; color: var(--ink-3); gap: 8px; margin-bottom: 18px; }
.landing-form input { max-width: 340px; font-size: 15px; }
.form-error { color: var(--accent); font-size: 13px; margin-bottom: 14px; letter-spacing: .04em; }
.landing-row { display: flex; gap: 14px; align-items: center; margin-top: 12px; }
.cover .foot { margin-top: 34px; border-top: 1px solid var(--rule); padding-top: 18px; }
#welcome-text { font-family: var(--font-kai); font-size: 16px; color: var(--ink-2); }

/* ——— 通用入场 ——— */
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.view > .panel, .view > section { animation: fadeUp .6s ease both; }

/* —— 图标基座：单色线稿，随文字呼吸 —— */
.icon {
  width: 1.15em; height: 1.15em; vertical-align: -.22em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: .92;
}
.clock-ic { width: 1em; height: 1em; vertical-align: -.16em; opacity: .75; margin-right: 2px; }
.card-ic { width: 14px; height: 14px; color: var(--ink-3); vertical-align: -2px; }
.lead-ic { width: 13px; height: 13px; color: var(--ink-3); vertical-align: -2px; }
.hint-ic { width: 12px; height: 12px; vertical-align: -1.5px; }

/* —— 句级浮现：一句一句落墨（Typist 引擎的笔迹）—— */
#narration .sent { animation: sentIn .55s cubic-bezier(.2, .6, .3, 1) both; }
#narration .sent.now { animation: none; }
@keyframes sentIn {
  from { opacity: 0; filter: blur(2.5px); }
  60% { filter: blur(.6px); }
  to { opacity: 1; filter: blur(0); }
}

/* —— 富文本落款（markdown-lite）：重墨与楷体低语 —— */
#narration b.ink-em, .memoir b.ink-em { font-weight: 700; color: var(--accent); }
#narration i.em-kai, .memoir i.em-kai { font-family: var(--font-kai); color: var(--ink-2); }

/* —— UIP-4 名词情报卡：散文里可翻的名词 —— */
#narration .noun {
  border-bottom: 1px dotted var(--rule-strong);
  cursor: help;
  transition: border-color .2s, color .2s;
}
#narration .noun:hover { border-bottom-color: var(--accent); color: var(--ink); }
.noun-card {
  position: fixed; z-index: 80; max-width: 250px;
  background: var(--paper-hi); background-image: var(--grain);
  border: 1.5px solid #241608;
  box-shadow: 3px 5px 0 var(--shadow), inset 0 0 0 1px var(--gold-dim);
  padding: 13px 17px 12px; font-size: 12.5px; line-height: 1.65;
  display: flex; flex-direction: column; gap: 3px;
  animation: fadeUp .25s ease both;
}
.noun-card .nc-kicker {
  position: absolute; top: -9px; left: 12px;
  background: var(--paper-hi); padding: 1px 7px;
  font-size: 10px; letter-spacing: .3em; color: var(--accent);
  border: 1px solid #241608;
}
.noun-card .nc-title { font-size: 15px; letter-spacing: .14em; margin-top: 2px; }
.noun-card .nc-line { color: var(--ink-2); font-family: var(--font-kai); }

/* —— 讣告：死亡值得一次排版（讣帛上碑：黑底白文拓片式） —— */
.obituary {
  max-width: 30em; margin: 34px auto 26px; text-align: center;
  border: 3px double var(--rule-strong);
  background: #100a05;
  background-image:  /* 碑角四钉 + 石花 + 噪 */
    linear-gradient(180deg, var(--tan-hi), var(--tan-lo)) 7px 7px / 8px 8px,
    linear-gradient(180deg, var(--tan-hi), var(--tan-lo)) calc(100% - 15px) 7px / 8px 8px,
    linear-gradient(180deg, var(--tan-hi), var(--tan-lo)) 7px calc(100% - 15px) / 8px 8px,
    linear-gradient(180deg, var(--tan-hi), var(--tan-lo)) calc(100% - 15px) calc(100% - 15px) / 8px 8px,
    var(--stone), var(--grain);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat;
  color: #e2d8ba;
  padding: 26px 32px 20px; position: relative;
  animation: obitIn 1.6s ease both;
}
@keyframes obitIn { from { opacity: 0; transform: scale(1.03); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
.obituary .obit-kicker {
  position: absolute; top: 2px; left: 50%; transform: translate(-50%, -50%);
  background: var(--accent); color: #f3e9d4;
  font-family: var(--font-li);
  font-size: 12px; padding: 1px 10px; letter-spacing: .4em; text-indent: .4em;
}
.obituary .obit-name { font-family: var(--font-li); font-size: 24px; letter-spacing: .7em; text-indent: .7em; font-weight: 700; margin-top: 6px; }
.obituary .obit-role { font-family: var(--font-kai); color: #b3a888; font-size: 13px; margin-top: 8px; }
.obituary .obit-date {
  font-family: var(--font-mono); font-size: 11px; color: #7d7460;
  letter-spacing: .2em; margin-top: 10px; padding-top: 8px; border-top: 1px solid #3a332a;
}

/* —— 开局仪式：门后的名字墙 —— */
.wall-names {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  margin: 22px 0 16px; padding: 22px 30px 24px;
  background: var(--paper-lo); background-image: var(--grain);
  border-left: 3px solid var(--rule-strong);
  max-width: 30em;
}
.wall-kicker { font-size: 10px; letter-spacing: .5em; color: var(--ink-3); margin-bottom: 2px; }
.wall-name {
  font-family: var(--font-kai); font-size: 25px; color: var(--ink);
  letter-spacing: .3em; line-height: 1.3;
  animation: writeIn .9s cubic-bezier(.2, .6, .3, 1) both;
}
.wall-name:nth-child(odd) { transform: rotate(-.6deg); }
.wall-name:nth-child(even) { transform: rotate(.5deg); margin-left: 1.2em; }
@keyframes writeInA { from { opacity: 0; filter: blur(4px); transform: translateX(-8px) rotate(-.6deg); } to { opacity: 1; filter: blur(0); transform: rotate(-.6deg); } }
@keyframes writeInB { from { opacity: 0; filter: blur(4px); transform: translateX(-8px) rotate(.5deg); } to { opacity: 1; filter: blur(0); transform: rotate(.5deg); } }

/* —— 局终长卷 —— */
.ending { text-align: center; margin: 48px 0 30px; animation: fadeUp 1.1s ease both; }
.ending::before, .ending::after {  /* 局终的描金界行 */
  content: ''; display: block; max-width: 300px; margin: 18px auto;
  border-top: 2px solid var(--rule-strong); border-bottom: 1px solid var(--gold-dim); height: 4px; opacity: .9;
}
.ending .title { font-family: var(--font-li); color: var(--brass); text-shadow: 0 2px 0 rgba(0, 0, 0, .55); font-size: 27px; letter-spacing: .8em; text-indent: .8em; font-weight: 700; }
.ending .fate { margin-top: 14px; }
.ending .fate b { letter-spacing: .1em; }
.three-things { margin: 20px auto 0; text-align: left; max-width: 40em; }
.three-things .kicker { display: block; text-align: center; margin-bottom: 10px; }
.three-things.ledger { margin-top: 26px; border-top: 1px solid var(--rule); padding-top: 14px; }

/* 列传（人物血肉计划 PR3）：每人一张小传卡——名字、盖棺徽、正文、大事时间线 */
.bios .bio-card { margin: 0 0 22px; padding: 14px 16px 12px; border: 1px solid var(--rule); background: rgba(0,0,0,.02); }
.bios .bio-name { display: inline-block; margin: 0 8px 0 0; font-size: 1.05em; letter-spacing: .2em; }
.bio-dir { display: inline-block; font-size: .78em; padding: 1px 8px; border: 1px solid currentColor; border-radius: 2em; opacity: .8; }
.bio-dir.bio-fallen { color: #7a4a4a; }
.bio-dir.bio-haunted { color: #6b5a7a; }
.bio-dir.bio-honored { color: #7a6a3a; }
.bio-dir.bio-survived { color: #4a6a55; }
.bios .bio-card p { margin: 10px 0 0; }
.bios .bio-card p:last-of-type { color: var(--ink-3); font-style: italic; }
.bio-timeline { margin: 12px 0 0; padding: 8px 0 0 18px; border-top: 1px dashed var(--rule); list-style: none; }
.bio-timeline li { font-size: .86em; color: var(--ink-3); line-height: 1.9; }
.memoir { max-width: 40em; margin: 26px auto 0; animation: fadeUp 1.2s ease both; }
.memoir p { margin: 0 0 14px; line-height: 2.05; text-align: justify; }
.memoir p:first-of-type::first-letter {
  float: left; font-size: 3.1em; line-height: .88; padding: 4px 10px 0 0;
  color: var(--brass); font-weight: 700;
}
.run-tl-box { margin: 14px auto 4px; max-width: 480px; }
.run-tl { width: 100%; height: 32px; display: block; }
.run-tl .axis { stroke: var(--rule-strong); stroke-width: 1.2; }
.run-tl line { stroke: var(--accent-2); stroke-width: 1; }
.run-tl .evt-dot { fill: var(--accent); stroke: var(--paper-hi); stroke-width: 1.5; }
.run-tl text { font-family: var(--font-mono); font-size: 8px; fill: var(--ink-3); }

/* —— 序章：围城头九天的闪回排印（与停问卡同为检署牌） —— */
.prologue {
  margin: 30px 0; padding: 20px 26px 18px;
  border: 1.5px solid transparent;
  background:
    var(--grain) padding-box,
    linear-gradient(var(--paper-hi), var(--paper-hi)) padding-box,
    linear-gradient(180deg, #4a3418, #241608) border-box;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  animation: fadeUp .55s ease both; transition: opacity .5s;
}
.prologue .kicker { letter-spacing: .4em; }
.prologue p { margin: 8px 0 0; line-height: 1.95; text-align: justify; }
.prologue .prologue-opts { margin-top: 10px; }
.prologue.settled { opacity: .55; }
.prologue.settled .prologue-opts { display: none; }

/* ——— 响应式 ——— */
@media (max-width: 760px) {
  #app { padding: 0 12px; }
  #watch { display: none; }  /* 窄屏更筹退场 */
  #topbar { padding: 8px 2px 6px; }
  .mast { gap: 4px 12px; }
  .mast-kicker { display: none; }
  .brand { font-size: 17px; letter-spacing: .22em; }
  .clock { order: 3; flex-basis: 100%; font-size: 11.5px; }
  #mode-badge { display: none; }
  .menu-btn { padding: 4px 10px; font-size: 12px; }
  #vitals { margin: 10px 0 8px; }
  /* 人物行横滑：宽度不再换行；右缘渐隐 = "还有下一位"的手势 */
  .partyline {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
    -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent);
    mask-image: linear-gradient(90deg, #000 90%, transparent);
    padding-right: 22px;
  }
  .partyline::-webkit-scrollbar { display: none; }
  .pl-char { flex: none; }
  #narration { padding: 18px 20px 36px; }
  body[data-fontsize='m'] #narration { font-size: 16px; }
  #setup { margin: 10px auto; padding: 26px 22px; }
  #setup::before { font-size: 130px; top: -16px; }
  .doc-wall { grid-template-columns: 1fr; }
  .annal-cols { grid-template-columns: 1fr; }
  #view-archive .panel.paper, #view-admin .panel.paper { padding: 20px 20px 24px; }
  /* 覆盖层贴底成抽屉 */
  .sheet {
    left: 0; right: 0; top: auto; bottom: 0; transform: none;
    width: 100%; max-height: 80dvh;
    padding: 14px 18px calc(16px + env(safe-area-inset-bottom));
    border-left: none; border-right: none; border-bottom: none;
    animation: sheetUp .35s cubic-bezier(.2, .8, .3, 1) both;
  }
  @keyframes sheetUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
  #landing { margin: 4vh auto 0; }
  .cover { padding: 30px 24px 26px; }
  .cover::before { font-size: 96px; top: 4px; right: 14px; }
  .seal { width: 64px; height: 64px; top: 20px; right: 18px; font-size: 19px; }
  .spine { display: none; }
  .cover-toc { gap: 6px 14px; }
}
@media (max-width: 480px) {
  .setup-row { flex-direction: column; align-items: stretch; }
  .setup-row select { min-width: 0; }
  .table { font-size: 12px; display: block; overflow-x: auto; }
  .inv-grid { grid-template-columns: repeat(3, 1fr); }
  .m-run { flex-direction: column; gap: 2px; }
}
/* 矮屏（笔记本/横屏手机）：境况带再收一档，书页保住行数 */
@media (max-height: 760px) {
  #vitals { margin: 8px 0 7px; padding-bottom: 7px; }
  #topbar { padding: 6px 4px 5px; }
  #topbar::after { margin-top: 4px; }
  #narration { padding-top: 12px; }
}
/* 键盘可达：焦点态与输入一致 */
button:focus-visible, .opt:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-wash); }

/* ——— 9. 动效可关（尊重前庭敏感，也在选单里给玩家开关） ——— */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}
body.motion-off *, body.motion-off *::before, body.motion-off *::after { animation: none !important; transition: none !important; }
body.motion-off { scroll-behavior: auto; }

/* —— 删除存档：菜单行内删 + 回忆录书架删（两步确认，armed 态朱砂） —— */
.m-run-row { display: flex; gap: 7px; align-items: stretch; }
.m-run-row .m-run { flex: 1; min-width: 0; }
.m-del {
  flex: none; font: inherit; font-size: 12px; letter-spacing: .18em;
  color: var(--ink-3); background: var(--paper-hi); border: 1px solid var(--rule);
  padding: 0 13px; cursor: pointer; transition: color .25s, border-color .25s, background .25s;
}
.m-del:hover { color: var(--accent); border-color: var(--accent); }
.m-del.armed { color: var(--accent-2); border-color: var(--accent); background: var(--accent-wash); letter-spacing: .08em; }
.m-del:disabled { opacity: .5; cursor: default; }
.memoir-del {
  font: inherit; font-size: 11px; letter-spacing: .14em; margin-top: 8px;
  color: var(--ink-3); background: none; border: 1px solid var(--rule); padding: 3px 12px; cursor: pointer;
  transition: color .25s, border-color .25s;
}
.memoir-del:hover { color: var(--accent); border-color: var(--accent); }
.memoir-del.armed { color: var(--accent-2); border-color: var(--accent); background: var(--accent-wash); }
.memoir-del:disabled { opacity: .5; cursor: default; }
/* ════════════════════════════════════════════════════════════════
   叙事双轴（叙事双轴-v0.1）：左轴右翼布局 · 舆图 · 史卷 · 高亮标注
   ════════════════════════════════════════════════════════════════ */

/* —— 左轴右翼：书页居左，舆图与史卷立在案头右侧 —— */
#stage { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) clamp(236px, 24vw, 316px); gap: 0 16px; animation: none; transform: none; }
#stage-left { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
#wing { display: flex; flex-direction: column; gap: 12px; min-height: 0; padding-top: 14px; }
.wing-card {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--paper); background-image: var(--grain);
  border: 1px solid #241608;
  box-shadow: inset 0 0 0 1px var(--gold-dim), 0 2px 0 var(--shadow);
  padding: 12px 14px;
}
.wing-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; border-bottom: 1px solid var(--gold-dim); padding-bottom: 6px; }
.wing-kicker { font-family: var(--font-li); font-size: 13px; letter-spacing: .32em; color: var(--brass); }
.wing-sub { font-size: 10px; letter-spacing: .22em; color: var(--ink-3); }
.wing-note { font-size: 11px; color: var(--ink-3); letter-spacing: .05em; margin-top: 8px; }
#map-panel { flex: none; }
#chronicle-panel { flex: 1; }
#map-box { position: relative; }
#map-box::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s;
  border-radius: 2px;
}
#map-box.frost::after { opacity: 1; background: rgba(168, 205, 220, .15); }
#map-box.rainy::after { opacity: 1; background: rgba(90, 138, 168, .18); }

/* —— 舆图 SVG：手绘线稿，未闻不显、已知淡、今夜亮 —— */
.map-svg { width: 100%; height: auto; display: block; color: var(--ink-2); }
.mp-river { fill: rgba(106, 138, 154, .34); stroke: rgba(106, 138, 154, .6); stroke-width: .4; }
.mp-water { fill: none; stroke: rgba(106, 138, 154, .55); stroke-width: .7; stroke-linecap: round; }
.mp-moat { fill: none; stroke: rgba(106, 138, 154, .5); stroke-width: .9; stroke-dasharray: 2.4 1.6; }
.mp-wall { fill: rgba(35, 42, 47, .5); stroke: var(--ink-2); stroke-width: .8; }
.mp-gate { fill: var(--brass); }
.mp-lane { fill: none; stroke: var(--rule); stroke-width: .35; stroke-dasharray: 1.2 1.2; }
.mp-label { fill: var(--ink-3); font-size: 3px; letter-spacing: .3em; font-family: var(--font-kai); }
.map-svg.frost { filter: saturate(.72) brightness(1.04); }
.map-svg.rainy .mp-river { fill: rgba(106, 138, 154, .5); }
.place circle { fill: var(--paper-hi); stroke: var(--ink-3); stroke-width: .5; }
.place text { fill: var(--ink-3); font-size: 3.1px; letter-spacing: .08em; font-family: var(--font-kai); }
.place.known circle { stroke: var(--ink-2); }
.place.known text { fill: var(--ink-2); }
.place.tonight circle { fill: var(--accent); stroke: var(--accent-2); stroke-width: .9; }
.place.tonight text { fill: var(--accent-2); font-weight: 700; }
.mp-route { stroke: var(--accent-2); stroke-width: .55; stroke-dasharray: 1.8 1.4; }
.trace { pointer-events: auto; }
.trace .tr-st { stroke: var(--accent); stroke-width: .62; fill: none; stroke-linecap: round; }
.trace .tr-fl { fill: var(--accent); }

/* —— 史卷：史书体日笔（大事）＋闲笔＋回响＋我方一行 —— */
#chronicle-box { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
#chronicle-box::-webkit-scrollbar { width: 4px; }
#chronicle-box::-webkit-scrollbar-thumb { background: var(--rule-strong); border-radius: 2px; }
.chron-day { border-left: 2px solid var(--rule); padding: 4px 0 8px 10px; margin: 2px 0 6px; }
.chron-head { display: flex; align-items: baseline; gap: 8px; }
.chron-d { font-family: var(--font-stele); font-size: 10.5px; color: var(--ink-3); letter-spacing: .12em; flex: none; }
.chron-act { font-size: 9.5px; letter-spacing: .2em; color: var(--brass); }
.chron-act.chron-dim { color: var(--ink-3); opacity: .7; }
.chron-flag { font-size: 9.5px; letter-spacing: .2em; color: var(--accent-2); border: 1px solid var(--accent-wash); padding: 0 4px; }
.chron-text { font-family: var(--font-stele); font-size: 12.5px; color: var(--ink-2); line-height: 1.7; margin: 3px 0 1px; }
.chron-pen { font-family: var(--font-kai); font-size: 11.5px; color: var(--ink-3); line-height: 1.6; margin: 2px 0 0; }
.chron-mir { font-family: var(--font-kai); font-size: 11.5px; color: var(--cold); line-height: 1.6; margin: 2px 0 0; }
.chron-dig { font-size: 10.5px; color: var(--moss); letter-spacing: .04em; margin: 3px 0 0; }
.chron-day.chron-end { border-left-color: var(--accent); }
.chron-day.chron-end .chron-text { color: var(--ink); }

/* —— 高亮标注（叙事双轴 §6）：人朱 / 地青 / 物金 / 事玄 / 决绛 / 伏暗金 —— */
.mk { padding: 0 1px; }
.mk-p { color: var(--accent-2); }
.mk-l { color: #8fb8c9; }
.mk-i { color: var(--brass); border-bottom: 1px dotted var(--gold-dim); }
.mk-e { color: var(--ink); font-weight: 700; }
.mk-d { color: var(--accent-2); background: var(--accent-wash); border-bottom: 1px solid var(--accent); }
.mk-f { color: var(--brass); text-decoration: underline dotted rgba(212, 175, 55, .5); text-underline-offset: 3px; }

/* —— 序章文本幕：卷首/前传/合流的排版（与卡拍同宗，长文居中书页） —— */
.prelude-beat p { margin: 0 0 .9em; }
.prelude-beat p:first-of-type { margin-top: .2em; }
.opt.opt-ghost .key { color: var(--ink-3); }
.opt.opt-ghost span:last-child { color: var(--ink-3); }

/* —— 窄屏：右翼落为两卡并排，书页独占上行 —— */
@media (max-width: 1080px) {
  #stage { grid-template-columns: 1fr; }
  #wing { flex-direction: row; padding-top: 0; }
  .wing-card { flex: 1; min-height: 180px; }
  #chronicle-box { max-height: 220px; }
}
@media (max-width: 640px) {
  #wing { flex-direction: column; }
  #map-box { max-width: 340px; }
}