:root {
    /* 深墨底不变，但框线、字和操作全部提亮：暗底亮框，先保证一屏内能看清。 */
    --ink: var(--hj-paper);
    --ink-2: var(--hj-paper);
    --paper: var(--hj-ink);
    --paper-dim: var(--hj-text-cyan);
    --gold: var(--hj-text-gold);
    --gold-dim: var(--hj-text-gold);
    --red: var(--hj-cinnabar);
    --line: rgba(63, 110, 115, 0.4);
    --map-bg: var(--hj-paper);
    --map-line: rgba(184, 151, 90, 0.72);
    --map-inner: rgba(46, 85, 89, 0.42);
    --say-bg: var(--hj-paper);
    --node-bg: var(--hj-paper-deep);
    --node-line: var(--hj-cyan);
    --node-text: var(--hj-ink);
    --node-current: var(--hj-gold-line);
    /* 地图统一走金庸网页版的黑底青绿体系：近景与舆图共用一套色。 */
    --lm-bg: var(--hj-paper);
    --lm-head: var(--hj-paper);
    --lm-line: var(--hj-cyan);
    --lm-edge: var(--hj-cyan);
    --lm-node: var(--hj-paper-deep);
    --lm-node-street: var(--hj-paper-deep);
    --lm-node-interior: #DDE3DA;
    --lm-node-line: var(--hj-cyan);
    --lm-label: var(--hj-text-cyan);
    --lm-label-street: var(--hj-text-cyan);
    --lm-label-interior: var(--hj-text-cyan);
    --lm-label-store: var(--hj-text-cyan);
    --lm-label-landmark: var(--hj-text-cyan);
    --lm-label-hidden: #5E4B6E;
    --lm-teal: var(--hj-text-cyan);
    --lm-glyph: var(--hj-text-cyan);
    --lm-route: var(--hj-text-gold);
    --lm-amber: var(--hj-text-gold);
    --lm-amber-hi: var(--hj-text-gold);
    --lm-red: var(--hj-cinnabar);
    /* 操作语义色：可点的一律亮色实线框，不可点的一律无框暗字。
       青绿=走动/舆图，紫=人物，蓝=学艺/参悟/对话，金=差事，橙=买卖/寄存，珊瑚=斗法 */
    --act-jade: var(--hj-text-cyan);
    --act-blue: var(--hj-text-cyan);
    --act-gold: var(--hj-text-gold);
    --act-orange: var(--hj-text-gold);
    --act-coral: var(--hj-cinnabar);
    --act-violet: #5E4B6E;
    --act-dim: var(--hj-ink-light);
  }
  * { box-sizing: border-box; }
  [hidden] { display: none !important; }
  html, body { height: 100%; }
  body {
    margin: 0;
    background:
      radial-gradient(1200px 700px at 50% -10%, rgba(63, 110, 115, 0.16), transparent 62%),
      radial-gradient(900px 600px at 90% 110%, rgba(63, 110, 115, 0.12), transparent 62%),
      radial-gradient(700px 500px at 6% 100%, rgba(184, 151, 90, 0.08), transparent 66%),
      var(--ink);
    color: var(--paper);
    font-family: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
    line-height: 1.9;
  }
  button, input { font: inherit; }
  /* 按钮兜底（缺陷 A-28）：漏写类名的按钮也是深底、主题线色边，不出浏览器默认的白块；:where 零优先级，各处样式照常覆盖。 */
  :where(button) {
    background: var(--ui-card, var(--hj-paper-deep)); color: var(--ui-text, var(--hj-ink));
    border: 1px solid var(--ui-line-2, rgba(184, 151, 90, 0.55)); border-radius: 3px;
    padding: 3px 10px; cursor: pointer;
  }
  :where(button):hover:not(:disabled) { border-color: var(--ui-gold, var(--hj-gold-line)); color: var(--hj-text-gold); }
  :where(button):disabled { opacity: 0.45; cursor: default; }

  #app { min-height: 100%; display: flex; flex-direction: column; }

  .layout { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  .story-panel { display: contents; }

  .topbar {
    position: sticky; top: 0; z-index: 5;
    display: flex; align-items: baseline; gap: 12px;
    padding: 14px 20px calc(14px + env(safe-area-inset-top)) 20px;
    background: linear-gradient(180deg, rgba(43, 38, 32, 0.12), rgba(43, 38, 32, 0.12));
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(6px);
  }
  .topbar > * { flex-shrink: 0; }
  .brand { color: var(--gold); letter-spacing: 0.16em; font-size: calc(14 * var(--hj-fs, 1px)); white-space: nowrap; }
  .wallet {
    margin-left: auto; display: inline-flex; align-items: baseline; gap: 5px;
    font-size: calc(13.5 * var(--hj-fs, 1px)); font-weight: 600; letter-spacing: 0.04em; white-space: nowrap;
  }
  .wallet-key { color: var(--hj-text-gold); font-size: calc(12.5 * var(--hj-fs, 1px)); font-weight: 400; }
  .wallet-coin { color: var(--hj-text-gold); }
  .wallet-daoke { color: var(--hj-text-cyan); }
  .wallet-sep { color: var(--hj-ink-light); font-weight: 400; }
  .wallet-item { display: inline-flex; align-items: baseline; gap: 5px; }
  .status { margin-left: 14px; font-size: calc(12 * var(--hj-fs, 1px)); color: var(--paper-dim); letter-spacing: 0.08em; white-space: nowrap; }
  .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--hj-cyan); margin-right: 6px; }
  .dot.off { background: var(--red); }
  .logout {
    background: transparent; border: 0; padding: 0 2px; cursor: pointer;
    color: var(--paper-dim); font-size: calc(12 * var(--hj-fs, 1px)); letter-spacing: 0.08em; white-space: nowrap;
  }
  .logout:hover { color: var(--gold); }
  .quest-toggle {
    background: rgba(184, 151, 90, 0.16); border: 1px solid var(--act-gold); border-radius: 2px;
    color: var(--hj-text-gold); padding: 4px 10px; cursor: pointer;
    font-size: calc(12 * var(--hj-fs, 1px)); letter-spacing: 0.08em; white-space: nowrap;
  }
  .quest-toggle:hover, .quest-toggle.has { color: var(--hj-text-gold); border-color: var(--act-gold); background: rgba(184, 151, 90, 0.2); }
  .quest-toggle.nav-action {
    background: rgba(63, 110, 115, 0.16); border-color: var(--act-jade); color: var(--hj-text-cyan);
  }
  .quest-toggle.nav-action:hover { border-color: var(--act-jade); color: var(--hj-ink); background: rgba(63, 110, 115, 0.2); }
  /* 三宝入口与吐纳叙事同色：暖琥珀，和舆图的青绿入口区分开。 */
  #statusToggle,
  #statusToggle.nav-action {
    background: rgba(184, 151, 90, 0.14); border-color: var(--hj-gold-line); color: var(--hj-text-gold);
  }
  #statusToggle:hover,
  #statusToggle.nav-action:hover {
    background: rgba(184, 151, 90, 0.22); border-color: var(--hj-gold-line); color: var(--hj-text-gold);
  }

  #log {
    width: min(760px, 100%);
    margin: 0 auto;
    padding: 24px 20px 180px;
    flex: 1;
    background: var(--say-bg);
  }

  .room {
    border-left: 2px solid var(--gold-dim);
    padding: 2px 0 2px 16px;
    margin: 18px 0 26px;
    animation: fade 0.4s ease;
  }
  .room h2 {
    margin: 0 0 10px;
    font-size: calc(18 * var(--hj-fs, 1px));
    font-weight: 600;
    color: var(--hj-text-gold);
    letter-spacing: 0.08em;
  }
  .room p { margin: 0 0 8px; color: var(--hj-ink); font-size: calc(14 * var(--hj-fs, 1px)); }
  .room .detail { color: var(--hj-text-cyan); font-size: calc(13.5 * var(--hj-fs, 1px)); }
  /* 不可点的信息只做文字，不加框；同类信息用同一色，类别之间拉开。 */
  .tags { display: flex; flex-wrap: wrap; gap: 0; margin: 11px 0 5px; }
  .tag {
    font-size: calc(12 * var(--hj-fs, 1px)); letter-spacing: 0.08em; border: 0; padding: 0; background: none;
  }
  .tag + .tag::before { content: "·"; margin: 0 9px; color: rgba(46, 85, 89, 0.6); }
  .tag-terrain { color: var(--hj-text-cyan); }
  .tag-landmark { color: var(--hj-text-gold); }
  .tag-safe { color: var(--hj-text-cyan); }
  .tag-outdoor { color: var(--hj-text-cyan); }
  .tag-nofly { color: var(--hj-cinnabar); }
  .tag-shop { color: var(--hj-text-gold); }
  .tag-view { color: #5E4B6E; }
  .tag-quest { color: var(--hj-text-gold); }

  /* 说话、系统、赶路、报错各用一色，扫一眼就知道是哪类信息。 */
  /* pre-line：交差那句话与完成提示之间的换行要显示出来（C-1b P3）。 */
  .line { margin: 0 0 6px; font-size: calc(14 * var(--hj-fs, 1px)); animation: fade 0.25s ease; white-space: pre-line; }
  .line.say { color: var(--hj-text-gold); }
  .line.system { color: var(--hj-text-cyan); font-size: calc(14 * var(--hj-fs, 1px)); }
  /* 副本叙述（卷二 D）。 */
  .line.story { color: var(--hj-text-gold); font-size: calc(14 * var(--hj-fs, 1px)); border-left: 2px solid rgba(184, 151, 90, 0.45); padding-left: 8px; }
  /* 赶路是逐程反馈，用舆图“当前所在”的暗金，避免比地图框更抢眼。 */
  .line.step {
    display: inline-block; max-width: 100%;
    color: var(--hj-text-gold); font-size: calc(13 * var(--hj-fs, 1px)); font-weight: 600;
    margin: 3px 0 7px; padding: 2px 10px 2px 12px;
    background: rgba(184, 151, 90, 0.09);
    border-left: 2px solid rgba(184, 151, 90, 0.6);
    border-radius: 0 2px 2px 0;
  }
  .line.step::before { content: "→ "; color: var(--hj-text-gold); }
  /* 赶路结算与逐程反馈是一类信息，字号一并收小。 */
  .line.travel { color: var(--hj-text-cyan); font-size: calc(13 * var(--hj-fs, 1px)); }
  /* 吐纳恢复用偏暖的琥珀色，与赶路青、说话浅暖、报错珊瑚都区分开。 */
  .line.vitals { color: var(--hj-text-gold); font-size: calc(14 * var(--hj-fs, 1px)); }
  .line.error {
    color: var(--hj-cinnabar); background: rgba(163, 59, 43, 0.09);
    border-left: 2px solid rgba(163, 59, 43, 0.75);
    padding: 3px 9px;
  }

  .exits {
    display: flex; flex-wrap: wrap; gap: 8px;
    width: min(760px, 100%); margin: 0 auto; padding: 0 20px 10px;
  }
  /* 探索后浮现的一行「可交互」：物件名后跟可用动作，能点就不敲。 */
  .interact-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
    width: min(760px, 100%); margin: 0 auto; padding: 0 20px 10px;
    color: var(--paper-dim); font-size: calc(13 * var(--hj-fs, 1px));
  }
  .interact-lead { color: var(--gold); letter-spacing: 0.08em; }
  .interact-object { display: inline-flex; align-items: center; gap: 5px; }
  .interact-name { color: var(--hj-text-cyan); }
  .interact-action {
    background: rgba(63, 110, 115, 0.08); border: 1px solid rgba(63, 110, 115, 0.4);
    color: var(--hj-text-cyan); border-radius: 2px; padding: 1px 6px; cursor: pointer;
    font-size: calc(13 * var(--hj-fs, 1px)); line-height: 1.5; font-family: inherit;
  }
  .interact-action:hover { background: rgba(63, 110, 115, 0.18); }
  .interact-action.locked {
    border-color: var(--line); color: var(--paper-dim); background: transparent;
  }
  .interact-empty { color: var(--paper-dim); font-size: calc(12 * var(--hj-fs, 1px)); }
  /* 出口按方向分色，同一排也能一眼分清东南西北。 */
  .exit {
    --exit-line: var(--hj-cyan);
    --exit-bg: rgba(63, 110, 115, 0.1);
    --exit-text: var(--hj-text-cyan);
    background: var(--exit-bg); color: var(--exit-text);
    border: 1px solid var(--exit-line); border-radius: 2px;
    padding: 6px 12px; cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
  }
  .exit-north { --exit-line: var(--hj-cyan); --exit-bg: rgba(63, 110, 115, 0.11); --exit-text: var(--hj-text-cyan); }
  .exit-south { --exit-line: var(--hj-gold-line); --exit-bg: rgba(184, 151, 90, 0.11); --exit-text: var(--hj-text-gold); }
  .exit-east { --exit-line: var(--hj-cyan); --exit-bg: rgba(63, 110, 115, 0.11); --exit-text: var(--hj-text-cyan); }
  .exit-west { --exit-line: var(--hj-cyan); --exit-bg: rgba(63, 110, 115, 0.11); --exit-text: var(--hj-text-cyan); }
  .exit-northeast { --exit-line: var(--hj-cyan); --exit-bg: rgba(63, 110, 115, 0.11); --exit-text: var(--hj-text-cyan); }
  .exit-northwest { --exit-line: var(--hj-cyan); --exit-bg: rgba(63, 110, 115, 0.11); --exit-text: var(--hj-ink); }
  .exit-southeast { --exit-line: var(--hj-cyan); --exit-bg: rgba(63, 110, 115, 0.11); --exit-text: var(--hj-text-cyan); }
  .exit-southwest { --exit-line: var(--hj-gold-line); --exit-bg: rgba(184, 151, 90, 0.11); --exit-text: var(--hj-text-gold); }
  /* 复合方位沿用水平方向的线色，用上/下底色区分高差。 */
  .exit-northup { --exit-line: var(--hj-cyan); --exit-bg: rgba(94, 75, 110, 0.1); --exit-text: var(--hj-ink); }
  .exit-southup { --exit-line: var(--hj-gold-line); --exit-bg: rgba(94, 75, 110, 0.1); --exit-text: var(--hj-text-gold); }
  .exit-eastup { --exit-line: var(--hj-cyan); --exit-bg: rgba(94, 75, 110, 0.1); --exit-text: var(--hj-ink); }
  .exit-westup { --exit-line: var(--hj-cyan); --exit-bg: rgba(94, 75, 110, 0.1); --exit-text: var(--hj-ink); }
  .exit-northdown { --exit-line: var(--hj-cyan); --exit-bg: rgba(163, 59, 43, 0.1); --exit-text: var(--hj-ink); }
  .exit-southdown { --exit-line: var(--hj-gold-line); --exit-bg: rgba(163, 59, 43, 0.1); --exit-text: var(--hj-text-gold); }
  .exit-eastdown { --exit-line: var(--hj-cyan); --exit-bg: rgba(163, 59, 43, 0.1); --exit-text: var(--hj-ink); }
  .exit-westdown { --exit-line: var(--hj-cyan); --exit-bg: rgba(163, 59, 43, 0.1); --exit-text: var(--hj-ink); }
  .exit-up { --exit-line: #5E4B6E; --exit-bg: rgba(94, 75, 110, 0.11); --exit-text: #5E4B6E; }
  .exit-down { --exit-line: var(--hj-cinnabar); --exit-bg: rgba(163, 59, 43, 0.11); --exit-text: var(--hj-cinnabar); }
  .exit-enter { --exit-line: var(--hj-cyan); --exit-bg: rgba(63, 110, 115, 0.11); --exit-text: var(--hj-text-cyan); }
  .exit-out { --exit-line: var(--hj-gold-line); --exit-bg: rgba(184, 151, 90, 0.11); --exit-text: var(--hj-text-cyan); }
  .exit:hover { color: var(--hj-ink); background: var(--exit-bg); filter: brightness(1.4); }
  .exit small { color: inherit; opacity: 0.78; margin-left: 6px; }

  .npc-list { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 2px; }
  .npc-lead { color: var(--hj-text-cyan); font-size: calc(15 * var(--hj-fs, 1px)); }
  /* 人物是主操作：淡紫名牌，和买卖的橙、斗法的珊瑚分开。 */
  .npc {
    background: rgba(94, 75, 110, 0.14); color: var(--hj-ink);
    border: 1px solid var(--act-violet); border-radius: 2px;
    padding: 0 6px; cursor: pointer; line-height: 1.5;
    font-size: calc(15 * var(--hj-fs, 1px)); font-weight: 600;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
  }
  .npc:hover { border-color: var(--act-violet); color: var(--hj-ink); background: rgba(94, 75, 110, 0.22); }
  .npc small { color: #5E4B6E; margin-left: 6px; font-size: calc(12 * var(--hj-fs, 1px)); font-weight: 400; }
  .npc-static { color: var(--hj-text-cyan); font-size: calc(15 * var(--hj-fs, 1px)); }

  .dialog-panel {
    position: fixed; z-index: 8; top: 78px; right: 20px;
    width: min(370px, calc(100vw - 40px));
    max-height: calc(100vh - 200px); overflow-y: auto;
    padding: 16px 18px 18px;
    font-size: calc(15 * var(--hj-fs, 1px));
    background: linear-gradient(180deg, rgba(184, 151, 90, 0.08), transparent 34%), var(--hj-paper-deep);
    border: 1px solid rgba(63, 110, 115, 0.45);
    box-shadow: 0 18px 50px rgba(43, 38, 32, 0.121);
    animation: fade 0.25s ease;
  }
  .dialog-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
  .dialog-name { color: var(--gold); letter-spacing: 0.12em; font-size: calc(14 * var(--hj-fs, 1px)); }
  .dialog-close {
    margin-left: auto; width: 44px; height: 44px;
    background: transparent; border: 0; color: var(--paper-dim);
    cursor: pointer; font-size: calc(20 * var(--hj-fs, 1px)); line-height: 1;
  }
  .dialog-close:hover { color: var(--gold); }
  .dialog-text { margin: 0 0 14px; white-space: pre-wrap; color: var(--paper); }
  .dialog-options { display: grid; gap: 8px; }
  .dialog-option {
    width: 100%; min-height: 44px; padding: 9px 12px;
    text-align: left; cursor: pointer;
    background: rgba(63, 110, 115, 0.16); color: var(--hj-text-cyan);
    border: 1px solid var(--act-blue); border-radius: 2px;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
  }
  .dialog-option:hover { border-color: var(--act-blue); color: var(--hj-ink); background: rgba(63, 110, 115, 0.22); }
  .dialog-empty { color: var(--paper-dim); font-size: calc(12 * var(--hj-fs, 1px)); }

  /* 买卖/寄存/拜师/学艺是次级操作：小一号的紧凑按钮，不与人名牌抢视觉。 */
  .npc-trade {
    background: rgba(184, 151, 90, 0.16); color: var(--hj-text-gold);
    border: 1px solid var(--act-orange); border-radius: 2px;
    padding: 0 5px; cursor: pointer; font-size: calc(11.5 * var(--hj-fs, 1px)); line-height: 1.6;
    letter-spacing: 0.08em;
    /* 文字与内边距不变，只把功能键的底边和人物名牌对齐。 */
    align-self: flex-end;
  }
  .npc-trade:hover { border-color: var(--act-orange); color: var(--hj-text-gold); background: rgba(184, 151, 90, 0.22); }
  /* 拜师/学艺属于成长操作，用蓝色和买卖/寄存区分。 */
  .npc-trade.teach {
    background: rgba(63, 110, 115, 0.16); color: var(--hj-text-cyan);
    border-color: var(--act-blue);
  }
  .npc-trade.teach:hover { border-color: var(--act-blue); color: var(--hj-ink); background: rgba(63, 110, 115, 0.22); }
  /* 斗法是当前最重的一类操作，用珊瑚色，与交谈的人物牌同色系。 */
  .npc-trade.fight {
    background: rgba(163, 59, 43, 0.16); color: var(--hj-cinnabar);
    border-color: var(--act-coral);
  }
  .npc-trade.fight:hover { border-color: var(--act-coral); color: var(--hj-ink); background: rgba(163, 59, 43, 0.24); }

  .shop-meta { color: var(--paper-dim); font-size: calc(12 * var(--hj-fs, 1px)); margin: 0 0 12px; }
  .shop-tabs { display: flex; gap: 8px; margin-bottom: 10px; }
  .shop-tab {
    flex: 1; min-height: 36px; cursor: pointer;
    background: rgba(184, 151, 90, 0.14); color: var(--hj-text-gold);
    border: 1px solid var(--act-orange); border-radius: 2px;
    letter-spacing: 0.12em;
  }
  .shop-tab.active { color: var(--hj-text-gold); border-color: var(--act-orange); background: rgba(184, 151, 90, 0.22); }
  .shop-items { display: grid; }
  .shop-item {
    display: grid; grid-template-columns: 1fr auto; gap: 2px 10px;
    padding: 10px 0; border-top: 1px solid var(--line);
  }
  .shop-item:first-child { border-top: 0; }
  .shop-item-name { color: var(--paper); }
  .shop-item-sub { color: var(--paper-dim); font-size: calc(11 * var(--hj-fs, 1px)); }
  /* 器物说明（缺陷 A-18）：数字一行、门槛警示、点名字展开详情。 */
  .shop-item-gear { color: var(--hj-text-cyan); font-size: calc(11 * var(--hj-fs, 1px)); grid-column: 1; }
  .shop-item-gear.warn { color: var(--hj-text-gold); }
  .shop-item-detail { color: var(--paper-dim); font-size: calc(11 * var(--hj-fs, 1px)); grid-column: 1 / -1; white-space: pre-line; line-height: 1.7; margin-top: 2px; }
  .shop-item-name.gear-name { cursor: pointer; text-decoration: underline dotted rgba(63, 110, 115, 0.5); text-underline-offset: 3px; }
  .shop-actions { display: flex; gap: 6px; align-items: center; grid-row: span 2; }
  .shop-actions button {
    min-width: 44px; min-height: 36px; cursor: pointer;
    background: rgba(184, 151, 90, 0.17); color: var(--hj-text-gold);
    border: 1px solid var(--act-orange); border-radius: 2px; font-size: calc(12 * var(--hj-fs, 1px));
  }
  .shop-actions button:hover:not(:disabled) { border-color: var(--act-orange); color: var(--hj-ink); background: rgba(184, 151, 90, 0.22); }
  .shop-actions button:disabled { opacity: 0.55; cursor: default; }

  .insight-box { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 2px; }
  .insight-lead { color: var(--paper-dim); font-size: calc(13 * var(--hj-fs, 1px)); }
  .insight-action {
    background: rgba(63, 110, 115, 0.16); color: var(--hj-text-cyan);
    border: 1px solid var(--act-blue); border-radius: 2px;
    padding: 5px 12px; cursor: pointer; line-height: 1.5;
  }
  .insight-action:hover { background: rgba(63, 110, 115, 0.22); border-color: var(--act-blue); color: var(--hj-ink); }
  .insight-action.locked { color: var(--paper-dim); border-color: var(--line); background: transparent; }
  .insight-done { color: var(--paper-dim); font-size: calc(13 * var(--hj-fs, 1px)); }
  .insight-hint { flex-basis: 100%; color: var(--paper-dim); font-size: calc(11 * var(--hj-fs, 1px)); line-height: 1.8; }

  .arts-panel { width: min(430px, calc(100vw - 40px)); }
  .arts-master { color: var(--paper); font-size: calc(12 * var(--hj-fs, 1px)); margin: 0 0 4px; }
  .arts-master .dim { color: var(--paper-dim); }
  .art-card { border-top: 1px solid var(--line); padding: 12px 0 10px; }
  .art-card:first-of-type { border-top: 0; }
  .art-head { display: flex; align-items: baseline; gap: 8px; }
  .art-title { color: var(--paper); }
  .art-kind {
    font-size: calc(10 * var(--hj-fs, 1px)); color: var(--hj-text-light); border: 0;
    padding: 0; letter-spacing: 0.08em;
  }
  .art-grade { margin-left: auto; color: var(--paper-dim); font-size: calc(11 * var(--hj-fs, 1px)); letter-spacing: 0.08em; }
  .art-desc { color: var(--paper-dim); font-size: calc(12 * var(--hj-fs, 1px)); margin: 4px 0 8px; line-height: 1.7; }
  .art-warn { color: var(--red); font-size: calc(12 * var(--hj-fs, 1px)); margin: 4px 0 8px; line-height: 1.7; }
  .art-bar {
    height: 3px; background: rgba(43, 38, 32, 0.1); overflow: hidden; margin: 0 0 6px;
  }
  .art-bar span { display: block; height: 100%; background: var(--hj-cyan); }
  .art-progress { color: var(--paper-dim); font-size: calc(11 * var(--hj-fs, 1px)); margin: 0 0 6px; }
  .art-steps { display: flex; gap: 3px; margin: 0 0 6px; }
  .art-steps span {
    flex: 1; height: 5px; background: rgba(43, 38, 32, 0.1);
  }
  .art-steps span.filled { background: var(--hj-cyan); }
  .art-steps span.next { background: rgba(63, 110, 115, 0.3); }
  .art-unlocked { color: var(--paper-dim); font-size: calc(11 * var(--hj-fs, 1px)); margin: 0 0 6px; }
  .art-unlocked b { color: var(--hj-text-cyan); font-weight: normal; }
  .art-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .art-actions button {
    min-height: 36px; padding: 5px 14px; cursor: pointer;
    background: rgba(63, 110, 115, 0.16); color: var(--hj-text-cyan);
    border: 1px solid var(--act-blue); border-radius: 2px; font-size: calc(12 * var(--hj-fs, 1px));
  }
  .art-actions button:hover:not(:disabled) { border-color: var(--act-blue); color: var(--hj-ink); background: rgba(63, 110, 115, 0.22); }
  .art-actions button:disabled { opacity: 0.55; cursor: default; }
  .art-reason { color: var(--red); font-size: calc(11 * var(--hj-fs, 1px)); }

  .sect-panel { width: min(460px, calc(100vw - 40px)); }
  /* 斗法策略面板（方案 v0.2）。 */
  .tactics-panel { width: min(520px, calc(100vw - 40px)); }
  .tactics-note { margin: 4px 0 10px; font-size: calc(12 * var(--hj-fs, 1px)); line-height: 1.7; color: var(--ui-muted, var(--hj-text-light)); }
  .tactics-note b { color: var(--hj-text-gold); font-weight: normal; }
  .social-friends { margin: 8px 0 10px; }
  .friend-add { display: flex; gap: 6px; margin-bottom: 6px; }
  .friend-add input { flex: 1; min-width: 0; padding: 3px 6px; font-size: calc(12.5 * var(--hj-fs, 1px)); }
  .friend-row { display: flex; align-items: center; gap: 6px; padding: 3px 0; font-size: calc(12.5 * var(--hj-fs, 1px)); }
  .friend-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ui-muted, var(--hj-text-light)); opacity: 0.5; }
  .friend-dot.on { background: var(--hj-cinnabar); opacity: 1; }
  .friend-note { color: var(--ui-muted, var(--hj-text-light)); }
  .friend-actions { margin-left: auto; display: flex; gap: 4px; }
  .duel-invite { position: fixed; left: 50%; top: 18%; transform: translateX(-50%); z-index: 3000; width: min(360px, calc(100vw - 40px)); padding: 12px 14px; background: var(--hj-paper); border: 1px solid var(--hj-gold-line); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25); font-size: calc(13 * var(--hj-fs, 1px)); }
  .duel-invite p { margin: 0 0 8px; }
  .home-guide { top: 8%; max-height: 84vh; overflow: auto; }
  .home-guide-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
  .home-guide-head img { width: 40px; height: 40px; border-radius: 8px; }
  .home-guide ol { margin: 0 0 8px; padding-left: 20px; line-height: 1.7; }
  .friend-link { margin-bottom: 10px; }
  .duel-schools { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
  .duel-invite-actions { display: flex; justify-content: flex-end; gap: 6px; }
  .status-actions { margin-top: 8px; }
  .deck-group { margin-bottom: 14px; }
  .deck-title { margin-bottom: 6px; font-size: calc(13 * var(--hj-fs, 1px)); color: var(--hj-text-gold); }
  .deck-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; }
  .deck-row { display: flex; align-items: baseline; gap: 6px; font-size: calc(12.5 * var(--hj-fs, 1px)); }
  .deck-kind { flex: none; width: 1.4em; text-align: center; color: var(--hj-cinnabar); }
  .deck-name { flex: 1; min-width: 0; }
  .deck-num { flex: none; color: var(--ui-muted, var(--hj-text-light)); font-variant-numeric: tabular-nums; }
  .tactics-plans { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
  .tactics-plan { padding: 3px 10px; font-size: calc(12.5 * var(--hj-fs, 1px)); }
  .tactics-plan.editing { border-color: var(--ui-gold, var(--hj-gold-line)); color: var(--hj-text-gold); }
  .tactics-plan .tactics-active-dot { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--ui-jade, var(--hj-cyan)); vertical-align: 2px; }
  .tactics-tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
  .tactics-tools button { font-size: calc(12 * var(--hj-fs, 1px)); padding: 3px 9px; }
  .tactics-section { margin: 10px 0; padding: 8px 10px; border: 1px solid var(--ui-line, rgba(184, 151, 90, 0.55)); border-radius: 4px; background: rgba(43, 38, 32, 0.054); }
  .tactics-section h4 { margin: 0 0 6px; font-size: calc(13 * var(--hj-fs, 1px)); color: var(--ui-gold, var(--hj-text-gold)); font-weight: normal; display: flex; justify-content: space-between; align-items: center; }
  .tactics-section h4 label { font-size: calc(11.5 * var(--hj-fs, 1px)); color: var(--ui-muted, var(--hj-text-light)); }
  .tactics-row { display: grid; grid-template-columns: 8.5em 1fr; gap: 6px; align-items: center; margin: 4px 0; font-size: calc(12.5 * var(--hj-fs, 1px)); }
  .tactics-row > span { color: var(--ui-text, var(--hj-ink)); }
  .tactics-row .tactics-ctl { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
  .tactics-row select, .tactics-row input[type="number"], .tactics-rule-editor select, .tactics-name {
    background: var(--ui-card, var(--hj-paper-deep)); color: var(--ui-text, var(--hj-ink));
    border: 1px solid var(--ui-line-2, rgba(184, 151, 90, 0.55)); border-radius: 3px; padding: 2px 4px; font: inherit; font-size: calc(12.5 * var(--hj-fs, 1px));
  }
  .tactics-row input[type="number"] { width: 4.5em; }
  .tactics-default { color: var(--ui-muted, var(--hj-text-light)); font-size: calc(11 * var(--hj-fs, 1px)); }
  .tactics-warn { color: var(--hj-text-gold); font-size: calc(11 * var(--hj-fs, 1px)); }
  .tactics-rule { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; margin: 4px 0; padding: 5px 8px; font-size: calc(12.5 * var(--hj-fs, 1px)); line-height: 1.6; border-left: 2px solid var(--ui-gold, var(--hj-gold-line)); background: rgba(184, 151, 90, 0.06); }
  .tactics-rule-editor { display: grid; gap: 6px; margin-top: 6px; font-size: calc(12.5 * var(--hj-fs, 1px)); }
  .tactics-rule-editor .tactics-cond { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
  .tactics-saved { color: var(--ui-jade, var(--hj-text-cyan)); font-size: calc(12 * var(--hj-fs, 1px)); }
  .sect-card { border-top: 1px solid var(--line); padding: 12px 0 10px; }
  .sect-card:first-of-type { border-top: 0; }
  .sect-line { color: var(--paper-dim); font-size: calc(12 * var(--hj-fs, 1px)); margin: 4px 0; line-height: 1.7; }
  .sect-line b { color: var(--paper); font-weight: normal; }
  /* 散功不可撤销：代价与清单用红字提示，确认按钮单独着红。 */
  .dissolve-warn { color: var(--red); font-size: calc(12 * var(--hj-fs, 1px)); line-height: 1.8; margin: 10px 0 0; }
  .dissolve-confirm { border-color: var(--red) !important; color: var(--hj-cinnabar) !important; }
  .dissolve-confirm:hover:not(:disabled) { background: rgba(163, 59, 43, 0.22); }
  .sect-req { display: flex; gap: 8px; font-size: calc(12 * var(--hj-fs, 1px)); color: var(--paper-dim); margin: 3px 0; }
  .sect-req .mark { color: var(--red); }
  .sect-req.met { color: var(--hj-text-cyan); }
  .sect-req.met .mark { color: var(--hj-text-cyan); }
  .sect-rule { color: var(--paper-dim); font-size: calc(12 * var(--hj-fs, 1px)); margin: 4px 0; line-height: 1.7; }
  .sect-hall { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: calc(12 * var(--hj-fs, 1px)); color: var(--paper-dim); margin: 6px 0; }
  .sect-hall .sect-here { color: var(--hj-text-cyan); }
  .sect-hall .sect-sworn { color: var(--hj-text-gold); }
  .sect-shop-row {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: 8px 0; font-size: calc(12 * var(--hj-fs, 1px)); color: var(--paper-dim);
  }
  .sect-shop-row .name { color: var(--paper); }
  .sect-shop-row .art-actions { margin-left: auto; }

  .camp-panel { width: min(500px, calc(100vw - 40px)); }
  /* 副本（卷二 D）：右栏面板与文字框上方的局内状态。 */
  .well-panel { width: min(500px, calc(100vw - 40px)); }
  .well-act { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: calc(12.5 * var(--hj-fs, 1px)); padding: 6px 0; border-top: 1px solid var(--line); }
  .well-act:first-of-type { border-top: 0; }
  .well-act .name { color: var(--paper); }
  .well-act .tag { color: var(--paper-dim); font-size: calc(11.5 * var(--hj-fs, 1px)); }
  .well-act .tag.done { color: var(--hj-text-cyan); }
  .well-act .tag.locked { color: var(--red); }
  .well-hud {
    flex: 0 0 auto; width: min(760px, calc(100% - 40px)); margin: 6px auto 0; padding: 6px 10px;
    border-left: 2px solid var(--ui-gold); background: rgba(184, 151, 90, 0.06); font-size: calc(12.5 * var(--hj-fs, 1px));
  }
  .well-hud[hidden] { display: none; }
  .well-hud-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .well-heading { color: var(--hj-text-gold); letter-spacing: 0.06em; }
  .well-meter { display: inline-flex; align-items: center; gap: 6px; color: var(--paper-dim); }
  .well-bar { display: inline-block; width: 120px; height: 6px; background: rgba(43, 38, 32, 0.08); border-radius: 3px; overflow: hidden; }
  .well-bar-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--hj-cyan), var(--hj-cyan)); }
  .well-people { color: var(--paper-dim); }
  .well-hud .well-leave { margin-left: auto; }
  .well-waiting { margin: 4px 0 0; color: var(--hj-text-cyan); }
  .well-card { margin: 8px 0 2px; padding: 8px 10px; border: 1px solid rgba(184, 151, 90, 0.35); background: rgba(43, 38, 32, 0.075); }
  .well-card.fail { border-color: rgba(163, 59, 43, 0.5); }
  .well-card.ending { border-color: rgba(63, 110, 115, 0.5); }
  .well-card-title { margin: 0 0 4px; color: var(--hj-text-gold); }
  .well-card-text { margin: 0 0 8px; color: var(--paper); line-height: 1.7; white-space: pre-line; }
  .well-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
  .camp-choice { border-top: 1px solid var(--line); padding: 12px 0 10px; }
  .camp-choice:first-of-type { border-top: 0; }
  .camp-choice.current { background: rgba(63, 110, 115, 0.06); }
  .camp-tendency { display: flex; gap: 10px; flex-wrap: wrap; font-size: calc(11 * var(--hj-fs, 1px)); color: var(--paper-dim); margin: 4px 0; }
  .camp-tendency span.warm { color: var(--hj-text-gold); }
  .camp-tendency span.cold { color: var(--red); }
  .camp-penalty { color: var(--paper-dim); font-size: calc(12 * var(--hj-fs, 1px)); margin: 4px 0; line-height: 1.7; }
  .camp-penalty li { margin: 2px 0 2px 16px; }
  .camp-week { display: flex; gap: 12px; flex-wrap: wrap; font-size: calc(12 * var(--hj-fs, 1px)); color: var(--paper-dim); margin: 4px 0; }
  .camp-week b { color: var(--paper); font-weight: normal; }

  .status-panel { width: min(430px, calc(100vw - 40px)); }
  .status-meta { color: var(--paper-dim); font-size: calc(12 * var(--hj-fs, 1px)); margin: 0 0 10px; }
  .status-meta .dim { color: var(--paper-dim); }
  .vitals-row {
    display: grid; grid-template-columns: 20px 1fr 44px;
    align-items: center; gap: 10px; padding: 7px 0;
  }
  .vitals-name { color: var(--paper); font-size: calc(14 * var(--hj-fs, 1px)); }
  .vitals-segments { display: flex; gap: 3px; min-width: 0; }
  .vitals-seg {
    flex: 1 1 0; height: 8px; min-width: 0;
    background: rgba(63, 110, 115, 0.12);
    border: 1px solid rgba(63, 110, 115, 0.16);
  }
  .vitals-seg.on.xing { background: var(--hj-xing); border-color: var(--hj-xing); }
  .vitals-seg.on.qi { background: var(--hj-qi); border-color: var(--hj-qi); }
  .vitals-seg.on.shen { background: var(--hj-shen); border-color: var(--hj-shen); }
  .vitals-band { color: var(--paper-dim); font-size: calc(11 * var(--hj-fs, 1px)); text-align: right; letter-spacing: 0.08em; }
  .vitals-band.low { color: var(--red); }
  .status-rest {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px;
  }
  .status-rest button {
    min-height: 36px; padding: 5px 16px; cursor: pointer;
    background: rgba(63, 110, 115, 0.16); color: var(--hj-text-cyan);
    border: 1px solid var(--act-jade); border-radius: 2px; font-size: calc(12 * var(--hj-fs, 1px));
  }
  .status-rest button:hover:not(:disabled) { background: rgba(63, 110, 115, 0.24); color: var(--hj-ink); }
  .status-rest button:disabled { opacity: 0.55; cursor: default; }
  .status-hint { color: var(--paper-dim); font-size: calc(11 * var(--hj-fs, 1px)); line-height: 1.7; flex: 1 1 180px; }
  .status-hint.low { color: var(--red); }
  /* 三宝直接在正文里画三条档位条，不再用一行文字复述。 */
  .log-vitals {
    width: min(360px, 100%); margin: 4px 0 10px;
    padding: 8px 12px 10px;
    background: var(--hj-paper); border: 1px solid rgba(63, 110, 115, 0.22);
    animation: fade 0.25s ease;
  }
  .log-vitals-head { color: var(--paper-dim); font-size: calc(10.5 * var(--hj-fs, 1px)); margin-bottom: 4px; }
  .log-vitals-head .dim { color: var(--hj-text-light); }
  .log-vitals-head .ok { color: var(--hj-text-cyan); }
  .log-vitals .vitals-row { padding: 4px 0; }
  .log-vitals-foot { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
  .log-vitals-foot button {
    min-height: 30px; padding: 3px 12px; cursor: pointer;
    background: rgba(63, 110, 115, 0.14); color: var(--hj-text-cyan);
    border: 1px solid var(--act-jade); border-radius: 2px; font-size: calc(11 * var(--hj-fs, 1px));
  }
  .log-vitals-foot button:hover { background: rgba(63, 110, 115, 0.22); color: var(--hj-ink); }
  .log-vitals-note { color: var(--hj-text-light); font-size: calc(10.5 * var(--hj-fs, 1px)); }

  .layout { position: relative; }
  .combat-panel {
    position: absolute; inset: 0; z-index: 20;
    display: flex; flex-direction: column;
    width: auto; height: auto; max-width: none; max-height: none;
    margin: 0; padding: 0; overflow: hidden;
    background:
      linear-gradient(180deg, rgba(163, 59, 43, 0.07), transparent 150px),
      var(--hj-paper);
    border: 1px solid var(--act-coral);
    box-shadow: 0 24px 70px rgba(43, 38, 32, 0.14), inset 0 0 0 1px rgba(43, 38, 32, 0.099);
    animation: fade 0.18s ease;
    font-size: calc(13 * var(--hj-fs, 1px)); color: var(--paper);
  }
  .combat-head {
    flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
    min-height: 38px; padding: 2px 10px 2px 14px;
    border-bottom: 1px solid rgba(163, 59, 43, 0.38);
    background: rgba(43, 38, 32, 0.114);
  }
  .combat-head-title {
    display: inline-flex; align-items: baseline; gap: 6px;
    color: var(--gold); font-size: calc(13.5 * var(--hj-fs, 1px)); letter-spacing: 0.1em; white-space: nowrap;
  }
  /* 战斗栏左端改挂字标（封神。劫），不再写「斗法」；怪物名用冷白、息数压灰。 */
  .combat-head-title .combat-name { color: var(--hj-text-cyan); letter-spacing: 0.06em; }
  .combat-head-title .combat-breath { color: var(--hj-text-light); font-size: calc(11.5 * var(--hj-fs, 1px)); font-weight: 400; letter-spacing: 0.04em; }
  .combat-head-title .combat-sep { color: var(--hj-paper); font-weight: 400; letter-spacing: 0; }
  .combat-head-hint { margin-left: auto; color: var(--hj-ink-light); font-size: calc(10.5 * var(--hj-fs, 1px)); white-space: nowrap; }
  .combat-head .dialog-close { width: 36px; height: 32px; margin-left: 0; font-size: calc(18 * var(--hj-fs, 1px)); }
  .combat-body {
    flex: 1 1 auto; min-height: 0; overflow: hidden;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 42%);
    gap: 10px; padding: 10px;
  }
  .combat-status {
    min-width: 0; min-height: 0; overflow: hidden;
    display: flex; flex-direction: column; gap: 7px;
  }
  .combat-side {
    min-width: 0; padding: 7px 9px 8px;
    background: rgba(43, 38, 32, 0.078); border: 1px solid rgba(63, 110, 115, 0.28);
  }
  .combat-sides { flex: 0 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #combatNpc { border-left: 2px solid var(--act-coral); }
  #combatPlayer { border-left: 2px solid var(--act-jade); }
  .combat-side-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; }
  .combat-side-name { color: var(--paper); font-size: calc(13.5 * var(--hj-fs, 1px)); font-weight: 600; }
  .combat-side-meta { color: var(--paper-dim); font-size: calc(10 * var(--hj-fs, 1px)); margin-left: auto; }
  .combat-vrow {
    display: grid; grid-template-columns: 15px minmax(0, 1fr) auto;
    align-items: center; gap: 6px; padding: 2px 0;
  }
  .combat-vname { color: var(--paper-dim); font-size: calc(11 * var(--hj-fs, 1px)); }
  .combat-vsegs { display: flex; gap: 2px; min-width: 0; }
  .combat-vseg {
    flex: 1 1 0; height: 7px; min-width: 0;
    background: rgba(63, 110, 115, 0.1);
    border: 1px solid rgba(63, 110, 115, 0.14);
  }
  .combat-vseg.on.xing { background: var(--hj-xing); border-color: var(--hj-xing); }
  .combat-vseg.on.qi { background: var(--hj-qi); border-color: var(--hj-qi); }
  .combat-vseg.on.shen { background: var(--hj-shen); border-color: var(--hj-shen); }
  .combat-vnum {
    color: var(--hj-ink); font-size: calc(11.5 * var(--hj-fs, 1px)); font-weight: 600; text-align: right;
    white-space: nowrap; font-variant-numeric: tabular-nums;
  }
  .combat-vnum .band { color: var(--hj-text-cyan); margin-right: 3px; font-weight: 400; }
  .combat-vnum.low, .combat-vnum.low .band { color: var(--hj-cinnabar); }
  .combat-vnum .loss { color: var(--hj-cinnabar); margin-left: 3px; font-size: calc(10 * var(--hj-fs, 1px)); font-weight: 400; }
  .combat-chips {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px 6px; margin-top: 7px;
  }
  .combat-chip {
    display: block; min-width: 0; padding: 4px 7px 5px;
    background: rgba(43, 38, 32, 0.035);
    border: 1px solid rgba(63, 110, 115, 0.2); border-radius: 3px;
    color: var(--hj-text-cyan); font-size: calc(12 * var(--hj-fs, 1px)); line-height: 1.35;
    letter-spacing: 0.02em;
  }
  .combat-chip.guard-up {
    border-color: rgba(63, 110, 115, 0.52);
    background: rgba(63, 110, 115, 0.13); color: var(--hj-ink);
  }
  .combat-chip.guard-shake {
    border-color: rgba(184, 151, 90, 0.68);
    background: rgba(184, 151, 90, 0.2); color: var(--hj-text-gold);
  }
  .combat-chip.guard-down {
    border-color: rgba(163, 59, 43, 0.72);
    background: rgba(163, 59, 43, 0.2); color: var(--hj-cinnabar);
  }
  .combat-chip.dim {
    border-color: rgba(63, 110, 115, 0.12);
    background: rgba(43, 38, 32, 0.02); color: var(--hj-text-light);
  }
  .combat-chip .chip-top { display: flex; align-items: baseline; gap: 4px; min-width: 0; }
  .combat-chip .chip-name {
    font-size: calc(12.5 * var(--hj-fs, 1px)); font-weight: 600; letter-spacing: 0.06em; white-space: nowrap;
  }
  .combat-chip .chip-state {
    margin-left: auto; font-size: calc(10.5 * var(--hj-fs, 1px)); opacity: 0.9; white-space: nowrap;
  }
  .combat-chip .chip-bottom { display: flex; align-items: baseline; gap: 4px; margin-top: 1px; }
  .combat-chip .chip-value {
    font-size: calc(14 * var(--hj-fs, 1px)); font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums;
  }
  .combat-chip .chip-max { font-size: calc(10.5 * var(--hj-fs, 1px)); font-weight: 400; opacity: 0.72; }
  .combat-chip .loss {
    margin-left: auto; color: var(--hj-cinnabar); font-size: calc(10.5 * var(--hj-fs, 1px)); font-weight: 600; white-space: nowrap;
  }
  .combat-chip .chip-hint {
    display: block; margin-top: 2px; color: inherit; opacity: 0.78;
    font-size: calc(10 * var(--hj-fs, 1px)); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .combat-chip.mark {
    border-color: rgba(184, 151, 90, 0.48);
    background: rgba(184, 151, 90, 0.12); color: var(--hj-text-gold);
  }
  .combat-chip.state {
    border-color: rgba(94, 75, 110, 0.42);
    background: rgba(94, 75, 110, 0.11); color: #5E4B6E;
  }
  .combat-chip.queued {
    border-color: rgba(184, 151, 90, 0.48);
    background: rgba(184, 151, 90, 0.12); color: var(--hj-text-gold);
  }
  .combat-chip.hit { animation: combat-chip-hit 520ms ease-out; }
  .combat-chip.gain { animation: combat-chip-gain 520ms ease-out; }
  @keyframes combat-chip-hit {
    0% {
      background-color: rgba(163, 59, 43, 0.3); border-color: var(--hj-cinnabar);
      box-shadow: 0 0 0 0 transparent; transform: translateX(-1px);
    }
    30% { transform: translateX(1px); }
    100% { box-shadow: 0 0 0 9px transparent; transform: none; }
  }
  @keyframes combat-chip-gain {
    0% {
      background-color: rgba(63, 110, 115, 0.3); border-color: var(--hj-cyan);
      box-shadow: 0 0 0 0 transparent;
    }
    100% { box-shadow: 0 0 0 9px transparent; }
  }
  .combat-finisher {
    flex: 0 0 auto; margin: 0;
    border: 1px solid var(--act-gold); background: rgba(184, 151, 90, 0.13);
    color: var(--hj-text-gold); padding: 6px 9px; font-size: calc(11.5 * var(--hj-fs, 1px)); line-height: 1.6;
  }
  .combat-finisher.idle {
    border-color: rgba(63, 110, 115, 0.26); background: rgba(43, 38, 32, 0.06);
    color: var(--hj-text-light);
  }
  .combat-finisher.ready {
    border-color: var(--hj-gold-line); background: rgba(184, 151, 90, 0.24);
    color: var(--hj-text-gold); box-shadow: 0 0 14px transparent;
  }
  .combat-finisher.window {
    border-color: var(--hj-cinnabar); background: rgba(163, 59, 43, 0.18);
    color: var(--hj-cinnabar); box-shadow: 0 0 14px transparent;
  }
  .combat-finisher .hint { display: block; color: var(--paper-dim); font-size: calc(10 * var(--hj-fs, 1px)); }
  .combat-finisher .finisher-req { font-size: calc(11 * var(--hj-fs, 1px)); }
  /* 斩法框（缺陷 A-27）：每条斩法一个出招按钮，横排、放不下换行；没齐灰、齐了金边。 */
  .combat-finisher-buttons { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
  .combat-finisher-buttons .combat-action { flex: 1 1 210px; min-width: 0; }
  .combat-subtag.setup-tag { color: var(--hj-text-gold); }
  .combat-finisher.ready .hint { color: var(--hj-text-gold); }
  .combat-guidance {
    flex: 0 0 auto; margin: 0; padding: 6px 9px;
    border-left: 2px solid var(--act-gold);
    background: rgba(184, 151, 90, 0.08);
    color: var(--hj-text-gold); font-size: calc(11.5 * var(--hj-fs, 1px)); line-height: 1.55;
  }
  .combat-log {
    flex: 1 1 auto; min-height: 0; margin: 0; padding: 8px 10px;
    background: var(--hj-paper); border: 1px solid rgba(63, 110, 115, 0.2);
    overflow-y: auto; overflow-x: hidden;
    display: block;
    scrollbar-width: thin;
    scrollbar-color: rgba(139,224,193,0.52) rgba(255,255,255,0.06);
  }
  .combat-log::-webkit-scrollbar { width: 8px; }
  .combat-log::-webkit-scrollbar-track { background: rgba(43, 38, 32, 0.05); }
  .combat-log::-webkit-scrollbar-thumb {
    background: rgba(63, 110, 115, 0.3); border-radius: 4px;
  }
  .combat-log::-webkit-scrollbar-thumb:hover { background: rgba(63, 110, 115, 0.3); }
  .combat-log:focus-visible { outline: 1px solid var(--act-jade); outline-offset: -1px; }
  .combat-log p { flex: 0 0 auto; margin: 0 0 3px; font-size: calc(11.5 * var(--hj-fs, 1px)); line-height: 1.55; color: var(--hj-text-cyan); }
  .combat-log p:last-child { margin-bottom: 0; }
  .combat-log .ev-guard { color: var(--hj-text-cyan); }
  .combat-log .ev-mark { color: var(--hj-text-gold); }
  .combat-log .ev-cure { color: var(--hj-text-cyan); }
  .combat-log .ev-finisher { color: var(--hj-text-gold); font-weight: 600; }
  .combat-log .ev-end { color: var(--gold); }
  .combat-log .ev-error { color: var(--hj-cinnabar); }
  .combat-log .ev-note { color: var(--hj-text-gold); }
  .combat-command {
    min-width: 0; min-height: 0; overflow: hidden;
    display: flex; flex-direction: column; gap: 7px;
    padding: 9px 10px 10px;
    background: rgba(43, 38, 32, 0.09); border: 1px solid rgba(163, 59, 43, 0.3);
  }
  .combat-actions {
    flex: 1 1 auto; min-height: 0; overflow: hidden;
    display: flex; flex-direction: column; gap: 6px;
  }
  .combat-group { display: flex; flex-direction: column; gap: 4px; min-height: 0; flex-shrink: 0; }
  .combat-actions-head {
    color: var(--paper-dim); font-size: calc(10.5 * var(--hj-fs, 1px)); letter-spacing: 0.08em;
  }
  .combat-group-grid {
    flex: 1 1 auto; min-height: 0;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr; gap: 5px;
  }
  .combat-group-grid > .combat-action:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .combat-action {
    --act-line: var(--hj-gold-line);
    --act-bg: rgba(184, 151, 90, 0.18);
    --act-hover: rgba(184, 151, 90, 0.3);
    --act-text: var(--hj-text-gold);
    min-height: 34px; padding: 5px 7px; text-align: left; cursor: pointer;
    display: flex; flex-direction: column; justify-content: center;
    background: var(--act-bg); color: var(--act-text);
    border: 1px solid var(--act-line); border-left-width: 3px; border-radius: 2px;
    font-size: calc(11.5 * var(--hj-fs, 1px)); line-height: 1.45;
  }
  .combat-action:hover:not(:disabled) { background: var(--act-hover); color: var(--hj-ink); }
  .combat-action:disabled { opacity: 0.5; cursor: default; }
  .combat-action small { display: block; color: inherit; opacity: 0.78; font-size: calc(9.5 * var(--hj-fs, 1px)); line-height: 1.35; }
  .combat-action small.combat-action-hint {
    opacity: 0.92;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .combat-action small.combat-action-cost { opacity: 0.72; }
  .combat-action .combat-subtag {
    margin-left: 4px; padding: 0 3px; font-style: normal; font-size: calc(8.5 * var(--hj-fs, 1px));
    border: 1px solid currentColor; border-radius: 2px; opacity: 0.72;
    vertical-align: 1px;
  }
  .combat-action.group-school {
    --act-line: var(--hj-gold-line); --act-bg: rgba(184, 151, 90, 0.24);
    --act-hover: rgba(184, 151, 90, 0.3); --act-text: var(--hj-text-gold);
  }
  .combat-action.group-common {
    --act-line: var(--hj-cinnabar); --act-bg: rgba(163, 59, 43, 0.25);
    --act-hover: rgba(163, 59, 43, 0.3); --act-text: var(--hj-cinnabar);
  }
  .combat-action.group-rest {
    --act-line: var(--hj-gold-line); --act-bg: rgba(184, 151, 90, 0.2);
    --act-hover: rgba(184, 151, 90, 0.3); --act-text: var(--hj-text-gold);
  }
  .combat-action.group-treasure {
    --act-line: var(--hj-cyan); --act-bg: rgba(63, 110, 115, 0.22);
    --act-hover: rgba(63, 110, 115, 0.3); --act-text: var(--hj-text-cyan);
  }
  .combat-action.group-finisher {
    grid-column: 1 / -1;
    --act-line: var(--hj-gold-line); --act-bg: rgba(184, 151, 90, 0.24);
    --act-hover: rgba(184, 151, 90, 0.3); --act-text: var(--hj-text-gold);
  }
  .combat-action.group-finisher:not(:disabled) {
    background: rgba(184, 151, 90, 0.3); color: var(--hj-text-gold);
    box-shadow: 0 0 12px transparent, inset 0 0 10px transparent;
  }
  .combat-group.group-finisher .combat-actions-head { color: var(--hj-text-gold); }
  .combat-group.group-school .combat-actions-head { color: var(--hj-text-gold); }
  .combat-group.group-common .combat-actions-head { color: var(--hj-cinnabar); }
  .combat-group.group-treasure .combat-actions-head { color: var(--hj-text-cyan); }
  .combat-group.group-rest .combat-actions-head { color: var(--hj-text-gold); }
  .combat-action.group-common, .combat-action.group-rest {
    min-height: 30px; padding: 4px 7px; font-size: calc(11 * var(--hj-fs, 1px));
  }
  .combat-actions.compact { gap: 4px; }
  .combat-actions.compact .combat-group { gap: 3px; }
  .combat-actions.compact .combat-group-grid { gap: 3px; }
  .combat-actions.compact .combat-action { min-height: 27px; padding: 3px 6px; font-size: calc(10.5 * var(--hj-fs, 1px)); }
  .combat-actions.compact .combat-action small { font-size: calc(9 * var(--hj-fs, 1px)); line-height: 1.3; }
  .combat-actions.compact .combat-actions-head { font-size: calc(9.5 * var(--hj-fs, 1px)); }
  .combat-actions.tight { gap: 2px; }
  .combat-actions.tight .combat-group { gap: 1px; }
  .combat-actions.tight .combat-actions-head { font-size: calc(9 * var(--hj-fs, 1px)); line-height: 1.05; }
  .combat-actions.tight .combat-action small.combat-action-hint { display: none; }
  .combat-actions.tight .combat-action { min-height: 22px; padding: 1px 5px; font-size: calc(10 * var(--hj-fs, 1px)); }
  .combat-actions.tight .combat-action small { font-size: calc(8.5 * var(--hj-fs, 1px)); line-height: 1.2; }
  .combat-actions.tight .combat-group-grid { gap: 2px; }
  /* 极端窄高比时仍放不下：宁可出细滚动条，也不让按钮被裁掉。 */
  .combat-actions.scroll { overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(139,224,193,0.42) transparent; }
  .combat-actions.scroll::-webkit-scrollbar { width: 6px; }
  .combat-actions.scroll::-webkit-scrollbar-thumb { background: rgba(63, 110, 115, 0.3); border-radius: 3px; }
  .combat-foot {
    flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
    border-top: 1px solid var(--line); padding-top: 7px;
  }
  .combat-toggle { flex: 1 1 auto; display: flex; align-items: center; gap: 6px; color: var(--paper-dim); font-size: calc(10.5 * var(--hj-fs, 1px)); }
  .combat-toggle input { width: 14px; height: 14px; accent-color: var(--hj-text-cyan); }
  .combat-exits { flex: 0 0 auto; display: flex; gap: 6px; margin: 0; }
  .combat-exits button {
    min-height: 32px; padding: 0 12px; cursor: pointer;
    background: rgba(163, 59, 43, 0.14); color: var(--hj-cinnabar);
    border: 1px solid var(--act-coral); border-radius: 2px; font-size: calc(11.5 * var(--hj-fs, 1px));
  }
  .combat-exits button:hover:not(:disabled) { background: rgba(163, 59, 43, 0.22); color: var(--hj-ink); }
  .combat-exits button:disabled { opacity: 0.45; cursor: default; }
  .combat-surrender { border-color: var(--hj-cinnabar) !important; color: var(--hj-cinnabar) !important; }


  .quest-panel { width: min(430px, calc(100vw - 40px)); }
  .quest-section { margin: 12px 0 16px; }
  .quest-section.mainline h3 { color: var(--act-gold); }
  /* 卷末小结按钮（缺陷 A-28）：用出招按钮同款，放在“下一步”卡右下角。 */
  .main-next-foot { display: flex; justify-content: flex-end; margin-top: 6px; }
  .main-next-foot .vol-open { min-height: 0; padding: 3px 12px; letter-spacing: 0.06em; }
  .art-growth { margin: 2px 0 4px; font-size: calc(12 * var(--hj-fs, 1px)); color: var(--act-gold); }
  .status-growth { margin-top: 10px; font-size: calc(12 * var(--hj-fs, 1px)); line-height: 1.7; }
  .status-growth p { margin: 0; }
  .status-growth .status-growth-head { color: var(--act-gold); }
  .vol-summary .vol-sub { color: var(--act-gold); margin: 2px 0 12px; font-size: calc(12 * var(--hj-fs, 1px)); }
  .vol-summary h4 { margin: 14px 0 6px; font-size: calc(11 * var(--hj-fs, 1px)); font-weight: 400; color: var(--act-dim); letter-spacing: 0.16em; }
  .vol-summary p { margin: 4px 0; line-height: 1.7; }
  .vol-summary .vol-wind { margin-top: 10px; }
  .quest-section.mainline .quest-card { border-left: 2px solid var(--act-gold); padding-left: 10px; }
  .quest-section.mainline .quest-title { color: var(--hj-text-gold); }
  .quest-section h3 {
    margin: 0 0 6px; font-size: calc(11 * var(--hj-fs, 1px)); font-weight: 400;
    color: var(--act-dim); letter-spacing: 0.16em;
  }
  .quest-card { border-top: 1px solid var(--line); padding: 10px 0 8px; }
  .quest-card:first-of-type { border-top: 0; }
  .quest-head { display: flex; align-items: baseline; gap: 8px; }
  .quest-title { color: var(--paper); }
  .quest-badge {
    font-size: calc(10 * var(--hj-fs, 1px)); color: var(--hj-text-light); border: 0;
    padding: 0; letter-spacing: 0.08em;
  }
  .quest-summary { color: var(--paper-dim); font-size: calc(12 * var(--hj-fs, 1px)); margin: 2px 0 4px; line-height: 1.7; }
  /* 练功提示（缺陷 A-31）：出师考校本门还不够时的一句。 */
  .quest-hint { color: var(--hj-text-gold); font-size: calc(12 * var(--hj-fs, 1px)); margin: 0 0 4px; line-height: 1.6; }
  .quest-stage { color: var(--paper-dim); font-size: calc(11 * var(--hj-fs, 1px)); margin: 0 0 4px; }
  .quest-objectives { list-style: none; padding: 0; margin: 4px 0 6px; }
  .quest-objective { color: var(--paper); font-size: calc(12 * var(--hj-fs, 1px)); line-height: 1.8; }
  .quest-objective.done { color: var(--paper-dim); text-decoration: line-through; }
  .quest-objective .mark { display: inline-block; width: 16px; color: var(--act-dim); }
  .quest-foot { color: var(--paper-dim); font-size: calc(11 * var(--hj-fs, 1px)); margin: 2px 0 0; }
  /* 用户 11-02：差事/主线目标后的“前往”，点了循图赶过去 */
  .quest-go { margin-left: 8px; padding: 0 6px; font: inherit; font-size: calc(11 * var(--hj-fs, 1px)); line-height: 1.6; color: var(--act-gold); background: transparent; border: 1px solid currentColor; border-radius: 3px; cursor: pointer; vertical-align: baseline; }
  .quest-go:hover { background: rgba(184, 151, 90, 0.15); }
  .quest-go:disabled { opacity: 0.5; cursor: default; }
  .main-sect-choices { margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .main-sect-choices .quest-go { margin-left: 0; }
  .quest-actions { display: flex; gap: 8px; margin-top: 8px; }
  .quest-actions button {
    min-height: 36px; padding: 5px 14px; cursor: pointer;
    background: rgba(184, 151, 90, 0.17); color: var(--hj-text-gold);
    border: 1px solid var(--act-gold); border-radius: 2px; font-size: calc(12 * var(--hj-fs, 1px));
  }
  .quest-actions button:hover:not(:disabled) { border-color: var(--act-gold); color: var(--hj-text-gold); background: rgba(184, 151, 90, 0.22); }
  .quest-actions button:disabled { opacity: 0.55; cursor: default; }
  .quest-empty { color: var(--paper-dim); font-size: calc(12 * var(--hj-fs, 1px)); margin: 0; }

  .map-panel { width: min(1120px, calc(100vw - 40px)); max-height: calc(100vh - 130px); }
  .map-panel .dialog-name { flex: 0 0 auto; white-space: nowrap; }
  .map-panel .map-hint { flex: 1 1 auto; min-width: 0; line-height: 1.45; }
  .map-hint { color: var(--hj-ink-light); font-size: calc(10 * var(--hj-fs, 1px)); letter-spacing: 0.04em; }
  .map-tabs {
    display: flex; gap: 6px; overflow-x: auto; padding: 0 0 8px;
    scrollbar-width: thin;
  }
  .map-tabs[hidden] { display: none; }
  .map-scenes { padding-bottom: 10px; }
  .map-scenes[hidden] { display: none; }
  .map-tab {
    min-height: 34px; padding: 4px 12px; cursor: pointer; white-space: nowrap;
    background: var(--hj-paper); color: var(--lm-label-street);
    border: 1px solid var(--lm-line); border-radius: 2px;
    font-size: calc(11 * var(--hj-fs, 1px)); letter-spacing: 0.08em;
  }
  .map-tab:hover { color: var(--lm-amber-hi); border-color: var(--lm-teal); background: var(--hj-paper-deep); }
  .map-tab.active { color: var(--lm-amber-hi); border-color: var(--lm-amber); background: var(--hj-paper); }
  .map-tab.now { margin-left: auto; border-style: dashed; }
  .map-panel {
    background: var(--lm-bg);
    border-color: var(--lm-line);
    box-shadow: none;
  }
  .map-panel .dialog-head {
    border-bottom: 1px solid var(--lm-line);
    background: var(--lm-head);
  }
  .map-panel .dialog-name { color: var(--lm-label); letter-spacing: 1px; }
  .map-stage {
    flex: 1 1 auto; min-height: 0;
    overflow: auto; padding: 0;
    border: 1px solid var(--lm-line);
    background: var(--lm-bg);
    max-height: calc(100vh - 290px);
    scrollbar-width: thin; scrollbar-color: rgba(184, 151, 90, 0.6) transparent;
  }
  .map-stage::-webkit-scrollbar { width: 10px; height: 10px; }
  .map-stage::-webkit-scrollbar-track { background: rgba(43, 38, 32, 0.04); }
  .map-stage::-webkit-scrollbar-thumb {
    background: var(--hj-paper-deep); border-radius: 999px;
    border: 2px solid transparent; background-clip: padding-box;
  }
  .map-stage::-webkit-scrollbar-thumb:hover { background: var(--hj-paper-deep); background-clip: padding-box; }
  .map-stage::-webkit-scrollbar-corner { background: transparent; }
  .map-stage svg, .near-stage svg { display: block; margin: 0 auto; }
  .graph-edge { stroke-opacity: 0.9; stroke-width: 1.5; }
  .graph-edge.stub { stroke-dasharray: 4 5; stroke-opacity: 0.75; }
  /* 用户 11-02：学艺面板顶上写最近一次请教的结果 */
  .arts-last { margin: 4px 0 8px; padding: 6px 8px; border-left: 2px solid var(--act-gold); background: rgba(184, 151, 90, 0.08); font-size: calc(12 * var(--hj-fs, 1px)); line-height: 1.7; }
  .arts-last p { margin: 0; }
  /* 赶路时把“当前房 → 目的地”的剩余路程画成一条亮黄线；走过的段随即消失。 */
  .graph-edge.route {
    stroke: var(--hj-gold-line); stroke-opacity: 1; stroke-width: 3.6;
    stroke-linecap: round;
    filter: drop-shadow(0 0 3px transparent);
  }
  /* 揭示隐藏房的“上楼”边：金色虚线 + 箭头，指向隐藏房。 */
  .graph-edge.reveal {
    stroke: var(--hj-gold-line); stroke-opacity: 0.95; stroke-width: 1.8;
    stroke-dasharray: 5 4; stroke-linecap: round;
    filter: drop-shadow(0 0 2.5px transparent);
  }
  .graph-edge.reveal.route {
    stroke-width: 3.6; stroke-dasharray: none;
    filter: drop-shadow(0 0 3px transparent);
  }
  .graph-node { cursor: pointer; outline: none; }
  /* 房框和房名都用亮色；框内不再放地形条和地标点，避免被看成“|”和标点。 */
  .graph-node .node-box { fill: var(--node-bg); stroke: var(--node-line); stroke-width: 1.1; }
  .graph-node .node-name {
    fill: var(--node-text); text-anchor: middle; letter-spacing: 0.02em;
  }
  /* 隐藏房间（如客栈上房）：深绿底 + 金色虚线框；由父房的金色虚线箭头指入。 */
  .graph-node.hidden .node-box {
    fill: rgba(243, 235, 221, 0.94); stroke: var(--hj-gold-line);
    stroke-dasharray: 5 4; stroke-width: 1.7;
    filter: drop-shadow(0 0 3px transparent);
  }
  .graph-node.hidden .node-name { fill: var(--hj-text-gold); font-weight: 600; }
  .graph-node.current .node-box { fill: var(--hj-paper); stroke: var(--node-current); stroke-width: 1.8; }
  .graph-node.current .node-name { fill: var(--node-current); }
  /* 站在隐藏房里时仍保持“隐藏房”的金色身份。 */
  .graph-node.current.hidden .node-box {
    fill: var(--hj-paper); stroke: var(--hj-gold-line); stroke-width: 1.9; stroke-dasharray: none;
  }
  .graph-node.current.hidden .node-name { fill: var(--hj-text-gold); }
  .graph-node.stub .node-box {
    fill: rgba(243, 235, 221, 0.72); stroke: var(--hj-cyan);
    stroke-dasharray: 4 4; stroke-width: 1.1;
  }
  .graph-node.stub .node-name { fill: var(--hj-text-cyan); }
  .graph-node:hover .node-box, .graph-node:focus-visible .node-box { stroke: var(--hj-cyan); }
  .graph-node.hidden:hover .node-box, .graph-node.hidden:focus-visible .node-box { stroke: var(--hj-gold-line); }
  .graph-node.current { cursor: default; }

  /* 金庸式地图：纯黑画布、青绿细线、深绿方框、琥珀色当前点。
     近景与舆图共用；不同只在于近景按固定步长跟随当前房，舆图铺满画布。 */
  .near-svg, .map-svg { display: block; }
  .near-svg { width: 100%; height: 100%; }
  .lm-edge {
    fill: none; stroke: rgba(63, 110, 115, 0.92); stroke-width: 1.4;
  }
  .lm-edge.vertical { stroke: rgba(63, 110, 115, 0.88); stroke-dasharray: 4 3; }
  .lm-edge.door { stroke: rgba(63, 110, 115, 0.72); stroke-dasharray: 1 4; }
  .lm-edge.outside { stroke: rgba(63, 110, 115, 0.82); stroke-dasharray: 5 3; }
  /* 视野外的邻房不画方框，但出口要留一截虚线到画框边：
     否则靠边的两地会自成孤岛，看起来像中间的线断了。 */
  .lm-edge.stub { stroke: rgba(63, 110, 115, 0.78); stroke-width: 1.2; stroke-dasharray: 3 4; }
  .lm-stub-dot { fill: rgba(46, 85, 89, 0.85); }
  .lm-stub-tip { fill: none; stroke: rgba(63, 110, 115, 0.85); stroke-width: 1.2; }
  .lm-edge.route {
    stroke: var(--lm-route); stroke-width: 2.2; stroke-dasharray: none;
    opacity: 0.98; stroke-linecap: round;
    filter: drop-shadow(0 0 2.5px transparent);
  }
  .lm-node { cursor: pointer; outline: none; }
  .lm-node rect { fill: var(--lm-node); stroke: var(--lm-node-line); stroke-width: 1.3; }
  .lm-node.street rect { fill: var(--lm-node-street); }
  .lm-node.interior rect { fill: var(--lm-node-interior); }
  .lm-node.landmark rect { stroke: var(--lm-node-line); stroke-width: 1.8; }
  .lm-node:hover rect, .lm-node:focus-visible rect { fill: var(--hj-text-cyan); stroke: var(--lm-glyph); }
  .lm-node.current { cursor: default; }
  /* 当前房整格走金庸网页版的旧琥珀：暗金底、金边、浅金房名，不再用近白的亮金。 */
  .lm-node.current rect { fill: var(--hj-text-gold); stroke: var(--hj-gold-line); stroke-width: 1.8; }
  .lm-node.target rect { stroke: var(--lm-node-line); stroke-width: 2.4; }
  .lm-node.outside rect {
    fill: var(--hj-paper); stroke: rgba(63, 110, 115, 0.7); stroke-dasharray: 3 2;
  }
  .lm-node.outside:hover rect { fill: var(--hj-paper); stroke: var(--hj-cyan); }
  .lm-label {
    fill: var(--lm-label); font-family: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
    pointer-events: none; letter-spacing: 0.02em; font-weight: 500;
  }
  /* 房名按“最能说明它是什么”的一层着色，后写的规则覆盖先写的：
     地标 < 街巷 < 室内 < 铺面/客栈 < 隐藏 < 当前。
     街巷必须压过“地标”，否则十字街、东市这些带地标标记的街会整条变蓝。 */
  .lm-node.landmark .lm-label { fill: var(--lm-label-landmark); font-weight: 600; }
  .lm-node.street .lm-label { fill: var(--lm-label-street); }
  .lm-node.interior .lm-label { fill: var(--lm-label-interior); }
  .lm-node.store .lm-label { fill: var(--lm-label-store); }
  .lm-node.hidden .lm-label { fill: var(--lm-label-hidden); }
  .lm-node.current .lm-label { fill: var(--hj-text-gold); }
  .lm-node.outside .lm-label { fill: var(--hj-text-cyan); }
  /* 方框一律青色，只用框内文字区分角色：地标冰蓝、常用点灰蓝、
     私房暗金、普通房灰青。虚线只留给区域外接口。
     当前房仍用琥珀底与琥珀字，优先于角色；街巷保持青绿，不被普通房灰盖掉。 */
  .lm-node.role-anchor:not(.current) rect {
    fill: var(--hj-paper); stroke: var(--lm-node-line); stroke-width: 1.8;
  }
  .lm-node.role-anchor:not(.current) .lm-label { fill: var(--hj-text-cyan); font-weight: 700; }
  .lm-node.role-service:not(.current) rect {
    fill: var(--hj-paper); stroke: var(--lm-node-line); stroke-width: 1.3;
  }
  .lm-node.role-service:not(.current) .lm-label { fill: var(--hj-text-cyan); }
  .lm-node.role-private:not(.current) rect {
    fill: var(--hj-paper); stroke: var(--hj-cyan); stroke-width: 1.2;
  }
  .lm-node.role-private:not(.current) .lm-label { fill: var(--hj-text-gold); }
  .lm-node.role-ordinary:not(.current):not(.street) .lm-label { fill: var(--hj-text-light); }
  .lm-glyph {
    fill: var(--lm-glyph); font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 10px; paint-order: stroke; stroke: var(--lm-bg); stroke-width: 2.2px;
    stroke-linejoin: round; pointer-events: none;
  }
  /* 虚线中段的高程角标：先黑描边，再压一条亮色折线，保证压在线上也看得清。
     角标只做提示，不抢房名；7px 见方，比房名小一号。 */
  .lm-glyph-halo {
    fill: none; stroke: var(--lm-bg); stroke-width: 3px;
    stroke-linecap: square; stroke-linejoin: miter; pointer-events: none;
  }
  .lm-glyph-mark {
    fill: none; stroke: var(--lm-glyph); stroke-width: 1.1px;
    stroke-linecap: square; stroke-linejoin: miter; pointer-events: none;
  }
  .lm-compass {
    fill: rgba(46, 85, 89, 0.45); font-size: 11px; letter-spacing: 2px;
    pointer-events: none;
  }
  .lm-empty { fill: var(--lm-label-street); font-size: 12px; text-anchor: middle; }
  .near-stage[data-step] .lm-node.current rect { animation: near-arrive 0.28s ease-out; }
  .map-empty { color: var(--paper-dim); font-size: 12px; margin: 0; padding: 14px 4px; }

  .near-map {
    position: relative; z-index: 4; order: -1;
    width: min(760px, calc(100% - 40px));
    margin: 14px auto 0;
    background: var(--lm-bg);
    border: 1px solid var(--lm-line);
    box-shadow: none;
    overflow: hidden;
  }
  .near-head {
    display: flex; align-items: center; gap: 6px; min-width: 0;
    padding: 4px 6px; border-bottom: 1px solid var(--lm-line);
    background: var(--lm-head);
  }
  .near-title {
    flex: 0 0 auto; color: var(--lm-label); font-size: 12px;
    letter-spacing: 1px; white-space: nowrap;
  }
  .near-terrain {
    flex: 1 1 auto; min-width: 0; margin-left: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--lm-amber-hi); font-size: 12px; letter-spacing: 0.04em;
  }
  .near-terrain.traveling { color: var(--lm-amber-hi); font-size: 12px; font-weight: 700; }
  .near-tools { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; }
  .near-toggle {
    display: none; align-items: center; justify-content: center;
    min-width: 38px; height: 22px; padding: 0 5px; cursor: pointer;
    background: var(--hj-paper); border: 1px solid var(--lm-line); border-radius: 2px;
    color: var(--lm-label); font-size: 11px; line-height: 1;
  }
  .near-toggle:hover {
    border-color: var(--lm-teal); color: var(--lm-amber-hi); background: var(--hj-paper-deep);
  }
  .near-stage {
    display: block; position: relative; overflow: hidden; padding: 0;
    height: 320px;
    background: var(--lm-bg);
  }
  /* 走动时整幅地图不位移、不缩放；只让落脚的当前房轻轻亮一下。 */
  @keyframes near-arrive {
    from { stroke-width: 4.2; filter: drop-shadow(0 0 5px transparent); }
    to { stroke-width: 1.5; filter: none; }
  }
  .near-foot {
    display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0;
    padding: 3px 7px; border-top: 1px solid var(--lm-line);
    background: var(--lm-head); color: var(--hj-ink-light);
    font-size: 11px; letter-spacing: 0.02em;
  }
  .near-foot #nearFoot {
    flex: 1 1 100%; min-width: 0;
  }
  .near-legend {
    flex: 1 1 100%; min-width: 0; color: var(--hj-ink-light);
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 10px; line-height: 1.5; overflow-wrap: anywhere;
  }
  .near-empty { color: var(--paper-dim); font-size: 12px; margin: 0; padding: 10px 6px; }
  body.dialog-open .near-map { display: none !important; }

  .composer {
    position: fixed; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, transparent, rgba(43, 38, 32, 0.12) 30%);
    padding: 26px 20px calc(16px + env(safe-area-inset-bottom));
  }
  .composer form {
    width: min(760px, 100%); margin: 0 auto;
    display: flex; gap: 10px;
    border: 1px solid var(--line); background: var(--ink-2);
  }
  .composer input {
    flex: 1; background: transparent; border: 0; outline: 0;
    color: var(--paper); padding: 12px 14px;
  }
  .composer input::placeholder { color: rgba(122, 90, 30, 0.5); }
  .composer button {
    background: transparent; border: 0; border-left: 1px solid var(--line);
    color: var(--gold); padding: 0 18px; cursor: pointer; letter-spacing: 0.1em;
  }
  .composer button:hover { background: rgba(184, 151, 90, 0.08); }

  #login {
    position: fixed; inset: 0; z-index: 20;
    display: grid; place-items: center;
    background: var(--ink);
    padding: 24px;
    overflow-y: auto;
  }
  .card {
    width: min(420px, 100%);
    border: 1px solid var(--line);
    padding: 40px 32px 34px;
    background: linear-gradient(180deg, rgba(63, 110, 115, 0.05), transparent 40%);
    text-align: center;
  }
  .card h1:not(.fs-mark) {
    margin: 0 0 6px; color: var(--gold);
    font-size: 26px; letter-spacing: 0.3em; font-weight: 600;
  }
  .card .sub { color: var(--paper-dim); font-size: 13px; letter-spacing: 0.24em; margin-bottom: 24px; }

  .tabs { display: flex; justify-content: center; gap: 26px; margin-bottom: 26px; }
  .tab {
    background: transparent; border: 0; border-bottom: 1px solid transparent;
    color: var(--paper-dim); padding: 2px 4px 6px; cursor: pointer;
    font-size: 14px; letter-spacing: 0.2em;
  }
  .tab.active { color: var(--gold); border-bottom-color: var(--gold-dim); }

  .card label { display: block; text-align: left; font-size: 13px; color: var(--paper-dim); margin-bottom: 8px; }
  .card input {
    width: 100%; background: var(--ink-2); border: 1px solid var(--line);
    color: var(--paper); padding: 12px 14px; outline: 0; margin-bottom: 18px;
  }
  .card input:focus { border-color: var(--gold-dim); }
  .card .origin-pick { display: flex; gap: 10px; margin-bottom: 18px; }
  .card .origin-pick[hidden] { display: none; }
  .card .origin-opt {
    flex: 1; display: flex; align-items: flex-start; gap: 8px;
    margin: 0; padding: 10px 12px; cursor: pointer; text-align: left;
    border: 1px solid var(--line); background: var(--ink-2);
    color: var(--paper-dim); font-size: 12px; line-height: 1.5;
  }
  .card .origin-opt:has(input:checked) {
    border-color: var(--gold-dim); color: var(--paper);
    background: rgba(184, 151, 90, 0.08);
  }
  .card .origin-opt input {
    width: auto; flex: 0 0 auto; margin: 3px 0 0; padding: 0;
    accent-color: var(--gold);
  }
  .card .origin-opt span { display: flex; flex-direction: column; gap: 2px; }
  .card .origin-opt b { color: var(--paper); font-size: 13px; font-weight: 600; letter-spacing: 0.12em; }
  .card .origin-opt em { font-style: normal; color: rgba(122, 90, 30, 0.7); font-size: 11px; }
  .card button[type="submit"] {
    width: 100%; padding: 12px; cursor: pointer;
    background: transparent; color: var(--gold);
    border: 1px solid var(--gold-dim); letter-spacing: 0.24em;
  }
  .card button[type="submit"]:hover { background: rgba(184, 151, 90, 0.08); }
  .card button[type="submit"]:disabled { opacity: 0.45; cursor: default; }
  .card .msg {
    min-height: 26px; margin: -4px 0 12px;
    color: var(--red); font-size: 13px; text-align: left; line-height: 1.6;
  }
  .card .hint { margin-top: 18px; color: rgba(122, 90, 30, 0.55); font-size: 12px; line-height: 1.7; }

  @keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

  @media (max-width: 900px) and (orientation: portrait), (max-width: 900px) and (min-height: 601px) {
    .dialog-panel {
      top: auto; left: 16px; right: 16px;
      bottom: calc(88px + env(safe-area-inset-bottom));
      width: auto; max-height: 52vh;
    }
    body.dialog-open .exits { display: none; }
    body.dialog-open .interact-bar { display: none; }
    .map-panel {
      top: 8px; left: 8px; right: 8px; bottom: 8px;
      width: auto; max-height: none;
      display: flex; flex-direction: column;
      padding: 12px 12px 14px;
    }
    .map-tabs { flex: 0 0 auto; }
    .map-stage {
      flex: 1 1 auto; min-height: 0; max-height: none;
      overflow: auto;
    }
    /* 移动端斗法全屏：战况与出招上下分屏，出招区独立滚动。 */
    .combat-panel {
      position: fixed; inset: 0; z-index: 30;
      width: auto; height: auto; max-height: none;
      border: 0; border-radius: 0;
    }
    .combat-head { padding-top: calc(2px + env(safe-area-inset-top)); }
    .combat-body {
      grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto;
      gap: 8px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    }
    .combat-command { max-height: 48dvh; }
    .combat-actions { overflow-y: auto; }
    .combat-log { min-height: 84px; }
    .combat-sides { grid-template-columns: 1fr 1fr; }
  }

  @media (max-width: 560px) {
    .room h2 { font-size: calc(16 * var(--hj-fs, 1px)); }
    #log { padding-bottom: 200px; }
    .topbar { gap: 6px; padding-left: 14px; padding-right: 14px; }
    .brand { display: none; }
    .wallet { font-size: calc(12.5 * var(--hj-fs, 1px)); }
    .quest-toggle { padding: 4px 7px; }
    .status { margin-left: 2px; }
    /* 窄屏只留连接状态点，把文字位置让给“三宝”入口。 */
    .status #status { display: none; }
    .npc { min-height: 44px; padding: 8px 12px; }
    .npc-trade { min-height: 44px; padding: 8px 12px; }
    .insight-action { min-height: 44px; padding: 8px 12px; }
    .shop-actions button { min-height: 44px; }
    .shop-tab { min-height: 44px; }
    .quest-actions button { min-height: 44px; }
    .quest-toggle { min-height: 44px; }
    .art-actions button { min-height: 44px; }
    .map-tab { min-height: 44px; padding: 8px 12px; }
  }

  @media (max-width: 1023px) and (orientation: portrait), (max-width: 1023px) and (min-height: 601px) {
    .layout { flex: 0 0 auto; }
    #log { flex: 0 0 auto; }
    .near-toggle { display: inline-flex; }
    .near-map.collapsed .near-stage,
    .near-map.collapsed .near-foot { display: none; }
  }

  /* =========================================================
     桌面端：文字区与近景地图左右并排，整页固定一屏
     ========================================================= */
  @media (min-width: 1024px), (max-width: 1023px) and (max-height: 600px) and (orientation: landscape) {
    html, body { height: 100%; overflow: hidden; }
    body { font-size: calc(14.5 * var(--hj-fs, 1px)); line-height: 1.7; }
    /* 面板正文跟随桌面基准再降 1 号，和正文的调整幅度一致。 */
    .dialog-panel { font-size: calc(13.5 * var(--hj-fs, 1px)); }

    #app {
      height: 100dvh; min-height: 0;
      max-width: 1440px; margin: 0 auto;
      padding: 10px 16px 12px; gap: 8px;
    }

    .topbar {
      position: static; flex: 0 0 auto;
      align-items: center;
      padding: 4px 2px 8px;
      background: transparent; border-bottom: 0;
      backdrop-filter: none;
    }
    .brand { font-size: calc(13 * var(--hj-fs, 1px)); }
    .wallet { font-size: calc(13.5 * var(--hj-fs, 1px)); }
    .status, .logout { font-size: calc(12.5 * var(--hj-fs, 1px)); }
    .quest-toggle { padding: 4px 10px; font-size: calc(11.5 * var(--hj-fs, 1px)); }

    .layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 560px;
      gap: 12px; flex: 1 1 auto; min-height: 0;
    }
    .story-panel {
      display: flex; flex-direction: column;
      min-height: 0; overflow: hidden;
      border: 1px solid var(--map-line);
      background:
        linear-gradient(180deg, rgba(184, 151, 90, 0.05), transparent 140px),
        var(--say-bg);
    }

    #log {
      flex: 1 1 auto; min-height: 0; overflow-y: auto;
      width: 100%; margin: 0;
      padding: 20px max(24px, calc((100% - 860px) / 2)) 24px;
      font-size: calc(13.5 * var(--hj-fs, 1px)); line-height: 1.75;
      scrollbar-width: thin; scrollbar-color: rgba(184, 151, 90, 0.6) transparent;
    }
    #log::-webkit-scrollbar { width: 9px; }
    #log::-webkit-scrollbar-track { background: rgba(43, 38, 32, 0.03); }
    #log::-webkit-scrollbar-thumb {
      background: var(--hj-paper-deep); border-radius: 999px;
      border: 2px solid transparent; background-clip: padding-box;
    }
    .room { margin: 12px 0 20px; padding-left: 14px; }
    .room h2 { font-size: calc(18 * var(--hj-fs, 1px)); margin-bottom: 8px; }
    .room p { margin-bottom: 6px; }
    .room .detail { font-size: calc(13.5 * var(--hj-fs, 1px)); }
    .line.system { font-size: calc(14 * var(--hj-fs, 1px)); }

    .exits {
      flex: 0 0 auto; width: 100%; margin: 0;
      padding: 9px 18px 10px;
      border-top: 1px solid var(--map-inner); gap: 7px;
      background: var(--say-bg);
    }
    .exit { padding: 5px 11px; font-size: calc(13 * var(--hj-fs, 1px)); }

    .composer {
      position: static; flex: 0 0 auto;
      padding: 0; background: var(--say-bg);
      border-top: 1px solid var(--map-inner);
    }
    .composer form { width: min(860px, 100%); margin: 0 auto; border: 0; background: var(--say-bg); }
    .composer input { padding: 12px 16px; font-size: calc(14 * var(--hj-fs, 1px)); }
    .composer button { padding: 0 20px; }

    .near-map {
      order: 0; position: static; width: auto;
      height: 100%; min-height: 0; margin: 0;
      display: flex; flex-direction: column; overflow: hidden;
    }
    .near-head { flex: 0 0 auto; padding: 4px 6px; }
    .near-title { font-size: calc(12 * var(--hj-fs, 1px)); }
    .near-terrain, .near-terrain.traveling { font-size: calc(12 * var(--hj-fs, 1px)); }
    .near-toggle { display: none; }
    .near-stage {
      flex: 1 1 auto; min-height: 0; height: auto;
      padding: 0;
    }
    .near-foot { display: flex; flex: 0 0 auto; }

    .dialog-panel {
      top: 66px; right: 20px;
      max-height: calc(100dvh - 86px);
    }
    .map-panel {
      position: fixed; left: 16px; right: 16px;
      top: 58px; bottom: 14px;
      width: auto; height: auto; max-height: none;
      display: flex; flex-direction: column;
      padding: 16px 20px 18px;
    }
    .map-tabs { flex: 0 0 auto; flex-wrap: wrap; overflow: visible; }
    .map-hint { font-size: calc(11 * var(--hj-fs, 1px)); }
    .map-stage {
      flex: 1 1 auto; min-height: 0; max-height: none;
      overflow: auto;
    }
  }

  @media (min-width: 1024px) and (max-width: 1279px) {
    .layout { grid-template-columns: minmax(0, 1fr) 430px; }
  }

  /* 大屏给近景更多宽度：城池 6×7、关外 8×9 都能用 14～16px 房名整片画完。 */
  @media (min-width: 1400px) {
    .layout { grid-template-columns: minmax(0, 1fr) 680px; }
  }

  @media (min-width: 1024px), (max-width: 1023px) and (max-height: 600px) and (orientation: landscape) {
    body.dialog-open .near-map { display: none !important; }
  }
  /* =========================================================
     模板主题（2026-10-27）
     深灰中性底 + 暗金/青玉；主界面与战斗界面共用一套框体。
     文字框正文只换外框，不改正文的字体与配色。
     ========================================================= */
  :root {
    --ui-bg: var(--hj-paper);
    --ui-panel: var(--hj-paper);
    --ui-card: var(--hj-paper-deep);
    --ui-black: var(--hj-paper);
    --ui-line: rgba(184, 151, 90, 0.55);
    --ui-line-2: rgba(184, 151, 90, 0.55);
    --ui-text: var(--hj-ink);
    --ui-muted: var(--hj-ink-light);
    --ui-gold: var(--hj-text-gold);
    --ui-jade: var(--hj-text-cyan);
    --ui-bronze: var(--hj-text-gold);
    --ui-slate: var(--hj-text-cyan);
    --ui-red: var(--hj-cinnabar);
    --stat-xing: var(--hj-xing);
    --stat-qi: var(--hj-qi);
    --stat-shen: var(--hj-shen);
    --def-complete: var(--hj-text-cyan);
    --def-shaky: var(--hj-text-gold);
    --def-broken: var(--hj-cinnabar);
    --def-none: var(--hj-ink-light);
    --ui-font: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
    --story-font: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  }
  html, body { background: var(--ui-bg); }
  body { color: var(--ui-text); font-family: var(--ui-font); line-height: 1.5; }
  #log { font-family: var(--story-font); }

  /* ---------- 顶栏 ---------- */
  .topbar { background: var(--hj-paper); border-bottom: 1px solid var(--ui-line); gap: 16px; align-items: center; }
  .brand { color: var(--ui-gold); font-family: var(--ui-font); font-weight: 700; font-size: calc(15 * var(--hj-fs, 1px)); letter-spacing: 0.06em; }
  .wallet { color: var(--ui-muted); font-size: calc(13 * var(--hj-fs, 1px)); font-weight: 400; }
  .wallet-key { color: var(--ui-muted); font-size: calc(12.5 * var(--hj-fs, 1px)); }
  .wallet-coin, .wallet-daoke { color: var(--ui-text); font-weight: 700; }
  .wallet-sep { color: var(--ui-line-2); }
  .status { color: var(--ui-muted); font-size: calc(12.5 * var(--hj-fs, 1px)); }
  .dot { background: var(--ui-jade); }
  .dot.off { background: var(--ui-red); }
  .logout { color: var(--ui-muted); font-size: calc(13 * var(--hj-fs, 1px)); }
  .logout:hover { color: var(--ui-text); }
  .quest-toggle {
    background: transparent; border: 1px solid var(--ui-gold); border-radius: 2px;
    color: var(--ui-gold); padding: 2px 8px; font-size: calc(12.5 * var(--hj-fs, 1px)); letter-spacing: 0.04em;
  }
  .quest-toggle:hover, .quest-toggle.has {
    background: rgba(184, 151, 90, 0.1); border-color: var(--ui-gold); color: var(--hj-text-gold);
  }
  /* 声音开关：一口铜铃，开着有声纹，静音时一笔划掉 */
  .audio-bell {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: calc(26 * var(--hj-fs, 1px)); height: calc(26 * var(--hj-fs, 1px)); padding: 0;
    margin-left: 8px; background: transparent; border: 0; cursor: pointer; color: var(--ui-gold); transition: color 0.15s ease;
  }
  .audio-bell::before {
    content: ""; display: block; width: calc(20 * var(--hj-fs, 1px)); height: calc(20 * var(--hj-fs, 1px)); background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 4h7'/%3E%3Cpath d='M7.2 4c0 5-1 9.4-2.8 13h11.2C13.8 13.4 12.8 9 12.8 4'/%3E%3Cpath d='M8.6 20.5h2.8'/%3E%3Cpath d='M18 9c1.1 1.7 1.1 4.3 0 6'/%3E%3Cpath d='M20.6 6.5c2 3 2 8 0 11'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 4h7'/%3E%3Cpath d='M7.2 4c0 5-1 9.4-2.8 13h11.2C13.8 13.4 12.8 9 12.8 4'/%3E%3Cpath d='M8.6 20.5h2.8'/%3E%3Cpath d='M18 9c1.1 1.7 1.1 4.3 0 6'/%3E%3Cpath d='M20.6 6.5c2 3 2 8 0 11'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .audio-bell:hover { color: var(--hj-text-gold); }
  .audio-bell.muted { color: var(--ui-muted); }
  .audio-bell.muted::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 4h7'/%3E%3Cpath d='M7.2 4c0 5-1 9.4-2.8 13h11.2C13.8 13.4 12.8 9 12.8 4'/%3E%3Cpath d='M8.6 20.5h2.8'/%3E%3Cpath d='M3 3l15 18'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 4h7'/%3E%3Cpath d='M7.2 4c0 5-1 9.4-2.8 13h11.2C13.8 13.4 12.8 9 12.8 4'/%3E%3Cpath d='M8.6 20.5h2.8'/%3E%3Cpath d='M3 3l15 18'/%3E%3C/svg%3E");
  }
  .quest-toggle.nav-action { background: transparent; border-color: var(--ui-jade); color: var(--ui-jade); }
  .quest-toggle.nav-action:hover { background: rgba(63, 110, 115, 0.12); border-color: var(--ui-jade); color: var(--hj-text-cyan); }
  #statusToggle, #statusToggle.nav-action { background: transparent; border-color: var(--ui-gold); color: var(--ui-gold); }
  #statusToggle:hover, #statusToggle.nav-action:hover { background: rgba(184, 151, 90, 0.1); color: var(--hj-text-gold); }
  #questToggle { border-color: var(--stat-xing); color: var(--stat-xing); }
  #questToggle:hover { background: rgba(184, 151, 90, 0.12); color: var(--hj-text-gold); }

  /* ---------- 弹层 / 买卖 / 差事 / 学艺 / 三宝 ---------- */
  .dialog-panel {
    background: var(--ui-panel); border: 1px solid var(--ui-line); border-radius: 4px;
    box-shadow: 0 18px 50px rgba(43, 38, 32, 0.121);
    color: var(--ui-text); font-family: var(--ui-font);
  }
  .dialog-head { margin-bottom: 12px; }
  .dialog-name { color: var(--ui-gold); font-size: calc(15 * var(--hj-fs, 1px)); font-weight: 700; letter-spacing: 0.05em; }
  .dialog-close { color: var(--ui-muted); }
  .dialog-close:hover { color: var(--ui-text); }
  .dialog-text { color: var(--ui-text); line-height: 1.75; }
  .dialog-options { gap: 6px; }
  .dialog-option {
    min-height: 38px; padding: 8px 12px;
    background: var(--ui-card); color: var(--ui-text);
    border: 1px solid var(--ui-line); border-left: 3px solid var(--ui-slate); border-radius: 3px;
    font-size: calc(13.5 * var(--hj-fs, 1px));
  }
  .dialog-option:hover {
    background: rgba(63, 110, 115, 0.12); border-color: var(--ui-slate);
    border-left-color: var(--ui-jade); color: var(--hj-ink);
  }
  .dialog-empty { color: var(--ui-muted); }

  .shop-meta, .arts-master, .status-meta { color: var(--ui-muted); font-size: calc(12 * var(--hj-fs, 1px)); }
  .shop-tabs { gap: 6px; }
  .shop-tab {
    background: transparent; border: 1px solid var(--ui-line); border-radius: 3px;
    color: var(--ui-muted); min-height: 32px;
  }
  .shop-tab:hover { border-color: var(--ui-line-2); color: var(--ui-text); }
  .shop-tab.active { background: rgba(184, 151, 90, 0.06); border-color: var(--ui-gold); color: var(--ui-gold); }
  .shop-item { border-top-color: var(--ui-line); padding: 9px 0; }
  .shop-item-name { color: var(--ui-text); font-size: calc(13.5 * var(--hj-fs, 1px)); }
  .shop-item-sub { color: var(--ui-muted); }
  .shop-actions button {
    background: var(--ui-card); border: 1px solid var(--ui-line-2); border-radius: 3px;
    color: var(--ui-text); min-width: 44px; min-height: 32px;
  }
  .shop-actions button:hover:not(:disabled) {
    background: rgba(63, 110, 115, 0.1); border-color: var(--ui-jade); color: var(--hj-ink);
  }
  .craft-card { padding: 10px 0; border-top: 1px solid var(--ui-line); }
  .craft-card:first-child { border-top: 0; }
  .craft-card.blocked { opacity: 0.78; }
  .craft-head { display: flex; align-items: baseline; gap: 8px; }
  .craft-out { margin-left: auto; color: var(--ui-gold); font-size: calc(12 * var(--hj-fs, 1px)); white-space: nowrap; }
  .craft-desc { margin: 4px 0; color: var(--ui-text); font-size: calc(12.5 * var(--hj-fs, 1px)); line-height: 1.65; }
  .craft-mats { margin: 0; color: var(--ui-muted); font-size: calc(12 * var(--hj-fs, 1px)); }
  .craft-mats .short { color: var(--hj-text-gold); }
  .craft-reason { margin: 4px 0 0; color: var(--hj-text-gold); font-size: calc(12 * var(--hj-fs, 1px)); }
  .craft-card .shop-actions { justify-content: flex-end; margin-top: 6px; }
  .bag-equip {
    margin: 2px 0 10px; padding: 8px 10px;
    background: rgba(184, 151, 90, 0.05);
    border: 1px solid var(--ui-line); border-left: 2px solid var(--ui-gold);
    border-radius: 0 2px 2px 0;
  }
  .bag-equip-head {
    display: flex; align-items: baseline; gap: 8px;
  }
  .bag-equip-title {
    color: var(--ui-gold); font-size: calc(12 * var(--hj-fs, 1px)); font-weight: 700; letter-spacing: 0.12em;
  }
  .bag-equip-meta { margin-left: auto; color: var(--ui-muted); font-size: calc(11 * var(--hj-fs, 1px)); }
  .bag-equip-slot + .bag-equip-slot {
    margin-top: 7px; padding-top: 7px; border-top: 1px dashed var(--ui-line);
  }
  .bag-equip .shop-item { border-top: 0; padding: 5px 0 0; }
  .bag-equip .shop-item-sub { color: var(--ui-muted); }
  .bag-equip .shop-item-sub.warn { color: var(--hj-text-gold); }
  .bag-equip-empty { color: var(--ui-muted); font-size: calc(12 * var(--hj-fs, 1px)); }
  .repair-sub { display: flex; align-items: center; gap: 6px; }
  .repair-bar {
    width: 86px; height: 4px; flex: none; overflow: hidden;
    background: rgba(43, 38, 32, 0.08); border-radius: 2px;
  }
  .repair-bar > span { display: block; height: 100%; background: var(--ui-jade); }
  .repair-bar.warn > span { background: var(--hj-gold-line); }
  .repair-foot {
    display: flex; align-items: center; gap: 10px;
    margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ui-line);
  }
  .repair-foot-meta { margin-left: auto; color: var(--ui-muted); font-size: calc(12 * var(--hj-fs, 1px)); }

  .quest-section h3 { color: var(--ui-muted); letter-spacing: 0.12em; }
  .quest-section.mainline h3 { color: var(--ui-gold); }
  .quest-section.mainline .quest-card { border-left-color: var(--ui-gold); }
  .quest-section.mainline .quest-title { color: var(--hj-text-gold); }
  .quest-card { border-top-color: var(--ui-line); }
  .quest-title { color: var(--ui-text); }
  .quest-badge { color: var(--ui-muted); }
  .quest-summary, .quest-stage, .quest-foot { color: var(--ui-muted); }
  .quest-objective { color: var(--ui-text); }
  .quest-objective.done { color: var(--ui-muted); }
  .quest-objective .mark { color: var(--ui-jade); }
  .quest-actions button {
    background: var(--ui-card); border: 1px solid var(--ui-line-2); border-radius: 3px;
    color: var(--ui-text);
  }
  .quest-actions button:hover:not(:disabled) {
    background: rgba(184, 151, 90, 0.08); border-color: var(--ui-gold); color: var(--hj-ink);
  }

  .art-card { border-top-color: var(--ui-line); }
  .art-title { color: var(--ui-text); }
  .art-kind, .art-grade, .art-desc, .art-progress, .art-unlocked { color: var(--ui-muted); }
  .art-unlocked b { color: var(--ui-jade); }
  .art-bar { background: var(--hj-paper); }
  .art-bar span { background: var(--ui-jade); }
  .art-steps span { background: var(--hj-paper); }
  .art-steps span.filled { background: var(--ui-jade); }
  .art-steps span.next { background: rgba(63, 110, 115, 0.3); }
  .art-actions button {
    background: var(--ui-card); border: 1px solid var(--ui-line-2); border-radius: 3px;
    color: var(--ui-text);
  }
  .art-actions button:hover:not(:disabled) {
    background: rgba(63, 110, 115, 0.1); border-color: var(--ui-jade); color: var(--hj-ink);
  }
  .art-reason { color: var(--ui-red); }
  .art-warn { color: var(--ui-gold); }

  .vitals-row { grid-template-columns: 20px 1fr 52px; }
  .vitals-name { color: var(--ui-text); }
  .vitals-seg { background: var(--hj-paper); border-color: rgba(184, 151, 90, 0.55); }
  .vitals-seg.on.xing { background: var(--stat-xing); border-color: var(--stat-xing); }
  .vitals-seg.on.qi { background: var(--stat-qi); border-color: var(--stat-qi); }
  .vitals-seg.on.shen { background: var(--stat-shen); border-color: var(--stat-shen); }
  .vitals-band { color: var(--ui-muted); }
  .vitals-band.low { color: var(--ui-red); }
  .status-rest { border-top-color: var(--ui-line); }
  /* 吐纳按钮与上方吐纳正文同色（暖杏），悬停只微微提亮，不再跳回青玉。 */
  .status-rest button,
  .log-vitals-foot button {
    background: transparent; border: 1px solid var(--hj-gold-line); border-radius: 3px;
    color: var(--hj-text-gold);
  }
  .status-rest button:hover:not(:disabled),
  .log-vitals-foot button:hover:not(:disabled) {
    background: rgba(184, 151, 90, 0.12);
    border-color: var(--hj-gold-line);
    color: var(--hj-text-gold);
  }
  .status-hint { color: var(--ui-muted); }
  /* 三宝只保留内容本身，不再加外框与底色。 */
  .log-vitals { background: transparent; border: 0; }
  .log-vitals-head, .log-vitals-note { color: var(--ui-muted); }

  /* ---------- 人物与功能标签（模板 entity-block） ---------- */
  .npc-list { gap: 8px 12px; margin: 8px 0 4px; align-items: stretch; }
  .npc-lead { flex: 0 0 100%; color: var(--ui-muted); font-size: calc(12 * var(--hj-fs, 1px)); }
  .entity-block {
    display: flex; align-items: center; gap: 10px;
    padding: 5px 9px; border: 1px solid transparent; border-radius: 4px;
    background: rgba(43, 38, 32, 0.02);
    transition: background 0.2s, border-color 0.2s;
  }
  .entity-block:hover { background: rgba(43, 38, 32, 0.05); border-color: rgba(43, 38, 32, 0.1); }
  .entity-info { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
  .entity-name {
    background: none; border: 0; padding: 0; cursor: pointer;
    color: var(--ui-gold); font-family: var(--ui-font); font-size: calc(14 * var(--hj-fs, 1px)); font-weight: 700;
    line-height: 1.5; text-align: left;
  }
  .entity-name:hover { color: var(--hj-text-gold); }
  .entity-name.static { cursor: default; color: var(--ui-gold); }
  .entity-name.static:hover { color: var(--ui-gold); }
  .entity-role { color: var(--ui-muted); font-size: calc(12 * var(--hj-fs, 1px)); white-space: nowrap; }
  button.entity-role {
    background: none; border: 0; padding: 0; cursor: pointer;
    font-family: var(--ui-font); line-height: 1.5; text-align: left;
  }
  button.entity-role:hover { color: var(--ui-text); }
  .npc-allegiance {
    margin-left: 6px; padding: 1px 6px; border-radius: 2px;
    font-size: calc(11 * var(--hj-fs, 1px)); line-height: 1.6; white-space: nowrap;
  }
  .npc-allegiance.own { color: var(--ui-jade); border: 1px solid rgba(63, 110, 115, 0.6); }
  .npc-allegiance.enemy { color: var(--ui-red); border: 1px solid rgba(163, 59, 43, 0.6); }
  .action-tag {
    margin-left: 4px; padding: 2px 8px; border-radius: 2px;
    background: rgba(163, 59, 43, 0.15);
    border: 1px solid rgba(163, 59, 43, 0.8);
    color: var(--hj-cinnabar); font-size: calc(11.5 * var(--hj-fs, 1px)); font-weight: 700; line-height: 1.6;
    cursor: pointer; transition: all 0.2s; white-space: nowrap;
  }
  .action-tag:hover {
    background: var(--hj-cinnabar); border-color: var(--hj-cinnabar); color: var(--hj-paper);
    box-shadow: 0 0 10px transparent;
  }

  .insight-lead, .insight-hint, .insight-done { color: var(--ui-muted); }
  .insight-action {
    background: transparent; border: 1px solid var(--ui-jade); border-radius: 2px;
    color: var(--ui-jade); padding: 5px 12px;
  }
  .insight-action:hover { background: var(--ui-jade); border-color: var(--ui-jade); color: var(--hj-paper); }
  .insight-action.locked { background: transparent; border-color: var(--ui-line-2); color: var(--ui-muted); }
  .insight-action.locked:hover { background: transparent; border-color: var(--ui-line-2); color: var(--ui-muted); }

  /* ---------- 桌面主界面：模板 explore 布局 ---------- */
  @media (min-width: 1024px), (max-width: 1023px) and (max-height: 600px) and (orientation: landscape) {
    #app {
      height: 100dvh; min-height: 0;
      max-width: none; margin: 0;
      padding: 10px; gap: 10px;
    }
    .topbar {
      position: static; flex: 0 0 auto; height: 40px; min-height: 0;
      padding: 0 15px; gap: 14px; align-items: center;
      background: var(--ui-panel); border: 1px solid var(--ui-line); border-radius: 4px;
      backdrop-filter: none;
    }
    .brand { color: var(--ui-gold); font-size: calc(16 * var(--hj-fs, 1px)); font-weight: 700; }
    .wallet { font-size: calc(13 * var(--hj-fs, 1px)); }
    .status, .logout { font-size: calc(12.5 * var(--hj-fs, 1px)); }
    .quest-toggle { padding: 2px 8px; font-size: calc(12.5 * var(--hj-fs, 1px)); }

    .layout {
      display: flex; flex-direction: row; gap: 10px;
      flex: 1 1 auto; min-height: 0; padding: 0;
    }
    .story-panel {
      display: flex; flex-direction: column; flex: 1.8 1 0; min-width: 0;
      background: var(--ui-panel); border: 1px solid var(--ui-line); border-radius: 4px;
      padding: 10px; gap: 10px; overflow: hidden;
    }
    #log {
      flex: 1 1 auto; min-height: 0; overflow-y: auto;
      width: 100%; margin: 0; padding: 15px 18px;
      background: var(--ui-black); border: 1px solid rgba(184, 151, 90, 0.55); border-radius: 3px;
      box-shadow: inset 0 0 20px rgba(43, 38, 32, 0.14);
      font-size: calc(13.5 * var(--hj-fs, 1px)); line-height: 1.75;
      scrollbar-width: thin; scrollbar-color: rgba(184, 151, 90, 0.6) transparent;
    }
    #log::-webkit-scrollbar { width: 8px; }
    #log::-webkit-scrollbar-track { background: transparent; }
    #log::-webkit-scrollbar-thumb {
      background: var(--hj-paper-deep); border-radius: 4px;
      border: 2px solid transparent; background-clip: padding-box;
    }
    .room { margin: 10px 0 18px; }
    .room h2 { color: var(--ui-gold); font-size: calc(17 * var(--hj-fs, 1px)); }
    .room p { font-size: calc(13.5 * var(--hj-fs, 1px)); line-height: 1.7; }
    .room .detail { font-size: calc(13 * var(--hj-fs, 1px)); }
    .tag { font-size: calc(11.5 * var(--hj-fs, 1px)); }

    .exits {
      flex: 0 0 auto; width: 100%; margin: 0; padding: 0;
      border-top: 0; gap: 10px; background: transparent;
    }
    .exit {
      background: var(--hj-paper); border: 1px solid var(--ui-line-2); border-radius: 3px;
      padding: 7px 14px; display: flex; align-items: center; gap: 10px;
      color: var(--ui-text); font-size: calc(13 * var(--hj-fs, 1px));
      box-shadow: inset 0 0 10px transparent, 0 2px 4px rgba(43, 38, 32, 0.11);
    }
    .exit:hover {
      background: rgba(184, 151, 90, 0.05); border-color: var(--ui-gold); color: var(--ui-text);
      filter: none;
      box-shadow: inset 0 0 15px transparent, 0 0 8px transparent;
    }
    .exit-dir { color: var(--ui-gold); font-size: calc(15 * var(--hj-fs, 1px)); font-weight: 700; }
    .exit-divider { width: 1px; height: 14px; background: var(--ui-line-2); }
    .exit-name { color: var(--ui-text); font-size: calc(13 * var(--hj-fs, 1px)); }
    .exit small { color: var(--ui-muted); margin-left: 6px; }

    .composer {
      position: static; flex: 0 0 auto;
      padding: 0; background: transparent; border-top: 0;
    }
    .composer form {
      width: 100%; margin: 0; height: 40px; gap: 0;
      border: 1px solid var(--ui-line); border-radius: 3px;
      background: var(--ui-black); overflow: hidden;
    }
    .composer input {
      padding: 0 15px; font-size: calc(14 * var(--hj-fs, 1px)); color: var(--ui-text);
    }
    .composer input::placeholder { color: var(--ui-muted); }
    .composer button {
      padding: 0 20px; min-width: 60px;
      border-left: 1px solid var(--ui-line); background: var(--ui-panel);
      color: var(--ui-gold); font-size: calc(15 * var(--hj-fs, 1px)); font-weight: 700;
    }
    .composer button:hover { background: var(--ui-line); }

    .near-map {
      order: 0; position: static; flex: 1 1 0; min-width: 320px;
      width: auto; height: 100%; min-height: 0; margin: 0;
      display: flex; flex-direction: column; overflow: hidden;
      background: var(--ui-panel); border: 1px solid var(--ui-line); border-radius: 4px;
      padding: 10px;
    }
    .near-head {
      flex: 0 0 auto; padding: 0 0 10px; margin-bottom: 10px;
      border-bottom: 1px solid var(--ui-line); background: transparent;
    }
    .near-title { color: var(--ui-text); font-size: calc(14 * var(--hj-fs, 1px)); font-weight: 400; letter-spacing: 0; }
    .near-terrain, .near-terrain.traveling { color: var(--ui-muted); font-size: calc(12 * var(--hj-fs, 1px)); }
    .near-stage {
      flex: 1 1 auto; min-height: 0; height: auto;
      background: var(--ui-black); border: 1px solid rgba(184, 151, 90, 0.55); border-radius: 3px;
      box-shadow: inset 0 0 30px rgba(43, 38, 32, 0.14);
    }
    .near-foot {
      flex: 0 0 auto; margin-top: 10px; padding-top: 8px;
      border-top: 1px solid var(--ui-line); background: transparent;
      color: var(--ui-muted); font-size: calc(11 * var(--hj-fs, 1px));
    }
    .near-foot #nearFoot { color: var(--ui-muted); }
    .near-legend { color: var(--ui-muted); }

    body.dialog-open .near-map { display: flex !important; }
    .dialog-panel {
      top: 60px; bottom: 10px; left: auto; right: 10px;
      width: calc((100vw - 30px) / 2.8 + 6px);
      max-height: none;
    }
    .arts-panel, .status-panel, .quest-panel { width: calc((100vw - 30px) / 2.8 + 6px); }
    .map-panel {
      left: 10px; right: 10px; top: 60px; bottom: 10px; width: auto;
      background: var(--ui-bg); border-color: var(--ui-line);
    }
    .map-panel .dialog-head { background: var(--hj-paper); border-bottom: 1px solid var(--ui-line); }
    .map-panel .dialog-name { color: var(--ui-text); }
    .map-stage { border-color: var(--ui-line); background: var(--ui-black); }
  }

  /* ---------- 地图配色收进模板的中性色 ---------- */
  .near-map, .map-panel {
    --lm-bg: var(--hj-paper);
    --lm-head: var(--hj-paper);
    --lm-line: rgba(184, 151, 90, 0.55);
    --lm-node: var(--hj-paper);
    --lm-node-street: var(--hj-paper);
    --lm-node-interior: var(--hj-paper);
    --lm-node-line: var(--hj-cyan);
    --lm-label: var(--hj-ink);
    --lm-label-street: var(--hj-text-light);
    --lm-label-interior: var(--hj-text-light);
    --lm-label-store: var(--hj-text-cyan);
    --lm-label-landmark: var(--hj-text-cyan);
    --lm-label-hidden: var(--hj-text-gold);
    --lm-teal: var(--hj-text-cyan);
    --lm-glyph: var(--hj-ink);
    --lm-route: var(--hj-text-gold);
    --lm-amber: var(--hj-text-gold);
    --lm-amber-hi: var(--hj-text-gold);
    --lm-red: var(--hj-cinnabar);
    --node-bg: var(--hj-paper);
    --node-line: var(--hj-cyan);
    --node-text: #DCCDB2;
    --node-current: var(--hj-gold-line);
  }
  .near-map .lm-label, .map-panel .lm-label { font-family: var(--ui-font); }
  .near-map .lm-edge:not(.route):not(.reveal),
  .map-panel .lm-edge:not(.route):not(.reveal) { stroke: rgba(184, 151, 90, 0.55); }
  .near-map .lm-edge.vertical:not(.route), .near-map .lm-edge.door:not(.route),
  .near-map .lm-edge.outside:not(.route), .near-map .lm-edge.stub:not(.route),
  .map-panel .lm-edge.vertical:not(.route), .map-panel .lm-edge.door:not(.route),
  .map-panel .lm-edge.outside:not(.route), .map-panel .lm-edge.stub:not(.route) {
    stroke: rgba(184, 151, 90, 0.55);
  }
  .near-map .lm-node.current rect, .map-panel .lm-node.current rect {
    fill: rgba(122, 90, 30, 0.14); stroke: var(--ui-gold);
  }
  .near-map .lm-node.current .lm-label, .map-panel .lm-node.current .lm-label { fill: var(--ui-gold); }
  .near-map .lm-node.role-anchor:not(.current) rect,
  .map-panel .lm-node.role-anchor:not(.current) rect { fill: var(--hj-paper); stroke: var(--ui-jade); }
  .near-map .lm-node.role-anchor:not(.current) .lm-label,
  .map-panel .lm-node.role-anchor:not(.current) .lm-label { fill: var(--hj-text-cyan); }
  .near-map .lm-node.role-service:not(.current) rect,
  .map-panel .lm-node.role-service:not(.current) rect { fill: var(--hj-paper); stroke: rgba(184, 151, 90, 0.55); }
  .near-map .lm-node.role-service:not(.current) .lm-label,
  .map-panel .lm-node.role-service:not(.current) .lm-label { fill: var(--hj-text-light); }
  .near-map .lm-node.role-private:not(.current) rect,
  .map-panel .lm-node.role-private:not(.current) rect { fill: var(--hj-paper); stroke: rgba(184, 151, 90, 0.55); }
  .near-map .lm-node.role-private:not(.current) .lm-label,
  .map-panel .lm-node.role-private:not(.current) .lm-label { fill: var(--ui-gold); }

  /* ---------- 战斗界面：模板 battle 布局 ---------- */
  .combat-panel {
    background: var(--ui-bg); border: 1px solid var(--ui-line); border-radius: 4px;
    box-shadow: 0 24px 70px rgba(43, 38, 32, 0.14), inset 0 0 0 1px rgba(43, 38, 32, 0.099);
    color: var(--ui-text); font-family: var(--ui-font);
  }
  .combat-head {
    min-height: 40px; padding: 0 12px 0 16px;
    background: var(--hj-paper); border-bottom: 1px solid var(--ui-line);
  }
  .combat-head-title { color: var(--ui-gold); font-size: calc(15 * var(--hj-fs, 1px)); font-weight: 700; letter-spacing: 0.04em; }
  .combat-head-hint { color: var(--ui-muted); font-size: calc(11 * var(--hj-fs, 1px)); }
  .combat-close {
    margin-left: 4px; width: auto; height: auto; padding: 5px 14px;
    background: var(--ui-card); border: 1px solid var(--ui-line-2); border-radius: 3px;
    color: var(--ui-muted); font-size: calc(12 * var(--hj-fs, 1px)); cursor: pointer;
  }
  .combat-close:hover { background: rgba(163, 59, 43, 0.08); border-color: rgba(163, 59, 43, 0.6); color: var(--ui-red); }
  .combat-close:focus-visible { outline: 1px solid var(--ui-jade); outline-offset: 1px; }

  .combat-body {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
    gap: 10px; padding: 10px;
  }
  .combat-status { gap: 10px; }
  .combat-sides { gap: 10px; }
  .combat-side {
    background: var(--ui-panel); border: 1px solid var(--ui-line); border-radius: 4px;
    padding: 12px; gap: 0;
  }
  #combatNpc, #combatPlayer { border-left: 1px solid var(--ui-line); }
  .combat-side-head {
    margin-bottom: 8px; padding-bottom: 5px;
    border-bottom: 1px solid var(--ui-line);
  }
  .combat-side-name { color: var(--ui-text); font-size: calc(16 * var(--hj-fs, 1px)); font-weight: 700; }
  .combat-side-meta { color: var(--ui-muted); font-size: calc(12.5 * var(--hj-fs, 1px)); }

  .combat-vrow {
    grid-template-columns: 20px minmax(0, 1fr) 140px;
    gap: 10px; padding: 2px 0;
  }
  .combat-vname { color: var(--ui-muted); font-size: calc(12.5 * var(--hj-fs, 1px)); }
  .combat-vsegs {
    display: flex; gap: 0; height: 8px; min-width: 0;
    background: var(--hj-paper); border: 1px solid rgba(184, 151, 90, 0.55);
  }
  .combat-vseg { border: 0; background: transparent; height: 100%; }
  .combat-vseg.on.xing { background: var(--stat-xing); border: 0; }
  .combat-vseg.on.qi { background: var(--stat-qi); border: 0; }
  .combat-vseg.on.shen { background: var(--stat-shen); border: 0; }
  .combat-vnum { color: var(--ui-text); font-size: calc(12.5 * var(--hj-fs, 1px)); font-weight: 700; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
  .combat-vnum .band { color: var(--ui-muted); font-weight: 400; margin-right: 4px; }
  .combat-vnum.low, .combat-vnum.low .band { color: var(--ui-red); }
  .combat-vnum .loss { color: var(--ui-red); margin: 0 4px 0 0; font-size: calc(12 * var(--hj-fs, 1px)); font-weight: 700; }

  .combat-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px 15px; margin-top: 6px; padding-top: 8px;
    border-top: 1px dashed var(--ui-line);
  }
  .combat-chip {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
    min-width: 0; padding: 2px 4px; border: 1px solid transparent; border-radius: 2px;
    background: rgba(43, 38, 32, 0.02);
    color: var(--ui-text); font-size: calc(12 * var(--hj-fs, 1px)); line-height: 1.3; letter-spacing: 0;
  }
  .combat-chip.guard-up, .combat-chip.guard-shake, .combat-chip.guard-down { background: rgba(43, 38, 32, 0.02); }
  .combat-chip.guard-up .chip-state, .combat-chip.guard-up .chip-value { color: var(--def-complete); }
  .combat-chip.guard-shake .chip-state, .combat-chip.guard-shake .chip-value { color: var(--def-shaky); }
  .combat-chip.guard-down .chip-state, .combat-chip.guard-down .chip-value { color: var(--def-broken); }
  .combat-chip.dim { background: rgba(43, 38, 32, 0.01); }
  .combat-chip.dim .chip-state, .combat-chip.dim .chip-value { color: var(--def-none); }
  .combat-chip .chip-top { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
  .combat-chip .chip-name { color: var(--ui-muted); font-size: calc(12.5 * var(--hj-fs, 1px)); font-weight: 400; letter-spacing: 0; }
  .combat-chip .chip-state { margin-left: 0; font-size: calc(12 * var(--hj-fs, 1px)); font-weight: 700; opacity: 1; }
  .combat-chip .chip-bottom {
    display: flex; flex-direction: row; align-items: baseline; gap: 4px;
    margin-left: auto; line-height: 1.2; white-space: nowrap;
  }
  .combat-chip .chip-value { font-size: calc(13.5 * var(--hj-fs, 1px)); font-weight: 700; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
  .combat-chip .chip-max { font-size: calc(10 * var(--hj-fs, 1px)); font-weight: 400; opacity: 0.7; }
  .combat-chip .loss { margin: 0; color: var(--ui-red); font-size: calc(10.5 * var(--hj-fs, 1px)); font-weight: 700; text-align: right; }
  .combat-chip .chip-hint {
    grid-column: 1 / -1; display: block; margin-top: 1px;
    color: var(--ui-muted); opacity: 1; font-size: calc(10 * var(--hj-fs, 1px)); line-height: 1.3;
  }
  .combat-chip.mark {
    grid-column: 1 / -1; padding: 3px 6px;
    background: rgba(184, 151, 90, 0.06); border-left: 2px solid var(--ui-bronze);
    border-radius: 0 2px 2px 0; color: var(--ui-text);
  }
  .combat-chip.mark .chip-state { color: var(--ui-bronze); }
  .combat-chip.mark .chip-hint { color: var(--ui-muted); }
  /* 法痕卡片：先告诉玩家“用哪个解法”，效果说明退到更弱的一行。 */
  .combat-chip.mark .chip-cure {
    color: var(--hj-text-gold); font-weight: 600; opacity: 1; white-space: normal;
  }
  .combat-chip.mark .chip-effect {
    grid-column: 1 / -1; display: block; margin-top: 0;
    color: var(--ui-muted); font-size: calc(10 * var(--hj-fs, 1px)); line-height: 1.3; white-space: normal;
  }
  .combat-chip .chip-kind {
    color: var(--ui-muted); font-size: calc(10 * var(--hj-fs, 1px)); line-height: 1.5;
    border: 1px solid var(--ui-line-2); border-radius: 2px;
    padding: 0 3px; letter-spacing: 0.04em;
  }
  /* 替劫不是护御条，单独整行显示，避免五个护御在双列里落单。 */
  .combat-chip.tijie {
    grid-column: 1 / -1; padding: 3px 6px;
    background: rgba(63, 110, 115, 0.06); border-left: 2px solid var(--ui-jade);
    border-radius: 0 2px 2px 0;
  }
  .combat-chip.tijie.dim {
    background: rgba(43, 38, 32, 0.01); border-left-color: var(--ui-line-2);
  }
  .combat-chip.state {
    grid-column: 1 / -1; padding: 3px 6px;
    background: rgba(94, 75, 110, 0.06); border-left: 2px solid var(--stat-shen);
    border-radius: 0 2px 2px 0;
  }
  .combat-chip.state .chip-state { color: var(--stat-shen); }
  .combat-chip.queued {
    grid-column: 1 / -1; padding: 3px 6px;
    background: rgba(184, 151, 90, 0.06); border-left: 2px solid var(--ui-gold);
    border-radius: 0 2px 2px 0; color: var(--ui-gold);
  }
  .combat-chip.hit { animation: combat-chip-hit 520ms ease-out; }
  .combat-chip.gain { animation: combat-chip-gain 520ms ease-out; }
  @keyframes combat-chip-hit {
    0% {
      background-color: rgba(163, 59, 43, 0.3); border-color: var(--hj-cinnabar);
      box-shadow: 0 0 0 0 transparent; transform: translateX(-1px);
    }
    30% { transform: translateX(1px); }
    100% { box-shadow: 0 0 0 9px transparent; transform: none; }
  }
  @keyframes combat-chip-gain {
    0% {
      background-color: rgba(63, 110, 115, 0.3); border-color: var(--hj-cyan);
      box-shadow: 0 0 0 0 transparent;
    }
    100% { box-shadow: 0 0 0 9px transparent; }
  }

  .combat-log {
    background: var(--ui-black); border: 1px solid rgba(184, 151, 90, 0.55); border-radius: 4px;
    padding: 14px 16px; box-shadow: inset 0 0 20px rgba(43, 38, 32, 0.14);
    scrollbar-color: rgba(184, 151, 90, 0.6) transparent;
  }
  .combat-log::-webkit-scrollbar { width: 6px; }
  .combat-log::-webkit-scrollbar-track { background: transparent; }
  .combat-log::-webkit-scrollbar-thumb { background: var(--hj-paper-deep); border-radius: 3px; }
  .combat-log::-webkit-scrollbar-thumb:hover { background: var(--hj-paper-deep); }
  .combat-log p { margin: 0 0 6px; color: var(--hj-text-light); font-size: calc(12.5 * var(--hj-fs, 1px)); line-height: 1.6; }
  .combat-log p:last-child { margin-bottom: 0; }
  .combat-log .log-tag { font-weight: 700; margin-right: 6px; }
  .combat-log .log-tag-guard { color: var(--ui-jade); }
  .combat-log .log-tag-mark { color: var(--def-shaky); }
  .combat-log .log-tag-cure { color: var(--hj-text-cyan); }
  .combat-log .log-tag-finisher { color: var(--ui-gold); }
  .combat-log .log-tag-stun { color: var(--def-broken); }
  .combat-log .log-tag-end { color: var(--ui-gold); }
  .combat-log .log-tag-error { color: var(--ui-red); }
  .combat-log .log-name { color: var(--ui-text); font-weight: 700; }
  .combat-log .log-val { color: var(--ui-gold); font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: calc(12 * var(--hj-fs, 1px)); }
  .combat-log .log-loss {
    color: var(--hj-cinnabar); font-weight: 700;
    text-shadow: 0 0 7px transparent;
  }
  .combat-log .log-start { color: var(--ui-text); font-weight: 700; }
  .combat-log .log-end { color: var(--ui-gold); font-weight: 700; }
  .combat-log .log-note { color: var(--hj-text-gold); }
  .combat-log .combat-review { margin: 6px 0; padding: 4px 8px; border: 1px solid var(--ui-line-2); border-radius: 2px; }
  .combat-log .combat-review summary { color: var(--ui-gold); cursor: pointer; }
  .combat-log .combat-review p { margin: 4px 0; }

  .combat-guidance {
    padding: 8px 10px; border: 1px solid var(--ui-line); border-left: 2px solid var(--ui-gold);
    border-radius: 4px; background: var(--ui-panel); color: var(--ui-gold);
    font-size: calc(12 * var(--hj-fs, 1px)); line-height: 1.6;
  }
  .combat-finisher {
    border: 1px solid var(--ui-line); border-radius: 4px;
    background: var(--ui-panel); color: var(--ui-gold);
    padding: 8px 10px; font-size: calc(12 * var(--hj-fs, 1px));
  }
  .combat-finisher.idle { border-color: var(--ui-line); background: var(--ui-panel); color: var(--ui-muted); }
  .combat-finisher.ready {
    border-color: var(--ui-gold); background: rgba(184, 151, 90, 0.08); color: var(--hj-text-gold);
    box-shadow: 0 0 14px transparent;
  }
  .combat-finisher.window {
    border-color: var(--ui-red); background: rgba(163, 59, 43, 0.1); color: var(--hj-cinnabar);
    box-shadow: 0 0 14px transparent;
  }
  .combat-finisher .hint { color: var(--ui-muted); font-size: calc(10.5 * var(--hj-fs, 1px)); }
  .combat-finisher.ready .hint { color: var(--hj-text-gold); }

  .combat-command {
    padding: 10px; gap: 10px;
    background: var(--ui-panel); border: 1px solid var(--ui-line); border-radius: 4px;
  }
  .combat-actions { gap: 8px; }
  .combat-actions-head { color: var(--ui-muted); font-size: calc(13 * var(--hj-fs, 1px)); font-weight: 700; letter-spacing: 0; }
  .combat-group.group-finisher .combat-actions-head { color: var(--ui-gold); }
  .combat-group.group-school .combat-actions-head { color: var(--ui-bronze); }
  .combat-group.group-common .combat-actions-head { color: var(--ui-slate); }
  .combat-group.group-treasure .combat-actions-head { color: var(--hj-text-cyan); }
  .combat-group.group-rest .combat-actions-head { color: var(--ui-jade); }
  .combat-group-grid { gap: 6px; }

  .combat-action {
    --act-line: var(--ui-bronze);
    min-height: 34px; padding: 5px 8px;
    background: var(--ui-card); color: var(--ui-text);
    border: 1px solid var(--ui-line); border-left: 3px solid var(--act-line); border-radius: 3px;
    font-size: calc(12.5 * var(--hj-fs, 1px)); line-height: 1.4;
    transition: filter 0.15s, border-color 0.15s, background 0.15s;
  }
  .combat-action:hover:not(:disabled) {
    background: var(--ui-card); border-color: var(--act-line); color: var(--hj-ink);
    filter: brightness(1.2);
  }
  .combat-action:disabled { opacity: 0.45; cursor: default; }
  .combat-action > span { color: var(--act-line); font-size: calc(13 * var(--hj-fs, 1px)); font-weight: 700; }
  /* 招式说明是出手决策依据，不能压成暗灰；用冷亮灰，与招式名的分组色分开。 */
  .combat-action small { color: var(--hj-text-cyan); opacity: 1; font-size: calc(10.5 * var(--hj-fs, 1px)); line-height: 1.35; }
  .combat-action small.combat-action-hint { color: var(--hj-text-cyan); opacity: 1; }
  .combat-action small.combat-action-cost { color: var(--hj-text-cyan); opacity: 1; }
  .combat-action.group-finisher {
    --act-line: var(--ui-gold);
    background: rgba(184, 151, 90, 0.05); border-color: rgba(184, 151, 90, 0.3); border-left-color: var(--ui-gold);
  }
  .combat-action.group-school {
    --act-line: var(--ui-bronze);
    background: var(--ui-card); border-color: var(--ui-line); border-left-color: var(--act-line);
  }
  .combat-action.group-common {
    --act-line: var(--ui-slate);
    background: var(--ui-card); border-color: var(--ui-line); border-left-color: var(--act-line);
  }
  .combat-action.group-rest {
    --act-line: var(--ui-jade);
    background: var(--ui-card); border-color: var(--ui-line); border-left-color: var(--act-line);
  }
  .combat-action.group-treasure {
    --act-line: var(--hj-cyan);
    background: var(--ui-card); border-color: var(--ui-line); border-left-color: var(--act-line);
  }
  .combat-action.group-finisher:not(:disabled) {
    background: rgba(184, 151, 90, 0.1); border-color: var(--ui-gold); color: var(--ui-text);
    box-shadow: 0 0 10px transparent;
  }
  .combat-actions.compact .combat-action { min-height: 27px; padding: 3px 6px; font-size: calc(11 * var(--hj-fs, 1px)); }
  .combat-actions.tight .combat-action { min-height: 24px; padding: 2px 6px; }

  .combat-foot { border-top: 1px solid var(--ui-line); padding-top: 10px; }
  .combat-toggle { color: var(--ui-muted); font-size: calc(11.5 * var(--hj-fs, 1px)); }
  .combat-toggle input { accent-color: var(--ui-jade); }
  .combat-exits button {
    min-height: 32px; padding: 0 15px;
    background: var(--ui-card); border: 1px solid var(--ui-line); border-radius: 3px;
    color: var(--ui-muted); font-size: calc(12 * var(--hj-fs, 1px));
  }
  .combat-exits button:hover:not(:disabled) { background: var(--ui-line); color: var(--ui-text); }
  .combat-surrender { border-color: rgba(163, 59, 43, 0.5) !important; color: var(--ui-red) !important; }
  .combat-surrender:hover:not(:disabled) { background: rgba(163, 59, 43, 0.1) !important; }

  /* ---------- 登录页沿用同一套框体 ---------- */
  #login { background: var(--ui-bg); }
  .card {
    background: var(--ui-panel); border: 1px solid var(--ui-line); border-radius: 4px;
    font-family: var(--ui-font);
  }
  .card h1:not(.fs-mark) { color: var(--ui-gold); font-family: var(--ui-font); font-size: calc(24 * var(--hj-fs, 1px)); letter-spacing: 0.22em; }
  .card .sub, .card label, .card .hint { color: var(--ui-muted); }
  .card input { background: var(--ui-black); border-color: var(--ui-line); color: var(--ui-text); }
  .card input:focus { border-color: var(--ui-gold); }
  .card button[type="submit"] { color: var(--ui-gold); border-color: var(--ui-gold); }
  .card button[type="submit"]:hover { background: rgba(184, 151, 90, 0.08); }
  .card .msg { color: var(--ui-red); }
  .tab { color: var(--ui-muted); }
  .tab.active { color: var(--ui-gold); border-bottom-color: var(--ui-gold); }

  /* ---------- 窄屏：沿用原上下分屏，只把颜色并进模板 ---------- */
  @media (max-width: 900px) and (orientation: portrait), (max-width: 900px) and (min-height: 601px) {
    .combat-body {
      grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto;
      gap: 8px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    }
    .combat-command { max-height: 48dvh; }
    .combat-actions { overflow-y: auto; }
    .combat-side { padding: 9px; }
    .combat-vrow { grid-template-columns: 18px minmax(0, 1fr) auto; gap: 6px; }
    .combat-vnum { width: auto; }
    .combat-log { min-height: 84px; padding: 10px 12px; }
    .combat-close { padding: 6px 12px; }
    .topbar { background: var(--hj-paper); }
  }
  @media (max-width: 560px) {
    .entity-block { padding: 6px 8px; }
    .entity-name { font-size: calc(15 * var(--hj-fs, 1px)); }
    .action-tag { min-height: 32px; padding: 5px 8px; font-size: calc(12 * var(--hj-fs, 1px)); }
    .near-map { background: var(--ui-panel); border-color: var(--ui-line); }
  }

  /* =========================================================
     右栏功能栏 · 快捷栏 · 方向键（2026-10-27 模板）
     右栏只在宽屏出现；窄屏保留原输入框，快捷栏叠在输入框上方。
     ========================================================= */
  .panel-right { display: none; }

  .quick-actions-row { display: flex; gap: 8px; flex-shrink: 0; }
  button.quick-btn {
    flex: 1; position: relative; display: flex; align-items: center; justify-content: center;
    gap: 7px; padding: 9px 0;
    background: var(--hj-paper); border: 1px solid rgba(184, 151, 90, 0.55); border-radius: 3px;
    color: var(--ui-muted); font-size: calc(13.5 * var(--hj-fs, 1px)); letter-spacing: 2px; cursor: pointer;
    box-shadow: inset 0 2px 5px rgba(43, 38, 32, 0.14), 0 1px 0 transparent;
    transition: color 0.15s, background 0.15s;
  }
  button.quick-btn svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; flex: 0 0 auto; }
  button.quick-btn::after {
    content: ''; position: absolute; left: 10%; right: 10%; bottom: 0; height: 2px;
    background: var(--ui-gold); border-radius: 2px 2px 0 0; opacity: 0; transition: 0.2s;
  }
  button.quick-btn:hover:not([aria-disabled="true"]) { color: var(--hj-text-gold); background: var(--hj-paper-deep); }
  button.quick-btn:hover:not([aria-disabled="true"])::after { opacity: 1; left: 0; right: 0; box-shadow: 0 -2px 10px var(--ui-gold); }
  button.quick-btn:active:not([aria-disabled="true"]) { transform: translateY(1px); box-shadow: inset 0 3px 8px rgba(43, 38, 32, 0.14); }
  button.quick-btn[aria-disabled="true"] { opacity: 0.42; cursor: not-allowed; }

  .quick-toast {
    position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
    z-index: 30; padding: 5px 12px; white-space: nowrap;
    background: var(--hj-paper); border: 1px solid var(--ui-gold); border-radius: 3px;
    color: var(--hj-text-gold); font-size: calc(12 * var(--hj-fs, 1px)); box-shadow: 0 6px 18px rgba(43, 38, 32, 0.14);
  }

  .say-popover {
    position: absolute; left: 0; right: 0; bottom: calc(100% + 10px); z-index: 25;
    width: min(520px, 100%); margin: 0 auto; padding: 12px;
    background: var(--ui-panel); border: 1px solid var(--ui-gold); border-radius: 4px;
    box-shadow: 0 14px 34px rgba(43, 38, 32, 0.14);
  }
  .say-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .say-title { color: var(--hj-text-gold); font-size: calc(13 * var(--hj-fs, 1px)); font-weight: 700; letter-spacing: 0.06em; }
  .say-close {
    background: transparent; border: 0; color: var(--ui-muted); font-size: calc(18 * var(--hj-fs, 1px));
    line-height: 1; cursor: pointer; padding: 0 2px;
  }
  .say-close:hover { color: var(--ui-text); }
  .say-form { display: flex; gap: 8px; margin-top: 9px; }
  .say-form input {
    flex: 1; min-width: 0; padding: 8px 10px; outline: none;
    background: var(--ui-black); border: 1px solid var(--ui-line); border-radius: 3px;
    color: var(--ui-text); font-size: calc(13.5 * var(--hj-fs, 1px));
  }
  .say-form input:focus { border-color: var(--ui-gold); }
  .say-form button {
    padding: 0 16px; border: 1px solid var(--ui-gold); border-radius: 3px;
    background: rgba(184, 151, 90, 0.12); color: var(--hj-text-gold); font-size: calc(13 * var(--hj-fs, 1px)); cursor: pointer;
  }
  .say-form button:hover { background: rgba(184, 151, 90, 0.2); }
  .say-note { margin: 8px 0 0; color: var(--ui-muted); font-size: calc(11 * var(--hj-fs, 1px)); }

  /* 方向键：只写方向，不写目的地；只出现当前可走的出口，平铺换行，不按当前位置摆位。 */
  .near-dirs {
    flex: 0 0 auto; margin-top: 10px; padding-top: 9px;
    border-top: 1px solid var(--ui-line);
  }
  .dir-flow { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
  .dir-btn {
    min-width: 64px; height: 36px; padding: 0 14px;
    display: flex; align-items: center; justify-content: center;
    background: var(--hj-paper);
    border: 1px solid rgba(184, 151, 90, 0.55); border-radius: 3px;
    color: var(--ui-gold); font-size: calc(13.5 * var(--hj-fs, 1px)); font-weight: 600; letter-spacing: 0.06em;
    cursor: pointer; box-shadow: inset 0 2px 5px rgba(43, 38, 32, 0.14), 0 1px 0 transparent;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
  }
  .dir-btn:hover { border-color: var(--hj-cyan); color: var(--hj-text-gold); background: var(--hj-paper-deep); }

  /* 行囊之上弹回上一层 */
  .dialog-back {
    margin-left: auto; padding: 2px 9px; border-radius: 2px;
    background: transparent; border: 1px solid var(--ui-line-2); color: var(--ui-muted);
    font-size: calc(11.5 * var(--hj-fs, 1px)); cursor: pointer;
  }
  .dialog-back:hover { border-color: var(--ui-gold); color: var(--hj-text-gold); }

  /* 社交 / 系统 */
  .social-players { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
  .social-player {
    padding: 4px 10px; border: 1px solid var(--ui-line); border-radius: 2px;
    color: var(--ui-text); font-size: calc(12.5 * var(--hj-fs, 1px)); background: var(--ui-card);
  }
  .social-empty { color: var(--ui-muted); font-size: calc(12 * var(--hj-fs, 1px)); margin: 10px 0; }
  .social-phrases { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
  .social-phrase {
    padding: 6px 10px; border: 1px solid var(--ui-line); border-radius: 3px;
    background: var(--ui-black); color: var(--ui-text); font-size: calc(12.5 * var(--hj-fs, 1px)); cursor: pointer;
  }
  .social-phrase:hover { border-color: var(--ui-gold); color: var(--hj-text-gold); }
  .social-say {
    width: 100%; padding: 9px 0; border: 1px solid var(--ui-gold); border-radius: 3px;
    background: rgba(184, 151, 90, 0.12); color: var(--hj-text-gold); font-size: calc(13 * var(--hj-fs, 1px)); cursor: pointer;
  }
  .social-say:hover { background: rgba(184, 151, 90, 0.2); }
  .system-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
  .system-actions button {
    padding: 10px 12px; text-align: left; border: 1px solid var(--ui-line); border-radius: 3px;
    background: var(--ui-card); color: var(--ui-text); font-size: calc(13 * var(--hj-fs, 1px)); cursor: pointer;
  }
  .system-actions button:hover { border-color: var(--ui-gold); color: var(--hj-text-gold); }
  .audio-settings { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--ui-gold, #B8975A); }
  .audio-settings label { display: flex; align-items: center; gap: 10px; }
  .audio-settings input[type="range"] { flex: 1; min-width: 0; }
  .audio-settings label.check { gap: 6px; }
  .system-note { margin: 12px 0 0; color: var(--ui-muted); font-size: calc(11 * var(--hj-fs, 1px)); line-height: 1.6; }

  /* 新手引导卡：只占位、不遮罩；窄屏在文字框上方，宽屏挂在近景栏底部。 */
  .guide-card {
    flex: 0 0 auto; position: relative; z-index: 5;
    width: min(760px, calc(100% - 40px)); margin: 8px auto 0; padding: 8px 10px;
    background: var(--ui-card); border: 1px solid var(--ui-gold); border-radius: 4px;
    box-shadow: 0 0 10px transparent;
  }
  .guide-card[hidden] { display: none; }
  .guide-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .guide-step { flex: 0 0 auto; color: var(--ui-muted); font-size: calc(11 * var(--hj-fs, 1px)); font-variant-numeric: tabular-nums; }
  .guide-title { flex: 1 1 auto; min-width: 0; color: var(--hj-text-gold); font-size: calc(13.5 * var(--hj-fs, 1px)); font-weight: 700; letter-spacing: 0.06em; }
  .guide-fold {
    flex: 0 0 auto; padding: 2px 8px; border: 1px solid var(--ui-line-2); border-radius: 2px;
    background: transparent; color: var(--ui-muted); font-size: calc(11.5 * var(--hj-fs, 1px)); cursor: pointer;
  }
  .guide-fold:hover { border-color: var(--ui-gold); color: var(--hj-text-gold); }
  .guide-body[hidden] { display: none; }
  .guide-anchor { margin: 6px 0 0; color: var(--ui-gold); font-size: calc(11.5 * var(--hj-fs, 1px)); }
  .guide-anchor:empty { display: none; }
  .guide-text { margin: 4px 0 0; color: var(--ui-text); font-size: calc(13 * var(--hj-fs, 1px)); line-height: 1.65; }
  .guide-actions { display: flex; gap: 8px; margin-top: 8px; }
  .guide-actions button {
    min-height: 32px; padding: 0 14px; border: 1px solid var(--ui-gold); border-radius: 3px;
    background: rgba(184, 151, 90, 0.12); color: var(--hj-text-gold); font-size: calc(12.5 * var(--hj-fs, 1px)); cursor: pointer;
  }
  .guide-actions button:hover { background: rgba(184, 151, 90, 0.2); }
  .guide-actions .guide-skip { border-color: var(--ui-line-2); background: transparent; color: var(--ui-muted); }
  .guide-actions .guide-skip:hover { border-color: var(--ui-gold); color: var(--hj-text-gold); }
  .near-map .guide-card { width: auto; margin: 8px 0 0; }
  /* B-5 主线提示条：纯文字，点一下打开主线面板；有引导卡时排在它下面。 */
  .main-hint {
    flex: 0 0 auto; width: min(760px, calc(100% - 40px)); margin: 6px auto 0; padding: 4px 10px;
    color: var(--hj-text-gold); font-size: calc(12.5 * var(--hj-fs, 1px)); line-height: 1.5; cursor: pointer;
    border-left: 2px solid var(--ui-gold); background: rgba(184, 151, 90, 0.06);
  }
  .main-hint[hidden] { display: none; }
  .main-hint:hover { background: rgba(184, 151, 90, 0.12); }
  .near-map .main-hint { width: auto; margin: 6px 0 0; }
  .menu-btn .menu-dot {
    position: absolute; top: 4px; right: 6px; width: 7px; height: 7px; border-radius: 50%;
    background: var(--ui-gold); box-shadow: 0 0 6px transparent;
  }
  .menu-btn { position: relative; }
  /* 缺陷 A-34：主线此刻要交手的人，斗法按钮右上角一个金点。 */
  .action-tag.fight.hot { position: relative; border-color: var(--ui-gold); color: var(--hj-text-gold); }
  .action-tag.fight .action-dot {
    position: absolute; top: -3px; right: -3px; width: 7px; height: 7px; border-radius: 50%;
    background: var(--ui-gold); box-shadow: 0 0 6px transparent;
  }
  .main-next {
    margin: 4px 0 10px; padding: 10px 12px; border: 1px solid var(--ui-gold); border-radius: 4px;
    background: rgba(184, 151, 90, 0.08); color: var(--hj-text-gold); font-size: calc(14 * var(--hj-fs, 1px)); line-height: 1.6;
  }
  .main-next .main-next-label { display: block; color: var(--ui-muted); font-size: calc(11.5 * var(--hj-fs, 1px)); letter-spacing: 0.1em; }
  .main-chapter { margin: 4px 0; }
  .main-chapter summary { cursor: pointer; color: var(--ui-text); }
  .main-chapter summary .dim { color: var(--ui-muted); font-size: calc(12 * var(--hj-fs, 1px)); margin-left: 6px; }
  .main-chapter ul { margin: 4px 0 6px 16px; padding: 0; list-style: none; }
  .main-chapter li { color: var(--ui-muted); font-size: calc(12.5 * var(--hj-fs, 1px)); }
  .main-chapter li.done { color: var(--ui-text); }
  .main-chapter li.current { color: var(--hj-text-gold); }
  .line.mainline { color: var(--hj-text-gold); border-left: 2px solid var(--ui-gold); padding-left: 8px; margin-top: 6px; }
  .quest-section summary { cursor: pointer; list-style: none; }
  .quest-section summary h3 { display: inline; }
  /* M16b 双衡：身路（赭）/ 心路（青）两栏，栏头即状态。 */
  :root { --lane-body: var(--hj-text-gold); --lane-mind: var(--hj-text-cyan); }
  .combat-modebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 6px; }
  .combat-modes { display: inline-flex; gap: 2px; margin-left: auto; }
  .combat-mode {
    padding: 2px 10px; border: 1px solid var(--ui-line-2); border-radius: 2px;
    background: transparent; color: var(--ui-muted); font-size: calc(12 * var(--hj-fs, 1px)); cursor: pointer;
  }
  .combat-mode.active { border-color: var(--ui-gold); color: var(--hj-text-gold); background: rgba(184, 151, 90, 0.12); }
  .combat-plan { order: -1; margin-right: 8px; padding: 2px 0; color: var(--ui-gold); font-size: calc(12 * var(--hj-fs, 1px)); cursor: help; }
  .combat-rules { display: inline-flex; gap: 10px; }
  .combat-rules[hidden] { display: none; }
  .combat-lanes { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
  .combat-lane { display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: 3px; border: 1px solid var(--ui-line); }
  .combat-lane.lane-body { border-color: color-mix(in srgb, var(--lane-body) 55%, transparent); }
  .combat-lane.lane-mind { border-color: color-mix(in srgb, var(--lane-mind) 55%, transparent); }
  .combat-lane.locked .combat-lane-grid { opacity: 0.55; }
  .combat-lane-head { display: flex; align-items: center; justify-content: space-between; font-size: calc(12.5 * var(--hj-fs, 1px)); }
  .lane-body .combat-lane-name { color: var(--lane-body); font-weight: 700; }
  .lane-mind .combat-lane-name { color: var(--lane-mind); font-weight: 700; }
  .combat-lane-state { display: inline-flex; align-items: center; gap: 4px; color: var(--ui-muted); }
  .combat-lane.ready .combat-lane-state { color: var(--hj-text-gold); }
  .combat-lane-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hj-gold-line); }
  .combat-lane-ring {
    width: 10px; height: 10px; border-radius: 50%;
    background: conic-gradient(var(--ui-muted) calc(var(--wait, 0.5) * 360deg), transparent 0);
    border: 1px solid var(--ui-muted);
  }
  .combat-lane-grid { display: grid; grid-template-columns: 1fr; gap: 4px; }
  .combat-action { position: relative; }
  .combat-action.recommend { border-color: var(--ui-gold) !important; box-shadow: 0 0 0 1px var(--ui-gold), 0 0 10px transparent; }
  .combat-action.reserved { outline: 1px dashed var(--hj-gold-line); outline-offset: 1px; }
  /* M16c 连势：起 / 承 / 转进度点；第三招可得连势时描金边。 */
  .combo-dots { display: inline-flex; gap: 2px; margin-left: 4px; vertical-align: middle; }
  .combo-dot { width: 5px; height: 5px; border-radius: 50%; border: 1px solid var(--ui-muted, var(--hj-gold-line)); }
  .combo-dot.on { background: var(--ui-gold, var(--hj-gold-line)); border-color: var(--ui-gold, var(--hj-gold-line)); }
  .combat-action.combo-ready { border-color: var(--ui-gold, var(--hj-gold-line)) !important; box-shadow: inset 0 0 0 1px var(--ui-gold, transparent); }
  .combat-subtag.quench-tag { color: var(--hj-text-cyan); }
  /* M16c 地利 chip、观气倒计时、伤势描述。 */
  .combat-terrain { margin-left: 6px; padding: 0 6px; border: 1px solid rgba(184, 151, 90, 0.55); border-radius: 9px; font-size: calc(11 * var(--hj-fs, 1px)); color: var(--hj-text-cyan); cursor: help; }
  .combat-scout { color: var(--hj-text-cyan); font-size: calc(11 * var(--hj-fs, 1px)); margin-left: 6px; }
  .combat-vnum .wound { font-weight: 400; }
  .combat-subtag.recommend-tag { color: var(--hj-text-gold); }
  .combat-subtag.reserved-tag { color: var(--hj-text-gold); }
  .combat-key {
    position: absolute; top: 2px; right: 4px; font-size: calc(10 * var(--hj-fs, 1px)); color: var(--ui-muted);
    font-family: ui-monospace, Consolas, monospace;
  }
  .combat-tracks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
  .combat-track {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 3px;
    border: 1px solid var(--ui-line-2); background: var(--ui-card); color: var(--ui-text); font-size: calc(12 * var(--hj-fs, 1px)); cursor: pointer;
  }
  .combat-track:disabled { opacity: 0.5; cursor: default; }
  .combat-track.reserved { outline: 1px dashed var(--hj-gold-line); }
  .combat-track-kind { color: var(--hj-text-gold); font-weight: 700; }
  .combat-more { margin-top: 6px; }
  .combat-more-toggle, .combat-auto-resume {
    padding: 2px 10px; border: 1px solid var(--ui-line-2); border-radius: 2px;
    background: transparent; color: var(--ui-muted); font-size: calc(12 * var(--hj-fs, 1px)); cursor: pointer;
  }
  .combat-auto-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px;
    padding: 6px 8px; border: 1px solid var(--ui-line); border-radius: 3px; color: var(--ui-text); font-size: calc(12.5 * var(--hj-fs, 1px));
  }
  .combat-auto-banner.paused { border-color: var(--hj-gold-line); color: var(--hj-text-gold); }
  .combat-queue { display: flex; gap: 4px; margin-top: 4px; }
  .combat-queue-slot {
    flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: space-between; gap: 2px;
    padding: 2px 6px; border: 1px dashed var(--ui-line-2); border-radius: 2px; color: var(--ui-muted); font-size: calc(11.5 * var(--hj-fs, 1px));
  }
  .combat-queue-slot.filled { border-style: solid; color: var(--ui-text); }
  .combat-queue-remove { border: 0; background: transparent; color: var(--ui-muted); cursor: pointer; }
  .combat-counter-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
  .combat-counter {
    padding: 4px 10px; border: 1px solid var(--hj-cyan); border-radius: 3px; background: transparent; color: var(--hj-text-cyan);
    font-size: calc(12.5 * var(--hj-fs, 1px)); cursor: pointer;
  }
  .combat-counter.forced { border-color: var(--hj-gold-line); color: var(--hj-text-gold); }
  .combat-lights { display: inline-flex; gap: 4px; margin-left: 6px; }
  .combat-light { font-size: calc(11 * var(--hj-fs, 1px)); padding: 0 4px; border-radius: 2px; border: 1px solid currentColor; }
  .combat-light.lane-body { color: var(--lane-body); }
  .combat-light.lane-mind { color: var(--lane-mind); }
  .combat-light.off { opacity: 0.35; }
  /* G6：战斗面板身路栏的引导高亮，只描边不遮挡。 */
  .combat-group.guide-focus, .combat-lane.guide-focus { outline: 1px solid var(--ui-gold); outline-offset: 3px; border-radius: 3px; }
  .combat-guide-note { margin: 0; color: var(--hj-text-gold); font-size: calc(11.5 * var(--hj-fs, 1px)); line-height: 1.5; }

  /* 舆图去处：四家入门等常驻锚点，点即循路。 */
  .map-anchors { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; }
  .map-anchors[hidden] { display: none; }
  .map-anchors-label { color: var(--ui-muted); font-size: calc(11.5 * var(--hj-fs, 1px)); }
  .map-anchor {
    min-height: 30px; padding: 3px 10px; border: 1px solid var(--ui-gold); border-radius: 3px;
    background: rgba(184, 151, 90, 0.08); color: var(--hj-text-gold); font-size: calc(12.5 * var(--hj-fs, 1px)); cursor: pointer;
  }
  .map-anchor:hover { background: rgba(184, 151, 90, 0.18); }

  /* 帮助面板 */
  .help-sections { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
  .help-item { padding: 8px 10px; border: 1px solid var(--ui-line); border-radius: 3px; background: var(--ui-card); }
  .help-item h3 { margin: 0 0 4px; color: var(--ui-gold); font-size: calc(13 * var(--hj-fs, 1px)); letter-spacing: 0.06em; }
  .help-item p { margin: 0; color: var(--ui-text); font-size: calc(12.5 * var(--hj-fs, 1px)); line-height: 1.65; }
  .help-restart {
    width: 100%; margin-top: 12px; padding: 9px 0; border: 1px solid var(--ui-gold); border-radius: 3px;
    background: rgba(184, 151, 90, 0.12); color: var(--hj-text-gold); font-size: calc(13 * var(--hj-fs, 1px)); cursor: pointer;
  }
  .help-restart:hover { background: rgba(184, 151, 90, 0.2); }

  @media (max-width: 1023px) and (orientation: portrait), (max-width: 1023px) and (min-height: 601px) {
    .quick-actions-row { width: min(760px, 100%); margin: 0 auto 8px; }
    button.quick-btn { padding: 7px 0; font-size: calc(12 * var(--hj-fs, 1px)); letter-spacing: 0; gap: 4px; }
    button.quick-btn svg { width: 14px; height: 14px; }
    .say-popover { left: 20px; right: 20px; width: auto; margin: 0; }
    .near-dirs { margin: 8px 8px 0; }
    .dir-btn { height: 36px; font-size: calc(12.5 * var(--hj-fs, 1px)); }
    #log { padding-bottom: 268px; }
  }

  @media (min-width: 1024px), (max-width: 1023px) and (max-height: 600px) and (orientation: landscape) {
    /* 整页铺满视口；右栏宽度随屏宽伸缩，不写死页面宽度。 */
    #app {
      padding: 0; gap: 0;
      width: 100%; max-width: none;
      --rail-w: clamp(64px, 4.6vw, 84px);
    }
    .topbar {
      height: 30px; padding: 0 20px; gap: 0; align-items: center;
      background: linear-gradient(180deg, var(--hj-paper-deep) 0%, var(--hj-paper) 100%);
      border-bottom: 1px solid rgba(184, 151, 90, 0.55);
      box-shadow: 0 2px 8px rgba(43, 38, 32, 0.14);
    }
    .brand {
      color: var(--ui-gold); font-size: calc(15 * var(--hj-fs, 1px)); font-weight: 700;
      letter-spacing: 2px; text-shadow: 0 1px 3px rgba(43, 38, 32, 0.14);
    }
    .wallet { margin-left: auto; margin-right: 16px; gap: 16px; font-size: calc(12 * var(--hj-fs, 1px)); }
    .wallet-item { display: inline-flex; align-items: baseline; gap: 4px; }
    .wallet-key { color: var(--ui-muted); font-size: calc(12 * var(--hj-fs, 1px)); font-weight: 400; }
    .wallet-coin, .wallet-daoke { color: var(--ui-text); font-weight: 700; }
    .wallet-sep { display: none; }
    .status { margin-left: 0; font-size: calc(12 * var(--hj-fs, 1px)); color: var(--hj-text-cyan); text-shadow: 0 0 8px transparent; }
    .status .dot.off + #status { color: var(--color-cinnabar); }
    #logout { display: none; }
    /* 左右贴边、三栏之间 4px；上下各留 4px 呼吸位，不顶死顶栏和浏览器底边。 */
    .layout { gap: 4px; padding: 4px 0; }
    .story-panel { flex: 1 1 0; min-width: 0; padding: 4px; gap: 6px; }
    .near-map { flex: 1 1 0; min-width: 0; padding: 4px; }
    #log { padding: 10px 12px; }
    .room { margin: 6px 0 12px; }
    .near-head { padding-bottom: 6px; margin-bottom: 6px; }
    .near-dirs { margin-top: 6px; padding-top: 6px; }
    .near-map .near-foot { display: none; }
    .exits { display: none; }
    .composer { position: relative; flex: 0 0 auto; padding: 0; background: transparent; border: 0; }
    .composer form { display: none; }
    .quick-actions-row { width: 100%; }
    button.quick-btn { padding: 11px 0; font-size: calc(14 * var(--hj-fs, 1px)); }
    #statusToggle, #mapToggle, #questToggle { display: none; }
    .dialog-panel { top: 38px; bottom: 8px; right: calc(var(--rail-w) + 4px); }
    .map-panel { right: calc(var(--rail-w) + 4px); }
    .panel-right {
      display: flex; flex-direction: column; gap: 4px;
      flex: 0 0 var(--rail-w); width: var(--rail-w); min-width: 0;
      padding: 0; background: transparent; border: 0; box-shadow: none;
    }
    .menu-btn {
      flex: 1; position: relative; display: flex; flex-direction: column;
      align-items: center; justify-content: center; padding: 0;
      background: linear-gradient(135deg, var(--hj-paper-deep) 0%, var(--hj-paper) 100%);
      border: 1px solid var(--hj-cyan); border-radius: 4px;
      color: var(--ui-muted); cursor: pointer; transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: inset 0 1px 1px transparent, 0 4px 8px rgba(43, 38, 32, 0.14), 0 1px 0 rgba(43, 38, 32, 0.14);
    }
    .menu-btn:hover { color: var(--ui-text); border-color: var(--hj-cyan); transform: translateY(-1px); }
    .menu-btn svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.8; fill: none; margin-bottom: 6px; }
    .menu-text { font-size: calc(15 * var(--hj-fs, 1px)); font-weight: 600; letter-spacing: 1px; line-height: 1.1; }
    .menu-btn.active {
      color: var(--hj-text-gold); border-color: var(--ui-gold);
      background: linear-gradient(135deg, var(--hj-paper-deep) 0%, var(--hj-paper) 100%);
    }
    .menu-btn.active::before {
      content: ''; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 4px;
      border-radius: 4px 0 0 4px;
      background: linear-gradient(180deg, var(--hj-gold-line), var(--ui-gold));
      box-shadow: 0 0 12px var(--ui-gold);
    }
    .menu-btn.empty { opacity: 0.5; cursor: default; background: var(--hj-paper); border: 1px dashed rgba(184, 151, 90, 0.55); box-shadow: none; }
    .menu-btn.empty svg { stroke: rgba(184, 151, 90, 0.55); }
    .menu-btn.soon { opacity: 0.55; cursor: not-allowed; }
    .menu-btn[disabled]:hover { transform: none; color: var(--ui-muted); border-color: var(--hj-cyan); }

    /* 战斗页沿用主界面顶栏与贴边密度：24px 战斗栏、4px 缝隙、4px 内衬。 */
    .combat-panel { inset: 4px 0; border-radius: 4px; }
    .combat-head {
      height: 24px; min-height: 24px; padding: 0 20px; gap: 8px;
      background: linear-gradient(180deg, var(--hj-paper-deep) 0%, var(--hj-paper) 100%);
      border-bottom: 1px solid rgba(184, 151, 90, 0.55);
      box-shadow: 0 2px 8px rgba(43, 38, 32, 0.14);
    }
    .combat-head-title {
      display: inline-flex; align-items: baseline; gap: 6px;
      color: var(--ui-text); font-size: calc(15 * var(--hj-fs, 1px)); font-weight: 700;
      letter-spacing: 1px; text-shadow: 0 1px 3px rgba(43, 38, 32, 0.14);
    }
    .combat-head-title .combat-brand { padding-right: 8px; }
    .combat-head-title .combat-brand.fs-mark { font-size: calc(15 * var(--hj-fs, 1px)); }
    .combat-head-title .combat-name { color: var(--hj-text-cyan); letter-spacing: 1px; }
    .combat-head-title .combat-breath { color: var(--hj-text-light); font-size: calc(12 * var(--hj-fs, 1px)); font-weight: 400; letter-spacing: 0.5px; }
    .combat-head-title .combat-sep { color: var(--hj-paper); font-size: calc(12 * var(--hj-fs, 1px)); font-weight: 400; letter-spacing: 0; }
    .combat-head-hint { color: var(--ui-muted); font-size: calc(11.5 * var(--hj-fs, 1px)); }
    .combat-close {
      height: 20px; padding: 0 8px;
      background: var(--hj-paper); border: 1px solid var(--ui-line); border-radius: 3px;
      color: var(--ui-muted); font-size: calc(11.5 * var(--hj-fs, 1px));
    }
    .combat-body { gap: 4px; padding: 4px; }
    .combat-status { gap: 4px; }
    .combat-sides { gap: 4px; }
    .combat-side { padding: 8px 10px; }
    .combat-side-head { margin-bottom: 6px; padding-bottom: 4px; }
    .combat-side-name { font-size: calc(15 * var(--hj-fs, 1px)); }
    .combat-side-meta { font-size: calc(11.5 * var(--hj-fs, 1px)); }
    .combat-vrow { padding: 1px 0; }
    .combat-chips { gap: 2px 12px; margin-top: 4px; padding-top: 6px; }
    .combat-log { padding: 10px 12px; }
    .combat-guidance { padding: 6px 8px; }
    .combat-finisher { padding: 6px 8px; }
    .combat-command { padding: 6px; gap: 6px; }
    .combat-actions { gap: 6px; }
    .combat-group { gap: 3px; }
    .combat-group-grid { gap: 4px; }
    .combat-action { min-height: 30px; padding: 4px 7px; }
    .combat-action small { font-size: calc(10.5 * var(--hj-fs, 1px)); }
    .combat-foot { padding-top: 6px; }
    .combat-exits button { min-height: 28px; padding: 0 12px; }
  }

  /* ---------- 页头字标组件：封神。劫 ----------
     以后任何页面要挂这个头，只写一行占位：
       <span class="fs-mark" data-mark></span>            顶栏 / 行内，17px
       <span class="fs-mark fs-mark--combat" data-mark></span>  战斗栏，16px
       <h1 class="fs-mark fs-mark--hero" data-mark></h1>        首页大标题，56px
     内部结构由脚本 mountMarks() 统一注入，改名只动脚本里的 MARK_WORD；
     无障碍文本统一读「封神劫」，画面里的「。」由金属点承担。
     效果稿的 JinGuWen 字体未随包提供，这里退回本地隶/楷/宋，字重仍取 900。 */
  :root {
    --wm-teal: #75bba9;
    --wm-gold: #cbb286;
    --wm-white: #f4f6f9;
    --wm-font: "SimHei", "黑体", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
    --wm-title-font: "STLiti", "LiSu", "FZXiaoZhuanTi", "KaiTi", "STKaiti", "SimSun", serif;
    --wm-bone: #f2ece0;
    --wm-cinnabar: #c1272d;
    --wm-bronze: #e2b66e;
  }
  .fs-mark {
    display: inline-flex; align-items: center; gap: 0;
    color: var(--wm-bone);
    font-family: var(--wm-title-font); font-weight: 600; font-size: 17px;
    letter-spacing: 0.04em; line-height: 1; white-space: nowrap; user-select: none;
  }
  /* 大标题不再叠 synthetic 900：隶书本就粗，再合成加粗会把「封神」的笔画糊死。 */
  .fs-mark--hero {
    font-size: clamp(2.5rem, 9vw, 3.5rem); letter-spacing: 0.05em;
    font-weight: 500;
    filter: url(#castRough);
  }
  .fs-mark--hero .fs-mark-ch { -webkit-text-stroke: clamp(0.4px, 0.06vw, 0.9px) currentColor; }
  .fs-mark--combat { font-size: 16px; }
  .fs-mark-ch { display: inline-block; }
  /* 封神：骨白。阴影与外发光一律用 em，顶栏 17px 与首页 56px 才都不会糊成一团。 */
  .fs-mark-ch--bone {
    color: var(--wm-bone);
    text-shadow:
      0 0 0.02em #f2ece0,
      0 0 0.1em rgba(242, 236, 224, 0.5),
      0.06em 0.06em 0 rgba(0, 0, 0, 0.7);
  }
  /* 。：金属点，直径跟着字号走 */
  .fs-mark-dot {
    display: inline-block; flex: 0 0 auto; position: relative;
    width: 0.28em; height: 0.28em; margin: 0 0.16em;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff7e0 0%, #e2b66e 42%, #b8853c 80%, #734f1b 100%);
    box-shadow:
      0 0 0.1em rgba(226, 182, 110, 0.95),
      0 0 0.3em rgba(226, 182, 110, 0.55),
      inset -0.03em -0.03em 0.08em rgba(0, 0, 0, 0.45),
      inset 0.03em 0.03em 0.06em rgba(255, 255, 255, 0.8);
  }
  /* 只留一层柔光，不再画实心光环——小字号下会读成「点下面又有一个点」。 */
  .fs-mark-dot::after {
    content: ''; position: absolute; inset: -0.1em;
    border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(226, 182, 110, 0.18) 35%, rgba(226, 182, 110, 0) 72%);
  }
  /* 劫：朱砂红 */
  .fs-mark-ch--cinnabar {
    color: var(--wm-cinnabar);
    text-shadow:
      0 0 0.02em #c1272d,
      0 0 0.1em rgba(193, 39, 45, 0.7),
      0.06em 0.06em 0 rgba(0, 0, 0, 0.7),
      0 0 0.46em rgba(193, 39, 45, 0.32);
  }
  #login .card { position: relative; }
  #login .hero-rule {
    width: 100%; height: 1px; margin: 0 auto 18px; position: relative;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(193, 39, 45, 0.55) 20%,
      rgba(242, 236, 224, 0.28) 50%,
      rgba(193, 39, 45, 0.55) 80%,
      transparent 100%);
  }
  #login .hero-rule::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 5px; height: 5px; transform: translate(-50%, -50%) rotate(45deg);
    background: var(--wm-cinnabar);
    box-shadow: 0 0 8px rgba(193, 39, 45, 0.9);
  }
  #login .card h1.wordmark { justify-content: center; margin: 0 0 10px; }
  #login .seal {
    position: absolute; top: 16px; right: 16px;
    width: 34px; height: 34px; border: 1.5px solid var(--wm-cinnabar); border-radius: 2px;
    display: grid; place-items: center;
    color: var(--wm-cinnabar); opacity: 0.8;
    font-family: var(--wm-title-font); font-size: 11px; line-height: 1;
    letter-spacing: 0.1em; writing-mode: vertical-rl;
    transform: rotate(-4deg);
    box-shadow: inset 0 0 0 1px rgba(193, 39, 45, 0.35), 0 0 14px rgba(193, 39, 45, 0.18);
    pointer-events: none;
  }
  .combat-head-title { font-family: var(--wm-font); font-weight: 900; }
  /* 战斗页页头：左侧同一枚字标，右侧仍是对手与息数。 */
  .combat-brand {
    padding-right: 10px; margin-right: 2px;
    border-right: 1px solid rgba(255, 156, 128, 0.3);
  }
  .combat-brand .fs-mark-ch--bone { text-shadow: 0 0 0.24em rgba(242, 236, 224, 0.3); }
  .combat-brand .fs-mark-ch--cinnabar { text-shadow: 0 0 0.38em rgba(193, 39, 45, 0.55); }
  .combat-head-title .combat-sep { color: #3e474f; text-shadow: none; }
  .combat-head-title .combat-name { color: #b3bec7; text-shadow: none; }
  .combat-head-title .combat-breath { color: #7f8c96; font-weight: 400; line-height: 1; }
  .combat-head-title .combat-breath b {
    color: #ffcf7a; font-size: 16px; font-weight: 900; line-height: 1;
    padding: 0 2px; font-variant-numeric: tabular-nums;
    text-shadow: 0 0 8px rgba(255, 200, 110, 0.35);
  }

  /* ---------- 近景地图标题：与顶栏同一套字标 ---------- */
  .near-head { gap: 3px; }
  .near-title, .near-terrain {
    font-family: var(--wm-font); font-weight: 900; font-size: 14px;
    line-height: 1; letter-spacing: 1px;
  }
  .near-title { color: var(--wm-teal); }
  .near-sep {
    flex: 0 0 auto; color: var(--wm-gold); font-size: 15px; font-weight: 700;
    line-height: 1; margin: 0 1px; text-shadow: 0 0 4px rgba(203, 178, 134, 0.4);
  }
  .near-terrain { color: var(--wm-white); }
  .near-terrain.traveling { color: var(--lm-amber-hi); font-size: 12px; font-weight: 700; }

  @media (max-width: 560px) {
    .brand { display: none; }
  }

  /* =========================================================
     R2 · 头像与半身（ui/portrait-el.ts）：道统色框与剪影色块。
     色值为占位，画境的色板定稿（R1 规范）后统一替换。
     ========================================================= */
  :root {
    --faction-chan: #c9a24a;   /* 阐：金 */
    --faction-jie: #3f8f8a;    /* 截：青 */
    --faction-fo: #a0683a;     /* 佛：赭 */
    --faction-yao: #b0413e;    /* 妖：赤 */
    --faction-none: #7d7a72;   /* 散人 / 中立：灰 */
  }
  .portrait { display: inline-block; box-sizing: border-box; border: 2px solid var(--faction-none); border-radius: 4px; object-fit: cover; vertical-align: middle; }
  .portrait--chan { border-color: var(--faction-chan); }
  .portrait--jie { border-color: var(--faction-jie); }
  .portrait--fo { border-color: var(--faction-fo); }
  .portrait--yao { border-color: var(--faction-yao); }
  .portrait--block { background: color-mix(in srgb, var(--faction-none) 35%, #121419); }
  .portrait--block.portrait--chan { background: color-mix(in srgb, var(--faction-chan) 35%, #121419); }
  .portrait--block.portrait--jie { background: color-mix(in srgb, var(--faction-jie) 35%, #121419); }
  .portrait--block.portrait--fo { background: color-mix(in srgb, var(--faction-fo) 35%, #121419); }
  .portrait--block.portrait--yao { background: color-mix(in srgb, var(--faction-yao) 35%, #121419); }

  /* =========================================================
     生成文件：由 npm run assets:build 生成，不要手改。
     界面套件（R1 B1，docs/视觉资产/定稿/界面/）：--ui-* 是各件的图；
     .ui-9-* 九宫、.ui-3-* 三切（border-image，border 宽为 0，不占版面，内边距由组件自己给）；.ui-tex-* 平铺底纹。
     ========================================================= */
  :root {
    --ui-bar-fill-danger: url("/assets/ui/bar/fill-danger-240.a0299a64.webp");
    --ui-bar-fill-qi: url("/assets/ui/bar/fill-qi-240.6981864f.webp");
    --ui-bar-fill-shen: url("/assets/ui/bar/fill-shen-240.f755ddbc.webp");
    --ui-bar-fill-xing: url("/assets/ui/bar/fill-xing-240.bcbd8ea1.webp");
    --ui-bar-ticks: url("/assets/ui/bar/ticks-240.f056fffe.webp");
    --ui-bar-track: url("/assets/ui/bar/track-240.848449b7.webp");
    --ui-button-l-disabled: url("/assets/ui/button/l-disabled-360.f5729e29.webp");
    --ui-button-l-hover: url("/assets/ui/button/l-hover-360.8ef1afe3.webp");
    --ui-button-l-normal: url("/assets/ui/button/l-normal-360.e1cfb67d.webp");
    --ui-button-l-pressed: url("/assets/ui/button/l-pressed-360.26d09da4.webp");
    --ui-button-m-disabled: url("/assets/ui/button/m-disabled-320.443c46b7.webp");
    --ui-button-m-hover: url("/assets/ui/button/m-hover-320.680b5927.webp");
    --ui-button-m-normal: url("/assets/ui/button/m-normal-320.2382d60a.webp");
    --ui-button-m-pressed: url("/assets/ui/button/m-pressed-320.0bd28cfd.webp");
    --ui-button-s-disabled: url("/assets/ui/button/s-disabled-120.475af134.webp");
    --ui-button-s-hover: url("/assets/ui/button/s-hover-120.6656b0ee.webp");
    --ui-button-s-normal: url("/assets/ui/button/s-normal-120.2da2c433.webp");
    --ui-button-s-pressed: url("/assets/ui/button/s-pressed-120.4708c236.webp");
    --ui-compass-base: url("/assets/ui/compass/base-250.05e22e56.webp");
    --ui-compass-dir-dim: url("/assets/ui/compass/dir-dim-44.61fab2ba.webp");
    --ui-compass-dir-lit: url("/assets/ui/compass/dir-lit-44.0846e35f.webp");
    --ui-compass-dir-pressed: url("/assets/ui/compass/dir-pressed-44.d580c630.webp");
    --ui-compass-mark-door: url("/assets/ui/compass/mark-door-40.abcd66c1.webp");
    --ui-compass-mark-sky: url("/assets/ui/compass/mark-sky-40.4a74e9dc.webp");
    --ui-compass-mark-slope: url("/assets/ui/compass/mark-slope-40.94653f13.webp");
    --ui-compass-mark-stair: url("/assets/ui/compass/mark-stair-40.dfc41585.webp");
    --ui-compass-vert-dim: url("/assets/ui/compass/vert-dim-34.a17ac97e.webp");
    --ui-compass-vert-lit: url("/assets/ui/compass/vert-lit-34.2248fb03.webp");
    --ui-compass-vert-pressed: url("/assets/ui/compass/vert-pressed-34.0fdfc0ad.webp");
    --ui-frame-chan: url("/assets/ui/frame/chan-256.7a6d85d9.webp");
    --ui-frame-fo: url("/assets/ui/frame/fo-256.30cbfdea.webp");
    --ui-frame-jie: url("/assets/ui/frame/jie-256.1ab4e344.webp");
    --ui-frame-yao: url("/assets/ui/frame/yao-256.1e5be82d.webp");
    --ui-panel-paper: url("/assets/ui/panel/paper-240.158767a6.webp");
    --ui-panel-silk: url("/assets/ui/panel/silk-240.19a9072b.webp");
    --ui-panel-subtitle: url("/assets/ui/panel/subtitle-240.36cfc528.webp");
    --ui-paper-page: url("/assets/ui/paper/page-512.cc75ee02.webp");
    --ui-paper-panel: url("/assets/ui/paper/panel-512.6bb07218.webp");
    --ui-paper-silk: url("/assets/ui/paper/silk-512.df39c4f2.webp");
    --ui-paper-subtitle: url("/assets/ui/paper/subtitle-512.17e9e127.webp");
    --ui-scroll-h: url("/assets/ui/scroll/h-800.d59ed90a.webp");
    --ui-scroll-v: url("/assets/ui/scroll/v-68.a253289b.webp");
    --ui-seal-disabled: url("/assets/ui/seal/disabled-144.5a841952.webp");
    --ui-seal-hover: url("/assets/ui/seal/hover-144.6a335846.webp");
    --ui-seal-normal: url("/assets/ui/seal/normal-144.e0db76ac.webp");
    --ui-seal-selected: url("/assets/ui/seal/selected-144.9fc7e803.webp");
    --ui-tag-exit-land: url("/assets/ui/tag/exit-land-160.0260a26e.webp");
    --ui-tag-exit-sky: url("/assets/ui/tag/exit-sky-160.3d9d4d8c.webp");
    --ui-tag-exit-water: url("/assets/ui/tag/exit-water-160.83aafb9e.webp");
    --ui-tag-npc: url("/assets/ui/tag/npc-200.e95368d4.webp");
    --ui-tag-place: url("/assets/ui/tag/place-120.a16c185f.webp");
    --ui-tag-place-current: url("/assets/ui/tag/place-current-120.602fd39d.webp");
  }
  .ui-3-bar-fill-qi { border: 0 solid transparent; border-image: var(--ui-bar-fill-qi) 0 10 0 10 fill / 0 10px 0 10px stretch; }
  .ui-3-bar-fill-shen { border: 0 solid transparent; border-image: var(--ui-bar-fill-shen) 0 10 0 10 fill / 0 10px 0 10px stretch; }
  .ui-3-bar-fill-xing { border: 0 solid transparent; border-image: var(--ui-bar-fill-xing) 0 10 0 10 fill / 0 10px 0 10px stretch; }
  .ui-3-bar-track { border: 0 solid transparent; border-image: var(--ui-bar-track) 0 12 0 12 fill / 0 12px 0 12px stretch; }
  .ui-9-button-l-disabled { border: 0 solid transparent; border-image: var(--ui-button-l-disabled) 18 18 18 18 fill / 18px 18px 18px 18px stretch; }
  .ui-9-button-l-hover { border: 0 solid transparent; border-image: var(--ui-button-l-hover) 18 18 18 18 fill / 18px 18px 18px 18px stretch; }
  .ui-9-button-l-normal { border: 0 solid transparent; border-image: var(--ui-button-l-normal) 18 18 18 18 fill / 18px 18px 18px 18px stretch; }
  .ui-9-button-l-pressed { border: 0 solid transparent; border-image: var(--ui-button-l-pressed) 18 18 18 18 fill / 18px 18px 18px 18px stretch; }
  .ui-9-button-m-disabled { border: 0 solid transparent; border-image: var(--ui-button-m-disabled) 14 14 14 14 fill / 14px 14px 14px 14px stretch; }
  .ui-9-button-m-hover { border: 0 solid transparent; border-image: var(--ui-button-m-hover) 14 14 14 14 fill / 14px 14px 14px 14px stretch; }
  .ui-9-button-m-normal { border: 0 solid transparent; border-image: var(--ui-button-m-normal) 14 14 14 14 fill / 14px 14px 14px 14px stretch; }
  .ui-9-button-m-pressed { border: 0 solid transparent; border-image: var(--ui-button-m-pressed) 14 14 14 14 fill / 14px 14px 14px 14px stretch; }
  .ui-9-button-s-disabled { border: 0 solid transparent; border-image: var(--ui-button-s-disabled) 10 10 10 10 fill / 10px 10px 10px 10px stretch; }
  .ui-9-button-s-hover { border: 0 solid transparent; border-image: var(--ui-button-s-hover) 10 10 10 10 fill / 10px 10px 10px 10px stretch; }
  .ui-9-button-s-normal { border: 0 solid transparent; border-image: var(--ui-button-s-normal) 10 10 10 10 fill / 10px 10px 10px 10px stretch; }
  .ui-9-button-s-pressed { border: 0 solid transparent; border-image: var(--ui-button-s-pressed) 10 10 10 10 fill / 10px 10px 10px 10px stretch; }
  .ui-9-panel-paper { border: 0 solid transparent; border-image: var(--ui-panel-paper) 32 32 32 32 fill / 32px 32px 32px 32px stretch; }
  .ui-9-panel-silk { border: 0 solid transparent; border-image: var(--ui-panel-silk) 40 40 40 40 fill / 40px 40px 40px 40px stretch; }
  .ui-9-panel-subtitle { border: 0 solid transparent; border-image: var(--ui-panel-subtitle) 24 24 24 24 fill / 24px 24px 24px 24px stretch; }
  .ui-tex-paper-page { background-image: var(--ui-paper-page); background-repeat: repeat; }
  .ui-tex-paper-panel { background-image: var(--ui-paper-panel); background-repeat: repeat; }
  .ui-tex-paper-silk { background-image: var(--ui-paper-silk); background-repeat: repeat; }
  .ui-tex-paper-subtitle { background-image: var(--ui-paper-subtitle); background-repeat: repeat; }
  .ui-3-scroll-h { border: 0 solid transparent; border-image: var(--ui-scroll-h) 0 120 0 120 fill / 0 120px 0 120px stretch; }
  .ui-3-scroll-v { border: 0 solid transparent; border-image: var(--ui-scroll-v) 0 120 0 120 fill / 0 120px 0 120px stretch; }
  .ui-9-tag-exit-land { border: 0 solid transparent; border-image: var(--ui-tag-exit-land) 14 10 10 10 fill / 14px 10px 10px 10px stretch; }
  .ui-9-tag-exit-sky { border: 0 solid transparent; border-image: var(--ui-tag-exit-sky) 14 10 10 10 fill / 14px 10px 10px 10px stretch; }
  .ui-9-tag-exit-water { border: 0 solid transparent; border-image: var(--ui-tag-exit-water) 14 10 10 10 fill / 14px 10px 10px 10px stretch; }
  .ui-9-tag-npc { border: 0 solid transparent; border-image: var(--ui-tag-npc) 52 14 14 14 fill / 52px 14px 14px 14px stretch; }
  .ui-9-tag-place { border: 0 solid transparent; border-image: var(--ui-tag-place) 10 10 10 10 fill / 10px 10px 10px 10px stretch; }
  .ui-9-tag-place-current { border: 0 solid transparent; border-image: var(--ui-tag-place-current) 10 10 10 10 fill / 10px 10px 10px 10px stretch; }

  /* =========================================================
     R2 · 画境令牌（《标准-Web交互-v2.0-画境》§2、§3，定稿 r1）
     颜色：纸墨色板 + 文字专用色（压在宣纸深上对比度 ≥ 4.5:1）；道统色、三宝色只作边框、色条和填充。
     尺寸：按视口宽在 1366 与 1920 两个验收点之间线性插值，两点上与规范 §2 的表一致：
       顶栏 36 → 44；状态条 104 → 124；字幕条 224 → 250；地图栏 410 → 518（不小于 360）；菜单 56 → 70；正文 16 → 18px。
     ========================================================= */
  :root {
    --hj-paper: #F3EBDD;
    --hj-paper-deep: #E6DAC3;
    --hj-ink: #2B2620;
    --hj-ink-light: #6B6257;
    --hj-cinnabar: #A33B2B;
    --hj-gold-line: #B8975A;
    --hj-cyan: #3F6E73;
    /* 文字专用色（r1 新增）：差事行、青色文字、次要文字压在宣纸深上用这三个 */
    --hj-text-gold: #7A5A1E;
    --hj-text-cyan: #2E5559;
    --hj-text-light: #564E45;
    /* 道统色：只作边框、色条（覆盖 R2 头像组件里的占位色） */
    --faction-chan: #C9B27A;
    --faction-jie: #5CAAB4;
    --faction-fo: #B88640;
    --faction-yao: #B2342C;
    --faction-none: #8C8478;
    /* 三宝色：只作填充；“危”档改朱色 */
    --hj-xing: #A83F2C;
    --hj-qi: #2F7380;
    --hj-shen: #C29A3E;

    --hj-top: clamp(36px, calc(1.444vw + 16.3px), 44px);
    --hj-status: clamp(104px, calc(3.61vw + 54.7px), 124px);
    /* 字幕条（策划 11-01 改）：只剩房间名一行，贴画面下沿 */
    --hj-subtitle: clamp(40px, calc(1.083vw + 25.2px), 46px);
    --hj-map: max(360px, calc(19.5vw + 144px));
    --hj-menu: clamp(56px, calc(2.527vw + 21.5px), 70px);
    --hj-gap: 4px;
    --hj-font: clamp(16px, calc(0.361vw + 11.07px), 18px);
    /* 左栏宽 = 视口 − 地图栏 − 菜单 − 两侧内边距与两道缝 */
    --hj-left: calc(100vw - var(--hj-map) - var(--hj-menu) - 4 * var(--hj-gap));
    --hj-face: clamp(56px, calc(1.444vw + 36.3px), 64px);
  }

  /* =========================================================
     R2 · 画境骨架（《标准-Web交互-v2.0-画境》§2，定稿 r1）——只管版面，不管皮肤
     body.hj 打开：左栏（场景区 + 状态条）· 地图栏（通到底）· 印章菜单（通到底）；
     面板盖左栏的场景区（地图栏、菜单照常可用）；舆图与斗法全屏（顶栏保留）。
     纸墨皮肤见 13-paper.css（R2 第 3 块）；这一层只管位置与尺寸。
     去掉 body 上的 hj 类即回到旧版面（应急回退）。
     ========================================================= */
  /* 状态条只在宽屏画境版面里出现；窄屏仍用原来的快捷栏 */
  .hj-status { display: none; }

  @media (min-width: 1024px), (max-width: 1023px) and (max-height: 600px) and (orientation: landscape) {
    body.hj #app {
      height: 100dvh; min-height: 0; max-width: none; margin: 0; padding: 0; gap: 0;
      display: flex; flex-direction: column; font-size: var(--hj-font);
    }
    body.hj .topbar { flex: 0 0 var(--hj-top); height: var(--hj-top); }

    body.hj .layout {
      flex: 1 1 auto; min-height: 0; position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr) var(--hj-map) var(--hj-menu);
      grid-template-rows: minmax(0, 1fr) var(--hj-status);
      gap: var(--hj-gap); padding: var(--hj-gap);
    }

    /* 左栏上部：场景区（R4 之前是文字流占位；字幕条和纪事在 R2 第 4 块） */
    body.hj .story-panel {
      grid-column: 1; grid-row: 1; min-width: 0; min-height: 0;
      display: flex; flex-direction: column; flex: none; overflow: hidden;
    }

    /* 左栏下部：状态条（§6）——左：头像、名字、道统、差事、快捷五键；中：形气神；右：吐纳、位置签 */
    body.hj .hj-status {
      grid-column: 1; grid-row: 2; min-width: 0; min-height: 0;
      display: grid; grid-template-columns: clamp(320px, 22vw, 420px) minmax(0, 1fr) auto; gap: 12px; align-items: stretch;
      padding: 8px 12px; overflow: hidden;
      background: var(--ui-panel); border: 1px solid var(--ui-line); border-radius: 4px;
    }
    body.hj .hj-status-who { display: grid; grid-template-columns: var(--hj-face) auto; grid-template-rows: auto auto; column-gap: 10px; row-gap: 6px; align-items: center; min-width: 0; }
    body.hj .hj-status-face { grid-row: 1; width: var(--hj-face); height: var(--hj-face); }
    body.hj .hj-status-face > .portrait { width: 100% !important; height: 100% !important; object-fit: cover; }
    /* 新版头像不要框，比旧头像大一档，占满左边两行；快捷五键挪到头像右边 */
    body.hj .hj-status-who:has(.hj-face-por) { --hj-face: clamp(86px, calc(1.6vw + 66px), 100px); }
    body.hj .hj-status-face:has(.hj-face-por) { grid-row: 1 / span 2; align-self: center; }
    body.hj .hj-status-who:has(.hj-face-por) .hj-status-quick { grid-column: 2; }
    body.hj .hj-status-who:has(.hj-face-por) .hj-status .quick-actions-row,
    body.hj .hj-status-who:has(.hj-face-por) .quick-actions-row { gap: 4px; }
    body.hj .hj-status-who:has(.hj-face-por) button.quick-btn { padding: 2px 5px; flex: 1 1 0; min-width: 0; white-space: nowrap; }
    body.hj .hj-status-face > .hj-face-por { position: relative; top: -10px; border: 0 !important; border-radius: 0; background: transparent; object-position: top; transform: scaleX(-1); filter: saturate(.72); opacity: .92; mix-blend-mode: multiply; -webkit-mask-image: linear-gradient(#000 68%, transparent 100%); mask-image: linear-gradient(#000 68%, transparent 100%); }
    body.hj .hj-status-id { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
    body.hj .hj-status-name { font-weight: 700; }
    body.hj .hj-status-school, body.hj .hj-status-quest { font-size: 0.82em; opacity: 0.85; }
    body.hj .hj-status-quest { flex-basis: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    body.hj .hj-status-quick { grid-column: 1 / span 2; min-width: 0; }
    body.hj .hj-status .quick-actions-row { width: 100%; margin: 0; display: flex; gap: 6px; }
    body.hj .hj-status button.quick-btn { padding: 2px 8px; font-size: 0.8em; min-height: 0; }
    body.hj .hj-status button.quick-btn svg { display: none; }
    body.hj .hj-status-bars { display: flex; flex-direction: column; justify-content: center; gap: 6px; min-width: 0; }
    /* 三宝条：毛笔条，数字在条外，和斗法同款（《方案-UI统一》） */
    body.hj .hj-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(88px, auto); gap: 8px; align-items: center; min-height: 16px; }
    body.hj .hj-bar-name { font-weight: 700; color: var(--hj-ink); }
    body.hj .hj-bar-stroke {
      display: block; height: clamp(14px, calc((var(--hj-status) - 48px) / 3), 20px); overflow: hidden; background: #CDBFA3;
      -webkit-mask: url(/assets/card/ui/brush.webp) center / 100% 100% no-repeat; mask: url(/assets/card/ui/brush.webp) center / 100% 100% no-repeat;
    }
    body.hj .hj-bar-fill { display: block; height: 100%; background: var(--hj-bar-color); transition: width 0.25s ease; }
    body.hj .hj-bar-xing { --hj-bar-color: var(--hj-xing); }
    body.hj .hj-bar-qi { --hj-bar-color: var(--hj-qi); }
    body.hj .hj-bar-shen { --hj-bar-color: var(--hj-shen); }
    body.hj .hj-bar.danger { --hj-bar-color: #C1190F; }
    body.hj .hj-bar-num { text-align: right; font-weight: 700; color: var(--hj-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
    body.hj .hj-status-extra { display: flex; flex-direction: column; justify-content: center; gap: 4px; font-size: 0.8em; white-space: nowrap; }

    /* 地图栏：从顶栏下方通到底；面板打开时也不收起 */
    body.hj .near-map {
      grid-column: 2; grid-row: 1 / span 2; min-width: 0; min-height: 0; width: auto; height: auto;
      display: flex !important; flex-direction: column;
    }
    body.hj.dialog-open .near-map { display: flex !important; }

    /* 印章菜单：右侧竖排，通到底 */
    body.hj .panel-right { grid-column: 3; grid-row: 1 / span 2; width: auto; min-width: 0; flex: none; overflow-y: auto; scrollbar-width: none; }
    body.hj .panel-right .menu-btn { flex: 1 1 0; min-height: 0; }
    body.hj .menu-btn svg { width: 20px; height: 20px; margin-bottom: 4px; }
    body.hj .menu-text { font-size: 0.82em; }

    /* 面板：盖左栏的场景区（§7），地图栏和菜单照常可用 */
    body.hj .dialog-panel {
      position: fixed; z-index: 8;
      top: calc(var(--hj-top) + var(--hj-gap)); left: var(--hj-gap); right: auto;
      bottom: calc(var(--hj-status) + 2 * var(--hj-gap));
      width: var(--hj-left); max-width: none; max-height: none;
    }
    /* 舆图：盖场景区和地图栏（§5.3），菜单保留 */
    body.hj .map-panel {
      top: calc(var(--hj-top) + var(--hj-gap)); left: var(--hj-gap);
      right: calc(var(--hj-menu) + 2 * var(--hj-gap)); bottom: var(--hj-gap);
      width: auto; z-index: 9;
    }
    /* 斗法：盖地图栏和菜单，顶栏保留（§9） */
    body.hj .combat-panel { position: absolute; inset: var(--hj-gap); z-index: 20; }
  }

  /* 新手引导：旧版面不出印章 */
  .guide-seal { display: none; }

  @media (min-width: 1024px), (max-width: 1023px) and (max-height: 600px) and (orientation: landscape) {
    /* 引导卡：场景区左上角浮层，不盖字幕条；收起后只留“引”字印章，点了再展开（§6 r1 补充） */
    body.hj .story-panel { position: relative; }
    body.hj .story-panel > .guide-card {
      position: absolute; top: 12px; left: 12px; z-index: 6;
      width: min(440px, calc(100% - 24px)); margin: 0;
      max-height: calc(100% - var(--hj-subtitle) - 24px); overflow-y: auto;
    }
    body.hj .story-panel > .guide-card.folded { width: auto; padding: 0; border: 0; background: transparent; box-shadow: none; }
    body.hj .guide-card.folded > :not(.guide-seal) { display: none; }
    body.hj .guide-card.folded .guide-seal {
      display: flex; align-items: center; justify-content: center;
      width: 36px; height: 36px; padding: 0; cursor: pointer;
      border: 2px solid var(--hj-cinnabar); border-radius: 4px;
      background: rgba(163, 59, 43, 0.12); color: var(--hj-cinnabar);
      font-size: 18px; font-weight: 700; line-height: 1;
    }
    /* 主线提示条：画境里不单独显示，入口是状态条的差事行 */
    body.hj .main-hint { display: none !important; }
    body.hj button.hj-status-quest {
      display: block; max-width: 100%; padding: 0; border: 0; background: none;
      color: inherit; font: inherit; font-size: 0.82em; text-align: left; cursor: pointer;
    }
    body.hj button.hj-status-quest:hover { text-decoration: underline; }
    body.hj button.hj-status-quest:empty { display: none; }
  }

  @media (min-width: 1024px), (max-width: 1023px) and (max-height: 600px) and (orientation: landscape) {
    /* 引导卡（策划 11-01）：宽不超过场景区 30%，正文最多 3 行，多出的点“展开” */
    body.hj .story-panel > .guide-card { width: 30%; min-width: 240px; padding: 8px 10px; }
    body.hj .guide-card .guide-text {
      display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
      font-size: 0.9em; line-height: 1.6;
    }
    body.hj .guide-card.expanded .guide-text { display: block; -webkit-line-clamp: unset; overflow: visible; }
    body.hj .guide-more {
      display: block; margin: 2px 0 0 auto; padding: 0; border: 0; background: none; cursor: pointer;
      color: var(--hj-text-cyan); font-size: 0.8em;
    }
    body.hj .guide-more[hidden] { display: none; }
    body.hj .guide-card .guide-actions { margin-top: 6px; }
    body.hj .guide-card .guide-actions button { min-height: 28px; padding: 0 10px; font-size: 0.85em; }
  }
  .guide-more { display: none; }

  /* =========================================================
     R2 · 纸墨换肤（《标准-Web交互-v2.0-画境》§3，定稿 r1）
     01～07 的字面深色已整体换成纸墨令牌（一次性改写，见提交说明）；这一层负责：
       字体（霞鹜文楷，标题按钮 Medium、正文 Regular，不合成粗体）、正文字号随屏宽（1366 16px → 1920 18px）、
       界面件（R1 B1 定稿：纸底平铺、面板九宫、按钮九宫、印章菜单、三宝条）、字标去发光。
     不用金属边框、发光、渐变按钮（§3）。斗法舞台 F1 的重排在 R4，这里只换颜色和字体。
     ========================================================= */
  body.hj {
    --ui-font: "LXGW WenKai", "KaiTi", "STKaiti", "SimSun", serif;
    --story-font: "LXGW WenKai", "KaiTi", "STKaiti", "SimSun", serif;
    --wm-font: var(--ui-font);
    --wm-title-font: var(--ui-font);
    --wm-bone: var(--hj-ink);
    --wm-white: var(--hj-ink);
    --wm-teal: var(--hj-text-cyan);
    --wm-gold: var(--hj-text-gold);
    --wm-cinnabar: var(--hj-cinnabar);
    --wm-bronze: var(--hj-text-gold);
    font-synthesis: none;
    color: var(--hj-ink);
    background: var(--hj-paper) var(--ui-paper-page) repeat;
  }
  body.hj button, body.hj input, body.hj select, body.hj textarea { font-family: inherit; }
  /* 标题、印章、按钮用 Medium；原来写 600/700/900 的一律落到 Medium（只有 400、500 两档，不合成粗体） */
  body.hj h1, body.hj h2, body.hj h3, body.hj h4, body.hj button, body.hj .dialog-name { font-weight: 500; }
  body.hj #log { font-family: var(--story-font); }
  /* 数值：等宽数字 */
  body.hj .wallet, body.hj .hj-bar-text, body.hj .combat-vnum, body.hj .combat-chip .chip-value,
  body.hj .combat-log .log-val, body.hj .guide-step, body.hj .combat-head-title .combat-breath b {
    font-family: var(--ui-font); font-variant-numeric: tabular-nums;
  }

  /* 正文字号：01～07 的 px 字号都写成 calc(N * var(--hj-fs))，宽屏画境里按 14px → 正文换算（16/14 → 18/14） */
  @media (min-width: 1024px), (max-width: 1023px) and (max-height: 600px) and (orientation: landscape) {
    body.hj { --hj-fs: clamp(1.143px, calc(0.0258vw + 0.7907px), 1.286px); }
  }

  /* ---------- 字标：去发光、去金属点 ---------- */
  body.hj .fs-mark-ch--bone, body.hj .fs-mark-ch--cinnabar,
  body.hj .combat-brand .fs-mark-ch--bone, body.hj .combat-brand .fs-mark-ch--cinnabar { text-shadow: none; }
  body.hj .fs-mark-dot { background: var(--hj-cinnabar); box-shadow: none; }
  body.hj .fs-mark-dot::after { display: none; }
  body.hj #login .hero-rule { background: linear-gradient(90deg, transparent, var(--hj-gold-line) 20%, var(--hj-gold-line) 80%, transparent); }
  body.hj #login .hero-rule::after, body.hj #login .seal { box-shadow: none; }
  body.hj .combat-brand { border-right-color: var(--hj-gold-line); }
  body.hj .combat-head-title .combat-sep { color: var(--hj-gold-line); }
  body.hj .combat-head-title .combat-name { color: var(--hj-ink); }
  body.hj .combat-head-title .combat-breath { color: var(--hj-text-light); }
  body.hj .combat-head-title .combat-breath b { color: var(--hj-cinnabar); text-shadow: none; }
  body.hj .near-sep { text-shadow: none; }

  /* ---------- 顶栏：纸底 + 金线下沿 ---------- */
  body.hj .topbar {
    background: var(--hj-paper) var(--ui-paper-page) repeat;
    border-bottom: 1px solid var(--hj-gold-line); box-shadow: none;
  }
  body.hj .status { color: var(--hj-text-cyan); text-shadow: none; }

  /* ---------- 面板：细墨线框，和斗法同款（《方案-UI统一》） ---------- */
  body.hj .dialog-panel,
  body.hj .hj-status,
  body.hj .near-map,
  body.hj .combat-panel,
  body.hj #login .card {
    background: var(--hj-paper) var(--ui-paper-panel) repeat; border: 1px solid rgba(60, 47, 34, 0.62); border-radius: 0; border-image: none;
    box-shadow: inset 0 0 0 3px rgba(243, 235, 221, 0.9), inset 0 0 0 4px rgba(60, 47, 34, 0.18);
  }
  /* 场景区（R4 之前是文字流）：宣纸底，金线细框 */
  body.hj .story-panel {
    background: var(--hj-paper) var(--ui-paper-panel) repeat;
    border: 1px solid rgba(60, 47, 34, 0.62); border-radius: 0; box-shadow: none;
  }
  body.hj .dialog-panel { padding: 22px 26px 24px; animation: none; }
  body.hj .dialog-head, body.hj .map-panel .dialog-head { background: none; border-bottom: 1px solid rgba(184, 151, 90, 0.45); }
  body.hj .dialog-name { color: var(--hj-text-gold); letter-spacing: 0.1em; }

  /* ---------- 按钮分级（《方案-UI统一》）：次按钮纸底细框，和斗法同款；主按钮红毛笔；印章只给右侧栏 ---------- */
  body.hj button.quick-btn,
  body.hj .shop-actions button,
  body.hj .shop-tab,
  body.hj .guide-actions button,
  body.hj .help-restart,
  body.hj .quest-actions button,
  body.hj .dir-btn,
  body.hj .dialog-option,
  body.hj .system-actions button,
  body.hj .quest-go,
  body.hj .dialog-back,
  body.hj .dissolve-confirm,
  body.hj .tactics-plan,
  body.hj .social-phrase,
  body.hj .insight-action,
  body.hj form button[type="submit"] {
    background: rgba(250, 245, 234, 0.85); border: 1px solid rgba(60, 47, 34, 0.5); border-radius: 2px; border-image: none;
    box-shadow: none; color: var(--hj-ink); text-shadow: none;
  }
  body.hj button.quick-btn:hover:not([aria-disabled="true"]),
  body.hj .shop-actions button:hover:not(:disabled),
  body.hj .shop-tab:hover,
  body.hj .guide-actions button:hover,
  body.hj .help-restart:hover,
  body.hj .quest-actions button:hover:not(:disabled),
  body.hj .dir-btn:hover,
  body.hj .dialog-option:hover,
  body.hj .system-actions button:hover,
  body.hj .quest-go:hover,
  body.hj .dialog-back:hover,
  body.hj .dissolve-confirm:hover,
  body.hj .tactics-plan:hover,
  body.hj .social-phrase:hover,
  body.hj .insight-action:hover,
  body.hj form button[type="submit"]:hover {
    background: #F4EAD4; border-color: var(--hj-gold-line); color: var(--hj-ink);
  }
  body.hj button.quick-btn:active:not([aria-disabled="true"]),
  body.hj .shop-actions button:active:not(:disabled),
  body.hj .shop-tab.active,
  body.hj .guide-actions button:active,
  body.hj .quest-actions button:active:not(:disabled),
  body.hj .dir-btn:active {
    background: #E6DAC3; box-shadow: none; transform: none; color: var(--hj-ink);
  }
  body.hj button.quick-btn[aria-disabled="true"],
  body.hj .shop-actions button:disabled,
  body.hj .quest-actions button:disabled {
    opacity: 1; color: #A0968A; background: rgba(250, 245, 234, 0.5); border-color: rgba(60, 47, 34, 0.2);
  }
  body.hj button.quick-btn::after { display: none; }
  body.hj .dialog-option { padding: 10px 18px; }
  /* 主按钮：登录、引导的“知道了” */
  body.hj #login #submit,
  body.hj .guide-actions button:first-child {
    background: url(/assets/card/ui/btn.webp) center / 100% 100% no-repeat; border: 0; color: #fff; font-weight: 700; letter-spacing: 2px;
    text-shadow: 0 0 3px rgba(80, 0, 0, 0.8); padding-left: 18px; padding-right: 18px;
  }
  body.hj #login #submit:hover,
  body.hj .guide-actions button:first-child:hover { background: url(/assets/card/ui/btn.webp) center / 100% 100% no-repeat; border: 0; color: #fff; filter: brightness(1.08); }

  /* ---------- 面板内部（《方案-UI统一》第二批）：内框细墨线、小圆角，表单件朱色，人物面板三宝毛笔条、新头像 ---------- */
  body.hj { --ui-line: rgba(60, 47, 34, 0.38); --ui-line-2: rgba(60, 47, 34, 0.38); }
  body.hj .dialog-panel :is(div, section, article, ul, li, button, details) { border-radius: 2px; }
  body.hj input[type="range"], body.hj input[type="checkbox"], body.hj input[type="radio"] { accent-color: var(--hj-cinnabar); }
  body.hj .dialog-panel .vitals-segments {
    gap: 0; height: 16px; overflow: hidden; background: #CDBFA3;
    -webkit-mask: url(/assets/card/ui/brush.webp) center / 100% 100% no-repeat; mask: url(/assets/card/ui/brush.webp) center / 100% 100% no-repeat;
  }
  body.hj .dialog-panel .vitals-seg { flex: 1 1 0; height: 100%; border: 0; border-radius: 0; background: transparent; }
  body.hj .dialog-panel .vitals-seg.on.xing { background: var(--hj-xing); }
  body.hj .dialog-panel .vitals-seg.on.qi { background: var(--hj-qi); }
  body.hj .dialog-panel .vitals-seg.on.shen { background: var(--hj-shen); }
  body.hj .status-half > .hj-status-por {
    display: block; width: 100%; height: auto; filter: saturate(0.72); opacity: 0.92; mix-blend-mode: multiply;
    -webkit-mask-image: linear-gradient(#000 78%, transparent 100%); mask-image: linear-gradient(#000 78%, transparent 100%);
  }

  /* ---------- 印章菜单（§2：右侧竖排印章） ---------- */
  body.hj .menu-btn {
    background: var(--ui-seal-normal) center / contain no-repeat;
    border: 0; border-radius: 0; box-shadow: none; color: #FCF0E4;
  }
  body.hj .menu-btn:hover { background-image: var(--ui-seal-hover); color: #FCF0E4; transform: none; border: 0; }
  body.hj .menu-btn.active { background: var(--ui-seal-selected) center / contain no-repeat; color: #FCF0E4; border: 0; }
  body.hj .menu-btn.active::before { display: none; }
  body.hj .menu-btn.empty, body.hj .menu-btn.soon, body.hj .menu-btn[disabled] {
    background: var(--ui-seal-disabled) center / contain no-repeat; color: #F0ECE6; border: 0; opacity: 1;
  }
  body.hj .menu-btn.empty svg { stroke: currentColor; }
  body.hj .menu-btn[disabled]:hover { color: #F0ECE6; border: 0; }

  body.hj .hj-status-name { font-weight: 500; }
  body.hj button.hj-status-quest { color: var(--hj-text-gold); }
  body.hj .hj-status-extra { color: var(--hj-text-light); }

  /* ---------- 引导卡、提示：纸卡 ---------- */
  body.hj .guide-card {
    background: var(--hj-paper-deep); border: 1px solid var(--hj-gold-line); border-radius: 0; box-shadow: none;
  }
  body.hj .guide-title { color: var(--hj-text-gold); }
  body.hj .quick-toast, body.hj .say-popover {
    background: var(--hj-paper); border: 1px solid var(--hj-gold-line); color: var(--hj-ink); box-shadow: 0 6px 18px rgba(43, 38, 32, 0.14);
  }
  body.hj .say-title { color: var(--hj-text-gold); }

  /* ---------- 滚动条 ---------- */
  body.hj * { scrollbar-color: rgba(184, 151, 90, 0.6) transparent; }

  /* =========================================================
     R2 · 字幕条、场景区占位、纪事抽屉、输入浮层（《标准-Web交互-v2.0-画境》§4.3、§6、§8；方案 A）
     只在宽屏画境版面生效；窄屏与旧版面不显示这些件，#log 仍是主文字流。
     ========================================================= */
  .hj-scene, .hj-subtitle, .hj-chronicle { display: none; }

  @media (min-width: 1024px), (max-width: 1023px) and (max-height: 600px) and (orientation: landscape) {
    /* 场景区：子件全部绝对定位，叠在宣纸底上 */
    body.hj .story-panel { display: block; padding: 0; }
    body.hj .story-panel > .exits { display: none; }

    /* ---------- 场景区占位：当前这间的人物牌、参悟（R4 换成场景画 + NPC 立像） ---------- */
    body.hj .hj-scene {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      position: absolute; left: 0; right: 0; top: 0; bottom: var(--hj-subtitle);
      padding: 64px 32px 16px; overflow-y: auto;
    }
    body.hj .hj-scene .room { margin: 0; padding: 0; border: 0; background: none; text-align: center; }
    body.hj .hj-scene .room > h2, body.hj .hj-scene .room > p, body.hj .hj-scene .room > .tags { display: none; }
    body.hj .hj-scene .npc-list { justify-content: center; }
    body.hj .hj-scene .npc-lead { display: none; }
    body.hj .story-panel > .interact-bar {
      position: absolute; left: 0; right: 0; bottom: calc(var(--hj-subtitle) + 8px);
      justify-content: center; margin: 0 auto; padding: 0 24px;
    }
    body.hj .story-panel > .well-hud { position: absolute; top: 12px; right: 12px; width: min(360px, 40%); margin: 0; z-index: 6; }

    /* ---------- 字幕条（方案 A：1920 高 250 / 1366 高 224；描述 2 行、系统行 2 行） ---------- */
    body.hj .hj-subtitle {
      display: flex; flex-direction: column; gap: 4px;
      position: absolute; left: 0; right: 0; bottom: 0; height: var(--hj-subtitle); z-index: 5;
      padding: 18px 26px 16px; overflow: hidden;
      border: 0 solid transparent;
      border-image: var(--ui-panel-subtitle) 24 24 24 24 fill / 24px 24px 24px 24px stretch;
      color: var(--hj-ink); line-height: 1.6;
    }
    body.hj .hj-sub-head { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; min-width: 0; }
    body.hj .hj-sub-room { margin: 0; font-size: 1.15em; font-weight: 500; color: var(--hj-ink); letter-spacing: 0.08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    body.hj .hj-sub-landmark {
      flex: 0 0 auto; padding: 1px 5px; border: 1.5px solid var(--hj-cinnabar); border-radius: 2px;
      color: var(--hj-cinnabar); font-size: 0.72em; line-height: 1.3; letter-spacing: 0.1em;
    }
    body.hj .hj-sub-chron {
      margin-left: auto; flex: 0 0 auto; padding: 2px 12px; cursor: pointer;
      background: none; border: 1px solid var(--hj-gold-line); border-radius: 2px;
      color: var(--hj-text-gold); font-size: 0.85em;
    }
    body.hj .hj-sub-chron:hover, body.hj.chronicle-open .hj-sub-chron { background: rgba(184, 151, 90, 0.16); }
    body.hj .hj-sub-desc {
      flex: 0 0 auto; margin: 0; color: var(--hj-text-light);
      display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
    }
    body.hj .hj-sub-more {
      flex: 0 0 auto; align-self: flex-end; margin-top: -4px; padding: 0; border: 0; background: none; cursor: pointer;
      color: var(--hj-text-cyan); font-size: 0.82em;
    }
    body.hj .hj-sub-more[hidden] { display: none; }
    body.hj .hj-sub-lines { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end; min-height: 0; overflow: hidden; }
    body.hj .hj-sub-line { margin: 0; font-size: 0.9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    body.hj .hj-sub-line.system { color: var(--hj-text-cyan); }
    body.hj .hj-sub-line.quest { color: var(--hj-text-gold); }
    body.hj .hj-sub-line.danger { color: var(--hj-cinnabar); }
    body.hj .hj-sub-line.say { color: var(--hj-ink); }
    body.hj .hj-sub-exits { flex: 0 0 auto; display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; scrollbar-width: none; }
    body.hj .hj-sub-exit {
      flex: 0 0 auto; height: 34px; padding: 0 16px 0 18px; cursor: pointer; white-space: nowrap; line-height: 34px;
      background: none; border: 0 solid transparent;
      border-image: var(--ui-tag-exit-land) 14 10 10 10 fill / 14px 10px 10px 10px stretch;
      color: #967346; font-size: 0.85em;
    }
    body.hj .hj-sub-exit:hover { filter: brightness(0.96); }

    /* ---------- 纪事抽屉：从左栏右侧滑出，宽约 40%，不盖地图栏 ---------- */
    body.hj .hj-chronicle {
      display: flex; flex-direction: column;
      position: absolute; top: 0; right: 0; bottom: 0; width: max(40%, 380px); z-index: 7;
      background: var(--hj-paper) var(--ui-paper-panel) repeat;
      border-left: 1px solid var(--hj-gold-line); box-shadow: -6px 0 18px rgba(43, 38, 32, 0.12);
      transform: translateX(100%); visibility: hidden;
      transition: transform 0.22s ease, visibility 0s linear 0.22s;
    }
    body.hj.chronicle-open .hj-chronicle { transform: none; visibility: visible; transition: transform 0.22s ease; }
    body.hj .hj-chron-head {
      flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
      padding: 10px 16px; border-bottom: 1px solid rgba(184, 151, 90, 0.45);
    }
    body.hj .hj-chron-title { color: var(--hj-text-gold); font-weight: 500; letter-spacing: 0.2em; }
    body.hj .hj-chron-close { padding: 0 6px; border: 0; background: none; cursor: pointer; color: var(--hj-ink-light); font-size: 1.2em; }
    body.hj .hj-chron-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
    body.hj .hj-chron-body > #log { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px 16px; margin: 0; }
    /* 离开的房间块：纯文本 */
    body.hj #log .room.frozen { opacity: 0.85; }
    body.hj #log .frozen.entity-name, body.hj #log .frozen.action-tag, body.hj #log .frozen.insight-action {
      cursor: default; border-color: transparent; background: none; color: inherit; box-shadow: none;
    }

    /* ---------- 输入浮层：交流、指令都在字幕条上方弹出（§6） ---------- */
    body.hj .story-panel > .composer {
      position: absolute; left: 0; right: 0; bottom: calc(var(--hj-subtitle) + 8px); height: 0; z-index: 8;
      padding: 0; border: 0; background: none;
    }
    body.hj .composer #cmdForm { display: none; }
    body.hj.cmd-open .composer #cmdForm {
      display: flex; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
      width: min(560px, calc(100% - 48px)); margin: 0;
      background: var(--hj-paper); border: 1px solid var(--hj-gold-line); box-shadow: 0 6px 18px rgba(43, 38, 32, 0.14);
    }
    body.hj .composer #cmd { flex: 1 1 auto; background: none; color: var(--hj-ink); border: 0; padding: 10px 14px; font-size: 1em; outline: none; }
    body.hj .composer #cmdForm button { border: 0; border-left: 1px solid var(--hj-gold-line); background: none; color: var(--hj-text-gold); padding: 0 18px; cursor: pointer; }
    body.hj .say-popover { bottom: 10px; }
    body.hj .quick-toast { bottom: 0; }
  }

  @media (min-width: 1024px), (max-width: 1023px) and (max-height: 600px) and (orientation: landscape) {
    /* 赶路中（R3-a）：画面停在出发那间，出口签与场景里的人物牌、参悟都不能点，等到站再换 */
    body.hj.traveling .hj-sub-exit,
    body.hj.traveling .hj-scene button,
    body.hj.traveling .story-panel > .interact-bar button { pointer-events: none; opacity: 0.45; }
  }

  /* ---------- 场景画（R3-b，§4.1）：铺满场景区，压在最底层；人物牌放进槽位里的 NPC 站位带 ---------- */
  .hj-scene-art { display: none; }
  @media (min-width: 1024px), (max-width: 1023px) and (max-height: 600px) and (orientation: landscape) {
    body.hj .hj-scene-art {
      display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
      opacity: 0; transition: opacity 0.2s ease; pointer-events: none;
    }
    body.hj .hj-scene[data-band] {
      left: var(--band-x); top: var(--band-y); width: var(--band-w); height: var(--band-h); right: auto; bottom: auto;
      padding: 0; justify-content: flex-end; z-index: 1; overflow: visible;
    }
    /* 画上的人物牌：纸签底，读得清 */
    body.hj .hj-scene .entity-block { background: rgba(243, 235, 221, 0.92); border: 1px solid rgba(184, 151, 90, 0.6); }

    /* ---------- NPC 站在场景里（大半身）：点人对话，名牌压在腰下，功能按钮常驻名牌下（§12） ---------- */
    body.hj .hj-scene .npc-list[data-n] {
      --fig-k: 0.74; --fig-h: calc((var(--band-y, 80px) + var(--band-h, 300px) - 74px) * var(--fig-k));
      flex-wrap: nowrap; align-items: flex-end; gap: 0 clamp(8px, 2vw, 44px); margin: 0; width: max-content; pointer-events: none;
    }
    body.hj .hj-scene .npc-list[data-n="3"] { --fig-k: 0.66; }
    body.hj .hj-scene .npc-list[data-n="4"] { --fig-k: 0.56; gap: 0 2px; }
    body.hj .hj-scene .npc-list[data-n="5"] { --fig-k: 0.5; gap: 0 2px; }
    body.hj .hj-scene .npc-list[data-n="6"], body.hj .hj-scene .npc-list[data-n="7"] { --fig-k: 0.44; gap: 0 2px; }
    body.hj .hj-scene .entity-block.has-fig {
      display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0;
      background: none; border: 0; pointer-events: none;
    }
    body.hj .hj-scene .entity-block.has-fig:hover { background: none; }
    body.hj .hj-scene .npc-fig {
      display: block; height: var(--fig-h); width: auto; max-width: none; margin-bottom: -18px; user-select: none;
      filter: drop-shadow(0 2px 6px rgba(43, 38, 32, 0.28)); transition: filter 0.15s ease;
    }
    body.hj .hj-scene .npc-fig.can-talk { pointer-events: auto; cursor: pointer; }
    body.hj .hj-scene .npc-fig.can-talk:hover { filter: drop-shadow(0 0 8px rgba(214, 170, 90, 0.9)); }
    body.hj .hj-scene .has-fig .entity-info {
      position: relative; display: flex; align-items: baseline; gap: 6px; padding: 2px 10px; white-space: nowrap; pointer-events: auto;
      background: rgba(243, 235, 221, 0.95); border: 1px solid rgba(184, 151, 90, 0.75); border-radius: 3px;
    }
    body.hj .hj-scene .npc-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 220px; pointer-events: auto; }
    body.hj .hj-scene .npc-actions .action-tag { margin: 0; padding: 2px 9px; border: 0; border-radius: 3px; color: #f6efe0; background: #6f6556; }
    body.hj .hj-scene .npc-actions .action-tag.fight { background: #a8322a; }
    body.hj .hj-scene .npc-actions .action-tag.shop { background: #a07a2e; }
    body.hj .hj-scene .npc-actions .action-tag.teach { background: #2f6f80; }
    body.hj .hj-scene .npc-actions .action-tag.craft { background: #7a5a2f; }
    body.hj .hj-scene .npc-actions .action-tag.repair { background: #56677a; }
    body.hj .hj-scene .npc-actions .action-tag:hover { filter: brightness(1.12); }
  }

  /* ---------- 方位盘（R3-c，§5.2）：近景框右下角常驻，盘底 + 八方 + 上下入出 ---------- */
  .hj-compass { display: none; }
  @media (min-width: 1024px), (max-width: 1023px) and (max-height: 600px) and (orientation: landscape) {
    body.hj .near-map { position: relative; }
    body.hj .near-map .near-dirs { display: none !important; }
    body.hj .hj-compass {
      --c: clamp(132px, 8.6vw, 168px);
      display: block; position: absolute; right: 14px; bottom: 14px; width: var(--c); height: var(--c); z-index: 4;
      background: var(--ui-compass-base) center / contain no-repeat;
    }
    body.hj .hj-compass-key {
      position: absolute; padding: 0; border: 0; cursor: pointer; border-radius: 50%;
      display: flex; align-items: center; justify-content: center; line-height: 1;
      font-family: var(--ui-font); font-weight: 500;
    }
    body.hj .hj-compass-key.dir {
      width: 27%; height: 27%; font-size: calc(var(--c) * 0.085);
      background: var(--ui-compass-dir-dim) center / contain no-repeat; color: #968773;
    }
    body.hj .hj-compass-key.dir.lit { background-image: var(--ui-compass-dir-lit); color: #FCF0E4; }
    body.hj .hj-compass-key.dir:active { background-image: var(--ui-compass-dir-pressed); color: #F0D8C8; }
    body.hj .hj-compass-key.vert {
      width: 18%; height: 18%; font-size: calc(var(--c) * 0.075);
      background: var(--ui-compass-vert-dim) center / contain no-repeat; color: #968773;
    }
    body.hj .hj-compass-key.vert.lit { background-image: var(--ui-compass-vert-lit); color: #FCF0E4; }
    body.hj .hj-compass-key.vert:active { background-image: var(--ui-compass-vert-pressed); color: #F0D8C8; }
    /* 只有坡路：键角坡标；同方向两种路：键角小点，点了弹签 */
    body.hj .hj-compass-key[data-slope="up"]::after, body.hj .hj-compass-key[data-slope="down"]::after {
      position: absolute; right: -2px; top: -4px; font-size: calc(var(--c) * 0.07); color: var(--hj-cinnabar);
    }
    body.hj .hj-compass-key[data-slope="up"]::after { content: "↑"; }
    body.hj .hj-compass-key[data-slope="down"]::after { content: "↓"; }
    body.hj .hj-compass-key.multi::before {
      content: ""; position: absolute; right: 2px; bottom: 2px; width: 6px; height: 6px; border-radius: 50%; background: var(--hj-text-gold);
    }
    body.hj .hj-compass-pick {
      position: absolute; transform: translate(-50%, calc(-100% - 6px)); z-index: 5;
      display: flex; flex-direction: column; gap: 4px; padding: 6px;
      background: var(--hj-paper); border: 1px solid var(--hj-gold-line); box-shadow: 0 4px 12px rgba(43, 38, 32, 0.14);
    }
    body.hj .hj-compass-tag {
      padding: 4px 10px; white-space: nowrap; cursor: pointer; font-size: 0.85em;
      background: none; border: 1px solid rgba(184, 151, 90, 0.6); color: var(--hj-ink);
    }
    body.hj .hj-compass-tag:hover { background: rgba(184, 151, 90, 0.16); }
    /* 赶路中整盘置灰 */
    body.hj.traveling .hj-compass { opacity: 0.5; pointer-events: none; }
    body.hj .hj-compass .k-north { left: 36.50%; top: -0.50%; }
    body.hj .hj-compass .k-northeast { left: 62.66%; top: 10.34%; }
    body.hj .hj-compass .k-east { left: 73.50%; top: 36.50%; }
    body.hj .hj-compass .k-southeast { left: 62.66%; top: 62.66%; }
    body.hj .hj-compass .k-south { left: 36.50%; top: 73.50%; }
    body.hj .hj-compass .k-southwest { left: 10.34%; top: 62.66%; }
    body.hj .hj-compass .k-west { left: -0.50%; top: 36.50%; }
    body.hj .hj-compass .k-northwest { left: 10.34%; top: 10.34%; }
    body.hj .hj-compass .k-up { left: 41.00%; top: 29.50%; }
    body.hj .hj-compass .k-down { left: 41.00%; top: 52.50%; }
    body.hj .hj-compass .k-enter { left: 29.50%; top: 41.00%; }
    body.hj .hj-compass .k-out { left: 52.50%; top: 41.00%; }
  }

  /* =========================================================
     字幕条缩成一窄条（策划 11-01，用户反馈“文字框太大，遮挡了图片”）：
     只留房间名 + 地标印 + “述” + 纪事；描述、系统行、出口签都收进纪事；移动靠近景与方位盘。
     ========================================================= */
  @media (min-width: 1024px), (max-width: 1023px) and (max-height: 600px) and (orientation: landscape) {
    body.hj .hj-subtitle {
      flex-direction: row; align-items: center; gap: 10px;
      padding: 0 16px; overflow: visible; line-height: 1.3;
      background: rgba(243, 235, 221, 0.82); border: 0; border-top: 1px solid rgba(184, 151, 90, 0.7);
      border-image: none;
    }
    body.hj .hj-sub-head { flex: 1 1 auto; }
    body.hj .hj-sub-room { font-size: 1.05em; }
    body.hj .hj-sub-exits, body.hj .hj-sub-more { display: none !important; }
    /* 系统行不显示，只留给读屏 */
    body.hj .hj-sub-lines {
      position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
      clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
    body.hj .hj-sub-shu {
      flex: 0 0 auto; width: 24px; height: 24px; padding: 0; cursor: pointer; line-height: 22px;
      border: 1.5px solid var(--hj-text-gold); border-radius: 3px; background: none;
      color: var(--hj-text-gold); font-size: 0.8em;
    }
    body.hj.desc-open .hj-sub-shu { background: var(--hj-text-gold); color: var(--hj-paper); }
    body.hj .hj-sub-travel { color: var(--hj-text-cyan); font-size: 0.85em; white-space: nowrap; }
    /* 点“述”：描述浮在画面上，贴着字幕条上沿 */
    body.hj .hj-sub-desc { display: none; }
    body.hj.desc-open .hj-sub-desc {
      display: block; -webkit-line-clamp: unset; line-clamp: unset;
      position: absolute; left: 16px; right: 16px; bottom: calc(100% + 8px); max-height: 45vh; overflow-y: auto;
      padding: 12px 16px; background: rgba(243, 235, 221, 0.94); border: 1px solid var(--hj-gold-line);
      color: var(--hj-ink); line-height: 1.7; box-shadow: 0 4px 14px rgba(43, 38, 32, 0.12);
    }
  }

  /* 右栏印章上的提示点（策划 11-01）：朱色实心、放大一倍、淡金描边，出现时轻闪两下再常亮 */
  @keyframes hj-dot-blink { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0.2; } }
  body.hj .menu-btn .menu-dot {
    top: 3px; right: 3px; width: 14px; height: 14px; z-index: 1;
    background: var(--hj-cinnabar); border: 2px solid rgba(201, 162, 75, 0.85); box-sizing: border-box;
    box-shadow: none; animation: hj-dot-blink 1.2s ease-in-out 1;
  }

  /* =========================================================
     纪事改为覆盖整个场景区（用户 11-01）：字幕条以上整块，恢复原文字框样式；能往上翻，翻上去时新消息不跳回底部，
     底部给“回到最新”。旧房间块是纯文本，只有当前这间可点。再点纪事或按 Esc 收起。
     ========================================================= */
  @media (min-width: 1024px), (max-width: 1023px) and (max-height: 600px) and (orientation: landscape) {
    body.hj .hj-sub-shu { display: none; }
    body.hj .hj-chronicle {
      top: 0; left: 0; right: 0; bottom: var(--hj-subtitle); width: auto; z-index: 7;
      border-left: 0; box-shadow: none; transform: none;
      visibility: hidden; opacity: 0; transition: opacity 0.15s ease, visibility 0s linear 0.15s;
    }
    body.hj.chronicle-open .hj-chronicle { visibility: visible; opacity: 1; transition: opacity 0.15s ease; }
    body.hj .hj-chron-head { padding: 8px 18px; }
    body.hj .hj-chron-body > #log { padding: 12px 24px 20px; overscroll-behavior: contain; }
    body.hj .hj-chron-body > #log .room { max-width: 980px; }
    body.hj .hj-chron-latest {
      position: absolute; right: 22px; bottom: 14px; z-index: 1; padding: 4px 14px; cursor: pointer;
      background: var(--hj-paper); border: 1px solid var(--hj-gold-line); color: var(--hj-text-gold); font-size: 0.85em;
      box-shadow: 0 2px 8px rgba(43, 38, 32, 0.12);
    }
    body.hj .hj-chron-latest[hidden] { display: none; }
  }

  /* 近景取景窗口外的房（R3-d）：只留一个淡点，不标名、不能点 */
  .near-map .lm-far { fill: rgba(107, 98, 87, 0.45); stroke: none; pointer-events: none; }

  /* ---------- R4 非斗法：对话半身、人物面板半身（规范 §7.1、§7.3） ---------- */
  .dialog-half, .status-half { display: none; }
  .dialog-title { color: var(--hj-ink-light); font-size: 0.85em; margin-left: 8px; }
  @media (min-width: 1024px), (max-width: 1023px) and (max-height: 600px) and (orientation: landscape) {
    body.hj .dialog-panel.with-half { padding-left: calc(min(30%, 280px) + 32px); }
    body.hj .dialog-panel.with-half .dialog-half {
      display: flex; align-items: flex-end; justify-content: center;
      position: absolute; left: 16px; bottom: 0; top: 16px; width: min(30%, 280px); overflow: hidden; pointer-events: none;
    }
    body.hj .dialog-half > .dialog-half-img { display: block; flex: none; height: 100%; width: auto; max-width: none; }
    body.hj .dialog-half > .portrait { width: 100% !important; height: auto !important; max-height: 100%; object-fit: contain; object-position: bottom; border: 0; }
    body.hj .dialog-panel.with-half .dialog-head { margin-top: 8px; }
    body.hj .status-half { display: block; float: left; width: 200px; margin: 0 22px 12px 0; }
    body.hj .status-half > .portrait { width: 100% !important; height: auto !important; border: 0; }
    body.hj .status-half > .portrait--block { height: 260px !important; }
  }

  /* ---------- 近景整图模式（R3-d）：底图 + 纸签地名 + 赶路线；镜头平移有过渡 ---------- */
  .near-map .plan-svg { display: block; width: 100%; height: 100%; background: var(--hj-paper); }
  .near-map .plan-cam { transition: transform 0.35s ease; }
  .near-map .plan-tag { cursor: pointer; }
  .near-map .plan-tag rect { fill: rgba(243, 235, 221, 0.9); stroke: rgba(184, 151, 90, 0.85); stroke-width: 1; }
  .near-map .plan-tag text { fill: var(--hj-ink); font-family: var(--ui-font); }
  .near-map .plan-tag:hover rect, .near-map .plan-tag:focus rect { fill: #FFF8EA; stroke: var(--hj-text-gold); }
  .near-map .plan-tag.current rect { fill: var(--hj-cinnabar); stroke: var(--hj-cinnabar); }
  .near-map .plan-tag.current text { fill: var(--hj-paper); }
  .near-map .plan-tag.target rect { stroke: var(--hj-cinnabar); stroke-width: 2; }
  .near-map .plan-route { fill: none; stroke: var(--hj-cinnabar); stroke-width: 3; stroke-dasharray: 6 5; stroke-linecap: round; opacity: 0.85; }

  /* ---------- 三级舆图（R3，§5.3） ---------- */
  .atlas-bar, .atlas-stage { display: none; }
  @media (min-width: 1024px), (max-width: 1023px) and (max-height: 600px) and (orientation: landscape) {
    body.hj .atlas-bar { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
    body.hj .atlas-nav { flex: 1 1 auto; color: var(--hj-ink-light); }
    body.hj .atlas-crumb { padding: 0 2px; border: 0; background: none; cursor: pointer; color: var(--hj-text-cyan); font: inherit; }
    body.hj .atlas-crumb.current { color: var(--hj-ink); cursor: default; font-weight: 500; }
    body.hj .atlas-up { padding: 2px 12px; border: 1px solid var(--hj-gold-line); background: none; color: var(--hj-text-gold); cursor: pointer; }
    body.hj .map-panel.atlas-on .map-tabs, body.hj .map-panel.atlas-on .map-anchors, body.hj .map-panel.atlas-on .map-stage { display: none !important; }
    body.hj .map-panel.atlas-on .atlas-stage { display: block; flex: 1 1 auto; min-height: 0; overflow: hidden; }
    body.hj .atlas-svg { width: 100%; height: 100%; display: block; }
    body.hj .atlas-spot { cursor: pointer; }
    body.hj .atlas-band { fill: transparent; cursor: zoom-in; }
    body.hj .atlas-band:hover { fill: rgba(184, 151, 90, 0.08); }
    body.hj .atlas-band.closed { cursor: not-allowed; }
  }
  @media (min-width: 1024px), (max-width: 1023px) and (max-height: 600px) and (orientation: landscape) { body.hj .map-panel.atlas-on .map-hint { visibility: hidden; } }

  /* ---------- 舆图地名（用户 11-01：字太小）：霞鹜文楷偏中字重、纸色描边衬底；让位隐藏的悬停再显示 ---------- */
  @media (min-width: 1024px), (max-width: 1023px) and (max-height: 600px) and (orientation: landscape) {
    body.hj .map-panel .lm-label {
      font-family: var(--ui-font); font-weight: 500;
      paint-order: stroke; stroke: rgba(243, 235, 221, 0.95); stroke-width: 3px; stroke-linejoin: round;
    }
    body.hj .map-panel .lm-minor > rect, body.hj .map-panel .lm-minor > text { opacity: 0; transition: opacity 0.12s; }
    body.hj .map-panel .lm-minor:hover > rect, body.hj .map-panel .lm-minor:hover > text,
    body.hj .map-panel .lm-minor:focus > rect, body.hj .map-panel .lm-minor:focus > text { opacity: 1; }
    body.hj .map-panel .lm-minor-dot { fill: var(--hj-text-cyan); }
    body.hj .map-panel .lm-minor:hover .lm-minor-dot { opacity: 0; }
  }
  @media (min-width: 1024px), (max-width: 1023px) and (max-height: 600px) and (orientation: landscape) {
    body.hj .atlas-label rect { fill: rgba(243, 235, 221, 0.92); stroke: rgba(184, 151, 90, 0.7); stroke-width: 0; }
    body.hj .atlas-label text { fill: var(--hj-ink); font-family: var(--ui-font); font-weight: 500; paint-order: stroke; stroke: rgba(243, 235, 221, 0.95); }
    body.hj .atlas-label.current rect { fill: var(--hj-cinnabar); }
    body.hj .atlas-label.current text { fill: var(--hj-paper); stroke: none; }
    body.hj .atlas-label.minor { opacity: 0; transition: opacity 0.12s; }
    body.hj .atlas-spot:hover .atlas-label.minor, body.hj .atlas-spot:focus .atlas-label.minor { opacity: 1; }
    body.hj .atlas-spot:hover .atlas-label rect { fill: #FFF8EA; }
  }
  @media (min-width: 1024px), (max-width: 1023px) and (max-height: 600px) and (orientation: landscape) {
    body.hj .atlas-dot { fill: var(--hj-cinnabar); stroke: rgba(243, 235, 221, 0.95); stroke-width: 0.6; }
    /* 地标朱点（用户 11-01“红点不见了”，改回朱色）；出口深朱点加纸色描边、深朱字（不加箭头） */
    body.hj .atlas-spot.landmark .atlas-dot { fill: var(--hj-cinnabar); }
    body.hj .atlas-spot.exit .atlas-dot { fill: #6E1F14; stroke: var(--hj-paper); stroke-width: 1.5; }
    body.hj .atlas-label.exit text { fill: #6E1F14; }
    body.hj .atlas-spot.area .atlas-dot { fill: var(--hj-cinnabar); } /* 三界、人界的区域点也用朱红（用户 11-01） */
  }

  /* ---------- 近景接口签（用户 11-01）：跨图 / 窗口外的出口，比地名淡一档；当前房的可点走一步 ---------- */
  .near-map .plan-exit { cursor: pointer; opacity: 0.85; }
  .near-map .plan-exit rect { fill: rgba(243, 235, 221, 0.85); stroke: rgba(46, 85, 89, 0.7); stroke-dasharray: 3 2; stroke-width: 1; }
  .near-map .plan-exit text { fill: var(--hj-text-cyan); font-family: var(--ui-font); }
  .near-map .plan-exit.here { opacity: 1; }
  .near-map .plan-exit:hover rect { fill: #FFF8EA; stroke: var(--hj-text-cyan); stroke-dasharray: none; }
  @media (min-width: 1024px), (max-width: 1023px) and (max-height: 600px) and (orientation: landscape) {
    /* 鸟瞰舆图按面板等比放到最大（以高为准）：收紧面板内边距、去掉说明行，让出高度 */
    body.hj .map-panel.atlas-on { padding: 10px 14px 10px; }
    body.hj .map-panel.atlas-on .map-hint { display: none; }
    body.hj .map-panel.atlas-on .dialog-head { margin-bottom: 0; padding-bottom: 4px; }
    body.hj .map-panel.atlas-on .atlas-bar { padding: 2px 0 4px; }
  }

  /* ---------- 舆图悬停改轻（标准-舆图鸟瞰标注 §4，用户 11-01：“悬停那个大圈有点突兀”） ---------- */
  @media (min-width: 1024px), (max-width: 1023px) and (max-height: 600px) and (orientation: landscape) {
    body.hj .atlas-hit { fill: transparent; stroke: none; }
    body.hj .atlas-dot { transition: transform 0.12s, fill 0.12s; transform-box: fill-box; transform-origin: center; }
    body.hj .atlas-spot:hover .atlas-dot, body.hj .atlas-spot:focus .atlas-dot { transform: scale(1.2); fill: #7E2A1E; }
    body.hj .atlas-spot.exit:hover .atlas-dot, body.hj .atlas-spot.exit:focus .atlas-dot { fill: #4A140C; }
    body.hj .atlas-under { stroke: rgba(43, 38, 32, 0.55); opacity: 0; transition: opacity 0.12s; }
    body.hj .atlas-spot:hover .atlas-under, body.hj .atlas-spot:focus .atlas-under { opacity: 1; }
    body.hj .atlas-ring { fill: none; stroke: var(--hj-cinnabar); }
    body.hj .atlas-man { fill: none; stroke: var(--hj-cinnabar); stroke-linecap: round; }
    body.hj .atlas-spot.current .atlas-dot { fill: var(--hj-cinnabar); }
    body.hj .atlas-tip {
      position: absolute; transform: translate(-50%, -100%); pointer-events: none; z-index: 3; white-space: nowrap;
      padding: 2px 8px; font-size: 13px; color: var(--hj-ink); background: rgba(243, 235, 221, 0.96);
      border: 1px solid rgba(184, 151, 90, 0.8); box-shadow: 0 2px 6px rgba(43, 38, 32, 0.12);
    }
    body.hj .atlas-tip[hidden] { display: none; }
    /* 程序舆图与近景整图同样改轻：悬停不出大框，只加深 */
    body.hj .map-panel .lm-node:hover > rect { stroke-width: 1.5; }
    .near-map .plan-tag:hover rect { fill: rgba(243, 235, 221, 0.95); stroke: var(--hj-text-gold); }
  }

/* 舆图“● 名字”与所在印章（标准 §8 第 4、5 条；策划 11-01 所在标记） */
@media (min-width: 1024px), (max-width: 1023px) and (max-height: 600px) and (orientation: landscape) {
  body.hj .dl { cursor: pointer; outline: none; }
  body.hj .dl-hit { fill: transparent; }
  body.hj .dl-dot { fill: var(--hj-cinnabar); stroke: rgba(243, 235, 221, 0.95); stroke-width: 1; transition: transform 0.12s; transform-box: fill-box; transform-origin: center; }
  body.hj .dl.exit .dl-dot { fill: #6E1F14; stroke: var(--hj-paper); stroke-width: 1.5; }
  body.hj .dl:hover .dl-dot, body.hj .dl:focus .dl-dot { fill: #7E2A1E; }
  body.hj .dl.exit:hover .dl-dot, body.hj .dl.exit:focus .dl-dot { fill: #4A140C; }
  body.hj .dl.hidden .dl-dot { fill: var(--hj-ink-light); }
  body.hj .dl:hover .dl-dot, body.hj .dl:focus .dl-dot { transform: scale(1.2); }
  body.hj .dl-label rect { fill: rgba(243, 235, 221, 0.86); stroke: none; }
  body.hj .dl-label text { fill: var(--hj-ink); font-family: var(--ui-font); paint-order: stroke; stroke: rgba(243, 235, 221, 0.9); stroke-width: 2.5px; }
  body.hj .dl.landmark .dl-label text { font-weight: 600; }
  body.hj .dl.exit .dl-label text { fill: #6E1F14; }
  body.hj .dl.current .dl-label text { fill: var(--hj-cinnabar); font-weight: 600; }
  body.hj .dl:hover .dl-label text { text-decoration: underline; text-decoration-color: rgba(43, 38, 32, 0.55); }
  body.hj .dl-minor .dl-label { opacity: 0; transition: opacity 0.12s; }
  body.hj .dl-minor:hover .dl-label, body.hj .dl-minor:focus .dl-label { opacity: 1; }
  body.hj .dl-ring { fill: none; stroke: var(--hj-cinnabar); stroke-width: 1.6; }
  body.hj .dl.current .dl-ring { display: none; }
  body.hj .dl-tag rect { fill: rgba(243, 235, 221, 0.9); stroke: rgba(184, 151, 90, 0.7); stroke-dasharray: 3 2; }
  body.hj .dl-tag text { fill: var(--hj-text-cyan); font-family: var(--ui-font); }
  body.hj .dl-tag { cursor: pointer; }
  body.hj .dl-tag:hover rect { fill: #FFF8EA; }
  body.hj .seal-here { pointer-events: none; }
  body.hj .seal-body { fill: var(--hj-cinnabar); stroke: var(--hj-paper); stroke-width: 2; paint-order: stroke; }
  body.hj .seal-text { fill: #fff; font-family: var(--ui-font); font-weight: 600; }
  body.hj .seal-glow { fill: rgba(163, 59, 43, 0.35); opacity: 0; animation: seal-glow 1s ease-out 1; }
  @keyframes seal-glow { 0% { opacity: 1; transform: scale(0.6); } 100% { opacity: 0; transform: scale(1.4); } }
  body.hj .seal-glow { transform-box: fill-box; transform-origin: center; }
}

/* 区域舆图方向字（标准 §9）：淡一档、不能点、不加箭头 */
@media (min-width: 1024px), (max-width: 1023px) and (max-height: 600px) and (orientation: landscape) {
  body.hj .dl-dir { fill: var(--hj-ink-light); font-family: var(--ui-font); pointer-events: none; paint-order: stroke; stroke: rgba(243, 235, 221, 0.92); stroke-width: 3px; letter-spacing: 0.05em; }
}

/* ---------- 舆图左右两栏（用户 11-01：“把这堆放到左边或右边，让舆图有更多显示空间”；后改为侧栏在右） ----------
   右侧窄栏：标题 / 片名、层级导航与上一级、去处、本片地点、操作提示；右侧整块给图，从面板顶到底。三界、人界、区域三级同一版面。 */
.map-places, .map-foot { display: none; }
@media (min-width: 1024px), (max-width: 1023px) and (max-height: 600px) and (orientation: landscape) {
  body.hj .map-panel {
    display: grid; grid-template-columns: minmax(0, 1fr) 212px;
    grid-template-rows: auto auto auto auto minmax(0, 1fr) auto; column-gap: 14px; padding: 12px 14px;
  }
  body.hj .map-panel > * { grid-column: 2; min-width: 0; }
  body.hj .map-panel > .dialog-head { grid-row: 1; flex-wrap: wrap; row-gap: 2px; margin-bottom: 4px; padding-bottom: 6px; }
  body.hj .map-panel > .dialog-head .map-hint { order: 3; flex: 1 0 100%; font-size: calc(15 * var(--hj-fs, 1px)); color: var(--hj-ink); letter-spacing: 0.06em; line-height: 1.5; }
  body.hj .map-panel.atlas-on > .dialog-head .map-hint { display: none; }
  body.hj .map-panel > .atlas-bar { grid-row: 2; flex-direction: column; align-items: flex-start; gap: 6px; padding: 4px 0 8px; }
  body.hj .map-panel > .atlas-bar .atlas-nav { line-height: 1.6; }
  body.hj .map-panel > .map-anchors { grid-row: 3; flex-direction: column; align-items: stretch; gap: 4px; margin: 0 0 8px; }
  body.hj .map-panel > .map-anchors .map-anchors-label, body.hj .map-places-label { color: var(--hj-ink-light); font-size: calc(12 * var(--hj-fs, 1px)); margin: 2px 0; }
  body.hj .map-panel > .map-tabs { grid-row: 4; }
  body.hj .map-panel > .map-places { grid-row: 5; display: flex; flex-direction: column; gap: 1px; overflow-y: auto; min-height: 0; padding-right: 4px; border-top: 1px solid rgba(184, 151, 90, 0.4); padding-top: 6px; }
  body.hj .map-panel > .map-places[hidden], body.hj .map-panel.atlas-on > .map-places { display: none; }
  body.hj .map-place { text-align: left; padding: 2px 6px; border: 0; background: none; color: var(--hj-ink); font: inherit; font-size: calc(13 * var(--hj-fs, 1px)); cursor: pointer; }
  body.hj .map-place::before { content: "● "; color: var(--hj-cinnabar); font-size: 0.7em; vertical-align: 0.15em; }
  body.hj .map-place:hover, body.hj .map-place:focus-visible { background: rgba(184, 151, 90, 0.14); }
  body.hj .map-place.iface { color: #6E1F14; }
  body.hj .map-place.iface::before { color: #6E1F14; }
  body.hj .map-place.current { color: var(--hj-cinnabar); cursor: default; font-weight: 600; }
  body.hj .map-panel > .map-foot { grid-row: 6; display: block; padding-top: 6px; color: var(--hj-ink-light); font-size: calc(11 * var(--hj-fs, 1px)); letter-spacing: 0.04em; }
  body.hj .map-panel > .map-stage, body.hj .map-panel > .atlas-stage { grid-column: 1; grid-row: 1 / -1; max-height: none; min-height: 0; }
  /* 用户 11-01：侧栏整体移到右边；关闭的叉是面板级按钮，悬在面板右上角，和侧栏内容隔开 */
  body.hj .map-panel > .dialog-head { padding-right: 30px; padding-top: 16px; }
  body.hj .map-panel > .dialog-head .dialog-close { position: absolute; top: 4px; right: 6px; z-index: 2; }
  body.hj .map-panel.atlas-on > .atlas-stage { display: block; }
}

/* 近景房名签被接口签挤掉：只在悬停 / 聚焦时显示（用户 11-01） */
.near-map .plan-tag.minor { opacity: 0; transition: opacity 0.12s; }
.near-map .plan-tag.minor:hover, .near-map .plan-tag.minor:focus { opacity: 1; }
.near-map .plan-exit.vertical text { letter-spacing: 0; }

/* 舆图滚轮不带动页面（用户 11-01）：面板与画布不出滚动条，放大后拖动平移；去处超长时只在侧栏里滚，细纸墨滚动条 */
@media (min-width: 1024px), (max-width: 1023px) and (max-height: 600px) and (orientation: landscape) {
  body.hj .map-panel { overflow: hidden; overscroll-behavior: contain; }
  body.hj .map-panel > .map-stage, body.hj .map-panel > .atlas-stage { overflow: hidden; overscroll-behavior: contain; scrollbar-width: none; }
  body.hj .map-panel > .map-stage::-webkit-scrollbar { display: none; }
  body.hj .map-panel > .map-anchors { grid-row: 3 / 6; overflow-y: auto; min-height: 0; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(184, 151, 90, 0.5) transparent; }
  body.hj .map-panel > .map-anchors::-webkit-scrollbar { width: 6px; }
  body.hj .map-panel > .map-anchors::-webkit-scrollbar-thumb { background: rgba(184, 151, 90, 0.5); border-radius: 3px; }
  body.hj .near-stage { overscroll-behavior: contain; }
}

/* 参悟点常驻可见（用户 11-01：平时是透明框，悬停才出蓝框）：和人物牌同一风格的纸底签，悬停加深；所有带参悟点的房间同一组件 */
body.hj .insight-action {
  background: rgba(243, 235, 221, 0.94); border: 1px solid var(--hj-text-cyan); color: var(--hj-text-cyan);
  box-shadow: 0 1px 3px rgba(43, 38, 32, 0.16); cursor: pointer;
}
body.hj .insight-action:hover, body.hj .insight-action:focus-visible { background: var(--hj-text-cyan); border-color: var(--hj-text-cyan); color: var(--hj-paper); }
body.hj .insight-action.locked { background: rgba(243, 235, 221, 0.94); border-color: rgba(184, 151, 90, 0.8); color: var(--hj-ink-light); }
body.hj .insight-action.locked:hover, body.hj .insight-action.locked:focus-visible { background: #FFF8EA; border-color: var(--hj-text-gold); color: var(--hj-ink); }
body.hj #sceneLive .insight-box { background: rgba(243, 235, 221, 0.82); padding: 6px 10px; border-radius: 3px; }
.near-map .plan-merge line { stroke: rgba(107, 98, 87, 0.75); stroke-width: 2; stroke-dasharray: 5 4; }

/* 要事字幕（用户 11-01）：场景区上方居中，排队显示；大事用印章样式 */
.scene-notice[hidden] { display: none !important; }
body.hj .scene-notice {
  position: absolute; z-index: 6; left: 50%; top: 14px; transform: translateX(-50%);
  max-width: 60%; padding: 7px 18px; border-radius: 3px;
  background: rgba(243, 235, 221, 0.95); border: 1px solid rgba(184, 151, 90, 0.85);
  box-shadow: 0 2px 8px rgba(43, 38, 32, 0.18);
  color: var(--hj-ink); font-family: var(--ui-font); font-size: calc(14 * var(--hj-fs, 1px)); line-height: 1.6;
  text-align: center; pointer-events: none;
}
body.hj .scene-notice-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
body.hj .scene-notice.in { animation: notice-in 0.25s ease-out; }
@keyframes notice-in { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }
body.hj .scene-notice.warn { border-color: var(--hj-cinnabar); color: #6E1F14; }
body.hj .scene-notice.reward { border-color: var(--hj-text-gold); color: #6B4E16; }
body.hj .scene-notice.seal {
  background: var(--hj-cinnabar); border: 2px solid #F3EBDD; outline: 1px solid var(--hj-cinnabar);
  color: #FFF8EA; font-size: calc(16 * var(--hj-fs, 1px)); letter-spacing: 0.12em; padding: 9px 24px;
}
/* 字幕条只保留房名、地标签和纪事按钮（用户 11-01：系统行和上方字幕卡重复）；纪事按钮固定靠右 */
@media (min-width: 1024px), (max-width: 1023px) and (max-height: 600px) and (orientation: landscape) {
  body.hj .hj-sub-chron { margin-left: auto; flex: 0 0 auto; }
}
/* =========================================================
   手机横屏（《方案-移动端改造-v0.2》§6）。只管版面和尺寸，颜色、皮肤都跟桌面走（11-tokens 的变量）。
   媒体查询要和 ui/layout-mode.ts 的 COMPACT_QUERY 一样。斗法等 K6 后另做，这里不碰。
   ========================================================= */
:root { --st: env(safe-area-inset-top, 0px); --sb: env(safe-area-inset-bottom, 0px); --sl: env(safe-area-inset-left, 0px); --sr: env(safe-area-inset-right, 0px); }

/* 手机上输入框字号小于 16 时 iOS 会放大整页且不恢复（§3.1） */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select { font-size: 16px !important; }
}

/* 竖屏遮罩：不断连接，转回来接着玩。登录页不遮。 */
#fsMask, #fsGuide, #menuMore, #railMore, .hj-compass-center { display: none; }

/* 方向键平时收起（桌面、手机都一样）：移动靠点地图，只有暗路才用得上；盒子缩成一个按钮，地名就不用给它让位 */
@media (min-width: 1024px), (max-width: 1023px) and (max-height: 600px) and (orientation: landscape) {
  body.hj .hj-compass { width: 44px; height: 44px; background: none; pointer-events: none; }
  body.hj .hj-compass > * { pointer-events: auto; }
  body.hj .hj-compass-key.dir, body.hj .hj-compass-key.vert { display: none; }
  body.hj .hj-compass-center {
    display: flex; align-items: center; justify-content: center; position: absolute; right: 0; bottom: 0; width: 44px; height: 44px; padding: 0; cursor: pointer;
    border: 0; border-radius: 50%; background: var(--ui-compass-vert-dim) center / contain no-repeat; color: var(--hj-ink-light); font-size: 16px;
  }
  body.hj .hj-compass.vert-open { width: var(--c); height: var(--c); background: var(--ui-compass-base) center / contain no-repeat; }
  body.hj .hj-compass.vert-open .hj-compass-key.dir, body.hj .hj-compass.vert-open .hj-compass-key.vert { display: flex; }
  body.hj .hj-compass.vert-open .hj-compass-center { right: -10px; bottom: -10px; width: 34px; height: 34px; font-size: 13px; }
}
@media (max-width: 1023px) and (orientation: portrait) and (pointer: coarse) {
  body.in-game #fsMask {
    display: flex; position: fixed; inset: 0; z-index: 9900; align-items: center; justify-content: center;
    background: rgba(30, 25, 20, 0.82);
  }
  #fsMask > div { width: min(78vw, 320px); padding: 28px 20px; text-align: center; color: var(--hj-ink); background: var(--ui-panel); border: 1px solid var(--ui-line); }
  #fsMask b { display: block; font-size: 24px; letter-spacing: 4px; margin-bottom: 12px; }
  #fsMask span { font-size: 14px; color: var(--hj-text-light); }
}

/* iOS 浏览器：文档留出可滚动高度，上滑一次收起工具栏；主屏幕打开时不需要（§3.1） */
html.iosbar, html.iosbar body { overflow: auto !important; height: auto !important; }
html.iosbar body { min-height: calc(100lvh + 240px); }
html.needbar body > *:not(#fsGuide):not(#fsMask) { pointer-events: none; }
html.needbar #fsGuide {
  display: flex; position: fixed; inset: 0; z-index: 9800; pointer-events: none; align-items: center; justify-content: center;
  padding: 0 60px; text-align: center; color: #fff; background: rgba(30, 25, 20, 0.72); font-size: 15px; line-height: 1.5;
}
html.needbar #fsGuide b { display: block; font-size: 20px; letter-spacing: 2px; }

#fsTip {
  position: fixed; left: 50%; top: calc(var(--st) + 8px); transform: translateX(-50%); z-index: 9700; max-width: 70vw;
  padding: 6px 12px; font-size: 14px; color: #fff; background: rgba(43, 38, 32, 0.92); border-radius: 2px;
  opacity: 0; pointer-events: none; transition: opacity 0.15s;
}
#fsTip.on { opacity: 1; }

@media (max-width: 1023px) and (max-height: 600px) and (orientation: landscape) {
  :root {
    --hj-top: 0px; --hj-gap: 0px; --hj-menu: 52px; --c-bar: 44px; --hj-status: var(--c-bar); --hj-font: 14px;
    --c-h: calc(100dvh - var(--st) - var(--sb));
    --c-sh: calc(var(--c-h) - var(--c-bar));
    /* 场景按高度定 4:3（画境已定的安全区），剩下的宽度给地图 */
    --c-sw: min(calc(var(--c-sh) * 4 / 3), 62vw);
    --hj-map: minmax(0, 1fr);
    --hj-left: var(--c-sw);
  }
  body.hj { font-size: 14px; touch-action: manipulation; }
  body.hj #app { position: fixed; inset: 0; height: auto; padding: var(--st) var(--sr) var(--sb) var(--sl); overflow: hidden; }

  /* 顶栏取消；连接异常时才冒出来 */
  body.hj .topbar { display: contents; }
  body.hj .topbar > * { display: none !important; }
  body.hj .topbar > .status:has(.dot.off) {
    display: flex !important; position: fixed; left: 50%; top: calc(var(--st) + 4px); transform: translateX(-50%); z-index: 30;
    align-items: center; gap: 6px; padding: 2px 10px; background: var(--ui-panel); border: 1px solid var(--ui-line);
  }
  body.hj .topbar > .status:has(.dot.off) #status { display: inline; }

  body.hj .layout { grid-template-columns: var(--c-sw) minmax(0, 1fr) var(--hj-menu); grid-template-rows: minmax(0, 1fr) var(--c-bar); gap: 0; padding: 0; height: 100%; }

  /* 场景 */
  body.hj .story-panel { grid-row: 1; overflow: visible; --hj-subtitle: 0px; }
  body.hj .hj-scene[data-band], body.hj .hj-scene {
    left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; padding: 0; z-index: 1;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior: contain; scrollbar-width: none; touch-action: pan-x;
    align-items: safe center; justify-content: flex-end;
  }
  body.hj .hj-scene::-webkit-scrollbar { display: none; }
  /* 人多时横滑，不缩成小人 */
  body.hj .hj-scene .npc-list[data-n] { --fig-k: 1; --fig-h: calc(var(--c-sh) * 0.68); gap: 0 4px; flex: none; }
  body.hj .hj-scene .npc-list[data-n="3"], body.hj .hj-scene .npc-list[data-n="4"], body.hj .hj-scene .npc-list[data-n="5"],
  body.hj .hj-scene .npc-list[data-n="6"], body.hj .hj-scene .npc-list[data-n="7"] { --fig-k: 1; --fig-h: calc(var(--c-sh) * 0.58); gap: 0 2px; }
  body.hj .hj-scene .has-fig .entity-info { padding: 0 6px; min-height: 32px; align-items: center; font-size: 13px; }
  body.hj .hj-scene .has-fig .entity-name { min-height: 32px; min-width: 44px; }
  body.hj .hj-scene .has-fig .entity-role { display: none; }
  body.hj .hj-scene .npc-actions { flex-wrap: nowrap; max-width: none; }
  body.hj .hj-scene .npc-actions .action-tag { min-height: 36px; min-width: 44px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
  body.hj .hj-scene .npc-fig { margin-bottom: -10px; }
  body.hj .story-panel > .well-hud { top: 50px; right: 6px; width: 46%; }
  body.hj .scene-notice { top: 52px; max-width: 88%; padding: 4px 10px; font-size: 13px; }

  /* 底条：房名、纪事、吐纳、行囊、探索；“状态”点头像，“交流”在更多里 */
  body.hj .hj-subtitle { left: 0; right: auto; top: 100%; bottom: auto; width: calc(var(--c-sw) - 150px); height: var(--c-bar); padding: 0 4px 0 8px; gap: 4px; z-index: 6; background: transparent; border-top: 0; }
  body.hj .hj-sub-head { gap: 4px; }
  body.hj .hj-sub-room { font-size: 14px; letter-spacing: 0; }
  body.hj .hj-sub-landmark, body.hj .hj-sub-travel { display: none; }
  body.hj .hj-sub-chron { min-height: 40px; min-width: 44px; padding: 0 6px; font-size: 13px; }

  body.hj .hj-status {
    grid-column: 1; grid-row: 2; position: static; display: flex; justify-content: flex-end; align-items: center;
    gap: 0; padding: 0 2px; overflow: visible; border-width: 1px 0 0; border-radius: 0;
  }
  body.hj .hj-status-who, body.hj .hj-status-id, body.hj .hj-status-quick { display: contents; }
  body.hj .hj-status-name, body.hj .hj-status-school, body.hj .hj-status-extra { display: none; }
  body.hj .hj-status .quick-actions-row { display: flex; gap: 2px; width: auto; margin: 0; }
  body.hj #quickStatus, body.hj #quickRun { display: none; }
  body.hj .hj-status button.quick-btn { flex: none; min-width: 48px; height: 44px; padding: 0 4px; font-size: 14px; }
  /* 形气神压在场景左上：只有条，不写数字，点开看（用户实试通过） */
  body.hj .hj-status-who:has(.hj-face-por), body.hj .hj-status-who { --hj-face: 40px; }
  body.hj .hj-status-face {
    position: absolute; left: 4px; top: 4px; z-index: 5; width: 44px; height: 44px; overflow: hidden;
    background: var(--ui-panel); border: 1px solid var(--ui-line); border-right: 0;
  }
  body.hj .hj-status-face > .hj-face-por { top: 0; }
  body.hj .hj-status-bars {
    position: absolute; left: 48px; top: 4px; z-index: 5; width: 96px; height: 44px; padding: 3px 6px; gap: 2px;
    background: var(--ui-panel); border: 1px solid var(--ui-line); border-left: 0;
  }
  body.hj .hj-bar { grid-template-columns: minmax(0, 1fr); min-height: 0; position: relative; }
  body.hj .hj-bar-name, body.hj .hj-bar-num { display: none; }
  body.hj .hj-bar-stroke { height: 10px; }
  body.hj .hj-bar.danger::after { content: "危"; position: absolute; right: 0; top: -3px; font-size: 12px; line-height: 16px; color: #C1190F; }
  /* 差事一行：场景右上，点开主线 */
  body.hj button.hj-status-quest {
    position: absolute; right: auto; left: calc(var(--c-sw) - 4px); top: 4px; transform: translateX(-100%); z-index: 5;
    max-width: calc(var(--c-sw) - 160px); min-height: 44px; padding: 0 8px; flex-basis: auto;
    background: var(--ui-panel); border: 1px solid var(--ui-line); font-size: 13px; line-height: 1.2; white-space: normal;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  }
  body.hj button.hj-status-quest:empty { display: none; }

  /* 新手引导：默认别盖人 */
  body.hj .story-panel > .guide-card { top: 52px; left: 4px; width: 62%; min-width: 0; max-height: calc(var(--c-sh) - 60px); }
  body.hj .guide-card.folded .guide-seal { width: 44px; height: 44px; }
  body.hj .guide-card .guide-actions button { min-height: 36px; font-size: 13px; }
  body.hj .guide-card .guide-text { font-size: 13px; line-height: 1.45; }
  body.hj .guide-fold, body.hj .guide-more { min-height: 36px; min-width: 44px; font-size: 13px; }

  /* 地图栏 */
  body.hj .near-map { grid-column: 2; grid-row: 1 / span 2; border-width: 0 1px; }
  body.hj .near-head, body.hj .near-foot { display: none !important; }
  body.hj .near-stage { flex: 1 1 auto; min-height: 0; touch-action: none; }

  /* 方位盘 3×3，每键 44（用户实试 44、52 都好点，44 少盖地图）；上下入出在盘上方 */
  /* 展开时才是 3×3，每键 44 */
  body.hj .hj-compass { --k: 44px; --c: 132px; right: 4px; bottom: 4px; }
  body.hj .hj-compass.vert-open { background: none; }
  body.hj .hj-compass-key.dir, body.hj .hj-compass-key.vert { width: var(--k); height: var(--k); font-size: 14px; }
  body.hj .hj-compass .k-northwest { left: 0; top: 0; }
  body.hj .hj-compass .k-north { left: var(--k); top: 0; }
  body.hj .hj-compass .k-northeast { left: calc(2 * var(--k)); top: 0; }
  body.hj .hj-compass .k-west { left: 0; top: var(--k); }
  body.hj .hj-compass .k-east { left: calc(2 * var(--k)); top: var(--k); }
  body.hj .hj-compass .k-southwest { left: 0; top: calc(2 * var(--k)); }
  body.hj .hj-compass .k-south { left: var(--k); top: calc(2 * var(--k)); }
  body.hj .hj-compass .k-southeast { left: calc(2 * var(--k)); top: calc(2 * var(--k)); }
  body.hj .hj-compass.vert-open .hj-compass-center { left: var(--k); top: var(--k); right: auto; bottom: auto; width: var(--k); height: var(--k); font-size: 14px; }
  body.hj .hj-compass-key.vert { top: -48px; }
  body.hj .hj-compass .k-up { left: calc(-1 * var(--k)); top: -48px; }
  body.hj .hj-compass .k-down { left: 0; top: -48px; }
  body.hj .hj-compass .k-enter { left: var(--k); top: -48px; }
  body.hj .hj-compass .k-out { left: calc(2 * var(--k)); top: -48px; }
  body.hj .hj-compass-tag { min-height: 44px; }

  /* 菜单：常驻 5 个 + 更多，图标用桌面的 */
  body.hj .panel-right { grid-column: 3; grid-row: 1 / span 2; overflow: visible; z-index: 10; }
  body.hj .panel-right .menu-btn { min-height: 44px; }
  body.hj .menu-btn svg { width: 18px; height: 18px; margin-bottom: 2px; }
  body.hj .menu-text { font-size: 13px; }
  body.hj #menuMore { display: flex; position: relative; }
  body.hj #menuMore.has-dot::after {
    content: ""; position: absolute; top: 3px; right: 3px; width: 14px; height: 14px; box-sizing: border-box; border-radius: 50%;
    background: var(--hj-cinnabar); border: 2px solid rgba(201, 162, 75, 0.85);
  }
  body.hj #railMore:not([hidden]) {
    display: block; position: fixed; right: calc(var(--sr) + var(--hj-menu) + 4px); bottom: calc(var(--sb) + 4px); z-index: 40; width: 300px; padding: 8px;
    background: var(--ui-panel); border: 1px solid var(--ui-line);
  }
  body.hj .rail-more-wallet { margin: 0 0 6px; font-size: 13px; color: var(--hj-text-light); }
  body.hj .rail-more-wallet:empty { display: none; }
  body.hj .rail-more-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
  body.hj .rail-more-grid .menu-btn { flex: none; min-height: 56px; width: 100%; }
  body.hj .rail-more-grid .audio-bell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; min-height: 56px; }
  body.hj .rail-more-grid .audio-bell::after { content: "声音开"; font-size: 13px; }
  body.hj .rail-more-grid .audio-bell.muted::after { content: "声音关"; }

  /* 面板：盖场景和地图，只留菜单列 */
  body.hj .dialog-panel, body.hj .map-panel, body.hj .hj-chronicle {
    position: fixed; top: var(--st); left: var(--sl); right: calc(var(--sr) + var(--hj-menu)); bottom: var(--sb); width: auto; max-width: none; max-height: none;
  }
  body.hj .dialog-panel { padding: 8px 12px; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
  body.hj .dialog-panel button, body.hj .map-panel button { min-height: 36px; }
  body.hj .dialog-close, body.hj .hj-chron-close { min-width: 44px; min-height: 44px; }
  body.hj .hj-chronicle { z-index: 8; }
  body.hj .hj-chron-head { padding: 0 12px; }
  body.hj .hj-chron-body > #log { padding: 8px 12px 16px; touch-action: pan-y; }
  body.hj .dialog-panel.with-half { padding-left: calc(min(24%, 150px) + 16px); }
  body.hj .dialog-panel.with-half .dialog-half { left: 8px; width: min(24%, 150px); top: 8px; }
  body.hj .status-half { width: 110px; margin: 0 12px 8px 0; }
  body.hj .status-half > .portrait--block { height: 150px !important; }

  /* 舆图：侧栏收窄，图拖动缩放 */
  body.hj .map-panel { grid-template-columns: minmax(0, 1fr) 168px; padding: 4px 6px; column-gap: 6px; z-index: 9; }
  body.hj .map-panel > .map-foot, body.hj .map-panel > .dialog-head .map-hint { display: none; }
  body.hj .map-panel > .dialog-head { padding-top: 10px; padding-right: 46px; }
  body.hj .map-place { min-height: 36px; font-size: 13px; }
  body.hj .map-panel > .map-stage, body.hj .map-panel > .atlas-stage { touch-action: none; }

  /* 交流：贴顶，键盘弹出后还看得见 */
  body.hj .story-panel > .composer { z-index: 20; }
  body.hj .say-popover { position: fixed; top: calc(var(--st) + 2px); left: calc(var(--sl) + 8px); right: calc(var(--sr) + 60px); bottom: auto; width: auto; margin: 0; padding: 4px 8px; }
  body.hj .say-note { display: none; }
  body.hj .say-close { min-width: 44px; min-height: 44px; }
  body.hj .quick-toast { position: fixed; left: 50%; top: calc(var(--st) + 52px); bottom: auto; transform: translateX(-50%); z-index: 12; }
}

/* 手机上的小控件：登录页页签、系统面板的滑块和勾选 */
@media (pointer: coarse) and (max-width: 1023px) {
  #login .tab { min-height: 44px; min-width: 64px; }
  input[type="range"] { height: 32px; }
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }
  label.check { min-height: 36px; display: flex; align-items: center; gap: 8px; }
}