/* 破碎峰岭 · 全局样式（M1：暗色 HUD / 双面板 / 飘字 / 血条；S1 起含设计 token 层） */

/* ==================== S1 · 字体两档（S0b 产出，思源宋 Black / 思源黑 Regular 子集） ==================== */
/* 标题展示字：思源宋体 Black 900（assets/fonts/，1136KB 子集，2026-09-30 文案丰富后重建） */
@font-face {
  font-family: "PSL Serif";
  src: url("../assets/fonts/notoserifsc-black.sub.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
/* 正文可读字：思源黑体 Regular 400（853KB 子集，2026-09-30 文案丰富后重建） */
@font-face {
  font-family: "PSL Sans";
  src: url("../assets/fonts/notosanssc-regular.sub.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ==================== S1 · 设计 token 层（全局唯一取值来源；改观感先改这里） ====================
   r2 换墙（2026-10-02）：锚 B「青瓷刻石」整表取值（docs/design/ui-style-anchors.md §三逐项），
   整表单一锚、禁跨锚拼色（锚册 §八条款）。亮在 UI：L2 瓷白面板 + L4 冰青独占强调；
   局内 HUD 暗底件不换墙（C5：浮在暗场景上，保持暗底玻璃制，见各处注释）。 */
:root {
  /* —— 语义色板 —— */
  --bg-deep: #0C1014;         /* L1 页面底/遮罩基色：冷黑 */
  --bg-panel: #EDF1F4;        /* L2 面板底：冷瓷白 */
  --bg-raise: #F8FAFC;        /* 卡面/按钮底：浮雕凸档 */
  --bg-sunken: #DFE5EB;       /* 阴刻槽：内凹/输入井/行卡底（r1 图标族轮先行落地，r2 并入主表） */
  --line: #9AA7B4;            /* 常规刻线：1px 直线，0.5 网格对齐 */
  --line-dim: #C4CCD4;        /* 弱分隔：行间细分隔/树行边 */
  --carve-weak: #C4CCD4;      /* 刻线三档·弱（原 --line-gold-weak 退役改名，实线） */
  --carve-mid: #9AA7B4;       /* 刻线三档·中：小框件细边/图标描边（原 --line-gold-mid） */
  --carve-strong: #5F7284;    /* 刻线三档·强：选中边/品牌刻线（原 --line-gold-strong） */
  --line-deep: #5F7284;       /* 深刻线：分节标题饰线/强调刻线（r1 先行落地，与 carve-strong 同值） */
  --ornament: #6E8090;        /* 冷银饰：装饰线/HUD 暗底件刻线（--gold/--bronze 系退役后槽位） */
  --accent: #0E6E86;          /* 强调冰青：L4 独占——CTA 填充/选中/链接（只在白面板内用） */
  --accent-glow: #53C6DC;     /* 发光青：只作描边光/重要选择发光，不做语义色 */
  --text-primary: #1A222B;    /* 石墨黑蓝：标题/主文字 */
  --text-secondary: #44515E;  /* 正文蓝灰 */
  --text-tertiary: #5E6B79;   /* 描述 */
  --text-faint: #7E8B9A;      /* 置灰但可读（仅大字/置灰，禁正文） */
  --danger: #B02E24;          /* 危险红：败北/低血警示 */
  /* —— 按钮语义三档 token（[D-01]：primary=冰青填充主操作 / danger=红填充危险 / 默认=凹版刻线边）
     （r2：填充/渐变全部从单一锚授权值 color-mix 派生，零新增 hex）—— */
  --btn-primary-bg: var(--accent); /* L4 冰青填充块（原金渐变退役） */
  --btn-primary-bg-hover: color-mix(in srgb, var(--accent) 86%, #fff);
  --btn-primary-border: var(--accent);
  --btn-primary-text: #F2FBFD; /* CTA 亮字档：兼 C5 暗底 HUD 亮字（对暗底实测 17.7-19:1 ≥7） */
  --btn-danger-bg: linear-gradient(180deg, color-mix(in srgb, var(--danger) 88%, #000), color-mix(in srgb, var(--danger) 62%, #000));
  --btn-danger-border: var(--danger);
  --btn-danger-text: #F2FBFD;
  --btn-bg: var(--bg-sunken);        /* 默认档按钮底（凹版微沉） */
  --btn-bg-hover: var(--bg-raise);   /* 默认档 hover：浮起一档（凹→凸方向差） */
  --heal: #266B3C;            /* 治疗/已拥有绿 */
  --cost: #A64C1C;            /* 代价红（事件分色） */
  --gain: #7E6414;            /* 收益暖金：全站唯一暖点（金币/魂晶专用，只在白面板内用） */
  /* —— 稀有度四色（对齐 data.js DATA.RARITY 顺序：普通/魔法/稀有/史诗）—— */
  --rar-0: #67707A;
  --rar-1: #2A5AB8;
  --rar-2: #8A650A;
  --rar-3: #7C2E9E;
  --coin-glow: color-mix(in srgb, var(--gain) 40%, transparent); /* 货币金光（r1 收编原 rgba 金散值；r2 随 --gain 换值派生） */
  /* —— 退役别名（r2 过渡层）：--gold/--bronze 系退役——css 正文引用已全部改挂上列语义 token，
     别名仅兜漏网引用不断链（JS 侧经 grep 证实零内联引用）；下轮清理后删除 —— */
  --gold: var(--ornament);
  --gold-bright: var(--gain);
  --bronze: var(--ornament);
  --bronze-bright: var(--ornament);
  /* —— 动效 token：两曲线 × 三时长档 + stagger 步长（S5 动效体系统一前，先在过渡处铺开）—— */
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out-soft: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-s: 0.15s;
  --dur-m: 0.25s;
  --dur-l: 0.4s;
  --stagger: 80ms;
  /* —— 字号档（--fs-micro 为全 UI 下限）—— */
  --fs-h1: 30px;
  --fs-display: 40px;         /* S2：大厅标题横幅展示字档（--fs-h1 放大级） */
  --fs-h2: 20px;
  --fs-body: 14px;
  --fs-small: 12px;
  --fs-micro: 11px;
  /* —— 间距档 —— */
  --sp-xs: 4px;
  --sp-s: 8px;
  --sp-m: 12px;
  --sp-l: 16px;
  --sp-xl: 24px;
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg-deep);
  font-family: "PSL Sans", "Microsoft YaHei", sans-serif;
  color: var(--text-secondary);
  line-height: 1.6; /* 正文行高一档：整界面可读性基底（紧凑组件各自覆写不受影响） */
  user-select: none;
}

/* 标题位统一挂展示字族（宋 Black）：正文不受影响，字体缺字回落正文黑体 */
.font-display, h1, h2, h3 {
  font-family: "PSL Serif", "PSL Sans", "Microsoft YaHei", serif;
  font-weight: 900;
  letter-spacing: 0.06em; /* 精致化定档：标题字距统一 0.06em（原 0.02em 过挤） */
}
/* 战斗横幅大字 / Boss 名同为标题位 */
#overlay b, #bossbar b { font-family: "PSL Serif", "PSL Sans", "Microsoft YaHei", serif; font-weight: 900; }
#game { display: block; width: 100vw; height: 100vh; }
#ui, #overlay { position: fixed; inset: 0; pointer-events: none; z-index: 10; }

/* —— 通用条 —— */
.bar {
  position: relative;
  height: 16px;
  background: #1a1512;
  border: 1px solid var(--line); /* r2：冷银刻线（HUD 暗底件，--line 换值即冷） */
  border-radius: 2px;
  overflow: hidden;
}
.bar i {
  display: block;
  height: 100%;
  width: 100%;
  transition: width var(--dur-s) linear; /* S5：0.12s→--dur-s（+30ms 就近）；linear 为条类连续填充特例，不占两曲线档 */
}
.bar span {
  position: absolute;
  inset: 0;
  text-align: center;
  font-size: var(--fs-micro);
  line-height: 16px;
  color: #f0e8d8;
  text-shadow: 0 1px 2px #000;
}
/* 条内残影层（W1-1/W1-9）：绝对定位叠在填充 i 之上、文字 span 之下。
   掉血时前层即时下沉、chip 延迟 0.3s 后用 0.6s ease-out 追平，亮色差形成「血量残影」；
   回血时 chip 比前层窄被前层盖住，天然不可见，无需 JS 特判。
   S3 跳色修：残影语义=中性白金（掉血量提示，不掺红粉语义），血条/Boss 条统一取此色 */
.bar i.chip {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: rgba(255, 225, 180, 0.5);
  transition: width 0.6s var(--ease-out-soft) 0.3s;
}

/* P3-3 第 5 轮（U-05）：三选一卡面快选键帽——左上角 18px 方块（r2 瓷刻：凹版小件+刻线边） */
.ccard .ckey {
  position: absolute;
  left: 8px; top: 8px;
  width: 18px; height: 18px;
  line-height: 18px;
  font-style: normal;
  font-size: var(--fs-micro, 12px);
  text-align: center;
  color: var(--text-secondary);
  border: 1px solid var(--carve-mid);
  border-radius: 2px;
  background: var(--bg-sunken);
  z-index: 2;
}

/* P3-3 第 4 轮：残怪屏外指示箭头（14px 三角）——JS 定位/旋转/显隐；r2：场景层提示转冷银 */
.mobarrow {
  position: absolute;
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 14px solid var(--ornament);
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.8));
  pointer-events: none;
  z-index: 40;
  display: none;
}

/* —— HUD 左下：血条（W1-1/2/3：等级徽章 + 双层残影 + 渐变高光 + 数字描边）—— */
#hud { position: absolute; left: 14px; bottom: 16px; width: 300px; display: flex; align-items: center; gap: 6px; }
/* 等级徽章：条左侧小牌（C5：HUD 暗底件——底保持暗玻璃，字/线换亮字档/冷银） */
#hud .lvbadge {
  flex: 0 0 auto;
  font-style: normal;
  font-size: var(--fs-small);
  line-height: 1;
  color: var(--btn-primary-text);
  background: rgba(12, 16, 20, 0.85); /* C5：--bg-deep 暗底玻璃（原 --bg-panel 暗金旧值硬编码） */
  border: 1px solid var(--ornament);
  border-radius: 2px;
  padding: 4px 7px;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
/* 玩家血条外框：暗底件冷银细边（r2：--bronze 退役） */
/* P3-3：hpwrap=血条+经验细条的竖排容器（xp 条贴血条正下方，不占 HUD flex 横排位） */
#hud .hpwrap { flex: 1; display: block; }
#hud .hp {
  height: 20px;
  border: 1px solid var(--ornament);
  border-radius: 2px;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.65), 0 1px 3px rgba(0, 0, 0, 0.5);
}
/* P3-3 第 3 轮（界面组）：血条下 3px 经验细条——升级进度常驻可读；
   低饱和金（暗底+微亮填充）刻意压亮度，不抢血条生存焦点；无描边贴条排布 */
#hud .xpbar {
  display: block;
  height: 3px;
  margin-top: 2px;
  border-radius: 2px;
  background: rgba(26, 21, 18, 0.9);
  overflow: hidden;
}
#hud .xpbar i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--ornament); /* r2：经验填充冷银（C5：HUD 暗底件不用 --gain） */
  transition: width var(--dur-s) linear;
}
/* 前层：即时响应（0.08s），垂直渐变暗红→亮红 + 顶部 1px 高光线 */
/* S5：0.08s 即时响应层低于最短档（--dur-s 0.15s 会拖慢手感），保留原值不进档 */
#hud .hp i { background: linear-gradient(180deg, #e05540 0%, #c23a2a 45%, #7a160e 100%); box-shadow: inset 0 1px 0 rgba(255, 220, 200, 0.35); transition: width 0.08s linear; }
/* 残影层：色值统一走通用 .bar i.chip（中性白金），此处只保留低血让位逻辑（S3 跳色修） */
#hud .hp.low i.chip { opacity: 0.38; } /* 低血：残影让位给危警红（终验：残影占条宽大头时主导色感）*/
/* 血量数字放大 1.4 倍加四向描边；Lv 前缀移至左侧徽章（span 里保留隐藏 em 供 e2e 文本对账） */
#hud .hp span {
  font-size: 15px;
  line-height: 20px;
  font-weight: bold;
  text-shadow: 0 1px 2px #000, 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
}
#hud .hp span em { display: none; }
/* 低血（<30%）：边框红光脉冲（JS 每帧切 .low） */
#hud .hp.low { animation: hpborder 0.9s var(--ease-in-out-soft) infinite; } /* S5：ease-in-out→--ease-in-out-soft；0.9s 循环类不进档 */
/* 低血填充保色加艳（终验：brightness 会把红洗白成桃橙 → 只加深饱和度+峰值微亮，色相保持红） */
#hud .hp.low i { filter: saturate(1.9) contrast(1.1); animation: hpfill 0.9s var(--ease-in-out-soft) infinite; } /* S5：曲线同上归档，0.9s 循环类不进档 */
@keyframes hpfill { 50% { filter: saturate(2.3) contrast(1.1) brightness(1.22); } }
@keyframes hpborder {
  0%, 100% { border-color: var(--ornament); box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.65), 0 1px 3px rgba(0, 0, 0, 0.5); }
  50% { border-color: #ff6e56; box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.65), 0 0 12px rgba(224, 90, 74, 0.75); } /* S3：脉冲峰值/辉光对齐 --danger 色系 */
}
#hud .fury { height: 12px; }
#hud .fury i { background: linear-gradient(#d09a30, #9a6a10); }
#hud .fury span { line-height: 12px; font-size: 10px; }

/* —— 低血全屏呼吸暗角（W1-8：#ui 内第一层，默认全透明，JS 切 .on 起呼吸）——
   S3：暗角色相对齐 --danger 系（#e05a4a 基），饱和微调降一档（原纯红 #aa120a 过艳） */
#lowhp {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at center, transparent 52%, rgba(168, 36, 22, 0.42) 100%);
  transition: opacity var(--dur-l) var(--ease-out-soft); /* S5：0.5s→--dur-l（-100ms），默认 ease→--ease-out-soft */
}
#lowhp.on { animation: lowbreathe 2s var(--ease-in-out-soft) infinite; } /* S5：曲线归档；2s 呼吸循环类不进档 */
@keyframes lowbreathe {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.95; }
}

/* —— 技能栏 —— */
#hotbar {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

/* —— P24 首局操作引导条（基线 12a §三-1）：hotbar 上方胶囊条，JS 挂 show 点亮、
   逐项输入加 off 熄灭、四项全熄或 60 游戏秒整条加 fade 渐隐；触控端无键鼠键位意义整体隐藏 —— */
#guidebar {
  position: absolute;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 18px;
  border-radius: 999px;
  background: rgba(20, 15, 10, 0.82);
  border: 1px solid var(--line);
  font-size: var(--fs-small);
  color: var(--text-secondary);
  pointer-events: none;
  white-space: nowrap;
  opacity: 0; /* 缺省不可见：show 类点亮，第二局起不再出现 */
  transition: opacity var(--dur-l) var(--ease-out-soft);
}
#guidebar.show { opacity: 1; }
#guidebar.fade { opacity: 0; } /* 整条淡出：写在 show 之后，同特异性后者胜 */
#guidebar em { font-style: normal; opacity: 0.35; }
#guidebar i { font-style: normal; transition: opacity var(--dur-m) var(--ease-out-soft); }
#guidebar i.off { opacity: 0.28; text-decoration: line-through; }
#guidebar b { color: var(--btn-primary-text); font-weight: 600; } /* C5：暗底金字→亮字档 */
body.touch #guidebar { display: none; }
#hotbar .slot {
  position: relative;
  width: 64px;
  height: 64px;
  /* C5：局内 HUD 槽浮在暗场景上，不随面板换白墙——保持暗底玻璃制（r1 的 var(--bg-raise)
     在换墙后是白瓷，此处显式覆写）；「凹凸方向差=可用性」语言随 C3 退役，槽底不再翻版 */
  background: color-mix(in srgb, var(--bg-deep) 88%, transparent);
  border: 1px solid var(--line);
  border-radius: 2px; /* 瓷刻近直角档（锚册 §三 iconLang 圆角 2px） */
  pointer-events: auto;
  cursor: pointer;
  text-align: center;
  /* overflow:hidden 撤除（2026-09-30 文本系统丰富）：hover 富提示 .tip 需冒出槽上方，
     槽内子件自治理——.cd 遮罩补圆角、glyph-img 自带圆角，无裁切依赖 */
}
/* 键位徽章（W1-4）：槽底胶囊（C5：暗底小框件，亮字档+冷银刻线） */
#hotbar .slot b {
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--fs-micro);
  line-height: 14px;
  color: var(--btn-primary-text);
  background: rgba(10, 12, 16, 0.88);
  border: 1px solid var(--ornament);
  border-radius: 9px;
  padding: 0 8px;
  white-space: nowrap;
  z-index: 3;
}
/* 技能名移至槽 title 悬停提示（DOM 保留，仅视觉收起——64px 槽内不再排两行字） */
#hotbar .slot label { display: none; }
#hotbar .slot .glyph {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -58%);
  font-style: normal;
  font-size: 22px;
  color: var(--ornament); /* 缺图回落首字：暗底冷银 */
}
#hotbar .slot .cd {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  background: rgba(10, 8, 6, 0.78);
  border-radius: 1px; /* 槽 overflow 撤除后自兜圆角（贴齐槽内缘 1px 边框；r1 槽角 2px→内缘 1px） */
}
/* CD 剩余秒数（W1-6）：槽中央金色描边大字，空文本自动隐藏。
   S3：字体挂正文黑体半粗（PSL Sans），描边沿用既有四向描边+辉光 */
