/* =====================================================================
   山河 UI · 第五层皮（续 48 · 2026-10-11）
   ---------------------------------------------------------------------
   用户：「故人录太丑了，你看 webgame / tfd 多好看」「他们子页面都很有特色」
        「我们默认风格是浅色，主要优先改的是默认浅色风格」。
   对照那两站的共性做了一层覆盖（不改 style.css 原有规则，删掉本文件即回退）：
     · 默认「古籍」/「沧澜」= 全浅色：象牙顶栏 + 宣纸面板 + 绫裱色案底（面板比案底亮、
       顶栏比面板亮，三层明暗分出层级），金线细框 + 金折角，朱砂只做点睛。
     · 深色三套（夜战 / 夜行 / 血战）= 玄漆外框夹面板（webgame 式深色框条）。
     · 层级：小号字距拉开的「引题」（中文 · 英文）→ 大号书法标题 → 正文。
     · 子页面（弹窗）：修遮罩只盖半屏的老 bug；页面型弹窗由 src/ui/modal_hero.js
       加水墨页头（浅色主题里画作淡入纸面、墨字标题，同选人页）；
       NPC 对话弹窗做成「人物档案」版式（左立绘右信息）。
   颜色全走下面的 --sh-* 语义变量，每套主题一组 —— 规则里不写死明暗。
   依赖：style.css 的主题变量（--paper / --ink / --vermilion / --gold …）。
   加载：index.html 在 style.css 之后引用 —— 同特异度后者胜。
   ⚠ 本文件桌面规则会盖掉 style.css 里横屏 / 竖屏媒体查询的同名属性
     （媒体查询不加特异度），所以文件末尾两个手机块要把尺寸重新压回去；
     改尺寸记得两边一起看，跑 test/audit/mobile_layout_probe.mjs。
   ===================================================================== */

/* ============= 语义变量 ============= */
/* 浅色 · 古籍（默认主题 · 主力）*/
:root, [data-theme="default"] {
  --kick-font: "Noto Serif SC", "Songti SC", Georgia, serif;
  --frm-gold: #a98446;                 /* 面板金框 */
  /* 案底（面板后面那一片）：比宣纸深半档的绫裱色 */
  --sh-desk-hi: #e3d4af; --sh-desk: #d8c69c; --sh-desk-lo: #cbb688;
  --sh-grain-blend: multiply; --sh-grain-op: .07;
  --sh-mtn-blend: multiply; --sh-mtn-op: .32; --sh-mtn-filter: none;
  --sh-vignette: rgba(92, 64, 24, .16);
  --sh-panel-shadow: 0 0 0 1px rgba(110, 80, 35, .16), 0 10px 26px rgba(80, 55, 20, .2);
  /* 外框（顶栏 / 快捷栏 / 命令行）*/
  --sh-bar-hi: #f7efdc; --sh-bar: #efe5ca; --sh-bar-lo: #e7dabb;
  --sh-dock-hi: #e6d8b5; --sh-dock: #dccba0;
  --sh-line: #c5a76f;                  /* 外框细线 */
  --sh-accent: #7a5418;                /* 金：下划线 / 渐隐金线 / 主题按钮 —— 小字也要过 4.5，压到深金 */
  --sh-kicker: #7a5418;
  --sh-text: #4a3522; --sh-title: #2a1d0f;
  --sh-hover: #a82a1f;                 /* 悬停朱砂 */
  --sh-tint: rgba(168, 118, 40, .09);
  --sh-bar-shadow: 0 3px 12px rgba(80, 55, 20, .14);
  --sh-online: #2f6b35; --sh-offline: #6a5a48; --sh-badge-bad: #9b2a1f;
  --sh-btn: #f8f1df; --sh-btn-line: #cfb27c; --sh-btn-text: #4a3522;
  --sh-menu: #f2e3bd; --sh-menu-line: #b8893c; --sh-menu-text: #2a1d0f;
  --sh-field: #fbf6e8; --sh-field-focus: #fffdf7; --sh-field-text: #2a1d0f; --sh-ph: #7d6446;
  --sh-chat-bg: linear-gradient(180deg, #b83a2c, #8b1f15); --sh-chat-text: #fff3df; --sh-chat-line: #e2b86a;
  /* 弹窗 */
  --sh-ring: #e9dcbb;                  /* 弹窗外圈「装裱」边 */
  --sh-dim-in: rgba(52, 36, 14, .30); --sh-dim-out: rgba(28, 18, 6, .62);   /* 弹窗遮罩：浅色主题压得轻一些 */
  --sh-wash: var(--paper);             /* 页头横幅压在画上的那层：浅色 = 纸，深色 = 墨 */
  --sh-hero-title: #2a1d0f; --sh-hero-kick: #7a5418; --sh-hero-sub: #5a4128;
  --sh-hero-shadow: 0 1px 0 rgba(255, 250, 235, .8);
  --sh-mbtn: color-mix(in srgb, var(--paper) 55%, #fffaf0);
  --sh-mbtn-hover-bg: color-mix(in srgb, var(--vermilion) 9%, var(--paper));
  --sh-mbtn-hover-line: var(--vermilion); --sh-mbtn-hover-text: var(--vermilion-2);
  --sh-portrait-bg: radial-gradient(ellipse 80% 60% at 50% 30%, var(--paper), var(--paper-3));
}
/* 浅色 · 沧澜（冷灰纸）*/
[data-theme="canglan"] {
  --frm-gold: #8f8160;
  --sh-desk-hi: #d9d3c2; --sh-desk: #cdc6b2; --sh-desk-lo: #bfb7a1;
  --sh-vignette: rgba(50, 55, 48, .16);
  --sh-panel-shadow: 0 0 0 1px rgba(60, 66, 58, .16), 0 10px 26px rgba(40, 45, 40, .2);
  --sh-bar-hi: #f3efe4; --sh-bar: #eae5d7; --sh-bar-lo: #e1dbca;
  --sh-dock-hi: #ddd5c2; --sh-dock: #d2c9b2;
  --sh-line: #ada07f; --sh-accent: #64512a; --sh-kicker: #64512a;
  --sh-text: #45483f; --sh-title: #2b2c2a; --sh-hover: #9c3b2c;
  --sh-tint: rgba(120, 110, 80, .09);
  --sh-bar-shadow: 0 3px 12px rgba(40, 45, 40, .14);
  --sh-online: #3d5a44; --sh-offline: #5c5e55; --sh-badge-bad: #8a3326;
  --sh-btn: #f5f2e9; --sh-btn-line: #b9ad8d; --sh-btn-text: #45483f;
  --sh-menu: #ece4cf; --sh-menu-line: #a88a4e; --sh-menu-text: #2b2c2a;
  --sh-field: #f8f6ef; --sh-field-focus: #fffefa; --sh-field-text: #2b2c2a; --sh-ph: #6e6858;
  --sh-chat-bg: linear-gradient(180deg, #a8483a, #7f2c20); --sh-chat-line: #cdb57c;
  --sh-ring: #e2dccc;
  --sh-hero-title: #2b2c2a; --sh-hero-kick: #64512a; --sh-hero-sub: #4f5148;
  /* 引用主题色的语义变量必须在本主题里重新声明一遍：自定义属性在声明处就算出值，
     不重声明的话会从 :root 继承「古籍」的纸色 */
  --sh-wash: var(--paper);
  --sh-mbtn: color-mix(in srgb, var(--paper) 55%, #fffaf0);
  --sh-mbtn-hover-bg: color-mix(in srgb, var(--vermilion) 9%, var(--paper));
  --sh-mbtn-hover-line: var(--vermilion); --sh-mbtn-hover-text: var(--vermilion-2);
  --sh-portrait-bg: radial-gradient(ellipse 80% 60% at 50% 30%, var(--paper), var(--paper-3));
}
/* 深色三套：玄漆外框（各主题只给 --lq-* 色值，语义映射写一次）*/
[data-theme="night"] {
  --lq-0: #050403; --lq-1: #0b0907; --lq-2: #14100b; --lq-3: #1e1810;
  --lq-line: #4a3b22; --gilt: #d9b66a; --gilt-2: #a8874a; --gilt-soft: #cdbb93; --cream: #f3e6c8;
  --frm-gold: #7a5f31;
}
[data-theme="indigo"] {
  --lq-0: #04070d; --lq-1: #08101c; --lq-2: #0f1a2c; --lq-3: #16243a;
  --lq-line: #2e4570; --gilt: #d8b870; --gilt-2: #a88c52; --gilt-soft: #b8c4d8; --cream: #e6dcc0;
  --frm-gold: #4f6a9c;
}
[data-theme="blood"] {
  --lq-0: #070302; --lq-1: #120806; --lq-2: #1d0c09; --lq-3: #29110d;
  --lq-line: #5e2a20; --gilt: #d9b66a; --gilt-2: #a8874a; --gilt-soft: #d4b48f; --cream: #f3e6c8;
  --frm-gold: #7e3a2a;
}
[data-theme="night"], [data-theme="indigo"], [data-theme="blood"] {
  --sh-desk-hi: var(--lq-2); --sh-desk: var(--lq-1); --sh-desk-lo: var(--lq-0);
  --sh-grain-blend: screen; --sh-grain-op: .045;
  --sh-mtn-blend: screen; --sh-mtn-op: .16; --sh-mtn-filter: invert(1) sepia(1) saturate(.6) brightness(.75);
  --sh-vignette: rgba(0, 0, 0, .45);
  --sh-panel-shadow: 0 0 0 1px rgba(0, 0, 0, .55), 0 16px 36px rgba(0, 0, 0, .45);
  --sh-bar-hi: color-mix(in srgb, var(--lq-3) 70%, var(--lq-2)); --sh-bar: var(--lq-2); --sh-bar-lo: var(--lq-1);
  --sh-dock-hi: var(--lq-2); --sh-dock: var(--lq-1);
  --sh-line: var(--lq-line); --sh-accent: var(--gilt); --sh-kicker: var(--gilt-2);
  --sh-text: var(--gilt-soft); --sh-title: var(--cream); --sh-hover: var(--gilt);
  --sh-tint: rgba(255, 240, 210, .05);
  --sh-bar-shadow: 0 8px 22px rgba(0, 0, 0, .38);
  --sh-online: #9fc79a; --sh-offline: #a89a80; --sh-badge-bad: #e58676;
  --sh-btn: rgba(255, 240, 210, .035); --sh-btn-line: color-mix(in srgb, var(--gilt) 20%, transparent); --sh-btn-text: var(--gilt-soft);
  --sh-menu: color-mix(in srgb, var(--gilt) 7%, transparent); --sh-menu-line: color-mix(in srgb, var(--gilt) 36%, transparent); --sh-menu-text: var(--cream);
  --sh-field: rgba(0, 0, 0, .32); --sh-field-focus: rgba(0, 0, 0, .42); --sh-field-text: var(--cream);
  --sh-ph: color-mix(in srgb, var(--gilt-soft) 75%, transparent);
  --sh-chat-bg: linear-gradient(180deg, var(--lq-3), var(--lq-1)); --sh-chat-text: var(--gilt); --sh-chat-line: var(--gilt-2);
  --sh-ring: var(--lq-1);
  --sh-dim-in: rgba(18, 12, 6, .48); --sh-dim-out: rgba(6, 4, 2, .78);
  --sh-wash: #0e0a06;
  --sh-hero-title: var(--cream); --sh-hero-kick: var(--gilt); --sh-hero-sub: var(--gilt-soft);
  --sh-hero-shadow: 0 2px 0 rgba(0, 0, 0, .6), 0 0 24px rgba(0, 0, 0, .5);
  --sh-mbtn: var(--paper-2);
  --sh-mbtn-hover-bg: var(--lq-2); --sh-mbtn-hover-line: var(--lq-2); --sh-mbtn-hover-text: var(--gilt);
  --sh-portrait-bg: radial-gradient(ellipse 80% 60% at 50% 30%, #3a2c1c, var(--lq-1));
}

/* ============= 案底 ============= */
body { background: var(--sh-desk); }
.paper-bg {
  background:
    radial-gradient(ellipse 70% 55% at 50% -8%, color-mix(in srgb, var(--sh-accent) 9%, transparent), transparent 62%),
    radial-gradient(ellipse 60% 70% at 0% 100%, color-mix(in srgb, var(--sh-desk-lo) 70%, transparent), transparent 70%),
    radial-gradient(ellipse 60% 70% at 100% 100%, color-mix(in srgb, var(--sh-desk-lo) 70%, transparent), transparent 70%),
    linear-gradient(180deg, var(--sh-desk-hi) 0%, var(--sh-desk) 45%, var(--sh-desk-lo) 100%);
}
.paper-bg::after,
[data-theme] .paper-bg::after { mix-blend-mode: var(--sh-grain-blend); opacity: var(--sh-grain-op); }
/* 远山剪影：浅色淡墨叠印，深色反成极淡金色山影 */
.mountains,
[data-theme] .mountains {
  mix-blend-mode: var(--sh-mtn-blend);
  opacity: var(--sh-mtn-op);
  filter: var(--sh-mtn-filter);
}
.vignette {
  background: radial-gradient(ellipse 100% 100% at 50% 50%, transparent 60%, var(--sh-vignette) 100%);
}

/* ============= 顶栏 ============= */
/* 一律写 `body > header`：战斗弹窗（combat.js）里也有自己的 <header>，裸 header 会把样式套到它头上 */
body > header {
  background: linear-gradient(180deg, var(--sh-bar-hi) 0%, var(--sh-bar) 60%, var(--sh-bar-lo) 100%);
  border-bottom: 1px solid var(--sh-line);
  box-shadow: var(--sh-bar-shadow);
  backdrop-filter: none;
  min-height: 58px;
}
/* 顶栏下沿正中一道渐隐金线（webgame 同款） */
body > header::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--sh-accent) 50%, transparent);
  opacity: 0.75; pointer-events: none;
}
.seal {
  box-shadow:
    inset 0 0 0 2px #fff5e640,
    inset 0 0 0 4px var(--vermilion-2),
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 3px 8px rgba(60, 30, 10, 0.3);
}
.title-text h1 {
  color: var(--sh-title);
  text-shadow: 0 1px 0 color-mix(in srgb, var(--sh-bar-hi) 80%, transparent);
}
.title-text .sub {
  display: block;
  margin: 5px 0 0 3px;
  font-family: var(--kick-font);
  font-size: 9.5px;
  letter-spacing: 0.42em;
  color: var(--sh-kicker);
}
body > header .status-pill {
  background: var(--sh-tint);
  border: 1px solid color-mix(in srgb, var(--sh-line) 75%, transparent);
  color: var(--sh-text);
  backdrop-filter: none;
}
/* 在线徽标：core.js updateOnlineBadge 内联写的是照旧纸底配的色（#5a8a3a / #888），
   浅色顶栏上不到 3、深色上更糟 —— 按它打的 data-status 换成本主题的色 */
#online-badge[data-status="online"]  { color: var(--sh-online) !important; }
#online-badge[data-status="offline"] { color: var(--sh-offline) !important; }
#online-badge[data-status="fail"],
#online-badge[data-status="kicked"]  { color: var(--sh-badge-bad) !important; }

/* 动作按钮：去掉方盒，改成 tfd 式文字导航 + 悬停金下划线 */
body > header .actions { gap: 2px; }
body > header .actions button,
body > header .actions .tool-btn {
  background: transparent;
  border: 1px solid transparent;
  outline: none;
  box-shadow: none;
  color: var(--sh-text);
  font-family: var(--kick-font);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.22em;
  padding: 7px 13px;
  border-radius: 2px;
}
body > header .actions button::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 3px; height: 1px;
  background: var(--sh-hover);
  transform: scaleX(0); transition: transform .2s ease;
}
body > header .actions button:hover {
  background: var(--sh-tint);
  border-color: transparent;
  color: var(--sh-hover);
  transform: none;
  box-shadow: none;
}
body > header .actions button:hover::after { transform: scaleX(1); }
body > header .actions #btn-theme {
  color: var(--sh-accent);
  border-color: var(--sh-line);
  outline: none;
}
body > header .actions #btn-theme:hover { background: var(--sh-tint); border-color: var(--sh-accent); color: var(--sh-hover); }
body > header .actions #btn-theme::after,
body > header .actions #btn-home::after { display: none; }

