/* ═══════════════ 《万界》 世界铸就台 · 样式 ═══════════════ */

:root {
  --bg: #070a14;
  --panel: rgba(14, 20, 38, 0.78);
  --panel-solid: #0e1426;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.18);
  --text: #e8e6f2;
  --text-dim: #9aa0b8;
  --text-faint: #5f6580;
  --gold: #e8c87a;
  --gold-strong: #f5d98f;
  --cyan: #7ad0e8;
  --purple: #a78bfa;
  --red: #e8737a;
  --green: #8ce0a8;
  --font-display: "Noto Serif SC", "Source Han Serif SC", "STZhongsong", "SimSun", serif;
  --font-body: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Helvetica Neue", sans-serif;
  --radius: 14px;
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.55);
  /* ── 二级弹窗自适应（底部导航按钮唤起：信息 / 详情 / 思考输入 / 任务） ──
     --modal-max-w：弹窗宽度上限，比「第 x 幕」正文框（.story-log = 720px）窄一档
     --ui-top-h / --ui-bottom-h：吸顶顶栏与底部导航的真实高度（JS 按实测写入，此处为兜底值）
     --modal-gap：弹窗与上下方 UI 之间的留白
     --kb-inset：手机软键盘遮挡高度（JS 按 visualViewport 写入） */
  --modal-max-w: 620px;
  --modal-gap: 12px;
  --ui-top-h: 52px;
  --ui-bottom-h: 62px;
  --kb-inset: 0px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  line-height: 1.65;
}

/* ── 背景：星尘与星云 ── */
.stars {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 22% 18%, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 68% 32%, rgba(255,255,255,.4) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 41% 71%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 84% 63%, rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 9% 44%, rgba(232,200,122,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 9%, rgba(255,255,255,.4) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 91% 86%, rgba(122,208,232,.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 33% 92%, rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 74% 48%, rgba(167,139,250,.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 5% 82%, rgba(255,255,255,.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 47% 28%, rgba(255,255,255,.3) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 62% 90%, rgba(255,255,255,.35) 50%, transparent 51%);
  animation: twinkle 7s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: .65; } to { opacity: 1; } }

.nebula {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(52% 42% at 18% 12%, rgba(88, 58, 148, 0.20), transparent 70%),
    radial-gradient(46% 38% at 84% 22%, rgba(28, 92, 118, 0.16), transparent 70%),
    radial-gradient(56% 48% at 68% 88%, rgba(122, 62, 34, 0.10), transparent 70%),
    radial-gradient(40% 34% at 34% 74%, rgba(28, 52, 120, 0.16), transparent 70%);
}

/* ── 世界背景图（题材大类 → 背景图；由 bg.js 在「世界详情页 / 故事页」切换） ──
   层级：z-index -2 = .stars，-1 = .nebula，本层同为 -1 但 DOM 在后 → 压在星云之上；
   .screen 是 position:relative（z-index auto，属于"定位后代"层）→ 正文永远在底图之上，无需改 .screen。
   图是竖幅 9:16（手机比例），故手机上 `cover` 正好铺满；桌面宽屏会左右裁切，用 center 取景。
   ::after 是**可读性遮罩**：中上偏暗、底部更暗，保证正文/面板上的字压在图上仍然清楚。 */
.world-bg {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 0; transition: opacity .7s ease;
}
.world-bg.on { opacity: 1; }
.world-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(120% 62% at 50% 26%, rgba(7, 10, 20, 0.30), transparent 72%),
    linear-gradient(180deg,
      rgba(7, 10, 20, 0.78) 0%,
      rgba(7, 10, 20, 0.52) 26%,
      rgba(7, 10, 20, 0.46) 52%,
      rgba(7, 10, 20, 0.72) 80%,
      rgba(7, 10, 20, 0.90) 100%);
}
/* 有底图时把星尘/星云压下去，避免和照片叠出脏噪点 */
body[data-world-cat] .stars { opacity: .25; }
body[data-world-cat] .nebula { opacity: .45; }

/* ── 通用 ── */
.screen { display: none; min-height: 100vh; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; position: relative; }
.screen.active { display: flex; }

.hidden { display: none !important; }
.muted { color: var(--text-faint); font-weight: 400; font-size: .85em; }

.badge {
  display: inline-block; padding: 3px 12px; border-radius: 999px;
  font-size: .78rem; letter-spacing: .08em; border: 1px solid var(--line-strong);
  background: rgba(255,255,255,.05); color: var(--text-dim); margin-right: 8px;
}
.badge-cyan { color: var(--cyan); border-color: rgba(122,208,232,.4); background: rgba(122,208,232,.08); }
.badge-gold { color: var(--gold); border-color: rgba(232,200,122,.4); background: rgba(232,200,122,.08); }
.badge-purple { color: var(--purple); border-color: rgba(167,139,250,.4); background: rgba(167,139,250,.08); }
.badge-red { color: var(--red); border-color: rgba(232,115,122,.4); background: rgba(232,115,122,.08); }
.badge-green { color: var(--green); border-color: rgba(140,224,168,.4); background: rgba(140,224,168,.08); }
/* 主界面 LLM 日志入口（徽标形态，与 ⏳时钟 / ✨英雄点 / 📈经验 并排；窄屏只留 🔍，见移动端段） */
.llm-log-link { text-decoration: none; cursor: pointer; margin-right: 0; }
.llm-log-link:hover { background: rgba(167,139,250,.2); border-color: rgba(167,139,250,.72); color: #cbb8ff; }

/* ── 按钮 ── */
.btn {
  font-family: var(--font-body); font-size: 1rem; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--panel); color: var(--text);
  padding: 11px 26px; border-radius: 999px; transition: all .25s ease;
  letter-spacing: .04em;
}
.btn:hover { border-color: var(--gold); color: var(--gold-strong); transform: translateY(-1px); box-shadow: 0 6px 24px rgba(232,200,122,.15); }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; border-color: var(--line); }
.btn-primary {
  background: linear-gradient(135deg, rgba(232,200,122,.16), rgba(167,139,250,.12));
  border-color: rgba(232,200,122,.5); color: var(--gold-strong);
  text-shadow: 0 0 18px rgba(232,200,122,.35);
}
.btn-primary:hover { box-shadow: 0 6px 30px rgba(232,200,122,.28); }
.btn-lg { font-size: 1.12rem; padding: 14px 44px; }
.btn-ghost { background: transparent; font-size: .92rem; padding: 9px 20px; }
.btn-arrow { display: inline-block; transition: transform .25s ease; }
.btn:hover .btn-arrow { transform: translateX(4px); }
.icon-btn {
  background: transparent; border: 1px solid var(--line); color: var(--text-dim);
  width: 38px; height: 38px; border-radius: 10px; cursor: pointer; font-size: 1.1rem;
  transition: all .2s ease;
}
.icon-btn:hover { color: var(--gold); border-color: var(--gold); }

/* ── ① 标题界面 ── */
#screen-title { justify-content: center; text-align: center; }
.title-kicker { color: var(--cyan); letter-spacing: .5em; font-size: .85rem; margin-bottom: 18px; text-indent: .5em; opacity: .85; }
.game-title {
  font-family: var(--font-display); font-size: clamp(72px, 14vw, 150px); line-height: 1;
  font-weight: 700; letter-spacing: .12em;
  background: linear-gradient(180deg, #fff 8%, var(--gold) 45%, #b98a3c 90%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 34px rgba(232,200,122,.28));
}
.title-accent { font-style: italic; }
.title-sub { color: var(--text-dim); margin: 22px auto 42px; max-width: 560px; font-size: 1.05rem; }
.title-hint { margin-top: 26px; font-size: .8rem; color: var(--text-faint); letter-spacing: .1em; }
.title-actions { margin-top: 18px; }
.title-actions .btn { font-size: .9rem; padding: 10px 22px; border-color: var(--line-strong); }
a.btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.gear-btn { position: absolute; top: 22px; right: 26px; }

/* ── 导入世界档案弹窗 ── */
.modal-card.wide { width: min(560px, 94vw); }
.load-list { display: flex; flex-direction: column; gap: 10px; max-height: 46vh; overflow-y: auto; padding-right: 4px; }
.load-case {
  background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 12px;
  padding: 13px 16px; cursor: pointer; transition: all .2s ease;
}
.load-case:hover { border-color: var(--gold); background: rgba(232,200,122,.06); transform: translateX(3px); }
.load-case-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.load-case-head b { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: .05em; color: var(--text); }
.load-case-meta { margin-top: 6px; font-size: .82rem; color: var(--text-faint); letter-spacing: .05em; }
.load-case .tagline { color: var(--text-dim); font-size: .84rem; margin-top: 4px; }

/* ── ② 题材选择（两步向导：大类 → 细分 → 补充想象 → 铸世） ── */
#screen-genre { justify-content: flex-start; padding-top: 6vh; }
.screen-head { text-align: center; margin-bottom: 20px; }
.screen-head h2 { font-family: var(--font-display); font-size: clamp(26px, 4vw, 38px); font-weight: 600; letter-spacing: .1em; }
.screen-head h2 b { color: var(--gold); font-weight: 600; }
.screen-sub { color: var(--text-dim); margin-top: 10px; max-width: 640px; margin-inline: auto; font-size: .95rem; }

/* —— 卡片公共基底（大类/细分共用） —— */
.genre-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; cursor: pointer; transition: all .22s ease; text-align: left;
  position: relative; overflow: hidden; backdrop-filter: blur(6px);
}
.genre-card::before {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .25s ease;
  background: radial-gradient(120% 90% at 20% 0%, rgba(232,200,122,.10), transparent 60%);
}
.genre-card:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow); }
.genre-card:hover::before { opacity: 1; }
.genre-card.selected { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 10px 34px rgba(232,200,122,.14); }
.genre-card.selected::before { opacity: 1; }
.genre-check {
  position: absolute; top: 12px; right: 12px; width: 21px; height: 21px; border-radius: 50%;
  border: 1px solid var(--line-strong); display: flex; align-items: center; justify-content: center;
  font-size: .72rem; color: transparent; transition: all .2s ease; z-index: 1;
}
.genre-card.selected .genre-check { background: var(--gold); border-color: var(--gold); color: #1a1408; }
.tag {
  display: inline-block; font-size: .7rem; color: var(--cyan); border: 1px solid rgba(122,208,232,.3);
  border-radius: 999px; padding: 1px 9px; margin: 2px 5px 2px 0; letter-spacing: .05em; white-space: nowrap;
}
.genre-tags { margin-top: 9px; }

/* —— 两步进度指示 —— */
.wiz-track { display: flex; align-items: center; gap: 12px; width: min(430px, 100%); margin: 0 auto 24px; }
.wiz-step { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--text-faint); font-size: .76rem; letter-spacing: .14em; transition: color .25s ease; }
.wiz-step i {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center; font-style: normal;
  font-size: .8rem; color: var(--text-faint); background: rgba(255,255,255,.03);
  transition: all .25s ease;
}
.wiz-step.is-active { color: var(--gold-strong); }
.wiz-step.is-active i { border-color: var(--gold); color: var(--gold-strong); background: rgba(232,200,122,.12); box-shadow: 0 0 16px rgba(232,200,122,.25); }
.wiz-step.is-done { color: var(--text-dim); }
.wiz-step.is-done i { border-color: rgba(140,224,168,.45); color: var(--green); background: rgba(140,224,168,.1); }
.wiz-line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-strong), rgba(255,255,255,.04)); border-radius: 2px; }