#hotbar .slot .cdnum {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -58%);
  font-family: "PSL Sans", "Microsoft YaHei", sans-serif;
  font-style: normal;
  font-size: 21px;
  font-weight: 600;
  color: var(--btn-primary-text); /* C5：CD 数字暗底亮字档 */
  text-shadow: 0 0 4px #000, 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
  z-index: 4;
  display: none;
}
#hotbar .slot .cdnum:not(:empty) { display: block; }
#hotbar .slot.nores { filter: grayscale(0.8) brightness(0.6); }
/* r2 换墙修正（P1 冷却白闪）：换墙后 --bg-sunken=浅瓷，r1 的「冷却=阴刻翻底」会让冷却槽在
   暗场景 HUD 上炸白——凹凸方向差退役出可用性语义（只留选中语义），冷却/无资源回归 ARPG
   暗化语言：filter 压暗去饱和（沿用 .nores 既有档）。basic 攻速节拍不算冷却
   （ui.js 同步豁免，与 cdnum/readyflash 同口径防每挥一刀闪版） */
#hotbar .slot.cooling { filter: grayscale(0.65) brightness(0.72); }

/* —— 技能槽 hover 富提示（文本系统丰富 2026-09-30）：名/键位/desc/flavor 四行小面板，
   纯 CSS hover 显隐，槽上方居中；深底 + 1px 金线 + 圆角（同 #menupanel 框体语言）—— */
#hotbar .slot .tip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 220px;
  padding: 8px 10px;
  background: rgba(12, 16, 20, 0.96); /* C5：槽浮提示=暗底玻璃制（浮在暗场景上） */
  border: 1px solid var(--ornament);
  border-radius: 2px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
  text-align: left;
  font-style: normal;
  line-height: 1.5;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-s) var(--ease-out-soft), transform var(--dur-s) var(--ease-out-soft), visibility var(--dur-s);
  z-index: 20;
}
#hotbar .slot:hover .tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
/* C5：暗底提示板文字全族转亮字档（原 --text-* 换墙后是深色，暗底上不可读） */
#hotbar .slot .tip b { display: block; font-size: var(--fs-small); color: var(--btn-primary-text); }
#hotbar .slot .tip .tkey { display: block; font-size: var(--fs-micro); color: var(--ornament); margin-bottom: 4px; }
#hotbar .slot .tip .tdesc { display: block; font-size: var(--fs-micro); color: var(--btn-primary-text); opacity: 0.85; }
#hotbar .slot .tip .tflavor { display: block; font-size: var(--fs-micro); font-style: italic; color: var(--btn-primary-text); opacity: 0.72; margin-top: 4px; }

/* 大招充能环（W1-5）：Q 槽内圈 conic 环，JS 每帧写 --ult（0-100），顶部起顺时针填充。
   S3：暗轨对齐 --gold 系（金 .2），亮段 var(--gain) 保持。
   2026-09-30 撤槽框贴图后边框 10px→1px，环按原视觉位（紧贴槽框内侧一圈）重新锚定：
   inset 3px 使 8px 环带完整落在槽内裡（原 -6px 相对 10px 边框内容盒的绝对位置），不受裁切影响 */
#hotbar .slot[data-skill="ult"]::after {
  content: "";
  position: absolute;
  inset: 3px;             /* 环带贴槽框内侧一圈 */
  border-radius: 2px;     /* r3 C2：随槽同心（内圆角=外2px-inset3px≤0，取同族 2px 直角） */
  pointer-events: none;
  /* r2：亮段=发光青描边光（充能进度正是「描边光」语位，暗槽上可见）；轨道转中性白 */
  background: conic-gradient(from -90deg, var(--accent-glow) calc(var(--ult, 0) * 1%), rgba(255, 255, 255, 0.16) 0);
  /* r3 C2 曲率对齐：radial 圆环改四边条方环 mask——只改 radius 不改 mask 依旧圆环贴方框，
     方环后环带内外缘曲率与 2px 槽框全对齐；条宽 8px 沿用原 radial 9px/8px 档 */
  -webkit-mask:
    linear-gradient(#000 0 0) 0 0 / 100% 8px,
    linear-gradient(#000 0 0) 0 100% / 100% 8px,
    linear-gradient(#000 0 0) 0 0 / 8px 100%,
    linear-gradient(#000 0 0) 100% 0 / 8px 100%;
  mask:
    linear-gradient(#000 0 0) 0 0 / 100% 8px,
    linear-gradient(#000 0 0) 0 100% / 100% 8px,
    linear-gradient(#000 0 0) 0 0 / 8px 100%,
    linear-gradient(#000 0 0) 100% 0 / 8px 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  z-index: 4;
}

/* —— 经验条 —— */
#xpwrap {
  position: absolute;
  left: 50%;
  bottom: 84px;
  transform: translateX(-50%);
  width: 300px;
  display: flex;
  align-items: center;
  gap: 8px;
}
#xpbar { flex: 1; height: 8px; }
#xpbar i { display: block; height: 100%; background: var(--ornament); transition: width var(--dur-s) var(--ease-out-soft); } /* r2：经验填充冷银（C5 暗底件） */
#lv { font-size: var(--fs-small); color: var(--btn-primary-text); white-space: nowrap; } /* C5：暗底亮字档 */

/* —— 顶栏按钮 —— */
#topbtns {
  position: absolute;
  top: 12px;
  right: 14px;
  display: flex;
  gap: 8px;
  pointer-events: auto;
}
#topbtns button {
  background: var(--bg-panel);
  color: var(--text-secondary);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 5px 10px;
  font-size: var(--fs-small);
  cursor: pointer;
  transition: background var(--dur-s) var(--ease-out-soft); /* S5：hover 全局一致性补齐（原无过渡瞬变） */
}
#topbtns button:hover { background: #2a221a; }

/* —— 楼层信息（左上；S3 精修：深底微板，常驻 HUD 框件化；r2：左线惯例保留只换值——冷银刻线）—— */
#floorinfo {
  position: absolute;
  top: 12px;
  left: 14px;
  font-size: 13px;
  color: var(--btn-primary-text);
  text-shadow: 0 1px 3px #000;
  line-height: 1.5;
  background: rgba(12, 16, 20, 0.6);
  border-left: 2px solid var(--ornament);
  border-radius: 2px;
  padding: 4px 10px 4px 9px;
}
#floorinfo b { color: var(--btn-primary-text); }
#floorinfo small { color: var(--ornament); font-size: var(--fs-micro); }
#floorinfo #fi-gold { color: var(--btn-primary-text); }
/* 楼层条层主题色点（r1 收编：原 ui.js inline 魔法值收进类——形制定档 8×8px、瓷角 2px、
   间距走 token；背景色仍由 JS 内联写 DATA.THEMES 动态值，场景主题色不冻结进 CSS） */
.themedot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin: 0 var(--sp-xs) 0 0;
  vertical-align: middle;
}

/* —— 门标签容器（清房后浮在门拱上方；换房/回大厅由每帧对账回收）—— */
#doorlabels { position: absolute; inset: 0; pointer-events: none; }
/* S3 · 二档小框件（调研 #3 情境提示层统一框件）：r2 门标签=暗底玻璃制小框件（C5），
   亮字档 + 1px 冷银刻线；「↓ 下一层 / ✦ 胜利出口」箭头字符由 js/ui.js 写入保持，doorpulse 呼吸原样保留 */
.doorlabel {
  position: absolute;
  transform: translate(-50%, -100%);
  font-size: 15px;
  font-weight: bold;
  color: var(--btn-primary-text);
  background: rgba(12, 16, 20, 0.88);
  border: 1px solid var(--ornament);
  border-radius: 2px;
  padding: 4px 12px;
  text-shadow: 0 1px 4px #000;
  pointer-events: none;
  animation: doorpulse 1.2s var(--ease-in-out-soft) infinite; /* S5：曲线归档；1.2s 呼吸循环类不进档 */
}
@keyframes doorpulse { 50% { opacity: 0.65; } }

/* —— roguelike：大厅布局（S2 重做：观感层集中见文件尾「S2 · 大厅重做」段；此处留几何骨架与共用行件）—— */
#menupanel { max-width: 1020px; width: min(1020px, 94vw); text-align: left; }
#hubtab { max-height: 46vh; overflow-y: auto; padding-right: 4px; }
.dim { color: var(--text-faint); font-size: var(--fs-small); } /* 置灰但可读 */
.ownedtag { color: var(--heal); font-size: var(--fs-small); }
.treenode button { background: var(--bg-raise); color: var(--text-secondary); border: 1px solid var(--carve-mid); border-radius: 2px; padding: 4px 12px; min-height: 32px; box-sizing: border-box; display: inline-flex; align-items: center; font-size: var(--fs-small); } /* [D-08] 命中区 ≥32px；r2 瓷刻：凸版+刻线边+正文字 */
.treenode button:disabled { color: var(--text-faint); background: var(--bg-sunken); border-color: var(--line-dim); cursor: not-allowed; }
#btn-metareset { margin-top: 10px; width: 100%; } /* 危险观感走 .btn3.danger 红填充档（[D-02]：魔法值三连已删，可点性与危险性对齐） */

/* —— roguelike：主菜单 —— */
#menuwrap, #panelwrap {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(12, 16, 20, 0.88); /* W2-5：遮罩加深压暗 HUD（r2：冷黑 = --bg-deep 派生） */
  pointer-events: auto;
  z-index: 15;
}
/* [D-16]③ 结算遮罩单独加深一档：压住血条/技能栏残影；大厅 #menuwrap 保持 0.88 观感不动 */
#panelwrap { background: rgba(12, 16, 20, 0.93); }
/* [D-16]② 结算语境常驻 HUD 退场：body.ui-settle 由 js/ui.js showEndSummary 挂、closeAllPanels 摘
   （返回大厅/再战两条出口都过 closeAllPanels；RUN.start→setMode("run") 恢复 .run-ui 常规显隐） */
body.ui-settle .run-ui, body.ui-settle #floorinfo, body.ui-settle #goldinfo { display: none !important; }
#menupanel, #bigpanel {
  text-align: center;
  max-width: 860px;
  padding: 24px 32px;
}
/* 两段式面板：内容区滚动 + 底栏恒定可见（条目再多关键按钮不出屏） */
#bigpanel {
  display: flex;
  flex-direction: column;
  max-height: 92vh;
  min-width: min(560px, 92vw);
  overflow: hidden;
}
.panelbody { overflow-y: auto; min-height: 0; }
/* S5 · 面板开合动画（S5 任务 1）：入场 panelin 只挂在 .panelbody 子层——openPanel 每次整体重建
   #bigpanel.innerHTML，新节点插入即自然重放，无需 JS 参与动画；
   #panelwrap 的 display 切换仍由 JS 同步直切，动画（opacity/transform）不延迟面板可见性与可点性
   ——e2e「即点即验」红线不破坏。closeAllPanels 不做退出动画：直接 display:none + 清空 innerHTML，
   防快速连点/连续换面板时的状态残留，且关闭是战斗内高频操作不拖节奏（取舍亦录 decisions.md S5 附录） */
#bigpanel .panelbody { animation: panelin var(--dur-m) var(--ease-out-soft); }
@keyframes panelin { from { opacity: 0; transform: scale(0.96); } }
.panelfoot {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 12px;
  margin-top: 14px; /* [D-17] 10→14px：sumgrid 容器化后底部有分量，视觉重心回中 */
  border-top: 1px solid var(--line-dim);
}
#menupanel { max-height: 92vh; overflow-x: hidden; overflow-y: auto; } /* [D-14] 禁横向溢出；r2 C4：flex column 化见大厅段（archive 内滚后本规则仅在 archive 关闭态生效路径） */
#menupanel h2, #bigpanel h2 { font-size: var(--fs-h1); color: var(--text-primary); margin: 0 0 6px; }
/* r3 C6 面板标题瓷刻制式：石墨黑 Serif 900（字距 0.06em 既有档）+24px 宽 --line-deep 短刻线饰；
   ceremony 仪式标题自带菱形+底线演出（::before/::after 已占用）排除 */
#menupanel h2:not(.ceremony)::after, #bigpanel h2:not(.ceremony)::after {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  margin: 6px auto 0;
  background: var(--line-deep);
}
#menupanel .sub, #bigpanel .sub { color: var(--text-tertiary); font-size: 13px; margin: 0 0 16px; } /* r2：暖灰散值→三级文字 token */
.ccards { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.ccard {
  position: relative; /* P3-3 第 5 轮：卡面 .ckey 键帽绝对定位锚 */
  background: var(--bg-raise); /* r2：白面板内卡=凸版 */
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65); /* r3 C5：白瓷浮雕顶光 */
  filter: brightness(0.94); /* r3 C5：非选中轻压（克制版——白瓷压 40% 会伤可读），hover 恢复 */
  padding: 14px 16px;
  width: 200px;
  text-align: left;
}
/* .wcard 的框体/标题/技能小字样式已整体迁至文件尾「S2 · 大厅重做」段 */
.ccard b { display: block; font-size: 17px; margin-bottom: 4px; }
.ccard em { display: block; font-style: normal; color: var(--text-tertiary); font-size: var(--fs-micro); margin-bottom: 8px; }
.ccard p { color: var(--text-secondary); font-size: 13px; min-height: 38px; margin: 0 0 10px; }
/* 三选一卡 flavor 风味行（文本系统丰富 2026-09-30）：desc 之下，斜体引号暗金 */
.ccard em.cflavor {
  display: block;
  font-style: italic;
  color: var(--text-tertiary);
  font-size: var(--fs-micro);
  line-height: 1.5;
  margin: -5px 0 10px;
}
.wcard button, .ccard button, #bigpanel > button, .panelfoot button, .replacebtn {
  background: var(--btn-bg);
  color: var(--text-secondary);
  border: 1px solid var(--carve-mid);
  border-radius: 2px;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
  width: 100%;
}
.wcard button:hover, .ccard button:hover, #bigpanel > button:hover, .panelfoot button:hover { background: var(--btn-bg-hover); }
#btn-skip { margin-top: 14px; width: auto !important; }
.replacelist { display: flex; flex-direction: column; gap: 6px; max-width: 320px; margin: 0 auto 12px; }
/* [D-13]② 键值列表容器化：与 #bigpanel .replacelist 同底同圆角，统计/存档/暂停/结算键值一次成组；
   [D-17] 下距 18→14px 收紧，行距放宽吃掉空档，暂停面板重心回中（r2：凹版底） */
.sumgrid { max-width: 320px; margin: 0 auto 14px; text-align: left; background: var(--bg-sunken); border-radius: 2px; padding: 10px 12px; }
.sumgrid .statline { padding: 5px 0; } /* [D-17] 行距 3→5px：5 行表撑起高度 */
/* [D-12] 存档信息 8 行键值两列网格：行数减半，导出/导入区首屏入镜；
   statline 仍 flex 两端对齐，单列宽减半后标签/数值照常成对 */
#hubtab .sumgrid--two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-l); }
#bigpanel h2.win { color: var(--gain); } /* r2：胜利=收获语义（白面板内唯一暖点） */
#bigpanel h2.lose { color: var(--danger); }
.deathcause { max-width: 320px; margin: 0 auto 12px; text-align: center; font-size: var(--fs-small); line-height: 1.5; color: var(--cost); } /* P24 死因行（r2：暖粉散值→代价 token） */