/* ============= 宣纸面板 · 金框 + 金折角 ============= */
/* 桌面原写死 .layout{height:calc(100vh - 56px)}，但顶栏实高 ~67px（朱印 50 + 上下 padding），
   三栏底边一直被 body{overflow:hidden} 裁掉 ~10px（侧栏 / 日志的下框与折角看不到）。
   改成与两个手机断点同款的弹性列：顶栏多高，三栏就正好吃剩下的。
   body 其余直接子元素（底纹 / 弹窗根 / 聊天 / 提示 / 登录页 / 横屏引导）全是 fixed，不占位。 */
body { display: flex; flex-direction: column; }
body > header { flex: 0 0 auto; }
.layout { flex: 1 1 auto; min-height: 0; height: auto; gap: 12px; padding: 12px 14px 14px; }
.panel {
  border: 1px solid var(--frm-gold);
  box-shadow:
    var(--sh-panel-shadow),
    inset 0 0 0 1px color-mix(in srgb, var(--gold) 26%, transparent),
    inset 0 0 50px color-mix(in srgb, var(--ink) 7%, transparent);
}
.panel::before {
  inset: 5px;
  border-color: color-mix(in srgb, var(--frm-gold) 42%, transparent);
}
.panel > .corner {
  width: 18px; height: 18px;
  border-color: var(--frm-gold);
}
.panel > .corner.tl { top: 5px; left: 5px; }
.panel > .corner.tr { top: 5px; right: 5px; }
.panel > .corner.bl { bottom: 5px; left: 5px; }
.panel > .corner.br { bottom: 5px; right: 5px; }
.panel > .corner::before {
  width: 4px; height: 4px;
  background: var(--frm-gold);
  opacity: 1;
  transform: rotate(45deg);
}
.panel > .corner.tl::before { top: 3px; left: 3px; }
.panel > .corner.tr::before { top: 3px; right: 3px; }
.panel > .corner.bl::before { bottom: 3px; left: 3px; }
.panel > .corner.br::before { bottom: 3px; right: 3px; }

/* 左上罗盘是给 SVG 大地图用的；进城后 map.js 把图例 / 缩放 / 时辰牌都收了，唯独漏了它，
   压在「你在此处」横幅上。城内视图有内容时（离城会清空 innerHTML）把它收起。 */
.map-pane:has(#city-map:not(:empty)) .map-compass { display: none; }

/* ============= 城内坊卡：画更亮、字更清 ============= */
.ward-card {
  border-color: color-mix(in srgb, var(--frm-gold) 70%, transparent);
  border-radius: 3px;
}
.ward-thumb { opacity: .9; }
.ward-scrim {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--paper) 78%, transparent) 0%, color-mix(in srgb, var(--paper) 30%, transparent) 46%, transparent 72%),
    linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--paper) 55%, transparent) 100%);
}
.ward-name { color: var(--ink); }
.ward-sub { color: var(--ink-2); }
.ward-here { border-color: var(--frm-gold); }
.ward-exits-title { color: var(--ink-soft); }

/* ============= 侧栏 · 档案卡 ============= */
.side-pane { padding-bottom: 58px; }   /* 右下角浮着「聊天」按钮，给最后几行留出滚动余量 */
.side-pane h2 {
  color: var(--ink);
  font-size: 16px;
  letter-spacing: 0.32em;
  border-bottom: none;
  padding: 4px 0 2px;
}
.side-pane h2::before {
  width: 6px; height: 6px;
  background: var(--gold);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 22%, transparent);
}
.side-pane h2::after {
  background: linear-gradient(90deg, color-mix(in srgb, var(--frm-gold) 70%, transparent), transparent);
}
.side-pane .char-header #avatar-slot {
  border: 1.5px solid var(--frm-gold);
  outline: 1px solid color-mix(in srgb, var(--frm-gold) 45%, transparent);
  outline-offset: 3px;
}
.side-pane .char-header { border-bottom: 1px solid color-mix(in srgb, var(--frm-gold) 28%, transparent); }
.stat-row { border-bottom: 1px solid color-mix(in srgb, var(--ink) 7%, transparent); padding: 4px 2px; }
.stat-row .k { letter-spacing: 0.16em; }

