/* ══════════════════════════════════════════════════════════
   诡秘之主 · 灰雾之下　外壳样式
   暗金羊皮纸主题。零外部资源：字体走系统栈，无图片、无外链。
   ══════════════════════════════════════════════════════════ */

:root {
  --bg:         #0e0b08;
  --bg-glow:    #1c1510;
  --panel:      #1a1510;
  --panel-2:    #221b13;
  --panel-3:    #2b2118;
  --line:       #3b2f1e;
  --line-soft:  rgba(200, 162, 86, .13);
  --gold:       #c8a256;
  --gold-2:     #a8853f;
  --gold-dim:   #7d6434;
  --text:       #e9ddc2;
  --text-1:     #f0e6d2;
  --text-2:     #a99a7c;
  --text-3:     #7b6f59;
  --danger:     #b45a45;
  --warn:       #c08a3e;
  --ok:         #7d9459;
  --up:         #7fd08a;
  --down:       #e0715f;
  --occult:     #8f7cad;
  --paper:      #17120d;
  --paper-2:    #241a12;
  --r:          8px;
  --font-serif: Georgia, "Times New Roman", "Songti SC", SimSun, serif;
  --font-sans:  "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", system-ui, sans-serif;

  /* ══════════ 控件专用变量（v1.5 · 老板待办⑦「按钮美观」）══════════
     ★ 为什么单开一组：按钮/输入框/分段控件反复用到几个**底色与语义色的分档**，
       以前它们在规则里写死（var(--sunken) / #241b0c / #9cb47a…），
       于是同一个绿出现三种、同一个凹陷底散落好几处 —— 改一处忘三处。
       现在全部集中在这里，规则里只准 var()。 */
  --sunken:      #150f0b;              /* 凹陷底：输入框、分段控件、未点亮的圆点 */
  --sunken-wash: rgba(0, 0, 0, .22);   /* 压在内容底下的浅黑（判定日志之类） */
  --raise:       #2b2118;              /* 凸起底：默认按钮（与 panel-3 同值，语义分开） */
  --ink-on-gold: #241b0c;              /* 金底上的字（对比度够，不刺眼） */
  /* 金色的三级水洗（hover 底 / 选中底亮端 / 选中底暗端） */
  --gold-wash:   rgba(200, 162, 86, .07);
  --gold-wash-2: rgba(200, 162, 86, .17);
  --gold-wash-3: rgba(200, 162, 86, .05);
  --danger-wash: rgba(180, 90, 69, .09);
  --danger-soft: #cf8b76;              /* 破坏性按钮的常态字色 */
  --danger-bright: #e5a48f;            /* 破坏性按钮 hover 的字色 */
  /* 绿色的三档（原来 #9cb47a / #c3d8a3 是硬编码的第 2、3 种绿） */
  --ok-soft:     #9cb47a;
  --ok-bright:   #c3d8a3;
  --ok-line:     rgba(125, 148, 89, .5);
  --ok-wash:     rgba(125, 148, 89, .1);
  /* 圆角三档：按钮 / 小片 / 卡片 */
  --r-btn:       6px;
  --r-chip:      4px;
  --r-card:      10px;
  /* 键盘焦点环 */
  --focus-ring:  rgba(200, 162, 86, .55);
  /* 主要按钮色统一从这里取，主题调整时不用在规则里逐个找色值。 */
  --btn-border:       #536352;
  --btn-bg:           #2b372e;
  --btn-border-hover: #b99c69;
  --btn-bg-hover:     #38483b;
  --btn-text-hover:   #f1dfb9;
  --btn-primary-text:       #241b0e;
  --btn-primary-border:     #d8bd88;
  --btn-primary-bg:         #c5a670;
  --btn-primary-text-hover: #21180c;
  --btn-primary-bg-hover:   #ddc18b;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background:
    radial-gradient(1200px 700px at 22% -10%, #241a12 0%, transparent 60%),
    radial-gradient(900px 600px at 100% 100%, #1a130d 0%, transparent 55%),
    var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #3a2e1d;
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--gold-dim); background-clip: content-box; }

.hidden { display: none !important; }
.row { display: flex; align-items: center; gap: 10px; }
.row.end { justify-content: flex-end; margin-top: 14px; }
.center { text-align: center; }

/* ─────────── 通用组件 ─────────── */

.card {
  background: linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 100%);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px 18px 18px;
}

.card-t {
  margin: 0 0 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .16em;
  color: var(--gold);
}

.hint {
  margin: 0 0 12px;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--text-2);
}
.hint b { color: var(--gold); font-weight: 400; }
.hint.dim { color: var(--text-3); margin: 10px 0 0; font-size: 12px; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field[hidden] { display:none; }
.field > span { font-size: 12px; letter-spacing: .08em; color: var(--text-2); }

input[type="text"], input[type="number"], input[type="password"], select, textarea {
  width: 100%;
  padding: 9px 11px;
  background: #120e0a;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font-family: inherit;
  font-size: 13.5px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--gold-dim);
  box-shadow: 0 0 0 3px rgba(200, 162, 86, .09);
}
input::placeholder { color: #5f5546; }
select { cursor: pointer; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ══════════════════════════════════════════════════════════════════════
   按钮规范（v1.5 · 老板待办⑦「按钮美观」）
   ──────────────────────────────────────────────────────────────────────
   三类按钮 + 三档尺寸 + **五档状态，一档都不能少**。
   改按钮先看这里；别在别处现改 padding / 颜色 / 圆角。

   ① 尺寸：**最小热区**是关键（不是好看）
        .btn          最小 32px 高（默认）
        .btn.mini     最小 26px 高（列表行内、面板里的批量操作）
        .icobtn       最小 24px 高（行内小按钮：改 / 删 / ＋ 添加）
        .btn.big      最小 40px 高（主行动，如「踏入灰雾」）
        ★ 高度用 min-height + 上下 0 padding —— 以前靠 9px 的上下 padding 撑，
          中文行高一看字体就变，"同屏按钮高度不一"就是这么来的。

   ② 语义：颜色**只准从 :root 变量取**
        .btn          默认（描边 + 凸起底）
        .btn.primary  主行动（金色实心）
        .btn.ghost    次行动（透明底）
        .btn.danger   破坏性（红：清空、删除）
        .icobtn.ok    确认（绿）

   ③ 五档状态
        常态 / :hover / :active（按下）/ :focus-visible（键盘）/ :disabled
        ★★ hover 与 active 一律写成 `:not(:disabled)` —— 否则**禁用按钮照样变色**，
           看着像能点。以前就是这个问题（这条有自检盯着）。
        ★ 按下给一点点位移（translateY(1px)），手感差别的来源就在这里。
        ★ 键盘焦点必须可见（Tab 走一圈要能看见自己在哪）。
   ══════════════════════════════════════════════════════════════════════ */
.btn {
  min-height: 32px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  background: var(--raise);
  color: var(--text);
  font-family: inherit;
  font-size: 13.5px;
  letter-spacing: .06em;
  cursor: pointer;
  transition: background .14s, border-color .14s, color .14s, transform .06s, box-shadow .14s;
}
.btn:hover:not(:disabled) { border-color: var(--gold-dim); color: var(--gold); background: var(--panel-2); }
.btn:active:not(:disabled) { transform: translateY(1px); background: var(--sunken); border-color: var(--gold-dim); }
.btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.primary {
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-2) 100%);
  border-color: var(--gold-2);
  color: var(--ink-on-gold);
  font-weight: 700;
  letter-spacing: .12em;
}
.btn.primary:hover:not(:disabled) {
  filter: brightness(1.09); color: var(--ink-on-gold); background: linear-gradient(180deg, var(--gold) 0%, var(--gold-2) 100%);
}
.btn.primary:active:not(:disabled) {
  filter: brightness(.96); transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .25);
}
.btn.ghost { background: transparent; }
.btn.ghost:hover:not(:disabled) { background: var(--gold-wash); }
.btn.ghost:active:not(:disabled) { background: var(--gold-wash-2); }
.btn.danger { border-color: rgba(180, 90, 69, .45); color: var(--danger-soft); }
.btn.danger:hover:not(:disabled) { border-color: var(--danger); color: var(--danger-bright); background: var(--danger-wash); }
.btn.danger:active:not(:disabled) { background: rgba(180, 90, 69, .16); transform: translateY(1px); }
.btn.mini { min-height: 26px; padding: 0 10px; font-size: 12px; }
.btn.big { min-height: 40px; padding: 0 22px; font-size: 14.5px; }
.btn.wide { display: block; width: 100%; text-align: left; margin-bottom: 6px; }