/* —— roguelike：金币（右上；W1-7 变化反馈：数字 roll-in + 容器回弹，DOM 文本即时落真值）—— */
#goldinfo {
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: var(--fs-body);
  color: var(--text-secondary);
  text-shadow: 0 1px 3px #000;
  transform-origin: top right;
}
/* S3：金币数字加大一档（--fs-h2），货币焦点更醒目；r2：HUD 暗底件亮字档（C5：--gain 只在白面板内用） */
#goldinfo b { color: var(--btn-primary-text); font-size: var(--fs-h2); line-height: 1; vertical-align: -2px; display: inline-block; animation: goldroll var(--dur-s) var(--ease-out-soft); }
@keyframes goldroll { from { transform: translateY(0.55em); opacity: 0.2; } }
#goldinfo.pop { animation: goldpop var(--dur-s) var(--ease-out-soft); }
@keyframes goldpop { 40% { transform: scale(1.18); } }

/* —— roguelike：遗物图标条（顶中，Boss 条下方；不贴角色）—— */
#relicbar {
  position: absolute;
  left: 50%;
  top: 72px;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  max-width: 90vw;
  flex-wrap: wrap;
  justify-content: center;
}
.relicico {
  position: relative;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  font-style: normal;
  font-size: var(--fs-body);
  color: var(--btn-primary-text);
  background: rgba(12, 16, 20, 0.85); /* C5：HUD 遗物槽暗底玻璃制 */
  border: 1px solid var(--line);
  border-radius: 2px;
  cursor: help;
}
.relicico em {
  position: absolute;
  right: -4px;
  bottom: -5px;
  font-size: var(--fs-micro); /* [D-09] 10px→11px 下限 */
  color: var(--btn-primary-text);
  font-style: normal;
}

/* —— roguelike：大招就绪发光（满槽脉冲，W1-5；r1 瓷刻制式：描边光换 --accent-glow，
   锚册 §三「发光青只作描边光」——色相随 token 单源，keyframes 内 color-mix 调透明档）—— */
#hotbar .slot.ready {
  border-color: var(--accent-glow);
  animation: ultpulse 1.2s var(--ease-in-out-soft) infinite; /* S5：曲线归档；1.2s 呼吸循环类不进档 */
}
@keyframes ultpulse {
  0%, 100% { box-shadow: 0 0 8px color-mix(in srgb, var(--accent-glow) 50%, transparent); }
  50% { box-shadow: 0 0 18px color-mix(in srgb, var(--accent-glow) 95%, transparent); }
}

/* —— boss 条（W1-9：名字加大+装饰线 / 双层残影 / 右端百分比 / 50% 刻痕 / 转阶段白闪）—— */
#bossbar {
  position: absolute;
  top: 34px;
  left: 50%;
  transform: translateX(-50%);
  width: 460px;
  display: none;
  text-align: center;
}
#bossbar b { font-size: 18px; letter-spacing: 0.04em; color: var(--btn-primary-text); text-shadow: 0 1px 3px #000, 0 0 8px rgba(0, 0, 0, 0.8); } /* C5：暗底亮字档 */
#bossbar b::before { content: "—◆ "; color: var(--ornament); }
#bossbar b::after { content: " ◆—"; color: var(--ornament); }
#bossbar .bar { height: 14px; margin-top: 4px; }
#bossbar .bar i { background: linear-gradient(180deg, #c04538, #701818); box-shadow: inset 0 1px 0 rgba(255, 200, 180, 0.25); transition: width 0.08s linear; }
/* Boss 条残影：与血条同步走通用 .bar i.chip 中性白金（S3 跳色修，原 #e8a088 粉调撤） */
/* 百分比数字：条内右端（覆盖全局 .bar span 居中定位） */
#bossbar .bar .bosspct {
  inset: 0 6px 0 auto;
  text-align: right;
  font-size: var(--fs-micro); /* [D-09] 10px→11px 下限（14px 条内 line-height 14px 可容） */
  line-height: 14px;
  color: #ffe9c0;
  z-index: 2;
}
/* 50% 阶段刻痕（3px 亮线+暗描边，上下冒出条体 1px；r2：暗底亮字档白线，--gain 只在白面板内用） */
#bossbar .bar::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -1px;
  bottom: -1px;
  width: 3px;
  margin-left: -1.5px;
  background: var(--btn-primary-text);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
  border-left: 1px solid rgba(0, 0, 0, 0.45);
  border-right: 1px solid rgba(0, 0, 0, 0.45);
  z-index: 3;
}
/* 跨 phase2 瞬间白闪一次（JS 加 .flash）——S5：0.3s→--dur-m（-50ms），ease-out→--ease-out-soft */
#bossbar.flash .bar i { animation: bossflash var(--dur-m) var(--ease-out-soft); }
@keyframes bossflash { from { filter: brightness(2.6) saturate(0.4); } }

/* —— 热点房挑战条（P1-5）：顶中置顶（Boss 条上方，两房型互斥不重叠）——
   时限清剿=剩余时间冰蓝条（<10s 转危警红），圣物护送=水晶血量条；复用通用 .bar 结构 —— */
#challengebar {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 340px;
  display: none;
  text-align: center;
}
#challengebar b { font-size: 14px; letter-spacing: 0.06em; color: #9fd6ff; text-shadow: 0 1px 3px #000, 0 0 8px rgba(0, 0, 0, 0.8); }
#challengebar .bar { height: 12px; margin-top: 3px; } /* [D-09] 10→12px：容 11px 字 */
#challengebar .bar i { background: linear-gradient(180deg, #9fd6ff, #2f6ff2); box-shadow: inset 0 1px 0 rgba(220, 240, 255, 0.35); transition: width 0.08s linear; }
#challengebar .bar span { line-height: 12px; font-size: var(--fs-micro); } /* [D-09] 9px→11px 下限 */
#challengebar.urgent b { color: #e05540; }
#challengebar.urgent .bar i { background: linear-gradient(180deg, #e05540, #a01818); animation: hpfill 0.9s var(--ease-in-out-soft) infinite; }

/* —— toast —— */
#toasts {
  position: absolute;
  right: 16px;
  top: 90px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}
/* S3：同 .doorlabel 小框件语言；r2：暗底玻璃制（C5）——亮字档 + 冷银刻线 */
#toasts div {
  background: rgba(12, 16, 20, 0.88);
  border: 1px solid var(--ornament);
  border-radius: 2px;
  padding: 4px 12px;
  font-size: var(--fs-small);
  color: var(--btn-primary-text);
  animation: toastin var(--dur-s) var(--ease-out-soft); /* S5：0.2s→--dur-s（-50ms），ease-out→--ease-out-soft */
}
@keyframes toastin { from { opacity: 0; transform: translateX(20px); } }

/* —— 面板（局内侧边小面板：浮在暗场景上，C5 保持暗底玻璃制）—— */
#panels { position: absolute; inset: 0; }
.panel {
  position: absolute;
  top: 60px;
  width: 300px;
  max-height: 76vh;
  overflow-y: auto;
  background: rgba(12, 16, 20, 0.94);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 14px;
  pointer-events: auto;
  display: none;
}
.panel.open { display: block; }
#charpanel { left: 24px; }
#bagpanel { right: 24px; }
/* C5：暗底小面板文字全族转亮字档（原暖白字 token 换墙后成深色） */
.panel h3 { margin: 0 0 10px; font-size: 15px; color: var(--btn-primary-text); }
.panel h4 { margin: 12px 0 6px; font-size: 13px; color: var(--ornament); }
.statline { display: flex; justify-content: space-between; font-size: var(--fs-small); padding: 3px 0; color: var(--btn-primary-text); opacity: 0.85; } /* S2：行距放宽一档 */
.statline b { color: var(--btn-primary-text); opacity: 1; }

.equiplist .item, .baggrid .cell {
  background: var(--bg-panel);
  border: 1px solid var(--line-dim);
  border-radius: 2px;
  padding: 5px 8px;
  margin-bottom: 4px;
  font-size: var(--fs-small);
  cursor: pointer;
}
.equiplist .item { display: grid; grid-template-columns: 44px 1fr; gap: 2px 8px; align-items: center; }
.equiplist .item i { font-style: normal; color: var(--ornament); }
.equiplist .item small { grid-column: 2; color: #7a9afc; font-size: var(--fs-micro); }
.equiplist .item.empty span { color: var(--text-faint); }
.item.magic { border-color: #3a5a9a; }
.item.rare { border-color: #9a8a2a; }
.item.legendary { border-color: #9a5a1a; box-shadow: 0 0 8px rgba(224, 128, 32, 0.25); }
.baggrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.baggrid .cell { min-height: 62px; padding: 4px 5px; }
.baggrid .cell b { display: block; font-size: var(--fs-micro); line-height: 1.3; }
.baggrid .cell small { color: #7a9afc; font-size: 10px; }
.bagpanel-hint, .hint { font-size: var(--fs-micro); color: var(--ornament); margin-top: 8px; }
#btn-reset {
  margin-top: 12px;
  width: 100%;
  background: rgba(12, 16, 20, 0.6);
  color: var(--danger);
  border: 1px solid var(--danger);
  border-radius: 2px;
  padding: 6px;
  cursor: pointer;
}

/* 遗物详情空态：被动槽虚线锁定槽（审计 R1——空态一行灰字无承接） */
.relicico.empty { border-style: dashed; border-color: var(--line); color: var(--ornament); background: rgba(12, 16, 20, 0.5); cursor: default; }
.emptyslots { display: flex; gap: 6px; justify-content: center; margin: 10px 0 6px; }

/* —— 怪物血条（降噪：普通怪无名 4px 窄条，精英带词缀名常显）——
   S3：条内衬垂直渐变+顶部 1px 高光，与玩家血条/Boss 条同一衬里语言；精英名金字 */
.mobbar {
  position: absolute;
  transform: translate(-50%, -100%);
  width: 46px;
  text-align: center;
}
.mobbar label { display: none; font-size: 10px; color: #c0b0a0; text-shadow: 0 1px 2px #000; }
.mobbar .bar { height: 4px; }
.mobbar .bar i { background: linear-gradient(180deg, #c8503c, #7a1e12); box-shadow: inset 0 1px 0 rgba(255, 210, 190, 0.3); }
.mobbar.elite { width: 110px; }
.mobbar.elite label { display: block; color: var(--btn-primary-text); } /* C5：精英名暗底亮字档 */
.mobbar.elite .bar { height: 6px; }
.mobbar.elite .bar i { background: linear-gradient(180deg, #a855d8, #5e1f86); box-shadow: inset 0 1px 0 rgba(235, 205, 255, 0.3); }

/* —— 飘字（W1-10：描边+投影；暴击 big 弹出）——
   S3 精修：字号档化（普通=--fs-body+2 / 暴击大字=--fs-h2+4）；描边统一 2px 深底 rgba(10,8,6,.9)；
   颜色默认值对齐 token 语义表（JS 调用侧内联色参优先）：伤害 #f0e8d0 / 暴击 #ffb028 /
   受击 --cost / 治疗 --heal（后两类无 CSS 档，色参仍在 js 调用侧） */
.floater {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: calc(var(--fs-body) + 2px);
  font-weight: bold;
  color: #f0e8d0; /* 伤害默认（对齐语义表，与 js/combat.js 调用侧默认一致） */
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.9),
    1px 1px 0 rgba(10, 8, 6, 0.9), -1px -1px 0 rgba(10, 8, 6, 0.9), 1px -1px 0 rgba(10, 8, 6, 0.9), -1px 1px 0 rgba(10, 8, 6, 0.9),
    2px 2px 0 rgba(10, 8, 6, 0.9), -2px 2px 0 rgba(10, 8, 6, 0.9), 2px -2px 0 rgba(10, 8, 6, 0.9), -2px -2px 0 rgba(10, 8, 6, 0.9);
  pointer-events: none;
}
/* 暴击弹出 scale 1.4→1：用独立 scale 属性做动画，不干扰 JS 逐帧写的 transform（上升位移） */
.floater.big { font-size: calc(var(--fs-h2) + 4px); color: #ffb028; animation: floaterpop var(--dur-s) var(--ease-out-soft); } /* S5：0.2s→--dur-s（-50ms），ease-out→--ease-out-soft */
@keyframes floaterpop { from { scale: 1.4; } to { scale: 1; } }

/* —— 受击红晕 —— */
#vignette {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 120px 40px rgba(160, 20, 10, 0.8);
  opacity: 0;
  transition: opacity var(--dur-m) var(--ease-out-soft); /* S5：默认 ease→--ease-out-soft */
}

/* —— 大字横幅（W1-11：内容上移屏幕上 1/3，与战斗区/飘字物理隔离；入场 fade+上滑）—— */
#overlay {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 18vh;
  gap: 8px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-m) var(--ease-out-soft), transform var(--dur-m) var(--ease-out-soft);
  z-index: 20;
}
#overlay.show { opacity: 1; transform: none; }
/* 入场横幅文字加暗色底板：亮字直接浮在 3D 场景上扎眼且场景亮时难读（观感终修）。
   r2：横幅=场景层暗底玻璃制（C5）——上下 1px 冷银刻线实线（原金渐变线退役） */
#overlay span {
  border-top: 1px solid var(--carve-mid);
  border-bottom: 1px solid var(--carve-mid);
  background: rgba(12, 16, 20, 0.78);
  padding: 4px 14px;
  border-radius: 2px;
}
/* 横幅大字：深色薄底板 + 下方 1px 强刻线；文字可读性走描边投影 */
#overlay b {
  position: relative;
  font-size: var(--fs-h1); /* P0-4：L2 基准档取 token（原硬编码 34px 就近归档 --fs-h1 30px） */
  color: var(--btn-primary-text);
  text-shadow: 0 2px 8px #000;
  background: rgba(12, 16, 20, 0.78);
  border-radius: 2px;
  padding: 4px 22px 10px;
}
#overlay b::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 4px;
  height: 1px;
  background: var(--carve-strong); /* r2：金渐变线→强刻线实线 */
}
#overlay span { font-size: var(--fs-body); color: var(--btn-primary-text); opacity: 0.85; }
#overlay.danger b { color: var(--danger); }

/* —— P0-4 横幅分级字号三档（全取 S1 字号 token）：L1 Boss=展示字 40 / L2 基准=标题 30 / L3 波族·升级=大正文 20 —— */
#overlay.boss b { font-size: var(--fs-display); letter-spacing: 2px; }
#overlay.boss b::after { height: 2px; }
#overlay.minor b, #overlay.lvup b { font-size: var(--fs-h2); padding: 3px 16px 8px; }
/* 层推进主题色键线：--theme-line 由 js 侧按当层 THEMES 网格色写入，微光晕助三层辨识
   （场景主题色仍不冻结，回落改强刻线） */
#overlay.floor b::after {
  background: var(--theme-line, var(--carve-strong));
  box-shadow: 0 0 8px var(--theme-line, transparent);
}
/* 升级字微弹：暗底亮字档（C5），金晕随金退役撤除；scale 微弹走 --dur-m/--ease-out-soft 档 */
#overlay.lvup b {
  color: var(--btn-primary-text);
  text-shadow: 0 2px 8px #000;
  animation: lvpop var(--dur-m) var(--ease-out-soft);
}
@keyframes lvpop { from { scale: 1.35; } to { scale: 1; } }

/* —— 手机版触控层（body.touch 时生效；桌面不受影响）——
   S6 复核：观感统一到 S1-S5 新语言（深底 + 1px 金细线 + 品牌金线，取值同 #menupanel 框体语言）；
   几何尺寸与触控交互逻辑零改动（touch-action/摇杆映射/按钮绑点不受影响）—— */
body.touch { -webkit-user-select: none; }
body.touch #game, #joyzone, .tbtn { touch-action: none; }
#touchui { position: absolute; inset: 0; pointer-events: none; z-index: 12; }
#joyzone { position: absolute; left: 0; top: 0; width: 45%; height: 100%; pointer-events: auto; }
/* 虚拟摇杆：暗底玻璃制（C5）——冷银刻线环 + 中性白旋钮 */
#joybase {
  position: absolute;
  width: 124px; height: 124px; margin: -62px 0 0 -62px;
  border-radius: 50%;
  border: 1px solid var(--ornament);
  background: rgba(12, 16, 20, 0.35);
  display: none;
}
#joyknob {
  position: absolute; left: 50%; top: 50%;
  width: 52px; height: 52px; margin: -26px 0 0 -26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.6);
}
#touchbtns {
  position: absolute; right: 10px; bottom: 12px;
  display: flex; flex-direction: column; gap: 10px;
  align-items: flex-end; pointer-events: auto;
}
#touchbtns .trow { display: flex; gap: 10px; align-items: flex-end; }
/* 触控按钮：暗底玻璃制（C5）+ 1px 冷银刻线 */
.tbtn {
  width: 62px; height: 62px; border-radius: 50%;
  background: rgba(12, 16, 20, 0.82);
  border: 1px solid var(--ornament);
  color: var(--btn-primary-text); font-size: 13px;
  font-family: inherit;
  display: flex; align-items: center; justify-content: center;
  user-select: none; -webkit-user-select: none;
}
/* 普攻主按钮：亮字档刻线，主次分明 */
.tbtn.big { width: 78px; height: 78px; font-size: 15px; border-color: var(--btn-primary-text); }
/* 按下/就绪态：白雾底 + 亮线 */
.tbtn.on { background: rgba(255, 255, 255, 0.18); border-color: var(--btn-primary-text); }
#tb-pause {
  position: absolute;
  right: 14px;
  top: 44px;
  width: 42px;
  height: 42px;
  font-size: 16px;
}
/* （原 .dangerbtn 暗红描边档已删：危险语义统一走 .btn3.danger / .panelfoot button.danger 红填充档 [D-01]） */
/* 手机 HUD 重排：血条挪到楼层信息下方，技能栏交给触控按钮（遗物条已统一顶中）；
   S6 修正让位：S3 后 #floorinfo 加垫变高（top12 + 两行约 47px ≈ 底缘 59px），
   旧 top:48px 会压叠楼层板约 11px，让至 64px 留 5px 呼吸 */