/* 血条：毛笔晕染 → 细线条（tfd 式）*/
.bar {
  height: 6px;
  margin: 3px 0 9px;
  border: none;
  border-radius: 3px;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
  box-shadow: inset 0 1px 1px color-mix(in srgb, var(--ink) 18%, transparent);
}
.bar > span {
  border-radius: 3px;
  -webkit-mask-image: none; mask-image: none;
  box-shadow: 0 0 6px color-mix(in srgb, currentColor 0%, transparent);
}
.bar > span::before {
  inset: 0 0 50% 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent);
}
.bar.hp  > span { background: linear-gradient(90deg, color-mix(in srgb, var(--hp) 70%, #000), var(--hp)); }
.bar.mp  > span { background: linear-gradient(90deg, color-mix(in srgb, var(--mp) 70%, #000), var(--mp)); }
.bar.exp > span { background: linear-gradient(90deg, color-mix(in srgb, var(--xp) 70%, #000), var(--xp)); }

.side-pane .combat-grid { border-top: none; border-bottom: none; gap: 6px; }
.side-pane .combat-grid .combat-cell {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--frm-gold) 50%, transparent);
  background: color-mix(in srgb, var(--paper) 70%, #fff8e8);
  box-shadow: none;
  padding: 7px 2px 6px;
}
.side-pane .combat-grid .combat-cell::before {
  content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px;
  background: currentColor;
}
.side-pane .combat-grid .combat-cell:nth-child(1) { color: var(--vermilion); }
.side-pane .combat-grid .combat-cell:nth-child(2) { color: var(--azure); }
.side-pane .combat-grid .combat-cell:nth-child(3) { color: var(--jade); }
.side-pane .combat-grid .combat-cell .k { color: var(--ink-soft); letter-spacing: 0.3em; }
.side-pane .combat-grid .combat-cell .v { font-size: 20px; }
.side-pane .weapon-card { border-color: var(--frm-gold); }
/* —— 续 49 · 侧栏下半截 —— */
/* 老 bug：侧栏是 flex 纵向 + 自己滚动，四条命脉条是空元素 → 被 flex 压成 0 高，
   桌面 / 横屏上从来没显示过（只剩文字行）。不许收缩，并把「文字行 + 条」贴成一组。 */
.side-pane > .bar { flex-shrink: 0; height: 7px; margin: 2px 1px 9px; }
.side-pane > .stat-row:has(+ .bar) { border-bottom: none; padding-bottom: 0; }
.side-pane > .stat-row:has(+ .bar) .v { font-weight: 600; }
.bar.sta > span { background: linear-gradient(90deg, color-mix(in srgb, #b8893c 70%, #000), #d4a847); }
/* 五维：六行 → 三列两排小格（index.html .pri-grid）*/
.side-pane .pri-grid {
  flex-shrink: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px;
  margin: 2px 0 8px;
}
.side-pane .pri-grid .stat-row {
  flex-direction: column; align-items: center; justify-content: center;
  padding: 5px 2px 4px;
  border: 1px solid color-mix(in srgb, var(--frm-gold) 42%, transparent);
  border-radius: 2px;
  background: color-mix(in srgb, var(--sh-btn) 75%, transparent);
}
.side-pane .pri-grid .stat-row .k { font-size: 11px; letter-spacing: 0.1em; color: var(--sh-kicker); line-height: 1.4; }
.side-pane .pri-grid .stat-row .v { font-family: var(--kick-font); font-size: 18px; font-weight: 600; line-height: 1.2; color: var(--ink); }
/* 装备：四行 → 两列小格，每格一枚线描图标（index.html .equip-grid · data-slot）；空槽虚框淡化（sidebar.js 打 is-empty）*/
.side-pane .equip-grid {
  flex-shrink: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;
  margin: 6px 0 4px;
}
.side-pane .equip-grid .equipline {
  --eq-c: var(--frm-gold);
  margin: 0; min-height: 44px;
  padding: 6px 8px 6px 33px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px;
  border-left-width: 1px; border-color: color-mix(in srgb, var(--frm-gold) 55%, transparent);
  box-shadow: inset 2px 0 0 var(--eq-c);
  background: color-mix(in srgb, var(--sh-btn) 85%, transparent);   /* style.css 用 var(--paper-hi, #fbf3da)：深色主题没定义 → 落成浅底 */
}
.side-pane .equip-grid .equipline:hover {
  background: color-mix(in srgb, var(--sh-hover) 6%, var(--sh-btn));
  box-shadow: inset 2px 0 0 var(--eq-c), 0 2px 5px color-mix(in srgb, var(--sh-hover) 14%, transparent);
}
.side-pane .equip-grid .equipline:nth-of-type(1) { --eq-c: var(--jade); }
.side-pane .equip-grid .equipline:nth-of-type(2) { --eq-c: color-mix(in srgb, #7a5530 80%, var(--ink)); }
.side-pane .equip-grid .equipline:nth-of-type(3) { --eq-c: var(--gold-2); }
.side-pane .equip-grid .equipline:nth-of-type(4) { --eq-c: var(--vermilion); }
.side-pane .equip-grid .equipline::before {
  content: ""; position: absolute; left: 9px; top: 50%; width: 18px; height: 18px;
  transform: translateY(-50%);
  background: var(--eq-c);
  -webkit-mask: var(--eq-ico) center / contain no-repeat;
          mask: var(--eq-ico) center / contain no-repeat;
}
.side-pane .equipline[data-slot="armor"] { --eq-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 2.2 8 3.6l2.5-1.4 3 1.6-1 3.4-1.3-.6V14H4.8V6.6l-1.3.6-1-3.4z'/%3E%3Cpath d='M8 3.6V14'/%3E%3C/svg%3E"); }
.side-pane .equipline[data-slot="shoes"] { --eq-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 2.5h3.6v6.6l4.4 2.1c.6.3.9.8.9 1.4v.9H3.2V9.4L5 8.6z'/%3E%3Cpath d='M3.2 12h10.8'/%3E%3C/svg%3E"); }
.side-pane .equipline[data-slot="accessory"] { --eq-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='9.6' r='3.6'/%3E%3Ccircle cx='8' cy='9.6' r='1.3'/%3E%3Cpath d='M8 6V1.8M6.6 3.2 8 1.8l1.4 1.4'/%3E%3C/svg%3E"); }
.side-pane .equipline[data-slot="treasure"] { --eq-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.4 2.8h7.2L14 6.2 8 13.6 2 6.2z'/%3E%3Cpath d='M2 6.2h12M6 2.8 8 6.2l2-3.4M5.4 6.2 8 13.6l2.6-7.4'/%3E%3C/svg%3E"); }
.side-pane .equip-grid .equipline .k { font-size: 10.5px; letter-spacing: 0.2em; color: var(--sh-kicker); line-height: 1.3; }
.side-pane .equip-grid .equipline b { margin-left: 0; text-align: left; font-size: 13px; line-height: 1.3; letter-spacing: 0.04em; }
.side-pane .equip-grid .equipline.is-empty { background: transparent; border-style: dashed; box-shadow: none; }
.side-pane .equip-grid .equipline.is-empty::before { opacity: 0.4; }
.side-pane .equip-grid .equipline.is-empty b { color: var(--ink-soft); font-weight: 400; opacity: 0.75; }
/* 年份水印原是 absolute 浮在侧栏右下 —— 侧栏一滚就压到「护甲」行上，撤掉 */
.side-pane .year-watermark { display: none; }

/* ============= 日志 · 频道签 ============= */
.log-tabs {
  background: transparent;
  border-bottom: 1px solid color-mix(in srgb, var(--frm-gold) 45%, transparent);
  padding: 6px 14px 0;
}
.log-tabs .ltab { color: var(--ink-soft); letter-spacing: 0.3em; padding: 6px 14px 7px; }
.log-tabs .ltab.active {
  color: var(--ink);
  background: transparent;
  border: none;
  margin-bottom: 0;
  box-shadow: none;
}
.log-tabs .ltab.active::after { display: block; left: 10px; right: 10px; background: var(--vermilion); }
#screen { color: var(--ink-2); }
#screen .clickable {
  border-bottom: 1px solid color-mix(in srgb, var(--vermilion) 28%, transparent);
  padding: 0 1px; margin: 0 1px;
}

/* ============= 日志 · 地点卡（续 49 · src/ui/sidebar.js look() 的 .lk-*）============= */
/* 原来一进房就是一整片字：「去向：」二三十个红下划线链接挤两三行、「江湖近况」又一长串。
   现在：地名标题 + 标签胶囊 → 左侧小标签（人物 / 敌人 / 城门 / 城内 / 去向 / 可做 / 近况）+ 右侧小牌子。 */
#screen .line.lk-head {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px 10px;
  margin: 14px 0 4px; padding: 0 0 7px;
  position: relative;
}
#screen .line.lk-head::before { font-size: 12px; }   /* style.css 的朱砂 ❖ 留着当题头 */
#screen .line.lk-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, var(--sh-accent), color-mix(in srgb, var(--sh-accent) 35%, transparent) 45%, transparent);
}
#screen .lk-name {
  font-family: "Ma Shan Zheng", "Noto Serif SC", serif;
  font-size: 22px; line-height: 1.2; letter-spacing: 0.14em;
  color: var(--log-room);
}
#screen .lk-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
#screen .lk-tag {
  font-style: normal; font-family: var(--kick-font);
  font-size: 11px; line-height: 18px; letter-spacing: 0.08em;
  padding: 0 7px;
  border: 1px solid color-mix(in srgb, var(--sh-kicker) 38%, transparent);
  border-radius: 2px;
  color: var(--sh-kicker);
  background: color-mix(in srgb, var(--sh-kicker) 6%, transparent);
  white-space: nowrap;
}
#screen .lk-tag.lk-z-safe { color: var(--jade); border-color: color-mix(in srgb, var(--jade) 45%, transparent); background: color-mix(in srgb, var(--jade) 8%, transparent); }
#screen .lk-tag.lk-z-dungeon,
#screen .lk-tag.lk-dg-3, #screen .lk-tag.lk-dg-4, #screen .lk-tag.lk-dg-5,
#screen .lk-tag.lk-lv-hard { color: var(--vermilion); border-color: color-mix(in srgb, var(--vermilion) 45%, transparent); background: color-mix(in srgb, var(--vermilion) 8%, transparent); }
#screen .lk-tag.lk-lv-easy { opacity: 0.7; }
#screen .line.lk-desc { margin: 6px 0 8px; }

/* —— 一行 = 左侧小标签 + 右侧小牌子 —— */
#screen .line.lk-row {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 6px 0;
  font-style: normal; text-indent: 0;
  color: var(--log-text);
}
#screen .lk-label {
  flex: 0 0 auto; min-width: 3.4em;
  position: relative;
  padding-left: 10px;
  font-family: var(--kick-font); font-size: 11.5px; letter-spacing: 0.24em;
  line-height: 26px;
  color: var(--sh-kicker);
}
#screen .lk-label::before {
  content: ""; position: absolute; left: 1px; top: 50%;
  width: 4px; height: 4px; transform: translateY(-50%) rotate(45deg);
  background: var(--vermilion);
}
#screen .lk-body {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px 6px;
}
/* 小牌子（链接本体仍是 .clickable / .npc-link / .mob-link / .item-link，点击走 bindLogLinks）*/
#screen .lk-chip {
  position: relative;
  display: inline-flex; align-items: center; gap: 5px;
  height: 26px; margin: 0; padding: 0 9px;
  font-size: 13px; line-height: 1; white-space: nowrap;
  color: var(--ink-2);
  background: var(--sh-btn);
  border: 1px solid color-mix(in srgb, var(--frm-gold) 55%, transparent);
  border-radius: 3px;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--frm-gold) 22%, transparent);
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s, box-shadow .15s;
}
#screen .lk-chip:hover {
  color: var(--sh-hover);
  border-color: var(--sh-hover);
  background: color-mix(in srgb, var(--sh-hover) 7%, var(--sh-btn));
  box-shadow: 0 2px 6px color-mix(in srgb, var(--sh-hover) 16%, transparent);
}
#screen .lk-chip:active { transform: translateY(1px); }
/* 去向：方位字 + 路名 + 路况小字；左沿一道色条区分 官道 / 野路 / 暗道 / 收费 */
#screen .lk-exit { --lk-kind: transparent; border-left: 2px solid var(--lk-kind); }
#screen .lk-exit.lk-x-official { --lk-kind: var(--log-info); }
#screen .lk-exit.lk-x-wild     { --lk-kind: var(--jade); }
#screen .lk-exit.lk-x-secret   { --lk-kind: color-mix(in srgb, #8a4a9a 72%, var(--ink)); }
#screen .lk-exit.lk-x-toll     { --lk-kind: var(--log-warn); }
#screen .lk-dir {
  font-family: var(--kick-font); font-weight: 600; font-size: 11px; letter-spacing: 0;
  color: var(--vermilion);
  padding-right: 6px; margin-right: 1px;
  border-right: 1px solid color-mix(in srgb, var(--frm-gold) 45%, transparent);
}
#screen .lk-way {
  font-style: normal; font-size: 10.5px; letter-spacing: 0.04em;
  color: var(--lk-kind, var(--sh-kicker));
}
#screen .lk-x-toll .lk-way { font-weight: 600; }
#screen .lk-way, #screen .lk-cmd, #screen .lk-hp { position: relative; top: 1px; }   /* 小字在 flex 居中里显得偏高，压回基线附近 */
#screen .lk-row-kids .lk-chip { height: 24px; padding: 0 8px; font-size: 12.5px; }
/* 主城「城内」二十多块牌子只露前 8 块，末尾「+N 处」展开（sidebar.js look() 的 .lk-fold 内联 onclick 切 .lk-open）。
   桌面也折：1440×900 的日志区只有 ~190px 高，全展开一屏装不下一个主城 */
#screen .lk-row-kids .lk-body:not(.lk-open) > .lk-exit:nth-child(n+9) { display: none; }
#screen .lk-fold { color: var(--sh-kicker); border-style: dashed; }
#screen .lk-fold::after { content: "+" attr(data-n) " 处"; }
#screen .lk-open > .lk-fold::after { content: "收起"; }
/* 人物：小头像 + 名字 */
#screen .lk-npc { color: var(--log-npc); padding-left: 3px; height: 28px; border-radius: 14px 3px 3px 14px; }
#screen .lk-ava {
  width: 22px; height: 22px; flex: 0 0 22px;
  border-radius: 50%;
  object-fit: cover; object-position: top;
  border: 1px solid var(--frm-gold);
  background: var(--paper-3);
}
#screen .lk-ava-txt {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "Ma Shan Zheng", "Noto Serif SC", serif; font-size: 13px; line-height: 1;
  color: var(--paper); background: color-mix(in srgb, var(--log-npc) 85%, var(--ink));
}
/* 敌人：名字 + 血量小字 + 底沿血条 */
#screen .lk-mob { color: var(--log-mob); border-color: color-mix(in srgb, var(--log-mob) 40%, transparent); padding-bottom: 2px; }
#screen .lk-hp { font-size: 10.5px; color: var(--ink-soft); letter-spacing: 0; }
#screen .lk-hpbar {
  position: absolute; left: 5px; right: 5px; bottom: 2px; height: 2px;
  background: linear-gradient(90deg, var(--hp) var(--pct, 100%), color-mix(in srgb, var(--hp) 15%, transparent) var(--pct, 100%));
  border-radius: 1px;
}
#screen .lk-item { color: var(--log-item); }
/* 可做 / 可采 / 可钓：动作牌朱砂字 + 英文命令小字 */
#screen .lk-act { color: var(--vermilion); }
#screen .lk-cmd {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10px; letter-spacing: 0;
  color: var(--ink-soft); opacity: 0.75;
  background: none; padding: 0;
}
#screen .lk-note { color: var(--log-desc); }
/* 深色三套：朱砂小字落在墨底上只有 3 左右的对比度，换成各主题自己的日志红 */
[data-theme="night"] #screen :is(.lk-act:not(:hover), .lk-dir, .lk-news-item > b),
[data-theme="indigo"] #screen :is(.lk-act:not(:hover), .lk-dir, .lk-news-item > b),
[data-theme="blood"] #screen :is(.lk-act:not(:hover), .lk-dir, .lk-news-item > b) { color: var(--log-mob); }
:is([data-theme="night"], [data-theme="indigo"], [data-theme="blood"]) .quickbar .qb-g-dir > button:not(:hover) { color: var(--log-mob); }
#screen .lk-aside { font-size: 11px; color: var(--ink-soft); opacity: 0.85; }
/* 江湖近况：一行摘要，多于一桩时 <details> 点开 */
#screen .lk-row-news { color: var(--log-text); font-weight: 400; }
#screen .lk-news { min-width: 0; }
#screen .lk-news > summary { list-style: none; cursor: pointer; line-height: 26px; }
#screen .lk-news > summary::-webkit-details-marker { display: none; }
#screen .lk-news-item { line-height: 26px; }
#screen .lk-news-item > b { font-weight: 500; color: var(--vermilion); }
#screen .lk-news-more {
  margin-left: 8px;
  font-family: var(--kick-font); font-size: 11px; letter-spacing: 0.08em;
  color: var(--sh-kicker);
  border-bottom: 1px dotted color-mix(in srgb, var(--sh-kicker) 60%, transparent);
}
#screen .lk-news-more::after { content: "等 " attr(data-n) " 桩 · 展开"; }
#screen .lk-news[open] .lk-news-more::after { content: "收起"; }
#screen .lk-news-list { display: flex; flex-direction: column; }
/* 分隔线：原是一行 44 个「─」，手机上会折成两行 → 画成渐隐金线 + 当中一颗菱形 */
#screen .line.hr {
  position: relative;
  height: 1px; margin: 16px 6% 8px;
  font-size: 0; line-height: 0; color: transparent; overflow: visible;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--frm-gold) 75%, transparent) 25%, color-mix(in srgb, var(--frm-gold) 75%, transparent) 75%, transparent);
}
#screen .line.hr::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 5px; height: 5px; transform: translate(-50%, -50%) rotate(45deg);
  background: var(--frm-gold);
}