/* —— 第 1 步：大类宫格 —— */
.grid-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 13px; width: 100%; animation: riseIn .45s ease both; }
.cat-card { padding: 20px 17px 15px; }
.cat-card::before { background: radial-gradient(120% 100% at 18% 0%, rgba(232,200,122,.13), transparent 62%); }
.cat-card.selected::before,
.cat-card:hover::before { opacity: 1; }
.cat-ico { font-size: 2.1rem; line-height: 1; filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
.cat-name { font-family: var(--font-display); font-size: 1.14rem; letter-spacing: .12em; margin: 12px 0 7px; color: var(--text); }
.cat-card:hover .cat-name { color: var(--gold-strong); }
.cat-motto {
  color: var(--text-dim); font-size: .77rem; line-height: 1.72; min-height: 2.6em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cat-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 12px; }
.cat-note {
  font-size: .7rem; color: var(--cyan); border: 1px dashed rgba(122,208,232,.4);
  background: rgba(122,208,232,.06); border-radius: 999px; padding: 2px 10px; letter-spacing: .05em; white-space: nowrap;
}
.cat-go { font-size: .78rem; color: var(--text-faint); transition: all .2s ease; white-space: nowrap; }
.cat-card:hover .cat-go, .cat-card.selected .cat-go { color: var(--gold-strong); transform: translateX(3px); }
/* 自由创作：专属星光卡 */
.cat-custom { background: linear-gradient(160deg, rgba(232,200,122,.10), rgba(167,139,250,.07)), var(--panel); border-color: rgba(232,200,122,.3); }
.cat-custom::before { background: radial-gradient(120% 100% at 70% 0%, rgba(167,139,250,.16), transparent 62%); }
.cat-custom .cat-name { color: var(--gold-strong); text-shadow: 0 0 18px rgba(232,200,122,.3); }
.cat-custom .cat-note { color: var(--purple); border-color: rgba(167,139,250,.5); background: rgba(167,139,250,.08); }

/* —— 第 2 步：细分宫格 + 工具行 —— */
.sub-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; width: 100%; }
.sub-toolbar { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.crumb-btn {
  flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: rgba(255,255,255,.04); border: 1px solid var(--line-strong); color: var(--text-dim);
  border-radius: 999px; padding: 6px 15px; font-size: .84rem; cursor: pointer; font-family: var(--font-body);
  transition: all .2s ease; letter-spacing: .03em;
}
.crumb-btn:hover { color: var(--gold-strong); border-color: var(--gold); }
.sub-search {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px;
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 5px 8px 5px 13px; transition: all .2s ease; backdrop-filter: blur(6px);
}
.sub-search:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(232,200,122,.1); }
.sub-search-ico { font-size: .8rem; opacity: .65; }
.sub-search input {
  flex: 1; min-width: 0; background: transparent; border: none; outline: none;
  color: var(--text); font-size: .88rem; font-family: var(--font-body);
}
.sub-search input::placeholder { color: var(--text-faint); }
.sub-search-clear {
  flex: none; width: 21px; height: 21px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.08); color: var(--text-dim); font-size: .68rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; transition: all .2s ease; font-family: var(--font-body);
}
.sub-search-clear:hover { background: var(--gold); color: #1a1408; }
.dice-btn { flex: none; border-radius: 50%; font-size: 1.05rem; }
.dice-btn:hover { transform: rotate(20deg) scale(1.06); }
.sub-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 4px 2px 12px; }
#sub-which { font-size: .8rem; color: var(--text-dim); letter-spacing: .1em; }
#sub-count { font-size: .72rem; letter-spacing: .05em; }
.grid-subs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 13px; width: 100%; animation: riseIn .4s ease both; }
.sub-card { padding: 16px 16px 13px; }
.sub-head { display: flex; align-items: center; gap: 11px; }
.sub-ico { font-size: 1.65rem; line-height: 1; flex: none; filter: drop-shadow(0 3px 8px rgba(0,0,0,.3)); }
.sub-title { font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: .06em; line-height: 1.45; color: var(--text); transition: color .2s ease; }
.sub-card:hover .sub-title, .sub-card.selected .sub-title { color: var(--gold-strong); }
.sub-desc {
  color: var(--text-dim); font-size: .79rem; line-height: 1.7; margin: 9px 0 2px; min-height: 2.7em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sub-card .genre-tags { margin-top: 8px; }
.sub-empty { text-align: center; padding: 44px 10px; color: var(--text-dim); font-size: .9rem; animation: riseIn .3s ease both; }
.sub-empty .btn { margin-top: 14px; }

/* —— 补充想象（第 2 步常驻） —— */
.custom-panel { width: 100%; margin-top: 20px; }
.custom-label { display: block; color: var(--text-dim); margin-bottom: 9px; font-size: .92rem; letter-spacing: .04em; }
.custom-panel textarea {
  width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--text); padding: 14px 16px; font-family: var(--font-body); font-size: .95rem;
  resize: vertical; outline: none; transition: border-color .2s ease, box-shadow .2s ease; backdrop-filter: blur(6px);
}
.custom-panel textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(232,200,122,.1); }
.custom-panel textarea::placeholder { color: var(--text-faint); }
.custom-chips { margin-top: 11px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chip-hint { font-size: .75rem; color: var(--text-faint); letter-spacing: .05em; }
.idea-chip {
  border: 1px dashed rgba(232,200,122,.42); background: rgba(232,200,122,.05); color: var(--gold);
  border-radius: 999px; padding: 4px 14px; cursor: pointer; font-size: .8rem; font-family: var(--font-body);
  transition: all .2s ease; letter-spacing: .03em;
}
.idea-chip:hover { background: rgba(232,200,122,.14); transform: translateY(-1px); border-style: solid; }

/* —— 底部动作：路径摘要 —— */
.genre-actions { display: flex; gap: 14px; margin-top: 26px; align-items: center; justify-content: center; width: 100%; }
.genre-actions .btn { flex: none; }
.genre-summary {
  flex: 1; min-width: 0; text-align: center; font-size: .84rem; color: var(--text-dim); letter-spacing: .03em;
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 1.6em; padding: 0 6px;
}
.genre-summary b { color: var(--gold-strong); font-weight: 600; white-space: nowrap; }
.genre-summary .sum-arrow { color: var(--gold); opacity: .85; font-size: .9em; }
/* 开场模式（自由模式 / 剧情模式）在摘要里的那一枚小标 */
.genre-summary .sum-mode { flex: none; margin-left: 4px; padding: 1px 9px; border-radius: 10px; white-space: nowrap;
  font-size: .76rem; letter-spacing: .04em; color: var(--gold); border: 1px solid var(--line); background: rgba(0,0,0,.18); }

/* ── ③ 世界生成 ── */
.gen-overlay { background: radial-gradient(60% 50% at 50% 42%, rgba(88,58,148,.22), transparent 75%); }
.gen-core { text-align: center; }
.gen-orb {
  width: 130px; height: 130px; margin: 0 auto 26px; border-radius: 50%; position: relative;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.9), rgba(232,200,122,.55) 38%, rgba(122,72,168,.4) 70%, rgba(20,26,52,.9));
  box-shadow: 0 0 60px rgba(232,200,122,.4), 0 0 140px rgba(167,139,250,.25);
  animation: orbPulse 2.6s ease-in-out infinite;
}
.gen-orb-inner {
  position: absolute; inset: 8px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.28); animation: orbSpin 9s linear infinite;
}
.gen-orb-inner::after {
  content: ""; position: absolute; inset: -6px 22px; border-radius: 50%;
  border: 1px dashed rgba(255,255,255,.18); animation: orbSpin 14s linear infinite reverse;
}
@keyframes orbPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes orbSpin { to { transform: rotate(360deg); } }
.gen-title { font-family: var(--font-display); letter-spacing: .35em; font-size: 1.35rem; color: var(--gold-strong); text-indent: .35em; margin-bottom: 26px; text-shadow: 0 0 22px rgba(232,200,122,.4); }
.gen-steps { min-height: 178px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.gen-step { color: var(--text-faint); font-size: .95rem; letter-spacing: .18em; opacity: 0; transition: all .5s ease; }
.gen-step.done { color: var(--text-dim); opacity: 1; }
.gen-step.active { color: var(--cyan); opacity: 1; text-shadow: 0 0 16px rgba(122,208,232,.5); }
.gen-step.done::before { content: "✦ "; color: var(--gold); }
.gen-step.active::before { content: "◈ "; }
.gen-bar-row { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 26px; }
.gen-bar { width: min(420px, 80vw); height: 3px; background: rgba(255,255,255,.08); border-radius: 3px; overflow: hidden; }
.gen-bar-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--purple), var(--gold)); transition: width .6s ease; box-shadow: 0 0 12px rgba(232,200,122,.6); }
.gen-bar-pct { font-family: var(--font-display); font-size: .95rem; letter-spacing: .08em; color: var(--gold-strong); min-width: 44px; text-align: left; font-variant-numeric: tabular-nums; text-shadow: 0 0 14px rgba(232,200,122,.45); }
.gen-error { margin-top: 22px; color: var(--red); background: rgba(232,115,122,.08); border: 1px solid rgba(232,115,122,.35); border-radius: 12px; padding: 12px 20px; max-width: 560px; font-size: .9rem; }
.gen-error .gen-retry { margin-top: 10px; }
.gen-elapsed { margin-top: 14px; font-size: .82rem; letter-spacing: .06em; color: var(--text-faint); font-variant-numeric: tabular-nums; min-height: 1.2em; }

/* ── 世界成形日志（2026-09-17）：铸世每完成一段追加一条；世界页上继续滚 ── */
.gen-log { margin-top: 18px; width: min(720px, 88vw); max-height: 232px; overflow-y: auto; text-align: left;
  border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.gen-log:empty { display: none; }
.gen-log-item { animation: riseIn .5s ease both; }
.gen-log-head { font-family: var(--font-display); font-size: .78rem; letter-spacing: .22em; color: var(--gold-strong); }
.gen-log-head .gen-log-ms { color: var(--text-faint); letter-spacing: .06em; font-size: .72rem; margin-left: 8px; font-variant-numeric: tabular-nums; }
.gen-log-line { font-size: .84rem; color: var(--text-dim); line-height: 1.6; }
.gen-log-line::before { content: "· "; color: var(--purple); }
/* 世界页上的那一份（玩家提前交付后已经切过去了，后续条目要在那边继续滚） */
#w-forge-log { margin-bottom: 14px; }
#w-forge-log .gen-log { width: 100%; max-height: 168px; margin-top: 8px; border-top: 1px solid var(--line); }

/* ── ④ 世界构筑展示 ── */
#screen-world { justify-content: flex-start; padding-top: 34px; }
.world-header { width: min(1120px, 100%); margin-bottom: 8px; animation: riseIn .6s ease both; }
.world-title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.world-kicker { margin-bottom: 10px; }
.world-name { font-family: var(--font-display); font-size: clamp(30px, 5vw, 44px); font-weight: 700; letter-spacing: .14em; background: linear-gradient(180deg, #fff, var(--gold)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 22px rgba(232,200,122,.25)); }
.world-tagline { color: var(--text-dim); margin-top: 8px; font-size: 1.02rem; max-width: 700px; }
.world-actions { display: flex; gap: 10px; padding-top: 8px; }

.tabs { display: flex; gap: 4px; margin-top: 22px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tab {
  background: transparent; border: none; color: var(--text-dim); cursor: pointer;
  padding: 10px 18px; font-size: .95rem; font-family: var(--font-body);
  border-bottom: 2px solid transparent; transition: all .2s ease; letter-spacing: .06em;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--gold-strong); border-bottom-color: var(--gold); }

.world-content { width: min(1120px, 100%); padding: 26px 0 30px; min-height: 52vh; }
@keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.panel { animation: riseIn .5s ease both; }

/* 总览 */
.overview-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; }
.overview-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; backdrop-filter: blur(6px); }
.overview-card h4 { color: var(--gold); letter-spacing: .14em; font-size: .85rem; margin-bottom: 12px; font-weight: 500; }
.overview-card p { color: var(--text-dim); font-size: .95rem; }
.conflict-list { list-style: none; margin-top: 8px; }
.conflict-list li { padding: 7px 0 7px 24px; position: relative; color: var(--text-dim); font-size: .94rem; border-bottom: 1px dashed rgba(255,255,255,.06); }
.conflict-list li:last-child { border-bottom: none; }
.conflict-list li::before { content: "⚡"; position: absolute; left: 0; color: var(--red); }

/* 通用卡片网格 */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 22px; backdrop-filter: blur(6px); transition: all .22s ease; position: relative;
}
.card:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow); }
.card-num {
  position: absolute; top: 14px; right: 16px; font-family: var(--font-display);
  color: rgba(255,255,255,.1); font-size: 1.7rem; font-weight: 700;
}
.card-title { font-size: 1.06rem; font-weight: 600; letter-spacing: .04em; margin-bottom: 8px; padding-right: 34px; }
.card-title .card-icon { margin-right: 8px; }
.card-sub { font-size: .78rem; color: var(--text-faint); letter-spacing: .1em; margin-bottom: 10px; }
.card-desc { color: var(--text-dim); font-size: .9rem; }
.chips { margin-top: 12px; }
.chip {
  display: inline-block; font-size: .76rem; color: var(--purple); border: 1px solid rgba(167,139,250,.3);
  border-radius: 999px; padding: 1px 10px; margin: 3px 5px 0 0; background: rgba(167,139,250,.06);
}
.chip-gold { color: var(--gold); border-color: rgba(232,200,122,.3); background: rgba(232,200,122,.06); }

/* 人物 */
.char-role { position: absolute; top: 14px; right: 16px; }
.char-persona { margin-top: 12px; }
.char-meta { margin-top: 6px; }
.char-meta .chip { color: var(--text-dim); border-color: var(--line-strong); background: transparent; }
.char-line { margin-top: 10px; font-size: .86rem; color: var(--text-dim); line-height: 1.6; }
.char-line b { color: var(--gold); font-weight: 600; }
.char-bio { border-left: 2px solid var(--purple); padding-left: 10px; opacity: .92; }
.char-abil { margin-top: 10px; }

/* 纪元进程 */
.timeline { position: relative; padding-left: 26px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(180deg, var(--gold), var(--purple), transparent); opacity: .5; }
.tl-item { position: relative; margin-bottom: 18px; }
.tl-item::before {
  content: ""; position: absolute; left: -26px; top: 7px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--panel-solid); border: 2px solid var(--gold); box-shadow: 0 0 12px rgba(232,200,122,.5);
}
.tl-time { color: var(--gold); font-size: .8rem; letter-spacing: .12em; }
.tl-event { font-weight: 600; margin: 2px 0; }
.tl-impact { color: var(--text-dim); font-size: .9rem; }

.prospect-card { border-left: 3px solid var(--cyan); }
.prospect-card .card-title { color: var(--cyan); }
.hook-card { border-left: 3px solid var(--gold); }
.hook-card .card-title { color: var(--gold-strong); }

/* 页脚 */
.world-footer { text-align: center; padding: 10px 0 40px; }
.footer-note { color: var(--text-faint); font-size: .8rem; margin-top: 12px; letter-spacing: .1em; }

/* ── 弹窗 ── */
.modal {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  background: rgba(4, 6, 12, .72); backdrop-filter: blur(6px); animation: fadeIn .25s ease both;
  /* 上下留白：弹窗卡落在吸顶顶栏与底部导航之间，不遮挡上下方 UI
     （顶栏/底栏高度由 JS 实测写入 --ui-top-h / --ui-bottom-h；底部安全区已含在底栏高度里） */
  padding: calc(var(--ui-top-h) + var(--modal-gap) + env(safe-area-inset-top, 0px)) 16px
           calc(var(--ui-bottom-h) + var(--modal-gap));
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-card {
  background: var(--panel-solid); border: 1px solid var(--line-strong); border-radius: 18px;
  width: min(480px, 92vw); padding: 26px 28px; box-shadow: 0 24px 80px rgba(0,0,0,.6);
  animation: riseIn .3s ease both;
  max-height: 100%;                 /* 卡面不越过上下留白（内容超出由卡内滚动区承担） */
  overflow-y: auto;                 /* 极矮屏兜底：兜不住时卡内可滚，绝不裁掉内容 */
}
.modal-card.small { width: min(440px, 92vw); }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.modal-head h3 { font-family: var(--font-display); letter-spacing: .08em; font-size: 1.2rem; }
.modal-desc { color: var(--text-dim); font-size: .88rem; margin-bottom: 18px; }
.form-row { margin-bottom: 14px; }
.form-row label { display: block; color: var(--text-dim); font-size: .82rem; margin-bottom: 6px; letter-spacing: .06em; }
.form-row input {
  width: 100%; background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 10px;
  color: var(--text); padding: 10px 14px; font-size: .95rem; outline: none; transition: border-color .2s;
  font-family: var(--font-body);
}
.form-row input:focus { border-color: var(--gold); }
.form-note { margin-top: 6px; font-size: .78rem; color: var(--green); letter-spacing: .03em; }
.seg { display: flex; background: rgba(255,255,255,.05); border-radius: 10px; padding: 4px; gap: 4px; }
.seg-btn {
  flex: 1; background: transparent; border: none; color: var(--text-dim); cursor: pointer;
  padding: 8px 0; border-radius: 8px; font-size: .9rem; font-family: var(--font-body); transition: all .2s;
}
.seg-btn.active { background: linear-gradient(135deg, rgba(232,200,122,.2), rgba(167,139,250,.15)); color: var(--gold-strong); }
.modal-actions { text-align: right; margin-top: 20px; }
.next-list { list-style: none; margin: 6px 0 16px; }
.next-list li { padding: 9px 0; border-bottom: 1px dashed rgba(255,255,255,.07); color: var(--text-dim); font-size: .93rem; }
.next-list li:last-child { border-bottom: none; }
.next-list b { color: var(--text); }

/* ── Toast ── */
.toast {
  position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 99;
  background: var(--panel-solid); border: 1px solid var(--gold); color: var(--gold-strong);
  padding: 12px 26px; border-radius: 999px; font-size: .92rem; box-shadow: 0 10px 40px rgba(0,0,0,.5);
  animation: toastIn .3s ease both; max-width: 86vw; text-align: center;
  /* 2026-09-17：一幕的结算合并成一条多行提示（旧行为是 3~5 条互相覆盖，玩家只看得到最后一条） */
  white-space: pre-line; line-height: 1.7;
  border-radius: 16px;
}
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ── ⑤ 角色降生 · 命格占卜 ── */
#screen-birth { justify-content: flex-start; padding-top: 6vh; }
.birth-name-row { display: flex; align-items: center; gap: 14px; width: min(760px, 100%); margin-bottom: 22px; flex-wrap: wrap; }
#birth-name {
  flex: 1; min-width: 240px; background: var(--panel); border: 1px solid var(--line-strong);
  border-radius: 12px; color: var(--text); padding: 12px 18px; font-size: 1.05rem;
  font-family: var(--font-display); letter-spacing: .12em; outline: none; transition: border-color .2s, box-shadow .2s;
}
#birth-name:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(232,200,122,.12); }
#btn-birth-random { flex-shrink: 0; padding: 10px 18px; border: 1px solid var(--line-strong); border-radius: 12px; }
#btn-birth-random:hover { border-color: var(--gold); color: var(--gold-strong); }

.birth-gender-row { display: flex; align-items: center; gap: 14px; width: min(760px, 100%); margin-bottom: 22px; flex-wrap: wrap; }
.birth-gender-row .birth-label { color: var(--text-dim); font-size: .92rem; letter-spacing: .1em; }
.gender-opts { display: flex; gap: 8px; }
.gender-opt {
  display: flex; align-items: center; gap: 7px; cursor: pointer; padding: 8px 20px;
  border: 1px solid var(--line); border-radius: 10px; color: var(--text-dim); font-size: .95rem;
  background: rgba(255,255,255,.02); transition: all .18s ease; user-select: none;
}
.gender-opt:hover { border-color: var(--line-strong); color: var(--text); }
.gender-opt.selected { border-color: var(--gold); background: rgba(232,200,122,.08); color: var(--gold-strong); box-shadow: 0 0 0 1px rgba(232,200,122,.4); }
.gender-opt .gender-mark { font-size: .85rem; opacity: .75; }