body.touch #hotbar { display: none; }
body.touch #hud { left: 14px; bottom: auto; top: 64px; width: 210px; }
/* 竖屏提示页：暗底玻璃制（C5）——亮字档 + 冷银刻线（文案本体仍由 touch.js 注入） */
#rotatehint {
  display: none; position: absolute; inset: 0;
  flex-direction: column;
  align-items: center; justify-content: center;
  background: rgba(12, 16, 20, 0.96);
  color: var(--btn-primary-text); font-size: var(--fs-body); z-index: 30;
  letter-spacing: 0.08em;
}
/* 展示字标题走 PSL Serif 同栈（手机包内嵌标题子集；系统字兜底） */
#rotatehint::before {
  content: "破碎峰岭";
  font-family: "PSL Serif", "PSL Sans", "Microsoft YaHei", serif;
  font-weight: 900;
  font-size: var(--fs-display);
  color: var(--btn-primary-text);
  letter-spacing: 0.12em;
  margin-bottom: 16px;
}
/* 下方 1px 强刻线收束 */
#rotatehint::after {
  content: "";
  width: 200px;
  height: 1px;
  margin-top: 16px;
  background: var(--carve-strong);
}
@media (orientation: portrait) { body.touch #rotatehint { display: flex; } }

/* —— 三期 2D 资产接入（js/icons.js + UI 挂点；图挂了回落文字/纯色，永远可玩）—— */
/* 技能槽内图标：沿用 .glyph 的绝对居中定位，img 只管尺寸（44px，label 压底不受影响） */
#hotbar .slot .glyph-img { display: block; width: 44px; height: 44px; margin: -4px auto 0; border-radius: 2px; }
/* 遗物条图标：32px 槽内满铺圆角（26px 目检过小，按 §6 预授权升 32px，纯样式）；
   被动等级角标 em 绝对定位叠其上（DOM 顺序保证 em 在图上方） */
.relicico img, .relicico .relic-img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 2px; } /* r4 C4：双载体（img 退役后 .relic-img mask 载体满铺同规） */
/* 大厅武器卡立绘：满宽定高裁切（object-position:top 保住脸部），锁定卡不插 */
/* r6 C4：武器纹章（96² native svg）——居中 64% 窗高、contain 完整显示、无边框无暗底
   （原位绘 cover 裁剪窗语言随位图退役；居中由 .wportraitwrap flex 承担） */
.wportrait {
  display: block;
  width: auto;
  height: 64%;
  object-fit: contain;
  border-radius: 2px;
  margin: 0;
}
/* 解锁树行图标 28px / 商店商品行图标 36px（两处行均为 .treenode flex，中列文字撑满） */
.treenode > div { flex: 1; min-width: 0; }
.treeico { width: 28px; height: 28px; border-radius: 2px; flex: 0 0 auto; }
.shopico { width: 36px; height: 36px; border-radius: 2px; flex: 0 0 auto; }
/* 事件面板标题图标 48px（h2 内联） */
.evico { width: 48px; height: 48px; vertical-align: middle; margin-right: 10px; border-radius: 2px; } /* r5 C2：手写 SVG 刻线，位图补丁提亮滤镜随退役撤除 */
/* 行内货币图标 18px（r3 C3 载体 SVG 化；r4 C3 三通道分层：色由 ICONS.COIN_COLOR
   经载体内联 color 驱动 currentColor——魂晶 --gain 暖金/金币 --text-secondary 蓝灰/
   印记 --ornament 冷银；形/底板通道在 cur_*.svg 本体（圆环章/裸标/方章）。
   brightness(1.25) 暗图提亮滤镜随位图退役撤除 */
.coinico {
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: -4px;
  margin-right: 3px;
  background: currentColor;
  -webkit-mask: var(--icourl) center / contain no-repeat;
  mask: var(--icourl) center / contain no-repeat;
  filter: drop-shadow(0 0 2px var(--coin-glow));
}
/* 面板标题旁断峰纹章（内联 22px；素材偏暗，整体提亮） */
/* r5 C5：.ui-emblem 死规则撤除（REG ui/ 6 条死注册同轮删除，DOM 零引用实查：grep js/index.html 零命中） */
/* —— UI 框体纯 CSS 化（2026-09-30 观感重做）：AI 生成框体素材全部撤下（文件保留在仓不删）；
   r2 瓷刻制式（C2）：三大面板族=瓷白底 + 1px 刻线 + 圆角 2px + 顶部品牌刻线实线 —— */
/* 面板主体：var(--bg-panel) 瓷白底 + 1px var(--line) 刻线 + 2px 圆角 + 单层投影 + 顶部 2px 强刻线 */
#menupanel, #bigpanel {
  position: relative;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  padding: var(--sp-xl); /* 内距统一 token 档（原 9-slice 框自带 24px 装饰边，撤图后由 padding 独挑） */
}
/* 品牌刻线：60% 宽顶部居中实线（原金渐变线退役）——瓷刻框体语言的识别符号 */
#menupanel::before, #bigpanel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20%;
  width: 60%;
  height: 2px;
  border-radius: 2px;
  background: var(--carve-strong);
  pointer-events: none;
}
/* 技能槽：撤 slot-frame 贴图，回落基础规则（1px 暖棕细边 + 8px 圆角），干净即精致 */
/* panelfoot 分隔线：1px 渐变金细线（divider2 同语言，撤 divider.jpg） */
.panelfoot { border-top: none; }
.panelfoot::before {
  content: "";
  flex: 0 0 100%;
  height: 1px;
  margin-bottom: var(--sp-m);
  background: var(--carve-weak); /* r2：分隔饰线→弱刻线实线 */
}
/* 武器卡不贴框体素材（纯 CSS 重做后全界面零贴图）：稀有度四色边是玩法信息，走内联品质色 */
/* —— 观感优化批次（三期视觉审计落地；横幅穿帮治理在 js/ui.js openPanel 清 UI.overlay(null)）—— */
/* #bigpanel 直属按钮（事件房 接受/离开 等）：ui_btn.jpg 贴图已撤（纯 CSS 重做），回落统一按钮语言 */
#bigpanel .panelbody > button {
  background-color: var(--btn-bg);
  color: var(--text-secondary);
  border: 1px solid var(--carve-mid);
  border-radius: 2px;
  padding: 6px 22px;
  font-size: 13px;
  cursor: pointer;
  margin: 0 4px;
}
#bigpanel .panelbody > button:hover { background-color: var(--btn-bg-hover); }
#bigpanel .panelbody > button:disabled { opacity: 0.55; cursor: not-allowed; }
/* r5 C3 框中框撤除：统一底座（1px 刻线边+投影）整段退役——它是「遮生成图烂底」的位图
   补丁，全站图标 SVG 化完成后（r4 批一 33 枚+r5 批二 22 枚+停靠栏 7+货币 3）透明刻线
   不需框，边框反而把单色刻线框成「框中框」。仅保留 box-sizing/2px 圆角形制；
   mask 载体通用规则（r4）独立成段不受影响；P8 挂点 r4 已同步本轮零改动 */
.glyph-img, .relicico img, .relicico .relic-img, .treeico, .shopico, .evico {
  box-sizing: border-box;
  border-radius: 2px;
}
/* r5 断代注：全站图标 SVG 化完成（r4 批一 33+r5 批二 22+停靠栏 7+货币 3），
   jpg 生成管线退役（仅存 portrait 3 条位图立绘走 r5 终止条款管辖） */
/* 商店/替换行卡实底化：#bigpanel 行列表容器加半透明深底，行文字与面板底拉开一档更易读。
   只打 .replacelist（商店行 / 被动替换 / 被动进阶的 .treenode、.replacebtn 都在其中），
   事件面板内容直出 .panelbody 不经此容器，标题与 panelfoot 按钮均不受影响 */
#bigpanel .replacelist {
  background: var(--bg-sunken);
  border-radius: 2px;
  padding: 10px;
}

/* ==================== UI 打磨波二 · 面板系统（2026-09-28）==================== */

/* —— W2-5 面板遮罩：backdrop 模糊 2px（不支持的浏览器退回纯加深遮罩，可玩性不变）—— */
@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  #menuwrap, #panelwrap {
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
}

/* —— W2-1 三选一卡：品质边框亮度+外发光随稀有度递增（普通最暗）、卡顶图标、
        整卡可点、hover 抬升、入场 stagger、卡距 24px —— */
.ccards { gap: 24px; }
.ccard {
  position: relative;
  cursor: pointer;
  transition: transform var(--dur-s) var(--ease-out-soft), filter var(--dur-s) var(--ease-out-soft);
  animation: cardin var(--dur-l) var(--ease-out-soft) both; /* S5：0.35s→--dur-l（+50ms 就近），ease-out→--ease-out-soft，与大厅 intro cardin 同档同曲线 */
  animation-delay: calc(var(--i, 0) * var(--stagger)); /* 入场逐卡延迟，--i 由渲染时写入 */
}
@keyframes cardin { from { opacity: 0; transform: translateY(10px); } }
/* 外发光按稀有度递增：发光色取 --rc（品质色内联变量），普通档不给发光 */
.ccard.rar0 { box-shadow: none; }
.ccard.rar1 { box-shadow: 0 0 9px -3px var(--rc, transparent); }
.ccard.rar2 { box-shadow: 0 0 14px -3px var(--rc, transparent); }
.ccard.rar3 { box-shadow: 0 0 20px -2px var(--rc, transparent), 0 0 6px -2px var(--rc, transparent); }
.ccard:hover {
  /* r3 C5 选中态=Hades「重要选择发光」锚 B 版，三信号齐上：
     ①1.5px --accent 描边（box-shadow ring 实现，不吃布局不跳版）+②3px --accent 顶刻线
     （::before 见下）+③--accent-glow 外光晕——识别线用 accent 实线（对白 5.15 ✓），
     glow 对白仅约 1.8 禁止单靠（光晕只作气氛不做识别） */
  transform: translateY(-2px);            /* hover 抬升 2px */
  filter: brightness(1);                  /* 从非选中轻压档恢复满亮 */
  border-color: var(--accent);
  box-shadow: 0 0 0 1.5px var(--accent), 0 0 14px var(--accent-glow);
}
.ccard:hover::before {
  background: var(--accent);              /* 顶线从稀有度色翻 accent */
  height: 3px;
}
/* 卡顶遗物图标：图源命中放 48px 图，未命中回落首字框 */
.ccard .cico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 8px;
  border-radius: 2px;
  border: 1px solid var(--carve-mid);
  background: var(--bg-sunken);
  font-style: normal;
  font-size: 22px;
  color: var(--text-primary);
  overflow: hidden;
}
.ccard .ccard-img { display: block; width: 100%; height: 100%; border-radius: 2px; box-sizing: border-box; }
.ccard em span { font-weight: bold; } /* 品质标签文字用品质色（内联色），加粗与灰字拉开 */

/* —— W2-2 商店：行内名称/描述左对齐成列、买不起置灰、买得起价格金字、行底色统一 —— */
.treenode > div { text-align: left; }
/* [D-10] 行卡文字一律左对齐（规则成文）：#bigpanel 居中语境下，挑战簿/营火/图鉴行卡统一贴左，
   防居中继承回归（.treenode 既有补丁先例，此处收口）；mobcell/codexrow 显式声明免疫继承漂移 */
.chalrow .chalhead, .bondchar, .bondlist, .bonddlg, .mobcell, .codexrow b ~ small { text-align: left; }
.treenode.cant { opacity: 0.5; }
#bigpanel .treenode:not(.cant):not(.off) button { color: var(--gain); border-color: var(--carve-strong); } /* r2：可购行按钮挂暖金收益字（白面板内唯一暖点） */
#bigpanel .replacelist .treenode { background: var(--bg-raise); } /* 行底比面板亮半档（凸版），行列表成组 */
#shop-gold { color: var(--gain); font-size: 15px; } /* 面板内金币=暖点收益色（审计 04） */

/* —— W2-3 暂停：音效+音乐同行芯片组、主按钮金填充见 W2-8 .primary —— */
.panelfoot .pair { display: inline-flex; gap: 10px; }
.panelfoot .pair button { width: auto; flex: 1 1 0; white-space: nowrap; }
.panelfoot button small { font-size: var(--fs-micro); } /* 放弃按钮括号说明缩号（颜色走 .dim 转灰） */

/* —— W2-4 结算：本局遗物回顾行（28px 小图标，同 relicbar 图源）—— */
.endrelics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  max-width: 320px;
  margin: -8px auto 16px;
}
.relicico.mini { width: 28px; height: 28px; line-height: 28px; font-size: var(--fs-small); cursor: default; }
.panelfoot.narrow { max-width: 320px; margin-left: auto; margin-right: auto; } /* 按钮列与数据列对齐 */

/* —— W2-6 事件面板：代价红 / 收益金分色 —— */
.cost { color: var(--cost); }
.gain { color: var(--gain); }
/* 接受/离开加大点击目标；接受挂 .danger 红填充危险档（[D-01] 语义归位：接受本就是高风险动作，
   原专属红填充规则已删，由 .btn3.danger 三档规则统一供给） */
#bigpanel #btn-ev-accept, #bigpanel #btn-ev-leave { padding: 10px 28px; font-size: 15px; }

/* —— W2-7 大厅：武器卡等分底对齐、选中金框不放大；解锁树可读性；金色滚动条；
        魂晶数字骨白金；列表底部渐隐遮罩 —— */
.wcards { align-items: stretch; }               /* 三卡统一高度底对齐 */
.wcards .wcard { flex: 1 1 0; width: auto; min-width: 0; } /* 等分宽，选中只亮框不改尺寸 */
.wcard.picked h3 { text-shadow: none; } /* r2：选中武器名金字光晕随金退役撤除（字色走 h3 继承石墨黑） */
/* 滚动条冷银主题：大厅 + 全部局内面板滚动容器（复验：局内面板曾露原生浅色滚动条带箭头） */
#hubtab, .panelbody, #menupanel, #bigpanel {
  scrollbar-width: thin;                        /* Firefox */
  scrollbar-color: var(--ornament) var(--bg-sunken);
}
#hubtab::-webkit-scrollbar, .panelbody::-webkit-scrollbar, #menupanel::-webkit-scrollbar, #bigpanel::-webkit-scrollbar { width: 8px; }
#hubtab::-webkit-scrollbar-track, .panelbody::-webkit-scrollbar-track, #menupanel::-webkit-scrollbar-track, #bigpanel::-webkit-scrollbar-track { background: var(--bg-sunken); border-radius: 4px; }
#hubtab::-webkit-scrollbar-thumb, .panelbody::-webkit-scrollbar-thumb, #menupanel::-webkit-scrollbar-thumb, #bigpanel::-webkit-scrollbar-thumb { background: var(--carve-mid); border-radius: 4px; }
#hubtab::-webkit-scrollbar-thumb:hover, .panelbody::-webkit-scrollbar-thumb:hover, #menupanel::-webkit-scrollbar-thumb:hover, #bigpanel::-webkit-scrollbar-thumb:hover { background: var(--ornament); }
.hubtabwrap { position: relative; }
.hubtabwrap::after {                            /* 列表底部 24px 渐隐，暗示可滚动（审计 01 硬截断） */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 24px;
  background: linear-gradient(rgba(237, 241, 244, 0), var(--bg-panel)); /* r2：白瓷渐隐（透明档=--bg-panel 派生） */
  pointer-events: none;
  border-radius: 0 0 2px 2px;
}