/* ============= 底栏 · 操作台（快捷栏 + 命令行）============= */
.quickbar {
  background: linear-gradient(180deg, var(--sh-dock-hi) 0%, var(--sh-dock) 100%);
  border-top: 1px solid var(--sh-line);
  padding: 8px 12px 7px;
  gap: 4px;
  /* 单行：原样式 1280 宽折成两行，日志正文被挤到只剩 3 行。按钮压紧后 1280 起一行放得下；
     更窄放不下时横滑（滚轮也能滑 · commands.js 快捷栏段），细滚动条 + 右端渐隐提示后面还有。 */
  flex-wrap: nowrap;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--sh-line) transparent;
}
.quickbar.qb-overflow {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
          mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}
.quickbar::-webkit-scrollbar { height: 4px; }
.quickbar::-webkit-scrollbar-thumb { background: var(--sh-line); border-radius: 2px; }
.quickbar > button { flex: 0 0 auto; }
.quickbar.qb-overflow::after { content: ""; flex: 0 0 18px; }   /* 末尾留白，最后一个按钮滑到底时不被渐隐吃掉 */
.quickbar::before {
  left: 0; right: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--sh-accent) 55%, transparent), transparent);
}
.quickbar button {
  position: relative;
  background: var(--sh-btn);
  border: 1px solid var(--sh-btn-line);
  color: var(--sh-btn-text);
  font-family: var(--kick-font);
  font-weight: 500;
  font-size: 12.5px;
  padding: 5px 9px;
  letter-spacing: 0.06em;
  box-shadow: none;
}
.quickbar button:hover {
  background: var(--sh-btn);
  color: var(--sh-hover);
  border-color: var(--sh-hover);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--sh-hover) 18%, transparent);
}
.quickbar button.qb-menu {
  background: var(--sh-menu);
  border-color: var(--sh-menu-line);
  color: var(--sh-menu-text);
}
.quickbar button.qb-menu:hover {
  background: var(--sh-menu);
  border-color: var(--sh-hover);
  color: var(--sh-hover);
}
/* 续 49 · 分组（commands.js 每组包一个 .qb-group）：常用 | 方位盘 | 玩法面板（带小图标）| 面板·帮助·攻略·留言板（顶栏也有 → 素字不加框）*/
.qb-group { position: relative; flex: 0 0 auto; display: flex; align-items: center; gap: 4px; }
.qb-group + .qb-group { margin-left: 9px; }
.qb-group + .qb-group::before {
  content: ""; position: absolute; left: -5.5px; top: 4px; bottom: 4px; width: 1px;
  background: var(--sh-line);
}
/* 方位盘：北南东西连成一块牌子，左边一枚四角星罗盘 */
.qb-g-dir { gap: 0; padding-left: 21px; }
.qb-g-dir::after {
  content: ""; position: absolute; left: 1px; top: 50%; width: 16px; height: 16px;
  transform: translateY(-50%);
  background: var(--sh-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'%3E%3Cpath d='M8 .8 9.4 6.6 15.2 8 9.4 9.4 8 15.2 6.6 9.4.8 8 6.6 6.6z'/%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 16 16' fill='black'%3E%3Cpath d='M8 .8 9.4 6.6 15.2 8 9.4 9.4 8 15.2 6.6 9.4.8 8 6.6 6.6z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.quickbar .qb-g-dir > button {
  border-radius: 0; margin-left: -1px;
  padding-left: 9px; padding-right: 9px;
  color: var(--vermilion);
  font-weight: 600;
  background: linear-gradient(180deg, var(--sh-btn), color-mix(in srgb, var(--sh-accent) 9%, var(--sh-btn)));
}
.quickbar .qb-g-dir > button:first-child { margin-left: 0; border-radius: 3px 0 0 3px; }
.quickbar .qb-g-dir > button:last-child { border-radius: 0 3px 3px 0; }
.quickbar .qb-g-dir > button:hover { z-index: 1; color: var(--sh-hover); }
/* 玩法面板：字前一枚线描小图标（mask 着色 → 五套主题自动换色）*/
.quickbar button.qb-menu::before {
  content: ""; display: inline-block; width: 14px; height: 14px;
  margin: 0 4px 0 -1px; vertical-align: -2px;
  background: var(--sh-accent);
  -webkit-mask: var(--qb-ico) center / contain no-repeat;
          mask: var(--qb-ico) center / contain no-repeat;
}
.quickbar button.qb-menu:hover::before { background: currentColor; }
.quickbar button[data-c="武学"] { --qb-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 2.5 6.6 9.4M4.6 8.2l3.2 3.2M5.7 10.3 3 13'/%3E%3Ccircle cx='2.6' cy='13.4' r='.8'/%3E%3C/svg%3E"); }
.quickbar button[data-c="派系任务"] { --qb-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 14.5V1.8M3.5 2.5h8.8l-2 3 2 3H3.5'/%3E%3C/svg%3E"); }
.quickbar button[data-c="missions"] { --qb-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='2.5' width='9' height='11' rx='1.4'/%3E%3Cpath d='M6 6h4M6 8.5h4M6 11h2.4'/%3E%3C/svg%3E"); }
.quickbar button[data-c="线索"] { --qb-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6.8' cy='6.8' r='4'/%3E%3Cpath d='m9.8 9.8 3.7 3.7'/%3E%3C/svg%3E"); }
.quickbar button[data-c="活动"] { --qb-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 1.5V3M5.2 3.6h5.6M5.2 12.4h5.6M8 12.4v2.1'/%3E%3Cellipse cx='8' cy='8' rx='4' ry='4.4'/%3E%3Cpath d='M8 3.6v8.8'/%3E%3C/svg%3E"); }
.quickbar button[data-c="江湖大事"] { --qb-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11.5C4 6.3 5.6 3.6 8 3.6s4 2.7 4 7.9zM2.8 11.5h10.4M8 2v1.6M6.8 13.3a1.2 1.2 0 0 0 2.4 0'/%3E%3C/svg%3E"); }
.quickbar button[data-c="江湖身份"] { --qb-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.2' y='8' width='9.6' height='4.6' rx='1'/%3E%3Cpath d='M6.4 8V5.4a1.6 1.6 0 0 1 3.2 0V8M2.8 14.6h10.4'/%3E%3C/svg%3E"); }
.quickbar button[data-c="神兵谱"] { --qb-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 3 10 10M13 3 3 13M2.4 10.6l3 3M13.6 10.6l-3 3'/%3E%3C/svg%3E"); }
/* 面板 / 帮助 / 攻略 / 留言板：顶栏已有同名入口，这里压成素字，不再和玩法按钮一样重 */
.quickbar .qb-g-util > button {
  background: transparent; border-color: transparent; box-shadow: none;
  color: var(--sh-text);
  padding-left: 6px; padding-right: 6px;
}
.quickbar .qb-g-util > button:hover {
  background: transparent; border-color: transparent; box-shadow: none;
  color: var(--sh-hover);
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, var(--sh-hover) 50%, transparent);
}
.cmd-row {
  background: var(--sh-dock);
  border-top: 1px solid color-mix(in srgb, var(--sh-line) 70%, transparent);
  box-shadow: none;
  padding: 8px 14px 10px;
}
#prompt {
  background: linear-gradient(160deg, var(--vermilion), var(--vermilion-2));
  color: #fff3df;
  box-shadow: inset 0 0 0 1.5px rgba(255, 243, 223, 0.35), 0 1px 3px rgba(60, 30, 10, 0.35);
}
#cmd {
  background: var(--sh-field);
  border: 1px solid var(--sh-line);
  color: var(--sh-field-text);
  caret-color: var(--vermilion);
}
#cmd::placeholder { color: var(--sh-ph); font-style: normal; letter-spacing: 0.08em; }
#cmd:focus {
  background: var(--sh-field-focus);
  border-color: var(--sh-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sh-accent) 16%, transparent);
}
#cmd-send { outline-color: color-mix(in srgb, var(--sh-accent) 30%, transparent); }

/* ============= 浮动件 ============= */
#chat-toggle {
  background: var(--sh-chat-bg);
  color: var(--sh-chat-text);
  border: 1px solid var(--sh-chat-line);
  border-radius: 2px;
  box-shadow: 0 4px 14px rgba(40, 20, 5, 0.3), inset 0 1px 0 rgba(255, 240, 210, 0.15);
  letter-spacing: 0.3em;
}
#chat-toggle:hover { background: var(--sh-chat-bg); filter: brightness(1.1); }   /* 盖掉 style.css 悬停换朱砂底（深色主题金字落红底只剩 2.4）*/
.footer-seal { display: none; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--frm-gold) 55%, transparent); }

/* =====================================================================
   子页面 · 弹窗
   ===================================================================== */

/* 老 bug 修：26e 层（style.css「战斗 modal 卷轴风」段）一句 `.modal{position:relative}`
   盖掉了全屏定位 —— 遮罩只有内容那么高（下半屏日志区不变暗），弹窗也贴在顶上不居中。 */
#modal-root .modal {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 3vh 2vw;
  background: radial-gradient(ellipse 80% 70% at 50% 45%, var(--sh-dim-in), var(--sh-dim-out));
  backdrop-filter: blur(4px) saturate(0.85);
}
#modal-root .modal:not(.modal-battle):not(.bigmap) > .panel {
  border: 1px solid var(--frm-gold);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 0 0 5px var(--sh-ring),
    0 0 0 6px color-mix(in srgb, var(--frm-gold) 70%, transparent),
    0 26px 60px rgba(0, 0, 0, 0.5);
  max-height: 88vh;
}
#modal-root .modal > .panel::after {
  inset: 6px;
  border-color: color-mix(in srgb, var(--frm-gold) 38%, transparent);
}