.birth-questions { display: flex; flex-direction: column; gap: 14px; width: min(760px, 100%); }
.birth-q {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 20px; backdrop-filter: blur(6px);
}
.birth-q-title { font-size: .98rem; margin-bottom: 12px; color: var(--text); letter-spacing: .03em; }
.birth-q-title .q-num { color: var(--gold); font-family: var(--font-display); margin-right: 8px; }
.birth-opts { display: flex; flex-direction: column; gap: 8px; }
.birth-opt {
  display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 9px 14px;
  border: 1px solid var(--line); border-radius: 10px; color: var(--text-dim); font-size: .9rem;
  transition: all .18s ease; background: rgba(255,255,255,.02);
}
.birth-opt:hover { border-color: var(--line-strong); color: var(--text); transform: translateX(3px); }
.birth-opt.selected { border-color: var(--gold); background: rgba(232,200,122,.08); color: var(--gold-strong); box-shadow: 0 0 0 1px rgba(232,200,122,.4); }
.birth-opt .opt-mark {
  width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center; font-size: .65rem; color: transparent; flex-shrink: 0;
  transition: all .18s ease;
}
.birth-opt.selected .opt-mark { background: var(--gold); border-color: var(--gold); color: #1a1408; }

/* ── ⑥ 降生卡 ── */
#screen-birth-result { justify-content: flex-start; padding-top: 6vh; }
.birth-card {
  width: min(760px, 100%); background: var(--panel); border: 1px solid var(--gold);
  border-radius: 18px; padding: 28px 30px; backdrop-filter: blur(8px);
  box-shadow: 0 0 50px rgba(232,200,122,.12), var(--shadow); animation: riseIn .5s ease both;
}
.bc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.bc-name { font-family: var(--font-display); font-size: 1.9rem; letter-spacing: .1em; color: var(--gold-strong); text-shadow: 0 0 18px rgba(232,200,122,.3); }
.bc-identity { color: var(--cyan); margin-top: 4px; font-size: .95rem; }
.bc-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.bc-desc { color: var(--text-dim); font-size: .95rem; margin: 12px 0 18px; line-height: 1.8; }
.bc-section { margin-top: 16px; }
.bc-section h4 { color: var(--gold); font-size: .8rem; letter-spacing: .18em; margin-bottom: 10px; font-weight: 500; }

.attr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 26px; }
.attr-row { display: flex; align-items: center; gap: 10px; }
.attr-label { width: 76px; color: var(--text-dim); font-size: .86rem; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attr-bar { flex: 1; height: 7px; background: rgba(255,255,255,.07); border-radius: 7px; overflow: hidden; }
.attr-fill { height: 100%; border-radius: 7px; background: linear-gradient(90deg, var(--purple), var(--gold)); box-shadow: 0 0 8px rgba(232,200,122,.5); transition: width .8s ease; }
.attr-val { width: 34px; text-align: right; color: var(--gold-strong); font-size: .86rem; font-family: var(--font-display); font-variant-numeric: tabular-nums; }

.bc-list { list-style: none; }
.bc-list li { padding: 6px 0 6px 22px; position: relative; color: var(--text-dim); font-size: .92rem; border-bottom: 1px dashed rgba(255,255,255,.05); }
.bc-list li:last-child { border-bottom: none; }
.bc-list li::before { content: "◆"; position: absolute; left: 0; color: var(--gold); font-size: .7rem; top: 10px; }
.bc-quote {
  margin-top: 18px; padding: 14px 18px; border-left: 3px solid var(--gold);
  background: rgba(232,200,122,.05); color: var(--gold-strong); font-family: var(--font-display);
  font-size: 1.02rem; letter-spacing: .08em; border-radius: 0 10px 10px 0;
}

/* ── ⑦ 故事 ── */
.story-screen { justify-content: flex-start; padding-top: 26px; height: 100vh; }
.story-header { width: 100%; max-width: 1320px; flex-shrink: 0; }
.story-title { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: .12em; color: var(--text); }

/* 左右分栏主体 */
.story-body {
  flex: 1; min-height: 0; width: 100%; max-width: 1320px; margin: 0 auto;
  display: flex; gap: 18px; padding: 16px 0 18px;
}
/* 左：历史消息与记录 */
.story-log {
  flex: 1; min-width: 0; overflow-y: auto; padding: 18px 10px 14px 0;
  display: flex; flex-direction: column; gap: 16px; min-height: 0;
}
.scene-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px 22px; backdrop-filter: blur(6px); animation: riseIn .45s ease both;
  border-left: 3px solid var(--gold);
}
/* 幕标（2026-09-17）：故事内标题「时间 · 地点」，不再是「第 N 幕 · 世界叙事者」 */
.scene-card .scene-turn { font-size: .76rem; color: var(--text-faint); letter-spacing: .06em; margin-bottom: 8px; }
.scene-card .scene-turn .scene-time { color: var(--cyan); }
.scene-card .scene-turn .scene-loc { color: var(--text-dim); }
.scene-card .scene-turn .scene-sep { font-style: normal; opacity: .55; margin: 0 .5em; }
.scene-narration { color: var(--text); font-size: .98rem; line-height: 1.9; white-space: pre-wrap; }