/* —— W2-8 按钮语言统一（2026-09-30 纯 CSS 化对齐 .btn3 基准）+ 按钮语义三档规则（[D-01] 2026-10-01 成文）——
        默认档：深底 #1c1814 + 1px 金细边 + 金字，hover 边亮+底微亮+抬 1px（过渡全走 --dur-s）；
        三档规则（全站控件归档口径，后续新按钮按此挂类）：
          .primary=主操作金填充（出征/继续冒险/再战等高频正动作）；
          .danger=危险红填充（放弃本局/清空存档/确认导入等不可逆或高风险动作，与 .primary 同构）；
          默认=深底金边（普通操作）。
        红只归危险、金只归主行动；语义色 token 一律取 :root --btn-primary-* / --btn-danger-* —— */
.wcard button, .ccard button, #bigpanel > button, .replacebtn,
#bigpanel .panelbody > button, .treenode button {
  background: var(--btn-bg);
  color: var(--text-secondary); /* r2：按钮正文字（原金字退役） */
  border: 1px solid var(--carve-mid);
  transition: transform var(--dur-s) var(--ease-out-soft), border-color var(--dur-s) var(--ease-out-soft),
    background var(--dur-s) var(--ease-out-soft), box-shadow var(--dur-s) var(--ease-out-soft);
}
.wcard button:hover, .ccard button:hover, #bigpanel > button:hover, .replacebtn:hover,
#bigpanel .panelbody > button:hover, .treenode button:hover:not(:disabled) {
  background: var(--btn-bg-hover);
  border-color: var(--carve-strong);
  transform: translateY(-1px);
}

/* ==================== S1 · 框体通用类（r2 瓷刻制式：瓷白底 + 1px 刻线 + 顶部品牌刻线，零贴图） ====================
   2026-09-30 撤 AI 框体素材；r2 换墙：统一语言改「var(--bg-panel) 底 + 1px var(--line) 刻线 +
   圆角 2px + 单层投影 + 顶部 2px 强刻线（品牌线实线化）」。 */

/* —— .frame 标准面板框 —— */
.frame {
  position: relative;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  min-width: 240px;
  min-height: 140px;
}
.frame::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20%;
  width: 60%;
  height: 2px;
  border-radius: 2px;
  background: var(--carve-strong); /* 品牌线实线化（r2 刻线三档） */
  pointer-events: none;
}
/* —— .frame-elite 精英/仪式面板框：刻线全宽 + 四角冷银刻点 —— */
.frame-elite {
  position: relative;
  background: var(--bg-panel);
  border: 1px solid var(--carve-mid);
  border-radius: 2px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  min-width: 280px;
  min-height: 200px;
}
.frame-elite::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--carve-strong);
  pointer-events: none;
}
.frame-elite::after {
  content: "";
  position: absolute;
  inset: 4px;
  pointer-events: none;
  background:
    radial-gradient(circle, var(--ornament) 0 1.3px, transparent 1.7px) left top / 3px 3px no-repeat,
    radial-gradient(circle, var(--ornament) 0 1.3px, transparent 1.7px) right top / 3px 3px no-repeat,
    radial-gradient(circle, var(--ornament) 0 1.3px, transparent 1.7px) left bottom / 3px 3px no-repeat,
    radial-gradient(circle, var(--ornament) 0 1.3px, transparent 1.7px) right bottom / 3px 3px no-repeat;
}
/* —— .btn3 新按钮族：凹版底+刻线边+正文字；hover 浮凸一档+边转深 / active 落回；
   .primary 主操作冰青填充（token --btn-primary-*；[D-01] 语义三档不变）—— */
.btn3, .panelfoot button {
  background: var(--btn-bg);
  color: var(--text-secondary);
  border: 1px solid var(--carve-mid);
  border-radius: 2px;
  padding: 10px 22px;
  min-height: 42px;
  cursor: pointer;
  transition: transform var(--dur-s) var(--ease-out-soft), border-color var(--dur-s) var(--ease-out-soft),
    background var(--dur-s) var(--ease-out-soft), box-shadow var(--dur-s) var(--ease-out-soft);
}
.btn3:hover, .panelfoot button:hover {
  background: var(--btn-bg-hover);
  border-color: var(--carve-strong);
  transform: translateY(-1px);
}
.btn3:active, .panelfoot button:active { transform: translateY(0); }
.btn3.primary, .panelfoot button.primary, #bigpanel .panelbody > button.primary {
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-border);
  color: var(--btn-primary-text);
}
.btn3.primary:hover, .panelfoot button.primary:hover, #bigpanel .panelbody > button.primary:hover {
  background: var(--btn-primary-bg-hover);
  border-color: var(--btn-primary-border);
}
/* 危险档（[D-01]）：与 .primary 同构的红填充，供给放弃本局/清空存档/确认导入/事件接受等
   不可逆或高风险动作；hover 提亮一档走 brightness，色值仍全走 --btn-danger-* token */
.btn3.danger, .panelfoot button.danger, #bigpanel .panelbody > button.danger {
  background: var(--btn-danger-bg);
  border-color: var(--btn-danger-border);
  color: var(--btn-danger-text);
}
.btn3.danger:hover, .panelfoot button.danger:hover, #bigpanel .panelbody > button.danger:hover {
  background: var(--btn-danger-bg);
  border-color: var(--btn-danger-border);
  filter: brightness(1.15);
}
/* —— .divider2 分隔线：1px 弱刻线横带（60% 宽居中，实线）—— */
.divider2 {
  width: 60%;
  height: 1px;
  margin: 0 auto;
  background: var(--carve-weak);
}
/* —— .banner-band 标题横幅：透明底（标题字色见 .menutitle h1），
   横幅本体只留下方 1px 短刻线（50% 宽，r2 分节标题饰线=--line-deep 实线）—— */
.banner-band {
  min-width: 160px;
  text-align: center;
}
.banner-band::after {
  content: "";
  display: block;
  width: 50%;
  height: 1px;
  margin: 8px auto 0;
  background: var(--line-deep);
}
/* —— .card-frame-{0..3} 品质竖卡框：瓷白底 + 1px 品质色边 + 品质色顶部 2px 刻线，
   稀有度四色对齐 r2 --rar-0..3（透明档=同 rgb 派生）—— */
.card-frame-0, .card-frame-1, .card-frame-2, .card-frame-3 {
  position: relative;
  background: var(--bg-panel);
  border: 1px solid;
  border-radius: 2px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  min-width: 150px;
  min-height: 220px;
}
.card-frame-0 { border-color: rgba(103, 112, 122, 0.45); }
.card-frame-1 { border-color: rgba(42, 90, 184, 0.45); }
.card-frame-2 { border-color: rgba(138, 101, 10, 0.45); }
.card-frame-3 { border-color: rgba(124, 46, 158, 0.45); }
.card-frame-0::before, .card-frame-1::before, .card-frame-2::before, .card-frame-3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14%;
  right: 14%;
  height: 2px;
  border-radius: 2px;
  pointer-events: none;
}
.card-frame-0::before { background: rgba(103, 112, 122, 0.85); }
.card-frame-1::before { background: rgba(42, 90, 184, 0.85); }
.card-frame-2::before { background: rgba(138, 101, 10, 0.85); }
.card-frame-3::before { background: rgba(124, 46, 158, 0.85); }
/* 三选一卡（.ccard 直接吃上述语言）：1px 品质细边颜色由 JS 内联 border-color 提供（图挂回落语义保留），
   品质色顶部 2px 线取内联 --rc 变量；宽度/内距回落基础规则（200px / 14px 16px） */
.ccard {
  position: relative;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: 2px;
}
.ccard::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14%;
  right: 14%;
  height: 2px;
  border-radius: 2px;
  background: var(--rc, var(--carve-strong)); /* 品质线回落强刻线 */
  pointer-events: none;
}
/* —— .slot-frame2 技能槽框：瓷白底 + 1px 刻线（干净）—— */
.slot-frame2 {
  background: var(--bg-panel);
  border: 1px solid var(--carve-mid);
  border-radius: 2px;
  min-width: 48px;
  min-height: 48px;
}
/* —— .tooltip-frame 提示底板（S3/S4 备料，本轮不挂）—— */
.tooltip-frame {
  position: relative;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  min-width: 200px;
  min-height: 64px;
}
.tooltip-frame::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20%;
  width: 60%;
  height: 2px;
  border-radius: 2px;
  background: var(--carve-strong);
  pointer-events: none;
}
/* —— .bar-frame2 横条框：血条/Boss 条外框备料（1px 冷银细边；HUD 暗底件）—— */
.bar-frame2 {
  border: 1px solid var(--ornament);
  border-radius: 2px;
  min-height: 12px;
}
/* —— .ult-ring2 大招充能环底（S3 HUD 波备料）：纯 CSS 圆环底座；
   实际充能仍由 #hotbar .slot[data-skill="ult"]::after 的 conic 环绘制（该实现不动）—— */
.ult-ring2 {
  border: 2px solid var(--ornament);
  border-radius: 50%;
  min-width: 64px;
  min-height: 64px;
}

/* ==================== S2R · 大厅修正轮（响度分层：外响内静 + 环境动效；S2 基础上减繁） ==================== */

/* —— 标题横幅=全屏唯一「响」级（仪式感全靠字型与光：横幅本体只剩下方 1px 渐隐金线）—— */
.menutitle { text-align: center; }
.menutitle .banner-band { display: inline-block; } /* 横幅随内容收缩并居中，不满铺面板 */
/* r2 瓷刻标题：石墨黑实色（锚 B「石碑」标题语位），金渐变流光随 --gold 退役整体撤除 */
.menutitle h1 {
  margin: 0;
  font-size: var(--fs-display);
  line-height: 1.15;
  color: var(--text-primary);
  letter-spacing: 0.06em; /* 标题字距统一档（原 0.16em 松散，收拢更精致） */
  text-indent: 0.06em; /* 抵消末字后的字距，视觉居中 */
}
.menumeta {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: var(--sp-m);
  margin-top: 2px;
  flex-wrap: wrap; /* [D-14] 窄窗挤压时两行兜底，防横向溢出 */
}
#menupanel .menumeta .sub { margin: 0; color: var(--text-tertiary); font-size: var(--fs-small); } /* 带 id 提特异性，压过通用 .sub 的下边距 */
.metasep { width: 1px; height: 13px; align-self: center; background: var(--line); }
#menupanel .souls { font-size: var(--fs-small); color: var(--text-tertiary); }
#menupanel .souls b {
  font-size: 20px;
  color: var(--gain); /* r2：魂晶=全站唯一暖点（白面板内），金呼吸光晕随金退役撤除 */
  margin-left: 2px;
}

/* —— 大厅层次重做（方向 A，2026-10-02）：主屏单武器焦点 + 底部装载条 + 档案全屏层 ——
   原则：主屏只留一个视觉锤（焦点武器卡），货币让位右上，七页签降级为底部停靠栏，
   页签内容全部下钻 #archive 全屏层（一屏一问，参照 Hades 枢纽/Dead Cells 极简主界面）。 —— */
#menupanel { position: relative; } /* 档案层的定位锚 */
.menutitle { position: relative; } /* 货币右上角的定位锚 */
.menumeta {
  position: absolute;
  right: 0;
  top: 8px;
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: var(--sp-m);
  margin-top: 0;
  flex-wrap: wrap; /* [D-14] 窄窗挤压时两行兜底，防横向溢出 */
}
.menusub {
  margin: 2px 0 0;
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
}

/* —— 舞台：◀ 焦点卡 ▶（3 卡 DOM 全保留，CSS 只显示焦点卡——探针 cards=3 契约不破） —— */
.wstage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 6px;
}
.warrow {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(24, 19, 14, 0.6);
  color: var(--text-secondary);
  font-size: 16px;
  cursor: pointer;
  transition: border-color var(--dur-s) var(--ease-out-soft), color var(--dur-s) var(--ease-out-soft), transform var(--dur-s) var(--ease-out-soft);
}
.warrow:hover { border-color: var(--accent); color: var(--accent); transform: scale(1.06); } /* r2：原 var(--gold-mid) 系未定义变量既有失效引用，顺带修正为 accent */
.wstage .wcards { display: block; width: min(440px, 86vw); }
.wstage .wcards .wcard:not(.focus) { display: none; } /* 非焦点卡让位（DOM 保留供探针/直点；特异性压过后置 .wcard.locked{display:flex}） */
.wstage .wcards .wcard.focus { display: block; }
.wstage .wcard.focus { border-color: var(--accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent), 0 10px 30px rgba(0, 0, 0, 0.25); }
.wstage .wcard .wportraitwrap { height: clamp(110px, 16vh, 176px); } /* 焦点卡立绘：随视口自适应（外循环走查：固定高把出征按钮顶出视口） */
.wstage .wlore { display: none; } /* 主屏焦点卡砍 flavor 行（一屏放下优先；技能展开时也精简） */
.wdots {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 10px 0 2px;
}
.wdots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid var(--carve-mid);
  background: transparent;
  cursor: pointer;
}
.wdots i.on { background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); } /* r2：焦点武器位=accent 刻点 */
.wdots i.dim { border-color: var(--line); opacity: 0.55; } /* 未解锁武器位：空心暗点 */

/* —— 技能折叠：摘要行常驻，全表默认收起（wskills DOM 保留） —— */
.wsktoggle {
  display: block;
  width: 100%;
  margin: 6px 0 0;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--bg-sunken);
  color: var(--text-secondary);
  font-size: var(--fs-micro);
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: border-color var(--dur-s) var(--ease-out-soft), color var(--dur-s) var(--ease-out-soft);
}
.wsktoggle:hover { border-color: var(--accent); color: var(--accent); }
.wcard .wskills { display: none; }
.wcard.skopen .wskills { display: block; }

/* —— 装载条：遗物/Heat/出征主按钮收进居中窄列（主屏第三层=行动区） —— */
.loadoutbar {
  width: min(440px, 86vw);
  margin: 8px auto 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.loadoutbar h4 {
  display: flex;
  align-items: center;
  gap: var(--sp-s);
  margin: 0;
  font-size: var(--fs-small);
  font-weight: normal;
  letter-spacing: 0.14em;
  color: var(--text-tertiary);
}
.loadoutbar h4::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-deep); /* r2：分节标题饰线=深刻线短实线（金渐变退役） */
}
.loadoutbar #btn-go { font-size: 17px; padding: 12px 24px; } /* 全屏唯一主按钮加一档分量 */