/* 普通弹窗标题：书法 + 渐隐金线 */
#modal-root .modal h3:first-child {
  border-bottom: none;
  padding-bottom: 10px;
  margin-bottom: 12px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--frm-gold) 75%, transparent), transparent 85%)
    left bottom / 100% 1px no-repeat;
}

/* 按钮：去纸色方盒，改描金细框；主按钮朱砂 */
#modal-root .modal button {
  border-color: color-mix(in srgb, var(--frm-gold) 70%, transparent);
  background: var(--sh-mbtn);
  border-radius: 2px;
}
#modal-root .modal button:hover {
  background: var(--sh-mbtn-hover-bg);
  color: var(--sh-mbtn-hover-text);
  border-color: var(--sh-mbtn-hover-line);
}
#modal-root .modal button.primary,
#modal-root .modal button.primary:hover {
  background: linear-gradient(180deg, var(--vermilion), var(--vermilion-2));
  color: #fff5e6;
  border-color: var(--vermilion-2);
}

/* 弹窗里的「卡片」：各系统 JS 里内联写的 `border:1px solid #b8987a` 方框 → 统一描金卡 */
#modal-root .panel div[style*="border:1px solid #b8987a"] {
  border-color: color-mix(in srgb, var(--frm-gold) 55%, transparent) !important;
  border-radius: 2px !important;
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--frm-gold) 80%, transparent),
              0 1px 0 rgba(255, 255, 255, 0.35);
}

/* 深色主题（夜战 / 夜行 / 血战）：各系统弹窗里 JS 内联写死的棕墨字（#5a3a20 ×162 处 /
   #786858 ×148 / #3a2a1a ×16）与浅米卡底是照古籍主题配的，深底上几乎看不见。
   只在三套深色主题里把它们拉回主题墨色、卡底压暗；古籍 / 沧澜不动。 */
[data-theme="night"] #modal-root .panel [style*="color:#5a3a20"],
[data-theme="indigo"] #modal-root .panel [style*="color:#5a3a20"],
[data-theme="blood"] #modal-root .panel [style*="color:#5a3a20"],
[data-theme="night"] #modal-root .panel [style*="color:#3a2a1a"],
[data-theme="indigo"] #modal-root .panel [style*="color:#3a2a1a"],
[data-theme="blood"] #modal-root .panel [style*="color:#3a2a1a"] { color: var(--ink-2) !important; }
[data-theme="night"] #modal-root .panel [style*="color:#786858"],
[data-theme="indigo"] #modal-root .panel [style*="color:#786858"],
[data-theme="blood"] #modal-root .panel [style*="color:#786858"] { color: var(--ink-soft) !important; }
[data-theme="night"] #modal-root .panel div[style*="border:1px solid #b8987a"],
[data-theme="indigo"] #modal-root .panel div[style*="border:1px solid #b8987a"],
[data-theme="blood"] #modal-root .panel div[style*="border:1px solid #b8987a"] {
  background: color-mix(in srgb, var(--paper-3) 70%, transparent) !important;
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--frm-gold) 80%, transparent);
}

[data-theme="night"] .side-pane .combat-grid .combat-cell,
[data-theme="indigo"] .side-pane .combat-grid .combat-cell,
[data-theme="blood"] .side-pane .combat-grid .combat-cell { background: var(--paper-2); }

[data-theme="night"] #modal-root .modal button.primary,
[data-theme="indigo"] #modal-root .modal button.primary,
[data-theme="blood"] #modal-root .modal button.primary {
  /* 深色主题的朱砂调得偏亮（夜行 #d4625a），奶白字只有 3.6 → 用压深一档的 */
  background: linear-gradient(180deg, var(--vermilion-2), color-mix(in srgb, var(--vermilion-2) 72%, #000));
}

/* 个人面板页签（_panelHeader 内联样式的 5 个按钮）→ 页内标签条 */
#modal-root .modal button[data-ptab] {
  background: transparent !important;
  color: var(--ink-soft) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 8px 14px !important;
  letter-spacing: 0.2em;
  font-weight: 500 !important;
}
#modal-root .modal button[data-ptab]:hover { color: var(--ink) !important; }
/* 当前页签：_panelHeader 给它内联了 background:var(--gold) —— 借这个认出来 */
#modal-root .modal button[data-ptab][style*="background:var(--gold)"] {
  color: var(--ink) !important;
  border-bottom-color: var(--vermilion) !important;
}
#modal-root .modal .row:has(> button[data-ptab]) {
  border-bottom: 1px solid color-mix(in srgb, var(--frm-gold) 45%, transparent);
  gap: 0 !important;
}