/* 选择网格 */
.pickgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px;
}
.pick {
  position: relative;
  min-height: 38px;
  padding: 9px 10px;
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  color: var(--text-2);
  font-size: 13px;
  text-align: center;
  cursor: pointer;
  transition: background .14s, border-color .14s, color .14s, transform .06s;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pick:hover { border-color: var(--gold-dim); color: var(--text); }
/* 选择卡也是"按下去要有反应"的控件（同一条按钮规范） */
.pick:active { transform: translateY(1px); background: var(--panel-2); }
.pick.on {
  background: linear-gradient(180deg, rgba(200, 162, 86, .16), rgba(200, 162, 86, .05));
  border-color: var(--gold-2);
  color: var(--gold);
}
.pick.on::after {
  content: "";
  position: absolute; top: 0; right: 0;
  border: 6px solid transparent;
  border-top-color: var(--gold);
  border-right-color: var(--gold);
}
.pick .sub { display: block; font-size: 11px; color: var(--text-3); }
.pick.on .sub { color: var(--gold-dim); }
.pick-group { margin: 4px 0 10px; font-size: 11.5px; letter-spacing: .14em; color: var(--text-3); }
.pick-group span { color: var(--warn); }

/* 属性分配 */
.attrlist { display: flex; flex-direction: column; gap: 10px; }
.attrrow { display: grid; grid-template-columns: 92px 1fr 84px; align-items: center; gap: 10px; }
.attrrow > span { font-size: 13px; color: var(--text-2); }
.attrdots { display: flex; gap: 6px; }
.dot {
  width: 26px; height: 22px; border-radius: 4px;
  border: 1px solid var(--line); background: var(--sunken);
  cursor: pointer; transition: all .12s;
}
.dot.on { background: var(--gold-2); border-color: var(--gold); }
.dot.off { opacity: .28; cursor: not-allowed; }
.attrval { text-align: right; font-family: var(--font-serif); font-size: 15px; color: var(--gold); white-space: nowrap; }
.attrval .bump { font-style: normal; color: var(--up, #7fd08a); margin: 0 2px; font-size: 12px; }
.attrval .bump.jobb { color: var(--gold, #c9a35a); }
.attrval b { color: var(--gold); }
#cAttrLeft.ok { color: var(--up, #7fd08a); }
#cAttrLeft.bad { color: var(--down, #e0715f); }

/* ── 技能加点（v1.9）──
   复用属性那套圆点，只把名字列加宽一点（技能名带括号后缀，比属性名长）。 */
.skillrow { grid-template-columns: 128px 1fr 78px; }
.skillrow > span { font-size: 12.5px; }
.skillhead {
  font-size: 12px; letter-spacing: .5px; color: var(--gold);
  margin: 12px 0 6px; padding-bottom: 4px; border-bottom: 1px dashed var(--line);
}
.skillhead:first-child { margin-top: 2px; }
/* 被拒的原因贴在那一行下面（整行占满三列） */
.skillmsg {
  grid-column: 1 / -1; margin-top: 2px;
  font-size: 12px; color: var(--down, #e0715f);
}
.skillgroup { margin: 12px 0 2px; }
.skillgroup > summary {
  cursor: pointer; font-size: 12.5px; color: var(--text-2);
  padding: 6px 0; border-bottom: 1px dashed var(--line);
}
.skillgroup > summary:hover { color: var(--gold); }
#cSkillLeft.ok { color: var(--up, #7fd08a); }
#cSkillLeft.bad { color: var(--down, #e0715f); }

/* 角色卡页的八属性四列表（基础 / 增幅 / 最终） */
.attrgrid {
  display: grid;
  grid-template-columns: 1fr 52px 56px 56px;
  gap: 4px 8px;
  align-items: center;
  font-size: 13px;
}
.attrgrid > div { color: var(--text-2); }
.attrgrid .ag-h { font-size: 11px; color: var(--text-3, var(--text-2)); opacity: .8; border-bottom: 1px solid var(--line-soft); padding-bottom: 3px; }
.attrgrid .ag-n { text-align: right; font-family: var(--font-serif); color: var(--text-1); }
.attrgrid .ag-n.up { color: var(--up, #7fd08a); }
.attrgrid .ag-n.dim2 { color: var(--text-3, var(--text-2)); opacity: .45; }
.attrgrid .ag-n.fin { color: var(--gold); font-weight: 600; }
/* 变量页里「基础值」是可以点着改的 —— 得看起来像能点（不然又是一个"看不出能点等于没做"） */
.attrgrid .ag-edit {
  all: unset; text-align: right; font-family: var(--font-serif);
  color: var(--gold-2, var(--gold)); cursor: pointer;
  border-bottom: 1px dashed var(--line); padding: 1px 4px;
  transition: background .14s, border-color .14s;
}
.attrgrid .ag-edit:hover, .attrgrid .ag-edit:focus-visible {
  background: rgba(198, 160, 90, .14); border-bottom-color: var(--gold);
}
/* 变量页底部的原始 JSON 折叠块 */
.rawdump { margin-top: 12px; }
.rawdump > summary { cursor: pointer; font-size: 12px; color: var(--text-3, var(--text-2)); }
.rawdump > pre {
  margin: 6px 0 0; padding: 8px 10px; max-height: 260px; overflow: auto;
  background: rgba(0, 0, 0, .28); border: 1px solid var(--line-soft); border-radius: 6px;
  font-size: 11px; line-height: 1.5; color: var(--text-2); white-space: pre-wrap; word-break: break-all;
}

/* 分段控件（同属按钮规范：五档状态一样不能少） */
.seg { display: flex; border: 1px solid var(--line); border-radius: var(--r-btn); overflow: hidden; }
.seg-btn {
  flex: 1; min-height: 32px; display: flex; align-items: center; justify-content: center;
  padding: 0 6px; text-align: center;
  background: var(--sunken); color: var(--text-2);
  font-size: 13px; cursor: pointer;
  transition: background .14s, color .14s, transform .06s;
  border-right: 1px solid var(--line);
}
.seg-btn:last-child { border-right: 0; }
.seg-btn:hover:not(.on) { color: var(--text); }
.seg-btn:active { transform: translateY(1px); }
.seg-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.seg-btn.on { background: linear-gradient(180deg, var(--gold-wash-2), var(--gold-wash-3)); color: var(--gold); }

/* ─────────── ① 建档向导 ─────────── */

.screen { height: 100%; }

.create-head {
  padding: 34px 0 22px;
  text-align: center;
}
.create-head h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 34px;
  font-weight: 400;
  letter-spacing: .34em;
  text-indent: .34em;
  color: var(--gold);
  text-shadow: 0 0 28px rgba(200, 162, 86, .28);
}
.brand-sub {
  margin: 10px 0 0;
  font-size: 12px;
  letter-spacing: .28em;
  color: var(--text-3);
}

.create-body {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px 60px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 286px;
  gap: 20px;
  align-items: start;
}
.create-form { display: flex; flex-direction: column; gap: 16px; }

.create-side {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.create-side .btn { width: 100%; }

.summary-card { padding-bottom: 8px; }
.srow {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 6px 0;
  font-size: 13px;
  border-bottom: 1px dashed rgba(200, 162, 86, .1);
}
.srow:last-child { border-bottom: 0; }
.srow > span:first-child { color: var(--text-3); flex: none; }
.srow > span:last-child { color: var(--text); text-align: right; }
.srow.hi > span:last-child { color: var(--gold); font-family: var(--font-serif); letter-spacing: .06em; }

/* ─────────── ② 主界面 ─────────── */

.game {
  height: 100vh;
  display: grid;
  /* ★ v0.22 HUD：最左多一栏常驻状态柱（132px）。它在窄屏会折成顶部横带，见文件末尾的断点。 */
  grid-template-columns: 132px minmax(0, 1fr) 344px;
  /* ★ 不走 overflow —— 靠子项各自的 min-height:0 + overflow 撑住。
     这里 overflow:hidden 是兜底：万一哪块算漏了，也不会把整个网页撑长。 */
  overflow: hidden;
}

.game-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* ★★★ 关键：flex 子项默认 min-height:auto，内容多了会把容器顶开 →
     整个网页被撑长、正文区永远不出现滚动条（老板实测："正文无法滑动，
     会一直增加网页的长度"）。必须显式给 0，里面的 .narrative-wrap 才能接管滚动。 */
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid var(--line);
}

.statusbar {
  display: flex; align-items: center; gap: 14px;
  padding: 9px 18px;
  background: linear-gradient(180deg, #1e1710, #17120c);
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  flex: none;
  /* ★ v0.22：左缘 HUD 拿走 132px 之后，顶栏可用宽度变窄。
     不加这两行的话，右边三个按钮会被压成竖排（接/口、存/档、重/开）——
     老板实测截图里就是这个样子。改成：按钮绝不缩，文字项超出就用省略号。 */
  flex-wrap: nowrap; overflow: hidden;
}
.sb-time, .sb-loc, .sb-cash, .sb-mood {
  min-width: 0; flex: 0 1 auto;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-time { color: var(--gold); font-family: var(--font-serif); letter-spacing: .08em; }
.sb-loc  { color: var(--text-2); }
.sb-loc::before { content: "◎ "; color: var(--gold-dim); }
.sb-cash { color: var(--gold-2); }
.sb-spacer { flex: 1 1 0; min-width: 0; }
.sb-mood { color: var(--text-3); font-style: italic; }
/* 顶栏上那三个按钮（接口 / 存档 / 重开）永远保持横排完整 */
.statusbar .btn { flex: none; white-space: nowrap; }

.narrative-wrap {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 26px 40px 10px;
  /* ★ flex 子项必须是 0 才能正常收缩并出现滚动条 */
  min-height: 0;
  /* 滚动链：正文区自己滚，别把滚动传给页面 */
  overscroll-behavior: contain;
}
/* 滚动条也做暗金一点，别用系统默认的亮条 */
.narrative-wrap::-webkit-scrollbar { width: 9px; }
.narrative-wrap::-webkit-scrollbar-track { background: transparent; }
.narrative-wrap::-webkit-scrollbar-thumb {
  background: rgba(200, 162, 86, .22); border-radius: 5px;
}
.narrative-wrap::-webkit-scrollbar-thumb:hover { background: rgba(200, 162, 86, .38); }
.narrative { max-width: 700px; margin: 0 auto; }
.narrative p { margin: 0 0 1.15em; line-height: 1.95; }

.narr-turn { margin-bottom: 26px; content-visibility: auto; contain-intrinsic-size: auto 480px; }
.narr-turn .act {
  margin: 0 0 14px;
  padding: 7px 14px;
  border-left: 2px solid var(--gold-dim);
  background: rgba(200, 162, 86, .05);
  color: var(--text-2);
  font-size: 13px;
}
.narr-turn .act::before { content: "你 › "; color: var(--gold-dim); }
.narr-turn .txt { font-size: 15px; letter-spacing: .015em; }

/* 回合操作条：平时很淡（不抢正文重心），鼠标移到这一轮才显出来 */
.msg-acts {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 8px;
  /* ★ 别太淡：老板第一眼要能看出这里能点（0.22 时几乎看不见 = 等于没做） */
  opacity: .55;
  transition: opacity .15s;
}
.narr-turn:hover .msg-acts,
.msg-acts:hover,
.msg-acts:focus-within { opacity: 1; }
.msg-acts .icobtn { margin-left: 0; }
.msg-acts .icobtn:hover { color: var(--gold); border-color: var(--gold-dim); }

.roll {
  display: inline-block;
  margin: 0 3px;
  padding: 1px 7px;
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  background: var(--sunken);
  font-size: 12px;
  color: var(--text-2);
  font-family: var(--font-serif);
}
.roll.ok    { border-color: rgba(125, 148, 89, .5); color: var(--ok); }
.roll.fail  { border-color: rgba(180, 90, 69, .5); color: var(--danger); }
.roll.crit  { border-color: var(--gold); color: var(--gold); }

.sys-line {
  margin: 0 0 16px;
  padding: 8px 12px;
  border: 1px dashed var(--line);
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--text-3);
}

.suggest-bar {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 0 40px 12px;
  max-width: 780px;
  margin: 0 auto;
  width: 100%;
  flex: none;
}
.suggest {
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(34, 27, 19, .7);
  color: var(--text-2);
  font-size: 12.5px;
  cursor: pointer;
  transition: all .15s;
}
.suggest:hover { border-color: var(--gold-dim); color: var(--gold); }

/* 临时指令：默认收起，一行按钮；展开才显出输入框 */
.tempbar {
  max-width: 780px;
  margin: 0 auto;
  width: 100%;
  padding: 0 40px 8px;
  flex: none;
}
.temp-toggle {
  background: none; border: 0; padding: 2px 0;
  color: var(--text-2); font-size: 12.5px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.temp-toggle:hover { color: var(--gold); }
.temp-toggle[aria-expanded="true"] { color: var(--gold); }
.tt-caret { display: inline-block; transition: transform .15s; }
.temp-toggle[aria-expanded="true"] .tt-caret { transform: rotate(90deg); }
.tt-badge {
  font-size: 11px; padding: 1px 7px; border-radius: 10px;
  border: 1px solid var(--gold-dim); color: var(--gold);
}
.temp-body { margin-top: 6px; }
.temp-body textarea {
  width: 100%; box-sizing: border-box; resize: vertical;
  padding: 9px 12px; font-size: 13px; line-height: 1.5;
  background: rgba(34, 27, 19, .7); color: var(--text-1);
  border: 1px solid var(--line); border-radius: 8px;
  font-family: inherit;
}
.temp-body textarea:focus { outline: none; border-color: var(--gold-dim); }
.temp-foot { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.temp-hint { flex: 1; font-size: 11.5px; color: var(--text-3, var(--text-2)); opacity: .75; }

.composer {
  display: flex; gap: 10px;
  padding: 14px 40px 20px;
  border-top: 1px solid var(--line-soft);
  flex: none;
}
/* ── 判定日志（老板待办⑪ (b)）──
   照参考卡「判定日志总阀」：它排在正文之前，是"这一轮怎么判"的账。
   ★ 默认**收起**：参考卡是直接铺开的，26 项会把正文挤到屏幕外；
     这里收成一行摘要，想看再展开 —— 可审计性留着，视线不占。 */
.composer input { flex: 1; padding: 11px 14px; font-size: 14px; }
.judge-block {
  margin: 4px 0 8px;
  border-left: 2px solid var(--gold-dim);
  background: var(--sunken-wash);
  border-radius: 0 var(--r-chip) var(--r-chip) 0;
}
.judge-block > summary {
  cursor: pointer; padding: 6px 10px;
  font-size: 12px; letter-spacing: .06em; color: var(--text-2);
  list-style: none;
}
/* ★ 2026-09-23 老板报"每轮的 AI 判定看不到" —— 原来是 text-3（最暗的一档）、11.5px，
   混在系统行里根本注意不到。行数提亮成金色、摘要加粗：每轮固定有这么一块，一眼可见。 */
.judge-block > summary b { color: var(--gold); font-weight: 700; font-size: 12.5px; }
.judge-block > summary::-webkit-details-marker { display: none; }
.judge-block > summary::before { content: "▸ "; }
.judge-block[open] > summary::before { content: "▾ "; }
.judge-block > summary:hover { color: var(--gold); }
.judge-pre {
  margin: 0; padding: 4px 12px 10px;
  font-family: var(--font-sans); font-size: 12px; line-height: 1.75;
  color: var(--text-2); white-space: pre-wrap; word-break: break-word;
}
/* 发送键：与 .btn.big 同高（最小热区 40px）—— 别再靠上下 padding 撑 */
.composer .btn { min-height: 40px; padding: 0 24px; }
/* 「投骰」是 composer 里的次按钮：跟输入框同高，但不要抢主按钮的视觉 */
.composer #btnDice { flex: none; padding: 0 14px; color: var(--text-2); }
.composer #btnDice:hover:not(:disabled) { color: var(--gold); }
/* 已经投好了 → 明确标出来（不然玩家会忘了这一轮是自掷的） */
.composer #btnDice.armed {
  color: var(--gold); border-color: var(--gold-dim); background: var(--gold-wash);
}

/* ── 玩家自掷面板（老板待办⑬「玩家决定投不投骰」）── */
.dicebar {
  margin: 0 40px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: var(--r-btn) var(--r-btn) 0 0;
  background: var(--panel);
}
.dicebar .db-h {
  font-size: 11.5px; letter-spacing: .1em; color: var(--text-3);
  margin: 8px 0 6px;
}
.dicebar .db-h:first-child { margin-top: 0; }
.dicebar .db-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.dicebar .db-grid .btn { min-height: 26px; padding: 0 10px; font-size: 12px; }
/* 已掷定 / 已声明的那一条 */
.dice-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 11px; border: 1px solid var(--gold-dim); border-radius: var(--r-chip);
  background: var(--gold-wash); font-size: 12.5px; color: var(--gold);
  font-family: var(--font-serif);
}

/* ─────────── HUD 左缘状态柱（v0.22 最小版）───────────
   ★ 为什么加这一栏：五条状态（HP/STA/SP/SAN/消化）原来锁在右栏「角色卡」页里，
     看血条要先切页、离场 —— 等于把"每轮都要扫一眼"的东西放进了抽屉。
     现在把它们常驻在最左缘，正文照旧居中，右侧 18 页签栏一个字没动。
   ★ 点击校准跟角色卡上的条走**同一个** data-x={k:'hp'} 通道（dispatchData → editBar），
     所以手工改数那套不用另写一份，两边永远一致。 */
.game-hud {
  display: flex; flex-direction: column; gap: 11px;
  padding: 13px 10px;
  background: linear-gradient(180deg, #191410, #120e0a);
  border-right: 1px solid var(--line);
  min-height: 0; overflow-y: auto;
}
.hud-id { padding-bottom: 11px; border-bottom: 1px solid var(--line-soft); }
.hud-nm { font-family: var(--font-serif); font-size: 14px; color: var(--gold); letter-spacing: .06em; overflow-wrap: anywhere; }
.hud-sub { margin-top: 4px; font-size: 11px; line-height: 1.45; color: var(--text-3); letter-spacing: .08em; }
.hudbar { cursor: pointer; }
.hudbar .hb-top { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; margin-bottom: 4px; }
.hudbar .hb-lb { font-size: 11.5px; color: var(--text-3); letter-spacing: .04em; }
.hudbar .hb-v { font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.hudbar .hb-track {
  /* ★ 9px：窄栏里 7px 太细，扫一眼看不出来（老板截图后复看时定的） */
  height: 9px; border-radius: 5px;
  background: #0f0b07; border: 1px solid var(--line); overflow: hidden;
}
.hudbar .hb-track > i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--gold-2), var(--gold));
  transition: width .35s ease;
}
.hudbar.lv-ok   .hb-track > i { background: linear-gradient(90deg, #4d6136, var(--ok)); }
.hudbar.lv-warn .hb-track > i { background: linear-gradient(90deg, #8a6220, var(--warn)); }
.hudbar.lv-low  .hb-track > i { background: linear-gradient(90deg, #8a3b2b, var(--danger)); }
.hudbar.san.lv-low .hb-track > i { background: linear-gradient(90deg, #4a2a5c, var(--occult)); }
.hudbar:hover .hb-lb { color: var(--text-2); }
.hudbar:hover .hb-track { outline: 1px dashed var(--gold-dim); outline-offset: 2px; }

/* 侧栏 */
.game-side {
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #17120c, #120e0a);
  min-height: 0;
}
.tabs {
  display: flex; flex-wrap: wrap; gap: 2px;
  padding: 8px 8px 0;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.tab {
  padding: 7px 11px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  color: var(--text-3);
  font-size: 12.5px;
  cursor: pointer;
  transition: all .13s;
  white-space: nowrap;
}
.tab:hover { color: var(--text-2); }
.tab.on {
  background: var(--panel-2);
  border-color: var(--line);
  color: var(--gold);
}
.side-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  min-height: 0;
}

/* 角色卡 */
.idcard { text-align: center; padding-bottom: 16px; border-bottom: 1px solid var(--line-soft); margin-bottom: 16px; }
.idcard .nm { font-family: var(--font-serif); font-size: 19px; letter-spacing: .12em; color: var(--gold); }
.idcard .id { margin-top: 4px; font-size: 12.5px; color: var(--text-2); }
.idcard .pw { margin-top: 8px; font-size: 13px; color: var(--occult); letter-spacing: .06em; }

.bar {
  position: relative;
  height: 20px;
  margin: 8px 0;
  background: #0f0b07;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.bar > i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--gold-2), var(--gold));
  transition: width .35s ease;
}
.bar > span {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 8px;
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--text);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}
.bar.lv-low  > i { background: linear-gradient(90deg, #8a3b2b, var(--danger)); }
.bar.lv-warn > i { background: linear-gradient(90deg, #8a6220, var(--warn)); }
.bar.lv-ok   > i { background: linear-gradient(90deg, #4d6136, var(--ok)); }
.bar.san.lv-low > i { background: linear-gradient(90deg, #4a2a5c, var(--occult)); }
.bar.foe { height: 22px; }
.bar.foe > i { background: linear-gradient(90deg, #7a2f22, var(--danger)); }

.kv { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; border-bottom: 1px dashed rgba(200,162,86,.09); }
.kv:last-child { border-bottom: 0; }
.kv > b { font-weight: 400; color: var(--text-3); }
.kv > span { color: var(--text); text-align: right; }

.sec-t {
  margin: 18px 0 10px;
  font-family: var(--font-serif);
  font-size: 13px;
  letter-spacing: .16em;
  color: var(--text-3);
}
.sec-t:first-child { margin-top: 0; }

.pill {
  display: inline-block;
  margin: 0 6px 6px 0;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--sunken);
  font-size: 12px;
  color: var(--text-2);
}
.pill.occult { border-color: rgba(143, 124, 173, .45); color: var(--occult); }
.pill.gold   { border-color: rgba(200, 162, 86, .45); color: var(--gold); }

.itemlist { display: flex; flex-direction: column; gap: 8px; }
.item {
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--gold-dim);
  border-radius: 6px;
  background: var(--sunken);
}
.item .it-n { font-size: 13px; color: var(--text); }
.item .it-d { margin-top: 3px; font-size: 11.5px; color: var(--text-3); line-height: 1.6; }
.item.grade-1 { border-left-color: #7d9459; }
.item.grade-2 { border-left-color: #c08a3e; }
.item.grade-3 { border-left-color: #b45a45; }
.item.grade-4 { border-left-color: var(--occult); }

/* 外神支线以冷紫色与暗金区分来源，多个条目仍保持一眼可扫。 */
.blessing-list .item {
  border-left-color: var(--occult);
  background: linear-gradient(110deg, rgba(143, 124, 173, .10), var(--sunken) 70%);
}
.blessing-list .lnhead { flex-wrap: wrap; }
.blessing-list .lnacts { display: inline-flex; align-items: center; gap: 8px; }
.blessing-list .it-d { color: var(--text-2); }

/* ── 记忆（变量页 · v1.5）：前情 + 长期记忆 ── */
.mem-sub {
  margin: 14px 0 7px;
  padding-bottom: 4px;
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--text-3);
  border-bottom: 1px dashed var(--line);
}
.memlist { display: flex; flex-direction: column; gap: 5px; }
.memrow {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 6px 9px;
  border-radius: 5px;
  border-left: 2px solid var(--line);
  background: rgba(200, 162, 86, .04);
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-2);
}
.memrow b { flex: 0 0 auto; font-weight: 400; font-size: 11px; color: var(--gold-dim); }
.memrow span { flex: 1 1 auto; min-width: 0; word-break: break-word; }

.mapline { display: flex; flex-direction: column; gap: 4px; }
.mnode {
  padding: 6px 10px 6px 26px;
  position: relative;
  border-radius: 5px;
  font-size: 12.5px;
  color: var(--text-3);
  cursor: pointer;
}
.mnode::before {
  content: ""; position: absolute; left: 9px; top: 50%;
  width: 6px; height: 6px; margin-top: -3px;
  border-radius: 50%; background: var(--line);
}
.mnode:hover { background: rgba(200, 162, 86, .06); color: var(--text-2); }
.mnode.on { color: var(--gold); background: rgba(200, 162, 86, .1); }
.mnode.on::before { background: var(--gold); box-shadow: 0 0 8px var(--gold); }

.qitem { padding: 9px 11px; border: 1px solid var(--line); border-radius: 6px; margin-bottom: 8px; background: var(--sunken); }
.qitem .qt { font-size: 13px; color: var(--gold); }
.qitem .qd { margin-top: 4px; font-size: 11.5px; color: var(--text-3); }

.logline {
  padding: 7px 0 7px 14px;
  position: relative;
  font-size: 12.5px;
  color: var(--text-2);
  border-left: 1px solid var(--line-soft);
}
.logline::before {
  content: ""; position: absolute; left: -3px; top: 13px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold-dim);
}
.logline b { color: var(--text-3); font-weight: 400; margin-right: 6px; }

/* ─────────── ③ 战斗层 ─────────── */
.overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6, 4, 2, .82);
  backdrop-filter: blur(3px);
  padding: 24px;
}
/* 弹窗必须高于设置抽屉和页面沉浸层，地图上的详情也能正常操作。 */
#modalLayer { z-index: 300; }
.combat-box, .modal-box {
  width: 100%;
  max-width: 460px;
  padding: 24px 26px;
  background: linear-gradient(180deg, #221b13, #17120c);
  border: 1px solid var(--gold-dim);
  border-radius: 10px;
  box-shadow: 0 0 60px rgba(0, 0, 0, .8), inset 0 0 40px rgba(200, 162, 86, .04);
  /* ★★ 弹窗必须有高度上限 + 内部滚动。
     原来是裸的：内容（比如几百个模型）一长就溢出屏幕，
     滑不动、也够不到底部的按钮 —— 看上去就是"卡死"。
     高度上限用视口的一半，保证任何屏幕下都能看见上下留白与关闭按钮。 */
  max-height: min(86vh, 900px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-box { max-width: 520px; }
/* 弹窗正文：能滚、能长、别把按钮挤出屏幕 */
#modalBody {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}
#modalBody::-webkit-scrollbar { width: 8px; }
#modalBody::-webkit-scrollbar-thumb {
  background: rgba(200, 162, 86, .22); border-radius: 4px;
}
/* 标题与底部按钮不许被压掉 */
.modal-box > h2 { flex: 0 0 auto; }
.modal-box > .row { flex: 0 0 auto; margin-top: 14px; }

.combat-box h2, .modal-box h2 {
  margin: 0 0 6px;
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: .14em;
  color: var(--danger);
}
.modal-box h2 { color: var(--gold); }
.cb-desc { margin: 12px 0 18px; font-size: 13px; color: var(--text-2); }
.cb-cmds { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.confirm-modal-copy { color: var(--text-2); line-height: 1.8; margin: 12px 0 18px; }
.confirm-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

@media (max-width: 1000px) {
  .create-body { grid-template-columns: 1fr; }
  .create-side { position: static; flex-direction: row; flex-wrap: wrap; }
  .create-side .card { flex: 1 1 100%; }
  .game { grid-template-columns: 1fr; grid-template-rows: minmax(0,1fr) auto; }
  .game-main { border-right: 0; }
  .game-side { max-height: 46vh; border-top: 1px solid var(--line); }
  .narrative-wrap { padding: 20px 20px 10px; }
  .suggest-bar, .composer { padding-left: 20px; padding-right: 20px; }
}

/* ══════════════════════════════════════════════════════════
   v0.2 追加：15 页签、可校准数值条、折叠面板、价格表、途径树
   ══════════════════════════════════════════════════════════ */

/* 侧栏放宽一点，15 个页签才排得下；页签做紧凑些 */
.game { grid-template-columns: 132px minmax(0, 1fr) 400px; }
.tabs { padding: 7px 7px 0; gap: 2px; }
.tab { padding: 5px 8px; font-size: 12px; }
.side-body { padding: 14px 16px 40px; }

/* 可手改的数值条 */
.bar.editable { cursor: pointer; }
.bar.editable:hover { outline: 1px dashed var(--gold-dim); outline-offset: 2px; }

/* 纯文本块（能力 / 配方 / 段落） */
.textblock {
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--sunken); font-size: 12.5px; line-height: 1.85; color: var(--text-2);
  margin-bottom: 8px; word-break: break-word;
}

/* 输出契约展示 */
pre.code {
  margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px;
  background: #120d09; color: var(--gold-2); font-size: 11.5px; line-height: 1.7;
  font-family: Consolas, "Courier New", monospace; overflow-x: auto; white-space: pre-wrap;
}

/* 折叠面板 */
.fold { border: 1px solid var(--line); border-radius: 6px; margin-bottom: 8px; background: var(--sunken); }
.fold > summary {
  cursor: pointer; padding: 8px 11px; font-size: 12.5px; color: var(--gold);
  list-style: none; display: flex; justify-content: space-between; gap: 8px; align-items: baseline;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before { content: '▸ '; color: var(--gold-dim); flex: none; }
.fold[open] > summary::before { content: '▾ '; }
.fold-n { color: var(--text-3); font-size: 11px; flex: none; font-weight: 400; }
.fold > .pricelist, .fold > .treelist { padding: 0 11px 10px; }
.fold > .hint { padding: 0 11px 10px; }

/* 价格表 */
.pricerow {
  display: flex; justify-content: space-between; gap: 10px; font-size: 12px;
  padding: 3px 0; border-bottom: 1px dashed rgba(200,162,86,.09); color: var(--text-2);
}
.pricerow span:last-child { color: var(--gold-2); flex: none; }

/* 途径树 */
.treerow { display: flex; gap: 10px; font-size: 12px; padding: 3px 0; color: var(--text-2); }
.treerow b { color: var(--text-3); font-weight: 400; flex: none; width: 46px; }
.treerow.cur { color: var(--gold); }
.treerow.cur b { color: var(--gold-dim); }

/* 整宽按钮（快捷页） */
/* .btn.wide 的定义已挪到上面的「按钮规范」区（这里原来重复定义了一份） */

/* 可点卡片 */
.clickable { cursor: pointer; }
.clickable:hover { border-color: var(--gold-dim); background: #191309; }

/* 警示行（理智档位等） */
.warnline {
  margin: 8px 0 0; padding: 7px 10px; border-left: 2px solid var(--danger);
  background: rgba(180,90,69,.09); font-size: 12px; color: var(--warn);
}

/* 正在流式写入的那一段，末尾一根光标 */
.txt.live::after { content: '▌'; color: var(--gold-dim); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* 设置页里的输入框（侧栏窄，要占满） */
.side-body .field { margin-bottom: 10px; }
.side-body .field > span { font-size: 11.5px; color: var(--text-3); }
.side-body .field input {
  width: 100%; background: #120d09; border: 1px solid var(--line); color: var(--text);
  border-radius: 6px; padding: 7px 9px; font-size: 13px; font-family: inherit;
}
.logline.dim { color: var(--text-3); }

/* 窄屏时把上面那条 grid 改回去 */
/* 小节标题带右侧操作（原来只有纯标题，加按钮得另起一行） */
.sec-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin: 18px 0 10px;
}
.sec-head .sec-t { margin: 0; }
.sec-head:first-child { margin-top: 0; }
.sec-acts { flex: 0 0 auto; }

/* 行内小按钮：改 / 删 / ＋添加
   ★ 最小 24px 高 —— 以前是 padding 1px 7px（约 18px 高），
     视觉上像文字标签、点击热区也太小（鼠标易点错、触控更别谈）。 */
.icobtn {
  margin-left: 5px;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  background: transparent;
  color: var(--text-3);
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: background .14s, border-color .14s, color .14s, transform .06s;
}
.icobtn:hover:not(:disabled) { border-color: var(--gold-dim); color: var(--gold); background: var(--gold-wash); }
.icobtn:active:not(:disabled) { transform: translateY(1px); background: var(--gold-wash-2); }
.icobtn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.icobtn:disabled { opacity: .4; cursor: not-allowed; }
.icobtn.danger:hover:not(:disabled) { border-color: var(--danger); color: var(--danger); background: var(--danger-wash); }
.icobtn.ok { border-color: var(--ok-line); color: var(--ok-soft); }
.icobtn.ok:hover:not(:disabled) { border-color: var(--ok-soft); color: var(--ok-bright); background: var(--ok-wash); }
.fx-note { color: #9cb47a; }

/* 列表行的「左内容 + 右按钮」两段式。
   一行里既有可变长的文字又有按钮，用 flex 才不会互相挤坏。 */
.lnhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.lnhead .lnm { flex: 1 1 auto; min-width: 0; word-break: break-word; }
.note-manager { min-width: 0; }
.note-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.note-toolbar .btn { min-height: 40px; white-space: normal; }
.note-select-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 6px; border-bottom: 1px solid rgba(160,170,180,.18); cursor: pointer; }
.note-select-row input { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; accent-color: #baad8c; }
.note-select-row span { min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; line-height: 1.65; }
#noteDeleteConfirm:not(.hidden) { padding: 12px; margin: 12px 0; border: 1px solid #9e6b63; border-radius: 8px; }
@media (max-width: 600px) { .note-toolbar .btn { flex: 1 1 130px; } }
.lnhead .lnacts { flex: 0 0 auto; white-space: nowrap; padding-top: 1px; }

/* 一行装得下的（物品名 / 任务标题）就单行省略，别让按钮换行 */
.item .lnhead, .qitem .lnhead, .mnode .lnhead { align-items: center; }
.item .lnm.it-n, .qitem .lnm.qt, .mnode .lnm {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 地图节点改成「名字 + 按钮」，所以整行不再是可点区域 */
.mnode {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  cursor: default;
}
.mnode:hover { background: rgba(200, 162, 86, .06); }

/* ─────────── ⑤ 店铺弹窗（街区导览 + 居中商店） ─────────── */
/* 街区卡片 */
.shopcard { padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; margin-bottom: 8px; background: var(--sunken); }
.shopcard:hover { border-color: var(--gold-dim); background: #191309; }
.sc-name { font-size: 14px; color: var(--gold); padding-left: 8px; margin-bottom: 3px; }
.sc-sign { font-size: 12px; color: var(--text-3); margin-bottom: 3px; }
.sc-stock { font-size: 11.5px; color: var(--text-2); }

/* 居中店铺弹窗 */
.fhead { font-family: var(--font-serif); font-size: 18px; letter-spacing: .08em; padding: 2px 0 8px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.ftext { font-size: 13px; line-height: 1.7; color: var(--text-2); max-height: 46vh; overflow-y: auto; white-space: pre-wrap; }
.shop-head { margin-bottom: 10px; padding: 4px 2px 8px; border-bottom: 1px solid var(--line); }
.shop-title { font-family: var(--font-serif); font-size: 20px; letter-spacing: .1em; }
.shop-owner { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.shop-sign { font-size: 12px; color: var(--text-2); margin-top: 4px; font-style: italic; }
.shop-cash { font-size: 12.5px; color: var(--text-2); margin: 4px 0 10px; }
.shop-list { max-height: 52vh; overflow-y: auto; }
.shop-row { display: flex; align-items: center; gap: 8px; padding: 7px 6px; border-bottom: 1px dashed var(--line-soft); }
.shop-row:hover { background: rgba(200,162,86,.05); }
.sr-name { flex: 1 1 auto; min-width: 0; font-size: 13px; }
.sr-name i { font-style: normal; font-size: 11.5px; }
.sr-price { flex: 0 0 auto; color: var(--gold); font-size: 12.5px; }
.sr-acts { flex: 0 0 auto; white-space: nowrap; }
.sr-qty { width: 52px; padding: 4px 6px; font-size: 12px; margin-right: 6px; }

/* 窄屏时把上面那条 grid 改回去 */
@media (max-width: 1000px) {
  /* ★ v0.22 HUD：窄屏下三栏塌成一列 —— 顶 = 左缘栏折成的横带，中 = 正文，底 = 页签栏。
     这里的规则必须写在前面那条 .game 之后，否则会被它盖掉（本项目踩过一次）。 */
  .game { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr) auto; }
  .game-hud {
    flex-direction: row; align-items: center; gap: 8px;
    padding: 8px 10px;
    border-right: 0; border-bottom: 1px solid var(--line);
    overflow-x: auto; overflow-y: hidden;
  }
  .game-hud .hud-id { display: none; }              /* 窄屏省掉姓名/途径，只留五条 */
  .game-hud .hudbar { flex: 1 1 0; min-width: 78px; }
  /* 窄屏顶栏：情绪那项先让位（它是四项里最不常看的），免得跟三个按钮抢宽度 */
  .statusbar { gap: 8px; padding: 7px 12px; }
  .sb-mood { display: none; }
  /* ★ v0.25 HUD：窄屏下抽屉就是"整页切正文"那一档；浮出提示收窄一点免得顶到边 */
  .game.rail-off { grid-template-columns: 0 minmax(0, 1fr) 0; }
  .hud-toast { max-width: 92vw; bottom: 18px; }
  /* ★ v0.27：窄屏下面板抽屉直接铺满整屏（宽度不够，别留缝） */
  .game-side { width: 100vw; }
}

/* ═══════════ 贝克兰德互动地图（独立新窗口层） ═══════════ */
#cityMapLayer {
  position: fixed; inset: 0; z-index: 250;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4, 3, 2, .9);
  backdrop-filter: blur(4px);
  padding: 16px;
}
#cityMapLayer.hidden { display: none; }

.cm-win {
  width: 100%; height: 100%; max-width: 1680px;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #1d1710, #120e09);
  border: 1px solid var(--gold-dim);
  border-radius: 12px;
  box-shadow: 0 0 80px rgba(0, 0, 0, .85), inset 0 0 60px rgba(200, 162, 86, .04);
  overflow: hidden;
}
.cm-head {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(180deg, #2b2118, #1b1510);
  border-bottom: 1px solid var(--line);
}
.cm-logo { color: var(--gold); font-size: 16px; }
.cm-title { font-family: var(--font-serif); font-size: 17px; color: var(--gold); letter-spacing: .5px; }
.cm-alias { font-size: 12px; color: var(--text-3); }
.cm-tip { flex: 1 1 auto; text-align: right; font-size: 12px; color: var(--text-3); padding-right: 6px; }
.cm-tools { flex: 0 0 auto; display: flex; gap: 6px; }
.cm-tb {
  min-width: 30px; padding: 3px 9px;
  background: var(--panel-2); color: var(--text-2);
  border: 1px solid var(--line); border-radius: 6px;
  font-size: 12.5px; cursor: pointer; font-family: var(--font-sans);
}
.cm-tb:hover { color: var(--gold); border-color: var(--gold-dim); }
.cm-x { color: var(--text); }
.cm-x:hover { color: var(--danger); border-color: var(--danger); }

.cm-main { flex: 1 1 auto; display: flex; min-height: 0; }

.cm-stage {
  flex: 1 1 auto; min-width: 0; position: relative; overflow: hidden;
  background: #0b0906;
  display: flex; align-items: center; justify-content: center;
  cursor: grab;
}
.cm-stage:active { cursor: grabbing; }
.cm-canvas {
  position: relative; flex: 0 0 auto;
  transform-origin: center center;
  transition: transform .16s ease-out;
  will-change: transform;
}
.cm-img { width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; border-radius: 4px; }

.cm-distwrap, .cm-pinwrap { position: absolute; inset: 0; }

/* 调试网格（只在 #demo:map:citymap:grid 下出现） */
.cm-gridwrap { position: absolute; inset: 0; pointer-events: none; }
.cm-gl { position: absolute; background: rgba(255, 0, 200, .5); width: 1px; }
.cm-gl.h { width: auto; height: 1px; }
.cm-gl em {
  position: absolute; top: 1px; left: 1px;
  font-size: 9px; font-style: normal; color: #ff0; background: rgba(0, 0, 0, .75);
  padding: 0 2px; line-height: 12px;
}

/* 区名：大色块上的标签，可点＝只看该区 */
.cm-dname {
  position: absolute; transform: translate(-50%, -50%);
  padding: 1px 8px; border-radius: 20px; white-space: nowrap;
  font-size: 12px; font-weight: 700; letter-spacing: 1px;
  color: #fff; background: rgba(0, 0, 0, .5);
  border: 1px solid var(--c, #888);
  box-shadow: 0 0 10px rgba(0, 0, 0, .7);
  cursor: pointer; user-select: none;
}
.cm-dname:hover, .cm-dname.hi { background: var(--c, #888); }
.cm-dname.off { opacity: .25; }

/* 地点光点 */
.cm-pin {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 4px;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.cm-pin i {
  width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto;
  background: var(--gold); border: 1.5px solid #fff;
  box-shadow: 0 0 7px rgba(0, 0, 0, .9), 0 0 0 2px rgba(0, 0, 0, .35);
}
.cm-pin b {
  display: none; white-space: nowrap;
  font-size: 11px; font-weight: 400; font-family: var(--font-sans);
  color: #f3ead6; background: rgba(0, 0, 0, .74);
  border: 1px solid rgba(200, 162, 86, .3); border-radius: 4px;
  padding: 0 5px; line-height: 16px;
}
.cm-pin:hover i { background: #ffd97a; transform: scale(1.35); }
.cm-pin:hover b, .cm-pin.sel b { display: block; }
.cm-pin.sel i { background: #ff9d4d; width: 13px; height: 13px; box-shadow: 0 0 12px #ff9d4d; }
.cm-pin.off { opacity: .22; }
/* 放大到一定程度，标签全开 */
.cm-canvas.zoomed .cm-pin b { display: block; }

/* ── 信息迷雾：三态 ── */

/* 未探明：一团会慢慢漂的雾 + 问号。★ DOM 里没有地名（不是 CSS 模糊） */
.cm-fogblob {
  position: absolute; transform: translate(-50%, -50%);
  width: 52px; height: 52px; padding: 0; border: 0; background: none;
  cursor: pointer; border-radius: 50%;
}
.cm-fogblob i {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle at 40% 38%, rgba(232, 228, 220, .58), rgba(178, 174, 166, .34) 46%,
                    rgba(120, 118, 112, .10) 70%, transparent 80%);
  filter: blur(3px);
  animation: cmDrift 11s ease-in-out infinite;
}
.cm-fogblob:nth-child(3n) i { animation-duration: 13s; animation-delay: -3s; }
.cm-fogblob:nth-child(3n+1) i { animation-duration: 9s; animation-delay: -6s; }
.cm-fogblob b {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: rgba(255, 255, 255, .72);
  text-shadow: 0 0 7px #000, 0 0 3px #000; font-family: var(--font-serif);
}
.cm-fogblob:hover i { filter: blur(1px); opacity: .75; transform: scale(1.12); }
.cm-fogblob.sel i { filter: blur(2px); opacity: .95; }
.cm-fogblob.sel b { color: #ffd97a; }
@keyframes cmDrift {
  0%, 100% { transform: translate(-2px, 1px) scale(1); }
  50%      { transform: translate(3px, -2px) scale(1.09); }
}

/* 只知其名：暗实心点 + 灰名字（老板口径："留个名字就行，别的什么都不要有"） */
.cm-pin.name i {
  background: #8a7f6b; width: 8px; height: 8px;
  border-color: rgba(255, 255, 255, .5);
  box-shadow: 0 0 6px rgba(0, 0, 0, .9);
}
.cm-pin.name b { color: var(--text-3); }
.cm-pin.name:hover i, .cm-pin.name.sel i { background: var(--gold); }

/* 听闻：虚线圈 + 暗色斜体名 */
.cm-pin.heard i {
  background: transparent; border: 1.5px dashed var(--gold-dim);
  box-shadow: 0 0 7px rgba(0, 0, 0, .9);
}
.cm-pin.heard b { color: var(--text-3); font-style: italic; border-style: dashed; }
.cm-pin.heard:hover i, .cm-pin.heard.sel i { background: rgba(200, 162, 86, .35); border-style: solid; }

/* 刚探明：一圈扩散的光（雾散） */
@keyframes cmReveal {
  0%   { box-shadow: 0 0 0 0 rgba(255, 215, 120, .95), 0 0 14px #ffd97a; }
  100% { box-shadow: 0 0 0 30px rgba(255, 215, 120, 0), 0 0 6px rgba(0, 0, 0, .8); }
}
.cm-pin.just i { animation: cmReveal 1.15s ease-out 2; }

/* 探明进度 */
.cm-prog { font-size: 12px; color: var(--text-2); padding: 0 4px; }
.cm-prog b { color: var(--gold); font-size: 13px; }
.cm-prog em { font-style: normal; font-size: 11px; color: var(--text-3); margin-left: 6px; }
.cm-progbar {
  display: inline-block; width: 74px; height: 5px; margin-left: 7px;
  background: var(--panel-3); border: 1px solid var(--line); border-radius: 4px;
  vertical-align: middle; overflow: hidden;
}
.cm-progbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-dim), var(--gold)); }

/* 右侧详情栏 */
.cm-side {
  flex: 0 0 348px; width: 348px; min-width: 0;
  display: flex; flex-direction: column;
  border-left: 1px solid var(--line);
  background: linear-gradient(180deg, #1a1410, #14100b);
  overflow-y: auto;
}
.cm-card { padding: 14px 16px 12px; border-bottom: 1px solid var(--line-soft); }
.cm-cbar { height: 3px; border-radius: 2px; margin-bottom: 10px; }
.cm-cname { font-family: var(--font-serif); font-size: 17px; color: var(--gold); }
.cm-cmeta { margin: 6px 0 8px; display: flex; flex-wrap: wrap; gap: 5px; }
.cm-tag {
  font-size: 11px; padding: 1px 7px; border-radius: 10px;
  color: var(--text-2); background: var(--panel-3); border: 1px solid var(--line);
}
.cm-tag.warn { color: var(--warn); border-color: var(--warn); }
.cm-tag.rumor { color: var(--gold-dim); border-color: var(--gold-dim); font-style: italic; }
.cm-tag.fog { color: var(--text-3); border-color: var(--text-3); }
.cm-cname.fog { color: var(--text-3); font-style: italic; }
/* 传闻体：引号包住的一句道听途说 */
.cm-rumor {
  font-size: 13px; color: var(--text-2); font-style: italic;
  margin: 0 0 12px; padding: 7px 10px; line-height: 1.75;
  border-left: 2px solid var(--gold-dim); background: rgba(200, 162, 86, .05);
  border-radius: 0 5px 5px 0;
}
.cm-li.fog .cm-lin { color: var(--text-3); font-style: italic; letter-spacing: 1px; }
.cm-li .cm-lin.rumor { color: var(--text-3); font-style: italic; }
.cm-lidot.fog { background: transparent !important; border: 1.5px dashed var(--text-3); }

/* 势力页的迷雾：漆黑锁定卡 / 只知名 / 听闻卡 */
.shopcard.locked {
  opacity: .55; cursor: default;
  border-style: dashed; background: repeating-linear-gradient(
    45deg, rgba(120, 118, 112, .04) 0 6px, transparent 6px 12px);
}
.shopcard.locked .sc-name { color: var(--text-3); font-style: italic; letter-spacing: 2px; }
.shopcard.rumor .sc-sign { color: var(--text-3); font-style: italic; }
.shopcard.rumor .sc-name i.dim { font-style: italic; color: var(--gold-dim); }

/* ★ 一片漆黑：连名字都不给。DOM 里没有组织名，只有一个纯黑块（老板原话："应该是一片漆黑"） */
.shopcard.void {
  height: 42px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: #0a0806; border-color: #221c14; cursor: default;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, .95);
}
.shopcard.void:hover { background: #0a0806; border-color: #221c14; }
.void-q { color: #2b251d; font-size: 15px; font-family: var(--font-serif); }
/* 只知其名：卡上只有一个名字 */
.shopcard.lvname { padding: 9px 12px; }
.shopcard.lvname .sc-name { margin-bottom: 0; }

/* ── 声望矩阵（势力 × 认知维度）──
   口径出自立项设计："教会知道你是非凡者、但不知道你的途径；
   玫瑰学派认得你的脸、但不知道你的名字。按(组织 × 信息维度)存。" */
.famegrid { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin-bottom: 10px; }
.fg-row {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 9px; border-bottom: 1px solid var(--line-soft);
  background: var(--sunken);
}
.fg-row:last-child { border-bottom: 0; }
.fg-row.fg-head { background: #1b1510; font-size: 10.5px; color: var(--text-3); letter-spacing: .5px; }
.fg-row.hot { background: #191309; }
.fg-n {
  flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
}
.fg-row.hot .fg-n { color: var(--gold); }
.fg-v { flex: 0 0 40px; text-align: right; font-size: 12px; color: var(--text-3); }
.fg-v.pos { color: var(--ok); }
.fg-v.neg { color: var(--danger); }
.fg-c { flex: 0 0 34px; text-align: center; font-size: 12px; color: #2f2820; }
.fg-c.on { color: var(--gold); }
.fg-e { flex: 0 0 30px; text-align: right; }
.fg-head .fg-e { flex-basis: 30px; }

/* 人工校准弹窗里的勾选 */
.ckwrap { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 5px; }
.ck { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-2); cursor: pointer; }
.ck.on { color: var(--gold-dim); cursor: default; }
.ck input { accent-color: var(--gold-2); }

/* ══════════ 拨动开关 .sw（v1.6 · 老板要「点一下开 / 关」）══════════
   ★ 为什么自造：原生 checkbox 是"小方块 + 勾"，摆在设置页一排输入框里，
     分不清哪个是"点一下能切"的开关。拨动开关一眼就懂。
   ★ 规范照 v1.5 按钮那套：状态齐全（常态 / hover / 按下 / 键盘焦点 / 禁用）、
     热区 ≥24px、颜色只准走 :root 变量、圆角走 --r 系列。
   ★ 真 <input type="checkbox"> 留在 DOM 里（视觉上藏掉）—— 键盘 Tab 与读屏靠它，
     所以标记要写成 `<label class="sw"><input …><span class="sw-track">…`，
     输入框必须是滑道的**前一个兄弟**，否则 `:checked ~` 选不中。 */
.sw { position: relative; display: inline-flex; align-items: center; gap: 8px;
      min-height: 24px; font-size: 12px; color: var(--text-2); cursor: pointer;
      -webkit-user-select: none; user-select: none; }
.sw input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.sw .sw-track { position: relative; flex: 0 0 38px; height: 20px; border-radius: 10px;
      background: var(--sunken); border: 1px solid var(--line);
      transition: background .16s ease, border-color .16s ease; }
.sw .sw-knob { position: absolute; left: 2px; top: 2px; width: 14px; height: 14px;
      border-radius: 50%; background: var(--text-3);
      transition: transform .16s ease, background .16s ease; }
/* 打开 */
.sw input:checked ~ .sw-track { background: var(--gold-wash-2); border-color: var(--gold-2); }
.sw input:checked ~ .sw-track .sw-knob { transform: translateX(18px); background: var(--gold); }
.sw.on { color: var(--gold-dim); }
/* 交互态（一律排掉禁用态，否则禁用时照样变色、看着像能点） */
.sw:not(.is-disabled):hover .sw-track { border-color: var(--gold-dim); }
.sw:not(.is-disabled):active .sw-track { background: var(--gold-wash); }
.sw input:focus-visible ~ .sw-track { box-shadow: 0 0 0 2px var(--focus-ring); }
/* 禁用 */
.sw.is-disabled { cursor: not-allowed; opacity: .5; }
.sw .sw-txt { line-height: 1.4; }

/* 序列树：还没听说过的途径（一片漆黑，连途径名都没有） */
.fold.locked { opacity: .8; border-style: dashed; }
.fold-sum { display: flex; align-items: center; gap: 8px; padding: 8px 11px; font-size: 13px; }
.fold-sum .dim { font-size: 11px; margin-left: auto; }
.treerow.locked b { color: #3a332a; }
.treerow.locked span { letter-spacing: 2px; }

/* 地点清单：只知其名 = 灰名字 */
.cm-li .cm-lin.dim { color: var(--text-3); }
.cm-lidot.dim { opacity: .5; }
.cm-fact { font-size: 12.5px; color: var(--warn); margin-bottom: 6px; }
.cm-desc { font-size: 13px; color: var(--text-2); margin: 0 0 12px; line-height: 1.75; }
.cm-crow { display: flex; gap: 8px; }
.cm-note { margin-top: 10px; font-size: 11.5px; color: var(--text-3); line-height: 1.6; }
.cm-card.empty .cm-cname { color: var(--text-2); }

.cm-listhead {
  padding: 9px 16px 5px; font-size: 11.5px; letter-spacing: 1px;
  color: var(--text-3); text-transform: uppercase;
}
.cm-list { padding: 0 8px 12px; }
.cm-li {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 8px; margin-bottom: 2px;
  background: none; border: 1px solid transparent; border-radius: 6px;
  cursor: pointer; text-align: left; font-family: var(--font-sans);
}
.cm-li:hover { background: var(--panel-2); border-color: var(--line); }
.cm-li.sel { background: var(--panel-3); border-color: var(--gold-dim); }
.cm-lidot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.cm-lin { flex: 1 1 auto; font-size: 13px; color: var(--text); min-width: 0; }
.cm-lik { flex: 0 0 auto; font-size: 11px; color: var(--text-3); }

/* 底部区筛选 */
.cm-foot {
  flex: 0 0 auto; display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: 8px 14px; border-top: 1px solid var(--line);
  background: linear-gradient(180deg, #1b1510, #15110c);
}
.cm-fchip {
  font-size: 12px; padding: 2px 10px; border-radius: 12px; cursor: pointer;
  color: var(--text-2); background: var(--panel-2); border: 1px solid var(--line);
}
.cm-fchip:hover { color: var(--gold); border-color: var(--gold-dim); }
.cm-fchip.on { color: #14100b; background: var(--c, var(--gold)); border-color: var(--c, var(--gold)); font-weight: 700; }
.cm-fhint { margin-left: auto; font-size: 11.5px; color: var(--text-3); }

/* 地图页签里的入口卡 */
.cm-cta {
  margin: 4px 0 12px; padding: 12px 14px; cursor: pointer;
  border: 1px solid var(--gold-dim); border-radius: 8px;
  background: linear-gradient(135deg, rgba(200, 162, 86, .12), rgba(200, 162, 86, .03));
}
.cm-cta:hover { border-color: var(--gold); background: linear-gradient(135deg, rgba(200, 162, 86, .2), rgba(200, 162, 86, .06)); }
.cm-cta-t { display: block; font-family: var(--font-serif); font-size: 15px; color: var(--gold); }
.cm-cta-d { display: block; font-size: 12px; color: var(--text-2); margin-top: 3px; }
.icobtn.go { color: var(--gold); border-color: var(--gold-dim); }

@media (max-width: 900px) {
  .cm-main { flex-direction: column; }
  .cm-side { flex: 0 0 auto; width: 100%; max-height: 40%; border-left: 0; border-top: 1px solid var(--line); }
}

/* ═══════════ v0.9 开场档案 ═══════════ */

textarea { resize: vertical; }

.code {
  margin: 0;
  padding: 10px 12px;
  background: #120e0a;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: ui-monospace, Consolas, "Courier New", monospace;
  font-size: 12px;
  line-height: 1.8;
  color: var(--text-2);
  white-space: pre-wrap;
  word-break: break-word;
}
.briefbox { max-height: 320px; overflow-y: auto; }

/* 叙事流顶部的「身份档案」卡：灰雾卡那套首楼档案形制，收成一张卡 */
.brief-card {
  max-width: 700px;
  margin: 0 auto 26px;
  padding: 15px 18px 13px;
  border: 1px solid var(--line-soft);
  border-left: 2px solid var(--gold-dim);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(34, 27, 19, .62), rgba(20, 15, 11, .3));
}
.brief-card .bc-t {
  margin: 0 0 11px;
  font-family: var(--font-serif);
  font-size: 12.5px;
  letter-spacing: .34em;
  color: var(--gold-dim);
}
.brief-card .bc-row {
  display: flex; gap: 12px;
  padding: 5px 0;
  font-size: 12.5px;
  border-bottom: 1px dashed rgba(200, 162, 86, .08);
}
.brief-card .bc-row:last-child { border-bottom: 0; }
.brief-card .bc-row > b { flex: 0 0 7.6em; font-weight: 400; color: var(--text-3); }
.brief-card .bc-row > span { flex: 1 1 auto; color: var(--text-2); line-height: 1.7; }
.brief-card .bc-row.hi > span { color: var(--gold); }

/* ═══════════ v1.0 配图 ═══════════ */

/* 正文里的插图卡：卡片自带 aspect-ratio，图没到时先占位，不跳版 */
.gp-fig {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 100%; max-width: 480px;
  margin: 14px auto;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #0d0a07;
  overflow: hidden;
}
.gp-fig img {
  width: 100%; height: 100%; display: block;
  object-fit: contain; border-radius: 9px;
  transition: transform .3s ease;
}
.gp-fig:hover img { transform: scale(1.01); }

/* 加载态：一圈转 + 一行字 */
.gp-load {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; gap: 8px;
  align-items: center; justify-content: center;
  color: var(--text-3); font-size: 12px;
  background: linear-gradient(180deg, #14100b, #0d0a07);
}
.gp-load i {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid rgba(200,162,86,.22);
  border-top-color: var(--gold);
  animation: gpSpin .9s linear infinite;
}
@keyframes gpSpin { to { transform: rotate(360deg); } }
.gp-fig.done .gp-load { display: none; }
.gp-fig.err .gp-load { background: #1a0e0b; }
.gp-fig.err .gp-load span { color: var(--danger); }

/* 重画按钮：平时藏着，悬停才出来 */
.gp-redo {
  position: absolute; right: 8px; top: 8px;
  width: 26px; height: 26px; line-height: 1;
  border: 1px solid var(--line); border-radius: 6px;
  background: rgba(20, 16, 11, .82); color: var(--text-2);
  font-size: 13px; cursor: pointer; opacity: 0;
  transition: opacity .15s, color .15s;
}
.gp-fig:hover .gp-redo { opacity: 1; }
.gp-redo:hover { color: var(--gold); border-color: var(--gold-dim); }

/* 配图关掉时，正文里的标记整条不显示（理论上不会发生，兜底） */
.gp-off { display: none; }

/* 设置页：模型选择行 */
.mdl-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 9px; border-bottom: 1px dashed var(--line-soft);
  font-size: 12.5px;
}
.mdl-row:last-child { border-bottom: 0; }
.mdl-row .mn { flex: 1 1 auto; min-width: 0; font-family: ui-monospace, Consolas, monospace;
  font-size: 11.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mdl-row.on { background: rgba(200,162,86,.07); }
.mdl-row.on .mn { color: var(--gold); }
.mdl-pick { flex: 0 0 auto; font-size: 11px; padding: 2px 8px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text-2); cursor: pointer; }
.mdl-pick:hover { color: var(--gold); border-color: var(--gold-dim); }
.mdl-pick.cur { color: #14100b; background: var(--gold); border-color: var(--gold); }

/* 连接状态徽章 */
.conn { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; }
.conn i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); flex: 0 0 auto; }
.conn.ok i   { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.conn.err i  { background: var(--danger); }
.conn.wait i { background: var(--warn); animation: gpSpin 1.2s linear infinite; }
.conn.ok  { color: var(--ok); }
.conn.err { color: var(--danger); }
.conn.wait { color: var(--warn); }

/* 预设开关列表 */
.pst { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-bottom: 10px; }
.pst-row { display: flex; align-items: flex-start; gap: 9px; padding: 8px 10px;
  border-bottom: 1px dashed var(--line-soft); }
.pst-row:last-child { border-bottom: 0; }
.pst-row.off { opacity: .5; }
.pst-box { flex: 0 0 auto; margin-top: 2px; accent-color: var(--gold-2); }
.pst-main { flex: 1 1 auto; min-width: 0; }
.pst-n { font-size: 13px; color: var(--text); }
.pst-d { margin-top: 2px; font-size: 11.5px; color: var(--text-3); line-height: 1.6; }
.pst-src { margin-top: 3px; font-size: 10.5px; color: #554c3f; }

/* 生图选项里的三档选择 */
.imgseg { display: flex; flex-wrap: wrap; gap: 6px; }
.imgchip {
  font-size: 12px; padding: 3px 10px; border-radius: 12px; cursor: pointer;
  color: var(--text-2); background: var(--panel-2); border: 1px solid var(--line);
}
.imgchip:hover { color: var(--gold); border-color: var(--gold-dim); }
.imgchip.on { color: #14100b; background: var(--gold); border-color: var(--gold); font-weight: 700; }

/* ═══════════ v1.1 开场前的配置闸门 ═══════════ */

/* 没配接口时，开场不自动跑，先停在这一屏让玩家配 */
.open-gate {
  max-width: 700px;
  margin: 0 auto 26px;
  padding: 16px 18px;
  border: 1px solid var(--gold-dim);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(200, 162, 86, .08), rgba(20, 15, 11, .5));
}
.open-gate .og-t {
  margin: 0 0 6px;
  font-family: var(--font-serif);
  font-size: 15px;
  letter-spacing: .1em;
  color: var(--gold);
}
.open-gate .og-d {
  margin: 0 0 14px;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--text-2);
}
/* 这一屏里的设置面板：去掉卡片外框，别套娃 */
.open-gate .sec-t { margin-top: 18px; }
.open-gate .sec-t:first-child { margin-top: 0; }

/* ═══════════ v1.1 装备面板 ═══════════ */

.eqgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.eqslot {
  position: relative;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--sunken);
  min-height: 62px;
}
.eqslot.on { border-color: var(--gold-dim); background: rgba(200,162,86,.05); }
.eqslot .sl-t {
  font-size: 11px; letter-spacing: .14em; color: var(--text-3);
}
.eqslot .sl-n {
  margin-top: 4px; font-size: 13px; color: var(--text);
}
.eqslot.on .sl-n { color: var(--gold); }
.eqslot .sl-d {
  margin-top: 3px; font-size: 11px; color: var(--text-3); line-height: 1.5;
}
.eqslot .sl-x {
  position: absolute; right: 6px; top: 6px;
  font-size: 11px; padding: 1px 7px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text-3);
  cursor: pointer;
}
.eqslot .sl-x:hover { color: var(--danger); border-color: var(--danger); }

/* 存档通道那一行：状态 + 重连按钮 */
.storeline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.storeline .sl-txt { font-size: 12px; color: var(--text-3); }
.storeline .sl-txt.bad { color: var(--warn); }

/* ══════════ 互动地图：入口卡 + 多图切换（2026-09-23 老板："把地图像贝克兰德一样的做一下"） ══════════
   三张图共用同一个 cityMapLayer。入口卡沿用 .cm-cta 那套视觉，别另起一套。 */
.maplist { display: flex; flex-direction: column; gap: 8px; }
.mapcard {
  display: block; cursor: pointer; padding: 9px 11px;
  background: var(--raise); border: 1px solid var(--line); border-radius: var(--r-btn);
  transition: border-color .15s, transform .15s;
}
.mapcard:hover { border-color: var(--gold); transform: translateY(-1px); }
.mapcard-t { display: block; color: var(--gold); font-size: 13px; letter-spacing: .04em; }
.mapcard-d { display: block; margin-top: 2px; font-size: 11.5px; color: var(--text-2); }
.mapcard-s { display: block; margin-top: 3px; font-size: 10.5px; color: var(--text-3); }

/* 标题栏里的图切换器 */
.cm-sw { display: inline-flex; gap: 4px; margin-left: 10px; }
.cm-swb {
  cursor: pointer; padding: 2px 9px; font-size: 11.5px;
  background: transparent; color: var(--text-2);
  border: 1px solid var(--line); border-radius: var(--r-chip);
}
.cm-swb:hover { color: var(--text-1); border-color: var(--gold); }
.cm-swb.on { background: var(--gold); color: var(--ink-on-gold); border-color: var(--gold); }

/* ══════════ 学技能弹窗里的一行（2026-09-23 老板：技能学习做成弹窗，别那么死板） ══════════ */
.skrow {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 8px; margin: 0 6px 6px 0;
  background: var(--raise); border: 1px solid var(--line); border-radius: var(--r-chip);
  font-size: 12px;
}
.skrow em { color: var(--text-2); font-style: normal; font-size: 11.5px; }
.skcap { color: var(--text-3); font-size: 11px; }
.skrow.broke { border-color: var(--gold); }
.skrow.top { opacity: .55; }
.modal-box.skill-modal { max-width: min(920px, 94vw); }
.modal-box.progress-modal { max-width: min(760px, 94vw); }
.progress-totals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.progress-totals > div { padding: 10px; min-width: 0; background: var(--raise); border: 1px solid var(--line); border-radius: var(--r-btn); }
.progress-totals span { display: block; font-size: 11px; color: var(--text-3); }
.progress-totals b { display: block; margin-top: 5px; font-size: 21px; color: var(--gold); }
.progress-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.progress-filters [aria-pressed="true"] { border-color: var(--gold); color: var(--gold); }
.progress-record { padding: 12px; margin: 9px 0; border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--raise); }
.progress-record-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.progress-record-head b { font-size: 13px; color: var(--text); }
.progress-record p { font-size: 12px; line-height: 1.7; color: var(--text-2); overflow-wrap: anywhere; white-space: pre-wrap; margin: 8px 0; }
.progress-record small { color: var(--text-3); font-size: 11px; }
.progress-record.is-reverted { opacity: .65; }
.progress-result { margin-top: 8px; font-size: 13px; color: var(--gold); overflow-wrap: anywhere; }
.progress-modal .btn { min-height: 40px; touch-action: manipulation; }
@media (max-width: 520px) { .progress-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.skill-ledger {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  margin: 2px 0 12px;
}
.skill-ledger > div {
  padding: 9px 11px; background: var(--raise); border: 1px solid var(--line);
  border-radius: var(--r-btn); min-width: 0;
}
.skill-ledger span, .skill-ledger small { display: block; color: var(--text-3); font-size: 11px; }
.skill-ledger b { display: inline-block; margin-top: 3px; color: var(--gold); font-size: 22px; font-weight: 500; }
.skill-ledger small { display: inline-block; margin-left: 4px; }
.skill-search { margin: 10px 0 12px; }
.skill-growth-log { margin: 10px 0 14px; border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--raise); }
.skill-growth-log summary { cursor: pointer; padding: 8px 10px; color: var(--gold); font-size: 12px; }
.skill-growth-log > div { padding: 6px 10px; border-top: 1px solid var(--line-soft); color: var(--text-2); font-size: 11.5px; line-height: 1.55; }
.skill-growth-log b { color: var(--text); font-weight: 500; }
.skill-dialog-group { margin: 14px 0 18px; }
.skill-dialog-group h3 {
  margin: 0 0 7px; padding-bottom: 5px; border-bottom: 1px solid var(--line-soft);
  color: var(--gold); font: 500 13px var(--font-serif); letter-spacing: .08em;
}
.skill-card {
  position: relative; display: inline-flex; vertical-align: top; flex-direction: column;
  width: calc(33.333% - 8px); min-height: 66px; margin: 0 8px 8px 0; padding: 9px 38px 8px 10px;
  background: var(--raise); border: 1px solid var(--line); border-radius: var(--r-btn);
}
.skill-card:hover { border-color: var(--gold-dim); }
.skill-card.is-top { opacity: .62; }
.skill-card-main { display: flex; justify-content: space-between; gap: 8px; min-width: 0; }
.skill-card-main b { color: var(--text); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skill-card-main span { color: var(--text-2); font-size: 11px; white-space: nowrap; }
.skill-card-meta { margin-top: 8px; color: var(--text-3); font-size: 10.5px; }
.skill-card > .icobtn { position: absolute; top: 9px; right: 8px; min-width: 24px; }
.skill-card-state { position: absolute; right: 8px; top: 11px; font-size: 10px; }
.skill-modal .skill-card { padding-right: 10px; }
.skill-card-controls { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.skill-card-controls .icobtn { min-width: 42px; min-height: 42px; font-size: 20px; touch-action: manipulation; }
.skill-card.is-pending { border-color: var(--gold); }
.skill-card-pending { margin-top: 7px; color: var(--gold); font-size: 11px; overflow-wrap: anywhere; }
.skill-modal .skill-card-main { flex-wrap: wrap; }
.skill-modal .skill-card-main b { white-space: normal; overflow-wrap: anywhere; }
.skill-plan-footer {
  position: sticky; bottom: 0; z-index: 2; padding: 12px 0 2px;
  border-top: 1px solid var(--line); background: var(--panel, #17201c);
}
.skill-plan-changes { color: var(--text-2); font-size: 12px; }
.skill-plan-changes summary { color: var(--gold); cursor: pointer; padding: 4px 0; }
.skill-plan-changes > div { max-height: 100px; overflow-y: auto; line-height: 1.7; overflow-wrap: anywhere; }
.skill-plan-footer .hint { margin: 6px 0; }
.skill-plan-notice { color: var(--text); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.skill-plan-notice:empty { display: none; }
.skill-plan-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 9px; }
.skill-plan-actions .btn { min-height: 42px; touch-action: manipulation; }
.skill-plan-actions .btn:disabled { opacity: .45; cursor: not-allowed; }
.skill-modal #modalBody { scroll-padding-bottom: 170px; }
@media (max-width: 430px) {
  .skill-plan-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .skill-plan-actions #skillDraftConfirm { grid-column: 1 / -1; }
  .skill-modal #modalBody { scroll-padding-bottom: 225px; }
}
@media (max-width: 700px) {
  .skill-card { width: calc(50% - 7px); }
  .skill-ledger { gap: 5px; }
  .skill-ledger > div { padding: 8px 7px; }
}
@media (max-width: 430px) { .skill-card { width: 100%; margin-right: 0; } }

/* ══════════════════════════════════════════════════════════════════════════
   v0.25 HUD · 六分区补齐（D 目标 / E 变动浮出 / F 抽屉）
   ──────────────────────────────────────────────────────────────────────────
   为什么加：v0.22 的最小版只做了「左缘五条 + 顶栏」。玩的时候还是要切页签才知道
   当前目标，数值动了当场也没有反馈。这一版把"每轮都要扫一眼的"补齐：
     D 右下 · 当前目标（常驻一条，来自 state.goals[0]）
     E 底部 · 变动浮出（数值一变闪一下，几秒后自己收）
     F 右上 · 抽屉开关（18 个页签栏收起来，正文独占全宽）
   ★ 颜色一律走 :root 变量；热区 ≥24px；状态齐全（hover / :focus-visible）。
   ══════════════════════════════════════════════════════════════════════════ */

/* ── D 区：当前目标 ── */
.hud-goal {
  display: flex; align-items: center; gap: 9px;
  margin: 0 14px 7px; padding: 8px 12px;
  background: linear-gradient(90deg, var(--gold-wash-2), var(--gold-wash-3));
  border: 1px solid var(--line); border-left: 3px solid var(--gold);
  border-radius: var(--r); font-size: 12.5px; min-width: 0;
}
.hud-goal:empty { display: none; }
.hud-goal .hg-lb {
  flex: none; color: var(--gold); font-size: 11.5px; letter-spacing: .1em;
}
.hud-goal .hg-t {
  flex: 1 1 auto; min-width: 0; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hud-goal .hg-risk {
  flex: none; color: var(--text-3); font-size: 11.5px;
  border-left: 1px solid var(--line-soft); padding-left: 9px;
}

/* ── E 区：变动浮出 ── */
.hud-toast {
  position: fixed; left: 50%; bottom: 26px;
  transform: translate(-50%, 14px);
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  max-width: min(760px, 74vw);
  pointer-events: none; z-index: 60;
  opacity: 0; transition: opacity .22s ease, transform .22s ease;
}
.hud-toast.on { opacity: 1; transform: translate(-50%, 0); }
.hud-toast .ht {
  background: rgba(18, 14, 10, .95);
  border: 1px solid var(--gold-dim); color: var(--text);
  border-radius: 999px; padding: 5px 13px; font-size: 12.5px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── F 区：抽屉（把右栏收起来，正文独占全宽） ── */
.game.rail-off { grid-template-columns: 132px minmax(0, 1fr) 0; }
.game.rail-off .game-side { display: none; }
#btnDrawer[aria-expanded="false"] { border-color: var(--gold); color: var(--gold); }

/* ══════════ 已掌握的低序列能力（2026-09-25 老板：升级后低序列能力要保存并显示）══════════
   低序列拿到的本事在诡秘里不会丢（序列 8 也照样能用序列 9 那一套），
   所以能力页要把它们一起摊出来。每级单独成块，免得和"当前这一级"糊在一起。 */
.ownedseq {
  margin: 0 0 10px; padding: 9px 12px;
  background: var(--sunken-wash);
  border: 1px solid var(--line); border-left: 3px solid var(--gold-dim);
  border-radius: var(--r);
}
.ownedseq .os-hd { font-size: 12.5px; color: var(--text-2); letter-spacing: .04em; margin-bottom: 6px; }
.ownedseq .os-hd b { color: var(--gold); font-weight: 600; }
.ownedseq .os-hd .dim { color: var(--text-3); font-size: 11.5px; }
.ownedseq .textblock { margin: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   v0.27 · 面板改抽屉（默认收起 / 点击展开）+ 页签分组 + 可收敛区块
   老板原话："你那个抽屉你是想干什么？有这么做设计的吗？做成点击展开不行吗？？？"
            "里面还是菜单便秘的样子……你会不会做设计？？"
   改动三件：
     ① 右侧面板平时**不占地方**，点「☰ 面板」滑出来盖在正文上；
     ② 18 个页签按 角色/世界/行动/系统 四组排，不再挤成三行一坨；
     ③ 长区块统一用 <details> 折叠（收敛系统），想看再点开。
   ══════════════════════════════════════════════════════════════════════════ */

/* ── ① 面板抽屉 ── */
@media (min-width: 1001px) {
  /* 右侧那一列从网格里去掉：正文独占宽度，面板改为覆盖式滑出 */
  .game { grid-template-columns: 132px minmax(0, 1fr); }
}
.game-side {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(430px, 94vw);
  z-index: 66;
  transform: translateX(103%);
  transition: transform .22s cubic-bezier(.2, .7, .3, 1);
  box-shadow: -18px 0 44px rgba(0, 0, 0, .52);
}
.game-side.on { transform: translateX(0); }
.drawer-veil {
  position: fixed; inset: 0; z-index: 65;
  background: rgba(8, 6, 4, .5);
  opacity: 0; pointer-events: none; transition: opacity .22s;
}
.drawer-veil.on { opacity: 1; pointer-events: auto; }
#btnDrawer.on { border-color: var(--gold); color: var(--gold); }

/* ── ② 页签分组（不再 18 个平铺） ── */
.tabs { display: block; padding: 8px 10px 6px; border-bottom: 1px solid var(--line); flex: none; }
.tabs-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px 8px; margin: -8px -10px 8px; border-bottom: 1px solid var(--line);
}
.tabs-head .th-cur { font-family: var(--font-serif); font-size: 15px; color: var(--gold); letter-spacing: .1em; }
.tabs-head .th-x {
  background: transparent; border: 0; color: var(--text-3);
  font-size: 20px; line-height: 1; cursor: pointer; padding: 0 6px; border-radius: 6px;
}
.tabs-head .th-x:hover { color: var(--danger); }
.tabs-head .th-acts { margin-left: auto; margin-right: 6px; }
.tabs-head .th-btn {
  background: transparent; border: 1px solid var(--line-soft); color: var(--text-3);
  font-size: 11px; padding: 2px 8px; border-radius: 999px; cursor: pointer;
}
.tabs-head .th-btn:hover { color: var(--gold); border-color: var(--gold-dim); }
/* ★ 面板：羊皮纸噪点（内联 SVG，file:// 与单文件版都能用）+ 金发丝边 */
.game-side {
  border-left: 1px solid var(--gold-dim);
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.05'/></svg>"),
    linear-gradient(180deg, #1b1510, #120e0a 60%, #0f0b07);
  box-shadow: -18px 0 44px rgba(0, 0, 0, .55), inset 1px 0 0 rgba(200, 162, 86, .18);
}

/* ── ② 页签：平时**只露四个大标签**，点开才展开这一组 ── */
.tgroup { margin-bottom: 4px; border: 1px solid transparent; border-radius: 9px; transition: background .15s, border-color .15s; }
.tgroup.on { border-color: var(--line-soft); background: var(--gold-wash); }
.tg-nm {
  width: 100%; display: flex; align-items: center; gap: 9px;
  background: transparent; border: 0; cursor: pointer; padding: 8px 10px;
  color: var(--text-2); font-family: var(--font-serif); font-size: 13.5px;
  letter-spacing: .14em; border-radius: 9px; text-align: left;
}
.tg-nm:hover { color: var(--gold); background: var(--gold-wash-2); }
.tg-nm i { font-style: normal; }
.tg-nm em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--text-3); letter-spacing: 0; }
.tg-ico { width: 16px; height: 16px; flex: none; opacity: .9; }
.tg-caret { flex: none; font-size: 10px; color: var(--gold-dim); transition: transform .16s; }
.tgroup.on .tg-nm { color: var(--gold); }
.tgroup.open .tg-caret { transform: rotate(90deg); }
.tg-list {
  display: none; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px; padding: 2px 8px 8px;
}
.tgroup.open .tg-list { display: grid; }
.tg-list .tab {
  padding: 6px 4px; text-align: center; font-size: 12px;
  border: 1px solid var(--line-soft); border-radius: 6px; background: rgba(0, 0, 0, .16);
}
.tg-list .tab:hover { border-color: var(--gold-dim); color: var(--text); background: var(--gold-wash-2); }
.tg-list .tab.on {
  background: linear-gradient(180deg, var(--gold), var(--gold-2));
  color: var(--ink-on-gold); border-color: var(--gold); font-weight: 600;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset;
}

/* ── ③ 可收敛区块（收敛系统：原生 <details>，不依赖 JS） ── */
details.fold {
  margin: 8px 0; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--sunken-wash);
}
details.fold > summary {
  cursor: pointer; padding: 8px 12px; font-size: 13px; color: var(--gold);
  list-style: none; display: flex; align-items: center; gap: 7px;
}
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before {
  content: '▸'; color: var(--gold-dim); font-size: 11px; transition: transform .15s;
}
details.fold[open] > summary::before { transform: rotate(90deg); }
details.fold > summary:hover { color: var(--text); }
details.fold .fold-note { margin-left: auto; font-size: 11.5px; color: var(--text-3); }
details.fold .fold-body { padding: 0 12px 10px; }
details.fold .fold-body > .sec-t:first-child { margin-top: 0; }

/* ── 资料库检索条 ── */
.libbar { display: flex; gap: 6px; margin: 8px 0 6px; }
.libbar input {
  flex: 1 1 auto; min-width: 0;
  background: var(--sunken); border: 1px solid var(--line); color: var(--text);
  border-radius: var(--r); padding: 7px 10px; font-size: 13px;
}
.libbar input:focus { outline: none; border-color: var(--gold-dim); }
.libbar input::placeholder { color: var(--text-3); }

/* 通俗分类快捷条（物价 / 人物 / 地点 …）：点一下只看这一类 */
.libcats { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 9px; }
.libcat {
  background: rgba(0, 0, 0, .18); border: 1px solid var(--line-soft); color: var(--text-2);
  border-radius: 999px; padding: 3px 10px; font-size: 11.5px; cursor: pointer;
}
.libcat:hover { border-color: var(--gold-dim); color: var(--text); }
.libcat em { font-style: normal; color: var(--text-3); margin-left: 2px; }
.libcat.on {
  background: linear-gradient(180deg, var(--gold), var(--gold-2));
  color: var(--ink-on-gold); border-color: var(--gold); font-weight: 600;
}
.libcat.on em { color: rgba(36, 27, 12, .7); }

/* 职业：起始物品提示（必得 / 看运气） */
.jobnote {
  grid-column: 1 / -1; margin: 2px 0 8px; padding: 8px 11px;
  border: 1px solid var(--line); border-left: 3px solid var(--gold-dim);
  border-radius: var(--r); background: var(--sunken-wash);
  font-size: 12.5px; color: var(--text-2); line-height: 1.6;
}
.jobnote .hint { margin-top: 3px; }
.jobnote b { color: var(--gold); }

/* 起始资产：三个币种一行 */
.row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
/* 人物关系条目 */
.relrow {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 9px; margin-bottom: 5px;
  border: 1px solid var(--line-soft); border-left: 3px solid var(--gold-dim);
  border-radius: var(--r); background: var(--sunken-wash); font-size: 13px;
}
.relrow b { color: var(--gold); }
.relrow .th-x { margin-left: auto; }
.relrow { flex-wrap: wrap; align-items: flex-start; overflow-wrap: anywhere; }
.relrow span { min-width: 0; white-space: pre-wrap; }

/* ── 日历页（塔罗会标在周一那一列） ── */
.calbanner {
  padding: 9px 12px; margin-bottom: 8px; border-radius: var(--r);
  border: 1px solid var(--line); border-left: 3px solid var(--gold-dim);
  background: var(--sunken-wash); font-size: 13px; color: var(--text-2);
}
.calbanner.hot {
  border-left-color: var(--gold); border-color: var(--gold);
  background: linear-gradient(90deg, var(--gold-wash), var(--sunken-wash));
  color: var(--gold); font-weight: 600;
}
.caldaily {
  margin: 10px 0 12px;
  padding: 12px 14px;
  border: 1px solid rgba(143, 124, 173, .38);
  border-left: 3px solid var(--occult);
  border-radius: var(--r);
  background: linear-gradient(135deg, rgba(143, 124, 173, .12), rgba(0, 0, 0, .16));
}
.caldaily-kicker {
  margin-bottom: 5px;
  color: #b8a8d0;
  font-family: var(--font-serif);
  font-size: 12px;
  letter-spacing: .16em;
}
.caldaily-text { color: var(--text-2); font-size: 12px; line-height: 1.7; }
.calcontrols { margin: 10px 0 12px; padding: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.025); }
.caljump-row, .caldate-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 7px; }
.caldate-row input { min-width: 140px; flex: 1 1 140px; }
.calgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.calwd { display: contents; }
.calwd > span {
  text-align: center; font-size: 11px; color: var(--text-3);
  padding: 2px 0 5px; letter-spacing: .05em;
}
.calwd > span.tarot { color: var(--gold); }
.calday {
  min-height: 52px; padding: 3px 4px; border-radius: 6px;
  border: 1px solid var(--line-soft); background: rgba(0, 0, 0, .16);
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
}
.calday.pad { background: transparent; border-color: transparent; }
.calday b { font-size: 12.5px; color: var(--text-2); font-weight: 500; }
.calday.mon { border-color: var(--gold-dim); }
.calday.now { border-color: var(--gold); background: var(--gold-wash); }
.calday.now b { color: var(--gold); font-weight: 700; }
.calday .mk { font-style: normal; font-size: 9.5px; line-height: 1.35; padding: 0 3px; border-radius: 3px; }
.calday .mk.tarot { color: var(--ink-on-gold); background: var(--gold-dim); }
.calday .mk.fest { color: var(--text-2); background: rgba(143, 124, 173, .35); }
.calday .mk.moon { color: var(--text-3); background: rgba(255, 255, 255, .07); }

/* ══════════════════════════════════════════════════════════════════════════
   v0.28 · 质感（老板："怎么还是这么干巴巴的，你去找些素材啊"）
   ★ 一律**内联自绘**：CSS 渐变 + 内联 SVG 纹样。
     为什么不用外部图片：`file://` 下外链会死，单文件分享版也要求全部内联；
     而且插图级素材要额外花生成额度 —— 那条等老板点头再说。
   四样东西：
     ① 雾层（多层 radial-gradient 铺在正文底下，像灰雾）
     ② 星点 / 尘埃（内联 SVG 噪点，两层不同密度叠出纵深）
     ③ 金色纹样分隔条（章节标题左侧的短线 + 渐隐横线）
     ④ 卡片与折叠块的"纸面"质感（双层描边 + 内阴影 + 极淡高光）
   ══════════════════════════════════════════════════════════════════════════ */

/* ① 雾层 + ② 尘埃：铺在正文阅读区底下（fixed，不参与滚动重绘） */
.game-main::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1100px 520px at 18% -8%, rgba(200, 162, 86, .075), transparent 62%),
    radial-gradient(900px 480px at 88% 8%, rgba(143, 124, 173, .06), transparent 60%),
    radial-gradient(1200px 700px at 50% 118%, rgba(200, 162, 86, .05), transparent 66%);
}
.game-main > * { position: relative; z-index: 1; }

/* ② 尘埃噪点（纸面颗粒）：给正文与面板各铺一层极淡的 */
.narrative-wrap::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23m)' opacity='0.035'/></svg>");
  mix-blend-mode: screen;
}

/* ③ 章节标题金线：左侧短金条 + 右侧渐隐横线 */
.sec-t {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-serif); letter-spacing: .1em;
}
.sec-t::before {
  content: ''; flex: none; width: 3px; height: 13px; border-radius: 2px;
  background: linear-gradient(180deg, var(--gold), var(--gold-dim));
}
.sec-t::after {
  content: ''; flex: 1 1 auto; height: 1px;
  background: linear-gradient(90deg, var(--line), transparent 78%);
}

/* ④ 卡片 / 折叠块的纸面质感 */
details.fold, .brief-card, .idcard, .item, .qitem, .shopcard {
  box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 8px 20px rgba(0, 0, 0, .16);
}
details.fold > summary { border-radius: var(--r); }
details.fold[open] > summary {
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, var(--gold-wash), transparent);
  border-radius: var(--r) var(--r) 0 0;
}
details.fold > summary::before { content: '▸'; }

/* HUD 状态柱：加一道内高光，不再是纯色块 */
.hudbar .hb-track > i { box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset; }
.hudbar .hb-track { box-shadow: 0 1px 2px rgba(0, 0, 0, .5) inset; }

/* 顶栏：底部金发丝线 + 轻微纸感 */
.statusbar { box-shadow: 0 1px 0 0 rgba(200, 162, 86, .16), 0 2px 10px rgba(0, 0, 0, .22); }

/* ======================================================================
   v0.40 . 手机上的抽屉（2026-09-25 老板截图 + 原话：
   "现在手机上玩的那些面板选项太多了，再次做折叠或者滚动，不然手机上显示的信息非常少。"）

   截图里的问题：抽屉吃掉将近一半屏幕（四个大标签 + 展开那组的五个页签三列铺开），
   正文只剩一行。手机上最贵的就是竖向空间。三件事：
     ① 抽屉限高 58vh，超了自己滚 -- 剩下 42% 一定留给正文；
     ② 大标签压扁、去掉 "N 页 / 收起" 那截说明；
     ③ 展开的页签改成一行横滚，不再三列换行（省竖向空间最狠的一刀）。
   ★ 断点 760px，比已有的 1000/900 更窄，放在文件末尾：只覆盖手机，不与既有规则打架。
   ====================================================================== */
@media (max-width: 760px) {
  .game-side { max-height: 58vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .tabs { padding: 6px 8px; }
  .tabs-head { padding: 6px 10px 5px; margin: -6px -8px 6px; }
  .tabs-head .th-cur { font-size: 13.5px; }
  .tgroup { margin-bottom: 2px; }
  .tg-nm { padding: 5px 8px; font-size: 12.5px; letter-spacing: .08em; gap: 7px; }
  .tg-ico { width: 14px; height: 14px; }
  .tg-nm em { display: none; }
  .tgroup.open .tg-list {
    display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 5px;
    padding: 2px 8px 6px; scrollbar-width: none;
  }
  .tgroup.open .tg-list::-webkit-scrollbar { display: none; }
  .tg-list .tab { flex: 0 0 auto; padding: 5px 11px; font-size: 12px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   v0.45 · 灰雾质感
   这一层只做视觉收束：深棕纸面、灰雾光晕、秘仪金线和更清楚的层级。
   所有纹理都由 CSS 绘制，双击打开和单文件分享版都不依赖外部资源。
   ══════════════════════════════════════════════════════════════════════════ */
body {
  background:
    radial-gradient(900px 540px at 50% -18%, rgba(214, 177, 98, .11), transparent 68%),
    radial-gradient(700px 520px at 100% 42%, rgba(113, 91, 146, .08), transparent 72%),
    linear-gradient(135deg, #0c0907 0%, #120d09 48%, #0b0907 100%);
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: .16;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 16% 22%, rgba(255, 220, 148, .13) 0 1px, transparent 1.5px),
    radial-gradient(circle at 78% 68%, rgba(255, 220, 148, .10) 0 1px, transparent 1.5px);
  background-size: auto, 170px 190px, 230px 210px;
  mix-blend-mode: screen;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 89;
  pointer-events: none;
  box-shadow: inset 0 0 130px rgba(0, 0, 0, .62);
}

#screenCreate {
  overflow-y: auto;
  background:
    radial-gradient(620px 280px at 50% 0%, rgba(200, 162, 86, .07), transparent 72%),
    linear-gradient(180deg, rgba(12, 9, 7, .32), rgba(12, 9, 7, .74));
}
.create-head {
  position: relative;
  padding-top: 42px;
}
.create-head::before,
.create-head::after {
  content: '✦';
  position: absolute;
  top: 48px;
  color: var(--gold-dim);
  font-size: 13px;
  opacity: .85;
}
.create-head::before { right: calc(50% + 142px); }
.create-head::after { left: calc(50% + 142px); }
.create-head h1 {
  font-size: clamp(30px, 4vw, 38px);
  text-shadow: 0 0 22px rgba(200, 162, 86, .22), 0 2px 0 rgba(0,0,0,.45);
}
.brand-sub { color: var(--gold-dim); }
.create-body { padding-bottom: 80px; }
.card {
  position: relative;
  background:
    linear-gradient(135deg, rgba(255,255,255,.025), transparent 34%),
    linear-gradient(180deg, rgba(39, 29, 20, .96), rgba(22, 16, 11, .97));
  border-color: rgba(200, 162, 86, .22);
  box-shadow: 0 12px 30px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.035);
}
.card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(224, 188, 110, .24), transparent);
  pointer-events: none;
}
.card-t { color: #d9b76e; }
.wizbar {
  background: linear-gradient(180deg, rgba(36, 27, 18, .98), rgba(21, 15, 10, .98));
  border-color: rgba(200, 162, 86, .28);
}

.game-hud {
  background:
    radial-gradient(220px 320px at 50% 0%, rgba(200,162,86,.07), transparent 74%),
    linear-gradient(180deg, #17110d, #0e0b08);
  border-right-color: rgba(200, 162, 86, .25);
}
.hud-id { border-bottom-color: rgba(200, 162, 86, .23); }
.hud-nm, .idcard .nm { text-shadow: 0 0 12px rgba(200,162,86,.18); }
.statusbar {
  padding-top: 10px;
  padding-bottom: 10px;
  background: linear-gradient(180deg, rgba(35, 26, 17, .98), rgba(21, 15, 10, .98));
  border-bottom-color: rgba(200, 162, 86, .25);
  backdrop-filter: blur(10px);
}
.statusbar .btn { background: rgba(255,255,255,.025); }
.statusbar #btnExpertCfg[aria-pressed="true"] {
  color: var(--gold);
  border-color: rgba(200, 162, 86, .62);
  background: rgba(200, 162, 86, .13);
}
.statusbar .btn.primary { background: linear-gradient(180deg, #d3ad5c, #9e7831); }
.narrative-wrap {
  background:
    radial-gradient(720px 380px at 50% 12%, rgba(200,162,86,.055), transparent 72%),
    linear-gradient(180deg, rgba(15, 11, 8, .28), rgba(10, 8, 6, .62));
}
.narrative { max-width: 760px; }
.narrative p { color: #e6d9bf; text-shadow: 0 1px 1px rgba(0,0,0,.24); }
.narr-turn { position: relative; }
.narr-turn::before {
  content: '';
  position: absolute;
  left: -18px;
  top: 5px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, rgba(200,162,86,.46), transparent 82%);
}
.narr-turn .act {
  border-left-color: var(--gold);
  background: linear-gradient(90deg, rgba(200,162,86,.09), transparent 78%);
}
.game-side {
  background:
    radial-gradient(420px 260px at 10% 0%, rgba(200,162,86,.08), transparent 70%),
    linear-gradient(180deg, #1b140f, #100c09 70%, #0c0907);
  border-left-color: rgba(200, 162, 86, .34);
}
.tabs-head { background: linear-gradient(180deg, rgba(200,162,86,.05), transparent); }
.tabs-head .th-cur { text-shadow: 0 0 11px rgba(200,162,86,.18); }
.side-body { scrollbar-color: rgba(200,162,86,.34) transparent; }
.fold, details.fold, .item, .qitem, .shopcard, .memrow, .textblock {
  border-color: rgba(200,162,86,.19);
}
.fold:hover, details.fold:hover, .item:hover, .qitem:hover, .shopcard:hover {
  border-color: rgba(200,162,86,.34);
}
.composer {
  background: linear-gradient(180deg, rgba(14,10,7,.28), rgba(14,10,7,.92));
  border-top-color: rgba(200,162,86,.18);
}
.composer input { background: rgba(10, 8, 6, .82); }
.composer .btn.primary { box-shadow: 0 4px 18px rgba(172, 127, 45, .18); }
.hud-goal {
  border-color: rgba(200,162,86,.3);
  background: linear-gradient(90deg, rgba(46,34,19,.96), rgba(25,19,13,.94));
}
.modal-box, .combat-box {
  background:
    radial-gradient(420px 180px at 50% 0%, rgba(200,162,86,.08), transparent 76%),
    linear-gradient(180deg, #251b12, #130e0a);
  border-color: rgba(214, 177, 98, .48);
}

@media (max-width: 760px) {
  .create-head { padding-top: 28px; }
  .create-head::before, .create-head::after { display: none; }
  .create-head h1 { font-size: 30px; }
  .create-body { padding-left: 12px; padding-right: 12px; }
  .narrative { max-width: none; }
  .narr-turn::before { left: -8px; opacity: .45; }
}

/* ── 半非凡者（老板 2026-09-26）── */
.chkline { display:flex; align-items:flex-start; gap:8px; margin:9px 0 4px; font-size:13px; color:var(--text-2); cursor:pointer; }
.chkline input { margin-top:2px; accent-color:#c9a35a; width:15px; height:15px; }
.chkline b { color:var(--gold); }
.halfmark {
  margin:0 0 9px; padding:7px 11px; border-radius:var(--r);
  border:1px solid var(--gold-dim); border-left:3px solid var(--gold);
  background:linear-gradient(90deg, var(--gold-wash), transparent);
  color:var(--gold); font-size:12.5px; font-weight:600;
}

/* ── 随身物品（老板 2026-09-26）── */
.gearline { display:flex; align-items:center; gap:6px; padding:5px 9px; margin-bottom:4px;
  border:1px solid var(--line-soft); border-radius:var(--r); background:var(--sunken-wash); font-size:12.5px; color:var(--text-2); }
.gearline i { font-style:normal; font-size:10.5px; color:var(--text-3); border:1px solid var(--line-soft);
  border-radius:3px; padding:0 4px; flex:0 0 auto; }
.gearline b { color:var(--gold); }
.gearline .th-x { margin-left:auto; }

/* 游戏顶栏优先保留叙事日期，窄屏按钮收成图标。 */
html, body { overscroll-behavior-y: none; }
.statusbar .sb-time { flex: 0 1 auto; min-width: 160px; }
.app-fullscreen #screenGame { position: fixed; inset: 0; z-index: 100; background: var(--paper); }
.app-fullscreen #screenGame .game { height: 100dvh; }
@media (max-width: 760px) {
  .game { height: 100dvh; }
  .statusbar { gap: 4px; padding: 6px 7px; }
  .statusbar .sb-time { flex: 1 1 auto; min-width: 0; font-size: 11px; letter-spacing: 0; }
  .statusbar .sb-loc, .statusbar .sb-cash, .statusbar .sb-mood, .statusbar .sb-spacer { display: none; }
  .statusbar .btn { min-width: 28px; padding: 4px 5px; font-size: 13px; }
  .statusbar #btnExpertCfg { display: none; }
  .statusbar .sb-btn-label { display: none; }
}

/* ======================================================================
   v0.43 . 建档分步向导（老板 2026-09-26："一大坨的下来不太好，做成一页一页的"）
   ====================================================================== */
.wiz-off { display: none !important; }
.wizbar {
  position: sticky; top: -1px; z-index: 5;
  margin: -2px 0 12px; padding: 10px 12px 9px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: linear-gradient(180deg, var(--paper-2), var(--paper));
  box-shadow: 0 3px 10px rgba(0,0,0,.22);
}
.wiz-dots { display: flex; align-items: center; gap: 0; margin-bottom: 8px; }
.wiz-dot {
  width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line); background: var(--sunken-wash); color: var(--text-3);
  font-size: 12.5px; line-height: 1; padding: 0;
}
.wiz-dot.done { border-color: var(--gold-dim); color: var(--gold-dim); }
.wiz-dot.on {
  border-color: var(--gold); color: var(--ink-on-gold); font-weight: 700;
  background: linear-gradient(180deg, var(--gold), var(--gold-2));
}
.wiz-line { flex: 1 1 auto; height: 1px; background: var(--line); min-width: 8px; }
.wiz-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wiz-nm { font-size: 13px; color: var(--gold); font-weight: 600; }
.wiz-btns { margin-left: auto; display: flex; gap: 6px; }

/* ── v0.43 「系统」组 HUD 键（老板：改成 hud 形式好看些）── */
.tgroup.hud { margin-top: 2px; }
.hud-list { display: flex; gap: 5px; }
.hud-key {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 4px 7px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r);
  background: linear-gradient(180deg, var(--paper-2), var(--sunken-wash));
  color: var(--text-3); font-size: 11px;
}
.hud-key svg { width: 18px; height: 18px; }
.hud-key i { font-style: normal; letter-spacing: .06em; }
.hud-key:hover { color: var(--text); border-color: var(--gold-dim); }
.hud-key.on {
  color: var(--gold); border-color: var(--gold);
  background: linear-gradient(180deg, var(--gold-wash), var(--sunken-wash));
  box-shadow: 0 0 0 1px rgba(201,163,90,.25) inset;
}
.hud-key.on i { font-weight: 600; }

/* 深色阅读界面：简洁表面与少量暖色操作提示。 */
:root {
  --bg: #0d1110;
  --panel: #191b18;
  --panel-2: #24241d;
  --panel-3: #302b20;
  --paper: #171a17;
  --paper-2: #24251e;
  --line: #504430;
  --line-soft: rgba(210, 172, 101, .22);
  --gold: #d5b274;
  --gold-2: #aa8245;
  --gold-dim: #927348;
  --text: #eee5d1;
  --text-1: #f3ead8;
  --text-2: #c2b49a;
  --text-3: #9b8c74;
  --sunken: #111511;
  --raise: #2c291f;
  --focus-ring: #f4d595;
  --ink-on-gold: #271d0f;
}
body {
  background: #111715;
}
.create-head {
  border-bottom: 1px solid #425047;
  background: #1b241e;
}
.create-head h1 {
  color: #eee4cf;
  text-shadow: none;
}
.create-head::before, .create-head::after { display: none; }
.brand-sub { letter-spacing: 0; color: #b8aa8c; }
.card, .modal-box, .combat-box {
  border-color: #415047;
  border-radius: 5px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .24);
}
.card::before, .modal-box::before, .combat-box::before, .card::after { display: none; }
.modal-box, .combat-box { position: relative; }
.card-t, .modal-box > h2, .combat-box > h2 {
  color: #e2c68f;
  letter-spacing: 0;
}
.btn, .hud-key, .mdl-pick {
  border-radius: var(--r-chip);
  border-color: var(--btn-border);
  background: var(--btn-bg);
  box-shadow: none;
}
.btn:hover:not(:disabled), .hud-key:hover, .mdl-pick:hover {
  border-color: var(--btn-border-hover);
  background: var(--btn-bg-hover);
  color: var(--btn-text-hover);
}
.btn.primary {
  color: var(--btn-primary-text);
  border-color: var(--btn-primary-border);
  background: var(--btn-primary-bg);
  box-shadow: none;
}
.btn.primary:hover:not(:disabled) {
  color: var(--btn-primary-text-hover);
  background: var(--btn-primary-bg-hover);
}
:where(button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}
input[type="text"], input[type="number"], input[type="password"], input[type="date"], select, textarea {
  background: #131b16;
  border-color: #536352;
  color: #f0e6d3;
}
select option, select optgroup {
  background: #172019;
  color: #f0e6d3;
}
input::placeholder, textarea::placeholder { color: #aaa088; opacity: 1; }
.game-hud {
  background: #1b251e;
  border-right: 1px solid #425047;
  min-width: 0;
  overflow-x: hidden;
}
.hud-summary { border-top: 1px solid #425047; padding-top: 9px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; min-width: 0; width: 100%; }
.game-hud .hudbar { display: block; width: 100%; border: 0; padding: 0; background: transparent; text-align: left; font: inherit; }
.hud-summary-row, .hud-summary-block {
  display: flex; width: 100%; min-width: 0; max-width: 100%; border: 0; border-radius: 3px;
  background: transparent; color: #c4bb9f; padding: 5px 4px;
  text-align: left; cursor: pointer; font: inherit;
}
.hud-summary-row { align-items: baseline; justify-content: space-between; gap: 8px; }
.hud-summary-row span, .hud-summary-block span { color: #a9b5a4; font-size: 11px; white-space: nowrap; }
.hud-summary-row strong, .hud-summary-block strong {
  min-width: 0; max-width: 100%;
  font-size: 12px; font-weight: 500; color: #eee2c8;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hud-summary-block { display: block; border-top: 1px solid #344238; padding-top: 8px; }
.hud-summary-row strong { flex: 1 1 0; text-align: right; }
.hud-summary-block strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow-wrap: anywhere; margin-top: 4px; line-height: 1.45; }
.hud-summary-row:hover, .hud-summary-block:hover, .hud-quick button:hover { background: #29362c; }
.hud-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin-top: 4px; min-width: 0; }
.hud-quick button {
  min-height: 36px; min-width: 0; padding: 5px 4px; border: 1px solid #425047; border-radius: 3px;
  background: #202c24; color: #e0d1af; font: inherit; font-size: 11px; cursor: pointer;
}
.hudbar .hb-track {
  background: #121a15;
  border: 1px solid #425047;
}
.statusbar {
  background: #222e26;
  border-bottom: 1px solid #536352;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
}
.statusbar .sb-time {
  padding: 3px 9px;
  color: #eee0bd;
  border: 1px solid #536352;
  background: #18221b;
  box-shadow: none;
}
.statusbar .sb-time::before { content: '◷'; margin-right: 5px; color: #b8965d; }
.statusbar .btn { background: #2b372e; }
.narrative-wrap {
  background: #151e18;
}
.narrative { max-width: 780px; }
.narrative p { color: #ede3ce; line-height: 2; }
.narr-turn .act {
  border-left: 3px solid #b99c69;
  background: #253027;
}
.game-side {
  background: #1b251e;
  border-left: 1px solid #425047;
}
.tabs-head { border-bottom: 1px solid rgba(213, 178, 116, .44); }
.tgroup.open .tg-nm, .tg-list .tab.on, .hud-key.on {
  color: #f0d399;
  border-color: rgba(213, 178, 116, .55);
  background: #354135;
}
.composer {
  border-top: 1px solid #536352;
  background: #222e26;
  box-shadow: none;
}
.composer input {
  min-width: 0;
  background: #131b16;
  box-shadow: none;
}
@media (min-width: 1001px) {
  .game { grid-template-columns: 220px minmax(0, 1fr); }
  .game.rail-off { grid-template-columns: 220px minmax(0, 1fr) 0; }
  .game-hud { padding: 13px 14px; }
  .hud-goal { display: none; }
}
@media (max-width: 1000px) {
  .game-hud { flex-direction: row; overflow-x: auto; }
  .hud-summary { display: none; }
}
.modal-box {
  background: #202a23;
}
.shortcut-grid { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; align-items: center; }
.shortcut-grid kbd {
  display: inline-block; min-width: 2em; padding: 3px 7px;
  border: 1px solid rgba(213, 178, 116, .55); border-bottom-width: 2px;
  border-radius: 3px; background: #161b16; color: #f0d399; text-align: center;
  font-family: var(--font-sans); font-size: 12px;
}
.shortcut-grid span { color: var(--text-2); }
@media (max-width: 760px) {
  .statusbar .btn { min-width: 32px; min-height: 34px; }
  .statusbar .sb-time { padding: 3px 5px; }
  .statusbar .sb-time::before { display: none; }
  .composer { gap: 6px; padding: 10px 9px max(12px, env(safe-area-inset-bottom)); }
  .composer .btn { min-height: 44px; padding: 0 12px; }
  .composer #btnDice { min-height: 44px; padding: 0 10px; }
  .composer input { min-height: 44px; padding: 9px 10px; font-size: 16px; }
  .narrative-wrap { padding-left: 18px; padding-right: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .hud-key, .tgroup, .game-side, .drawer-veil { transition-duration: 0s !important; }
}

/* ── v0.57.5：游戏正文回到灰雾之上 ──
   建档页保留自己的填写界面；这里只改进入游戏后的 screenGame。
   背景用 CSS 雾层与两侧古柱剪影，单文件版无需额外图片。 */
#screenGame {
  position: relative; isolation: isolate; overflow: hidden;
  background: #050a11;
}
#screenGame::before, #screenGame::after { content: ''; position: fixed; inset: 0; pointer-events: none; }
#screenGame::before {
  z-index: 0;
  background:
    radial-gradient(ellipse 46% 34% at 52% 48%, rgba(188,201,216,.18), transparent 70%),
    radial-gradient(ellipse 35% 58% at 8% 42%, rgba(139,157,177,.12), transparent 72%),
    radial-gradient(ellipse 35% 58% at 92% 42%, rgba(139,157,177,.12), transparent 72%),
    linear-gradient(180deg, #08111c 0%, #0a121d 46%, #03070d 100%);
  animation: game-fog-drift 46s ease-in-out infinite alternate;
}
#screenGame::after {
  z-index: 0; opacity: .6;
  background:
    radial-gradient(ellipse 16% 3% at 7% 14%, rgba(191,202,214,.28), transparent 65%),
    linear-gradient(90deg, transparent 0 2%, rgba(137,153,170,.12) 4% 6%, rgba(26,37,50,.38) 8% 15%, transparent 18% 82%, rgba(26,37,50,.38) 85% 92%, rgba(137,153,170,.12) 94% 96%, transparent 98%),
    linear-gradient(180deg, transparent 0 13%, rgba(187,198,210,.13) 14% 17%, transparent 18% 82%, rgba(187,198,210,.09) 84% 87%, transparent 89%);
  filter: blur(.6px);
}
#screenGame > .game { position: relative; z-index: 1; background: transparent; }
#screenGame .game-main { background: rgba(5,10,17,.28); border-right-color: rgba(159,176,194,.18); }
#screenGame .statusbar { background: linear-gradient(180deg, rgba(14,24,36,.94), rgba(7,14,23,.9)); border-bottom-color: rgba(165,181,199,.22); }
#screenGame .narrative-wrap { background: linear-gradient(180deg, rgba(9,17,27,.3), rgba(3,8,14,.52)); }
#screenGame .narrative p { color: #d8e0e9; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
#screenGame .narr-turn .act { background: linear-gradient(90deg, rgba(171,153,115,.12), transparent 80%); border-left-color: #ae9a78; }
#screenGame .composer { background: linear-gradient(180deg, rgba(8,15,24,.44), rgba(3,8,14,.95)); border-top-color: rgba(165,181,199,.2); }
#screenGame .composer input, #screenGame .temp-body textarea { background: rgba(5,11,19,.78); border-color: rgba(143,162,183,.3); }
#screenGame .game-hud { background: linear-gradient(180deg, rgba(10,19,30,.92), rgba(4,9,16,.95)); border-right-color: rgba(165,181,199,.2); }
#screenGame .game-side { background: linear-gradient(180deg, rgba(12,22,34,.98), rgba(4,10,17,.98)); border-left-color: rgba(165,181,199,.28); }
@keyframes game-fog-drift { from { transform: scale(1) translate3d(-1.5%, 0, 0); } to { transform: scale(1.06) translate3d(1.5%, -1%, 0); } }
.create-aux { margin-top: 16px; }
.create-aux > summary { cursor: pointer; font-weight: 600; }
.create-aux .aux-block { padding: 12px 0; border-top: 1px solid var(--line, rgba(180,160,125,.22)); }
.create-aux .aux-block > b { display: block; margin-bottom: 8px; }
.create-aux .aux-block > label { display: inline-block; margin: 4px 12px 8px 0; }
.create-aux .aux-block > input, .create-aux .aux-block > select,
.create-aux .aux-block .grid2 input { box-sizing: border-box; width: 100%; min-width: 0; margin: 4px 0; }
.create-aux .aux-block .grid2 { align-items: center; }
.create-model-choices { max-height: 240px; overflow: auto; margin-top: 8px; }
.skill-card-scope { font-size: 12px; line-height: 1.6; color: var(--text-2, #b8c6d6); margin-top: 6px; overflow-wrap: anywhere; }
.ancestry-traits, .ancestry-summary { padding: 10px 0; border-top: 1px solid var(--line); }
.ancestry-traits p, .ancestry-summary p { margin: 6px 0; overflow-wrap: anywhere; }
.ancestry-flags { flex-wrap: wrap; margin: 10px 0; }
#ancestryEditFields textarea, #cAncestryFields textarea { resize: vertical; }
.skill-card-main b { overflow-wrap: anywhere; white-space: normal; }
.skill-modal .skill-card-main { flex-wrap: wrap; }
.skill-scope { grid-column: 1 / -1; color: var(--text-2, #b8c6d6); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.skillrow .dot { padding: 0; touch-action: manipulation; }
.skillrow .dot:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (max-width: 640px) {
  .skillrow { grid-template-columns: minmax(0, 1fr) 70px; gap: 6px 8px; }
  .skillrow > span { grid-column: 1 / -1; font-size: 14px; }
  .skillrow .attrdots { gap: 4px; flex-wrap: wrap; }
  .skillrow .dot { width: 32px; height: 32px; }
}