/* —— 底部停靠栏：七页签降级为图标条（次级导航，点开=档案层） —— */
.menudock {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
/* r1 瓷刻制式（锚 B）：阴刻凹版=常态、翻浮雕凸版=选中；圆角收 2px 瓷角；min-height 48px 触控红线。
   r2 C6 对比度修正（WCAG 内联脚本实测，口径同锚册，随工单复核重录）：
   small 常态 --text-secondary 对 --bg-sunken 6.40:1 ✓（r1 挂 --line-deep 实测 3.91，作 11px
   小字低于 4.5 不过线，当时按过渡档标注）；选中态随 --accent；em=--ornament 3.21:1（图形 ≥3 ✓）。
   勘误：r1 注释「accent 对 --bg-raise 5.59」经 r2 复算维持 5.59 ✓（r2 工单申报 2.87 未能复现，
   5.15 为 accent 对 --bg-panel 值）；分诊原案 hover 挂 --text-secondary 在 r1 深色文字族语境下
   不可读，现文字族已换墙为深色，hover 直接挂 --accent（刻线同步加深） */
.dockbtn {
  position: relative; /* 红点定位锚 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* min-height 48px 后内容保持垂直居中 */
  gap: 2px;
  min-width: 62px;
  min-height: 48px; /* 触控目标红线 ≥48×48 */
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 2px; /* 瓷刻近直角档（原 8px） */
  background: var(--bg-sunken); /* 阴刻凹版=常态 */
  box-shadow: inset 0 1px 2px rgba(12, 16, 20, 0.18); /* 凹版方向感（浅投影不装饰） */
  color: var(--ornament); /* 图标常态冷银 */
  cursor: pointer;
  transition: border-color var(--dur-s) var(--ease-out-soft), background var(--dur-s) var(--ease-out-soft), box-shadow var(--dur-s) var(--ease-out-soft), color var(--dur-s) var(--ease-out-soft);
}
.dockbtn em { font-style: normal; font-size: 16px; line-height: 1; }
.dockbtn small { font-size: var(--fs-micro); color: var(--text-secondary); } /* r2 C6：3.91→6.40:1 过线 */
.dockbtn:hover { border-color: var(--carve-strong); }
.dockbtn:hover em, .dockbtn:hover small { color: var(--accent); } /* r2：文字族换墙后 hover 挂 accent（悬停=行动预演，非选中态仍无三信号） */
.dockbtn.on {
  background: var(--bg-raise); /* 翻浮雕凸版=选中 */
  border-color: var(--line-deep);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65); /* 凸版顶光方向感 */
  color: var(--accent);
}
.dockbtn.on small { color: var(--accent); font-weight: 600; }
.dockbtn.on::before { /* 三信号之二：3px 强调刻线指示条（贴内容侧=顶部） */
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 3px;
  border-radius: 2px 2px 0 0;
  background: var(--accent);
  pointer-events: none;
}
/* 停靠栏单色图标载体（r1）：mask 吃 currentColor 随态换色（常态 --ornament→选中 --accent），
   <img> 做不到颜色继承故走 mask；24×24px（锚册 §一 图标 ≥24px 红线），
   SVG 48 网格 2px 描边出货自动等效 1px；url 由 js/icons.js ICONS.mask 写入 --icourl */
.dockico {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask: var(--icourl) center / contain no-repeat;
  mask: var(--icourl) center / contain no-repeat;
}

/* 冷瓷生成图标（2026-10-03 全量 65 枚 native jpg 接入）：mask currentColor 换色语言由滤镜档承接——
   img 载体不吃继承色，常态压一档饱和/亮度，选中提亮+青晕（原 mask 常态 --ornament→选中 --accent 等效转译） */
img.dockico { background: none; -webkit-mask: none; mask: none; }
.dockbtn .dockico { filter: saturate(0.82) brightness(0.94); transition: filter var(--dur-s) var(--ease-out-soft); }
.dockbtn:hover .dockico { filter: saturate(1.05) brightness(1.03); }
.dockbtn.on .dockico { filter: saturate(1.2) brightness(1.1) drop-shadow(0 0 6px rgba(83, 198, 220, 0.55)); }
img.coinico, img.treeico, img.shopico, img.evico, img.relic-img, img.glyph-img, img.ccard-img { background: none; -webkit-mask: none; mask: none; }
/* r4 C1/C2：svg mask 载体通用底——ICONS.tag 对 .svg 注册产 <i class="原类名">，
   命中即得单色载体（色=继承 currentColor：白面板内继承正文深色、暗槽件各自显式设亮色）；
   img 时代类名不变：--icourl 缺省=mask none，位图完整显示零影响 */
.glyph-img, .relic-img, .ccard-img, .treeico, .shopico {
  background-color: currentColor;
  -webkit-mask: var(--icourl, none) center / contain no-repeat;
  mask: var(--icourl, none) center / contain no-repeat;
}
/* hotbar 暗槽件：图标刻线挂亮字档（currentColor 继承会拿到正文深色，暗底上约 2.2:1 不可读） */
#hotbar .slot .glyph-img { color: var(--btn-primary-text); }

/* —— 档案层（r2 C4 结构修复）：页签内容下钻——原 inset:0 绝对覆盖 + z6 全不透明深底
   会把底部停靠栏整条埋住（.dockbtn.on 三信号在档案展开时不可见=「我在哪」失锚）。
   改为 #menupanel flex column 内的 flex:1 内滚区：主屏子件在档案展开时让位（:has 现代选择器），
   停靠栏常驻面板底条恒可见；区域自身挂 1px 刻线框+瓷白底（与主面板同墙） —— */
#menupanel { display: flex; flex-direction: column; } /* C4：停靠栏底条化/档案内滚的布局前提 */
#archive {
  display: none;
  position: static;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  padding: 14px 18px 10px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--bg-panel);
}
#archive.open { display: flex; }
#menupanel:has(#archive.open) > :not(#archive):not(.menudock) { display: none; } /* 档案展开：主屏件让位（一屏一主题语义不变），dock+archive 构成常驻骨架 */
.archhead {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
}
.archtitle {
  font-size: var(--fs-h2, 20px);
  color: var(--accent); /* r2：档案标题=accent 强调档（白面板内） */
  letter-spacing: 0.12em;
}
#archive .hubtabwrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#archive #hubtab { flex: 1; overflow-y: auto; max-height: none; padding-right: 4px; } /* 撤 46vh 旧顶（外循环走查：列表只占半屏、下方空置却在滚动） */

/* 主屏垂直收紧（外循环走查：720p 停靠栏出屏 69px——上下留白/标题/装载条/停靠栏各挤一档） */
#menupanel { padding-top: 16px; padding-bottom: 14px; }
.wdots { margin: 6px 0 0; }
.loadoutbar { gap: 5px; }
.loadoutbar .btn3 { padding: 8px 16px; }
.loadoutbar #btn-go { padding: 10px 24px; }
.wsktoggle { margin-top: 4px; padding: 4px 10px; }

/* 矮视口断点（外循环走查：720p 级高度下停靠栏出屏——纵向预算重排，出征主按钮优先保屏内）。
   r2 C4 复核：档案展开态下 dock 已由 flex 骨架恒常驻（archive flex:1 收缩内滚，不依赖本断点）；
   主屏态仍按本断点挤档，dock 随 #menupanel（max-height:92vh + overflow-y:auto）滚动可达 */
@media (max-height: 800px) {
  .menutitle h1 { font-size: calc(var(--fs-display) * 0.7); }
  .menusub { display: none; } /* 副题低频信息让位 */
  .menutitle { margin-bottom: 0; }
  .wstage { margin-top: 2px; }
  .wstage .wcard { padding: 8px; }
  .wdots { margin-top: 4px; }
  .menudock { margin-top: 4px; padding-top: 5px; }
  #menupanel { padding-top: 12px; padding-bottom: 8px; }
  .loadoutbar { margin-top: 6px; }
}

/* 窄窗兜底：箭头缩、舞台收边 */
@media (max-width: 720px) {
  .warrow { width: 38px; height: 38px; }
  .wstage .wcards { width: min(400px, 82vw); }
  .wstage .wcard .wportraitwrap { height: clamp(100px, 14vh, 140px); }
  .menumeta { position: static; justify-content: center; } /* 窄窗货币回中，防压标题 */
}

/* —— 武器架：r3 C6 收尾——未选中=阴刻凹版、选中翻浮雕凸版（全站自此一种选中语言：
   3px --accent 顶刻线+浮雕翻转+600 字重，与 .dockbtn 同构缩档）—— */
.wcards { display: flex; gap: 10px; }
.wcard {
  position: relative;
  background: var(--bg-sunken); /* r3 C6：未选中=阴刻凹版（原凸版） */
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: inset 0 1px 2px rgba(12, 16, 20, 0.15); /* 凹版方向感 */
  padding: 10px;
  text-align: left;
  cursor: pointer;
  transition: transform var(--dur-s) var(--ease-out-soft), border-color var(--dur-s) var(--ease-out-soft), box-shadow var(--dur-s) var(--ease-out-soft), background var(--dur-s) var(--ease-out-soft);
}
.wcard:not(.locked):hover { transform: translateY(-3px); border-color: var(--carve-strong); }
.wcard .wportraitwrap { position: relative; overflow: hidden; height: 132px; margin-bottom: 6px; border-radius: 2px; } /* 立绘包裹层：sheen 扫光的裁剪窗 */
.wcard .wportrait { height: 100%; margin: 0; } /* 尺寸交给包裹层，object-position 顶部等走 .wportrait 基础规则 */
/* r6 C4 立绘窗纹章制式：窗底=浮雕白瓷 var(--bg-raise)、纹章居中约 64% 高、圆角 2px；
   r5-C6 三件套（滤镜/冷白薄纱/亮度补偿）全部退场——纹章是原生瓷刻刻绘无需再调；
   布局零动（窗高 132px/clamp 档保留）；sheen 扫光（::after）保留不受影响。
   武器卡主视觉自此=原生瓷刻纹章，全站最后一层非瓷刻位图退场 */
.wcard .wportraitwrap {
  background: var(--bg-raise);
  display: flex;
  align-items: center;
  justify-content: center;
}
.wcard h3 { margin: 0 0 2px; font-size: 15px; white-space: nowrap; }
/* role 定位小字（文本系统丰富 2026-09-30）：h3 之下，品质色（JS 内联）压暗一档 */
.wcard .wrole {
  display: -webkit-box;
  font-size: var(--fs-micro);
  line-height: 1.4;
  opacity: 0.72;              /* 品质色 dim：同色降存在感 */
  white-space: normal;        /* [D-15] 截断改折行：两行上限，不再省略号截尾 */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 卡底 lore 背景故事：斜体暗金，两行截断，引号由 JS 包裹 */
.wcard .wlore {
  margin: 7px 0 0;
  font-size: var(--fs-micro);
  line-height: 1.5;
  font-style: italic;
  color: var(--text-tertiary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 技能小字折行（P24，基线 12a §三-3）：单列一行一技；desc 由单行省略号改为三行折行——
   完整数值文案直接可读（悬停 title 全文兜底由 JS 挂）；任何命名策略下不破格出卡缘。
   大厅层次重做：默认收起（.wsktoggle 摘要行常驻），仅 .skopen 展开时启用本列布局 */
.wcard.skopen .wskills { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wcard .wskills small {
  display: -webkit-box;
  font-size: var(--fs-micro);
  line-height: 1.45;
  color: var(--text-tertiary);
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* [D-15] 未选中卡降密：每技一行（选中卡保持三行全量，信息优势归选中态；title 悬停兜底全文已有） */
.wcard:not(.picked) .wskills small { -webkit-line-clamp: 1; opacity: 0.75; }
/* 选中=三信号缩档：翻浮雕凸版+1.5px accent 边+3px accent 顶刻线+600 字重+辉光 2.4s 呼吸
   （r3 C6：与 .dockbtn.on 同构，全站唯一选中语言；2.4s 呼吸循环类不进档） */
.wcard.picked {
  background: var(--bg-raise); /* 翻浮雕凸版 */
  border-color: var(--accent);
  border-width: 1.5px;
  animation: pickglow 2.4s var(--ease-in-out-soft) infinite; /* S5：曲线归档 */
}
.wcard.picked h3 { font-weight: 600; } /* 三信号之三：字重（与 .dockbtn.on small 同构） */
.wcard.picked::before {
  content: "";
  position: absolute;
  top: -1.5px;
  left: 14%;
  right: 14%;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent-glow);
}
@keyframes pickglow {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 0 10px color-mix(in srgb, var(--accent) 20%, transparent); }
  50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 0 18px color-mix(in srgb, var(--accent) 38%, transparent); }
} /* r3 C6：凸版顶光并入呼吸帧（animation 接管 box-shadow 期间不丢方向感） */
/* 立绘 sheen：hover 进入时白金光带 0.9s 单次扫过（动画挂 ::after，重进重放） */
.wportraitwrap::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 34%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.3) 50%, transparent); /* r2：白金光带转中性白扫光 */
  transform: translateX(-180%) skewX(-18deg);
  pointer-events: none;
}
.wcard:not(.locked):hover .wportraitwrap::after { animation: cardsheen 0.9s var(--ease-out-soft); } /* S5：0.9s 扫光单次行程定轨（跨卡面行程长，进 --dur-l 会明显加快），保留原值不进档 */
@keyframes cardsheen { to { transform: translateX(440%) skewX(-18deg); } }
/* 锁定卡：整卡暗化去饱和；锁形行拆出居中放大（纵向 flex 撑满等高卡内裡垂直居中） */
.wcard.locked { opacity: 0.55; cursor: not-allowed; filter: grayscale(0.5) brightness(0.85); display: flex; flex-direction: column; }
.wcard.locked h3 { color: var(--text-faint); }
.lockface {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.lockface .lockico { font-style: normal; font-size: 26px; margin-bottom: 8px; }
.lockface small { color: var(--text-faint); font-size: var(--fs-micro); }

/* —— P2-1b 武器形态切换条（wcard 内：role 之下、技能小字之上，稿 §8）—— */
.waspbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 4px 0 3px;
}
.waspbar .wasparrow {
  flex: none;
  width: 32px;          /* [D-08] 22×20→32×28：命中区达标 */
  height: 28px;
  box-sizing: border-box;
  padding: 0;
  font-size: 12px; /* [D-09] 10px→12px 下限之上 */
  line-height: 1;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: color var(--dur-s) var(--ease-out-soft), border-color var(--dur-s) var(--ease-out-soft);
}
.waspbar .wasparrow:hover { color: var(--accent); border-color: var(--carve-strong); }
.waspname { font-size: var(--fs-small); letter-spacing: 0.04em; white-space: nowrap; }
.waspname.unknown { color: var(--text-faint); } /* 未解锁形态：？？？置灰 */
.waspnote {
  display: block;
  font-size: var(--fs-micro);
  line-height: 1.4;
  color: var(--text-secondary);
  opacity: 0.85;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}
.waspnote.locked { color: var(--text-faint); opacity: 1; } /* 解锁条件行 */
.aspmark { font-style: normal; color: var(--accent); opacity: 0.9; } /* 技能小字「·形」角标：该技能被形态改写 */
#btn-go[disabled] { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.4); } /* 浏览未解锁形态时出征置灰 */

/* —— 出征遗物徽章：去常亮金边 → 深底安静款，选中金边亮字，hover 底色微亮；
   作用域收窄到 .chips（旧非作用域 .chip 曾把金边/内边距溅射到 HUD 血条残影层 i.chip）—— */
.chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; }
.chips .chip {
  font-style: normal;
  font-size: var(--fs-micro);
  padding: 6px 12px; /* [D-08] 3px 10px→6px 12px：命中区 ≥32px */
  min-height: 32px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  background: var(--bg-sunken);
  border: 1px solid transparent;
  border-radius: 2px;
  color: var(--text-tertiary);
  cursor: pointer;
  user-select: none;
  transition: background var(--dur-s) var(--ease-out-soft), border-color var(--dur-s) var(--ease-out-soft), color var(--dur-s) var(--ease-out-soft);
}
.chips .chip:hover { background: var(--bg-raise); color: var(--text-secondary); }
.chips .chip.on {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--bg-raise);
} /* r2：选中芯片=accent 刻线+accent 字（凸版底） */

/* —— 出征主按钮：.btn3.primary 金底白金字 48px 档（[D-01] 红改金）；glint 斜向白金光带每 7s 扫一次 + hover 辉光增强 —— */
#btn-go {
  margin-top: 14px;
  width: 100%;
  min-height: 48px;
  font-size: 16px;
  letter-spacing: 0.2em;
  position: relative;
  overflow: hidden; /* glint 光带裁在按钮圆角内裡 */
}
#btn-go::after {
  content: "";
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: 0;
  width: 26%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.3) 50%, transparent);
  transform: translateX(-180%) skewX(-18deg);
  animation: btnglint 7s var(--ease-in-out-soft) infinite;
  pointer-events: none;
}
/* 约 1.1s 扫完（16% 档）余下静止；两端位移下光带均在画外，循环回跳不可见 */
@keyframes btnglint {
  0% { transform: translateX(-180%) skewX(-18deg); }
  16%, 100% { transform: translateX(640%) skewX(-18deg); }
}
#btn-go:hover { box-shadow: 0 0 24px color-mix(in srgb, var(--accent-glow) 50%, transparent), 0 0 8px color-mix(in srgb, var(--accent-glow) 45%, transparent); } /* r2：辉光随 CTA 转发光青 */

/* —— v3 继续上局按钮：次级主操作档（有局内快照 rogue_run_v1 才渲染；凹版深一刻线边，
   与出征冰青填充主按钮区分「可续」的次级位）—— */