/* ---------- 页面型弹窗横幅（src/ui/modal_hero.js 注入 .mh-hero）---------- */
#modal-root .modal > .panel.has-hero {
  --mh-px: 26px; --mh-py: 22px;
  width: min(880px, 94vw);
  max-width: 880px;
  padding-top: 0;
}
#modal-root .modal.panel-modal > .panel.has-hero { width: min(860px, 94vw); max-width: 860px; }
.mh-hero {
  position: relative;
  margin: 0 calc(-1 * var(--mh-px)) 16px;
  min-height: 150px;
  display: flex; align-items: flex-end;
  padding: 30px var(--mh-px) 18px;
  overflow: hidden;
  border-bottom: 1px solid var(--frm-gold);
  background: var(--sh-wash);
  z-index: 2;
}
.mh-hero-art {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover;
  background-position: center 40%;   /* 底图与个别取景由 modal_hero.js 写在元素 style 上 */
  filter: saturate(0.95) contrast(1.05);
  transform: scale(1.02);
}
/* 左侧压一层（浅色主题 = 纸，画淡入纸面；深色 = 墨）让字立住，右侧留画 */
.mh-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--sh-wash) 94%, transparent) 0%,
      color-mix(in srgb, var(--sh-wash) 78%, transparent) 34%,
      color-mix(in srgb, var(--sh-wash) 20%, transparent) 72%,
      color-mix(in srgb, var(--sh-wash) 5%, transparent) 100%),
    linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--sh-wash) 45%, transparent) 100%);
}
/* 底沿金线 + 右上角金折角 */
.mh-hero::after {
  content: ""; position: absolute; z-index: 2;
  top: 10px; right: 10px; width: 22px; height: 22px;
  border-top: 1px solid var(--sh-hero-kick); border-right: 1px solid var(--sh-hero-kick);
  opacity: 0.8;
}
.mh-hero-txt { position: relative; z-index: 3; min-width: 0; }
.mh-kicker {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--kick-font);
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--sh-hero-kick);
  margin-bottom: 8px;
}
.mh-kicker { text-shadow: 0 0 6px var(--sh-wash), 0 0 2px var(--sh-wash); }   /* 引题有时压在画上，垫一圈纸色晕保可读 */
.mh-kicker .mh-dash { width: 26px; height: 1px; background: var(--sh-hero-kick); flex: 0 0 auto; }
.mh-kicker em { font-style: normal; font-size: 9.5px; letter-spacing: 0.38em; color: var(--sh-hero-sub); }
#modal-root .modal .mh-hero h3,
#modal-root .modal .mh-hero h3:first-child {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  font-family: "Ma Shan Zheng", "Noto Serif SC", serif !important;
  font-size: 38px !important;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.14em;
  color: var(--sh-hero-title) !important;
  text-shadow: var(--sh-hero-shadow);
}
#modal-root .modal .mh-hero h3 small {
  font-family: "Noto Serif SC", serif;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--sh-hero-sub) !important;
  text-shadow: none;
}
.mh-hero .mh-meta {
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--sh-hero-sub);
}

/* ---------- NPC 对话弹窗 → 人物档案版式（左整高立绘 · 右引题 + 大名）---------- */
#modal-root .modal > .panel.has-npc-portrait {
  width: min(860px, 92vw);
  max-width: 860px;
  padding: 0;
}
#modal-root .panel.has-npc-portrait .npc-modal-flex { gap: 0; align-items: stretch; min-height: 380px; }
#modal-root .panel.has-npc-portrait .npc-modal-flex > .npc-portrait-modal {
  flex: 0 0 38%;
  max-width: 330px;
  min-height: 380px;
  border: none;
  border-right: 1px solid var(--frm-gold);
  border-radius: 0;
  background: var(--sh-portrait-bg);
  object-fit: cover;
  object-position: top center;
}
#modal-root .panel.has-npc-portrait .npc-modal-body { padding: 28px 30px 22px; }
#modal-root .panel.has-npc-portrait .npc-modal-body > h3:first-child {
  font-size: 32px !important;
  letter-spacing: 0.16em;
  color: var(--ink) !important;
  padding-bottom: 12px;
  margin-bottom: 14px;
}
#modal-root .panel.has-npc-portrait .npc-modal-body > h3:first-child::before {
  content: attr(data-kicker);   /* modal_hero.js 按标题写：门派页 →「门墙之内 · SECT AFFAIRS」，其余「江湖人物 · CHARACTER」 */
  display: block;
  margin-bottom: 10px;
  font-family: var(--kick-font);
  font-size: 10.5px;
  letter-spacing: 0.32em;
  color: var(--sh-hero-kick);   /* 原用 --gold-2，浅色纸上只有 3.7 */
  text-shadow: none;
}

/* ---------- 大地图弹窗：不加横幅，只把标题条收紧 ---------- */
#modal-root .modal.bigmap > .panel { max-height: 94vh; }

/* =====================================================================
   华丽层（用户：「布局不太好看 · 也不够华丽」）
   纹样全是内联 SVG 当遮罩（mask），颜色走变量 —— 5 套主题自动换金色。
     · 云纹角花：面板四角（.panel > .corner 四个 span 原本就在 DOM 里）+ 弹窗四角
     · 回纹饰带：顶栏下沿、弹窗页头下沿
     · 牌匾式小标题：侧栏 h2
     · 地点横幅：城内视图「你在此处」从细条改成带城景的大横幅
     · 人物卡：侧栏顶部铺水墨画，头像金边双圈
   ===================================================================== */
:root {
  --orn-corner-tr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='matrix%28-1 0 0 1 44 0%29'%3E%3Cpath d='M2 42V14Q2 2 14 2H42' stroke-width='1.5'/%3E%3Cpath d='M6.5 42V16.5Q6.5 6.5 16.5 6.5H42' stroke-width='.8' opacity='.6'/%3E%3Cpath d='M7 25Q7 14 15.5 14Q21 14 21 19.5Q21 24 16.8 24Q13.5 24 13.5 21Q13.5 18.6 16 18.6' stroke-width='1.25'/%3E%3Cpath d='M30 2Q30 6.5 25 6.5M2 30Q6.5 30 6.5 25' stroke-width='1' opacity='.7'/%3E%3C/g%3E%3C/svg%3E");
  --orn-corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 42V14Q2 2 14 2H42' stroke-width='1.5'/%3E%3Cpath d='M6.5 42V16.5Q6.5 6.5 16.5 6.5H42' stroke-width='.8' opacity='.6'/%3E%3Cpath d='M7 25Q7 14 15.5 14Q21 14 21 19.5Q21 24 16.8 24Q13.5 24 13.5 21Q13.5 18.6 16 18.6' stroke-width='1.25'/%3E%3Cpath d='M30 2Q30 6.5 25 6.5M2 30Q6.5 30 6.5 25' stroke-width='1' opacity='.7'/%3E%3C/svg%3E");
  --orn-fret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23000' stroke-width='.9'%3E%3Cpath d='M0 7.5H12M2 7.5V1H10V5.5H5V3.2H7.8'/%3E%3C/svg%3E");
}

/* —— 云纹角花（替换 L 形折角）—— */
.panel > .corner {
  width: 44px; height: 44px;
  border: 0 !important;
  background: var(--frm-gold);
  -webkit-mask: var(--orn-corner) no-repeat center / contain;
          mask: var(--orn-corner) no-repeat center / contain;
}
.panel > .corner::before { display: none; }
.panel > .corner.tl { top: -1px; left: -1px; }
.panel > .corner.tr { top: -1px; right: -1px; transform: scaleX(-1); }
.panel > .corner.bl { bottom: -1px; left: -1px; transform: scaleY(-1); }
.panel > .corner.br { bottom: -1px; right: -1px; transform: scale(-1, -1); }

/* —— 会滚动的框（侧栏 / 长弹窗）：子元素会跟着内容滚走，下沿两朵角花改画进框自己的背景
   （背景默认不随内容滚动）。背景图不能走 mask 换色，所以每套主题把金色烘进 SVG。—— */