/* ── 人名高亮：正文中出现的人物姓名以专属字体+金色凸显（由 app.js 的 hlStoryHtml 注入） ── */
.story-name {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--gold-strong);
  letter-spacing: .03em;
  text-shadow: 0 0 10px rgba(245, 217, 143, .22), 0 0 22px rgba(232, 200, 122, .12);
  border-bottom: 1px dotted rgba(245, 217, 143, .45);
  padding: 0 .04em;
  white-space: nowrap;
}
.story-name:hover { color: #ffe3a1; text-shadow: 0 0 12px rgba(255, 227, 161, .4); }
.chip .story-name, .clarify-opt .story-name, .story-opt .story-name, .obs-reply .story-name, .prologue-text .story-name, .interlude-text .story-name, .scene-shift .story-name { border-bottom-style: dashed; }

.scene-shift { margin-top: 12px; padding: 8px 14px; background: rgba(167,139,250,.07); border: 1px dashed rgba(167,139,250,.3); border-radius: 10px; color: var(--purple); font-size: .85rem; }
/* A1：旧档"占位幕"如实标注（不篡改数据，只折叠显示） */
.scene-card.scene-quiet { border-left-color: rgba(255,180,120,.45); background: rgba(255,180,120,.04); }
.scene-quiet-note { color: #e8c08a; font-size: .84rem; line-height: 1.7; padding: 6px 10px; background: rgba(255,180,120,.07); border: 1px dashed rgba(255,180,120,.35); border-radius: 9px; }
.scene-effects { margin-top: 10px; }
/* 引擎回执卡（2026-09-17）：结算事实从正文搬到这里——一句话给人读，数字折叠着。
   视觉上刻意比正文**轻**（小字、暗色、左侧细线）：它是账，不是小说。 */
/* 场景锚定条（2026-09-17）：自由开场前两幕的"起步扶手"——
   你在哪 / 谁在 / 有什么。它是给玩家一个可以动手的具象世界，不是常驻面板。 */
.scene-anchor-card { animation: riseIn .45s ease both; }
.scene-anchor {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  border: 1px dashed rgba(122,208,232,.28); background: rgba(122,208,232,.05);
  border-radius: 12px; padding: 9px 14px; font-size: .82rem; line-height: 1.75; color: var(--text-dim);
}
.scene-anchor b { color: var(--text); font-weight: 600; }
.scene-anchor .sa-sep { color: var(--text-faint); opacity: .5; }
.scene-anchor .sa-hint { flex-basis: 100%; color: var(--text-faint); font-size: .74rem; }

.scene-receipts { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.scene-receipt {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  border-left: 2px solid rgba(255,255,255,.12); padding: 2px 0 2px 9px;
  font-size: .82rem; line-height: 1.7; color: var(--text-dim);
}
.scene-receipt .sr-text { color: var(--text-dim); }
.scene-receipt .sr-nums { font-size: .76rem; color: var(--text-faint); }
.scene-receipt .sr-nums > summary {
  cursor: pointer; list-style: none; display: inline-block;
  border-bottom: 1px dashed rgba(255,255,255,.14);
}
.scene-receipt .sr-nums > summary::-webkit-details-marker { display: none; }
.scene-receipt .sr-nums > summary::before { content: "（"; }
.scene-receipt .sr-nums > summary::after { content: "）"; }
.scene-receipt .sr-num-text { display: block; margin-top: 2px; color: var(--text-faint); letter-spacing: .02em; }
/* 属性变化默认**收起**（2026-09-17）：数值贴在正文下方，是把"这是数值系统"直接摆在读者眼前。
   想看的人点一下就在原地展开——不删数据，只是不喧宾夺主。 */
.scene-effects-fold { margin-top: 10px; }
.scene-effects-fold > summary {
  cursor: pointer; list-style: none; display: inline-block;
  font-size: .76rem; color: var(--text-faint); letter-spacing: .04em;
  border-bottom: 1px dashed rgba(255,255,255,.16); padding-bottom: 1px;
}
.scene-effects-fold > summary::-webkit-details-marker { display: none; }
.scene-effects-fold > summary::before { content: "＋ "; opacity: .7; }
.scene-effects-fold[open] > summary::before { content: "－ "; }
.scene-effects-fold > summary:hover { color: var(--gold); border-bottom-color: rgba(232,200,122,.45); }
.player-choice {
  align-self: flex-end; max-width: 78%; background: rgba(232,200,122,.09);
  border: 1px solid rgba(232,200,122,.35); color: var(--gold-strong);
  border-radius: 14px 14px 4px 14px; padding: 10px 16px; font-size: .92rem; animation: riseIn .4s ease both;
}
.player-choice .pc-label { display: block; font-size: .7rem; color: var(--text-faint); letter-spacing: .15em; margin-bottom: 3px; }
.prologue-card {
  background: linear-gradient(135deg, rgba(167,139,250,.08), rgba(122,208,232,.05));
  border: 1px solid rgba(167,139,250,.3); border-left: 3px solid var(--purple);
  border-radius: 14px; padding: 16px 20px; backdrop-filter: blur(6px);
  animation: riseIn .5s ease both;
}
.prologue-card .prologue-head { font-size: .75rem; color: var(--purple); letter-spacing: .22em; margin-bottom: 8px; }
.prologue-card .prologue-text { color: var(--text-dim); font-size: .92rem; line-height: 1.9; white-space: pre-wrap; }

/* 结局（玩家陨落）视图 */
.ending-card {
  background: linear-gradient(160deg, rgba(120, 20, 30, .18), rgba(30, 10, 20, .5));
  border: 1px solid rgba(255, 110, 110, .35); border-left: 3px solid #ff6e6e;
  border-radius: 14px; padding: 18px 20px; backdrop-filter: blur(6px);
  animation: riseIn .5s ease both; text-align: center;
}
.ending-card .ending-title { font-size: 1rem; color: #ff9d9d; letter-spacing: .18em; margin-bottom: 10px; }
.ending-card .ending-text { color: var(--text-dim); font-size: .86rem; line-height: 1.9; margin-bottom: 14px; }
.ending-card .ending-actions { display: flex; gap: 10px; justify-content: center; }
.scene-death { background: rgba(255, 90, 90, .08); border-color: rgba(255, 90, 90, .4); color: #ff9d9d; }
/* A4（C2 收口）：对着具体东西的"看与试"不属于「想法」——在日志里如实标为"该动手的事" */
.obs-card.obs-redirect { border-left-color: rgba(143, 215, 255, .5); background: rgba(143, 215, 255, .045); }
.obs-card.obs-redirect .obs-reply { color: #cfe9fb; }
.im-entry.im-redirect { border-left-color: rgba(143, 215, 255, .5); }
/* W3-B2：该收话了——「结束对话」按钮 */
.dlg-close-btn { margin: 8px 0 4px; border-color: rgba(150, 230, 161, .45); color: #b7f2c0; }
.dlg-close-btn:hover { border-color: rgba(150, 230, 161, .85); }

/* ── W5-B4：流式（正在写入的一幕） ── */
.scene-card.scene-streaming { border-left-color: rgba(143, 215, 255, .45); opacity: .92; }
.scene-card.scene-streaming .scene-turn { color: rgba(143, 215, 255, .85); }

/* ── W6-B5：链路形态徽标（自由 / 战斗 / 谈判） ── */
.link-badge { display: inline-block; margin: 0 0 6px; padding: 2px 10px; border-radius: 10px; font-size: .76rem; letter-spacing: .06em;
  border: 1px solid var(--line); background: rgba(0,0,0,.18); color: var(--text-dim); cursor: help; }
.link-badge.hidden { display: none; }
.link-badge.link-battle { color: #ffb4a2; border-color: rgba(255, 180, 162, .5); background: rgba(255, 90, 90, .10); }
.link-badge.link-trade { color: #ffe6a8; border-color: rgba(255, 214, 132, .5); background: rgba(255, 214, 132, .10); }

/* A5：失败痕迹与"换个法子"的引导 */
.place-desc .pd-btn.is-fail, .pd-btn.is-fail { border-color: rgba(255, 140, 140, .32); color: #f0b6b6; }
.pv-hint { margin-top: 7px; padding: 7px 10px; border: 1px dashed rgba(255, 214, 132, .42); background: rgba(255, 214, 132, .07); border-radius: 9px; color: #ffe6b8; font-size: .82rem; line-height: 1.65; }

/* ── M1.6 画布上的子地点名签（地点内部的空间） ── */
.place-svg .pv-sub-plate { fill: rgba(20, 26, 22, .62); stroke: rgba(150, 230, 161, .38); stroke-width: 1; stroke-dasharray: 5 4; }
.place-svg .pv-sub-txt { fill: #a8e9b2; font-size: 12.5px; text-anchor: middle; letter-spacing: .04em; }
.place-svg .pv-sub.is-here .pv-sub-plate { fill: rgba(150, 230, 161, .18); stroke: rgba(150, 230, 161, .85); stroke-dasharray: none; stroke-width: 1.6; }
.place-svg .pv-sub.is-here .pv-sub-txt { fill: #eafff0; font-weight: 600; }
.place-svg .pv-sub.is-far .pv-sub-plate { fill: rgba(30, 30, 30, .5); stroke: rgba(255, 255, 255, .18); }
.place-svg .pv-sub.is-far .pv-sub-txt { fill: var(--text-faint); }

/* 右：上=情报/物品/人物，下=选项与输入 */
.story-side {
  width: min(400px, 40%); flex-shrink: 0; display: flex; flex-direction: column;
  gap: 12px; min-height: 0;
}
.side-top { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 4px; }
.side-bottom { flex-shrink: 0; }

/* 信息弹窗触发按钮：点击弹出二级弹窗，再次点击关闭 */
.side-trigger {
  width: 100%; flex-shrink: 0; text-align: left;
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--purple);
  border-radius: 12px; padding: 11px 14px; color: var(--gold); font-size: .86rem;
  letter-spacing: .14em; cursor: pointer; user-select: none; transition: all .2s;
  font-family: var(--font-body);
}
.side-trigger:hover { border-color: var(--line-strong); transform: translateX(2px); }
.side-trigger.active { border-left-color: var(--gold); box-shadow: 0 0 0 3px rgba(232,200,122,.12); color: var(--gold-strong); }
.side-trigger.trg-self { border-left-color: var(--cyan); color: var(--cyan); }
.side-trigger.trg-self:hover { color: var(--cyan-strong, #9fd8ec); }
.side-trigger.trg-self.active { border-left-color: var(--cyan); box-shadow: 0 0 0 3px rgba(122,208,232,.12); color: var(--cyan-strong, #9fd8ec); }
.side-trigger.trg-contacts { border-left-color: rgba(255,255,255,.35); color: var(--text-dim); }
.side-trigger.trg-contacts:hover { color: var(--text); }
.side-trigger.trg-contacts.active { border-left-color: #fff; color: var(--text); box-shadow: 0 0 0 3px rgba(255,255,255,.1); }

/* 信息二级弹窗（尺寸统一见「底部导航二级弹窗」段：宽度 ≤ --modal-max-w，高度自适应留白） */
.info-modal-body { overflow-y: auto; padding: 4px 2px 2px; }
.info-modal-body > div.hidden { display: none; }
.info-modal-body .so-body { padding: 0; display: flex; flex-direction: column; gap: 10px; border-top: none; }
.info-modal-body .side-body { padding: 0; display: flex; flex-direction: column; gap: 7px; }

.story-outline {
  width: 100%; flex-shrink: 0;
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--purple);
  border-radius: 12px; backdrop-filter: blur(6px);
}
.story-outline .so-head {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 14px; cursor: pointer; color: var(--gold); font-size: .86rem;
  letter-spacing: .14em; user-select: none; transition: color .2s;
}
.story-outline .so-head:hover { color: var(--gold-strong); }
.story-outline .so-caret { color: var(--text-faint); font-size: .8rem; transition: transform .2s; }
.story-outline.collapsed .so-caret { transform: rotate(-90deg); }
.story-outline .so-body {
  padding: 0 14px 12px; display: flex; flex-direction: column; gap: 10px;
  border-top: 1px dashed rgba(255,255,255,.06);
}
.story-outline.collapsed .so-body { display: none; }
.so-status { color: var(--text); font-size: .9rem; line-height: 1.7; padding-top: 10px; }
.so-sec h5 { color: var(--gold); font-size: .73rem; letter-spacing: .18em; margin-bottom: 6px; font-weight: 500; }
.so-events { list-style: none; }
.so-events li { color: var(--text-dim); font-size: .86rem; padding: 4px 0 4px 16px; position: relative; line-height: 1.6; }
.so-events li::before { content: "◆"; position: absolute; left: 0; color: var(--purple); font-size: .65rem; top: 8px; }
.so-events li b { color: var(--gold); font-weight: 500; margin-right: 4px; }
.so-events li span { color: var(--text-faint); }
.chip-purple { border-color: rgba(167,139,250,.45); color: var(--purple); }
.so-chapter { color: var(--gold-strong, #ffd97a); font-size: .82rem; letter-spacing: .18em; padding-top: 12px; }
/* 「本局管理」折叠（2026-09-17）：两个重铸按钮原是敞在玩家面板底部的作者工具，现在要点开才见 */
.so-tools-fold { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 8px; }
.so-tools-fold > summary { cursor: pointer; list-style: none; font-size: .76rem; color: var(--text-faint); letter-spacing: .06em; }
.so-tools-fold > summary::-webkit-details-marker { display: none; }
.so-tools-fold > summary::before { content: "＋ "; opacity: .7; }
.so-tools-fold[open] > summary::before { content: "－ "; }
.so-tools-fold > summary:hover { color: var(--gold); }
.so-tools-hint { font-size: .72rem; line-height: 1.6; margin: 6px 0; }
.so-tools { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; }
.so-tools .btn { font-size: .76rem; padding: 5px 10px; }

/* 右侧信息面板：自身信息 / 人物 */
.side-panel {
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--cyan);
  border-radius: 12px; backdrop-filter: blur(6px); flex-shrink: 0;
}
.side-panel .side-head {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 14px; color: var(--cyan); font-size: .85rem;
  letter-spacing: .14em; user-select: none; cursor: pointer; transition: color .2s;
}
.side-panel .side-head:hover { color: var(--cyan-strong, #9fd8ec); }
.side-panel .side-head .so-caret { color: var(--text-faint); font-size: .8rem; transition: transform .2s; }
.side-panel.collapsed .side-head .so-caret { transform: rotate(-90deg); }
.side-panel .side-body { padding: 0 14px 12px; display: flex; flex-direction: column; gap: 7px; }
.side-panel.collapsed .side-body { display: none; }
.side-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 7px 10px; background: rgba(255,255,255,.03);
  border: 1px solid var(--line); border-radius: 8px; font-size: .86rem;
}
.side-item .si-name { color: var(--text); flex-shrink: 0; }
.side-item .si-detail { color: var(--text-faint); font-size: .78rem; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-item .si-detail .mini-bar {
  display: inline-block; width: 56px; height: 6px; background: rgba(255,255,255,.07);
  border-radius: 6px; overflow: hidden; vertical-align: 1px; margin-right: 6px;
}
.side-item .si-detail .mini-bar i {
  display: block; height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, var(--purple), var(--gold));
}
.side-sec-label {
  color: var(--gold); font-size: .72rem; letter-spacing: .18em; font-weight: 500;
  margin: 6px 0 2px;
}
.side-sec-label:first-child { margin-top: 0; }

.story-options { display: flex; flex-direction: column; gap: 10px; }
.story-opt {
  text-align: left; background: var(--panel); border: 1px solid var(--line-strong);
  color: var(--text); border-radius: 12px; padding: 12px 16px; font-size: .92rem; cursor: pointer;
  font-family: var(--font-body); transition: all .2s ease; position: relative;
}
.story-opt::before { content: "➤"; color: var(--gold); margin-right: 10px; font-size: .8rem; }
.story-opt:hover { border-color: var(--gold); color: var(--gold-strong); transform: translateX(4px); box-shadow: 0 4px 20px rgba(232,200,122,.12); }
.story-opt:disabled { opacity: .45; cursor: not-allowed; transform: none; }
/* 2026-09-17：虚线 → 实线。虚线在 UI 语义里是"可选/次要"，而这条恰是玩家最能自主表达的地方；
   它现在与三个选项同处一组、视觉权重相当（排序见文件下方 `.story-options` 的 order 规则）。 */
.story-free-input {
  display: flex; gap: 10px; align-items: center; background: var(--panel);
  border: 1px solid var(--line-strong); border-radius: 12px; padding: 9px 14px;
  transition: border-color .2s ease;
}
.story-free-input:focus-within { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(122,208,232,.1); }
.story-free-input input {
  flex: 1; background: transparent; border: none; outline: none; color: var(--text);
  font-size: .95rem; font-family: var(--font-body); min-width: 0;
}
.story-free-input input::placeholder { color: var(--text-faint); }
.story-free-input input:disabled { opacity: .5; }
.story-free-input .btn { padding: 8px 20px; font-size: .88rem; flex-shrink: 0; }
.story-obs-input {
  background: var(--panel); border: 1px dashed rgba(232,200,122,.45); border-radius: 12px;
  padding: 10px 14px; transition: border-color .2s ease;
}
.story-obs-input:focus-within { border-color: var(--gold); border-style: solid; box-shadow: 0 0 0 3px rgba(232,200,122,.08); }
.obs-box-label { font-size: .78rem; color: var(--gold); letter-spacing: .08em; margin-bottom: 6px; }
.obs-box-hint { color: var(--text-faint); font-size: .72rem; letter-spacing: .02em; margin-left: 6px; }
.obs-box-row { display: flex; gap: 10px; align-items: center; }
.obs-box-row input {
  flex: 1; background: transparent; border: none; outline: none; color: var(--text);
  font-size: .95rem; font-family: var(--font-body); min-width: 0;
}
.obs-box-row input::placeholder { color: var(--text-faint); }
.obs-box-row input:disabled { opacity: .5; }
.obs-box-row .btn { padding: 8px 20px; font-size: .88rem; flex-shrink: 0; }
.obs-card {
  background: rgba(232,200,122,.05); border: 1px solid rgba(232,200,122,.22);
  border-radius: 12px; padding: 12px 16px; margin-top: 12px;
}
.obs-card.obs-blocked { background: rgba(255,120,120,.05); border-color: rgba(255,120,120,.3); }
.obs-head { font-size: .75rem; color: var(--gold); letter-spacing: .12em; margin-bottom: 6px; }
.obs-blocked .obs-head { color: #ff9090; }
.obs-tag { color: #ff9090; border: 1px solid rgba(255,120,120,.4); border-radius: 999px; padding: 0 8px; font-size: .68rem; letter-spacing: .06em; margin-left: 4px; }
.obs-input { font-size: .88rem; color: var(--text); margin-bottom: 6px; }
.obs-reply { font-size: .9rem; color: var(--text-dim); line-height: 1.7; }
.clarify-card {
  background: rgba(122,208,232,.05); border: 1px solid rgba(122,208,232,.28);
  border-radius: 12px; padding: 14px 16px; margin-top: 12px;
}
.clarify-head { font-size: .75rem; color: var(--cyan); letter-spacing: .12em; margin-bottom: 8px; }
.clarify-action { font-size: .88rem; color: var(--text); margin-bottom: 6px; }
.clarify-question { font-size: 1rem; color: var(--text); margin-bottom: 10px; line-height: 1.6; }
.clarify-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.clarify-opt {
  text-align: left; background: var(--panel); border: 1px solid var(--line-strong);
  color: var(--text); border-radius: 10px; padding: 9px 14px; font-size: .9rem; cursor: pointer;
  font-family: var(--font-body); transition: all .2s ease;
}
.clarify-opt::before { content: "🎯"; margin-right: 8px; font-size: .78rem; }
.clarify-opt:hover { border-color: var(--cyan); color: var(--cyan); transform: translateX(3px); }
.clarify-opt:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.clarify-free { display: flex; gap: 10px; align-items: center; }
.clarify-free input {
  flex: 1; background: var(--panel); border: 1px dashed var(--line-strong); border-radius: 10px;
  padding: 9px 12px; color: var(--text); font-size: .9rem; font-family: var(--font-body); min-width: 0;
  outline: none;
}
.clarify-free input:focus { border-color: var(--cyan); border-style: solid; }
.clarify-free input:disabled { opacity: .5; }
.clarify-free .btn { padding: 8px 18px; font-size: .88rem; flex-shrink: 0; }
.story-status { font-size: .82rem; letter-spacing: .12em; margin-bottom: 10px; min-height: 1.2em; }
.story-status.busy { color: var(--cyan); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: .5; } 50% { opacity: 1; } }

/* ── 响应式 ── */
@media (max-width: 720px) {
  .overview-grid { grid-template-columns: 1fr; }
  .grid-cats { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); }
  .world-title-row { flex-direction: column; }
  .attr-grid { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .story-body { flex-direction: column; }
  .story-side { width: 100%; max-height: 46vh; }
  .side-top { flex: 1; min-height: 0; }
}
@media (max-width: 480px) {
  .grid-cats { grid-template-columns: 1fr 1fr; }
  .grid-subs { grid-template-columns: 1fr; }
  .wiz-track { gap: 8px; }
  .genre-actions { gap: 10px; }
  .genre-summary { flex-basis: 100%; order: -1; }
  .crumb-btn { max-width: 34%; }
}

/* ── 访问口令登录层（公网部署） ── */
.login-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4, 6, 14, 0.82);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.login-card {
  width: min(380px, 90vw);
  background: var(--panel-solid);
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  box-shadow: var(--shadow), 0 0 60px rgba(167, 139, 250, 0.12);
  padding: 36px 32px;
  text-align: center;
}
.login-title {
  font-family: var(--font-display);
  font-size: 2.6rem; font-weight: 700; letter-spacing: .35em;
  margin: 6px 0 4px; color: var(--text);
}
.login-title .title-accent { color: var(--gold); }
.login-sub { color: var(--text-dim); font-size: .9rem; margin-bottom: 22px; }
.login-card input {
  width: 100%; padding: 12px 14px;
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: 12px;
  color: var(--text); font-size: .95rem; font-family: var(--font-body);
  outline: none; margin-bottom: 14px; transition: border-color .2s ease;
}
.login-card input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(232, 200, 122, .1); }
.login-card input::placeholder { color: var(--text-faint); }
.login-card .btn { width: 100%; }
.login-error {
  margin-top: 14px; padding: 9px 12px; border-radius: 10px;
  background: rgba(232, 115, 122, .1); border: 1px solid rgba(232, 115, 122, .35);
  color: #ff9aa0; font-size: .85rem;
}

/* ── Agent 档案弹窗（本世界固化的 System Prompt） ── */
.story-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.agent-modal-card { width: min(880px, 94vw); max-height: min(88vh, 100%); display: flex; flex-direction: column; }
.agent-modal-card .modal-desc { margin-bottom: 12px; }
.agent-list {
  flex: 1; min-height: 0; overflow-y: auto; padding-right: 6px;
  display: flex; flex-direction: column; gap: 14px;
}
.agent-item {
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  background: rgba(255, 255, 255, .03); flex-shrink: 0;
}
.agent-section-title {
  color: var(--gold-strong); font-size: .88rem; letter-spacing: .08em;
  margin: 6px 0 2px; padding: 10px 2px 4px; border-top: 1px dashed rgba(255,255,255,.1);
}
.agent-item-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.agent-item-name { font-weight: 600; color: var(--text); font-size: .95rem; }
.agent-item-key {
  font-family: Consolas, "SFMono-Regular", Menlo, monospace; font-size: .76rem;
  color: var(--text-faint); background: rgba(255, 255, 255, .06);
  padding: 2px 8px; border-radius: 6px;
}
.agent-item-actions { margin-left: auto; }
.agent-textarea {
  width: 100%; box-sizing: border-box; background: rgba(0, 0, 0, .35);
  border: 1px solid var(--line); border-radius: 10px;
  color: var(--text); padding: 10px 12px; font-size: .82rem; line-height: 1.55; outline: none;
  font-family: Consolas, "SFMono-Regular", Menlo, monospace; resize: vertical; min-height: 120px;
}
.agent-textarea:focus { border-color: var(--gold); }
.agent-reset:disabled { opacity: .35; cursor: not-allowed; }
.skill-lv {
  font-size: .72rem; color: var(--gold-strong); background: rgba(232, 200, 122, .12);
  border: 1px solid rgba(232, 200, 122, .3); border-radius: 5px; padding: 0 5px; margin-left: 4px;
  vertical-align: middle; letter-spacing: .04em;
}
.skill-neg { color: #ff9aa0; }

/* ── 时间自演进：世界时钟与日志抽屉 ── */
#st-clock { cursor: pointer; border-color: rgba(140,224,168,.45); color: var(--green); }
#st-clock:hover { background: rgba(140,224,168,.16); }
#story-timeline { position: fixed; top: 84px; right: 10px; width: min(400px, 94vw); max-height: 74vh; display: flex; flex-direction: column; background: var(--panel-solid); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow); z-index: 130; overflow: hidden; }
#story-timeline.hidden { display: none; }
.tl-head-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--gold-strong); font-weight: 600; font-size: .95rem; }
#story-timeline-body { overflow-y: auto; padding: 12px 14px; }
.tl-entry { margin-bottom: 10px; padding: 8px 10px; border: 1px solid var(--line); border-left-width: 3px; border-radius: 8px; background: rgba(255,255,255,.03); font-size: .85rem; }
.tl-public { border-left-color: var(--cyan); }
.tl-rumor { border-left-color: var(--gold); }
.tl-secret { border-left-color: var(--red); }
.tl-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-bottom: 2px; }
.tl-who { color: var(--purple); font-size: .75rem; }
.tl-at { color: var(--text-faint); font-size: .75rem; }
.tl-disp { margin-left: auto; font-size: .7rem; color: var(--text-dim); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; }
.tl-text { color: var(--text); }
.tl-detail { margin-top: 3px; color: var(--text-dim); font-size: .8rem; }
.tl-empty { padding: 14px 0; text-align: center; }

/* ── 故事页头部：左上（故事名/进度）· 右上（时钟/操作） ── */
.story-head-left { min-width: 0; }
.story-head-right { display: flex; align-items: center; gap: 10px; }
#st-clock { cursor: pointer; border-color: rgba(140,224,168,.45); color: var(--green); white-space: nowrap; }
#st-clock:hover { background: rgba(140,224,168,.16); }

/* ── 移动端底部导航（默认隐藏；≤860px 显示） ── */
.mobile-nav { display: none; }

/* ═══════════ 移动端适配（≤860px：手机优先的故事页布局） ═══════════ */
@media (max-width: 860px) {
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
  .screen { padding: 8px; }
  /* 顶栏：吸顶 + 左名右时 */
  .story-header {
    position: sticky; top: 0; z-index: 60;
    padding: 6px 4px 8px;
    background: rgba(7, 10, 20, .92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
  }
  .story-title { display: none; }           /* 隐藏装饰标题 */
  #st-player { display: none; }             /* 玩家信息走底部「我的信息」 */
  .world-title-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
  .world-kicker { display: flex; gap: 6px; min-width: 0; flex-wrap: nowrap; }
  .world-kicker .badge {
    max-width: 44vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: .72rem; padding: 3px 8px; letter-spacing: 0;
  }
  .story-head-right { gap: 6px; }
  .story-head-right #st-clock { font-size: .72rem; padding: 3px 8px; }
  .story-head-right .llm-log-link { font-size: .72rem; padding: 3px 8px; }   /* 与时钟同尺寸 */
  .story-head-right .llm-log-txt { display: none; }                          /* 窄屏只留 🔍 图标：顶栏已是 nowrap，四个入口不挤爆 */
  .story-actions .btn { font-size: .74rem; padding: 5px 7px; white-space: nowrap; letter-spacing: 0; }
  /* 正文：单列（日志 → 选项），占满宽度 */
  .story-body { flex-direction: column; gap: 8px; padding: 8px 0 4px; }
  .story-log { flex: none; width: 100%; height: calc(100vh - 250px); height: calc(100dvh - 250px); min-height: 38vh; }
  .story-side { width: 100%; max-width: none; padding: 0; gap: 8px; }
  .side-top { display: none; }              /* 入口移至底部导航 */
  .side-bottom { width: 100%; gap: 8px; }
  #story-status { font-size: .8rem; }
  .story-options { gap: 8px; }
  .story-options .story-opt { width: 100%; text-align: left; padding: 10px 12px; }
  .story-free-input, .obs-box-row { flex-wrap: wrap; gap: 6px; }
  .story-free-input input, .obs-box-row input { flex: 1 1 100%; }
  .story-free-input .btn, .obs-box-row .btn { flex: 1 1 auto; }
  /* 底部导航条 */
  .mobile-nav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: rgba(10, 14, 28, .97);
    border-top: 1px solid var(--line-strong);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -4px 18px rgba(0,0,0,.35);
  }
  .mobile-nav .nav-btn {
    flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; min-height: 58px; padding: 6px 2px;
    font-size: .7rem; color: var(--text-dim);
    background: none; border: none; cursor: pointer;
    border-left: none !important;            /* 覆盖 side-trigger 桌面样式 */
    box-shadow: none !important; transform: none !important;
    font-family: var(--font-body); letter-spacing: 0;
  }
  .mobile-nav .nav-btn .nav-ico { font-size: 1.15rem; line-height: 1; }
  .mobile-nav .nav-btn.active, .mobile-nav .nav-btn:active { color: var(--gold-strong); }
  .mobile-nav .nav-btn.active .nav-ico { transform: translateY(-1px); }
  /* 时间线抽屉：顶栏下方、底栏上方 */
  #story-timeline { top: 64px; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); max-height: none; right: 8px; width: min(400px, 94vw); }
  /* 信息弹窗：窄屏同样是浮动卡片（不再是全屏抽屉）——尺寸见文末「底部导航二级弹窗」段 */
  .info-modal-body .so-body, .info-modal-body .side-body { gap: 8px; }
}

/* ═══════════ 全宽度手机式布局（桌面宽屏同样生效；旧 ≤860 媒体块保留无冲突） ═══════════ */
body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
/* 顶栏：吸顶，左=故事名+进度，右=时钟+操作 */
.story-header {
  position: sticky; top: 0; z-index: 60;
  padding: 6px 10px 8px;
  background: rgba(7, 10, 20, .93);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.story-title { display: none; }
#st-player { display: none; }
.world-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.world-kicker { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: nowrap; }
.world-kicker .badge { max-width: min(340px, 42vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-actions { display: flex; align-items: center; gap: 6px; }
.story-actions .btn { font-size: .8rem; padding: 6px 9px; white-space: nowrap; }
/* 正文：单列全宽（日志在上，选项在下），居中限宽保证长行可读 */
.story-body { flex-direction: column; gap: 10px; padding: 10px 0 6px; }
.story-log {
  flex: none; width: min(100%, 900px); margin: 0 auto;
  max-height: calc(100vh - 330px); min-height: 34vh; overflow-y: auto;
}
.story-side { width: 100%; max-width: min(100%, 900px); margin: 0 auto; padding: 0; gap: 10px; }
.side-top { display: none; }          /* 旧侧栏入口：入口统一在底部导航 */
.side-bottom { width: 100%; }
#story-status { font-size: .86rem; }
.story-options { gap: 9px; }
.story-options .story-opt { width: 100%; text-align: left; padding: 10px 13px; }
.story-free-input, .obs-box-row { flex-wrap: wrap; gap: 6px; }
.story-free-input input, .obs-box-row input { flex: 1 1 240px; }
.story-free-input .btn, .obs-box-row .btn { flex: 1 1 auto; }
/* 底部导航（所有宽度） */
.mobile-nav {
  display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
  background: rgba(10, 14, 28, .97);
  border-top: 1px solid var(--line-strong);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -4px 18px rgba(0, 0, 0, .35);
}
.mobile-nav .nav-btn {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-height: 60px; padding: 6px 2px;
  font-size: .74rem; color: var(--text-dim);
  background: none; border: none; cursor: pointer;
  border-left: none !important; box-shadow: none !important; transform: none !important;
  font-family: var(--font-body); letter-spacing: 0;
}
.mobile-nav .nav-btn .nav-ico { font-size: 1.25rem; line-height: 1; }
.mobile-nav .nav-btn.active, .mobile-nav .nav-btn:active { color: var(--gold-strong); }
.mobile-nav .nav-btn.active .nav-ico { transform: translateY(-1px); }
/* 世界日志抽屉：顶栏之下、底栏之上 */
#story-timeline { top: 64px; bottom: calc(68px + env(safe-area-inset-bottom, 0px)); max-height: none; right: 10px; width: min(400px, 94vw); }
/* ═══════════ 底部导航二级弹窗（信息 / 详情 / 思考输入 / 任务）：自适应屏幕 ═══════════
   ① 宽度：上限 --modal-max-w（620px）——比「第 x 幕」正文框（.story-log，720px）窄一档；
      窄屏按视口收缩（比正文卡面再窄 28px），不再全屏铺满。
   ② 高度：由 .modal 的上下内边距留白决定——卡面始终落在吸顶顶栏与底部导航之间，
      不遮挡上下方 UI；内容超出时由卡内滚动区承担（下方 flex 规则）。
   ③ 软键盘：body.kb-open 时底部再让出键盘高度，输入区始终可见。 */
#info-modal .info-modal-card,
#detail-modal .detail-modal-card,
#input-modal .input-modal-card,
#quest-modal .quest-modal-card {
  /* 窄屏：两侧各比正文框多让 14px（正文框占满画布宽），故比「第 x 幕」卡面窄 28px */
  width: min(calc(100% - 28px), var(--modal-max-w));
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  display: flex; flex-direction: column;
}
/* 卡内滚动区：卡面被留白压缩时优先滚内容，不撑破上下留白 */
#info-modal .info-modal-body,
#detail-modal .info-modal-body,
#input-modal .input-modal-result,
#quest-modal .quest-modal-body {
  flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto;
}
/* 小屏（320~420px）：卡面收窄后同步收紧内边距，正文宽度不被挤成窄条 */
@media (max-width: 420px) {
  #info-modal .info-modal-card,
  #detail-modal .detail-modal-card,
  #input-modal .input-modal-card,
  #quest-modal .quest-modal-card { padding: 18px 16px; }
}
/* 软键盘弹出：底部让出键盘高度 —— 自由行动栏可滚到键盘之上，弹窗整体上移 */
body.kb-open .modal {
  padding-bottom: calc(var(--kb-inset) + var(--modal-gap));
}
body.kb-open #screen-story.story-screen {
  padding-bottom: calc(120px + var(--kb-inset) + env(safe-area-inset-bottom, 0px));
}

/* ═══════════ 全站手机化比例（所有界面统一窄画布 + 紧凑密度，桌面同样生效） ═══════════ */
/* 每屏内容区限制为手机画布宽度（宽屏居中显示），超出部分上下滚动而非整屏铺开 */
.screen { justify-content: flex-start; padding: 18px 16px calc(96px + env(safe-area-inset-bottom, 0px)); }
.screen.active { overflow-y: auto; }
#screen-title { justify-content: center; }

/* 各屏直接子元素统一限宽并居中（世界生成加载页除外，保持全屏仪式感） */
#screen-title > *,
#screen-genre > *,
#screen-birth > *,
#screen-birth-result > *,
#screen-world > * {
  width: min(100%, 660px); margin-inline: auto;
}
#screen-world > header.world-header { width: min(100%, 660px); }
#screen-world > main.world-content { width: min(100%, 660px); }
#screen-world > footer.world-footer { width: min(100%, 660px); }

/* 标题屏：手机比例的大标题 */
.game-title { font-size: clamp(54px, 15vw, 96px); letter-spacing: .1em; }
.title-sub { margin: 18px auto 30px; font-size: .98rem; }
.title-kicker { margin-bottom: 14px; font-size: .78rem; }

/* 头部文案密度 */
.screen-head { margin-bottom: 18px; }
.screen-head h2 { font-size: clamp(21px, 6.5vw, 27px); letter-spacing: .08em; }
.screen-sub { font-size: .9rem; }

/* 按钮：触控友好、主操作更突出 */
.btn { padding: 11px 20px; font-size: .95rem; }
.btn-lg { padding: 13px 30px; font-size: 1.05rem; width: min(100%, 320px); }
.title-actions .btn, .genre-actions .btn, .world-actions .btn { padding: 10px 18px; font-size: .9rem; }
.genre-actions, .world-actions, .title-actions {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px;
}

/* 类型选择（两步向导）：紧凑卡片 + 网格密度微调 */
.grid-cats { grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 10px; }
.grid-subs { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 11px; }
.genre-card { padding: 13px 14px; }
.cat-card { padding: 17px 15px 13px; }
.cat-ico { font-size: 1.8rem; }
.cat-name { font-size: 1.04rem; margin: 10px 0 6px; }

/* 世界构筑页：标题/操作堆叠紧凑 */
.world-title-row { flex-direction: column; align-items: flex-start; gap: 8px; }
.world-name { font-size: clamp(24px, 6.5vw, 32px); }
.world-tagline { font-size: .92rem; }
.world-actions { justify-content: flex-start; width: 100%; }
/* 世界构筑页签：剩下的 10 个维度也必须全部可见。
   旧版此处为 nowrap + overflow-x: auto —— 页签总宽远超 660px 画布，
   末尾的「众生人物 / 纪元进程」会被推到可视区外（横向滚动条不易察觉），
   表现为末尾页签根本不显示。改为换行排布，窄画布下自动折行。 */
.tabs { margin-top: 14px; flex-wrap: wrap; overflow-x: visible; row-gap: 6px; }
.tab { font-size: .85rem; padding: 8px 11px; white-space: nowrap; }
.world-content { padding: 16px 0 18px; min-height: auto; }

/* 卡片网格：窄画布内自适应（宽 660 时自然单列） */
.card-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.card { padding: 14px 16px; }
.card-title { font-size: .98rem; }

/* 降生页 */
.birth-name-row, .birth-gender-row { width: 100%; flex-wrap: wrap; }
#birth-name { flex: 1 1 180px; }
.birth-questions { width: 100%; }
.birth-q-title { font-size: .92rem; }
.birth-opt { padding: 11px 13px; font-size: .92rem; }

/* 故事页跟随窄画布（底栏仍固定全宽） */
#screen-story .story-log, #screen-story .story-side { width: min(100%, 720px); }
#screen-story .story-header .world-title-row { max-width: 860px; }

/* 弹窗卡：默认手机比例（各二级弹窗的宽度/高度自适应见「底部导航二级弹窗」段） */
.modal-card { width: min(92vw, 560px); }
#screen-story .story-header .world-title-row { width: min(100%, 860px); margin-inline: auto; }
/* 顶栏同一水平线：地点（左）与时间（右对齐）同行不换行 ——
   覆盖上方全局 .world-title-row 的纵向堆叠（那条规则只应影响世界构筑页） */
#screen-story .story-header .world-title-row { flex-direction: row; flex-wrap: nowrap; align-items: center; }
#screen-story .story-head-left  { flex: 1 1 auto; min-width: 0; }
#screen-story .story-head-left .world-kicker { margin-bottom: 0; }   /* 消除徽标行下方多余间距，保证时钟与地点垂直居中于同一水平线 */
#screen-story .story-head-right { flex: none; margin-left: auto; }   /* 时钟贴右：即使布局退化为纵向也能保持右对齐 */

/* ── 叙事时钟：幕时刻徽标 + 期间简报卡片 ── */
.scene-turn .scene-time { color: var(--cyan); letter-spacing: .04em; font-size: .78rem; }
.interlude-card {
  background: linear-gradient(135deg, rgba(122,208,232,.07), rgba(232,200,122,.05));
  border: 1px dashed rgba(122,208,232,.35); border-left: 3px solid var(--cyan);
  border-radius: 14px; padding: 14px 18px; animation: riseIn .5s ease both;
}
.interlude-head { font-size: .78rem; color: var(--cyan); letter-spacing: .12em; margin-bottom: 6px; }
.interlude-text { color: var(--text); font-size: .93rem; line-height: 1.85; white-space: pre-wrap; }

/* 推演等待期：隐藏选项与输入区（只保留刚显示的行动卡与状态行） */
.story-options.panel-busy { display: none; }

/* 选项区排序（2026-09-17 代入感修复）：
   **两条"自己说话"的通道在前，三个"照着选"的按钮在后**。
   旧顺序是 观察 → 选项 → 自由行动，且自由行动用虚线边框表达"次要"——
   于是最自由的那条路视觉权重最低，玩家自然只会点菜单。
   现在的顺序：想法/观察 → 自由行动 → 三个选项。 */
.story-options .story-obs-input { order: 1; }
.story-options .story-free-input { order: 2; }
.story-options .story-opt { order: 3; }

/* ── 可点击信息行 + 详情二级弹窗（尺寸见「底部导航二级弹窗」段） ── */
.side-item.click-row { cursor: pointer; transition: all .2s ease; border-radius: 10px; padding: 8px 10px; margin: 0 -10px; }
.side-item.click-row:hover { background: rgba(232,200,122,.08); transform: translateX(2px); }
#detail-modal { align-items: center; }
#detail-modal .info-modal-body { overflow-y: auto; }

/* ── 思考 / 自由行动：底部导航按钮 → 输入二级弹窗（输入文字，思考结果在弹窗内展示） ── */
#input-modal .modal-desc { margin-bottom: 10px; line-height: 1.65; }
#input-modal-text {
  width: 100%; box-sizing: border-box; background: var(--panel);
  border: 1px solid var(--line-strong); border-radius: 12px;
  color: var(--text); padding: 10px 12px; font-size: .95rem; line-height: 1.65;
  outline: none; resize: vertical; min-height: 92px; font-family: var(--font-body);
  transition: border-color .2s ease;
}
#input-modal-text:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(232,200,122,.12); }
#input-modal-text::placeholder { color: var(--text-faint); }
#input-modal-text:disabled { opacity: .5; }
.input-modal-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.input-modal-hint { font-size: .74rem; color: var(--text-faint); letter-spacing: .04em; }
.input-modal-result {
  margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.im-empty { font-size: .85rem; padding: 6px 0 2px; text-align: center; }
.im-entry { background: rgba(232,200,122,.05); border: 1px solid rgba(232,200,122,.22); border-radius: 10px; padding: 10px 12px; flex-shrink: 0; }
.im-entry.im-blocked { background: rgba(255,120,120,.05); border-color: rgba(255,120,120,.3); }
.im-entry-head { font-size: .72rem; color: var(--gold); letter-spacing: .1em; margin-bottom: 5px; }
.im-blocked .im-entry-head { color: #ff9090; }
.im-tag { color: #ff9090; border: 1px solid rgba(255,120,120,.4); border-radius: 999px; padding: 0 7px; font-size: .66rem; margin-left: 2px; }
.im-entry-in { font-size: .88rem; color: var(--text); margin-bottom: 4px; }
.im-entry-reply { font-size: .88rem; color: var(--text-dim); line-height: 1.75; white-space: pre-wrap; }
@media (max-width: 860px) {
  .input-modal-hint { display: none; } /* 触屏无快捷键：隐藏提示 */
}

/* ── 任务弹窗：底部「🎯 任务」按钮 → 玩家当前目标（主线＝主要 / 支线＝次要，来自大纲） ── */
#quest-modal .quest-modal-body {
  overflow-y: auto; padding-right: 2px;
  display: flex; flex-direction: column; gap: 14px;
}
#quest-modal .quest-modal-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line);
}
#quest-modal .quest-note { font-size: .74rem; line-height: 1.5; min-width: 0; }
.quest-head { display: flex; flex-direction: column; gap: 6px; }
.quest-chapter { font-size: .78rem; color: var(--gold); letter-spacing: .1em; }
.quest-summary {
  font-size: .92rem; color: var(--text); line-height: 1.7;
  background: rgba(232,200,122,.07); border: 1px solid rgba(232,200,122,.22);
  border-radius: 10px; padding: 9px 12px;
}
.quest-sec h5 {
  color: var(--gold); font-size: .73rem; letter-spacing: .18em;
  margin-bottom: 7px; font-weight: 500;
}
.quest-card {
  background: rgba(232,200,122,.05); border: 1px solid rgba(232,200,122,.22);
  border-left: 3px solid var(--gold); border-radius: 11px;
  padding: 10px 12px; margin-bottom: 8px;
}
.quest-card.is-side { border-left-color: rgba(167,139,250,.75); background: rgba(167,139,250,.05); border-color: rgba(167,139,250,.2); }
.quest-card.qs-done { opacity: .6; }
.quest-card.qs-blocked { border-left-color: #ff9c7a; }
.quest-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.quest-tag {
  font-size: .66rem; letter-spacing: .1em; border-radius: 999px; padding: 1px 8px;
  border: 1px solid rgba(232,200,122,.4); color: var(--gold);
}
.quest-tag.tag-side { border-color: rgba(167,139,250,.45); color: var(--purple); }
.quest-status { font-size: .68rem; color: var(--text-faint); }
.quest-status.doing { color: var(--green); }
.quest-status.blocked { color: #ff9c7a; }
.quest-status.done { color: var(--text-faint); }
.quest-title { font-size: .95rem; color: var(--text); line-height: 1.6; font-weight: 500; }
.quest-detail { font-size: .84rem; color: var(--text-dim); line-height: 1.65; margin-top: 3px; }
/* 目标卡不再有「立即行动」按钮与下一步提示（怎么做由玩家自己决定） */
.quest-done-sec .quest-done-row { font-size: .82rem; color: var(--text-faint); line-height: 1.9; }
.quest-empty { font-size: .86rem; text-align: center; padding: 10px 0; }
.quest-foot { font-size: .74rem; line-height: 1.6; margin-top: 2px; }

/* 选项区完整性：旧 ≤960 媒体规则曾限制 .story-side 高度（可能裁掉下方选项/输入栏）；故事页允许自然展开 */
@media (max-width: 960px) {
  #screen-story .story-side { max-height: none; }
}

/* ── 故事页纵向布局修正：选项+输入栏永不被底部导航遮挡；顶栏（地点/时钟/按钮）吸顶、不随正文滚动 ──
   旧布局把日志高度固定为「视口−固定值」，选项面板随之溢出到固定底栏下面，
   页尾留白又不足以让滚动把输入栏抬升到导航之上（桌面端甚至完全不可滚）。
   后来又改成 height:auto 让整页自然滚动 —— 这会让 .story-header 的 position:sticky 失效：
   吸顶元素的吸附范围被限制在它最近的「滚动祖先」内，而这一屏自身不再滚动（滚动的是 document），
   顶栏于是照样跟着正文滚走。这里让本屏自己成为滚动容器，顶栏才真正钉在顶部。 */
#screen-story.story-screen {
  height: 100vh; height: 100dvh;
  min-height: 0;                 /* 覆盖 .screen 的 min-height:100vh，否则会被内容撑高、吸顶再次失效 */
  overflow-y: auto;              /* 本屏即滚动容器：正文在其中滚动，顶栏吸顶 */
  padding-top: 0;                /* 顶栏自带内边距；吸顶后与视口顶部齐平 */
  padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)); /* 页尾留白：输入栏可滚到底栏之上 */
}
/* 故事页激活时取消 body 的底部留白：否则 document 仍会多出一段可滚动距离，把吸顶顶栏整体推走 */
body.story-active { padding-bottom: 0; }
#screen-story .story-body { flex: none; }
#screen-story .story-log { height: auto; max-height: none; min-height: 24vh; }
#screen-story .story-side { max-height: none; }

/* ── 程序化道具系统（docs/道具系统设计.md）：背包页签/方形道具格/交互按钮/道具事件卡 ── */
.bag-tabs { flex-wrap: wrap; row-gap: 4px; margin: 2px 0 8px; }
.bag-tabs .seg-btn { padding: 3px 9px; font-size: .74rem; position: relative; }
.bag-tab-n { margin-left: 5px; opacity: .8; font-size: .7rem; color: var(--gold-strong, #e8c878); }
.bag-hint { font-size: .7rem; color: var(--text-faint, #7a8aa0); margin: 0 0 6px 2px; }

/* 方形道具格：图标 + 名称（最多两行）+ 数量/装备/研读角标 + 一个主操作
   格宽自适应（88px 起），窄屏自然落到 2~3 列；重要度用边框/底色区分 */
.bag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; margin: 2px 0 10px; }
.bag-item.bag-tile {
  position: relative; margin: 0; padding: 10px 6px 7px; aspect-ratio: 1 / 1;
  display: flex !important; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; text-align: center; overflow: hidden; border-radius: 12px;
  border: 1px solid var(--line); background: rgba(255,255,255,.03);
}
.bag-item.bag-tile:hover { background: rgba(232,200,122,.09); transform: translateY(-2px); }
.bag-tile .bt-ico { font-size: 1.55rem; line-height: 1; filter: drop-shadow(0 3px 8px rgba(0,0,0,.45)); }
.bag-tile .bt-name {
  width: 100%; font-size: .72rem; line-height: 1.28; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  word-break: break-word;
}
.bag-tile .bt-count {
  position: absolute; top: 3px; right: 5px; font-size: .62rem; line-height: 1.5;
  color: var(--gold-strong, #f5d98f); background: rgba(0,0,0,.42); border-radius: 6px; padding: 0 4px;
}
.bag-tile .bt-flag { position: absolute; top: 3px; left: 5px; font-size: .62rem; line-height: 1.5; }
.bag-tile .bt-flag.eq { color: #7ee0a3; }
.bag-tile .bt-flag.rd { color: #7fd6ff; }
.bag-tile .bt-act { margin-top: 1px; font-size: .66rem; padding: 1px 9px; max-width: 100%; }
/* 重要度配色：越重要越亮眼 */
.bag-tile.t-imp { border-color: rgba(140,180,255,.5); background: rgba(140,180,255,.07); }
.bag-tile.t-key { border-color: rgba(232,169,76,.7); background: linear-gradient(160deg, rgba(232,169,76,.16), rgba(232,200,122,.04)); }
.bag-tile.t-key .bt-ico { filter: drop-shadow(0 0 10px rgba(232,169,76,.45)); }
.bag-tile.is-equipped { box-shadow: inset 0 0 0 1px rgba(126,224,163,.45); }
.bag-tile.is-equipped::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(126,224,163,.8), transparent);
}
/* 详情弹窗底部：道具的全部操作 */
.detail-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }
.detail-acts .item-act-btn { font-size: .8rem; padding: 5px 14px; }
.item-act-btn { font-size: .72rem; padding: 2px 9px; border-radius: 999px; border: 1px solid rgba(140,180,255,.5); color: #cfe3ff; background: transparent; cursor: pointer; transition: all .15s ease; }
.item-act-btn:hover:not(:disabled) { border-color: var(--gold-strong, #e8c878); color: var(--gold-strong, #e8c878); background: rgba(232,200,122,.1); }
.item-act-btn:disabled { opacity: .35; cursor: not-allowed; }
.clue-row { opacity: .85; }
.item-event-card {
  background: linear-gradient(135deg, rgba(232,200,122,.08), rgba(167,139,250,.06));
  border: 1px dashed rgba(232,200,122,.4); border-left: 3px solid var(--gold-strong, #e8c878);
  border-radius: 14px; padding: 12px 16px; animation: riseIn .5s ease both; margin: 10px 0;
}
.item-event-head { font-size: .74rem; color: var(--gold-strong, #e8c878); letter-spacing: .12em; margin-bottom: 5px; }
.item-event-text { color: var(--text, #dfe7f3); font-size: .92rem; line-height: 1.8; white-space: pre-wrap; }

/* ═══ M1-B3/B5 地图模块 + 图鉴/规则面板（v0.4 新面板样式） ═══ */

#st-loc.st-loc-btn { cursor: pointer; transition: filter .2s; }
#st-loc.st-loc-btn:hover { filter: brightness(1.35); }

/* 图鉴入口 trigger */
.side-trigger.trg-rules { border-left-color: var(--gold); color: var(--gold); }
.side-trigger.trg-rules:hover { color: var(--gold-strong); }
.side-trigger.trg-rules.active { border-left-color: var(--gold); box-shadow: 0 0 0 3px rgba(232,200,122,.12); color: var(--gold-strong); }

/* 规则/图鉴面板 */
.rules-card { border: 1px solid var(--line); border-left: 3px solid var(--gold); background: rgba(0,0,0,.12); border-radius: 10px; padding: 8px 10px 10px; }
.rules-card h5 { color: var(--gold); font-size: .78rem; letter-spacing: .14em; margin: 2px 0 6px; font-weight: 600; }
.rules-body { display: flex; flex-direction: column; gap: 4px; font-size: .84rem; }
.rk { display: flex; gap: 8px; line-height: 1.6; border-bottom: 1px dashed rgba(255,255,255,.05); padding: 3px 0; }
.rk-k { flex-shrink: 0; min-width: 88px; color: var(--text-dim); }
.rk-v { color: var(--text); }
.rules-card .muted { color: var(--text-faint); }

/* 地图弹层 */
.map-modal-card { width: min(1180px, 97vw); max-height: min(94vh, 100%); display: flex; flex-direction: column; }
.map-modal-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 6px 2px; }
.map-loading { padding: 18px 4px; }
.map-top { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 2px 4px; }
.map-legend { font-size: .78rem; color: var(--text-dim); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.map-legend i.cur { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #ffd76a; }
.map-legend .vis, .map-legend .unvis { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #8fd0a8; }
.map-legend .unvis { background: rgba(255,255,255,.14); }
.map-hint { font-size: .74rem; }
.map-layout { display: flex; gap: 10px; min-height: 320px; }
.map-canvas-box { flex: 1; min-width: 0; overflow: auto; border: 1px solid var(--line); border-radius: 12px; background: radial-gradient(ellipse at 30% 20%, rgba(120,160,255,.05), rgba(0,0,0,.25)); padding: 4px; }
.map-svg { width: 100%; height: auto; min-width: 620px; display: block; }
.map-region { fill: rgba(255,255,255,.16); font-size: 17px; letter-spacing: .3em; }
.map-edge { stroke: rgba(255,255,255,.22); stroke-width: 2; }
.map-edge.on-route { stroke: #ffd76a; stroke-width: 3.5; }
.map-edge-cost { fill: rgba(255,255,255,.4); font-size: 11px; }
.map-node.is-unvis circle { opacity: .38; }
.map-node circle { stroke: rgba(255,255,255,.75); stroke-width: 1.5; }
.map-node.is-cur circle { stroke: #ffd76a; stroke-width: 3; }
.map-node.is-cur .map-you { fill: #ffd76a; font-size: 12px; text-anchor: middle; font-weight: 700; }
.map-node.on-route circle { stroke: #ffd76a; }
.map-pname { fill: rgba(255,255,255,.85); font-size: 11px; text-anchor: middle; }
.dcol.d0 { fill: rgba(255,255,255,.28); color: rgba(255,255,255,.6); }
.dcol.d1 { fill: #4fae7f; color: #8fd0a8; }
.dcol.d2 { fill: #c9a24f; color: #e6c06a; }
.dcol.d3 { fill: #c25a4e; color: #ff9d8f; }
.map-panel { width: 320px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; max-height: 66vh; overflow-y: auto; }
.mp-sec { border: 1px solid var(--line); border-radius: 12px; padding: 9px 11px; background: rgba(0,0,0,.14); }
.mp-route-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .82rem; color: var(--text-dim); }
.mp-route-row select { flex: 1; min-width: 90px; background: #101826; color: var(--text); border: 1px solid var(--line-strong); border-radius: 8px; padding: 5px 6px; font-size: .82rem; }
.mp-route-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.mp-route-actions .btn { padding: 5px 12px; font-size: .8rem; }
.map-route-result { font-size: .8rem; margin-top: 7px; line-height: 1.6; color: var(--text-dim); }
.mp-place-head { font-size: 1rem; color: var(--gold-strong); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mp-tag { font-size: .7rem; border: 1px solid var(--line-strong); border-radius: 20px; padding: 1px 8px; color: var(--text-dim); }
.mp-tag.tag-cur { color: #ffd76a; border-color: #ffd76a; }
.mp-desc { font-size: .86rem; line-height: 1.7; margin-top: 6px; color: var(--text); }
.mp-feat { font-size: .78rem; color: var(--text-dim); margin-top: 4px; }
.mp-ppl { font-size: .78rem; color: #9fd8ec; margin-top: 4px; }
.mp-nb-title { font-size: .74rem; color: var(--text-faint); margin: 8px 0 4px; }
.mp-nb-row { display: flex; flex-wrap: wrap; gap: 6px; }
.map-nb { font-size: .76rem; border: 1px solid var(--line-strong); border-radius: 20px; padding: 3px 10px; background: transparent; color: var(--text-dim); cursor: pointer; }
.map-nb:hover { color: #ffd76a; border-color: #ffd76a; }
.mp-actions { display: flex; gap: 8px; margin-top: 10px; }
.mp-actions .btn { padding: 5px 13px; font-size: .8rem; }
.map-list { display: flex; flex-wrap: wrap; gap: 8px; }
.map-chip { font-size: .82rem; border: 1px solid var(--line); background: rgba(0,0,0,.18); color: var(--text); border-radius: 10px; padding: 7px 12px; cursor: pointer; opacity: .55; }
.map-chip.is-vis { opacity: 1; }
.map-chip.is-cur { border-color: #ffd76a; color: #ffd76a; }
.map-chip .muted { font-size: .72rem; }
@media (max-width: 760px) {
  .map-layout { flex-direction: column; }
  .map-panel { width: 100%; max-height: none; }
  .map-canvas-box { display: none; }
}

/* ═══ M2 骰子出示（创世选项） ═══ */
.dice-opt { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 4px 2px 2px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(0,0,0,.14); }
.dice-opt-t { font-size: .82rem; color: var(--gold); letter-spacing: .16em; }
.dice-opt-it { display: flex; align-items: baseline; gap: 7px; cursor: pointer; font-size: .85rem; color: var(--text); }
.dice-opt-it em { font-style: normal; font-size: .74rem; color: var(--text-faint); }
.dice-opt-it input { accent-color: var(--gold); }
@media (max-width: 640px) { .dice-opt { flex-direction: column; align-items: flex-start; gap: 7px; } }

/* ═══ M2 明骰行（观察历史 · policy=open 才渲染） ═══ */
.im-roll { display: flex; flex-direction: column; gap: 2px; margin: 6px 0 2px; padding: 6px 9px; border: 1px solid rgba(255,215,106,.35); border-radius: 8px; background: rgba(255,215,106,.06); font-size: .82rem; color: #ffd76a; }
.im-roll b { letter-spacing: .12em; font-size: .72rem; color: rgba(255,215,106,.8); }
.im-roll-detail { font-size: .72rem; color: var(--text-faint); margin-top: 2px; }

/* ═══ M2c 英雄点（? 徽标 / 全力以赴 / 翻档·命运低语） ═══ */
.hero-adv-wrap { display: inline-flex; align-items: center; gap: 7px; margin: 6px 0 2px; font-size: .82rem; color: var(--gold); cursor: pointer; user-select: none; }
.hero-adv-wrap input { accent-color: var(--gold); }
.hero-adv-wrap.hidden { display: none; }
.im-hero { display: block; margin: 6px 0 2px; padding: 6px 10px; border: 1px solid rgba(255,215,106,.5); border-radius: 20px; background: rgba(255,215,106,.08); color: #ffd76a; font-size: .78rem; cursor: pointer; letter-spacing: .05em; text-align: left; }
.im-hero:hover { background: rgba(255,215,106,.16); }
#st-hero { cursor: default; }

/* ═══ M3 自选铸身（三段式向导） ═══ */
.birth-mode { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 2px 0 14px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(0,0,0,.14); }
.birth-mode-t { font-size: .8rem; color: var(--gold); letter-spacing: .16em; margin-right: 4px; }
.birth-mode-btn.active { border-color: var(--gold); color: var(--gold-strong); }
.birth-wizard { margin-top: 4px; }
.birth-wizard.hidden { display: none; }
.wz-head { font-size: 1.05rem; color: var(--gold-strong); letter-spacing: .12em; margin: 6px 0 4px; }
.wz-cards { display: flex; flex-direction: column; gap: 9px; margin: 8px 0; }
.wz-card { border: 1px solid var(--line); border-radius: 12px; padding: 10px 13px; cursor: pointer; background: rgba(0,0,0,.14); transition: all .2s; }
.wz-card:hover { border-color: var(--line-strong); }
.wz-card.selected { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(232,200,122,.12); }
.wz-card-head { display: flex; gap: 8px; align-items: center; color: var(--gold-strong); font-size: .95rem; }
.wz-card-desc { font-size: .82rem; color: var(--text-dim); margin-top: 5px; line-height: 1.7; }
.wz-mini { font-size: .76rem; color: var(--text-faint); margin-top: 5px; }
.wz-nav { display: flex; gap: 10px; justify-content: flex-end; margin: 14px 0 4px; }
.wz-attr-list { display: flex; flex-direction: column; gap: 7px; margin: 8px 0; }
.wz-attr-row { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 7px 11px; }
.wa-name { min-width: 88px; color: var(--text); font-size: .9rem; }
.wa-range { font-size: .74rem; flex: 1; }
.wa-ctrl { display: flex; align-items: center; gap: 9px; }
.wa-btn { min-width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--line-strong); background: transparent; color: var(--gold); cursor: pointer; font-size: 1rem; line-height: 1; }
.wa-btn:hover { border-color: var(--gold); }
.wa-val { min-width: 34px; text-align: center; font-size: 1.05rem; color: var(--gold-strong); }
.wz-ladder { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.wz-sec { margin: 12px 0 4px; }
.wz-sec h5 { color: var(--gold); font-size: .76rem; letter-spacing: .18em; margin-bottom: 7px; font-weight: 600; }
.wz-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.wz-chks { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; padding-right: 4px; }
.wz-chk { display: flex; align-items: baseline; gap: 8px; font-size: .85rem; color: var(--text); cursor: pointer; border: 1px solid transparent; border-radius: 9px; padding: 4px 8px; }
.wz-chk:hover { background: rgba(255,255,255,.04); }
.wz-chk.on { border-color: rgba(232,200,122,.4); background: rgba(232,200,122,.07); }
.wz-chk em { font-style: normal; font-size: .74rem; color: var(--text-faint); }
.wz-chk input { accent-color: var(--gold); }
.wz-customs { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.wz-cust { display: flex; justify-content: space-between; align-items: center; gap: 8px; border: 1px dashed rgba(255,255,255,.16); border-radius: 9px; padding: 6px 10px; font-size: .85rem; color: var(--text); }
.wz-cust-editor { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line); border-radius: 12px; padding: 11px; background: rgba(0,0,0,.12); }
.wz-cust-editor input, .wz-cust-editor select, .wz-cust-editor textarea { background: #101826; color: var(--text); border: 1px solid var(--line-strong); border-radius: 8px; padding: 7px 9px; font-size: .84rem; font-family: var(--font-body); }
#cu-desc { width: 100%; }
.wz-tip { font-size: .72rem; margin-top: 8px; }

/* ═══ M3D 成长选择屏 + 经验徽标 ═══ */
#st-xp { cursor: pointer; transition: filter .2s; }
#st-xp:hover { filter: brightness(1.35); }
#st-xp.xp-ready { border-color: #7fe0a8; color: #7fe0a8; box-shadow: 0 0 0 3px rgba(127,224,168,.12); }
.growth-modal-card { width: min(680px, 96vw); max-height: min(90vh, 100%); display: flex; flex-direction: column; }
.growth-modal-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 2px; display: flex; flex-direction: column; gap: 8px; }
.grow-top { font-size: .9rem; color: var(--gold); padding: 4px 2px; }
.grow-list { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; }
.grow-item { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 7px 11px; font-size: .86rem; }
.grow-name { flex: 1; color: var(--text); }
.grow-cost { font-size: .74rem; }
.grow-item .btn { padding: 4px 12px; font-size: .78rem; }

/* ═══ M6 对话拍 + 交易桌（快捷通道已按定案移除：交互入口=正文里带下划线的词） ═══ */
.dlg-card { border: 1px dashed rgba(255,255,255,.14); border-radius: 12px; padding: 9px 13px; margin: 6px 0; background: rgba(90,120,180,.05); }
.dlg-you { color: var(--text-dim); font-size: .82rem; margin-bottom: 4px; }
.dlg-npc { color: #9fd8ec; font-size: .9rem; line-height: 1.7; }
.trade-modal-card { width: min(640px, 96vw); max-height: min(92vh, 100%); display: flex; flex-direction: column; }
.trade-modal-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 9px; padding: 4px 2px; }
.trade-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; color: var(--text); font-size: .9rem; padding: 2px 2px 0; }
.trade-item { border: 1px solid var(--line-strong); border-radius: 12px; padding: 10px 13px; background: rgba(0,0,0,.16); }
.trade-item-head { color: var(--gold-strong); font-size: 1rem; display: flex; gap: 8px; }
.trade-ask { margin-top: 7px; color: var(--text); }
.trade-row { display: flex; flex-wrap: wrap; gap: 6px; }
.trade-lot { font-size: .76rem; border: 1px solid var(--line); border-radius: 20px; padding: 3px 11px; background: transparent; color: var(--text-dim); cursor: pointer; }
.trade-lot.on { color: #ffd76a; border-color: #ffd76a; }
.trade-price-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.trade-price-row input { width: 120px; background: #101826; color: var(--text); border: 1px solid var(--line-strong); border-radius: 8px; padding: 7px 9px; font-size: .86rem; }
.trade-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.trade-actions .btn { padding: 5px 13px; font-size: .8rem; }
.trade-outcome { border: 1px solid #7fe0a8; color: #7fe0a8; border-radius: 12px; padding: 10px 13px; background: rgba(127,224,168,.07); font-size: 1rem; }
.trade-log { display: flex; flex-direction: column; gap: 3px; border-top: 1px dashed rgba(255,255,255,.1); padding-top: 7px; }
.trade-log-line { font-size: .82rem; color: var(--text-dim); line-height: 1.65; }

/* ═══ M5 战斗态轻标注 ═══ */
.scene-battle { border-left-color: #e06a5a; }
.scene-battle-end { border-left-color: #c9a24f; }
.scene-battle-tag { display: inline-block; margin-left: 8px; border: 1px solid #e06a5a; color: #ff9d8f; border-radius: 20px; padding: 0 9px; font-size: .72rem; letter-spacing: .12em; }

/* ═══ M1.5 地图双层 · 上下结构 ═══ */
.map-topbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 2px 2px 6px; }
.map-mode-btn { border: 1px solid var(--line-strong); background: rgba(0,0,0,.2); color: var(--text-dim); border-radius: 20px; padding: 5px 14px; font-size: .84rem; cursor: pointer; letter-spacing: .08em; }
.map-mode-btn.active { color: #ffd76a; border-color: #ffd76a; box-shadow: 0 0 0 3px rgba(232,200,122,.1); }
.map-mode-hint { font-size: .72rem; margin-left: auto; }
.map-stage { width: min(100%, calc(100vh - 430px)); aspect-ratio: 1 / 1; margin: 0 auto; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: radial-gradient(ellipse at 30% 20%, rgba(120,160,255,.06), rgba(0,0,0,.3)); position: relative; }
.map-stage svg { width: 100%; height: 100%; display: block; }
.map-stage .map-canvas-box { width: 100%; height: 100%; overflow: auto; border: none; border-radius: 0; }
.map-desc { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin-top: 8px; border: 1px solid var(--line); border-radius: 12px; background: rgba(0,0,0,.14); padding: 9px 12px; display: flex; flex-direction: column; gap: 6px; }
.pd-head { color: var(--gold-strong); font-size: .98rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pd-badge { font-size: .7rem; border: 1px solid var(--line-strong); color: var(--text-dim); border-radius: 20px; padding: 1px 8px; }
.pd-desc { color: var(--text); font-size: .88rem; line-height: 1.75; }
.pd-you { font-size: .78rem; }
.pd-sec { margin-top: 6px; }
.pd-sec h5 { color: var(--gold); font-size: .74rem; letter-spacing: .16em; margin: 4px 0 6px; font-weight: 600; }
.pd-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.pd-btn { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; border: 1px solid var(--line); background: rgba(0,0,0,.16); border-radius: 10px; padding: 5px 10px; font-size: .84rem; color: var(--text); cursor: pointer; text-align: left; }
.pd-btn:hover { border-color: var(--gold); color: var(--gold-strong); }
.pd-btn b { color: inherit; }
.pd-btn .muted { font-size: .74rem; }
.pd-obj-detail { margin-top: 7px; border: 1px dashed rgba(255,255,255,.12); border-radius: 9px; padding: 7px 10px; font-size: .83rem; color: var(--text); }
.pd-obj-detail b { color: var(--gold); margin-right: 6px; }
.pd-obj-detail div { margin-top: 3px; color: var(--text-dim); }

/* 位置层俯视 SVG（M1.5-P6 构图引擎：纵深分层 + 光影 + 成簇人物） */
.place-svg text { text-anchor: middle; user-select: none; }
.pv-title { fill: rgba(255,255,255,.82); font-size: 19px; letter-spacing: .2em; }
.pv-titleplate { fill: rgba(0,0,0,.34); }
.pv-tip { fill: rgba(255,255,255,.3); font-size: 12px; }
.pv-hit { fill: transparent; }
.pv-shadow { fill: rgba(0,0,0,.55); }
.pv-you-glow { fill: rgba(255,215,106,.16); }
.pv-you-body { fill: rgba(255,215,106,.92); }
.pv-you-head { fill: #ffe9b0; }
.pv-you-txt { fill: #ffd76a; font-size: 15px; font-weight: 700; }
.pv-body { fill: rgba(206,224,240,.8); }
.pv-body-temp { fill: rgba(198,204,214,.55); stroke: rgba(255,255,255,.35); stroke-width: 1; stroke-dasharray: 3 3; }
.pv-head { fill: rgba(240,246,252,.9); }
.pv-head-temp { fill: rgba(214,220,230,.75); }
.pv-npc:hover .pv-body { fill: rgba(159,216,236,.95); }
.pv-npc:hover .pv-head { fill: #e8f7ff; }
.pv-obj-dot { fill: rgba(232,200,122,.14); stroke: rgba(232,200,122,.5); stroke-width: 1.5; }
.pv-obj:hover .pv-obj-dot { fill: rgba(232,200,122,.34); }
.pv-obj-ico { font-size: 16px; }
.pv-name { fill: rgba(255,255,255,.8); font-size: 11px; paint-order: stroke; stroke: rgba(0,0,0,.6); stroke-width: 3px; stroke-linejoin: round; }
.pv-exit-txt { fill: #9fd8ec; font-size: 12px; paint-order: stroke; stroke: rgba(0,0,0,.6); stroke-width: 3px; stroke-linejoin: round; }
.pv-exit-cost { fill: rgba(255,255,255,.5); font-size: 9px; paint-order: stroke; stroke: rgba(0,0,0,.55); stroke-width: 2.5px; stroke-linejoin: round; }
.pv-door { fill: rgba(159,216,236,.28); stroke: #9fd8ec; stroke-width: 1.5; }
.pv-path { fill: rgba(255,255,255,.055); }
.pv-exit:hover .pv-door { fill: rgba(159,216,236,.55); }
.pv-exit:hover .pv-exit-txt { fill: #ffd76a; }
@media (max-width: 760px) {
  .map-stage { width: 100%; max-width: calc(100vh - 470px); }
  .map-stage svg { min-width: 0; }
  .map-canvas-box .map-svg { min-width: 0; }
}
.map-stage .map-canvas-box { padding: 0; }
.map-no-place { text-align: center; padding: 22px 8px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.map-mode-btn:disabled { opacity: .45; cursor: not-allowed; }
.map-stage .map-svg, .map-stage .place-svg { min-width: 0; width: 100%; height: 100%; }

/* ── M1.5-P4 概念地图动态实体：路人（临时卡）标记 + 位置层同步入口 ── */
.pv-temp-tag { fill: rgba(255,255,255,.5); font-size: 9px; text-anchor: middle; paint-order: stroke; stroke: rgba(0,0,0,.6); stroke-width: 2.5px; }
.pd-tag { margin-left: 6px; padding: 1px 6px; border-radius: 7px; font-size: .68rem; color: var(--text-faint); border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05); }
.pd-zone { margin-left: 6px; padding: 1px 6px; border-radius: 7px; font-size: .68rem; color: #9fd8ec; border: 1px solid rgba(159,216,236,.3); background: rgba(159,216,236,.08); }
.pd-btn.is-temp b { color: var(--text-dim); }
.pd-sync { margin: 8px 0 2px; }
.pd-sync-hint { font-size: .78rem; line-height: 1.5; margin-bottom: 4px; }

/* ── M1.5-P5 位置层环境（景物：地面/墙/天光 + 树草石水等装饰） ── */
.place-svg .pv-pat-base { fill: rgba(255,255,255,.06); }
.place-svg .pv-pat-line { stroke: rgba(255,255,255,.075); stroke-width: 1; fill: none; }
.place-svg .pv-pat-stroke { stroke: rgba(255,255,255,.13); stroke-width: 1.4; fill: none; }
.place-svg .pv-pat-wall-bg { fill: rgba(74,60,46,.95); }
.place-svg .pv-ground.g-stone { fill: url(#pv-pat-stone); }
.place-svg .pv-ground.g-wood { fill: url(#pv-pat-wood); }
.place-svg .pv-ground.g-grass { fill: url(#pv-pat-grass); }
.place-svg .pv-ground.g-sand { fill: url(#pv-pat-sand); }
.place-svg .pv-ground.g-snow { fill: url(#pv-pat-snow); }
.place-svg .pv-ground.g-earth { fill: url(#pv-pat-earth); }
.place-svg .pv-sky { fill: rgba(58,104,164,.85); }
.place-svg.t-out .pv-sky { fill: rgba(44,92,150,.85); }
.place-svg.t-town .pv-sky { fill: rgba(62,82,126,.8); }
.place-svg .pv-horizon { stroke: rgba(255,255,255,.14); stroke-width: 1.5; fill: none; }
.place-svg .pv-wallband { fill: url(#pv-pat-wall); }
.place-svg .pv-wallbase { stroke: rgba(0,0,0,.35); stroke-width: 2; fill: none; }
.place-svg.t-room .pv-pat-base { fill: rgba(48,44,40,.94); }
.place-svg.t-hall .pv-pat-base { fill: rgba(58,46,34,.94); }
.place-svg.t-town .pv-pat-base { fill: rgba(46,48,56,.94); }
.place-svg.t-out .pv-pat-base { fill: rgba(28,44,36,.94); }
.place-svg.t-hall .pv-pat-line { stroke: rgba(255,226,180,.10); }
.place-svg.t-out .pv-pat-stroke { stroke: rgba(160,235,180,.20); }
.place-svg.t-town .pv-pat-line { stroke: rgba(200,212,255,.08); }
.place-svg .pv-deco { opacity: .9; }
.place-svg .pv-deco-ico { font-size: 20px; text-anchor: middle; }
.place-svg .pv-deco:hover .pv-deco-ico { font-size: 24px; }
.place-svg .pv-deco-mist, .place-svg .pv-deco-light { opacity: .85; }
.place-svg .pv-mist { fill: rgba(214,228,240,.10); }
.place-svg .pv-pool { fill: rgba(88,160,220,.20); }
.pd-scenery { border-style: dashed; }
.pd-scenery b { color: var(--text-dim); }

/* ── M7 A4：画布上的交互状态（已开/已搜/已取/已破坏一眼可辨） ── */
.place-svg .pv-obj.st-opened .pv-obj-dot { stroke: rgba(255,214,132,.75); stroke-dasharray: 3 3; }
.place-svg .pv-obj.st-looted .pv-obj-dot { fill: rgba(120,120,120,.30); stroke: rgba(200,200,200,.35); }
.place-svg .pv-obj.st-looted .pv-obj-ico { opacity: .62; }
.place-svg .pv-obj.st-taken .pv-obj-dot { fill: rgba(0,0,0,.28); stroke-dasharray: 2 3; }
.place-svg .pv-obj.st-taken .pv-obj-ico { opacity: .34; }
.place-svg .pv-obj.st-taken .pv-name { opacity: .55; }
.place-svg .pv-obj.st-broken .pv-obj-dot { fill: rgba(150,60,50,.28); stroke: rgba(220,120,100,.55); }
.place-svg .pv-obj.st-broken .pv-obj-ico { opacity: .5; }
.place-svg .pv-obj.st-used .pv-obj-dot { stroke: rgba(159,216,236,.6); }
.place-svg .pv-deco.st-looted, .place-svg .pv-deco.st-taken { opacity: .5; }
.place-svg .pv-deco.st-broken { opacity: .45; }

/* ── M7 交互层：动作 chips + 动作面板 + 状态/关键面徽标（docs/交互系统设计.md §9） ── */
.pd-btn.is-picked { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(255,214,132,.25) inset; }
.pd-tag-state { color: #9fd8ec; border-color: rgba(159,216,236,.35); background: rgba(159,216,236,.10); }
.pd-tag-quest { color: #ffb4a2; border-color: rgba(255,180,162,.4); background: rgba(255,180,162,.10); }

/* ── M1.6 子地点（地点内部的空间）：走过去零时间、不推幕 ── */
.pd-sub-here { margin: 4px 0 6px; font-size: .82rem; color: #96e6a1; }
.pd-sub-here .muted { color: var(--text-faint); font-size: .74rem; }
.pd-subs .p-sub.is-here { border-color: rgba(150,230,161,.55); background: rgba(150,230,161,.10); color: #b7f2c0; }
.pd-subs .p-sub.is-far { opacity: .62; cursor: not-allowed; }
.pd-subs .p-sub.is-far:hover { border-color: var(--line); color: var(--text-dim); }
.pd-subs .p-sub-out { color: #c9a9ff; border-color: rgba(201,169,255,.35); }
.pd-subs .p-sub-out:hover { border-color: rgba(201,169,255,.7); color: #dcc6ff; }
.pd-panel:empty { display: none; }
.pd-panel { margin-top: 8px; }
.pv-ap-head { display: flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--gold-strong); border-bottom: 1px solid rgba(255,255,255,.1); padding-bottom: 5px; }
.pv-ap-close { margin-left: auto; border: 1px solid var(--line); background: rgba(0,0,0,.2); color: var(--text-dim); border-radius: 7px; padding: 0 7px; cursor: pointer; }
.pv-ap-close:hover { color: var(--gold); border-color: var(--gold); }
.pv-ap-note { font-size: .76rem; margin: 5px 0 7px; }
.pv-act-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 6px; }
.pv-act-btn { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; border: 1px solid var(--line); background: rgba(0,0,0,.18); border-radius: 10px; padding: 6px 9px; cursor: pointer; text-align: left; color: var(--text); }
.pv-act-btn:hover { border-color: var(--gold); }
.pv-act-btn.is-adv { border-color: rgba(255,214,132,.35); background: rgba(255,214,132,.06); }
.pv-act-name { font-size: .85rem; }
.pv-act-tag { font-size: .66rem; padding: 0 6px; border-radius: 7px; color: var(--text-faint); border: 1px solid rgba(255,255,255,.16); }
.pv-act-tag.adv { color: var(--gold-strong); border-color: rgba(255,214,132,.45); background: rgba(255,214,132,.10); }
.pv-act-auto { font-size: .72rem; line-height: 1.4; }
.pv-ap-hint { font-size: .72rem; margin-top: 6px; }
.pv-ap-result { margin-top: 7px; border: 1px dashed rgba(255,255,255,.14); border-radius: 9px; padding: 7px 10px; }
.pv-ap-text { font-size: .86rem; line-height: 1.75; color: var(--text); }
.pv-ap-dice { margin-top: 5px; font-size: .74rem; color: #9fd8ec; }
.pv-popup-card { border-left: 2px solid rgba(159,216,236,.5); }

/* 打字机揭示（2026-09-17 改）：**不再用横向遮罩**。
   旧写法 `mask-image: linear-gradient(90deg, …)` 的遮罩定位区是整个元素盒、且对每一行同时生效，
   揭示到一半时每一行都只露出左半截——读起来比直接给全文更费力。
   现在逐字由 JS 控制（按字符赋值 textContent），这里只保留"可点跳过"的手型光标。 */
.typing-reveal { cursor: pointer; }

/* ── M7 正文可交互词（点词就地弹动作面板） ──
   配色/字体规则由用户 2026-09-12 定案（D49，原话）：
     「**不能交互的角色 字体不做特殊处理，可交互的用橙色和特殊字体**」
   · **能点的角色** = **橙 `#ffb27a`（≈25°）** + **特殊字体 `--font-display`（宋体系；正文是 `--font-body` 黑体系）**，
     并保留下划线 + 加粗 + 手型光标——一眼就该看出"这里能点"；
   · **不能点的**（正文提到、但此刻不在场）→ 见下面 `.iw-absent`：**退回普通正文，什么都不加**。
   教训（这一条改了三次才定下来）：原来的错法是"不能点的也上色、只把透明度调淡"——
   玩家读到的约定是"有色＝能点"，于是"黄的却点不动"最误导。 */
.interw { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; font-weight: 600; }
.interw:hover { text-decoration-thickness: 2px; }
.interw.iw-npc { color: #ffb27a; font-family: var(--font-display); text-decoration-color: rgba(255,178,122,.65); }
.interw.iw-object { color: #8fd7ff; text-decoration-color: rgba(143,215,255,.6); }
.interw.iw-scenery { color: #96e6a1; text-decoration-color: rgba(150,230,161,.6); }
.interw.iw-exit { color: #c9a9ff; text-decoration-color: rgba(201,169,255,.6); }
/* W1-C1 世界层"别处"：望得见但手伸不过去（点它给远望 / 打听 / 喊话） */
.interw.iw-world { color: #ffb27a; text-decoration-color: rgba(255,178,122,.6); text-decoration-style: dashed; }
.pd-world .p-world { border-color: rgba(255, 178, 122, .28); }
.pd-world .p-world:hover { border-color: rgba(255, 178, 122, .7); color: #ffd0a8; }
.pd-world .pd-world-acts { font-size: .72rem; color: var(--text-faint); }
/* 正文里提到、但**此刻不在场**的角色：**字体不做特殊处理**（用户原话）——
   颜色回到正文默认、字体回到正文默认、不加粗、无下划线、不用手型光标：读起来就是普通一句话里的名字。
   仍然可以点（点了会如实告诉你"他不在这里"），但**外观上不承诺"这里有事可做"**。
   由 `verify-wordclick` 第 ⑥ 段钉死（能点的必须橙+特殊字体；不能点的必须全部退回默认）。 */
.interw.iw-absent {
  color: inherit; font-family: inherit; font-weight: inherit;
  text-decoration: none; cursor: default; opacity: 1;
}
.interw.iw-absent:hover { text-decoration: none; }
.interw[data-state] { text-decoration-style: dashed; opacity: .82; }

/* 面板里的就地输入框（搭话：说出口才算数，说话零后果） */
.word-pop .wp-say { margin-top: 7px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 7px; }
.word-pop .wp-say.hidden { display: none; }
.word-pop .wp-say textarea { width: 100%; box-sizing: border-box; resize: vertical; background: rgba(0,0,0,.28); color: var(--text); border: 1px solid var(--line-strong); border-radius: 8px; padding: 6px 8px; font-size: .84rem; font-family: inherit; line-height: 1.5; }
.word-pop .wp-say-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.word-pop .wp-say-btn { border: 1px solid var(--gold); background: rgba(255,214,132,.12); color: var(--gold-strong); border-radius: 9px; padding: 4px 12px; font-size: .82rem; cursor: pointer; }
.word-pop .wp-say-btn:hover { background: rgba(255,214,132,.2); }
.word-pop .wp-say-tip { font-size: .68rem; }

/* 点词就地弹出的动作面板（跟随点击位置；只给"能做什么"，不显示档位与后果） */
.word-pop { position: fixed; z-index: 140; min-width: 190px; max-width: min(330px, 90vw); background: var(--panel-solid); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow); padding: 9px 10px; }
.word-pop.hidden { display: none; }
.word-pop .wp-head { display: flex; align-items: center; gap: 6px; font-size: .9rem; border-bottom: 1px solid rgba(255,255,255,.1); padding-bottom: 6px; }
.word-pop .wp-head b.iw-npc { color: #ffb27a; }
.word-pop .wp-head b.iw-object { color: #8fd7ff; }
.word-pop .wp-head b.iw-scenery { color: #96e6a1; }
.word-pop .wp-head b.iw-exit { color: #c9a9ff; }
.word-pop .wp-head b.iw-world { color: #ffb27a; }
.word-pop .wp-kind { font-size: .72rem; color: var(--text-faint); }
.word-pop .wp-state { font-size: .68rem; color: #9fd8ec; border: 1px solid rgba(159,216,236,.32); border-radius: 6px; padding: 0 5px; }
.word-pop .wp-close { margin-left: auto; border: 1px solid var(--line); background: rgba(0,0,0,.2); color: var(--text-dim); border-radius: 7px; padding: 0 6px; cursor: pointer; }
.word-pop .wp-close:hover { color: var(--gold); border-color: var(--gold); }
.word-pop .wp-note { font-size: .74rem; margin: 6px 0 4px; line-height: 1.5; }
/* M1.6：这东西不在此刻这一处 → 说清在哪 + 一个"走过去" */
.word-pop .wp-subhint { margin: 6px 0 2px; font-size: .74rem; line-height: 1.6; color: #96e6a1; }
.word-pop .wp-walk { margin-left: 4px; border: 1px solid rgba(150,230,161,.5); background: rgba(150,230,161,.12); color: #b7f2c0; border-radius: 8px; padding: 1px 9px; font-size: .74rem; cursor: pointer; }
.word-pop .wp-walk:hover { background: rgba(150,230,161,.22); }
.word-pop .wp-acts { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
/* 面板内的自由交互（玩家自己写想做什么） */
.word-pop .wp-free { margin-top: 8px; border-top: 1px dashed rgba(255,255,255,.16); padding-top: 7px; }
.word-pop .wp-free-head { font-size: .78rem; color: var(--gold-strong); margin-bottom: 5px; }
.word-pop .wp-free textarea { width: 100%; box-sizing: border-box; resize: vertical; background: rgba(0,0,0,.28); color: var(--text); border: 1px solid var(--line-strong); border-radius: 8px; padding: 6px 8px; font-size: .84rem; font-family: inherit; line-height: 1.5; }
.word-pop .wp-free-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
/* 交互期间：自由行动输入栏与选项一起隐藏（正在交互就只留提示） */
.story-free-input.inter-hidden { display: none; }

/* 面板内结果区：点了动作立刻给反馈（绝不静默） */
.word-pop .wp-result { margin-top: 7px; border-top: 1px dashed rgba(255,255,255,.14); padding-top: 6px; font-size: .84rem; line-height: 1.7; color: var(--text); }
.word-pop .wp-result.hidden { display: none; }
.word-pop .wp-act { display: flex; align-items: center; gap: 6px; text-align: left; border: 1px solid var(--line); background: rgba(0,0,0,.18); border-radius: 9px; padding: 6px 9px; font-size: .84rem; color: var(--text); cursor: pointer; }
.word-pop .wp-act:hover { border-color: var(--gold); color: var(--gold-strong); }
.word-pop .wp-act-ico { font-size: .9rem; }

/* ── M1.5-P6 构图引擎：透视地面 / 光池 / 暗角 / 墙根阴影 / 天际 ── */
.place-svg .pv-floorline { stroke: rgba(255,255,255,.05); stroke-width: 1; fill: none; }
.place-svg .pv-depthline { stroke: rgba(255,255,255,.045); stroke-width: 1; fill: none; }
.place-svg .pv-lightpool { fill: url(#pv-lightgrad); }
.place-svg .pv-vignette { fill: url(#pv-vignette); pointer-events: none; }
.place-svg .pv-wallfade { fill: url(#pv-wallfade); }
.place-svg .pv-shaft { fill: rgba(255,242,206,.055); }
.place-svg .pv-hills { fill: rgba(16,34,52,.42); }
.place-svg.t-out .pv-hills { fill: rgba(14,40,34,.5); }
.place-svg .pv-env { pointer-events: none; }

/* ═══════════════ 简单账号系统 ═══════════════ */
.account-chip { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 0 14px; font-size: .9rem; color: var(--text-dim); }
.account-chip b { color: var(--gold-strong); font-weight: 600; }
.account-chip .btn { padding: 2px 10px; font-size: .78rem; }
.load-case { position: relative; }
.load-case-del { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; line-height: 1; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--text-faint); font-size: .85rem; cursor: pointer; opacity: .55; }
.load-case:hover .load-case-del { opacity: 1; }
.load-case-del:hover { color: #ff7d7d; border-color: rgba(255, 125, 125, .4); background: rgba(255, 125, 125, .08); }

.btn-sm { padding: 3px 12px; font-size: .8rem; }