#btn-resume-run {
  margin-top: 14px;
  width: 100%;
  min-height: 42px;
  letter-spacing: 0.06em;
  border-color: var(--carve-strong);
  background: var(--bg-sunken);
  color: var(--text-secondary);
}
#btn-resume-run:hover {
  border-color: var(--accent);
  background: var(--bg-raise);
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 25%, transparent);
}

/* —— 选中态载体规则（[D-19] 成文，r2 随锚 B 换墙改色）：页签/子页签=accent 下划线或刻线边；
   卡片（.wcard.picked/.ccard）=1.5px accent 边+顶条+呼吸辉光；芯片（.chip.on）=accent 边+accent 字；
   停靠栏（.dockbtn.on）=3px accent 顶刻线+浮雕翻转+600 字重（三信号）——
   选中态一律 --accent 系（含 --carve-strong 刻线档），全站唯一选中语言 —— */
/* —— 页签：金边按钮款撤除 → 纯文字页签；选中金字 + 底部 2px 金下划线从左滑入（scaleX 过渡），
   轨底线与下划线相连，动静整体降一档 —— */
/* r3 C1 双页签拆除：.tabs/.tab/.tab.on/.tab::after 选择器族整体退役（DOM 已删）——
   停靠栏=唯一页签载体，全站选中语言归一「3px --accent 刻线+浮雕翻转+600 字重」一种
   （视觉笔记跨图#8 最后一处多选中语言并存就此收口）。
   .subtab（图鉴页内怪物/遗物二选一）是内容子选择器非页签，保留 */


/* —— 页签内容行卡：行底透明度 0.92→0.6（降响），3px 状态色线撤除 → 行首 6px 状态圆点
   （owned 绿 / can 金 / 其余灰，点带微光晕，不读字即可扫读状态）；hover 行底提亮一档 —— */
.treenode {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  background: var(--bg-sunken); /* r2：行卡=凹版底 */
  border: 1px solid var(--line-dim);
  border-radius: 2px;
  padding: 7px 10px;
  margin-bottom: 6px;
  font-size: var(--fs-body);
  transition: background var(--dur-s) var(--ease-out-soft), border-color var(--dur-s) var(--ease-out-soft);
}
.treenode::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line);
}
.treenode.owned::before { background: var(--heal); box-shadow: 0 0 5px var(--heal); }
.treenode.can::before { background: var(--accent); box-shadow: 0 0 5px var(--accent-glow); } /* r2：可解锁=accent 行动点 */
.treenode:hover { background: var(--bg-raise); border-color: var(--line); }
.treenode b { color: var(--text-primary); }
.treenode small { display: block; color: var(--text-tertiary); font-size: var(--fs-micro); }
.treenode.owned b { color: var(--heal); }
.treenode.can button { cursor: pointer; }
.treenode.off { opacity: 0.6; }
/* W2-7 旧规则随换墙收编：状态金化字/魂晶骨白金 → r2 冷色 token */
.treenode .dim { color: var(--text-secondary); }
#menupanel .souls b { color: var(--gain); }
/* [D-24] 框体语言与怪物格 .mobcell 统一：裸表格行→整行卡（border-bottom 分隔线改四边细边+圆角），
   hover 亮起同 mobcell 同款；未知行矮行规则（[D-11] 波次 C）以 unknown 覆盖 padding 兼容 */
.codexrow {
  display: flex;
  gap: 8px;
  align-items: baseline;
  background: var(--bg-sunken);
  border: 1px solid var(--line-dim);
  border-radius: 2px;
  margin-bottom: 4px;
  padding: 6px 10px;
  font-size: var(--fs-body);
  transition: background var(--dur-s) var(--ease-out-soft), border-color var(--dur-s) var(--ease-out-soft);
}
.codexrow:hover { background: var(--bg-raise); } /* 图鉴行 hover 浮凸一档（与树行同一语言） */
.codexrow b { color: var(--text-primary); min-width: 88px; }
.codexrow small { color: var(--text-tertiary); flex: 1; }
.codexrow em { font-style: normal; color: var(--text-faint); font-size: var(--fs-micro); }
/* [D-11] 未知行矮行降噪：单行占位（？？？/未拾取）行高减半，灰墙变密矮格，已知行自然浮出 */
.codexrow.unknown { opacity: 0.45; padding: 3px 8px; }
.codexrow.unknown small { color: var(--text-faint); font-size: var(--fs-micro); } /* 占位字压置灰+微号档 */
/* 遗物详情行 flavor（文本系统丰富 2026-09-30）：detail 之下另起一行，斜体引号暗金 */
.codexrow small em.rflavor {
  display: block;
  font-style: italic;
  color: var(--text-tertiary);
  font-size: var(--fs-micro);
  line-height: 1.5;
  margin-top: 2px;
}

/* —— 入场动效（轻）：横幅 fade+下移 0.4s；武器卡逐张 stagger 80ms。
   只挂 #menupanel.intro（每次进大厅只播一遍；点选武器/遗物触发的重渲染不重播防闪烁），
   曲线/时长/步长全走 S1 token，零新曲线 —— */
@keyframes hubbandin { from { opacity: 0; transform: translateY(-14px); } }
#menupanel.intro .menutitle { animation: hubbandin var(--dur-l) var(--ease-out-soft) both; }
#menupanel.intro .wcard {
  animation: cardin var(--dur-l) var(--ease-out-soft) both; /* cardin 沿 W2-1 既有入场关键帧 */
  animation-delay: calc(var(--i, 0) * var(--stagger));
}
/* intro 类首渲染后常驻，需与选中辉光并行，否则呼吸在首次交互前不启动 */
#menupanel.intro .wcard.picked {
  animation: cardin var(--dur-l) var(--ease-out-soft) calc(var(--i, 0) * var(--stagger)) both,
             pickglow 2.4s var(--ease-in-out-soft) calc(var(--i, 0) * var(--stagger) + var(--dur-l)) infinite; /* S5：pickglow 曲线归档，2.4s 循环类不进档 */
}

/* —— 页签内容切换淡入：renderHubTab 重渲染时子节点全新插入 → 动画自然重放（0.25s 上移淡入）—— */
#hubtab > * { animation: hubtabin var(--dur-m) var(--ease-out-soft); }
@keyframes hubtabin { from { opacity: 0; transform: translateY(6px); } }

/* —— 背景余烬粒子：.embers 全幅铺在 menuwrap 内、menupanel 之下（z 分层见下）；
   DOM+随机参数由 JS 注入一次（--x 水平位 / --d 周期 / --dl 相位 / --r 上浮距 / --s 粒径），
   动效全 CSS：纯 transform/opacity 合成层动画，页面挂起恢复后自然继续 —— */
.embers { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
#menupanel { position: relative; z-index: 1; } /* 面板抬到粒子层之上 */
.ember {
  position: absolute;
  left: var(--x, 50%);
  bottom: -6px;
  width: var(--s, 4px);
  height: var(--s, 4px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6); /* r2：暖金余烬转中性白微尘（石室空气感） */
  box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.35); /* 光晕走 box-shadow，免 filter 每帧重绘 */
  opacity: 0;
  animation: emberup var(--d, 8s) linear var(--dl, 0s) infinite; /* S5：linear 匀速上浮为粒子运动特例（两曲线档不适用），周期随机循环类不进档 */
  will-change: transform, opacity; /* 10 粒常驻合成层 */
}
@keyframes emberup {
  0% { transform: translateY(0); opacity: 0; }
  10% { opacity: 0.6; }
  60% { opacity: 0.38; }
  100% { transform: translateY(calc(0px - var(--r, 70px))); opacity: 0; }
}

/* —— 窄屏兜底：双列改单列 —— */
@media (max-width: 960px) {
  .hubgrid { grid-template-columns: 1fr; }
  #hubtab .sumgrid--two { grid-template-columns: 1fr; } /* [D-12] 存档信息两列随断点回落单列 */
}

/* ==================== S4 · 仪式感演出（调研 #11 三选一/结算 + #9 冷却兑现点） ==================== */

/* —— S4-1 三选一标题横幅：PSL Serif 大字 + 左右 4px 金菱形 + 下方 1px 渐变金线。
   金线走 background 底边 56% 宽（与 .banner-band::after / .divider2 同一语言），不加新 DOM —— */
#bigpanel h2.ceremony {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-m);
  font-family: "PSL Serif", "PSL Sans", "Microsoft YaHei", serif;
  font-weight: 900;
  letter-spacing: 0.12em;
  padding-bottom: 12px;
  margin-bottom: 18px;
  background: var(--line-deep) no-repeat left bottom / 56% 1px; /* r2：仪式标题饰线=深刻线短实线 */
  animation: ceretitlein var(--dur-l) var(--ease-out-soft) both; /* 标题先落定，卡随后入场 */
}
#bigpanel h2.ceremony::before,
#bigpanel h2.ceremony::after {
  content: "";
  flex: 0 0 4px;
  width: 4px;
  height: 4px;
  background: var(--accent);
  transform: rotate(45deg);
  box-shadow: 0 0 6px 1px var(--accent-glow);
}
@keyframes ceretitlein { from { opacity: 0; transform: translateY(-8px); } }

/* —— S4-2 稀有度揭晓闪光：卡入场完成（约 0.5s + 逐卡 --i stagger）后按档触发一次——
   rar1 角部微光 / rar2 金光扫过 / rar3 金光扫过 + 辉光双脉冲（粒子感 box-shadow）。
   闪光层走 ::after（inset 0 + pointer-events none，不挡整卡点击）；.ccard 补 overflow:hidden
   裁扫光出界（子元素均在 padding 盒内，无既有溢出依赖）——
   S5：0.7/0.8/1.1s 为 S4 揭晓演出定轨（与 0.5s 起拍、rarflare 音效编排同拍，进 --dur-l 会明显
   压缩仪式节奏），时长保留原值不进档；曲线已挂 --ease-out-soft —— */
.ccard { overflow: hidden; }
.ccard::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
}
/* r2：揭晓演出光带转中性白（白瓷卡上的光泽；品质语义仍由边框/顶线/内联色承载） */
.ccard.rar1::after {
  background: radial-gradient(circle at 78% 12%, rgba(255, 255, 255, 0.55), transparent 55%);
  animation: flareglim 0.7s var(--ease-out-soft) calc(0.5s + var(--i, 0) * var(--stagger));
}
.ccard.rar2::after,
.ccard.rar3::after {
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.45) 46%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.45) 54%, transparent 70%);
  animation: flaresweep 0.8s var(--ease-out-soft) calc(0.5s + var(--i, 0) * var(--stagger));
}
.ccard.rar3::after {
  animation: flaresweep 0.8s var(--ease-out-soft) calc(0.5s + var(--i, 0) * var(--stagger)),
             flareburst 1.1s var(--ease-out-soft) calc(0.55s + var(--i, 0) * var(--stagger));
}
@keyframes flareglim { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: 0; } }
@keyframes flaresweep {
  0% { opacity: 0; transform: translateX(-70%) skewX(-12deg); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translateX(70%) skewX(-12deg); }
}
@keyframes flareburst {
  0% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
  18% { box-shadow: 0 0 18px 2px rgba(255, 255, 255, 0.8), 0 0 40px 6px rgba(255, 255, 255, 0.4); }
  38% { box-shadow: 0 0 8px 1px rgba(255, 255, 255, 0.25), 0 0 18px 2px rgba(255, 255, 255, 0.15); }
  58% { box-shadow: 0 0 22px 4px rgba(255, 255, 255, 0.9), 0 0 52px 10px rgba(255, 255, 255, 0.5); }
  100% { opacity: 0; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* —— S4-3 结算逐行揭晓：fade + 左移入场，--stagger(80ms) 逐行延迟。
   作用域收窄在 .sumgrid.reveal（仅结算面板挂 reveal 类）——暂停菜单/统计页 statline 不受影响 —— */
.sumgrid.reveal .statline {
  animation: sumlinein var(--dur-m) var(--ease-out-soft) both; /* S5：0.3s→--dur-m（-50ms） */
  animation-delay: calc(var(--i, 0) * var(--stagger));
}
@keyframes sumlinein { from { opacity: 0; transform: translateX(16px); } }
/* 魂晶入账行（--i:5 最后揭晓）：真值由 JS rAF tween 写入，视觉层只做金字点亮 */
.sumgrid.reveal .statline.soulsline b { color: var(--gain); } /* r2：魂晶入账行=白面板内唯一暖点，金晕撤 */

/* —— S4-4 结算标题：胜利=金字渐显 + 辉光呼吸（0.6s 落定后 2.4s 循环）；
   死亡=红字微震入场（一次性 0.4s，颜色沿用既有 h2.win/.lose 规则）—— */
#bigpanel h2.win {
  /* S5：winin 0.6s 为胜利演出定轨（渐显落定后接 winbreathe 0.6s 起拍，进 --dur-l 会明显加速
     且需联动改呼吸起拍），保留原值不进档；winbreathe 2.4s 循环类不进档、曲线归档 */
  animation: winin 0.6s var(--ease-out-soft) both,
             winbreathe 2.4s var(--ease-in-out-soft) 0.6s infinite;
}
@keyframes winin { from { opacity: 0; transform: scale(0.92); } }
@keyframes winbreathe {
  0%, 100% { text-shadow: 0 0 10px color-mix(in srgb, var(--gain) 25%, transparent); }
  50% { text-shadow: 0 0 22px color-mix(in srgb, var(--gain) 60%, transparent); }
} /* r2：胜利金呼吸随 --gain 换值派生（深金在白底上的克制冷光） */
#bigpanel h2.lose { animation: losein var(--dur-l) var(--ease-out-soft) both; } /* S5：0.4s==--dur-l 精确归档 */
@keyframes losein {
  0% { opacity: 0; transform: translateX(0); }
  15% { opacity: 1; transform: translateX(-5px); }
  32% { transform: translateX(4px); }
  50% { transform: translateX(-3px); }
  68% { transform: translateX(2px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* —— S4-5 遗物回顾行依次点亮：scale-in + 闪光，每枚 120ms，0.55s 起（接在六行揭晓之后）—— */
.endrelics .relicico.mini {
  animation: reliclightin var(--dur-m) var(--ease-out-soft) both; /* S5：0.32s→--dur-m（-70ms 就近）；0.55s 起拍为演出定轨 */
  animation-delay: calc(0.55s + var(--j, 0) * 120ms); /* 120ms 连珠步长为 S4-5 演出定轨（慢 --stagger 一档），不进档 */
}
@keyframes reliclightin {
  0% { opacity: 0; transform: scale(0.5); filter: brightness(2.2); }
  60% { opacity: 1; transform: scale(1.12); filter: brightness(1.6); }
  100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}

/* —— S4-6 冷却就绪兑现点：槽一次性白光 0.25s（JS 在 UI.update 检测 rem >0→0 边沿挂 .readyflash）—— */
#hotbar .slot.readyflash { animation: readyflash var(--dur-m) var(--ease-out-soft); } /* S5：0.25s==--dur-m 精确归档 */
@keyframes readyflash {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); filter: brightness(1); }
  35% { box-shadow: 0 0 16px 3px rgba(255, 255, 255, 0.85); filter: brightness(1.55); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); filter: brightness(1); }
} /* r2：暖白闪光转中性白 */

/* ==================== P0-1 设置子页（暂停面板 → 设置） ====================
   素雅暗金语言：行式布局贴 .sumgrid/.statline 既有件；滑条/复选框为页面唯一原生控件，
   自绘轨道与滑块保持暗金（accent-color 兜底 + WebKit 伪元素精修）。 */
#bigpanel .setgrid {
  max-width: 320px; margin: 0 auto 14px; text-align: left;
}
#bigpanel .setrow {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--line-dim);
  font-size: var(--fs-small); color: var(--text-secondary);
  cursor: pointer;
}
#bigpanel .setrow:last-child { border-bottom: none; }
#bigpanel .setrow > span { flex: 1 1 auto; white-space: nowrap; }
#bigpanel .setrow > b {
  min-width: 40px; text-align: right; color: var(--accent);
  font-size: var(--fs-small);
}
/* 滑条：细轨道刻线 + 冰青滑块（素雅小尺寸，与面板密度一致） */
#bigpanel .setrow input[type="range"] {
  flex: 0 0 120px; width: 120px; height: 14px;
  -webkit-appearance: none; appearance: none;
  background: transparent; cursor: pointer;
}
#bigpanel .setrow input[type="range"]::-webkit-slider-runnable-track {
  height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--carve-weak), var(--carve-mid));
}
#bigpanel .setrow input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 12px; margin-top: -4.5px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent-glow);
}
#bigpanel .setrow input[type="range"]::-moz-range-track {
  height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--carve-weak), var(--carve-mid));
}
#bigpanel .setrow input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent-glow);
}
/* God Mode 复选框：小方勾，勾选态 accent 框微光 */
#bigpanel .setrow input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 15px; height: 15px; margin: 0; flex: 0 0 auto;
  border: 1px solid var(--carve-mid); border-radius: 2px;
  background: var(--bg-raise); cursor: pointer; position: relative;
}
#bigpanel .setrow input[type="checkbox"]:checked {
  border-color: var(--accent); box-shadow: 0 0 6px var(--accent-glow);
}
#bigpanel .setrow input[type="checkbox"]:checked::after {
  content: "✓"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); font-size: 11px; line-height: 1;
}
/* 键位表小节标题：正文冷灰细字 + 字距（分节标题转三级文字档） */
#bigpanel .seth {
  margin: 10px auto 4px; max-width: 320px; text-align: left;
  color: var(--text-secondary); font-size: var(--fs-small); letter-spacing: 1px;
}
/* 键位行：键值列 accent 等宽感（照 statline 基础上加重键值） */
#bigpanel .statline.keyrow b { color: var(--accent); letter-spacing: 0.5px; }