:root, [data-theme="default"] { --orn-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' fill='none' stroke='%23a98446' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='matrix%281 0 0 -1 0 44%29'%3E%3Cpath d='M2 42V14Q2 2 14 2H42' stroke-width='1.5'/%3E%3Cpath d='M6.5 42V16.5Q6.5 6.5 16.5 6.5H42' stroke-width='.8' opacity='.6'/%3E%3Cpath d='M7 25Q7 14 15.5 14Q21 14 21 19.5Q21 24 16.8 24Q13.5 24 13.5 21Q13.5 18.6 16 18.6' stroke-width='1.25'/%3E%3Cpath d='M30 2Q30 6.5 25 6.5M2 30Q6.5 30 6.5 25' stroke-width='1' opacity='.7'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' fill='none' stroke='%23a98446' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='matrix%28-1 0 0 -1 44 44%29'%3E%3Cpath d='M2 42V14Q2 2 14 2H42' stroke-width='1.5'/%3E%3Cpath d='M6.5 42V16.5Q6.5 6.5 16.5 6.5H42' stroke-width='.8' opacity='.6'/%3E%3Cpath d='M7 25Q7 14 15.5 14Q21 14 21 19.5Q21 24 16.8 24Q13.5 24 13.5 21Q13.5 18.6 16 18.6' stroke-width='1.25'/%3E%3Cpath d='M30 2Q30 6.5 25 6.5M2 30Q6.5 30 6.5 25' stroke-width='1' opacity='.7'/%3E%3C/g%3E%3C/svg%3E"); }
[data-theme="canglan"] { --orn-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' fill='none' stroke='%238f8160' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='matrix%281 0 0 -1 0 44%29'%3E%3Cpath d='M2 42V14Q2 2 14 2H42' stroke-width='1.5'/%3E%3Cpath d='M6.5 42V16.5Q6.5 6.5 16.5 6.5H42' stroke-width='.8' opacity='.6'/%3E%3Cpath d='M7 25Q7 14 15.5 14Q21 14 21 19.5Q21 24 16.8 24Q13.5 24 13.5 21Q13.5 18.6 16 18.6' stroke-width='1.25'/%3E%3Cpath d='M30 2Q30 6.5 25 6.5M2 30Q6.5 30 6.5 25' stroke-width='1' opacity='.7'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' fill='none' stroke='%238f8160' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='matrix%28-1 0 0 -1 44 44%29'%3E%3Cpath d='M2 42V14Q2 2 14 2H42' stroke-width='1.5'/%3E%3Cpath d='M6.5 42V16.5Q6.5 6.5 16.5 6.5H42' stroke-width='.8' opacity='.6'/%3E%3Cpath d='M7 25Q7 14 15.5 14Q21 14 21 19.5Q21 24 16.8 24Q13.5 24 13.5 21Q13.5 18.6 16 18.6' stroke-width='1.25'/%3E%3Cpath d='M30 2Q30 6.5 25 6.5M2 30Q6.5 30 6.5 25' stroke-width='1' opacity='.7'/%3E%3C/g%3E%3C/svg%3E"); }
[data-theme="night"] { --orn-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' fill='none' stroke='%237a5f31' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='matrix%281 0 0 -1 0 44%29'%3E%3Cpath d='M2 42V14Q2 2 14 2H42' stroke-width='1.5'/%3E%3Cpath d='M6.5 42V16.5Q6.5 6.5 16.5 6.5H42' stroke-width='.8' opacity='.6'/%3E%3Cpath d='M7 25Q7 14 15.5 14Q21 14 21 19.5Q21 24 16.8 24Q13.5 24 13.5 21Q13.5 18.6 16 18.6' stroke-width='1.25'/%3E%3Cpath d='M30 2Q30 6.5 25 6.5M2 30Q6.5 30 6.5 25' stroke-width='1' opacity='.7'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' fill='none' stroke='%237a5f31' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='matrix%28-1 0 0 -1 44 44%29'%3E%3Cpath d='M2 42V14Q2 2 14 2H42' stroke-width='1.5'/%3E%3Cpath d='M6.5 42V16.5Q6.5 6.5 16.5 6.5H42' stroke-width='.8' opacity='.6'/%3E%3Cpath d='M7 25Q7 14 15.5 14Q21 14 21 19.5Q21 24 16.8 24Q13.5 24 13.5 21Q13.5 18.6 16 18.6' stroke-width='1.25'/%3E%3Cpath d='M30 2Q30 6.5 25 6.5M2 30Q6.5 30 6.5 25' stroke-width='1' opacity='.7'/%3E%3C/g%3E%3C/svg%3E"); }
[data-theme="indigo"] { --orn-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' fill='none' stroke='%234f6a9c' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='matrix%281 0 0 -1 0 44%29'%3E%3Cpath d='M2 42V14Q2 2 14 2H42' stroke-width='1.5'/%3E%3Cpath d='M6.5 42V16.5Q6.5 6.5 16.5 6.5H42' stroke-width='.8' opacity='.6'/%3E%3Cpath d='M7 25Q7 14 15.5 14Q21 14 21 19.5Q21 24 16.8 24Q13.5 24 13.5 21Q13.5 18.6 16 18.6' stroke-width='1.25'/%3E%3Cpath d='M30 2Q30 6.5 25 6.5M2 30Q6.5 30 6.5 25' stroke-width='1' opacity='.7'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' fill='none' stroke='%234f6a9c' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='matrix%28-1 0 0 -1 44 44%29'%3E%3Cpath d='M2 42V14Q2 2 14 2H42' stroke-width='1.5'/%3E%3Cpath d='M6.5 42V16.5Q6.5 6.5 16.5 6.5H42' stroke-width='.8' opacity='.6'/%3E%3Cpath d='M7 25Q7 14 15.5 14Q21 14 21 19.5Q21 24 16.8 24Q13.5 24 13.5 21Q13.5 18.6 16 18.6' stroke-width='1.25'/%3E%3Cpath d='M30 2Q30 6.5 25 6.5M2 30Q6.5 30 6.5 25' stroke-width='1' opacity='.7'/%3E%3C/g%3E%3C/svg%3E"); }
[data-theme="blood"] { --orn-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' fill='none' stroke='%237e3a2a' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='matrix%281 0 0 -1 0 44%29'%3E%3Cpath d='M2 42V14Q2 2 14 2H42' stroke-width='1.5'/%3E%3Cpath d='M6.5 42V16.5Q6.5 6.5 16.5 6.5H42' stroke-width='.8' opacity='.6'/%3E%3Cpath d='M7 25Q7 14 15.5 14Q21 14 21 19.5Q21 24 16.8 24Q13.5 24 13.5 21Q13.5 18.6 16 18.6' stroke-width='1.25'/%3E%3Cpath d='M30 2Q30 6.5 25 6.5M2 30Q6.5 30 6.5 25' stroke-width='1' opacity='.7'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' fill='none' stroke='%237e3a2a' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='matrix%28-1 0 0 -1 44 44%29'%3E%3Cpath d='M2 42V14Q2 2 14 2H42' stroke-width='1.5'/%3E%3Cpath d='M6.5 42V16.5Q6.5 6.5 16.5 6.5H42' stroke-width='.8' opacity='.6'/%3E%3Cpath d='M7 25Q7 14 15.5 14Q21 14 21 19.5Q21 24 16.8 24Q13.5 24 13.5 21Q13.5 18.6 16 18.6' stroke-width='1.25'/%3E%3Cpath d='M30 2Q30 6.5 25 6.5M2 30Q6.5 30 6.5 25' stroke-width='1' opacity='.7'/%3E%3C/g%3E%3C/svg%3E"); }
.side-pane.panel {
  background:
    var(--orn-bottom),
    linear-gradient(180deg, color-mix(in srgb, var(--paper) 92%, var(--ink)) 0%, var(--paper) 8%, var(--paper) 92%, color-mix(in srgb, var(--paper) 92%, var(--ink)) 100%),
    radial-gradient(ellipse 80% 70% at 12% 6%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 58%),
    radial-gradient(ellipse 78% 66% at 90% 97%, color-mix(in srgb, var(--ink) 11%, transparent), transparent 60%),
    var(--paper);
  background-position: left -1px bottom -1px, right -1px bottom -1px, 0 0, 0 0, 0 0;
  background-size: 44px 44px, 44px 44px, auto, auto, auto;
  background-repeat: no-repeat;
}
.side-pane.panel > .corner.bl,
.side-pane.panel > .corner.br { display: none; }
#modal-root .modal:not(.modal-battle):not(.bigmap) > .panel {
  background:
    var(--orn-bottom),
    radial-gradient(ellipse at 12% 18%, color-mix(in srgb, var(--gold) 14%, transparent) 0%, transparent 30%),
    linear-gradient(135deg, var(--paper) 0%, var(--paper-2) 100%);
  background-position: left bottom, right bottom, 0 0, 0 0;
  background-size: 44px 44px, 44px 44px, auto, auto;
  background-repeat: no-repeat;
}

/* —— 回纹饰带：顶栏下沿（落在顶栏与三栏之间那条缝里）—— */
body > header::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 7px;
  background: var(--sh-accent);
  -webkit-mask: var(--orn-fret) repeat-x left center / 12px 7px;
          mask: var(--orn-fret) repeat-x left center / 12px 7px;
  opacity: .42; pointer-events: none; z-index: 1;
}

/* —— 侧栏小标题 → 牌匾：上下金线夹住，居中，两侧菱形 —— */
.side-pane h2 {
  justify-content: center;
  gap: 10px;
  margin: 16px 0 10px;
  padding: 6px 0 5px;
  font-size: 15px;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  border-top: 1px solid color-mix(in srgb, var(--frm-gold) 70%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--frm-gold) 70%, transparent);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold) 13%, transparent) 30%, color-mix(in srgb, var(--gold) 13%, transparent) 70%, transparent);
}
.side-pane h2::before,
.side-pane h2::after {
  content: ""; flex: 0 0 auto;
  width: 5px; height: 5px; margin: 0;
  background: var(--vermilion);
  transform: rotate(45deg);
  box-shadow: none;
}
.side-pane h2 > * { text-indent: 0; }

/* —— 人物卡：侧栏顶部铺一幅画，头像金边双圈 —— */
.side-pane > .char-header {
  position: relative;
  margin: 0 -16px 8px;
  padding: 52px 16px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--frm-gold) 55%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--paper) 10%, transparent) 0%, color-mix(in srgb, var(--paper) 55%, transparent) 50%, var(--paper) 88%),
    url('../assets/scenes/scene-moon-peak.jpg') center 30% / cover no-repeat;
}
.side-pane > .char-header #avatar-slot {
  width: 72px; height: 72px;
  border: 2px solid var(--frm-gold);
  outline: 1px solid color-mix(in srgb, var(--frm-gold) 55%, transparent);
  outline-offset: 3px;
  box-shadow: 0 4px 14px rgba(60, 40, 15, .3), inset 0 0 10px color-mix(in srgb, var(--ink) 12%, transparent);
}
.side-pane .char-info .char-name { font-size: 20px; letter-spacing: 0.1em; }

/* —— 城内视图：「你在此处」→ 城景地点横幅 —— */
.ward-head { align-items: stretch; gap: 12px; }
.ward-here {
  position: relative; overflow: hidden;
  min-height: 92px;
  padding: 14px 22px 13px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px;
  border: 1px solid var(--frm-gold);
  border-radius: 2px;
  background:
    linear-gradient(90deg, var(--paper) 0%, color-mix(in srgb, var(--paper) 92%, transparent) 30%, color-mix(in srgb, var(--paper) 35%, transparent) 70%, color-mix(in srgb, var(--paper) 10%, transparent) 100%),
    url('../assets/scenes/scene-city.jpg') right 42% / cover no-repeat;
  box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--paper) 55%, transparent), inset 0 0 0 5px color-mix(in srgb, var(--frm-gold) 40%, transparent);
}
.ward-here-pin { display: none; }
.ward-here-prefix {
  font-family: var(--kick-font); font-size: 11px; letter-spacing: 0.36em; color: var(--sh-hero-kick);
  display: flex; align-items: center; gap: 9px;
}
.ward-here-prefix::before { content: ""; width: 24px; height: 1px; background: var(--sh-hero-kick); }
.ward-here-prefix::after { content: "· YOU ARE HERE"; font-size: 9px; letter-spacing: 0.32em; opacity: .75; }
.ward-here-name { font-size: 34px; line-height: 1.1; letter-spacing: 0.16em; color: var(--ink); text-shadow: var(--sh-hero-shadow); }
.ward-here-tip { margin-left: 0; max-width: 62%; font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }
/* 时辰牌 → 圆章 */
.ward-clock {
  flex-direction: column; justify-content: center; gap: 2px;
  width: 92px; padding: 6px; border-radius: 50%;
  aspect-ratio: 1; align-self: center;
  border: 1px solid var(--frm-gold);
  box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 5px color-mix(in srgb, var(--frm-gold) 45%, transparent);
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--paper) 60%, #fffaf0), var(--paper-2));
  font-size: 13px; text-align: center; color: var(--azure);
}
.ward-clock > span:first-child { font-size: 18px; }