/* ==================== Heat 契约面板（P1-3：大厅出征旁自选惩罚配置）==================== */
/* 展开按钮：贴 .btn3 深底金字族，展开态边框亮起（与 chips .chip.on 同语言） */
#btn-heat {
  width: 100%; min-height: 38px; margin-top: 12px;
  font-size: var(--fs-small); letter-spacing: 0.08em;
}
#btn-heat.on { border-color: var(--carve-strong); color: var(--accent); background: var(--btn-bg-hover); }
/* 面板体：深底细边折叠盒，行多时限高滚动（10 条契约不撑破大厅列） */
.heatbox {
  margin-top: 8px; padding: 10px 12px;
  background: var(--bg-sunken);
  border: 1px solid var(--line-dim); border-radius: 2px;
  max-height: 300px; overflow-y: auto;
}
.heathead {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  padding-bottom: 6px; margin-bottom: 2px;
  border-bottom: 1px solid var(--line-dim); text-align: left;
}
.heathead b { color: var(--text-secondary); font-size: var(--fs-small); letter-spacing: 1px; }
.heathead small { color: var(--text-tertiary); font-size: var(--fs-micro); }
.heathead small i { font-style: normal; color: var(--accent); }
/* 契约行：左名右档位步进（- / 档位数 / ＋） */
.heatrow { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.heatrow + .heatrow { border-top: 1px solid rgba(58, 52, 44, 0.5); }
.heatname { flex: 1; min-width: 0; text-align: left; }
.heatname b { display: block; color: var(--text-secondary); font-size: var(--fs-small); }
.heatname small { color: var(--text-tertiary); font-size: var(--fs-micro); }
.heatctl { display: flex; align-items: center; gap: 6px; flex: none; }
.heatbtn {
  width: 32px; height: 32px; padding: 0; line-height: 1; /* [D-08] 24×24→32×32：命中区达标 */
  box-sizing: border-box;
  background: var(--bg-raise); color: var(--text-secondary);
  border: 1px solid var(--carve-mid); border-radius: 2px;
  font-size: 16px; cursor: pointer; /* [D-09/D-08] 14px→16px */
  transition: border-color var(--dur-s) var(--ease-out-soft), background var(--dur-s) var(--ease-out-soft);
}
.heatbtn:hover:not(:disabled) { border-color: var(--carve-strong); background: var(--btn-bg-hover); }
.heatbtn:disabled { color: var(--text-faint); background: var(--bg-sunken); border-color: var(--line-dim); cursor: not-allowed; }
.heatlv { width: 18px; text-align: center; color: var(--text-tertiary); font-size: var(--fs-body); }
.heatlv.on { color: var(--accent); }
/* 封顶提示行：代价红细字（贴 .heathint 语义=「还想加？先通关」） */
.heathint {
  margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line-dim);
  color: var(--cost); font-size: var(--fs-micro); text-align: left;
}

/* ==================== P2-2 叙事对话框（局内底部小面板；结算后浮于屏幕上带） ==================== */
/* 位置：局内=技能栏上方居中（bottom 144px，避让 #guidebar 的 96px 锚位——引导条顶缘约 131px，
   144 留 13px 呼吸 [D-03]①）；settle=屏幕上带 16px（气泡高约 100px，恰让位结算面板顶缘 [D-03]②）。
   显隐走 opacity+visibility+位移过渡；pointer-events 仅在 show 时开启（点击收起），平时零拦截；
   settle 态恒 pointer-events:none（结算气泡纯氛围演出不拦面板按钮，「继续」语义唯一归面板）。
   z-index 20 > #panelwrap 15：死亡/胜利结算面板在场时对话框浮于其上。 */
#dlgbox {
  position: fixed;
  left: 50%;
  bottom: 144px;
  transform: translateX(-50%) translateY(14px);
  display: flex;
  align-items: stretch;
  gap: 10px;
  max-width: min(560px, 86vw);
  padding: 10px 16px 12px 12px;
  background: rgba(12, 16, 20, 0.94); /* C5：局内对话盒=暗底玻璃制（浮在暗场景上） */
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 20;
  transition: opacity var(--dur-m) var(--ease-out-soft), transform var(--dur-m) var(--ease-out-soft),
    visibility var(--dur-m) var(--ease-out-soft);
}
#dlgbox.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
  cursor: pointer;
}
#dlgbox.settle { bottom: auto; top: 16px; pointer-events: none; } /* 结算后：屏幕上带（16+约100px 让位面板顶缘），不拦结算按钮 [D-03]② */
/* 竖排头像色块（色值由 JS 按 DATA.PALETTE 内联写入，CSS 只管形状） */
.dlgavatar { flex: none; width: 8px; border-radius: 2px; }
.dlgbody { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; }
.dlgbody .dlgwho {
  font-family: "PSL Serif", "PSL Sans", "Microsoft YaHei", serif;
  font-weight: 900;
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  line-height: 1.7;
}
.dlgbody span { display: block; font-size: var(--fs-small); color: var(--btn-primary-text); line-height: 1.5; text-shadow: 0 1px 2px #000; } /* P3-3 第 6 轮：多行台词逐行换行；r2 C5：暗底亮字档 */
.dlghint { font-style: normal; font-size: var(--fs-micro); color: var(--ornament); margin-top: 4px; text-align: right; }

/* ==================== P2-3 · 图鉴双页（怪物格/遗物轴标）+ 挑战簿 ==================== */
/* 图鉴子页签：同 .tab 语言的紧凑按钮款（图鉴页内怪物/遗物二选一） */
.subtabs { display: flex; gap: var(--sp-s); margin-bottom: var(--sp-s); }
.subtab {
  background: none;
  border: 1px solid var(--line-dim);
  border-radius: 2px;
  color: var(--text-tertiary);
  padding: 4px 12px; /* [D-08] 2px 10px→4px 12px：命中区 ≥32px */
  min-height: 32px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: color var(--dur-s) var(--ease-out-soft), border-color var(--dur-s) var(--ease-out-soft),
    background var(--dur-s) var(--ease-out-soft);
}
.subtab:hover { color: var(--text-secondary); border-color: var(--line); }
.subtab.on { color: var(--accent); border-color: var(--carve-strong); background: var(--bg-raise); } /* [D-19]② 选中=accent 刻线强档，与页签下划线同源 */

/* 怪物图鉴格：两列网格；已见=名+击杀数+风味句，未见=？？？剪影（整格压暗） */
.codexgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.mobcell {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-height: 54px;
  background: var(--bg-sunken);
  border: 1px solid var(--line-dim);
  border-radius: 2px;
  padding: 6px 9px;
  transition: background var(--dur-s) var(--ease-out-soft), border-color var(--dur-s) var(--ease-out-soft);
}
.mobcell:hover { background: var(--bg-raise); }
.mobcell b { color: var(--text-primary); font-size: var(--fs-small); line-height: 1.4; }
.mobcell small { color: var(--text-tertiary); font-size: var(--fs-micro); }
.mobcell em { font-style: italic; color: var(--text-faint); font-size: var(--fs-micro); line-height: 1.45; }
.mobcell.unknown { opacity: 0.45; }
.mobcell.unknown b { letter-spacing: 0.25em; }
.mobcell.bossrow { /* P3-3 第 6 轮：Boss 全宽行卡（grid-column:1/-1 跨满双列）——技能标签+应对句常驻可见 */
  grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  border-color: var(--carve-strong);
}
.mobcell.bossrow b { color: var(--accent); }
.bossskills { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.bossskills i { font-style: normal; font-size: var(--fs-micro); color: var(--text-secondary); border: 1px solid var(--line); border-radius: 2px; padding: 1px 5px; }
.mobcell.bossrow u { text-decoration: none; font-size: var(--fs-micro); color: var(--text-secondary); width: 100%; }
.mobcell.isboss b { color: var(--accent); }

/* 遗物图鉴轴点（圆框单字，色值 JS 按 DATA.RELIC_AXES→PALETTE 内联写入）与双重恩赐「双」金标 */
.codexrow .axisdot,
.codexrow .duomark {
  flex: none;
  align-self: center;
  width: 17px;
  height: 17px;
  font-style: normal;
  font-size: 10px;
  line-height: 15px;
  text-align: center;
  border-radius: 50%;
  cursor: help;
}
.codexrow .duomark { border-radius: 2px; border: 1px solid var(--accent); color: var(--accent); } /* r2：双重恩赐「双」标=accent 稀有标记 */

/* 挑战簿行：名+预言式描述 | 进度条+数值 | 领奖槽（达成金框、领取后压暗） */
.chalrow {
  display: flex;
  align-items: center;
  gap: var(--sp-m);
  background: var(--bg-sunken);
  border: 1px solid var(--line-dim);
  border-radius: 2px;
  padding: 7px 10px;
  margin-bottom: 6px;
  transition: border-color var(--dur-s) var(--ease-out-soft), opacity var(--dur-s) var(--ease-out-soft);
}
.chalrow .chalhead { flex: 1; min-width: 0; }
.chalrow .chalhead b { display: block; color: var(--text-primary); font-size: var(--fs-body); line-height: 1.5; }
.chalrow .chalhead small { color: var(--text-tertiary); font-size: var(--fs-micro); line-height: 1.5; display: block; } /* [D-10] 块级化：描述换行后仍贴左 */
.chalprog { flex: 0 0 86px; }
.chalbar { height: 4px; background: var(--line-dim); border-radius: 2px; overflow: hidden; }
.chalbar i { display: block; height: 100%; background: var(--accent); border-radius: 2px; transition: width var(--dur-m) var(--ease-out-soft); } /* r2：挑战进度=accent */
.chalprog small { display: block; text-align: right; color: var(--text-tertiary); font-size: var(--fs-micro); }
.chalrow.done { border-color: var(--carve-strong); }
.chalrow.done .chalhead b { color: var(--accent); }
.chalrow.claimed { opacity: 0.55; }
.chalrow button {
  background: var(--bg-raise);
  color: var(--text-secondary);
  border: 1px solid var(--carve-mid);
  border-radius: 2px;
  padding: 4px 12px; /* [D-08] 4px 10px→4px 12px：命中区 ≥32px */
  min-height: 32px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-small);
  cursor: pointer;
  transition: box-shadow var(--dur-s) var(--ease-out-soft), color var(--dur-s) var(--ease-out-soft);
}
.chalrow button:hover { color: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }
.chalgold { color: var(--gain); } /* r2：印记数字=白面板内唯一暖点 */

/* ==================== P2-4 营火谈心（好感度轻量版）：三角色好感行 + 印记升级 + 对话回看 ====================
   素雅暗金语言：行式布局贴 .chalrow/.treenode 既有件（行底 0.6 透明 + 暗金边 + hover 提亮），
   好感条=铜金渐变窄条（.chalbar 同构），对话回看=斜体暗金引文（.wlore/.cflavor 同语言） */
.bondchar {
  background: var(--bg-sunken);
  border: 1px solid var(--line-dim);
  border-radius: 2px;
  padding: 8px 10px;
  margin-bottom: 8px;
  transition: border-color var(--dur-s) var(--ease-out-soft);
}
.bondchar:hover { border-color: var(--line); }
.bondchar.maxed { border-color: var(--carve-strong); }
.bondhead { display: flex; align-items: baseline; gap: 8px; }
.bondhead b { font-size: var(--fs-body); }
.bondhead small { flex: 1; color: var(--text-tertiary); font-size: var(--fs-micro); line-height: 1.5; }
.bondhead button {
  background: var(--bg-raise);
  color: var(--gain); /* r2：谈心按钮挂暖金收益字（花印记=货币动作） */
  border: 1px solid var(--carve-mid);
  border-radius: 2px;
  padding: 4px 12px; /* [D-08] 3px 10px→4px 12px：命中区 ≥32px */
  min-height: 32px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-small);
  cursor: pointer;
  transition: box-shadow var(--dur-s) var(--ease-out-soft), color var(--dur-s) var(--ease-out-soft);
}
.bondhead button:hover { color: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }
.bondhead button:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.bondbar { height: 5px; background: var(--line-dim); border-radius: 2px; overflow: hidden; margin: 6px 0 4px; }
.bondbar i { display: block; height: 100%; background: var(--gain); border-radius: 2px; transition: width var(--dur-m) var(--ease-out-soft); } /* r2：好感成长=暖金实色 */
.bondchar.maxed .bondbar i { background: var(--gain); }
.bondlist { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.bonddlg span { display: block; } /* P3-3 第 6 轮：营火对话文案换行（同对话正文样式） */
.bonddlg { font-size: var(--fs-micro); line-height: 1.6; color: var(--text-secondary); font-style: italic; }
.bonddlg em {
  font-style: normal;
  color: var(--text-secondary);
  font-size: var(--fs-micro); /* [D-09] 10px→11px 下限 */
  border: 1px solid var(--carve-mid);
  border-radius: 2px;
  padding: 0 4px;
  margin-right: 6px;
}

/* ==================== v3 存档管理（S3：导出/导入/备份回滚，大厅「存档」tab）==================== */
/* r3 C1：.tabs 换行兜底规则随页签族退役删除 */
/* 分节小标题：正文冷灰细字（r2 分节标题转三级文字档） */
#hubtab .svh { margin: 14px 0 6px; color: var(--text-secondary); font-size: var(--fs-small); letter-spacing: 0.08em; }
/* 存档码 textarea：暗底铜边等宽字，长码自动折行 */
.saveta {
  width: 100%;
  box-sizing: border-box;
  min-height: 62px;
  resize: vertical;
  background: var(--bg-panel);
  color: var(--text-secondary);
  border: 1px solid var(--line-dim);
  border-radius: 2px;
  padding: 6px 8px;
  font-size: var(--fs-micro);
  line-height: 1.5;
  font-family: Consolas, "Courier New", monospace;
  word-break: break-all;
  overflow-wrap: anywhere;
}
.saveta:focus { outline: none; border-color: var(--accent); }
.saveta::placeholder { color: var(--text-faint); }
/* 勾选行：原生 checkbox 染金（与设置页 God Mode 同口径） */
.savecheck { display: flex; align-items: center; gap: 6px; font-size: var(--fs-small); color: var(--text-tertiary); margin-bottom: 6px; cursor: pointer; }
.savecheck input { accent-color: var(--accent); cursor: pointer; }
.savecheck input:disabled { cursor: not-allowed; }
/* 按钮行：.btn3 收窄成行内小档 */
.saverow { display: flex; gap: 8px; margin: 8px 0 2px; }
.saverow .btn3 { padding: 5px 14px; font-size: var(--fs-small); }
/* 备份行：贴 .codexrow 语言（时间戳 + 魂晶 + 恢复按钮） */
.bakrow { display: flex; gap: 8px; align-items: center; padding: 5px 8px; border-bottom: 1px solid var(--line-dim); font-size: var(--fs-small); }
.bakrow b { color: var(--text-primary); font-weight: 400; }
.bakrow small { color: var(--text-tertiary); flex: 1; }
/* 导入确认面板警示行 */
#bigpanel .impwarn { color: var(--cost); font-size: var(--fs-small); margin-top: 10px; }

/* P3-3 第 7 轮：红点 badge（树 tab/结算返回大厅双端同源）——r2：提醒点=accent+发光青描边光 */
.redbadge {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 4px var(--accent-glow);
  margin-left: 4px;
  vertical-align: middle;
}