/* 宽屏一行四坊：七坊排两行，「出入 · 城门」不再被挤出地图栏（原三列要三行 + 横幅就溢出了）*/
@media (min-width: 1300px) and (min-height: 600px) {
  .ward-card { flex-basis: 220px; max-width: calc(25% - 9px); min-height: 104px; }
}
/* 坊卡：画框 —— 内衬一圈纸色细框，名字落在一块小牌匾上 */
.ward-card { box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--paper) 45%, transparent), inset 0 0 0 5px color-mix(in srgb, var(--frm-gold) 45%, transparent), 0 3px 10px rgba(70, 45, 15, .16); }
.ward-name { font-size: 22px; letter-spacing: 0.1em; }

/* —— 弹窗：上沿两朵云纹叠在最上层（压得住页头横幅）—— */
#modal-root .modal:not(.modal-battle):not(.bigmap) > .panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 4;
  background: var(--frm-gold);
  bottom: auto; height: 44px;   /* 只画上沿两朵：它们跟页头一起滚走是自然的；下沿两朵在面板背景里（见上）*/
  -webkit-mask-image: var(--orn-corner), var(--orn-corner-tr);
          mask-image: var(--orn-corner), var(--orn-corner-tr);
  -webkit-mask-position: left top, right top;
          mask-position: left top, right top;
  -webkit-mask-size: 44px 44px; mask-size: 44px 44px;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* 页头横幅下沿：回纹饰带 */
.mh-hero { border-bottom: 1px solid var(--frm-gold); margin-bottom: 22px; overflow: visible; }
.mh-hero-art { overflow: hidden; }
.mh-hero::after {
  content: ""; position: absolute; left: 0; right: 0; top: auto; bottom: -13px; width: auto; height: 7px;
  border: 0; opacity: .5;
  background: var(--frm-gold);
  -webkit-mask: var(--orn-fret) repeat-x left center / 12px 7px;
          mask: var(--orn-fret) repeat-x left center / 12px 7px;
}

/* 角色选择页（login.js characterSelectModal · .select-layout）窄屏：style.css 的 ≤720px 块
   只把登录页（.login-layout）改成了竖排，选人页漏了 —— 角色列与「進入江湖」按钮
   仍左右并排，按钮被挤出屏幕右侧只露半截。 */
@media (max-width: 720px) and (orientation: portrait) {
  .login-splash.split.select-layout { flex-direction: column; overflow-y: auto; }
}

/* 桌面窄档：快捷栏四组一行放下（1440 刚好；1366 / 1280 先收紧内边距，再去掉玩法图标）。
   手机两块在后面，会把内边距再压回各自的值；手机本来就横滑，图标保留。 */
@media (max-width: 1419px) {
  .quickbar { gap: 3px; }
  .qb-group:not(.qb-g-dir) { gap: 3px; }   /* 方位盘保持 0 间距连成一块 */
  .qb-group + .qb-group { margin-left: 7px; }
  .qb-group + .qb-group::before { left: -4.5px; }
  .quickbar button { padding-left: 7px; padding-right: 7px; }
  .quickbar .qb-g-dir > button { padding-left: 7px; padding-right: 7px; }
  .quickbar .qb-g-util > button { padding-left: 4px; padding-right: 4px; }
}
@media (min-width: 901px) and (max-width: 1365px) {
  .quickbar button.qb-menu::before { display: none; }
}

/* =====================================================================
   手机 · 把桌面尺寸压回去（规则来源见 style.css 两个手机块）
   ===================================================================== */
@media (max-width: 900px) {
  body > header { min-height: 0; }
  .title-text .sub { display: none; }   /* style.css 900px 块藏了它，上面桌面规则的 display:block 又放了回来 */
}
@media (orientation: landscape) and (max-height: 560px) {
  body > header { min-height: 0; padding: 3px 10px; }
  body > header::after { left: 6%; right: 6%; }
  .title-text .sub { display: none; }
  body > header .actions { gap: 2px; }
  body > header .actions button,
  body > header .actions .tool-btn { font-size: 11px; padding: 4px 8px; letter-spacing: 0.05em; }
  body > header .actions button::after { left: 8px; right: 8px; bottom: 1px; }
  .layout { gap: 6px; padding: 4px 7px 6px; }
  .log-tabs { padding: 2px 8px 0; }
  .log-tabs .ltab { padding: 4px 10px; font-size: 12px; letter-spacing: 0.12em; }
  .quickbar { padding: 4px 8px; gap: 4px; scrollbar-width: none; }
  .quickbar::-webkit-scrollbar { display: none; }
  .quickbar button { padding: 5px 10px; font-size: 12px; letter-spacing: 0.05em; }
  .quickbar .qb-g-dir > button { padding-left: 11px; padding-right: 11px; }   /* 触屏：方位格 ≥36px 宽 */
  .quickbar .qb-g-util > button { padding-left: 8px; padding-right: 8px; }
  .cmd-row { padding: 5px 8px; }
  .side-pane { padding: 8px 9px 52px; }
  .side-pane h2 { font-size: 13px; letter-spacing: 0.3em; margin: 10px 0 6px; }
  .side-pane > .char-header { margin: 0 -9px 6px; padding: 34px 9px 8px; }
  .side-pane > .char-header #avatar-slot { width: 56px; height: 56px; }
  .ward-here { min-height: 70px; padding: 10px 14px; }
  .ward-here-name { font-size: 26px; }
  .ward-clock { width: 72px; font-size: 11px; }
  #modal-root .modal { padding: 2vh 2vw; }
  #modal-root .modal:not(.modal-battle):not(.bigmap) > .panel { max-height: 94vh; }
  #modal-root .modal > .panel.has-hero { --mh-px: 16px; --mh-py: 14px; }
  .mh-hero { min-height: 104px; padding: 18px var(--mh-px) 12px; margin-bottom: 10px; }
  #modal-root .modal .mh-hero h3,
  #modal-root .modal .mh-hero h3:first-child { font-size: 28px !important; }
  #modal-root .panel.has-npc-portrait .npc-modal-flex,
  #modal-root .panel.has-npc-portrait .npc-modal-flex > .npc-portrait-modal { min-height: 300px; }
  #modal-root .panel.has-npc-portrait .npc-modal-body { padding: 18px 20px 14px; }
  #modal-root .panel.has-npc-portrait .npc-modal-body > h3:first-child { font-size: 26px !important; }
  #screen .lk-chip { height: 25px; padding: 0 8px; font-size: 12.5px; }
  #screen .lk-row-kids .lk-chip { height: 23px; padding: 0 7px; font-size: 12px; }
  #screen .lk-npc { height: 27px; padding-left: 3px; }
  #screen .lk-name { font-size: 20px; }
}
@media (orientation: portrait) and (max-width: 820px) {
  body > header { min-height: 0; padding: 4px 10px; }
  body > header::after { left: 4%; right: 4%; }
  body > header .actions { gap: 2px; }
  body > header .actions button,
  body > header .actions .tool-btn { font-size: 11px; padding: 5px 9px; letter-spacing: 0.04em; }
  body > header .actions button::after { left: 9px; right: 9px; bottom: 1px; }
  .layout { gap: 6px; padding: 5px 7px 6px; }
  .log-tabs { padding: 2px 8px 0; }
  .log-tabs .ltab { padding: 5px 11px; font-size: 12.5px; letter-spacing: 0.12em; }
  .quickbar { padding: 5px 8px; gap: 5px; scrollbar-width: none; }
  .quickbar::-webkit-scrollbar { display: none; }
  .quickbar button { padding: 7px 12px; font-size: 12.5px; letter-spacing: 0.04em; }
  .quickbar .qb-g-dir > button { padding-left: 12px; padding-right: 12px; }   /* 触屏：方位格 ≥36px 宽 */
  .quickbar .qb-g-util > button { padding-left: 8px; padding-right: 8px; }
  .cmd-row { padding: 6px 8px; }
  /* 地图栏只有 27vh：地点横幅压成一行（名字 + 引题），简介 / 英文引题收起，时辰圆章缩小 */
  .ward-here { min-height: 0; padding: 7px 12px; gap: 0; }
  .ward-here-prefix::after { display: none; }
  .ward-here-prefix::before { width: 16px; }
  .ward-here-name { font-size: 22px; letter-spacing: 0.1em; }
  .ward-here-tip { display: none; }
  .ward-clock { width: 58px; padding: 4px; font-size: 10.5px; }
  .ward-clock > span:first-child { font-size: 14px; }
  /* 竖屏侧栏是一条状态带：人物卡不铺画、头像本就隐藏 */
  .side-pane > .char-header { background: none; border-bottom: none; }
  .side-pane .char-info .char-name { font-size: 14px; letter-spacing: 0.08em; }   /* 桌面放大到 20px 会把状态带撑高、挤掉日志行数 */
  /* 竖屏侧栏是一条状态带（style.css 竖屏块）—— 右侧给「聊天」按钮留位，底部不用留 */
  .side-pane { padding: 4px 78px 4px 9px; }
  #modal-root .modal { padding: 2vh 3vw; }
  #modal-root .modal:not(.modal-battle):not(.bigmap) > .panel { max-height: 92dvh; }
  #modal-root .modal > .panel.has-hero { --mh-px: 16px; --mh-py: 16px; width: 94vw; }
  .mh-hero { min-height: 112px; padding: 20px var(--mh-px) 14px; }
  #modal-root .modal .mh-hero h3,
  #modal-root .modal .mh-hero h3:first-child { font-size: 28px !important; letter-spacing: 0.08em; }
  .mh-kicker { letter-spacing: 0.22em; font-size: 10.5px; }
  #modal-root .modal > .panel.has-npc-portrait { width: 94vw; }
  #modal-root .panel.has-npc-portrait .npc-modal-flex { flex-direction: column; min-height: 0; }
  #modal-root .panel.has-npc-portrait .npc-modal-flex > .npc-portrait-modal {
    flex: none; width: 100%; max-width: none; min-height: 0; max-height: 34vh;
    border-right: none; border-bottom: 1px solid var(--frm-gold);
  }
  #modal-root .panel.has-npc-portrait .npc-modal-body { padding: 16px 16px 14px; }
  #modal-root .panel.has-npc-portrait .npc-modal-body > h3:first-child { font-size: 24px !important; }
  #screen .lk-chip { height: 25px; padding: 0 8px; font-size: 12.5px; }
  #screen .lk-row-kids .lk-chip { height: 23px; padding: 0 7px; font-size: 12px; }
  #screen .lk-npc { height: 27px; padding-left: 3px; }
  #screen .lk-name { font-size: 20px; }
}