/* 天机问道 网页客户端样式 —— 治愈风，暖白磨砂面板浮于明亮场景图。
   配色仅作氛围，关键信息不单靠颜色传达（多端/无障碍兼容）。 */

:root {
  /* 暖底（回落底色 / 输入框 / 进度槽底） */
  --ink-0: #ece3d4;
  --ink-1: #f3ece0;
  --ink-2: #e7ddca;
  /* 暖白磨砂面板 */
  --glass: rgba(252, 248, 240, 0.72);
  --glass-strong: rgba(253, 250, 244, 0.9);
  --panel: rgba(252, 248, 240, 0.72);
  --panel-strong: rgba(253, 250, 244, 0.9);
  --glass-line: rgba(193, 154, 74, 0.55);
  --hair: rgba(120, 100, 70, 0.2);
  /* 浮于场景的半透明按钮底（治愈系，透出背景） */
  --glass-btn: rgba(253, 250, 244, 0.4);
  --glass-btn-hover: rgba(255, 253, 248, 0.62);
  /* 玉色（主强调 / 可交互 / 灵力）—— 浅底加深保对比 */
  --jade: #3f8f6f;
  --jade-dim: #5a8d78;
  /* 描金（标题 / 数值 / 境界 / 奖励）—— 浅底用深金棕作文字 */
  --gold: #8a6a2a;
  --gold-bright: #b07d22;
  --gold-ink: #8a6a2a;
  --gold-line: rgba(193, 154, 74, 0.55);
  /* 朱砂（伤害 / 敌方 / 警示 / 气血） */
  --cinnabar: #bf564d;
  --cinnabar-bright: #c75c45;
  /* 文本 —— 浅底深色 */
  --text: #3a3128;
  --text-dim: #6b5f4e;
  --text-faint: #9a8d76;
  /* 字体：标题/境界/数值用楷体衬线（系统字体，零依赖） */
  --serif: "STKaiti", "KaiTi", "楷体", "Songti SC", serif;
  --sans: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;

  /* ===== 设计系统 token（单一来源；新组件优先复用，勿散落硬编码） ===== */
  /* 语义状态色：成功=玉、危险/警示=朱砂、中性禁用、加载骨架（映射既有主色，统一调用名） */
  --success: var(--jade);
  --danger: var(--cinnabar);
  --warning: #c79a5a;
  --disabled: #9a8d76;
  --skeleton: #e7ddca;
  /* 间距尺度（8 基线，4 为半档）：紧凑→宽松 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  /* 圆角：按钮 / 卡片 / 浮层 / 胶囊 */
  --r-btn: 10px;
  --r-card: 12px;
  --r-panel: 16px;
  --r-pill: 999px;
  /* 动效时长：微反馈 / 转场 / HP 补间（prefers-reduced-motion 时各处自降级） */
  --t-fast: 120ms;
  --t-base: 240ms;
  --t-hp: 300ms;
  /* 层级约定（z-index 语义档，避免魔法数字打架）：
     场景 1 · 立绘/角色 5 · HUD 周边 6-7 · 顶栏/底 nav 8 · 闭关锁 90 · 浮层 100 */
  --z-scene: 1;
  --z-actor: 5;
  --z-chrome: 8;
  --z-lock: 90;
  --z-overlay: 100;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  height: 100%;
  background: var(--ink-0);
  color: var(--text);
  font-family: var(--sans);
  overflow: hidden;
  user-select: none;
}

button {
  padding: 11px 16px;
  font-size: 15px;
  color: var(--text);
  background: var(--glass-btn);
  border: 1px solid var(--gold-line);
  border-radius: 10px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.14s, transform 0.08s, box-shadow 0.14s, border-color 0.14s;
}
button:hover:not(:disabled) {
  background: var(--glass-btn-hover);
  border-color: var(--gold-bright);
}
button:active:not(:disabled) {
  transform: scale(0.95);
}
button:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ---------------- 登录浮层（修仙入口·游戏化） ---------------- */

.overlay {
  position: fixed;
  /* 同 .overlay-panel：用可见视口高度居中，避免移动端地址栏弹出时登录卡被裁且无法滚动进游戏 */
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  box-sizing: border-box;
  /* 破晓天光：上方暖白 → 远天淡青，营造仙山日出氛围 */
  background:
    radial-gradient(120% 80% at 50% 8%, #fbf5e9 0%, #f1e7d3 42%, #e2dcc8 70%, #d6d3bf 100%);
  overflow: hidden;
  z-index: 100;
}

/* 装饰场景层：日月辉光 + 远山剪影（纯 CSS，无图片依赖） */
.login-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.ls-glow {
  position: absolute;
  top: -16%;
  left: 50%;
  width: 60vmin;
  height: 60vmin;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 244, 214, 0.95) 0%, rgba(232, 196, 106, 0.35) 38%, rgba(232, 196, 106, 0) 70%);
  filter: blur(2px);
}
.ls-mountains {
  position: absolute;
  inset: auto 0 0 0;
  height: 46vh;
  /* 三层远近山影，越远越淡 */
  background:
    linear-gradient(to top, rgba(90, 141, 120, 0.16), rgba(90, 141, 120, 0) 70%),
    linear-gradient(to top, rgba(63, 143, 111, 0.10), rgba(63, 143, 111, 0) 60%);
  -webkit-mask:
    linear-gradient(to top, #000 0%, #000 18%, transparent 60%);
  mask: linear-gradient(to top, #000 0%, #000 18%, transparent 60%);
  clip-path: polygon(
    0% 100%, 0% 64%, 12% 48%, 22% 60%, 33% 38%, 44% 56%,
    55% 30%, 66% 52%, 76% 40%, 88% 58%, 100% 46%, 100% 100%
  );
}

/* 全屏仙境背景图（明亮治愈系大图，登录时随机一张，缓入） */
.login-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  animation: loginBgIn 1.1s ease both;
}
@keyframes loginBgIn {
  from { opacity: 0; transform: scale(1.06); }
  to { opacity: 1; transform: scale(1); }
}
/* 柔光罩：顶部轻提亮 + 底部加深，保证白卡与文字在通透亮背景上始终可读 */
.login-scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 85% at 50% 2%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, rgba(22, 46, 70, 0.04) 0%, rgba(20, 42, 66, 0.18) 58%, rgba(14, 30, 52, 0.44) 100%);
}

.login-card {
  position: relative;
  z-index: 1;
  width: min(92vw, 412px);
  /* 手机横屏矮屏下卡片不被裁、可自身滚动（与 .bag-card/.menu-card 一致），否则进不去游戏 */
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
  padding: 34px 28px 26px;
  /* 治愈风半透明薄荷玻璃：可透出仙境背景，重磨砂保可读（仿定调图登录卡） */
  background:
    linear-gradient(180deg, rgba(244, 252, 248, 0.22), rgba(223, 244, 236, 0.15));
  border: 1.5px solid rgba(232, 200, 120, 0.82);
  border-radius: 18px;
  /* 描金双边 + 翡翠柔光 + 天青冷投影 + 内高光 */
  box-shadow:
    0 22px 56px rgba(26, 56, 86, 0.30),
    0 0 0 1px rgba(255, 255, 255, 0.45) inset,
    0 0 0 4px rgba(232, 200, 120, 0.26),
    0 0 26px rgba(150, 208, 178, 0.28);
  text-align: center;
  backdrop-filter: blur(18px) saturate(1.18);
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
}
/* 朱砂印章（右上角点睛） */
.lc-seal {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 19px;
  color: #fff8e6;
  background: linear-gradient(160deg, #74cb9e, #3f9f72);
  border-radius: 50%;
  box-shadow: 0 2px 9px rgba(63, 143, 111, 0.42), 0 0 0 2px rgba(232, 200, 120, 0.9) inset;
}
.login-card h1 {
  margin: 6px 0 4px;
  font-family: var(--serif);
  font-size: 46px;
  letter-spacing: 12px;
  text-indent: 12px; /* 抵消尾字多出的字距，保持视觉居中 */
  font-weight: 700;
  background: linear-gradient(180deg, #b07d22 0%, #8a6a2a 60%, #6f5320 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold);
  text-shadow: 0 2px 14px rgba(232, 196, 106, 0.3);
}
.login-card .sub {
  margin: 2px 0 22px;
  font-family: var(--serif);
  font-size: 14px;
  color: var(--text-dim);
  letter-spacing: 3px;
}
.login-card .status {
  min-height: 20px;
  margin: 14px 2px 2px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--cinnabar);
}

.field {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 12px 0;
}
/* 输入框前缀字符标（道 / 密 / 证），纯文字承载语义、不靠颜色 */
.field-ico {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 0 8px;
  font-family: var(--serif);
  font-size: 15px;
  color: var(--gold);
  /* 翡翠玉色描金前缀（仿定调图输入框左侧玉饰） */
  background: rgba(91, 191, 138, 0.28);
  border: 1px solid rgba(232, 200, 120, 0.7);
  border-right: none;
  border-radius: 999px 0 0 999px;
}
.field .field-ico + input {
  border-radius: 0 999px 999px 0 !important;
  border-left: none !important;
}

input[type="text"],
input[type="password"] {
  flex: 1;
  min-width: 0;
  padding: 12px 15px;
  font-size: 15px;
  color: var(--text);
  /* 浅色半透药丸（透出薄荷玻璃底，仿定调图） */
  background: rgba(255, 255, 255, 0.52);
  border: 1px solid rgba(232, 200, 120, 0.7);
  border-radius: 999px;
  outline: none;
  transition: border-color 0.14s, box-shadow 0.14s, background 0.14s;
}
input[type="text"]::placeholder,
input[type="password"]::placeholder {
  color: rgba(58, 49, 40, 0.5);
}
input[type="text"]:focus,
input[type="password"]:focus {
  background: rgba(255, 255, 255, 0.66);
  border-color: var(--jade);
  box-shadow: 0 0 0 3px rgba(63, 143, 111, 0.18);
}

/* ---- 登录/注册双态 ---- */
.auth-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--gold-line);
}
.auth-tab {
  flex: 1;
  padding: 10px 0;
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: 4px;
  color: var(--text-dim);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: color 0.14s, border-color 0.14s;
}
.auth-tab:hover:not(:disabled) {
  background: transparent;
  color: var(--gold);
}
.auth-tab.on {
  color: var(--gold);
  border-bottom-color: var(--gold);
}
/* 翡翠玉色主行动按钮（登录 / 注册 / 建角色），描金边 + 辉光（仿定调图主按钮） */
.auth-submit {
  width: 100%;
  margin-top: 18px;
  padding: 13px 0;
  font-family: var(--serif);
  font-size: 17px;
  letter-spacing: 4px;
  color: #fffdf2;
  background: linear-gradient(180deg, #74cb9e 0%, #45a276 55%, #3a9069 100%);
  border: 1.5px solid rgba(232, 200, 120, 0.9);
  border-radius: 999px;
  text-shadow: 0 1px 2px rgba(28, 80, 56, 0.4);
  box-shadow:
    0 8px 20px rgba(63, 143, 111, 0.4),
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 0 0 1px rgba(255, 255, 255, 0.18) inset;
}
.auth-submit:hover:not(:disabled) {
  background: linear-gradient(180deg, #7fd6a9 0%, #4cac7f 55%, #409a70 100%);
  border-color: rgba(240, 212, 132, 1);
  box-shadow:
    0 10px 24px rgba(63, 143, 111, 0.5),
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 0 14px rgba(120, 210, 170, 0.4);
}
.dev-login-link {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 6px 0;
  font-size: 12px;
  color: var(--text-faint);
  background: transparent;
  border: none;
  cursor: pointer;
}
.dev-hint {
  color: var(--jade);
}

.el-tip {
  margin: 10px 0 4px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
  text-align: center;
}
.elements {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 10px;
}
.elements .el-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 58px;
  padding: 10px 6px;
  font-family: var(--serif);
  border-radius: 12px;
}
.elements .el-char {
  font-size: 22px;
}
.elements .el-hint {
  font-size: 10px;
  color: var(--text-faint);
  white-space: nowrap;
}
/* 五行各自色调（信息已由字+文字说明承载，色彩仅作氛围增强） */
.el-btn.el-metal { color: #b08d3a; }
.el-btn.el-wood  { color: #4f9e7f; }
.el-btn.el-water { color: #3f7bb0; }
.el-btn.el-fire  { color: #bf564d; }
.el-btn.el-earth { color: #a8843c; }
.el-btn.el-metal .el-char { text-shadow: 0 0 10px rgba(216, 201, 122, 0.4); }
.el-btn.el-wood  .el-char { text-shadow: 0 0 10px rgba(121, 192, 138, 0.4); }
.el-btn.el-water .el-char { text-shadow: 0 0 10px rgba(111, 168, 212, 0.4); }
.el-btn.el-fire  .el-char { text-shadow: 0 0 10px rgba(212, 101, 79, 0.4); }
.el-btn.el-earth .el-char { text-shadow: 0 0 10px rgba(199, 154, 90, 0.4); }

.hint {
  margin-top: 14px;
  font-size: 12px;
  color: var(--text-faint);
}

/* ---------------- 全屏场景背景层 ---------------- */

#backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-color: var(--ink-1);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-image 0.45s ease-in-out;
}
/* 场景图淡入层：渐变铺在 #backdrop 自身，图叠在本层并 opacity 0→1 淡入，
   消除弱网下渐变→大图的硬切闪烁（background-image 的 transition 对图↔渐变无效） */
.backdrop-img-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
}
/* 柔化：治愈风浅底，顶/底极淡暖白晕染保证浮条文字可读，不压黑场景 */
#backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      to bottom,
      rgba(255, 252, 245, 0.34) 0%,
      rgba(255, 252, 245, 0) 22%,
      rgba(255, 252, 245, 0) 70%,
      rgba(255, 250, 242, 0.44) 100%
    );
}

/* ---------------- 游戏主界面（场景全屏铺满，面板浮于其上） ---------------- */

#game {
  position: fixed;
  inset: 0;
  z-index: 1;
}

/* 顶部 HUD：治愈系冷亮玻璃（通透近白 + 一缕天青，浮于明亮场景之上） */
#hud {
  background: linear-gradient(180deg, rgba(250, 253, 255, 0.78), rgba(236, 247, 250, 0.66));
  backdrop-filter: blur(13px) saturate(1.1);
  -webkit-backdrop-filter: blur(13px) saturate(1.1);
}

#hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 18px;
  /* 左右叠加安全区，横屏时 HUD 内容不被刘海/圆角压住 */
  padding: 0 max(18px, env(safe-area-inset-right)) 0 max(18px, env(safe-area-inset-left));
  border-bottom: 1px solid var(--glass-line);
  box-shadow: 0 2px 14px rgba(60, 50, 30, 0.18);
}
.hud-id {
  display: flex;
  align-items: center;
  gap: 10px;
}
#hud .name {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 1px;
  white-space: nowrap; /* 道号恒横排，绝不被挤成竖排 */
}
.hud-id {
  flex: 0 0 auto; /* 身份组不被压缩 */
}
#hud .realm-pill {
  font-family: var(--serif);
  font-size: 12px;
  color: var(--gold-bright);
  padding: 2px 10px;
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  background: rgba(201, 161, 74, 0.08);
}
.element-badge {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 13px;
  border-radius: 50%;
  border: 1px solid currentColor;
}
.element-badge.el-metal { color: #d8c97a; background: rgba(216, 201, 122, 0.12); }
.element-badge.el-wood  { color: #79c08a; background: rgba(121, 192, 138, 0.12); }
.element-badge.el-water { color: #6fa8d4; background: rgba(111, 168, 212, 0.12); }
.element-badge.el-fire  { color: #d4654f; background: rgba(212, 101, 79, 0.12); }
.element-badge.el-earth { color: #c79a5a; background: rgba(199, 154, 90, 0.12); }

/* 两层 HUD 行容器：宽屏 display:contents → 子项并入 #hud 单行（外观不变）；
   窄屏(≤680)在响应式块转 flex 两行。 */
.hud-row {
  display: contents;
}
#hud .bars {
  display: flex;
  gap: 14px;
  align-items: flex-end;
}
/* 单行档：身份靠左，气血/灵力/修为/货币整组靠右（margin-left:auto 只加在右组首项）。 */
#hud .bars-vital {
  margin-left: auto;
}
.bar {
  width: 132px;
}
.bar.exp {
  width: 110px;
}
.bar .bar-label {
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 3px;
}
.bar .bar-label span {
  font-family: var(--serif);
  color: var(--text);
}
.bar .bar-track {
  position: relative;
  height: 10px;
  background: var(--ink-0);
  border: 1px solid var(--hair);
  border-radius: 5px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(60, 50, 30, 0.25);
}
.bar.exp .bar-track {
  height: 6px;
}
.bar .bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  transition: width 0.3s ease-out;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  z-index: 2;
}
.bar .bar-damage {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  z-index: 1;
  background: rgba(239, 201, 113, 0.72);
  transition: width 0.48s ease-out;
}
.bar.hp .bar-fill {
  background: linear-gradient(90deg, #8b3a3a, var(--cinnabar));
}
.bar.mp .bar-fill {
  background: linear-gradient(90deg, #2f5d7a, #5aa0c4);
}
.bar.exp .bar-fill {
  background: linear-gradient(90deg, var(--gold-bright), var(--gold));
}

.hud-right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.stones {
  font-size: 14px;
  color: var(--gold);
}
/* 货币图标：OSS 有图则显（自动升级），无图 onerror 自移除回落纯文字 */
.cur-ico {
  width: 15px;
  height: 15px;
  vertical-align: -3px;
  margin-right: 3px;
  object-fit: contain;
}
.stones .stones-num {
  font-family: var(--serif);
}
/* 仙玉：付费高价货币，用更亮的描金与灵石拉出层次（原先无样式继承黑字像未做完） */
.spirit-yu {
  font-size: 14px;
  color: var(--gold-bright);
}
.spirit-yu .yu-num {
  font-family: var(--serif);
}
.spirit-yu.clickable {
  cursor: pointer;
}
.spirit-yu.clickable:hover {
  text-decoration: underline;
}
.hud-bag {
  padding: 7px 16px;
  font-size: 14px;
}
/* 背景音乐开关：圆形玻璃小钮（与背包钮同family） */
.hud-mute {
  width: 38px;
  height: 38px;
  padding: 0;
  font-size: 17px;
  line-height: 1;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hud-mute .mute-ico {
  pointer-events: none;
}

/* ---------------- 场景区（全屏铺满，托所有叠层） ---------------- */

#stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: transparent;
}

/* 小地图（舆图）：右上角半透明暖白磨砂圆盘（治愈系，避开顶部 HUD） */
#map {
  position: absolute;
  top: 66px;
  right: 16px;
  width: 168px;
  height: 168px;
  z-index: 6;
  display: block;
  overflow: hidden;
  border: 1px solid var(--gold-line);
  border-radius: 50%;
  background: rgba(253, 250, 244, 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(60, 50, 30, 0.18);
}
#stage.map-collapsed #map {
  display: none;
}
/* 舆图收起/展开钮：贴在圆盘右上角弧边；收起后单独作小圆钮 */
#map-toggle {
  position: absolute;
  top: 74px;
  right: 22px;
  z-index: 7;
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 13px;
  line-height: 1;
  border-radius: 50%;
  color: var(--gold-ink);
}
/* 视觉保持 28px，透明热区外扩到 44px 触摸基线，防误触相邻圆盘 */
#map-toggle::after {
  content: "";
  position: absolute;
  inset: -8px;
}

/* 房名横幅：左上角描金暖白胶囊（避开顶部 HUD） */
#room-banner {
  position: absolute;
  top: 70px;
  left: 14px;
  z-index: 6;
  max-width: 56%;
  padding: 8px 16px;
  background: var(--panel);
  border: 1px solid var(--gold-line);
  border-radius: 12px;
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 14px rgba(60, 50, 30, 0.2);
}
#room-banner .rb-name {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--gold-ink);
  text-shadow: 0 1px 2px rgba(255, 252, 245, 0.6);
}
#room-banner .rb-energy {
  margin-top: 2px;
  font-size: 12px;
  color: var(--jade);
}
#room-banner:empty {
  display: none;
}

/* ---------------- 角色形象浮动层（NPC / 玩家立绘叠在场景上） ---------------- */

#actors {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none; /* 空白处不拦截，避免挡住 dpad/快捷键 */
}
/* 气泡菜单打开时整层抬到舆图(6)/日志(6)之上，避免上弹的菜单被小地图圆盘压住只露半截；
   关闭即落回 5，平时立绘不越层遮挡底部日志。 */
#actors.menu-open {
  z-index: 9;
}
.actor {
  position: absolute;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: auto;
  cursor: pointer;
}
.actor.dead {
  opacity: 0.55;
}
/* 形象：内含 AvatarFigure（af-size-scene），容器定尺寸、内部立绘填满放大到场景立绘尺寸。
   尺寸 76px：中央安全带最多 3 立绘时中心间距（≈86px）> 图宽，保证彼此不重叠。 */
.actor-figure {
  width: 76px;
  height: 76px;
  flex: 0 0 76px;
  transition: transform 0.1s;
}
.actor-figure .af-figure { width: 76px; height: 76px; font-size: 34px; }
.actor:hover .actor-figure {
  transform: translateY(-3px);
}
.actor[data-kind="beast"] .actor-figure .af-figure { --af-el: var(--cinnabar); }
.actor[data-kind="person"] .actor-figure .af-figure,
.actor[data-kind="player"] .actor-figure .af-figure { --af-el: var(--jade); }
/* 立绘加载成功：透明底整图直显（AvatarFigure 自管 .af-img-loaded 去框） */
.actor-figure .af-figure.af-img-loaded .af-portrait-img {
  object-fit: contain;
  border-radius: 0;
}
.actor-nameplate {
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--panel-strong);
  border: 1px solid var(--gold-line);
  text-align: center;
  line-height: 1.4;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(60, 50, 30, 0.18);
}
.actor-name {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--gold-ink);
  display: block;
  max-width: 92px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.actor-realm {
  font-size: 11px;
  color: var(--text-dim);
  margin-left: 5px;
}
.actor-tag {
  display: block;
  font-size: 11px;
  color: var(--text-dim);
}
/* 气泡菜单：弹在形象上方 */
.actor-menu {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  border-radius: 12px;
  background: var(--panel-strong);
  border: 1px solid var(--gold-line);
  box-shadow: 0 8px 22px rgba(60, 50, 30, 0.28);
  backdrop-filter: blur(8px);
  animation: card-in 0.16s ease-out;
}
.actor-menu-btn {
  padding: 8px 18px;
  font-family: var(--serif);
  font-size: 14px;
  white-space: nowrap;
  color: var(--gold-ink);
}

/* 地上可拾取物品：场景下沿的小标记 */
.pickup {
  position: absolute;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  pointer-events: auto;
  cursor: pointer;
  animation: pickup-bob 2.4s ease-in-out infinite;
}
.pickup-icon {
  position: relative; /* 物品图 .pickup-img 叠在占位单字之上 */
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 21px;
  color: var(--gold-ink);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, rgba(255, 244, 214, 0.95), rgba(245, 232, 200, 0.7));
  border: 1px solid var(--gold-line);
  box-shadow: 0 4px 12px rgba(60, 50, 30, 0.28), 0 0 14px rgba(201, 161, 74, 0.35);
}
.pickup-icon .pickup-img {
  position: absolute;
  inset: 2px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  object-fit: contain;
  border-radius: 50%;
}
/* 物品图加载成功：透明底整图直显，去掉圆形底框 */
.pickup-icon.img-loaded {
  background: none;
  border-color: transparent;
  box-shadow: none;
}
.pickup-icon.img-loaded .pk-ph { display: none; }
.pickup-icon.img-loaded .pickup-img { border-radius: 0; }
.pickup:hover .pickup-icon {
  box-shadow: 0 4px 12px rgba(60, 50, 30, 0.28), 0 0 18px rgba(201, 161, 74, 0.6);
}
/* 同名地上物堆叠数量角标（右上角 ×N） */
.pickup-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  font-family: var(--serif);
  font-size: 11px;
  line-height: 16px;
  text-align: center;
  color: #fff;
  background: rgba(120, 70, 40, 0.92);
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.pickup-name {
  padding: 1px 8px;
  font-size: 11px;
  color: var(--gold-ink);
  background: var(--panel-strong);
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  backdrop-filter: blur(4px);
  white-space: nowrap;
}
@keyframes pickup-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-5px); }
}

/* ---------------- 「更多」胶囊 + 溢出列表浮层 ---------------- */
/* docked 在右侧空白（小地图下沿与快捷栏上沿之间），收纳超出中央安全带的 NPC 与全部地上物。
   right/top 取值落在四安全区之间，竖屏/平板/宽屏均不遮挡方向键/快捷栏/金手指/传送阵。 */
.scene-more {
  position: absolute;
  right: 14px;
  top: 46%;
  z-index: 6;
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  font-family: var(--serif);
  color: var(--gold-ink);
  background: var(--panel-strong);
  border: 1px solid var(--gold-line);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px rgba(60, 50, 30, 0.24);
}
.scene-more:hover {
  border-color: var(--gold-bright);
  box-shadow: 0 0 14px rgba(201, 161, 74, 0.45);
}
.scene-more-ico {
  font-size: 18px;
  line-height: 1;
  color: var(--gold-bright);
}
.scene-more-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.15;
}
.scene-more-text small {
  font-size: 10px;
  color: var(--text-dim);
}

/* 少量地上物直显：右侧安全列竖排拾取胶囊（点一下即拾取，无需「更多」二次点击）。
   与 .scene-more 同处小地图下沿—快捷栏上沿之间的空白，不遮挡四安全区。 */
.scene-pickups {
  position: absolute;
  right: 14px;
  top: 42%;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none; /* 容器透传，仅胶囊本体可点 */
}
.scene-pickup {
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px 5px 6px;
  border-radius: 999px;
  background: var(--panel-strong);
  border: 1px solid var(--gold-line);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px rgba(60, 50, 30, 0.24);
}
.scene-pickup:hover {
  border-color: var(--gold-bright);
  box-shadow: 0 0 14px rgba(201, 161, 74, 0.45);
}
.scene-pickup .pickup-icon {
  width: 30px;
  height: 30px;
  font-size: 15px;
}
.scene-pickup-name {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--gold-ink);
  white-space: nowrap;
}

/* 溢出列表浮层：居中弹出，分「此处之人 / 地上之物」两段，逐行可操作 */
.scene-more-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  pointer-events: auto;
  width: min(82vw, 320px);
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  padding: 12px;
  border-radius: 16px;
  background: var(--panel-strong);
  border: 1px solid var(--gold-line);
  box-shadow: 0 12px 30px rgba(60, 50, 30, 0.34);
  backdrop-filter: blur(10px);
  animation: card-in 0.16s ease-out;
}
.scene-more-panel .more-head {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--gold-ink);
  text-align: center;
  margin-bottom: 8px;
}
.scene-more-panel .more-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.more-section {
  font-size: 11px;
  color: var(--text-dim);
  padding: 6px 2px 2px;
  border-bottom: 1px solid var(--gold-line);
  margin-bottom: 2px;
}
.more-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 2px;
}
.more-item-ico {
  flex: 0 0 auto;
}
.more-item-ico .pickup-icon {
  width: 30px;
  height: 30px;
  font-size: 15px;
}
.more-name {
  flex: 1;
  font-family: var(--serif);
  font-size: 13px;
  color: var(--gold-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.more-name.dead {
  color: var(--text-dim);
}
/* 行首类型小标签：玩家/妖兽/商人/NPC，配色区分（妖兽偏赤、玩家偏青、其余 NPC 中性） */
.more-tag {
  flex: 0 0 auto;
  font-family: var(--serif);
  font-size: 10px;
  line-height: 1.4;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--gold-line);
  color: var(--text-dim);
  background: var(--panel);
}
.more-tag.beast {
  color: #a8443a;
  border-color: rgba(168, 68, 58, 0.5);
}
.more-tag.player {
  color: #2f6d8a;
  border-color: rgba(47, 109, 138, 0.5);
}
.more-acts {
  flex: 0 0 auto;
  display: flex;
  gap: 4px;
}
.more-act-btn {
  padding: 4px 10px;
  font-family: var(--serif);
  font-size: 12px;
  color: var(--gold-ink);
  background: var(--panel);
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  cursor: pointer;
}
.more-act-btn:hover {
  border-color: var(--gold-bright);
  background: rgba(245, 238, 226, 0.96);
}
.more-close {
  margin-top: 10px;
  padding: 8px;
  font-family: var(--serif);
  font-size: 14px;
  color: var(--gold-ink);
  background: var(--panel);
  border: 1px solid var(--gold-line);
  border-radius: 12px;
  cursor: pointer;
}

/* 非四方向出口（传送阵/上/下/斜向）：场景顶部居中的通道胶囊 */
#exits {
  position: absolute;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 60%;
  pointer-events: none;
}
#exits:empty {
  display: none;
}
.portal-chip {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-family: var(--serif);
  font-size: 14px;
  color: var(--gold-ink);
  background: var(--panel);
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 12px rgba(60, 50, 30, 0.2);
}
.portal-chip:hover:not(:disabled) {
  background: rgba(245, 238, 226, 0.96);
  border-color: var(--gold-bright);
  box-shadow: 0 0 14px rgba(201, 161, 74, 0.4);
}
.portal-icon {
  font-size: 15px;
  color: var(--gold-bright);
}
.portal-dest {
  font-size: 11px;
  color: var(--text-dim);
}
@media (prefers-reduced-motion: reduce) {
  .pickup { animation: none; }
}

/* 旧右下两入口（修/江湖）已并入底部 nav，#actions 容器置空隐藏（保留 DOM 兼容旧引用）。 */
#actions {
  display: none;
}
.qa-btn {
  width: 50px;
  height: 50px;
  padding: 0;
  font-family: var(--serif);
  font-size: 19px;
  color: var(--gold-ink);
  background: var(--glass-btn);
  border: 1px solid var(--gold-line);
  border-radius: 50%;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px rgba(60, 50, 30, 0.18);
  animation: qa-in 0.18s ease-out;
}
.qa-btn:hover:not(:disabled) {
  background: var(--glass-btn-hover);
  border-color: var(--jade);
  box-shadow: 0 0 14px rgba(63, 143, 111, 0.3);
}
.qa-btn:disabled { opacity: 0.4; }
/* 「江湖」双字按钮：缩字号容纳两字 */
.qa-btn.qa-wide {
  font-size: 15px;
  letter-spacing: 0;
}
@keyframes qa-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* 方向键：左下角玉色半透明十字 */
#dpad {
  position: absolute;
  /* 叠加安全区，避开 iPhone 横屏左侧刘海/圆角压住方向键 */
  left: max(18px, env(safe-area-inset-left));
  bottom: calc(var(--nav-clear) + 12px); /* 抬离底部 nav */
  z-index: 7;
  display: grid;
  grid-template-columns: repeat(3, 54px);
  grid-template-rows: repeat(3, 48px);
  gap: 6px;
  pointer-events: none; /* 容器与格隙不拦截，避免挡住站位重叠的 NPC/物品 */
}
#dpad button {
  pointer-events: auto;
  padding: 0;
  font-size: 20px;
  color: var(--jade);
  background: var(--glass-btn);
  border: 1px solid rgba(63, 143, 111, 0.45);
  border-radius: 12px;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px rgba(60, 50, 30, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  overflow: hidden;
}
/* 方向箭头 + 目的地名（去向一眼可见）：有去向时箭头略缩给文字让位 */
.dir-arrow {
  font-size: 20px;
  line-height: 1;
}
#dpad button.has-dest .dir-arrow {
  font-size: 16px;
}
#dpad .dir-dest {
  font-family: var(--serif);
  font-size: 9px;
  line-height: 1.1;
  max-width: 100%;
  padding: 0 2px;
  color: var(--jade-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#dpad button:hover:not(:disabled) {
  background: var(--glass-btn-hover);
  box-shadow: 0 0 14px rgba(63, 143, 111, 0.3);
}
#dpad button:disabled {
  opacity: 0.3;
}
#dpad .dir-n { grid-column: 2; grid-row: 1; }
#dpad .dir-w { grid-column: 1; grid-row: 2; }
#dpad .dir-look {
  grid-column: 2;
  grid-row: 2;
  font-family: var(--serif);
  font-size: 14px;
  color: var(--gold-ink);
  border-color: var(--gold-line);
}
#dpad .dir-e { grid-column: 3; grid-row: 2; }
#dpad .dir-s { grid-column: 2; grid-row: 3; }

/* ---------------- 底部日志（透明浮于场景，点击弹历史） ---------------- */

#bottom {
  position: absolute;
  /* 随方向键/快捷键的安全区一同内缩，避免日志钻到刘海/Home 条下或压住控件 */
  left: calc(220px + env(safe-area-inset-left));
  right: calc(92px + env(safe-area-inset-right));
  bottom: calc(var(--nav-clear) + 12px); /* 抬离底部 nav */
  height: 96px;
  z-index: 6;
  display: flex;
  cursor: pointer;
}
#log {
  flex: 1;
  padding: 6px 12px;
  overflow: hidden; /* 仅露最新几行；点击看全部历史 */
  font-size: 13px;
  line-height: 1.55;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 26%);
}
#log .line {
  color: var(--text);
  margin: 2px 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  text-shadow: 0 1px 3px rgba(255, 252, 245, 0.85), 0 0 2px rgba(255, 252, 245, 0.9);
  animation: line-in 0.28s ease-out;
}
#log .line.sys { color: var(--gold-ink); }
#log .line.reward { color: #2f7d52; }
#log .line.dmg { color: var(--cinnabar); }
#log .line.head { color: var(--gold); font-weight: 700; }
#log .line.exits { color: var(--jade-dim); }
#log .line.npcs { color: var(--jade); }
#log .line.items { color: var(--text-dim); }
#log .line.energy { color: var(--jade-dim); }
#log .line.stat { color: var(--text-dim); }
/* 每个后端消息块之间留白，避免连续房间快照糊成一团 */
#log .line.block-start { margin-top: 7px; }

/* 行内高亮：标签（出口/角色/境界…）翡翠绿、关键数值朱砂——两套日志通用 */
.line .lbl { color: var(--jade); font-weight: 600; }
.line .val { color: var(--cinnabar); font-weight: 700; }

/* 日志历史浮层正文沿用 .line 配色（暗底卡片上反相，用深色文字） */
#log-history-body .line {
  margin: 3px 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
#log-history-body .line.sys { color: var(--gold-ink); }
#log-history-body .line.reward { color: #2f7d52; }
#log-history-body .line.dmg { color: var(--cinnabar); }
#log-history-body .line.head { color: var(--gold); font-weight: 700; font-size: 15px; }
#log-history-body .line.exits { color: var(--jade-dim); }
#log-history-body .line.npcs { color: var(--jade); }
#log-history-body .line.items { color: var(--text-dim); }
#log-history-body .line.energy { color: var(--jade-dim); }
#log-history-body .line.stat { color: var(--text-dim); }
/* 历史里块间用分隔线明确切分一次次房间快照/事件 */
#log-history-body .line.block-start {
  margin-top: 12px;
  border-top: 1px solid var(--gold-line);
  padding-top: 10px;
}
#log-history-body .line.block-start:first-child {
  margin-top: 0;
  border-top: none;
  padding-top: 0;
}
/* （旧吸顶表头负边距补偿已随 .bag-card 三段式改造移除——表头固定不再压正文首行） */

/* ---------------- 底部主入口 nav（角色/背包/修炼/江湖 四枚常驻 tab） ---------------- */
/* --nav-clear = nav 总高(含 home 条安全区)，下方所有控件(方向键/日志条)统一以此抬离 nav。 */
#game {
  --nav-h: 62px; /* 图标改圆盘底盘后略增高，容下「圆盘+文字」两行 */
  --nav-clear: calc(var(--nav-h) + env(safe-area-inset-bottom));
}
#bottomnav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  height: var(--nav-h);
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  background: linear-gradient(0deg, rgba(250, 253, 255, 0.92), rgba(236, 247, 250, 0.76));
  backdrop-filter: blur(13px) saturate(1.1);
  -webkit-backdrop-filter: blur(13px) saturate(1.1);
  border-top: 1px solid var(--glass-line);
  box-shadow: 0 -2px 14px rgba(60, 50, 30, 0.16);
}
.nav-tab {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 2px;
  background: none;
  border: none;
  color: var(--gold-ink);
  cursor: pointer;
}
.nav-tab:disabled {
  opacity: 0.4;
  cursor: default;
}
/* 图标圆盘底盘：与修炼动作栏 .cs-slot-ring 同一套乳白磨砂钮，两栏观感统一 */
.nav-ico {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.72);
  box-shadow: 0 1px 4px rgba(40, 70, 60, 0.12);
  background-size: 60% !important; /* 覆盖 applyIconBg 内联的 64%，让图标居盘内留白 */
  background-position: center;
  background-repeat: no-repeat;
  transition: background-color 0.14s, box-shadow 0.14s, transform 0.12s;
}
.nav-tab:hover:not(:disabled) .nav-ico {
  background-color: rgba(255, 255, 255, 0.95);
}
.nav-tab:active:not(:disabled) .nav-ico {
  transform: scale(0.92);
}
/* 选中态：当前打开的入口——描金底盘 + 亮金标签（浮层盖住 nav 时不可见，世界视图无选中） */
.nav-tab.is-active .nav-ico {
  background-color: rgba(212, 175, 90, 0.32);
  box-shadow: 0 2px 9px rgba(176, 125, 34, 0.32);
}
.nav-label {
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: 1px;
  line-height: 1;
  color: var(--text);
  transition: color 0.14s;
}
.nav-tab:hover:not(:disabled) .nav-label,
.nav-tab.is-active .nav-label {
  color: var(--gold-bright);
}
@keyframes line-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* ---------------- 浮层（战斗 / 背包 / 对话） ---------------- */

.overlay-panel {
  position: fixed;
  /* 用「可见视口」高度而非布局视口居中：移动端地址栏/工具栏伸缩时，inset:0 会按更大的布局视口
     撑开，居中的高卡片(个人中心/名片等)会被推到地址栏/工具栏之下裁掉、且无法滚到顶端。
     改用 100dvh（旧浏览器回退 100vh）+ 安全区内边距，使居中区域始终落在真正可见的范围内；
     overflow-y:auto 为极端矮屏兜底。 */
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  height: 100dvh;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  box-sizing: border-box;
  overflow-y: auto;
  background: rgba(245, 240, 232, 0.55);
}

.bag-card {
  width: min(94vw, 560px);
  max-height: 86vh;
  max-height: 86dvh; /* 跟随可见视口，移动端地址栏弹出时不溢出 .overlay-panel */
  /* 三段式：表头固定、.bag-body 自滚（与 .menu-card 同模式）。
     废弃旧的整卡滚动 + sticky 表头——半透明吸顶底会把滚入其下的内容
     压成鬼影（背包「背包 N/M」行），底部行也会被卡片边缘裁掉（「装备」截图） */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 22px;
  box-sizing: border-box;
  background: var(--glass-strong);
  border: 1px solid var(--glass-line);
  border-radius: 14px;
  box-shadow: 0 18px 55px rgba(120, 96, 48, 0.28);
  backdrop-filter: blur(10px);
  animation: card-in 0.22s ease-out;
}
.bag-card > .bag-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

/* ---- 对话：嵌在「消息」浮层 NPC 页的实时面板（头/滚动台词/选项/输入四段） ---- */
.dlg-pane {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
}
.dlg-pane-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.dlg-avatar {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 38%, rgba(63, 143, 111, 0.22), rgba(245, 240, 232, 0.6));
  border: 1px solid var(--gold-line);
}
.dlg-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top; /* 半身立绘裁头部入圆徽 */
}
.dlg-portrait-char {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--gold-ink);
}
.dlg-id {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.dlg-id .d-name {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--gold-ink);
  letter-spacing: 1px;
}
.dlg-id .d-sub {
  font-size: 12px;
  color: var(--text-faint);
}
.dlg-end {
  flex: 0 0 auto;
  padding: 6px 14px;
  font-size: 13px;
  color: var(--text-dim);
  background: var(--panel);
  border: 1px solid var(--gold-line);
  border-radius: 16px;
  cursor: pointer;
}
.dlg-end:hover { border-color: var(--jade); color: var(--jade); }
.dlg-pane .d-text {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto; /* A 方案：累积来回话，可滚动回看（最新在底） */
  font-family: var(--serif);
  font-size: 15px;
  background: rgba(255, 253, 248, 0.78);
  border-radius: 8px;
}
.dlg-pane .d-options,
.dlg-pane .d-status,
.dlg-pane .chat-inputrow {
  flex: 0 0 auto;
  margin: 0;
}
.dlg-pane .d-input:disabled { opacity: 0.5; cursor: default; }
/* 对话累积的每一句（你 / NPC） */
.d-turn {
  margin: 0 0 7px;
  line-height: 1.5;
}
.d-turn-who {
  font-weight: 700;
  color: var(--gold);
}
.d-turn.me .d-turn-who {
  color: #5b7a4a;
}
.d-turn-text {
  color: var(--text);
}

/* ---- 战斗：沉浸式（保留场景可见，敌方贴顶 / 我方贴底 / 动作横排） ---- */
#combat-overlay {
  display: block;
  /* 战斗背景由 JS 设为「压暗的当前房景图」(combatBackdrop)，无图回退压暗区域渐变 */
  background-color: #1c120c;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#combat-overlay .combat-card {
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: 20px 16px 24px;
  background: none;
  border: none;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.combat-round {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--gold);
  padding: 4px 16px;
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  background: var(--glass);
  backdrop-filter: blur(4px);
}
/* 回合倒计时进度条：贴在回合胶囊下方的细长轨道，随剩余时间收缩 */
.combat-timer {
  width: min(56%, 240px);
  height: 4px;
  margin-top: 6px;
  border-radius: 999px;
  background: rgba(63, 143, 111, 0.18);
  overflow: hidden;
}
.combat-timer-fill {
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: var(--jade);
  transition: width 0.25s linear;
}
/* ≤5s 告警：转红 + 整条脉冲（不靠颜色硬约束——胶囊已有秒数字样） */
.combat-timer.danger .combat-timer-fill {
  background: var(--cinnabar);
}
.combat-timer.danger {
  animation: combat-timer-pulse 0.8s ease-in-out infinite;
}
@keyframes combat-timer-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
  .combat-timer.danger { animation: none; }
  .combat-timer-fill { transition: none; }
}
/* 街霸式中央回合播报：大字在敌我两卡之间居中，新回合缩放冲击出场→定格→淡出，不遮场景/不挡点击 */
.combat-round-announce {
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--serif);
  font-size: clamp(42px, 14vw, 92px);
  font-weight: 700;
  letter-spacing: 0.12em;
  white-space: nowrap;
  color: var(--gold-bright);
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.55), 0 0 32px rgba(193, 154, 74, 0.5);
  pointer-events: none;
  z-index: 5;
}
.combat-round-announce.play {
  animation: roundAnnounce 1.6s ease-out forwards;
}
@keyframes roundAnnounce {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(1.8); }
  14% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  20% { transform: translate(-50%, -50%) scale(1.1); }
  30% { transform: translate(-50%, -50%) scale(1); }
  70% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
}
@media (prefers-reduced-motion: reduce) {
  .combat-round-announce.play { animation: none; }
}
/* ---- 战斗「立绘化对阵」：双方全身立绘列阵，敌上·我下，立在压暗房景战场上 ---- */
.combat-side {
  display: flex;
  flex-direction: row;       /* 一排立绘横向铺开、对峙，而非竖排卡片 */
  align-items: flex-end;     /* 脚踩同一地面线 */
  justify-content: center;
  gap: 2px;
  width: min(96%, 560px);
}
.combat-side.enemy {
  margin-top: 10px;
  position: relative;
}
.combat-side.self {
  margin-top: auto;
}
/* 群像微叠：相邻立绘略重叠（叠在 .combatant 上，不碰 .fighter-figure 的动画 transform） */
.combat-side .combatant + .combatant { margin-left: -8px; }
/* 多人阵型：人多时立绘整体缩小、叠得更紧，确保一排不溢出 */
.combat-side.multi { gap: 0; }
.combat-side.multi .combatant + .combatant { margin-left: -14px; }
.combat-side.multi .fighter-figure { width: 70px; height: 132px; font-size: 24px; }
.combat-side.multi .combatant-body { max-width: 100px; padding: 2px 5px 4px; }
.combat-side.multi .combatant-name { font-size: 11px; line-height: 1.3; }
.combat-side.multi .bar.mp { display: none; }   /* 拥挤时一律只显气血 */
.combat-side.multi .bar-label { font-size: 10.5px; }
.combatant {
  position: relative;        /* 飘字/爆点/铭牌/「你的回合」徽按本行定位 */
  display: flex;
  flex-direction: column;    /* 立绘在上、铭牌在下 */
  align-items: center;
  gap: 4px;
  padding: 0 2px;
}
/* 形象槽：全身立绘站姿（透明 PNG，contain 不裁切）；动画类(lunge/cast/impact)作用于此元素 */
.fighter-figure {
  position: relative;
  overflow: visible; /* 命中爆点/斩痕可溢出 */
  width: 92px;
  height: 176px;
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-family: var(--serif);
  font-size: 30px;
  will-change: transform;
  /* 默认（妖兽/朱砂）；data-kind 与 --fig 覆盖 */
  --figc: var(--cinnabar);
  color: var(--figc);
}
.fighter-figure[data-kind="person"] { --figc: var(--jade); }
.fighter-figure[data-kind="self"] { --figc: var(--fig, var(--gold-bright)); }
/* 占位单字（无立绘时）贴脚底；立绘加载成功(has-img)后隐去 */
.fighter-figure .fig-ph-char {
  display: flex;
  align-items: flex-end;
  padding-bottom: 22px;
}
.fighter-figure.has-img .fig-ph-char { display: none; }
/* 无图占位：脚底椭圆柔光 + 五行单字（治愈风软光，替代旧硬圆框）；has-img 后撤去，免透出占位 */
.fighter-figure.ph:not(.has-img) {
  border-radius: 46% 46% 42% 42% / 28% 28% 72% 72%;
  background: radial-gradient(ellipse at 50% 80%, color-mix(in srgb, var(--figc) 26%, transparent), rgba(253, 250, 244, 0.30) 60%, transparent 80%);
  box-shadow: inset 0 -10px 22px color-mix(in srgb, var(--figc) 20%, transparent);
}
.fighter-figure .figure-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;       /* 全身入镜不裁切 */
  object-position: center bottom;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.42)); /* 落地阴影感 */
}
/* 铭牌：立绘下方紧凑名条 + 气血（沿用玻璃面，保证 bar-label(--text-dim) 可读） */
.combatant-body {
  width: 100%;
  max-width: 128px;
  text-align: center;
  background: var(--glass-strong);
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 3px 7px 5px;
  backdrop-filter: blur(5px);
  box-shadow: 0 4px 14px rgba(40, 28, 14, 0.28);
}
.combatant.npc .combatant-body { border-color: rgba(199, 92, 92, 0.5); }
.combatant-name {
  font-family: var(--serif);
  font-size: 12px;
  line-height: 1.3;
  color: var(--gold);
  margin-bottom: 3px;
}
.combatant .bar {
  width: 100%;
  margin: 2px 0;
}
.combatant .bar.mp { display: none; }      /* 默认只显气血，战场更干净 */
.combatant.me .bar.mp { display: block; }   /* 己方（1v1）显灵力，施法需看 */
.combat-banner {
  position: absolute;
  top: 40%;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--serif);
  font-size: 40px;
  color: var(--gold-bright);
  letter-spacing: 6px;
  text-shadow: 0 2px 18px rgba(232, 196, 106, 0.5), 0 2px 4px rgba(0, 0, 0, 0.8);
  animation: banner-in 0.4s ease-out;
}
@keyframes banner-in {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: scale(1); }
}
.combat-actions {
  display: flex;
  flex-wrap: wrap; /* 动作可达 6 个（普攻/功法/丹药/逃跑/自动/战况），单行挤不下时整齐换行 */
  gap: 8px;
  margin-top: 14px;
  width: min(92%, 440px);
}
.combat-actions button {
  flex: 1 1 auto;
  min-width: 92px; /* 保证一行约 3~4 颗、标签不折行（避免按钮高度参差「变形」） */
  padding: 12px 8px;
  font-family: var(--serif);
  font-size: 16px;
  white-space: nowrap;
  color: var(--gold);
  background: var(--glass-strong);
  border: 1px solid var(--gold-line);
  backdrop-filter: blur(6px);
}
.combat-actions button:hover:not(:disabled) {
  background: rgba(238, 245, 240, 0.95);
  box-shadow: 0 0 16px rgba(63, 143, 111, 0.28);
}
.combat-actions .act-back {
  flex: 1 1 auto;
  color: var(--text-dim);
  border-color: var(--hair);
}
/* 动作按钮分组着色：进攻(玉)/功法(描金)/丹药(疗伤绿) 主动作占宽，逃跑/返回(退却灰)收窄分到一侧 */
.combat-actions .cat-attack {
  color: var(--jade);
  border-color: rgba(63, 143, 111, 0.55);
}
.combat-actions .cat-skill {
  color: var(--gold-bright);
  border-color: var(--gold-line);
}
.combat-actions .cat-elixir {
  color: #2f7d52;
  border-color: rgba(47, 125, 82, 0.5);
}
.combat-actions .cat-flee,
.combat-actions .cat-back {
  color: var(--text-dim);
  border-color: var(--hair);
}

/* 战斗 HUD v2：顶部状态条 + 底部指令盘 + 轻量战报 */
.combat-hud {
  position: relative;
  z-index: 4;
  width: min(92%, 420px);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px 10px;
  padding: 7px 12px 8px;
  border: 1px solid rgba(193, 154, 74, 0.58);
  border-radius: 14px;
  background: rgba(253, 250, 244, 0.74);
  box-shadow: 0 8px 22px rgba(24, 18, 10, 0.24);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.combat-hud .combat-round {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  font-size: 17px;
  font-weight: 700;
}
.combat-state {
  min-width: 74px;
  text-align: right;
  font-family: var(--serif);
  font-size: 14px;
  color: var(--jade);
  white-space: nowrap;
}
.combat-hud .combat-timer {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 0;
}
.combat-command-deck {
  width: min(94%, 480px);
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 4;
}
.combat-log-panel {
  position: relative;
  min-height: 34px;
  border: 1px solid rgba(120, 100, 70, 0.22);
  border-radius: 10px;
  background: rgba(253, 250, 244, 0.72);
  box-shadow: 0 4px 12px rgba(40, 28, 14, 0.18);
  overflow: hidden;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.combat-log-toggle {
  position: absolute;
  top: 5px;
  right: 6px;
  width: 52px;
  min-width: 0;
  padding: 3px 8px;
  font-family: var(--serif);
  font-size: 12px;
  color: var(--gold);
  border-color: rgba(193, 154, 74, 0.38);
  background: rgba(255, 253, 248, 0.68);
  border-radius: 999px;
}
.combat-log-body {
  min-height: 32px;
  max-height: 42px;
  padding: 6px 66px 5px 10px;
  transition: max-height var(--t-base) ease;
}
.combat-log-panel.open .combat-log-body {
  max-height: 154px;
  overflow-y: auto;
}
.combat-log-line {
  min-height: 18px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.combat-log-panel.open .combat-log-line {
  white-space: normal;
}
.combat-log-line:first-child {
  color: var(--text);
}
.combat-log-line.muted {
  color: var(--text-faint);
}
.combat-command-deck .combat-actions {
  width: 100%;
  margin-top: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}
.combat-command-deck .combat-actions button {
  min-width: 0;
  min-height: 48px;
  padding: 10px 6px;
  border-radius: 12px;
  white-space: normal;
  line-height: 1.2;
  box-shadow: 0 5px 14px rgba(40, 28, 14, 0.16);
}
.combat-command-deck .combat-actions .act-primary {
  grid-column: span 2;
  min-height: 58px;
  font-size: 17px;
  font-weight: 700;
}
.combat-command-deck .combat-actions .act-secondary {
  grid-column: span 2;
  font-size: 15px;
}
.combat-command-deck .combat-actions.submenu .act-primary,
.combat-command-deck .combat-actions.submenu .act-secondary {
  grid-column: span 3;
}
.combat-actions .cat-auto {
  color: #5d6f82;
  border-color: rgba(93, 111, 130, 0.42);
}
.combat-actions .cat-status,
.combat-actions .cat-other {
  color: var(--gold);
  border-color: rgba(193, 154, 74, 0.42);
}
.combatant-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
}
.combatant-tag {
  flex: 0 0 auto;
  min-width: 22px;
  padding: 1px 5px;
  border-radius: 999px;
  font-family: var(--serif);
  font-size: 10px;
  line-height: 1.25;
  color: #fffdf6;
  background: var(--jade);
}
.combatant.npc .combatant-tag {
  background: var(--cinnabar);
}
.combatant-head .combatant-name {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
}
.combatant-realm {
  margin: 1px 0 4px;
  font-family: var(--serif);
  font-size: 11px;
  line-height: 1.2;
  color: var(--text-dim);
}
.combatant.acting {
  box-shadow: 0 0 0 2px var(--jade), 0 0 22px rgba(63, 143, 111, 0.56);
}
.combatant.acting .fighter-figure::after {
  content: "";
  position: absolute;
  left: 13%;
  right: 13%;
  bottom: 2px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(63, 143, 111, 0.46), transparent 68%);
  z-index: -1;
}

/* 当前行动者高亮（待出招时己方）：玉色光环 + 「你的回合」徽，给操作焦点 */
.combatant.acting {
  box-shadow: 0 0 0 2px var(--jade), 0 0 16px rgba(63, 143, 111, 0.4);
  border-radius: 10px;
}
.combatant.acting::after {
  content: "你的回合";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--serif);
  font-size: 10px;
  letter-spacing: 1px;
  color: #fbfdfc;
  background: var(--success);
  padding: 1px 9px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(63, 143, 111, 0.4);
}

/* ---- 对战动画：冲撞 / 命中 / 暴击屏震 / 闪避 / 格挡 / 五行爆点 / 功法 ---- */
.combatant {
  position: relative; /* 飘字/爆点按目标定位 */
}
/* 暴击屏震 */
.combat-card.shake {
  animation: cardshake 0.34s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes cardshake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}
/* 被击：行泛红 + 抖动 */
.combatant.hit {
  animation: hitflash 0.42s ease-out;
}
@keyframes hitflash {
  0% { background: rgba(199, 92, 92, 0.55); transform: translateX(0); }
  20% { transform: translateX(-5px); }
  45% { transform: translateX(5px); }
  70% { transform: translateX(-3px); }
  100% { background: var(--glass-strong); transform: translateX(0); }
}
/* 闪避：侧移让位 */
.combatant.dodge { animation: dodgeSlide 0.4s ease-out; }
@keyframes dodgeSlide {
  0% { transform: translateX(0); }
  35% { transform: translateX(22px); opacity: 0.7; }
  100% { transform: translateX(0); opacity: 1; }
}
/* 格挡：缩身架势 */
.combatant.block { animation: blockBrace 0.36s ease-out; }
@keyframes blockBrace {
  0% { transform: scale(1); }
  40% { transform: scale(0.95); filter: brightness(1.3); }
  100% { transform: scale(1); filter: none; }
}
/* 出手冲撞（朝对方）：敌方(顶)向下、我方(底)向上 */
.fighter-figure.lunge-down { animation: lungeDown 0.49s cubic-bezier(0.3, 0.7, 0.3, 1); }
.fighter-figure.lunge-up { animation: lungeUp 0.49s cubic-bezier(0.3, 0.7, 0.3, 1); }
@keyframes lungeDown {
  0% { transform: translateY(0); }
  33% { transform: translateY(104px) scale(1.08); }
  46% { transform: translateY(94px) scale(1.08); }
  100% { transform: translateY(0); }
}
@keyframes lungeUp {
  0% { transform: translateY(0); }
  33% { transform: translateY(-104px) scale(1.08); }
  46% { transform: translateY(-94px) scale(1.08); }
  100% { transform: translateY(0); }
}
/* 功法吟唱光晕 */
.fighter-figure.cast {
  animation: castGlow 0.5s ease-out;
}
@keyframes castGlow {
  0% { box-shadow: 0 0 16px color-mix(in srgb, var(--figc) 30%, transparent); }
  50% { box-shadow: 0 0 26px 6px var(--figc); filter: brightness(1.35); }
  100% { box-shadow: 0 0 16px color-mix(in srgb, var(--figc) 30%, transparent); }
}
/* 五行命中爆点（叠在目标形象上，自移除） */
.fighter-figure .impact {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, var(--el, #ff6a4a) 0%, transparent 62%);
  animation: impactBurst 0.5s ease-out forwards;
}
.fighter-figure .impact.big { inset: -18px; }
@keyframes impactBurst {
  0% { opacity: 0; transform: scale(0.4); }
  30% { opacity: 0.95; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1.5); }
}
.fighter-figure .impact-slash {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 88px;
  height: 12px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, var(--el, #ffd9a0) 46%, #fff8df 50%, var(--el, #ffd9a0) 54%, transparent 100%);
  filter: drop-shadow(0 0 8px var(--el, #ffd9a0));
  transform: translate(-50%, -50%) rotate(-24deg) scaleX(0.2);
  animation: impactSlash 0.32s ease-out forwards;
}
.fighter-figure .impact-slash.big {
  width: 116px;
  height: 15px;
  filter: drop-shadow(0 0 12px var(--el, #ffd9a0));
}
@keyframes impactSlash {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-24deg) scaleX(0.2); }
  24% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(-24deg) scaleX(1.25); }
}
.fighter-figure .guard-ring {
  position: absolute;
  inset: -13px;
  border-radius: 50%;
  pointer-events: none;
  border: 2px solid var(--el, #d8c97a);
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--el, #d8c97a) 34%, transparent), 0 0 18px color-mix(in srgb, var(--el, #d8c97a) 45%, transparent);
  animation: guardRing 0.4s ease-out forwards;
}
@keyframes guardRing {
  0% { opacity: 0; transform: scale(0.72); }
  35% { opacity: 0.95; transform: scale(1.02); }
  100% { opacity: 0; transform: scale(1.18); }
}
.fighter-afterimage {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 28px;
  border-radius: 50%;
  color: var(--gold-bright);
  border: 2px solid currentColor;
  background: rgba(246, 232, 190, 0.16);
  opacity: 0.45;
  overflow: hidden;
  animation: afterimageFade 0.34s ease-out forwards;
}
.fighter-afterimage.evade { animation-name: evadeAfterimageFade; }
.fighter-afterimage .figure-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  opacity: 0.56;
}
@keyframes afterimageFade {
  0% { opacity: 0.45; transform: translateY(0) scale(1); filter: blur(0); }
  100% { opacity: 0; transform: translateY(18px) scale(1.08); filter: blur(2px); }
}
@keyframes evadeAfterimageFade {
  0% { opacity: 0.42; transform: translateX(0) scale(1); filter: blur(0); }
  100% { opacity: 0; transform: translateX(-26px) scale(1.05); filter: blur(2px); }
}
.skill-flash {
  position: absolute;
  top: 30%;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--serif);
  font-size: 30px;
  color: var(--gold-bright);
  letter-spacing: 4px;
  text-shadow: 0 2px 14px rgba(232, 196, 106, 0.6), 0 1px 3px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  animation: skillflash 0.9s ease-out forwards;
}
@keyframes skillflash {
  0% { opacity: 0; transform: scale(0.7); }
  25% { opacity: 1; transform: scale(1.05); }
  70% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1) translateY(-14px); }
}
.buff-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}
.buff-chip {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--jade-dim);
  color: var(--jade);
  background: rgba(127, 191, 163, 0.12);
}
.buff-chip.debuff {
  border-color: rgba(199, 92, 92, 0.6);
  color: var(--cinnabar-bright);
  background: rgba(199, 92, 92, 0.12);
}
.combat-banner.win { color: var(--gold-bright); }
.combat-banner.lose { color: var(--cinnabar-bright); }
.combat-banner.flee { color: var(--text-dim); }

/* 入场：敌方自顶滑入、我方自底滑入（一次性，开战即演） */
.combat-side.enemy .combatant.enter { animation: enemyEnter 0.42s ease-out; }
.combat-side.self .combatant.enter { animation: selfEnter 0.42s ease-out; }
@keyframes enemyEnter {
  from { opacity: 0; transform: translateY(-26px); }
  to { opacity: 1; transform: none; }
}
@keyframes selfEnter {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}

/* 五行弹道：施法时从出手方飞向目标的拖尾光球（颜色按五行 --el） */
.combat-projectile {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
  background: radial-gradient(circle, var(--el, #ffd9a0) 0%, transparent 70%);
  box-shadow: 0 0 16px 4px var(--el, #ffd9a0);
  transition: transform 0.24s cubic-bezier(0.4, 0.1, 0.7, 1), opacity 0.24s ease-out;
}

/* ---- 打击感增强：受击顿帧 / 镜头冲击 / 危险警示 / 击败演出 / 技能五行着色 ---- */
/* 受击顿帧：命中瞬间亮度冻结一拍 */
.fighter-figure.hit-freeze { animation: hitFreeze 0.11s steps(1, end); }
@keyframes hitFreeze {
  0% { filter: brightness(2.2) contrast(1.15); }
  100% { filter: none; }
}
/* 暴击镜头冲击：卡片快速放大回弹（与屏震叠加） */
.combat-card.zoom-punch { animation: zoomPunch 0.22s ease-out; }
@keyframes zoomPunch {
  0% { transform: scale(1); }
  35% { transform: scale(1.06); }
  70% { transform: scale(0.98); }
  100% { transform: scale(1); }
}
.combat-card.screen-flash::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: rgba(255, 248, 222, 0.46);
  animation: screenFlash 0.18s ease-out forwards;
}
@keyframes screenFlash {
  0% { opacity: 0; }
  35% { opacity: 1; }
  100% { opacity: 0; }
}
/* 血条危险：<30% 闪烁告警（数值标签已表语义，颜色/动效为增强） */
.combat-card .bar.hp.danger .bar-fill { animation: dangerFlash 0.7s ease-in-out infinite; }
@keyframes dangerFlash { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
/* 本方濒死(<20%)：整屏红色脉冲蒙版（紧迫感） */
.combat-card.low-hp::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  box-shadow: inset 0 0 90px 24px rgba(191, 86, 77, 0.55);
  animation: lowHpPulse 1.1s ease-in-out infinite;
}
@keyframes lowHpPulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.7; } }
/* 击败演出：形象淡出下沉缩小、转灰 */
.fighter-figure.defeated { animation: defeatedFade 0.6s ease-in forwards; }
@keyframes defeatedFade {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0.15; transform: scale(0.7) translateY(16px); filter: grayscale(1); }
}
/* 技能名按五行着色（默认金；五行各异，呼应弹道/飘字配色） */
.skill-flash[data-element="金"] { color: #d8c97a; }
.skill-flash[data-element="木"] { color: #79c08a; }
.skill-flash[data-element="水"] { color: #6fa8d4; }
.skill-flash[data-element="火"] { color: #d4654f; }
.skill-flash[data-element="土"] { color: #c79a5a; }

/* ============ 阶段3：普攻武器分型 / 功法形态 / 辅助功法自身演出 ============ */
/* tier 缩放变量：弹道/爆点尺寸×亮度随熟练度(入门→大成)放大，缺省 1。 */
.combat-projectile,
.fighter-figure .impact { --fx-scale: 1; }

/* ---- 普攻：斩痕按武器类型变形（剑=斜斩 / 刀=宽弧 / 枪=直刺 / 锤=震波 / 拳=掌风）---- */
/* 默认 .impact-slash 已是斜向亮线 = 剑的形态；其余按武器调旋转/粗细/形状。 */
.fighter-figure .impact-slash.wp-blade { /* 刀：更宽、弧度更平 */
  height: 18px;
  transform: translate(-50%, -50%) rotate(-12deg) scaleX(0.2);
  border-radius: 40% / 80%;
}
.fighter-figure .impact-slash.wp-blade.big { height: 22px; }
.fighter-figure .impact-slash.wp-spear { /* 枪：水平直线突刺、细而长 */
  height: 7px;
  width: 108px;
  transform: translate(-50%, -50%) rotate(0deg) scaleX(0.15);
}
.fighter-figure .impact-slash.wp-hammer { /* 锤：横向钝震波，短粗 */
  height: 26px;
  width: 70px;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(0deg) scaleX(0.3);
  filter: drop-shadow(0 0 14px var(--el, #ffd9a0));
}
.fighter-figure .impact-slash.wp-fist { /* 拳掌：短促掌风，近圆弧 */
  height: 16px;
  width: 56px;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-8deg) scaleX(0.3);
}
.fighter-figure .impact-slash.wp-whip { /* 鞭：细长大弧 */
  height: 8px;
  width: 118px;
  transform: translate(-50%, -50%) rotate(-34deg) scaleX(0.18);
}
.fighter-figure .impact-slash.wp-claw { /* 爪：陡角抓痕 */
  height: 10px;
  transform: translate(-50%, -50%) rotate(-46deg) scaleX(0.2);
}
.fighter-figure .impact-slash.wp-bow { /* 弓：贯穿直线 */
  height: 6px;
  width: 120px;
  transform: translate(-50%, -50%) rotate(0deg) scaleX(0.12);
}

/* ---- 功法弹道形态（叠在 .combat-projectile 上；尺寸吃 --fx-scale）---- */
.combat-projectile { transform-origin: center; }
.combat-projectile.fx-flame_bolt { /* 火球：拉长尾焰 */
  width: calc(20px * var(--fx-scale));
  height: calc(14px * var(--fx-scale));
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  box-shadow: 0 0 calc(18px * var(--fx-scale)) calc(5px * var(--fx-scale)) var(--el, #d4654f);
}
.combat-projectile.fx-water_wave { /* 水波：扁圆涟漪 */
  width: calc(22px * var(--fx-scale));
  height: calc(12px * var(--fx-scale));
  border-radius: 50%;
}
.combat-projectile.fx-vine { /* 藤蔓：细长 */
  width: calc(10px * var(--fx-scale));
  height: calc(22px * var(--fx-scale));
  border-radius: 40%;
}
.combat-projectile.fx-blade_qi { /* 剑气：菱形锐光 */
  width: calc(16px * var(--fx-scale));
  height: calc(16px * var(--fx-scale));
  border-radius: 0;
  transform: rotate(45deg);
}
.combat-projectile.fx-ice_shard { /* 冰棱：尖长 */
  width: calc(9px * var(--fx-scale));
  height: calc(24px * var(--fx-scale));
  border-radius: 50% 50% 0 0;
}
.combat-projectile.fx-thunder,
.combat-projectile.fx-light_beam { /* 雷/光：明亮小球，强光晕 */
  width: calc(14px * var(--fx-scale));
  height: calc(14px * var(--fx-scale));
  box-shadow: 0 0 calc(22px * var(--fx-scale)) calc(7px * var(--fx-scale)) var(--el, #fff8df);
}
.combat-projectile.fx-wind_blade { /* 风刃：横扁 */
  width: calc(24px * var(--fx-scale));
  height: calc(8px * var(--fx-scale));
  border-radius: 50%;
}

/* ---- 功法命中表现（叠在 .impact 爆点上；按 impact 键调色/形/尺寸，吃 --fx-scale）---- */
.fighter-figure .impact.imp-burn { /* 灼烧：暖橙、扩散更大 */
  inset: calc(-8px * var(--fx-scale));
  background: radial-gradient(circle, var(--el, #d4654f) 0%, rgba(212,101,79,0.3) 40%, transparent 66%);
}
.fighter-figure .impact.imp-freeze { /* 冰封：冷蓝、收紧锐利 */
  background: radial-gradient(circle, var(--el, #6fa8d4) 0%, #cfe6ff 30%, transparent 60%);
}
.fighter-figure .impact.imp-entangle { /* 缠绕：木绿、椭圆 */
  background: radial-gradient(ellipse 60% 100%, var(--el, #79c08a) 0%, transparent 64%);
}
.fighter-figure .impact.imp-cut { /* 切割：锐白边 */
  background: radial-gradient(circle, #fff8df 0%, var(--el, #d8c97a) 24%, transparent 60%);
}
.fighter-figure .impact.imp-quake { /* 震荡：土黄、外扩环 */
  inset: calc(-14px * var(--fx-scale));
  background: radial-gradient(circle, transparent 30%, var(--el, #c79a5a) 50%, transparent 70%);
}
.fighter-figure .impact.imp-shock,
.fighter-figure .impact.imp-wave {
  inset: calc(-10px * var(--fx-scale));
}

/* ---- 辅助功法自身演出（作用于 actor 自己的形象槽，不飞向敌人）---- */
.fighter-figure .self-aura {
  position: absolute;
  inset: calc(-12px * var(--fx-scale, 1));
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
}
/* 防御/护盾：弧形光罩脉动一拍 */
.fighter-figure .self-aura.defense {
  border: 2px solid var(--el, #6fa8d4);
  box-shadow: inset 0 0 20px color-mix(in srgb, var(--el, #6fa8d4) 40%, transparent),
              0 0 20px color-mix(in srgb, var(--el, #6fa8d4) 50%, transparent);
  animation: selfShield 0.7s ease-out forwards;
}
@keyframes selfShield {
  0% { opacity: 0; transform: scale(0.7); }
  35% { opacity: 1; transform: scale(1.04); }
  100% { opacity: 0.2; transform: scale(1.1); }
}
/* 治疗/回复：绿/水蓝灵气自下而上回流 */
.fighter-figure .self-aura.heal {
  background: radial-gradient(ellipse 80% 120% at 50% 100%, var(--el, #79c08a) 0%, transparent 60%);
  animation: selfHeal 0.7s ease-out forwards;
}
@keyframes selfHeal {
  0% { opacity: 0; transform: translateY(14px) scale(0.9); }
  40% { opacity: 0.9; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-12px) scale(1.05); }
}
/* 加攻：武器发光（金芒环绕） */
.fighter-figure .self-aura.attack {
  background: radial-gradient(circle, transparent 50%, var(--el, #d8c97a) 70%, transparent 82%);
  animation: selfAttack 0.7s ease-out forwards;
}
@keyframes selfAttack {
  0% { opacity: 0; transform: scale(0.85) rotate(0deg); }
  40% { opacity: 1; transform: scale(1.05) rotate(8deg); }
  100% { opacity: 0; transform: scale(1.15) rotate(0deg); }
}
/* 通用光罩（未知 buff 类型回落） */
.fighter-figure .self-aura.aura {
  background: radial-gradient(circle, var(--el, #f6e8be) 0%, transparent 64%);
  animation: selfShield 0.7s ease-out forwards;
}

/* 无障碍：减少动效时关掉位移/屏震/吟唱/入场/弹道，仅保留飘字与即时受击闪 */
@media (prefers-reduced-motion: reduce) {
  .combat-card.shake,
  .combat-card.zoom-punch,
  .fighter-figure.lunge-down,
  .fighter-figure.lunge-up,
  .fighter-figure.cast,
  .fighter-figure.hit-freeze,
  .fighter-figure.defeated,
  .fighter-figure .impact-slash,
  .fighter-figure .guard-ring,
  .fighter-figure .self-aura,
  .fighter-afterimage,
  .combat-card.screen-flash::before,
  .combat-card.low-hp::after,
  .combat-card .bar.hp.danger .bar-fill,
  .combatant.enter,
  .combatant.dodge,
  .combatant.block { animation: none !important; }
  .combat-projectile { display: none; }
}

.float-text {
  position: absolute;
  font-family: var(--serif);
  font-weight: 700;
  pointer-events: none;
  transition: transform 0.8s ease-out, opacity 0.8s ease-out;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}
/* 飘字着色统一引用全局调色板（替代旧高饱和荧光色），暗背景上靠 text-shadow 保读 */
.float-text.ft-dmg { color: var(--cinnabar-bright); }
.float-text.ft-crit { color: var(--gold-bright); }
.float-text.ft-heal { color: var(--jade-dim); }
.float-text.ft-miss { color: #b9c0c9; }

/* ---- 背包 ---- */
.bag-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 三段式固定表头（卡片本身不滚，滚动在 .bag-body）：关闭钮恒可点，
     内容不会滚到表头底下。旧 sticky+负边距方案已废弃（鬼影/遮挡） */
  flex: none;
  margin: 0 0 10px;
  padding: 0 0 10px;
}
.bag-head h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 19px;
  color: var(--gold);
  letter-spacing: 1px;
}
.bag-body .section-title {
  font-size: 12px;
  color: var(--gold);
  letter-spacing: 2px;
  margin: 12px 0 8px;
  border-bottom: 1px solid var(--gold-line);
  padding-bottom: 4px;
}
.equip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  margin-bottom: 6px;
}
.equip-slot {
  padding: 9px;
  background: rgba(255, 253, 248, 0.7);
  border: 1px solid var(--hair);
  border-radius: 8px;
  text-align: center;
}
.equip-slot:not(.empty) {
  cursor: pointer;
  border-color: var(--gold-line);
}
.equip-slot:not(.empty):hover {
  background: rgba(245, 238, 226, 0.92);
}
.equip-slot .slot-name {
  font-size: 11px;
  color: var(--text-faint);
}
.equip-slot .slot-item {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--gold);
  margin-top: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.equip-slot .slot-ico { width: 18px; height: 18px; object-fit: contain; flex: 0 0 auto; }
.equip-slot .slot-item-name { overflow: hidden; text-overflow: ellipsis; }
.equip-slot .slot-item.slot-empty { color: var(--text-faint); }
.equip-slot.empty { opacity: 0.62; }
.equip-slot .slot-meta { font-size: 10px; color: var(--text-faint); margin-top: 2px; }
/* 角色预览中心：中央立绘（af-size-center） */
.pc-preview { display: flex; justify-content: center; margin: 6px 0 4px; }
.pc-preview-fig { position: relative; }
.pc-preview-fig .af-figure { width: 132px; height: 132px; font-size: 56px; }
/* 背包筛选标签：全部/装备/丹药/功法/材料，横向胶囊，选中描金高亮，带各类计数 */
.bag-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.bag-filter-tab {
  padding: var(--sp-1) var(--sp-3);
  font-size: 13px;
  font-family: var(--serif);
  color: var(--text-dim);
  background: rgba(255, 253, 248, 0.6);
  border: 1px solid var(--hair);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.bag-filter-tab:hover {
  border-color: var(--gold-line);
}
.bag-filter-tab.active {
  color: var(--gold);
  border-color: var(--gold-line);
  background: rgba(201, 161, 74, 0.12);
}
.bag-filter-tab .bf-num {
  margin-left: 5px;
  font-size: 11px;
  color: var(--text-faint);
}
.bag-filter-tab.active .bf-num {
  color: var(--gold-bright);
}
/* 紧凑格：窄列多排，物品多了列表不至于拉得太长（详情在弹窗里看，格子只承担识别） */
.item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
  gap: 6px;
}
.item-slot {
  padding: 8px 6px;
  background: rgba(255, 253, 248, 0.7);
  border: 1px solid var(--hair);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.14s, background 0.14s, transform 0.08s;
}
.item-slot:hover {
  border-color: var(--gold-line);
  background: rgba(245, 238, 226, 0.92);
}
.item-slot:active {
  transform: scale(0.97);
}
.item-slot .item-name {
  font-family: var(--serif);
  font-size: 12px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.item-slot .item-sub {
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 物品图标（透明底，OSS）：格子顶部居中展示，无图则不占位 */
.item-slot {
  text-align: center;
  position: relative; /* 锁徽标绝对定位锚点 */
}
/* 锁定徽标：右上角小锁，标记该物品已锁（防误卖/丢/寄售/赠送） */
.item-slot .item-lock {
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 11px;
  line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
  pointer-events: none;
}
.item-slot .item-img {
  display: block;
  width: 100%;
  height: 44px;
  object-fit: contain;
  margin-bottom: 4px;
}
/* 个人中心槽位选装器：所有槽（含空槽）可点开选装，展开中的槽描金 */
.equip-slot {
  cursor: pointer;
}
.equip-slot.empty:hover {
  background: rgba(245, 238, 226, 0.92);
  opacity: 0.85;
}
.equip-slot.picking {
  border-color: var(--gold);
  background: rgba(201, 161, 74, 0.14);
  box-shadow: 0 0 0 1px var(--gold-line);
}
.pc-equip-picker {
  margin: 8px 0 4px;
  padding: 10px;
  background: rgba(255, 253, 248, 0.66);
  border: 1px solid var(--gold-line);
  border-radius: 10px;
}
.pc-equip-picker .section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0;
}
.pc-pick-close {
  font-size: 12px;
  padding: 2px 10px;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--hair);
  border-radius: var(--r-pill);
  cursor: pointer;
}
.pc-pick-close:hover {
  border-color: var(--gold-line);
  color: var(--gold);
}
.pc-equip-picker .menu-opt .slot-ico {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex: 0 0 auto;
}
/* 背包物品详情弹窗：选中格描金；弹窗盖在背包卡上，遮罩点击收起（不关背包），
   卡内 使用/习得 + 丢弃（二次确认转危色） */
.item-slot.selected {
  border-color: var(--gold);
  background: rgba(201, 161, 74, 0.12);
}
.bag-modal {
  position: fixed;
  inset: 0;
  z-index: 5; /* 同一浮层栈内盖过 .bag-card */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px env(safe-area-inset-right) 20px env(safe-area-inset-left);
  box-sizing: border-box;
  background: rgba(62, 50, 32, 0.35);
}
.bag-modal-card {
  position: relative;
  width: min(88vw, 400px);
  max-height: 76vh;
  max-height: 76dvh;
  overflow-y: auto;
  padding: 18px;
  box-sizing: border-box;
  background: var(--glass-strong);
  border: 1px solid var(--gold-line);
  border-radius: 14px;
  box-shadow: 0 18px 55px rgba(120, 96, 48, 0.3);
  backdrop-filter: blur(10px);
  animation: card-in 0.18s ease-out;
}
.bag-modal-close {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 30px;
  height: 30px;
  font-size: 20px;
  line-height: 1;
  color: var(--text-dim);
  background: transparent;
  border: none;
  cursor: pointer;
}
.bag-modal-close:hover {
  color: var(--gold);
}
.bag-detail-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bag-detail-img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  flex: 0 0 auto;
}
.bag-detail-name {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--text);
}
.bag-detail-sub {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 2px;
}
.bag-detail-desc {
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 8px;
  line-height: 1.5;
}
.bag-detail-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.bag-act-btn {
  padding: 7px 18px;
  font-size: 13px;
  font-family: var(--serif);
  border-radius: var(--r-pill);
  border: 1px solid var(--gold-line);
  background: rgba(201, 161, 74, 0.1);
  color: var(--gold);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.bag-act-btn:hover {
  background: rgba(201, 161, 74, 0.2);
}
.bag-act-btn.bag-drop {
  border-color: var(--hair);
  background: transparent;
  color: var(--text-dim);
}
.bag-act-btn.bag-drop:hover {
  border-color: rgba(178, 76, 60, 0.5);
  color: #b24c3c;
}
.bag-act-btn.bag-drop.confirm {
  border-color: rgba(178, 76, 60, 0.6);
  background: rgba(178, 76, 60, 0.1);
  color: #b24c3c;
}
/* 锁定按钮：金线描边同族；解锁态(unlock)淡化以示「已锁、点此解开」 */
.bag-act-btn.bag-lock.unlock {
  border-color: var(--hair);
  background: transparent;
  color: var(--text-dim);
}

/* 功法详情卡：介绍行 + 熟练度进度条（复用 .bag-modal/.bag-detail-* 样式） */
.skill-detail-lines {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.skill-detail-line {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
}
.skill-prog {
  height: 6px;
  border-radius: 3px;
  background: rgba(120, 96, 48, 0.18);
  overflow: hidden;
  margin-top: 2px;
}
.skill-prog-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--gold);
}
.bag-detail-desc.skill-flavor {
  color: var(--gold);
  font-style: italic;
}

/* ---------------- 界面图标（透明底 UI 图标，OSS：ui_icons/*） ---------------- */
/* 快捷键圆钮：透明图标填底，单字缩为底部小标签（图标加载失败仍可读） */
.qa-btn.has-ui-icon {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 4px;
  /* 11px 为汉字可辨下限：图标若 404，这层文字护栏在手机上仍认得出 */
  font-size: 11px;
  line-height: 1;
  color: var(--gold-ink);
}
/* HUD 背包钮：文字左侧小图标 */
.hud-bag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.hud-bag .btn-ico {
  width: 18px;
  height: 18px;
  object-fit: contain;
}
/* 场景角色气泡菜单：图标 + 文字 */
.actor-menu-btn {
  display: flex;
  align-items: center;
  gap: 6px;
}
.actor-menu-btn .menu-ico {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
/* 方向键中央「看」：透明图标填底，「看」字缩为底部小标签（同快捷键圆钮观感） */
#dpad .dir-look.has-ui-icon {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 3px;
  /* 11px 汉字可辨下限：图标 404 时「看」仍可读 */
  font-size: 11px;
  line-height: 1;
}
/* 出口胶囊「传送」透明图标 */
.portal-icon .portal-img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  vertical-align: middle;
}
.bag-body .empty {
  font-size: 12px;
  color: var(--text-faint);
  padding: 6px 0;
}

/* ---- 对话 ---- */
.d-text {
  min-height: 64px;
  padding: 14px;
  background: rgba(255, 253, 248, 0.7);
  border: 1px solid var(--hair);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--text);
  white-space: pre-wrap;
}
.d-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0;
}
.d-options button {
  text-align: left;
  padding: 11px 14px;
  font-size: 15px;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--gold-line);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.d-options button:hover { border-color: var(--jade); background: rgba(63, 143, 111, 0.1); }
.d-options button:active { transform: scale(0.97); background: rgba(63, 143, 111, 0.18); }

/* 对话「发送态」反馈：回显玩家话 + 对方思索动画，让玩家明确「已发出、正在等回复」 */
.d-status {
  margin: 2px 0 10px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-dim);
}
.d-status .d-echo { color: var(--jade); margin-right: 8px; }
.d-status .d-think i {
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-left: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.25;
  animation: d-think-blink 1.2s infinite both;
}
.d-status .d-think i:nth-child(2) { animation-delay: 0.2s; }
.d-status .d-think i:nth-child(3) { animation-delay: 0.4s; }
@keyframes d-think-blink {
  0%, 80%, 100% { opacity: 0.25; }
  40% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .d-status .d-think i { animation: none; opacity: 0.6; }
}

/* ---- 任务中心（独立屏：进行中/已完成分段 + 任务卡） ---- */
.quest-card { width: min(94vw, 560px); }
.quest-tabs {
  display: flex;
  flex: none; /* .bag-card 三段式 flex 列中固定不滚（与表头同段） */
  gap: 8px;
  margin: 4px 0 12px;
}
.quest-tab {
  flex: 1;
  padding: 9px 0;
  font-family: var(--serif);
  font-size: 15px;
  color: var(--text-faint);
  background: rgba(255, 253, 248, 0.6);
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.quest-tab.is-on {
  color: var(--gold);
  font-weight: 700;
  background: rgba(91, 191, 138, 0.16);
  border-color: var(--jade);
}
.quest-empty {
  padding: 40px 16px;
  text-align: center;
}
.quest-empty-tip {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--gold);
  margin-bottom: 8px;
}
.quest-empty-sub {
  font-size: 13px;
  color: var(--text-faint);
  line-height: 1.7;
}
.quest-group-head {
  margin: 4px 2px 10px;
  padding-bottom: 6px;
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--gold-deep, #8a6a2a);
  letter-spacing: 2px;
  border-bottom: 1px solid var(--gold-line);
}
.quest-group-head + .quest-group-head,
.quest-item + .quest-group-head {
  margin-top: 16px;
}
.quest-item {
  position: relative;
  padding: 14px;
  margin-bottom: 12px;
  background: rgba(255, 253, 248, 0.82);
  border: 1px solid var(--gold-line);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(120, 96, 48, 0.1);
}
.quest-item-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.quest-chain {
  flex: 0 0 auto;
  padding: 2px 9px;
  font-size: 11px;
  color: #fff;
  background: linear-gradient(135deg, #b07d22, #8a6a2a);
  border-radius: 999px;
  letter-spacing: 1px;
}
.quest-name {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.5px;
}
.quest-desc {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 10px;
}
.quest-objs { margin-bottom: 10px; }
.quest-obj { margin-bottom: 8px; }
.quest-obj-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  margin-bottom: 3px;
}
.quest-obj-mark { color: var(--jade); font-weight: 700; }
.quest-obj-label { flex: 1; color: var(--text); }
.quest-obj-count {
  font-family: var(--serif);
  font-size: 12px;
  color: var(--gold-strong, #6f5320);
}
.quest-obj-track {
  height: 6px;
  background: rgba(120, 96, 48, 0.14);
  border-radius: 999px;
  overflow: hidden;
}
.quest-obj-fill {
  height: 100%;
  background: linear-gradient(90deg, #5bbf8a, #3f8f6f);
  border-radius: 999px;
  transition: width 0.3s ease;
}
.quest-rewards {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px dashed var(--gold-line);
}
.quest-rewards-label {
  font-size: 12px;
  color: var(--text-faint);
  margin-right: 2px;
}
.quest-reward {
  padding: 2px 9px;
  font-size: 12px;
  font-family: var(--serif);
  color: var(--gold);
  background: rgba(232, 200, 120, 0.16);
  border: 1px solid var(--gold-line);
  border-radius: 999px;
}
.quest-hint {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 10px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text);
  background: rgba(91, 191, 138, 0.1);
  border-radius: 8px;
}
.quest-hint-ico {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 12px;
  color: #fff;
  background: var(--jade);
  border-radius: 50%;
}
/* —— 来源彩色标签 chip + 左侧色条（统一列表里区分金手指/宗门/主线） —— */
.quest-src-chip {
  flex: 0 0 auto;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  border-radius: 999px;
  letter-spacing: 1px;
}
.quest-src-chip.is-goldfinger { background: linear-gradient(135deg, #e0a83a, #b67d18); }
.quest-src-chip.is-sect { background: linear-gradient(135deg, #4f8fd0, #2f6aa8); }
.quest-src-chip.is-system { background: linear-gradient(135deg, #9c6fcf, #6f4aa8); }
/* 卡片左缘随来源着色，扫一眼即分类 */
.quest-item.quest-src-is-goldfinger { border-left: 3px solid #e0a83a; }
.quest-item.quest-src-is-sect { border-left: 3px solid #4f8fd0; }
.quest-item.quest-src-is-system { border-left: 3px solid #9c6fcf; }
/* chain_label 在有来源 chip 时降为次级浅色标签 */
.quest-src-chip + .quest-chain {
  color: var(--gold-strong, #6f5320);
  background: rgba(232, 200, 120, 0.16);
}
/* 当前推进目标高亮（回答「下一步该干啥」） */
.quest-obj.is-current .quest-obj-mark { color: var(--gold, #b07d22); }
.quest-obj.is-current .quest-obj-label { font-weight: 700; }
.quest-obj.is-current .quest-obj-fill { background: linear-gradient(90deg, #e6c878, #b07d22); }
/* 金手指积分奖励徽章 */
.quest-reward.is-points {
  color: #fff;
  background: linear-gradient(135deg, #e0a83a, #b67d18);
  border-color: transparent;
}
/* —— 截止倒计时 / 寻路行（面板内任务卡）—— */
.quest-deadline {
  display: inline-flex;
  align-items: center;
  margin: 4px 0 2px;
  padding: 2px 9px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gold-strong, #6f5320);
  background: rgba(232, 200, 120, 0.18);
  border-radius: 999px;
}
.quest-deadline.is-urgent {
  color: #fff;
  background: linear-gradient(135deg, #d9614f, #b03a2e);
  animation: questPulse 1.6s ease-in-out infinite;
}
@keyframes questPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.62; }
}
.quest-route {
  margin-top: 6px;
  padding: 6px 10px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text);
  background: rgba(79, 143, 208, 0.1);
  border-radius: 8px;
}
/* 临近到期的任务卡：左缘转红，盖过来源色条 */
.quest-item.is-urgent { border-left-color: #d9614f !important; }

/* —— 金手指任务发布卡 —— */
.gfquest-modal { z-index: 96; }
.gfq-card {
  position: relative;
  width: min(360px, 86vw);
  margin: auto;
  padding: 24px 22px 20px;
  text-align: center;
  background: linear-gradient(170deg, #fffdf7, #f6ecd6);
  border: 1px solid var(--gold-line);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(90, 64, 20, 0.3);
}
.gfq-badge {
  width: 56px;
  height: 56px;
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 26px;
  color: #fff;
  background: radial-gradient(circle at 50% 35%, #e7c06a, #b67d18);
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(182, 125, 24, 0.45);
}
.gfq-from { font-size: 12px; color: var(--text-faint); letter-spacing: 1px; }
.gfq-title {
  margin: 4px 0 8px;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}
.gfq-hint {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 10px;
}
.gfq-objs {
  list-style: none;
  margin: 0 0 10px;
  padding: 10px 12px;
  text-align: left;
  background: rgba(255, 253, 248, 0.7);
  border: 1px dashed var(--gold-line);
  border-radius: 10px;
}
.gfq-obj { font-size: 13px; color: var(--text); padding: 2px 0; }
.gfq-obj::before { content: "▶ "; color: var(--gold, #b07d22); }
.gfq-reward { font-size: 12.5px; color: var(--gold-strong, #6f5320); margin-bottom: 14px; }
.gfq-ok {
  width: 100%;
  padding: 11px;
  font-family: var(--serif);
  font-size: 15px;
  color: #fff;
  background: linear-gradient(135deg, #e0a83a, #b67d18);
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

/* —— 任务弹卡（接到/完成/临近到期 三态）—— */
.questcard-modal { z-index: 96; }
.qc-card {
  position: relative;
  width: min(360px, 86vw);
  margin: auto;
  padding: 22px 22px 20px;
  background: linear-gradient(170deg, #fffdf7, #f6ecd6);
  border: 1px solid var(--gold-line);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(90, 64, 20, 0.3);
}
.qc-card.qc-completed { background: linear-gradient(170deg, #f7fbf4, #e4f1da); }
.qc-card.qc-warning { background: linear-gradient(170deg, #fff6f3, #f7e2dc); }
.qc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.qc-from { font-size: 12px; color: var(--text-faint); letter-spacing: 1px; }
.qc-card.qc-warning .qc-from { color: #b03a2e; font-weight: 700; }
.qc-chain {
  padding: 2px 8px;
  font-size: 11px;
  color: var(--gold-strong, #6f5320);
  background: rgba(232, 200, 120, 0.2);
  border-radius: 999px;
}
.qc-title {
  margin: 2px 0 8px;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}
.qc-hint { font-size: 13px; line-height: 1.7; color: var(--text); margin: 0 0 10px; }
.qc-line {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 6px 0;
  font-size: 12.8px;
  line-height: 1.6;
  color: var(--text);
}
.qc-ico { flex: 0 0 auto; }
.qc-deadline {
  padding: 4px 10px;
  font-weight: 600;
  color: var(--gold-strong, #6f5320);
  background: rgba(232, 200, 120, 0.2);
  border-radius: 8px;
}
.qc-deadline.is-urgent { color: #fff; background: linear-gradient(135deg, #d9614f, #b03a2e); }
.qc-objs {
  list-style: none;
  margin: 8px 0;
  padding: 10px 12px;
  text-align: left;
  background: rgba(255, 253, 248, 0.7);
  border: 1px dashed var(--gold-line);
  border-radius: 10px;
}
.qc-obj { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); padding: 2px 0; }
.qc-obj em { margin-left: auto; font-style: normal; color: var(--text-faint); }
.qc-route { background: rgba(79, 143, 208, 0.1); padding: 6px 10px; border-radius: 8px; }
.qc-reward { color: var(--gold-strong, #6f5320); font-weight: 600; }
.qc-ok {
  width: 100%;
  margin-top: 14px;
  padding: 11px;
  font-family: var(--serif);
  font-size: 15px;
  color: #fff;
  background: linear-gradient(135deg, #e0a83a, #b67d18);
  border: none;
  border-radius: 10px;
  cursor: pointer;
}
.qc-card.qc-completed .qc-ok { background: linear-gradient(135deg, #5bbf8a, #2f8f5f); }
.qc-card.qc-warning .qc-ok { background: linear-gradient(135deg, #d9614f, #b03a2e); }

.quest-done-list { display: flex; flex-direction: column; gap: 8px; }
.quest-done-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: rgba(247, 243, 235, 0.7);
  border: 1px solid var(--hair);
  border-radius: 10px;
  filter: saturate(0.75);
}
.quest-done-seal {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 14px;
  color: #fff;
  background: var(--cinnabar, #bf564d);
  border-radius: 6px;
  transform: rotate(-6deg);
}
.quest-done-chain {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--text-faint);
}
.quest-done-name {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--text);
}

/* ---- 个人中心头部「名片」入口 ---- */
.person-head-actions { display: flex; align-items: center; gap: 8px; }
.person-profile {
  padding: 6px 13px;
  font-family: var(--serif);
  font-size: 13px;
  color: var(--gold);
  background: rgba(232, 200, 120, 0.16);
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  cursor: pointer;
}
.person-profile:active { transform: scale(0.96); }

/* ---- 个人资料名片（只读名片/战报：宣纸描金 + 四角雕花 + 朱砂落款） ---- */
.profile-card {
  position: relative;
  width: min(92vw, 460px);
  max-height: 88vh;
  max-height: 88dvh;
  overflow-y: auto;
  padding: 22px 20px 26px;
  /* 宣纸暖底 + 描金双边 */
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 252, 244, 0.96), rgba(247, 241, 230, 0.95)),
    var(--ink-1, #f3ece0);
  border: 1px solid var(--gold);
  border-radius: 14px;
  box-shadow: 0 18px 55px rgba(120, 96, 48, 0.32), inset 0 0 0 4px rgba(255, 253, 248, 0.5),
    inset 0 0 0 5px var(--gold-line);
  animation: card-in 0.24s ease-out;
}
/* 内容体作落款印(.pf-seal)的定位参照，并在底部预留一条净空带容纳印章，
   避免印章压住末段「已装备功法」。印章因此随内容滚动、始终排在最后。
   净空带须明显大于印章旋转后的外接框(约 50px)，留足跨设备字体度量差，否则真机会压行。 */
.profile-body {
  position: relative;
  padding-bottom: 76px;
}
.profile-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  padding: 6px 13px;
  font-size: 13px;
  color: var(--text-faint);
  background: rgba(255, 253, 248, 0.7);
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  cursor: pointer;
}
/* 四角描金雕花 */
.pf-corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid var(--gold);
  opacity: 0.7;
  pointer-events: none;
}
.pf-corner.tl { top: 9px; left: 9px; border-right: none; border-bottom: none; border-radius: 6px 0 0 0; }
.pf-corner.tr { top: 9px; right: 9px; border-left: none; border-bottom: none; border-radius: 0 6px 0 0; }
.pf-corner.bl { bottom: 9px; left: 9px; border-right: none; border-top: none; border-radius: 0 0 0 6px; }
.pf-corner.br { bottom: 9px; right: 9px; border-left: none; border-top: none; border-radius: 0 0 6px 0; }

.pf-loading { padding: 50px 0; text-align: center; color: var(--text-faint); }

.pf-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 6px 4px 16px;
  border-bottom: 1px solid var(--gold-line);
}
.pf-portrait {
  flex: 0 0 auto;
  width: 92px;
  height: 116px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-radius: 10px;
  background: linear-gradient(rgba(91, 191, 138, 0.1), rgba(120, 96, 48, 0.08));
  border: 1px solid var(--gold-line);
  overflow: hidden;
}
.pf-portrait-img { width: 100%; height: 100%; object-fit: cover; }
.pf-portrait.pf-noimg { align-items: center; }
.pf-portrait-char { font-family: var(--serif); font-size: 52px; text-shadow: 0 2px 12px currentColor; }
.pf-id { flex: 1; min-width: 0; }
.pf-name {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 1px;
  background: linear-gradient(135deg, #b07d22, #6f5320);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 8px;
}
.pf-id-row { display: flex; align-items: center; gap: 8px; }
.pf-realm {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--text);
  padding: 2px 11px;
  background: rgba(232, 200, 120, 0.18);
  border: 1px solid var(--gold-line);
  border-radius: 999px;
}
.pf-el {
  /* 单字(五行)成圆、双字(NPC 类型如「教修/散修」)自动撑成药丸，不再挤在小圆里 */
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 14px;
  white-space: nowrap;
  color: var(--pf-el, #5bbf8a);
  border: 1.5px solid var(--pf-el, #5bbf8a);
  border-radius: 999px;
}

.pf-section { padding: 14px 4px 0; }
.pf-section + .pf-section { border-top: 1px dashed var(--gold-line); margin-top: 12px; }
.pf-section-title {
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--gold);
  margin-bottom: 8px;
}
.pf-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pf-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 0;
  background: rgba(255, 253, 248, 0.6);
  border: 1px solid var(--hair);
  border-radius: 8px;
}
.pf-stat-v { font-family: var(--serif); font-size: 18px; font-weight: 700; color: var(--text); }
.pf-stat-k { font-size: 11px; color: var(--text-faint); }

.pf-exp-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 5px;
}
.pf-exp-num { font-family: var(--serif); color: var(--gold); }
.pf-exp-track { height: 7px; background: rgba(120, 96, 48, 0.14); border-radius: 999px; overflow: hidden; }
.pf-exp-fill { height: 100%; background: linear-gradient(90deg, #d8b25a, #b07d22); border-radius: 999px; }

.pf-rows { display: flex; flex-direction: column; gap: 7px; }
.pf-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14px;
}
.pf-row-k { color: var(--text-faint); }
.pf-row-v { font-family: var(--serif); color: var(--text); }

.pf-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pf-tag {
  padding: 3px 11px;
  font-size: 12px;
  font-family: var(--serif);
  color: var(--gold);
  background: rgba(232, 200, 120, 0.16);
  border: 1px solid var(--gold-line);
  border-radius: 999px;
}
.pf-tag-skill { color: var(--jade); background: rgba(91, 191, 138, 0.14); border-color: rgba(91, 191, 138, 0.4); }
.pf-tag-equip { color: var(--cinnabar); background: rgba(191, 86, 77, 0.10); border-color: rgba(191, 86, 77, 0.34); }
.pf-tag-empty { color: var(--text-faint); background: transparent; }

/* 落款印相对内容体(.profile-body)定位、落在底部预留净空带内（见 .profile-body
   的 padding-bottom）：随内容滚动、永远排在「已装备功法」之后，不再压住末段内容。 */
.pf-seal {
  position: absolute;
  right: 16px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 46px;
  height: 46px;
  justify-content: center;
  font-family: var(--serif);
  font-size: 22px;
  color: #fff;
  background: var(--cinnabar, #bf564d);
  border-radius: 8px;
  transform: rotate(-5deg);
  box-shadow: 0 4px 14px rgba(191, 86, 77, 0.4);
}
.pf-seal-sub {
  font-size: 7px;
  letter-spacing: 1px;
  opacity: 0.9;
  margin-top: 1px;
}

/* ---------------- 响应式（窄屏，如手机竖屏） ---------------- */

@media (max-width: 680px) {
  /* 竖屏主力档：HUD 折成两层，根治单行挤压（道号竖排/境界叠名）。 */
  #hud {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    gap: 4px;
    padding: 6px max(12px, env(safe-area-inset-right)) 7px max(12px, env(safe-area-inset-left));
  }
  .hud-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
  }
  #hud .bars {
    gap: 10px;
  }
  #hud .bars-vital {
    margin-left: 0; /* 两层档不再推右，气血/灵力直接填满第一行余宽 */
    flex: 1;
  }
  #hud .bars-exp {
    flex: 1 1 auto;
    min-width: 70px;
  }
  #hud .bar {
    width: auto;
    flex: 1; /* 同行内各条等分宽度，自适配窄/宽竖屏 */
  }
  #hud .bar.exp {
    display: block; /* 修为条移到第二行，恢复显示 */
  }
  #hud .hud-right {
    flex: 0 0 auto;
    margin-left: auto;
    gap: 12px;
  }
  #bottom {
    /* 让开左侧方向键，日志移到方向键右侧的空白区并底部对齐——
       原来全宽抬在方向键上方会压住居中的 NPC 立绘/名牌（真机反馈）。 */
    left: 196px;
    right: 12px;
    bottom: calc(var(--nav-clear) + 12px);
    height: 92px;
  }
  #map {
    top: 84px; /* 两层 HUD 变高，舆图/房名/出口整体下移避让 */
    width: 124px;
    height: 124px;
  }
  #map-toggle {
    top: 88px;
    right: 18px;
  }
  #room-banner {
    top: 84px;
  }
  #exits {
    top: 128px;
    max-width: 90%;
  }
  #dpad {
    bottom: calc(var(--nav-clear) + 12px); /* 抬离底部 nav */
  }
  .actor-figure {
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    font-size: 30px;
  }
  .combat-hud {
    width: min(92%, 360px);
    padding: 6px 10px 7px;
  }
  .combat-command-deck {
    width: min(94%, 390px);
  }
  .combat-command-deck .combat-actions {
    gap: 7px;
  }
  .combat-command-deck .combat-actions button {
    min-height: 46px;
    font-size: 14px;
  }
  .combat-command-deck .combat-actions .act-primary {
    min-height: 56px;
    font-size: 16px;
  }
}

/* 超窄屏（小屏手机/微信竖屏 <400px）：菜单贴边防溢出、HUD 双条标签防换行重叠、触控间距再加大 */
@media (max-width: 400px) {
  /* HUD 气血/灵力双条在窄屏并排时标签易换行重叠 → 收窄并单行省略 */
  #hud .bar {
    width: 72px;
  }
  #hud .bar .bar-label {
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* 菜单卡片更贴边、单个选项触控目标与编号徽加大，防 92vw 仍溢出/编号挤压换行 */
  .menu-card {
    width: min(94vw, 360px);
  }
  .menu-head {
    padding: 16px 14px 10px;
  }
  .menu-body {
    padding: 0 14px;
  }
  .menu-opt {
    padding: 14px 14px;
  }
  .menu-num {
    flex-basis: 30px;
    width: 30px;
    height: 30px;
  }
  .menu-reserved {
    gap: 10px;
    padding: 10px 14px calc(16px + env(safe-area-inset-bottom, 0px));
  }
  /* 快捷键纵列在超窄屏进一步拉开，杜绝误触 */
  #actions {
    gap: 16px;
  }
}

/* ---------------- 响应式（平板，竖/横屏中屏） ---------------- */
@media (min-width: 681px) and (max-width: 1024px) {
  #map {
    width: 208px;
    height: 208px;
  }
  #bottom {
    left: 256px;
    right: 104px;
    height: 108px;
  }
}

/* ---------------- 响应式（桌面/宽屏：放大舆图、加宽日志与战斗、键盘为主） ---------------- */
@media (min-width: 1025px) {
  /* 舆图：圆盘 → 右上角较大圆角矩形，缩放 0.6 时显示房名（见 MapRenderer） */
  #map {
    top: 72px;
    right: 22px;
    width: 308px;
    height: 224px;
    border-radius: 16px;
  }
  #map-toggle {
    top: 80px;
    right: 30px;
  }
  /* 房名横幅/出口可占更宽 */
  #room-banner {
    max-width: 40%;
  }
  #exits {
    max-width: 50%;
  }
  /* 底部日志加宽、抬高，桌面阅读更舒展 */
  #bottom {
    left: 360px;
    right: 120px;
    bottom: calc(var(--nav-clear) + 14px); /* 抬离底部 nav */
    height: 124px;
  }
  #log {
    font-size: 14px;
    line-height: 1.6;
  }
  /* HUD 字号略增 */
  #hud {
    height: 60px;
  }
  #hud .name {
    font-size: 21px;
  }
  /* 方向键略放大，便于鼠标点（键盘 WASD/方向键为快路径） */
  #dpad {
    grid-template-columns: repeat(3, 60px);
    grid-template-rows: repeat(3, 54px);
  }
  /* 战斗：双方立绘对峙区与动作条加宽 */
  #combat-overlay .combat-side {
    width: min(70%, 600px);
  }
  #combat-overlay .combat-command-deck,
  #combat-overlay .combat-hud {
    width: min(64%, 560px);
  }
  .combat-actions button {
    font-size: 18px;
  }
}

/* ---------------- 竖屏优先：不再强制横屏，竖屏即主力（旋转提示已停用） ---------------- */
/* 全游戏改为竖屏优先，#rotate-hint 永久隐藏（DOM 与 main.ts 逃生口保留但不再触发）。 */
#rotate-hint {
  display: none !important;
}
/* 旧「请横屏」遮罩样式保留备查，但 display 永远为 none（上面 !important 覆盖）。 */
@media (orientation: portrait) and (max-width: 820px) {
  #rotate-hint {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 40%, #f6efe2, #e6dcc8);
    text-align: center;
  }
  .rh-icon {
    font-size: 64px;
    display: inline-block;
    transform-origin: center;
    animation: rh-rotate 2.6s ease-in-out infinite;
  }
  .rh-title {
    margin-top: 14px;
    font-family: var(--serif);
    font-size: 22px;
    letter-spacing: 3px;
    color: var(--gold);
  }
  .rh-sub {
    margin-top: 8px;
    font-size: 13px;
    color: var(--text-dim);
  }
  .rh-skip {
    margin-top: 22px;
    padding: 10px 20px;
    font-family: var(--serif);
    font-size: 15px;
    letter-spacing: 1px;
    color: #fdf3ec;
    background: linear-gradient(160deg, #c75c45, #b04736);
    border: 1px solid rgba(167, 54, 42, 0.6);
    border-radius: 11px;
    box-shadow: 0 6px 18px rgba(167, 54, 42, 0.3);
  }
  .rh-lock-tip {
    margin-top: 10px;
    font-size: 12px;
    color: var(--text-faint);
  }
}
/* 用户点「仍以竖屏进入」后：即便竖屏也不再拦截（覆盖上面的媒体查询，须排在其后）。 */
body.force-portrait #rotate-hint {
  display: none !important;
}
@keyframes rh-rotate {
  0%, 38% { transform: rotate(0); }
  62%, 100% { transform: rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) {
  .rh-icon { animation: none; }
}

/* ---------------- 响应式（横屏手机：宽但矮 ~390px 高，紧凑排布塞下全部操作） ---------------- */
/* 置于平板/桌面档之后，故横屏手机(宽 844 命中平板宽度档)由本块按矮高度覆盖。 */
@media (orientation: landscape) and (max-height: 500px) {
  /* 矮屏纵向紧张：底部 nav 收薄、圆盘/字号缩小，控件随 --nav-clear 自动跟随 */
  #game { --nav-h: 52px; }
  .nav-ico { width: 26px; height: 26px; }
  .nav-label { font-size: 11px; }
  .nav-tab { gap: 3px; padding: 4px 2px; }
  /* 登录/选灵根第一屏在矮屏收缩，配合 .login-card 自身滚动，确保按钮可见可点 */
  .login-card { padding: 16px 22px 18px; }
  .login-card h1 { font-size: 30px; letter-spacing: 8px; text-indent: 8px; margin: 2px 0 2px; }
  .login-card .sub { margin: 0 0 12px; }
  .login-card .status { margin: 8px 2px 2px; }
  #hud {
    flex-direction: row; /* 矮屏复位单行（覆盖窄宽竖屏档的两层 column） */
    align-items: center;
    height: 44px;
    gap: 10px;
    /* 横屏 HUD 左右也叠加安全区 */
    padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
  }
  .hud-row { display: contents; } /* 矮屏子项并回单行 */
  #hud .name { font-size: 16px; }
  #hud .bars { gap: 8px; }
  #hud .bars-vital { margin-left: auto; flex: 0 0 auto; }
  #hud .bars-exp { flex: 0 0 auto; min-width: 0; }
  #hud .hud-right { margin-left: 0; }
  #hud .bar { width: 92px; flex: 0 0 auto; }
  #hud .bar.exp { display: none; } /* 矮屏省纵向空间 */
  .hud-mute { width: 32px; height: 32px; font-size: 14px; }
  #map {
    top: 50px;
    right: 12px;
    width: 140px;
    height: 100px;
    border-radius: 12px;
  }
  #map-toggle { top: 56px; right: 18px; }
  #room-banner { top: 50px; left: 10px; padding: 5px 12px; }
  #room-banner .rb-name { font-size: 15px; }
  #exits { top: 50px; max-width: 60%; }
  #dpad {
    /* 横屏主力档：方向键是高频连点控件，恢复到 44px 触摸下限并加大间距防误触；抬离底部 nav */
    left: max(12px, env(safe-area-inset-left));
    bottom: calc(var(--nav-clear) + 8px);
    grid-template-columns: repeat(3, 44px);
    grid-template-rows: repeat(3, 44px);
    gap: 7px;
  }
  #bottom {
    left: calc(168px + env(safe-area-inset-left));
    right: calc(70px + env(safe-area-inset-right));
    bottom: calc(var(--nav-clear) + 8px);
    height: 52px;
  }
  #log { font-size: 12px; line-height: 1.45; }
  .actor-figure { width: 64px; height: 64px; flex: 0 0 64px; font-size: 26px; }
  /* 矮屏金手指形象的尺寸/位置覆盖在文件末尾（须排在 base #system-avatar 之后才能生效） */
  /* 战斗矮屏紧凑：立绘收矮（横屏 ≤500px 高，竖向空间紧），确保敌上我下+动作条一屏可见 */
  #combat-overlay .combat-card { padding: 8px 12px 10px; }
  .combat-round { font-size: 12px; padding: 2px 12px; }
  .combat-side { gap: 2px; width: min(96%, 560px); }
  .combat-side.enemy { margin-top: 4px; }
  .combatant { padding: 0 2px; gap: 3px; }
  .fighter-figure { width: 64px; height: 102px; font-size: 22px; }
  .combat-side.multi .fighter-figure { width: 52px; height: 88px; font-size: 20px; }
  .combatant-name { font-size: 11.5px; margin-bottom: 2px; }
  .combatant-body { max-width: 116px; padding: 2px 6px 4px; }
  .combatant .bar { margin: 1px 0; }
  .combat-hud { width: min(84%, 420px); padding: 5px 10px 6px; }
  .combat-hud .combat-round { font-size: 14px; }
  .combat-state { font-size: 12px; }
  .combat-command-deck { margin-top: 7px; width: min(92%, 460px); gap: 6px; }
  .combat-log-body { max-height: 30px; padding-top: 4px; padding-bottom: 3px; }
  .combat-log-line { font-size: 11px; min-height: 16px; }
  .combat-command-deck .combat-actions { gap: 6px; }
  .combat-command-deck .combat-actions button { padding: 8px 5px; font-size: 13px; min-height: 38px; }
  .combat-command-deck .combat-actions .act-primary { min-height: 44px; font-size: 14px; }
}

/* ============ 闭关锁定遮罩（闭关/连续修炼期间整屏锁定，居中卡片实时显示灵力/修为） ============ */
#cultivation-lock {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(
    ellipse at center,
    rgba(245, 240, 232, 0.42),
    rgba(236, 228, 214, 0.66)
  );
  backdrop-filter: blur(2px);
}
#cultivation-lock[hidden] {
  display: none;
}
#cultivation-lock .cl-card {
  width: min(86vw, 320px);
  padding: 26px 22px;
  text-align: center;
  background: var(--panel-strong);
  border: 1px solid var(--gold-line);
  border-radius: 18px;
  box-shadow: 0 18px 48px rgba(120, 96, 48, 0.28);
}
#cultivation-lock .cl-spin {
  font-size: 46px;
  color: var(--gold-ink);
  animation: cl-rotate 6s linear infinite;
}
#cultivation-lock .cl-title {
  margin-top: 10px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 2px;
}
#cultivation-lock .cl-stat {
  margin-top: 12px;
  font-size: 14px;
  color: var(--jade);
}
#cultivation-lock .cl-equip {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 6px;
}
#cultivation-lock .cl-equip-item {
  font-family: var(--serif);
  font-size: 12px;
  color: var(--ink-strong, #4a3a26);
  background: rgba(253, 250, 244, 0.14);
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  padding: 1px 9px;
}
#cultivation-lock .cl-sub {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-faint);
}
#cultivation-lock .cl-exit {
  margin-top: 18px;
  padding: 9px 30px;
  font-size: 15px;
  color: var(--gold-ink);
  background: var(--panel);
  border: 1px solid var(--gold-line);
  border-radius: 22px;
  cursor: pointer;
}
#cultivation-lock .cl-exit:hover {
  border-color: var(--jade);
  color: var(--jade);
}
@keyframes cl-rotate {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  #cultivation-lock .cl-spin {
    animation: none;
  }
}

/* ============ 修炼界面（实景背景 + 纵向流式：境界横幅/立绘卡片/修为灵力/四动作） ============ */
#cultivate-screen {
  --cs-el: #5bbf8a; /* 本命五行色，由 JS 按 native_element 覆盖 */
  position: fixed;
  inset: 0;
  z-index: 85; /* 低于闭关锁(90)：连修/闭关时锁屏盖在其上 */
  display: block;
}
#cultivate-screen[hidden] {
  display: none;
}
/* 舞台：填满视口，居中放置内容列；宽屏 letterbox 用柔光天青填充 */
#cultivate-screen .cs-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 18%, #e7f4f8 0%, #d6e7e0 60%, #c3d8cd 100%);
}
/* 内容列：修炼地实景作背景（JS 注入、治愈轻洗白），区块自上而下流式排布互不重叠 */
.cs-art {
  position: relative;
  height: 100%;
  width: min(100%, 560px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: calc(max(12px, env(safe-area-inset-top)) + 44px) 16px
    max(14px, env(safe-area-inset-bottom)) 16px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.cs-close {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: 14px;
  z-index: 6;
  padding: 6px 13px;
  font-size: 13px;
}
/* —— 顶部境界横幅（牌匾底 + 境界名 + 本命五行徽记同排）—— */
.cs-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 0 0 auto;
  padding: 5px 22px;
  border-radius: 999px;
  background: rgba(253, 250, 244, 0.78);
  border: 1px solid var(--gold-line);
  box-shadow: 0 3px 12px rgba(40, 70, 60, 0.14);
}
.cs-realm {
  font-family: var(--serif);
  font-size: clamp(20px, 5.4vmin, 32px);
  font-weight: 700;
  letter-spacing: 5px;
  text-indent: 5px;
  background: linear-gradient(180deg, #b07d22 0%, #8a6a2a 60%, #6f5320 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold);
}
/* —— 修为进度（立绘卡片下方独立一行胶囊条）—— */
.cs-progress {
  position: relative;
  width: min(100%, 420px);
  height: 24px;
  flex: 0 0 auto;
}
.cs-track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid var(--gold-line);
  box-shadow: inset 0 1px 3px rgba(40, 70, 60, 0.12);
}
.cs-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.3s ease-out;
}
.cs-exp-fill {
  background: linear-gradient(90deg, var(--gold-bright), var(--gold));
  box-shadow: 0 0 8px rgba(232, 196, 106, 0.6);
}
.cs-exp-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #3a3128;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
}
.cs-exp-text span {
  font-family: var(--serif);
  margin-left: 3px;
}
/* —— 中央打坐立绘区（弹性占据中段剩余高度，卡片居中）—— */
.cs-figure {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 0 18px; /* 给四角徽章/下沿姿势标识留悬挂空间 */
  pointer-events: none;
}
/* 立绘卡片：定位锚，装备徽章/姿势标识挂其四角与下沿（勿加 overflow:hidden，会剪掉徽章） */
.cs-card {
  position: relative;
  height: 100%;
  max-height: 460px;
  aspect-ratio: 3 / 4;
  max-width: min(86%, 360px);
  z-index: 1;
}
.cs-portrait {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(253, 250, 244, 0.55), rgba(214, 231, 224, 0.55));
  border: 1.5px solid var(--gold-line);
  box-shadow: 0 10px 26px rgba(40, 70, 60, 0.22);
}
.cs-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cs-el-char {
  font-family: var(--serif);
  font-size: clamp(72px, 24vmin, 132px);
  font-weight: 700;
  color: var(--cs-el);
  opacity: 0.9;
  text-shadow: 0 4px 22px var(--cs-el), 0 4px 18px rgba(40, 70, 60, 0.25);
}
/* 打坐立绘上的装备视觉徽章层：铺满卡片，徽章按槽位悬挂卡片四角/下沿 */
.cs-equip {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.cs-equip .af-equip { pointer-events: none; }
.cs-equip .af-badge { pointer-events: auto; }
/* 装备摘要：独立一行纯文字（无图也清楚穿了什么） */
.cs-equip-summary {
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 8px;
  pointer-events: none;
}
.cs-equip-item {
  font-family: var(--serif);
  font-size: 12px;
  color: var(--ink-strong, #4a3a26);
  background: rgba(253, 250, 244, 0.82);
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  padding: 1px 9px;
}
.cs-equip-item.cs-equip-empty { color: #8a8270; }

/* 功法进阶弹窗（底部「功法」按钮触发，覆盖在修炼界面之上） */
.cs-skill-panel {
  position: fixed;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 30, 28, 0.42);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.cs-skill-panel[hidden] { display: none; }
.cs-skill-panel-card {
  width: min(92%, 430px);
  max-height: 76%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(253, 250, 244, 0.96);
  border: 1px solid var(--gold-line);
  box-shadow: 0 12px 36px rgba(40, 70, 60, 0.28);
}
.cs-skill-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cs-skill-panel-title {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--gold-ink);
  letter-spacing: 2px;
}
.cs-skill-panel-close {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--gold-ink);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--gold-line);
  border-radius: 10px;
  padding: 3px 12px;
  cursor: pointer;
}
.cs-skill-panel-note {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.4;
}
.cs-skill-panel-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
}
.cs-skill-empty {
  color: #8a8270;
  text-align: center;
  padding: 16px;
  font-size: 13px;
}
.cs-skill-act,
.cs-skill-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 14px;
  background: rgba(253, 250, 244, 0.72);
  border: 1px solid var(--gold-line);
  box-shadow: 0 4px 12px rgba(40, 70, 60, 0.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-align: left;
}
.cs-skill-act {
  cursor: pointer;
  transition: background 0.14s, transform 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.cs-skill-act:hover:not(:disabled) { background: rgba(255, 255, 255, 0.92); }
.cs-skill-act:active:not(:disabled) { transform: scale(0.98); }
.cs-skill-fuse { border-style: dashed; }
.cs-skill-row.cs-skill-done { opacity: 0.85; }
.cs-skill-name {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--gold-ink);
  letter-spacing: 1px;
}
.cs-skill-sub {
  font-size: 11px;
  color: var(--text-dim);
  text-align: right;
  line-height: 1.2;
}
/* 本命五行徽记（境界横幅旁同排，文字+色双编码） */
.cs-el-badge {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.74);
  border: 1.5px solid var(--cs-el);
  box-shadow: 0 0 10px var(--cs-el), 0 2px 8px rgba(40, 70, 60, 0.2);
}
.cs-el-badge-char {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--cs-el);
}
/* 上升灵气粒子（衬在立绘卡片身后两侧升腾，按五行着色，补动效） */
.cs-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0; /* 衬卡片(z:1)之后，不在立绘画面上飘斑点 */
}
.cs-dot {
  position: absolute;
  bottom: 8%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cs-el);
  box-shadow: 0 0 8px var(--cs-el);
  opacity: 0;
  animation-name: cs-rise;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in;
}
.cs-dot-lg {
  width: 10px;
  height: 10px;
  box-shadow: 0 0 12px var(--cs-el), 0 0 4px var(--cs-el);
}
@keyframes cs-rise {
  0% { transform: translateY(0) scale(0.8); opacity: 0; }
  18% { opacity: 0.85; }
  100% { transform: translateY(-30vh) scale(0.35); opacity: 0; }
}
/* —— 灵力 + 修炼速率 紧凑信息条（修为条下方独立一行）—— */
.cs-status {
  flex: 0 0 auto;
  width: min(100%, 420px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  font-size: 11.5px;
  color: #3a3128;
}
.cs-mp-text, .cs-rate {
  padding: 3px 11px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
}
.cs-mp-text span, .cs-rate span {
  font-family: var(--serif);
}
.cs-rate[hidden] {
  display: none;
}
/* —— 底部动作栏（毛玻璃软条，五枚圆钮均分；去硬边框，靠柔光与留白区隔）—— */
.cs-slots {
  flex: 0 0 auto;
  width: min(100%, 460px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 22px;
  background: rgba(253, 250, 244, 0.58);
  box-shadow: 0 6px 18px rgba(40, 70, 60, 0.14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.cs-slot {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.cs-slot-ring {
  width: clamp(38px, 11vmin, 50px);
  height: clamp(38px, 11vmin, 50px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 1px 4px rgba(40, 70, 60, 0.12);
  transition: transform 0.12s, background 0.14s;
}
.cs-slot:hover .cs-slot-ring {
  background: rgba(255, 255, 255, 0.96);
}
.cs-slot:active .cs-slot-ring {
  transform: scale(0.92);
}
.cs-slot-ico {
  width: 66%;
  height: 66%;
  object-fit: contain;
}
.cs-slot-label {
  font-family: var(--serif);
  font-size: clamp(11px, 3vmin, 14px);
  color: var(--gold-ink);
  letter-spacing: 1px;
  line-height: 1.1;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
}
.cs-slot-sub {
  font-size: 9px;
  color: var(--text-dim);
  line-height: 1.1;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
}
@media (prefers-reduced-motion: reduce) {
  .cs-dot { animation: none; opacity: 0.5; }
}

/* ============ 数字菜单浮层（任务/师门/个人中心等，渲染为可点按钮） ============ */
.menu-card {
  width: min(92vw, 460px);
  max-height: 84vh;
  max-height: 84dvh;
  /* 三段式：头 / 滚动体(.menu-body) / 底栏。只有中段滚动，
     头与底栏天然常驻且不与内容重叠 —— 旧「整卡滚动 + sticky 吸底」会把中间选项压在底栏下 */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--panel-strong);
  border: 1px solid var(--gold-line);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(120, 96, 48, 0.28);
}
.menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  padding: 20px 22px 12px;
}
.menu-head h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  color: var(--gold-ink);
  letter-spacing: 2px;
}
.menu-close {
  padding: 6px 16px;
  font-size: 14px;
  color: var(--text-dim);
  background: var(--panel);
  border: 1px solid var(--gold-line);
  border-radius: 18px;
  cursor: pointer;
}
.menu-close:hover { border-color: var(--jade); color: var(--jade); }

/* 购物商城（menu.id="shop"）：商品带图卡片网格 + 数量框 + 买。复用 .menu-card 外框，加宽放卡片。 */
.shop-mall-card { width: min(94vw, 600px); }
.shop-balance {
  margin-left: auto;
  margin-right: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gold-bright);
  letter-spacing: 1px;
}
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.shop-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  background: var(--panel);
  border: 1px solid var(--gold-line);
  border-radius: 12px;
}
.shop-card-fig {
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgba(138, 106, 42, 0.08);
  border-radius: 8px;
}
.shop-card-fig img { width: 100%; height: 100%; object-fit: contain; }
.shop-card-fig.noimg { font-size: 26px; font-weight: 700; letter-spacing: 1px; color: var(--gold); }
.shop-card-name { font-size: 15px; font-weight: 600; color: var(--gold-ink); }
.shop-card-desc {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-dim);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.shop-card-price { font-size: 13px; font-weight: 600; color: var(--gold-bright); }
.shop-card-buy { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.shop-qty {
  width: 56px;
  padding: 6px 8px;
  font-size: 14px;
  text-align: center;
  color: var(--text);
  background: var(--ink-1);
  border: 1px solid var(--gold-line);
  border-radius: 8px;
}
.shop-buy-btn {
  flex: 1 1 auto;
  padding: 7px 0;
  font-size: 14px;
  font-weight: 600;
  color: #f3ece0;
  background: var(--gold);
  border: 1px solid var(--gold-bright);
  border-radius: 8px;
  cursor: pointer;
}
.shop-buy-btn:hover { background: var(--gold-bright); }
.shop-card-note { font-size: 12px; color: var(--text-dim); }
.shop-otherrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.shop-otherrow .shop-other-btn { flex: 0 0 auto; }

.menu-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 22px;
}
.menu-header,
.menu-line {
  font-size: 14px;
  color: var(--text);
  line-height: 1.7;
  margin: 2px 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.menu-header { color: var(--text-dim); margin-bottom: 8px; }
.menu-depth {
  font-size: 12px;
  color: var(--text-faint);
  margin: 2px 0 8px;
}
.menu-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
}
.menu-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  text-align: left;
  font-size: 15px;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--gold-line);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.menu-opt:hover { border-color: var(--jade); background: rgba(63, 143, 111, 0.1); }
/* 触控按下即时反馈（移动端无 hover，点选需可感知） */
.menu-opt:active { transform: scale(0.97); background: rgba(63, 143, 111, 0.18); }
.menu-num {
  flex: 0 0 26px;
  height: 26px;
  display: grid;
  place-items: center;
  font-size: 14px;
  color: var(--gold-ink);
  background: rgba(193, 154, 74, 0.16);
  border-radius: 50%;
}
.menu-label { flex: 1; }
.menu-sub { font-size: 12px; color: var(--text-faint); }
/* 顶部搜索框（如玩家列表按道号搜索）：输入框 + 搜索按钮一行，外观沿用输入型选项 */
.menu-search {
  display: flex;
  gap: 8px;
  margin: 4px 0 12px;
}
.menu-search-field {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  font-size: 14px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--gold-line);
  border-radius: 10px;
  outline: none;
}
.menu-search-field:focus { border-color: var(--jade); }
.menu-search-btn {
  flex: 0 0 auto;
  padding: 9px 18px;
  font-size: 14px;
  color: var(--gold-ink);
  background: rgba(193, 154, 74, 0.16);
  border: 1px solid var(--gold-line);
  border-radius: 10px;
  cursor: pointer;
}
.menu-search-btn:active { transform: scale(0.96); }
/* 横排选项组（如分页「上一页/下一页」）：组内按钮等宽并排成一行 */
.menu-opt-row {
  display: flex;
  gap: 8px;
}
.menu-opt-row .menu-opt-inrow {
  flex: 1;
  justify-content: center;
}
.menu-opt-row .menu-opt-inrow .menu-num { display: none; }
.menu-opt-row .menu-opt-inrow .menu-label { flex: 0 0 auto; }
/* 江湖痕迹场景弹幕：右→左匀速飘过，墨色文字 + 暖白药丸底，永不挡操作 */
.trace-danmaku {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 18; /* 场景之上、HUD(顶部条)与各浮层之下 */
}
.trace-bullet {
  position: absolute;
  left: 0;
  max-width: 80vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 4px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(74, 58, 30, 0.9);
  background: rgba(255, 250, 240, 0.62);
  border: 1px solid rgba(193, 154, 74, 0.35);
  border-radius: 999px;
  backdrop-filter: blur(2px);
  will-change: transform;
}
.trace-help { color: rgba(146, 64, 34, 0.92); border-color: rgba(186, 98, 52, 0.4); }
.trace-supply { color: rgba(58, 102, 76, 0.92); border-color: rgba(63, 143, 111, 0.4); }

/* 输入型选项（如痕迹的留路标/求助）：标签行 + 输入框/发送一行，外观沿用选项卡片 */
.menu-opt-input {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  cursor: default;
}
.menu-opt-input:hover { border-color: var(--gold-line); background: var(--panel); }
.menu-opt-input:active { transform: none; background: var(--panel); }
.menu-input-label { font-size: 14px; color: var(--text); }
.menu-input-line { display: flex; gap: 8px; }
.menu-input-field {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  font-size: 14px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--gold-line);
  border-radius: 10px;
  outline: none;
}
.menu-input-field:focus { border-color: var(--jade); }
.menu-input-send {
  flex: 0 0 auto;
  padding: 9px 16px;
  font-size: 14px;
  color: var(--gold-ink);
  background: rgba(193, 154, 74, 0.16);
  border: 1px solid var(--gold-line);
  border-radius: 10px;
  cursor: pointer;
}
.menu-input-send:active { transform: scale(0.96); }
/* 命令列表浮层（修炼/江湖/金手指）：复用 .bag-card，仅收窄宽度 */
.cmdlist-card { width: min(92vw, 420px); }
.menu-foot-tip {
  font-size: 12px;
  color: var(--text-faint);
  margin: 6px 0 10px;
}
.menu-reserved {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
  border-top: 1px solid var(--gold-line);
  padding: 12px 22px calc(20px + env(safe-area-inset-bottom, 0px));
}
.menu-reserved-btn {
  flex: 1;
  padding: 9px 0;
  font-size: 14px;
  color: var(--gold-ink);
  background: var(--panel);
  border: 1px solid var(--gold-line);
  border-radius: 10px;
  cursor: pointer;
}
.menu-reserved-btn:hover { border-color: var(--jade); color: var(--jade); }
.menu-reserved-btn:active { transform: scale(0.97); background: rgba(193, 154, 74, 0.14); }

/* ============ 顶部居中短提示 toast（突破等非菜单结果） ============ */
#toast {
  position: fixed;
  top: 76px;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  z-index: 85;
  max-width: min(86vw, 420px);
  padding: 10px 20px;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  color: var(--text);
  background: var(--panel-strong);
  border: 1px solid var(--gold-line);
  border-radius: 22px;
  box-shadow: 0 10px 30px rgba(120, 96, 48, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* 成功/失败配色：默认金色为「普通」，ok=玉色、err=朱砂，左侧短竖标 + 边框/字色区分 */
#toast.ok {
  border-color: color-mix(in srgb, var(--jade) 55%, transparent);
  color: var(--jade);
  box-shadow: 0 10px 30px rgba(63, 143, 111, 0.2), inset 4px 0 0 var(--jade);
}
#toast.err {
  border-color: color-mix(in srgb, var(--cinnabar) 60%, transparent);
  color: var(--cinnabar);
  box-shadow: 0 10px 30px rgba(191, 86, 77, 0.22), inset 4px 0 0 var(--cinnabar);
}

/* WS 连接状态角标：断线/重连时顶部居中琥珀胶囊，z-index 高于浮层(80)以便战斗中也可见 */
#conn-status {
  position: fixed;
  top: max(8px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 120;
  padding: 5px 16px;
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
  color: #6b4e16;
  background: linear-gradient(180deg, #fbe7c4, #f3d79a);
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(120, 96, 48, 0.3);
  pointer-events: none;
}
#conn-status[hidden] {
  display: none;
}

/* ============ 个人中心浮层（点 HUD 道号打开，展示角色全部信息） ============ */
#hud .name.clickable { cursor: pointer; }
#hud .name.clickable:hover { color: var(--gold-bright); text-decoration: underline; }

.person-card { width: min(94vw, 560px); }
.pc-grid,
.pc-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 14px;
  margin-bottom: 4px;
}
.pc-kv {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 12px;
  background: var(--panel);
  border: 1px solid var(--gold-line);
  border-radius: 10px;
}
.pc-kv span { font-size: 13px; color: var(--text-dim); }
.pc-kv b {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--gold-ink);
}
.pc-resources { display: flex; flex-direction: column; gap: 10px; }
.pc-bar { width: 100%; }
.pc-bar .bar-label { font-size: 12px; color: var(--text-dim); margin-bottom: 4px; }
.pc-bar .bar-label span { font-family: var(--serif); color: var(--text); }
.pc-resources .pc-kv { margin-top: 2px; }
.pc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pc-chip {
  font-size: 13px;
  color: var(--text);
  padding: 5px 12px;
  background: rgba(63, 143, 111, 0.12);
  border: 1px solid var(--gold-line);
  border-radius: 16px;
}
.pc-chip.buff { color: var(--jade); background: rgba(63, 143, 111, 0.14); }
.pc-chip.debuff { color: var(--cinnabar); background: rgba(191, 86, 77, 0.12); }
.pc-faint { font-size: 13px; color: var(--text-faint); }

/* ---- 个人中心：tab 栏（信息/装备/功法/成就） ---- */
.pc-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.pc-tab {
  flex: 1;
  padding: 8px 0;
  font-size: 14px;
  color: var(--gold-ink);
  background: var(--panel);
  border: 1px solid var(--gold-line);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.pc-tab:hover { border-color: var(--jade); }
.pc-tab.on {
  color: var(--jade);
  border-color: var(--jade);
  background: rgba(63, 143, 111, 0.12);
}
/* 概览中可点的「金手指」行（兜底进金手指浮层）：复用 .pc-kv 外观 + 按钮态 */
.pc-kv-btn {
  cursor: pointer;
  width: 100%;
  text-align: left;
  font: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.pc-kv-btn:hover { border-color: var(--jade); background: rgba(63, 143, 111, 0.1); }
/* 退出登录按钮（个人中心信息页底部，低调朱砂悬停） */
.pc-logout-row { margin-top: 16px; display: flex; justify-content: center; }
.pc-logout-btn {
  padding: 8px 22px;
  font-size: 13px;
  color: var(--text-faint);
  background: var(--panel);
  border: 1px solid var(--gold-line);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.pc-logout-btn:hover { border-color: var(--cinnabar); color: var(--cinnabar); }

/* ---- 个人中心：立绘头部 ---- */
.pc-portrait {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 12px;
}
.pc-portrait-fig {
  width: 108px;
  aspect-ratio: 3 / 4;
  flex: 0 0 auto;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--gold-line);
  background: var(--panel);
}
.pc-portrait-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-portrait-img.broken { display: none; }
.pc-portrait-ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 700;
  color: var(--gold-ink);
  background: linear-gradient(160deg, rgba(193, 154, 74, 0.18), rgba(252, 248, 240, 0.6));
}
.pc-portrait-ph.el-metal { color: #b08d3a; }
.pc-portrait-ph.el-wood { color: #4f9e7f; }
.pc-portrait-ph.el-water { color: #3f7bb0; }
.pc-portrait-ph.el-fire { color: #bf564d; }
.pc-portrait-ph.el-earth { color: #a8843c; }
.pc-portrait-side { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pc-portrait-name { font-family: var(--serif); font-size: 19px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pc-rename-btn {
  font-family: var(--sans, inherit);
  font-size: 12px;
  font-weight: 400;
  padding: 2px 10px;
  color: var(--gold-ink);
  background: var(--panel-strong);
  border: 1px solid var(--gold-line);
  border-radius: 12px;
  cursor: pointer;
}
.pc-rename-btn:hover { color: var(--gold-bright); border-color: var(--gold-bright); }
.pc-portrait-realm { font-size: 13px; color: var(--gold-ink); }
.pc-sculpt-btn {
  margin-top: 6px;
  align-self: flex-start;
  padding: 7px 16px;
  font-size: 14px;
  color: var(--gold-ink);
  background: var(--panel-strong);
  border: 1px solid var(--gold-line);
  border-radius: 18px;
  cursor: pointer;
}
.pc-sculpt-btn:hover { color: var(--gold-bright); border-color: var(--gold-bright); }
.pc-portrait-tip { font-size: 12px; color: var(--text-faint); }

/* ---- 个人中心：塑造表单 ---- */
.pc-sculpt { display: flex; flex-direction: column; }
.pc-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.pc-opt {
  padding: 6px 16px;
  font-size: 14px;
  color: var(--text-dim);
  background: var(--panel);
  border: 1px solid var(--gold-line);
  border-radius: 16px;
  cursor: pointer;
}
/* :hover 一并声明：移动端点按后 hover 黏住，全局 button:hover 特异性更高会盖掉选中底色 */
.pc-opt.on,
.pc-opt.on:hover:not(:disabled) { color: #fff; background: var(--gold-ink); border-color: var(--gold-ink); }
.pc-desc {
  width: 100%;
  min-height: 72px;
  resize: vertical;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--gold-line);
  border-radius: 10px;
  box-sizing: border-box;
}
.pc-ref { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pc-ref-pick {
  padding: 7px 16px;
  font-size: 14px;
  color: var(--gold-ink);
  background: var(--panel-strong);
  border: 1px solid var(--gold-line);
  border-radius: 16px;
  cursor: pointer;
}
.pc-ref-prev { display: flex; align-items: center; gap: 8px; }
.pc-ref-prev img {
  width: 48px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--gold-line);
}
.pc-ref-clear {
  font-size: 12px;
  color: var(--cinnabar);
  background: none;
  border: none;
  cursor: pointer;
}
.pc-sculpt-status { min-height: 18px; margin: 10px 0 4px; font-size: 13px; color: var(--gold-ink); }
.pc-sculpt-actions { display: flex; gap: 12px; margin-top: 6px; }
.pc-sculpt-actions button {
  flex: 1;
  padding: 10px;
  font-size: 15px;
  border-radius: 10px;
  cursor: pointer;
}
.pc-cancel { color: var(--text-dim); background: var(--panel); border: 1px solid var(--gold-line); }
.pc-go { color: #fff; background: var(--gold-ink); border: 1px solid var(--gold-ink); }
.pc-sculpt-actions button:disabled { opacity: 0.6; cursor: default; }

/* ---- 金手指「系统」浮动形象（场景左侧中部，避开右侧竖排快捷键/小地图） ---- */
#system-avatar {
  position: absolute;
  left: 14px;
  top: 44%;
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  animation: sa-float 4.5s ease-in-out infinite;
}
.sa-figure {
  position: relative;
  width: 56px;
  height: 56px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--gold-line);
  background: radial-gradient(circle at 50% 38%, rgba(255, 247, 224, 0.9), rgba(243, 230, 200, 0.65));
  box-shadow: 0 0 14px rgba(193, 154, 74, 0.5), 0 4px 10px rgba(60, 45, 20, 0.25);
  cursor: pointer;
  overflow: hidden;
}
.sa-figure:hover { border-color: var(--gold-bright); box-shadow: 0 0 20px rgba(176, 125, 34, 0.65); }
.sa-ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 700;
  color: var(--gold-ink);
}
/* 立绘柔光遮罩：径向羽化淡出边缘，有底色也呈悬浮观感（不依赖真透明底） */
.sa-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 58%, transparent 78%);
  mask-image: radial-gradient(circle at 50% 45%, #000 58%, transparent 78%);
}
.sa-glow {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: inset 0 0 12px rgba(255, 236, 190, 0.6);
}
.sa-name {
  font-size: 12px;
  color: var(--text);
  padding: 2px 10px;
  background: var(--panel-strong);
  border: 1px solid var(--gold-line);
  border-radius: 12px;
  white-space: nowrap;
}
@keyframes sa-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
@media (prefers-reduced-motion: reduce) {
  #system-avatar { animation: none; }
}
@media (max-width: 680px) {
  .sa-figure { width: 46px; height: 46px; }
  .sa-ph { font-size: 20px; }
  #system-avatar { top: 40%; }
}
/* 矮屏（横屏手机）：金手指形象上移贴 banner 下方、缩小、隐名，让出底部给方向键避免重叠。
   必须排在 base #system-avatar（约 1950 行）与上面 ≤680 块之后，否则等优先级下被覆盖。 */
@media (orientation: landscape) and (max-height: 500px) {
  #system-avatar { top: 100px; }
  .sa-figure { width: 40px; height: 40px; }
  .sa-ph { font-size: 18px; }
  .sa-name { display: none; }
}

/* ============================================================
   消息浮层 ChatOverlay —— 系统(金手指)聊天 / 玩家聊天历史 / NPC 回看
   ============================================================ */
#chat-overlay {
  display: block;
  padding: 0;
  background: rgba(20, 16, 11, 0.5);
}
.chat-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: rgba(249, 245, 237, 0.97);
}
.chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
  border-bottom: 1px solid var(--gold-line);
  background: rgba(253, 250, 244, 0.96);
}
.chat-tabs { display: flex; gap: 6px; }
.chat-tab {
  padding: 7px 16px;
  font-size: 14px;
  font-family: var(--serif);
  color: var(--text-dim);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
}
.chat-tab.on {
  color: var(--gold);
  font-weight: 700;
  background: var(--glass-btn);
  border-color: var(--gold-line);
}
.chat-close {
  padding: 6px 14px;
  font-size: 13px;
  color: var(--text-dim);
  background: var(--glass-btn);
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  cursor: pointer;
}
.chat-body { flex: 1; min-height: 0; display: flex; }
.chat-empty {
  padding: 24px 20px;
  color: var(--text-faint);
  font-size: 13.5px;
  line-height: 1.7;
  text-align: left;
}
.chat-empty .ce-intro {
  color: var(--text-dim);
  padding: 10px 12px;
  margin-bottom: 14px;
  background: var(--glass-btn);
  border: 1px solid var(--gold-line);
  border-radius: 10px;
}
.chat-empty .ce-intro b { color: var(--gold-ink); }
.chat-empty .ce-lead { margin-bottom: 8px; }
.chat-empty .ce-tips {
  margin: 0;
  padding-left: 1.2em;
}
.chat-empty .ce-tips li { margin-top: 4px; }

/* ---- 系统聊天：左会话侧栏 + 右消息流 ---- */
.chat-sys { flex: 1; min-height: 0; display: flex; position: relative; }
.chat-sidebar {
  width: 200px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--gold-line);
  background: rgba(247, 242, 233, 0.96);
  overflow-y: auto;
}
.chat-newthread {
  margin: 10px;
  padding: 9px;
  font-size: 13px;
  color: var(--gold);
  background: var(--glass-btn);
  border: 1px solid var(--gold-line);
  border-radius: 8px;
  cursor: pointer;
}
.chat-threadlist { flex: 1; overflow-y: auto; }
.chat-threaditem {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 10px;
  cursor: pointer;
  border-bottom: 1px solid rgba(193, 154, 74, 0.18);
}
.chat-threaditem.on { background: rgba(193, 154, 74, 0.16); }
.chat-threaditem .ti-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.chat-threaditem .ti-time { font-size: 11px; color: var(--text-faint); }
.chat-threaditem .ti-title {
  flex: 1;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-threaditem .ti-ops { display: flex; gap: 2px; opacity: 0.6; }
.chat-threaditem .ti-ops button {
  background: none; border: none; cursor: pointer; font-size: 12px; padding: 2px;
}
.chat-sidebar-mask { display: none; }

.chat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-sysbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(193, 154, 74, 0.25);
}
.chat-menu {
  display: none;
  background: var(--glass-btn);
  border: 1px solid var(--gold-line);
  border-radius: 6px;
  padding: 3px 9px;
  cursor: pointer;
}
.chat-cur-title { font-family: var(--serif); font-weight: 700; color: var(--gold); font-size: 15px; }

.chat-stream { flex: 1; min-height: 0; overflow-y: auto; padding: 12px; }
.chat-msg {
  max-width: 82%;
  margin: 0 0 10px;
  padding: 8px 11px;
  border-radius: 12px;
  font-size: 14.5px;
  line-height: 1.55;
  word-break: break-word;
}
.chat-msg.user {
  margin-left: auto;
  background: #e8f0df;
  border: 1px solid #c5d6b0;
}
.chat-msg.assistant {
  margin-right: auto;
  background: rgba(255, 253, 248, 0.92);
  border: 1px solid var(--gold-line);
}
.chat-msg.system {
  margin: 6px auto;
  background: transparent;
  color: var(--text-faint);
  font-size: 12.5px;
  text-align: center;
}
.chat-msg .cm-who { font-size: 11px; color: var(--text-faint); margin-bottom: 2px; }
.chat-msg .cm-img {
  display: block;
  max-width: 100%;
  margin-top: 6px;
  border-radius: 8px;
  border: 1px solid var(--gold-line);
}
.chat-msg .cm-pending, .chat-msg.cm-thinking { color: var(--text-faint); font-style: italic; }

/* 「思考中」三点跳动动画（思索气泡 + 流式空占位共用） */
.cm-typing { display: inline-flex; gap: 5px; align-items: center; padding: 2px 0; }
.cm-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold, #c19a4a);
  opacity: 0.4;
  animation: cm-typing-bounce 1.2s infinite ease-in-out;
}
.cm-typing span:nth-child(2) { animation-delay: 0.18s; }
.cm-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes cm-typing-bounce {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-4px); }
}

.chat-inputbar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--gold-line);
  background: rgba(253, 250, 244, 0.96);
}
/* 模式切换：聊天 / 作画（segmented pill，参考 ChatGPT 把对话与生图分开） */
.chat-modetabs { display: flex; gap: 6px; }
.chat-mode {
  padding: 4px 12px;
  font-size: 12.5px;
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
}
.chat-mode.on { background: var(--glass-btn); color: var(--gold); font-weight: 600; }
.chat-mode:disabled { opacity: 0.5; }

.chat-inputrow { display: flex; gap: 6px; align-items: center; }
.chat-input {
  flex: 1;
  padding: 9px 12px;
  font-size: 14px;
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--text);
}
.chat-ref, .chat-primary {
  padding: 9px 14px;
  font-size: 14px;
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  background: var(--glass-btn);
  color: var(--gold);
  cursor: pointer;
}
.chat-ref { padding: 9px 12px; }
/* 参考图入口只在作画模式出现，聊天模式输入区保持干净 */
.chat-inputbar.mode-chat .chat-ref { display: none; }
.chat-ref:disabled, .chat-primary:disabled, .chat-input:disabled { opacity: 0.5; }

/* 生图参考图 chip：选图后显示缩略，× 移除 */
.chat-refchip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border: 1px solid var(--gold-line);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.92);
}
.chat-ref-thumb {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--gold-line);
  flex-shrink: 0;
}
.chat-ref-label { flex: 1; font-size: 12.5px; color: var(--text-dim); }
.chat-ref-clear {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  color: var(--text-faint);
  padding: 2px 6px;
}

/* ---- 玩家聊天历史 ---- */
.chat-player { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chat-scopebar { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid rgba(193,154,74,0.25); }
.chat-scope {
  padding: 5px 14px; font-size: 13px; color: var(--text-dim);
  background: var(--glass-btn); border: 1px solid var(--gold-line);
  border-radius: 999px; cursor: pointer;
}
.chat-scope.on { color: var(--gold); font-weight: 700; background: rgba(193,154,74,0.18); }
.chat-plist { flex: 1; overflow-y: auto; padding: 10px 12px; }
/* 玩家页发言输入栏：复用 .chat-inputbar 外观；私语模式多一个窄对象框 */
.chat-pcompose .chat-ptarget { flex: 0 0 88px; }
.chat-pnote { font-size: 12px; color: var(--text-dim); padding: 0 4px; }
.chat-prow { margin: 0 0 8px; font-size: 14px; line-height: 1.55; }
.chat-prow .pr-tag { font-size: 11px; color: var(--text-faint); margin-right: 6px; }
.chat-prow .pr-name { font-weight: 700; color: var(--gold); }
.chat-prow.whisper .pr-name { color: #7a5a8a; }
.chat-prow .pr-text { color: var(--text); }
/* 发布时间：另起一行靠右的灰色小字 */
.chat-prow .pr-time { display: block; text-align: right; font-size: 11px; color: var(--text-faint); margin-top: 2px; }
/* 江湖广播（只读快报）：整行暖底色条 + 朱砂名，区别于普通发言 */
.chat-prow.broadcast {
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(193, 122, 74, 0.10);
}
.chat-prow.broadcast .pr-tag { color: #b0633c; }
.chat-prow.broadcast .pr-name { color: #b0633c; }

/* ---- NPC 回看 ---- */
.chat-npc { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chat-npc .npc-stream { flex: 1; overflow-y: auto; padding: 12px; }

/* ---- 窄屏：侧栏改抽屉 ---- */
@media (max-width: 680px) {
  .chat-sidebar {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    z-index: 3;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 4px 0 18px rgba(0,0,0,0.2);
  }
  .chat-sys.side-open .chat-sidebar { transform: none; }
  .chat-sys.side-open .chat-sidebar-mask {
    display: block; position: absolute; inset: 0; z-index: 2;
    background: rgba(0,0,0,0.25);
  }
  .chat-menu { display: inline-block; }
}

/* ============================================================
   AvatarFigure —— 统一立绘 + 装备视觉徽章（玩家形象与装备展示·阶段1）
   纯 CSS：基础立绘占位/贴图 + 五行着色 + 装备徽章（图标 / 无图必显名称文字）。
   ============================================================ */
.af-wrap { display: contents; }
.af-figure {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  --af-el: #5bbf8a;
}
/* 基础立绘容器：圆形玉框占位，贴图成功后整图直显去框 */
.af-figure .af-portrait {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: visible;
  border: 2px solid color-mix(in srgb, var(--af-el) 70%, transparent);
  background: radial-gradient(circle at 50% 40%,
    color-mix(in srgb, var(--af-el) 18%, transparent), rgba(253, 250, 244, 0.78));
  box-shadow: 0 0 14px color-mix(in srgb, var(--af-el) 24%, transparent);
  font-family: var(--serif);
}
.af-figure .af-portrait-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  opacity: 0;
}
.af-figure.af-img-loaded .af-portrait { border-color: transparent; box-shadow: none; background: none; }
.af-figure.af-img-loaded .af-portrait-img { opacity: 1; }
.af-figure.af-img-loaded .af-ph { display: none; }
.af-figure .af-ph { color: var(--af-el); line-height: 1; }

/* 尺寸档：场景/战斗（小）→ 个人中心（大） */
.af-figure.af-size-scene { width: 56px; height: 56px; font-size: 24px; }
.af-figure.af-size-combat { width: 60px; height: 60px; font-size: 28px; }
.af-figure.af-size-meditate { width: 132px; height: 132px; font-size: 60px; }
.af-figure.af-size-center { width: 120px; height: 120px; font-size: 54px; }

/* 击败态：去饱和下沉（与战斗 .defeated 同语义，纯展示） */
.af-figure.af-state-defeated { filter: grayscale(0.7) brightness(0.7); opacity: 0.7; }

/* ---- 装备视觉徽章层 ---- */
.af-figure .af-equip {
  position: absolute;
  inset: 0;
  pointer-events: none; /* 容器不挡；徽章自身开 pointer-events 出 tooltip */
}
.af-badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  pointer-events: auto;
  font-family: var(--serif);
  font-size: 11px;
  line-height: 1.1;
  color: var(--ink-strong, #4a3a26);
  background: rgba(253, 250, 244, 0.92);
  border: 1.5px solid color-mix(in srgb, var(--af-el) 75%, transparent);
  border-radius: 9px;
  padding: 1px 5px;
  box-shadow: 0 1px 5px rgba(40, 28, 14, 0.22);
  white-space: nowrap;
  max-width: 92px;
}
.af-badge .af-badge-ico {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex: 0 0 auto;
}
.af-badge .af-badge-glyph {
  font-weight: 600;
  color: var(--af-el);
}
.af-badge .af-badge-name { overflow: hidden; text-overflow: ellipsis; }
/* 无图徽章：去掉小药丸约束，整名可读（纯文字护栏的核心） */
.af-badge.af-noicon { max-width: 120px; white-space: normal; }
.af-badge .af-badge-name-only { font-weight: 600; }

/* 槽位定位：武器右下、内甲左下、法衣身侧色条、法器右上光点、戒指左上角标 */
.af-badge.af-weapon { right: -10px; bottom: -6px; }
.af-badge.af-armor { left: -10px; bottom: -6px; }
.af-badge.af-accessory { right: -8px; top: -8px; }
.af-badge.af-ring { left: -8px; top: -8px; }
/* 法衣呈现为身侧竖向色条 + 名牌（用五行色，文字护栏仍在） */
.af-badge.af-robe {
  left: 50%;
  bottom: -16px;
  transform: translateX(-50%);
  border-radius: 7px;
  border-bottom: 3px solid var(--af-el);
}

/* 小尺寸（场景/战斗）下徽章更紧凑，避免压住名牌 */
.af-size-scene .af-badge,
.af-size-combat .af-badge { font-size: 10px; padding: 0 4px; max-width: 72px; }

/* 大尺寸（个人中心/打坐）徽章稍大些 */
.af-size-center .af-badge,
.af-size-meditate .af-badge { font-size: 12px; }

/* ============================================================
   阶段4 高级外观：染色 / 幻化 / 皮肤标识（AvatarFigure）
   纯视觉叠色：dye 套色调，transmog 标小标，skin_key 标角标。
   ============================================================ */
/* 染色徽章：边框/背景套该槽染色（--af-dye），文字仍清晰可读（纯文字护栏不破） */
.af-badge.af-dyed {
  border-color: color-mix(in srgb, var(--af-dye, var(--af-el)) 85%, transparent);
  background: color-mix(in srgb, var(--af-dye, #fff) 16%, rgba(253, 250, 244, 0.92));
}
.af-badge.af-dyed .af-badge-glyph { color: var(--af-dye, var(--af-el)); }
/* 法衣色条染色：底色直接用染色 */
.af-badge.af-robe.af-dyed { border-bottom-color: var(--af-dye, var(--af-el)); }
/* 幻化小标：装备名后跟一个轻量「(幻化)」标，真实名永远在前 */
.af-badge-transmog {
  margin-left: 2px;
  font-size: 0.78em;
  color: var(--accent, #9a7bd0);
  opacity: 0.95;
}
.af-badge.af-transmog { border-style: dashed; }
/* 皮肤角标：无皮肤美术资源时的纯文字标识（皮肤名可读），挂在立绘下沿 */
.af-figure .af-skin-badge {
  position: absolute;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--serif);
  font-size: 10px;
  color: var(--ink-strong, #4a3a26);
  background: rgba(253, 250, 244, 0.92);
  border: 1px solid color-mix(in srgb, var(--af-el) 60%, transparent);
  border-radius: 8px;
  padding: 0 5px;
  pointer-events: none;
}
/* 有皮肤美术资源时（CSS 给 .af-skin-<key> 配背景图）可隐藏文字角标——目前无资源，保留文字 */

/* ============================================================
   阶段4：打坐姿势标识（CultivateScreen）
   ============================================================ */
.cs-pose-label {
  /* 卡片内左上角（下沿留给法衣徽章 af-robe，避免撞位） */
  position: absolute;
  left: 10px;
  top: 10px;
  white-space: nowrap;
  font-family: var(--serif);
  font-size: 12px;
  color: #6b5c3e;
  background: rgba(253, 250, 244, 0.86);
  border: 1px solid rgba(150, 130, 90, 0.5);
  border-radius: 9px;
  padding: 1px 8px;
  pointer-events: none;
  z-index: 4;
}
/* 姿态专属呈现（有姿势美术后按 .cs-pose-<key> 微调立绘 transform/背景）：当前先留挂载点 */
.cs-figure.cs-pose-御剑悬空 .cs-portrait { transform: translateY(-6%); }
.cs-figure.cs-pose-御剑悬空 .cs-portrait-img { filter: drop-shadow(0 4px 10px rgba(110, 168, 212, 0.4)); }

/* ============================================================
   阶段4：高阶功法大招演出（CombatOverlay）
   比普通技能更强的全屏短闪 + 镜头缩放 + 大招横幅。
   ============================================================ */
/* 大招横幅：复用 .skill-flash 基础，更大更醒目（按 --fx-scale 放大） */
.skill-flash.ult-banner {
  font-size: calc(28px * var(--fx-scale, 1.3));
  font-weight: 800;
  letter-spacing: 4px;
  text-shadow: 0 0 18px currentColor, 0 2px 6px rgba(0, 0, 0, 0.5);
  animation: ult-banner-in 1s ease-out forwards;
}
@keyframes ult-banner-in {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
  72% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.04); }
}
/* 全屏短闪：盖满战斗卡，按五行色（--el）径向铺开后淡出 */
.ult-fullscreen {
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 45%,
    color-mix(in srgb, var(--el, #d8c97a) 70%, transparent),
    color-mix(in srgb, var(--el, #d8c97a) 22%, transparent) 45%,
    transparent 75%);
  opacity: 0;
  animation: ult-flash 0.52s ease-out forwards;
}
@keyframes ult-flash {
  0% { opacity: 0; transform: scale(0.85); }
  22% { opacity: 0.92; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.08); }
}
/* 大招镜头缩放冲击（比暴击 zoom-punch 更深更久） */
.combat-card.ult-zoom { animation: ult-zoom 0.46s cubic-bezier(0.2, 0.9, 0.2, 1.1); }
@keyframes ult-zoom {
  0% { transform: scale(1); }
  40% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .skill-flash.ult-banner { animation: none; opacity: 1; }
  .ult-fullscreen, .combat-card.ult-zoom { animation: none; }
}

/* ============================================================
   阶段4：衣橱浮层（Wardrobe）
   ============================================================ */
.wardrobe-card { max-width: 560px; }
.wardrobe-tabs { margin-bottom: 8px; }
.wardrobe-preview { display: flex; justify-content: center; padding: 10px 0 22px; }
.wardrobe-preview-fig .af-figure { width: 132px; height: 132px; font-size: 56px; }
.wardrobe-slot {
  border: 1px solid rgba(150, 130, 90, 0.28);
  border-radius: 12px;
  padding: 8px 10px;
  margin-bottom: 10px;
  background: rgba(253, 250, 244, 0.55);
}
.wardrobe-slot.empty { opacity: 0.6; }
.wardrobe-slot-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.wardrobe-slot-name { font-family: var(--serif); font-weight: 700; color: #4a3a26; }
.wardrobe-slot-cur, .wardrobe-real { font-size: 12px; color: #6b5c3e; }
/* 染色色板 */
.dye-swatches, .pose-opts, .tm-opts, .skin-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.dye-swatch {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 4px;
  border: 1.5px solid rgba(150, 130, 90, 0.4);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  font-size: 12px;
}
.dye-swatch .dye-chip {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--sw, #5bbf8a);
  border: 1px solid rgba(0, 0, 0, 0.18);
  flex: 0 0 auto;
}
.dye-swatch .dye-name { color: #4a3a26; } /* 颜色名文字承载，不只靠色块（纯文字护栏） */
.dye-swatch.on { border-color: var(--gold-bright, #c9a24b); box-shadow: 0 0 0 2px rgba(201, 162, 75, 0.3); }
.dye-swatch.locked { opacity: 0.78; }
.dye-clear, .tm-clear, .pose-clear, .skin-clear {
  margin-left: 6px;
  font-size: 11px;
  padding: 0 6px;
  border: 1px solid rgba(150, 130, 90, 0.45);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}
/* 幻化/姿势/皮肤选项 */
.tm-opt, .pose-opt, .skin-opt {
  padding: 4px 10px;
  border: 1.5px solid rgba(150, 130, 90, 0.4);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  font-size: 12px;
  color: #4a3a26;
}
.tm-opt.on, .pose-opt.on, .skin-opt.on {
  border-color: var(--gold-bright, #c9a24b);
  box-shadow: 0 0 0 2px rgba(201, 162, 75, 0.3);
}
.tm-apply {
  margin-top: 6px;
  padding: 5px 12px;
  border: none;
  border-radius: 10px;
  background: var(--gold-bright, #c9a24b);
  color: #2a2010;
  font-weight: 700;
  cursor: pointer;
}
.wardrobe-shop-row { margin: 10px 0 4px; }
.wardrobe-shop-btn {
  width: 100%;
  padding: 8px;
  border: 1px dashed rgba(154, 123, 208, 0.6);
  border-radius: 10px;
  background: rgba(154, 123, 208, 0.1);
  color: #7a5fb0;
  font-weight: 600;
  cursor: pointer;
}
.pc-wardrobe-btn {
  margin-left: 8px;
  font-size: 12px;
  padding: 1px 8px;
  border: 1px solid rgba(154, 123, 208, 0.5);
  border-radius: 9px;
  background: rgba(154, 123, 208, 0.1);
  color: #7a5fb0;
  cursor: pointer;
}

/* ===== 每日签到结果卡（event:checkin，金手指菜单之上的庆祝/已签弹卡） ===== */
.checkin-modal {
  z-index: 95; /* 盖在金手指菜单卡(.overlay-panel z80)之上 */
  background: rgba(245, 240, 232, 0.45);
  backdrop-filter: blur(2px);
  animation: death-fade 0.35s ease-out;
}
.ck-card {
  width: min(86%, 340px);
  padding: 26px 24px 20px;
  text-align: center;
  background: linear-gradient(180deg, rgba(255, 252, 245, 0.97), rgba(250, 243, 230, 0.97));
  border: 1px solid var(--gold-line);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(120, 90, 40, 0.25), 0 0 30px rgba(193, 154, 74, 0.18);
  animation: banner-in 0.4s ease-out;
}
.ck-seal {
  width: 56px;
  height: 56px;
  margin: 0 auto 10px;
  font-family: var(--serif);
  font-size: 28px;
  line-height: 56px;
  color: #fffdf6;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #d4a94e, #b0833c);
  box-shadow: 0 4px 14px rgba(176, 131, 60, 0.45);
}
.ck-seal.done { background: radial-gradient(circle at 50% 38%, #c9bca0, #a89b80); box-shadow: none; }
.ck-title {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: 24px;
  letter-spacing: 4px;
  color: var(--gold);
}
.ck-sub { margin: 0 0 10px; font-size: 13px; color: var(--text-dim); }
.ck-gain { margin: 0 0 12px; font-size: 16px; color: var(--text); }
.ck-gain b { font-family: var(--serif); font-size: 26px; color: #b0633c; margin-left: 2px; }
.ck-x2 {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 11px;
  color: #fffdf6;
  background: linear-gradient(135deg, #d4a94e, #b0633c);
  border-radius: 999px;
  vertical-align: middle;
}
.ck-dots { display: flex; justify-content: center; gap: 8px; margin: 6px 0 8px; }
.ck-dot {
  width: 26px;
  height: 26px;
  font-size: 13px;
  line-height: 26px;
  color: transparent;
  border: 1px solid var(--gold-line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
}
.ck-dot.on {
  color: #fffdf6;
  border-color: transparent;
  background: linear-gradient(180deg, #d4a94e, #c19a4a);
  box-shadow: 0 2px 8px rgba(193, 154, 74, 0.4);
}
.ck-streak { margin: 0 0 6px; font-size: 14px; color: var(--text); }
.ck-streak b { color: var(--gold); font-family: var(--serif); font-size: 18px; }
.ck-next { margin: 0 0 4px; font-size: 12.5px; color: var(--text-dim); }
.ck-total { margin: 0 0 14px; font-size: 12.5px; color: var(--text-faint); }
.ck-ok {
  min-width: 140px;
  padding: 10px 24px;
  font-size: 15px;
  color: #fffdf6;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #cfa452, #b0833c);
  box-shadow: 0 4px 14px rgba(176, 131, 60, 0.35);
  cursor: pointer;
}

/* ===== 成就解锁卡（event:achievement_unlock，复用签到卡视觉语言） ===== */
.achievement-modal {
  z-index: 95; /* 与签到卡同层，盖在菜单卡之上 */
  background: rgba(245, 240, 232, 0.45);
  backdrop-filter: blur(2px);
  animation: death-fade 0.35s ease-out;
}
.ac-card {
  width: min(86%, 340px);
  padding: 26px 24px 20px;
  text-align: center;
  background: linear-gradient(180deg, rgba(255, 252, 245, 0.97), rgba(250, 243, 230, 0.97));
  border: 1px solid var(--gold-line);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(120, 90, 40, 0.25), 0 0 30px rgba(193, 154, 74, 0.18);
  animation: banner-in 0.4s ease-out;
}
.ac-seal {
  width: 56px;
  height: 56px;
  margin: 0 auto 10px;
  font-family: var(--serif);
  font-size: 28px;
  line-height: 56px;
  color: #fffdf6;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #d4a94e, #b0833c);
  box-shadow: 0 4px 14px rgba(176, 131, 60, 0.45);
}
.ac-title {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: 24px;
  letter-spacing: 4px;
  color: var(--gold);
}
.ac-name { margin: 0 0 6px; font-family: var(--serif); font-size: 20px; color: var(--text); }
.ac-desc { margin: 0 0 12px; font-size: 13px; color: var(--text-dim); }
.ac-gain { margin: 0 0 6px; font-size: 16px; color: var(--text); }
.ac-gain b { font-family: var(--serif); font-size: 26px; color: #b0633c; margin-left: 2px; }
.ac-total { margin: 0 0 14px; font-size: 12.5px; color: var(--text-faint); }
.ac-ok {
  min-width: 140px;
  padding: 10px 24px;
  font-size: 15px;
  color: #fffdf6;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #cfa452, #b0833c);
  box-shadow: 0 4px 14px rgba(176, 131, 60, 0.35);
  cursor: pointer;
}

/* ===== 社交邀约卡（event:social_invite，复用签到/成就卡视觉语言） ===== */
.social-invite-modal {
  z-index: 96; /* 略高于签到/成就卡，邀约需即时应答 */
  background: rgba(245, 240, 232, 0.45);
  backdrop-filter: blur(2px);
  animation: death-fade 0.35s ease-out;
}
.si-card {
  width: min(86%, 350px);
  padding: 26px 24px 20px;
  text-align: center;
  background: linear-gradient(180deg, rgba(255, 252, 245, 0.97), rgba(250, 243, 230, 0.97));
  border: 1px solid var(--gold-line);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(120, 90, 40, 0.25), 0 0 30px rgba(193, 154, 74, 0.18);
  animation: banner-in 0.4s ease-out;
}
.si-seal {
  width: 56px;
  height: 56px;
  margin: 0 auto 10px;
  font-family: var(--serif);
  font-size: 28px;
  line-height: 56px;
  color: #fffdf6;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #d77a8e, #b04c66);
  box-shadow: 0 4px 14px rgba(176, 76, 102, 0.4);
}
.si-title {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: 3px;
  color: var(--gold);
}
.si-prompt { margin: 0 0 10px; font-size: 14px; line-height: 1.6; color: var(--text); }
.si-expire { margin: 0 0 16px; font-size: 12px; color: var(--text-faint); }
.si-actions { display: flex; gap: 12px; justify-content: center; }
.si-accept, .si-decline {
  min-width: 110px;
  padding: 10px 20px;
  font-size: 15px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
}
.si-accept {
  color: #fffdf6;
  background: linear-gradient(135deg, #cfa452, #b0833c);
  box-shadow: 0 4px 14px rgba(176, 131, 60, 0.35);
}
.si-decline {
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--gold-line);
}

/* ===== 洞府布置面板（event:cave_decorate 触发，提示词 AI 生图，仙玉付费） ===== */
.cave-decorate-modal {
  z-index: 96;
  background: rgba(245, 240, 232, 0.45);
  backdrop-filter: blur(2px);
}
.cd-card {
  width: min(88%, 380px);
  padding: 24px 22px 18px;
  background: linear-gradient(180deg, rgba(255, 252, 245, 0.97), rgba(250, 243, 230, 0.97));
  border: 1px solid var(--gold-line);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(120, 90, 40, 0.25), 0 0 30px rgba(193, 154, 74, 0.18);
  animation: banner-in 0.4s ease-out;
}
.cd-title {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: 21px;
  letter-spacing: 3px;
  color: var(--gold);
  text-align: center;
}
.cd-faint { margin: 4px 0; font-size: 12px; color: var(--text-faint); }
.cd-desc {
  width: 100%;
  min-height: 84px;
  margin: 8px 0;
  padding: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--gold-line);
  border-radius: 10px;
  resize: vertical;
  box-sizing: border-box;
}
.cd-section { margin: 8px 0 4px; font-size: 12px; color: var(--text-faint); }
.cd-ref { display: flex; align-items: center; gap: 10px; }
.cd-ref-pick {
  display: inline-block;
  padding: 6px 14px;
  font-size: 13px;
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.6);
  border: 1px dashed var(--gold-line);
  border-radius: 8px;
  cursor: pointer;
}
.cd-ref-prev { display: flex; align-items: center; gap: 6px; }
.cd-ref-prev img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; border: 1px solid var(--gold-line); }
.cd-ref-clear { font-size: 12px; color: var(--text-dim); background: none; border: none; cursor: pointer; text-decoration: underline; }
.cd-status { min-height: 18px; margin: 4px 0; font-size: 12px; color: var(--text-dim); text-align: center; }
.cd-actions { display: flex; gap: 12px; justify-content: center; margin-top: 6px; }
.cd-cancel, .cd-go {
  min-width: 110px;
  padding: 10px 18px;
  font-size: 15px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
}
.cd-go {
  color: #fffdf6;
  background: linear-gradient(135deg, #cfa452, #b0833c);
  box-shadow: 0 4px 14px rgba(176, 131, 60, 0.35);
}
.cd-go:disabled { opacity: 0.6; cursor: default; }
.cd-cancel {
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--gold-line);
}

/* ===== 挑战小游戏浮层（修炼/赶路随机触发 event:minigame_round/end） ===== */
.minigame-modal {
  z-index: 97; /* 略高于社交邀约卡 */
  background: rgba(245, 240, 232, 0.5);
  backdrop-filter: blur(3px);
  animation: death-fade 0.3s ease-out;
}
.mg-card {
  width: min(90%, 380px);
  padding: 22px 22px 18px;
  background: linear-gradient(180deg, rgba(255, 252, 245, 0.98), rgba(250, 243, 230, 0.98));
  border: 1px solid var(--gold-line);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(120, 90, 40, 0.25), 0 0 30px rgba(193, 154, 74, 0.18);
  animation: banner-in 0.35s ease-out;
}
.mg-h {
  margin: 0 0 4px;
  text-align: center;
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: 3px;
  color: var(--gold);
}
/* —— 每轮 —— */
.mg-top { display: flex; justify-content: space-between; align-items: baseline; }
.mg-title { font-family: var(--serif); font-size: 18px; color: var(--gold); }
.mg-wave { font-size: 12px; color: var(--text-dim); }
.mg-stat { display: flex; justify-content: space-between; margin: 8px 0; font-size: 12px; color: var(--text-dim); }
.mg-hearts { color: #c45a5a; letter-spacing: 1px; }
.mg-fb { margin: 4px 0; text-align: center; font-size: 13px; }
.mg-fb.ok { color: #4a9a6a; }
.mg-fb.bad { color: #b04c4c; }
.mg-stage { min-height: 44px; margin: 10px 0; display: flex; align-items: center; justify-content: center; }
.mg-prompt { margin: 8px 0 12px; text-align: center; font-size: 15px; line-height: 1.5; color: var(--text); }
.mg-opts { display: flex; flex-direction: column; gap: 8px; }
.mg-opt {
  padding: 11px 14px;
  font-size: 15px;
  text-align: left;
  color: var(--text);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--gold-line);
  border-radius: 10px;
  cursor: pointer;
}
.mg-opt b {
  display: inline-block;
  width: 20px;
  margin-right: 6px;
  color: var(--gold);
  font-family: var(--serif);
}
.mg-opt:disabled { opacity: 0.45; cursor: default; }
.mg-timer { height: 6px; margin: 12px 0 10px; background: rgba(0, 0, 0, 0.08); border-radius: 999px; overflow: hidden; }
.mg-timer-fill { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #cfa452, #b0833c); transition: width 0.05s linear; }
.mg-timer-fill.urgent { background: linear-gradient(90deg, #d77a4c, #b04c4c); }
.mg-quit, .mg-close, .mg-ok {
  display: block;
  margin: 4px auto 0;
  padding: 8px 22px;
  font-size: 13px;
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  cursor: pointer;
}
.mg-ok {
  color: #fffdf6;
  background: linear-gradient(135deg, #cfa452, #b0833c);
  border: none;
  box-shadow: 0 4px 14px rgba(176, 131, 60, 0.35);
}

/* —— 主题演出 —— */
.mg-heatbar { position: relative; width: 100%; height: 14px; background: linear-gradient(90deg, #6a8ec0, #d9a14a, #c44); border-radius: 999px; }
.mg-target { position: absolute; top: -3px; height: 20px; border: 2px solid rgba(255,255,255,0.9); border-radius: 6px; box-shadow: 0 0 6px rgba(255,255,255,0.6); }
.mg-heat { position: absolute; top: -5px; width: 3px; height: 24px; background: #2a2a2a; box-shadow: 0 0 4px #000; }
.mg-heat-label { margin-top: 8px; text-align: center; font-size: 12px; color: var(--text-dim); }
.mg-wuxing { display: flex; align-items: center; gap: 14px; font-family: var(--serif); }
.mg-wuxing b { font-size: 32px; color: var(--gold); }
.mg-wuxing span { font-size: 18px; color: var(--text-dim); }
.mg-lanes { display: flex; gap: 18px; font-size: 30px; }
.mg-lane.blocked { filter: grayscale(0.2); }
.mg-lane.open { color: #4a9a6a; }
.mg-demon { font-size: 20px; color: var(--text); }
.mg-demon b { color: #9a4ca0; font-family: var(--serif); font-size: 26px; }

/* —— 实时类：御剑过险（躲飞石）—— */
.mg-rt { width: min(92%, 420px); }
.mg-rt-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.mg-rt-shield { font-size: 12px; color: var(--text-dim); }
.mg-rt-hearts { color: #6fb89a; letter-spacing: 1px; font-style: normal; }
/* 御剑过险·准备屏（规则说明 + 开始按钮）：反应类游戏开打前先让玩家读规则、备好手 */
.mg-rt-intro { width: min(92%, 420px); }
.mg-rule-lead { margin: 6px 0 10px; text-align: center; font-family: var(--serif); font-size: 16px; letter-spacing: 1px; color: var(--gold); }
.mg-rules { margin: 0 0 16px; padding-left: 1.25em; font-size: 14px; line-height: 1.75; color: var(--text); }
.mg-rules li { margin: 5px 0; }
.mg-rules b { color: var(--gold); }
.mg-rt-start {
  display: block;
  width: 100%;
  margin: 0 0 8px;
  padding: 12px;
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: 2px;
  color: #fffdf6;
  background: linear-gradient(135deg, #cfa452, #b0833c);
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(176, 131, 60, 0.35);
  cursor: pointer;
}
.mg-rt-start:active { transform: scale(0.98); }
.mg-rt-stage {
  position: relative;
  width: 100%;
  height: min(56vh, 520px);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--gold-line);
  background: #dCEBF5;
}
.mg-rt-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: none; }
.mg-rt-timebar { position: absolute; top: 8px; left: 10px; right: 10px; height: 6px; background: rgba(60,90,120,0.25); border-radius: 999px; overflow: hidden; }
.mg-rt-timebar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #d8b15a, #b0833c); }
.mg-rt-count { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); padding: 3px 16px; font-family: var(--serif); font-size: 21px; font-weight: 700; letter-spacing: 2px; color: #6e5a2a; background: rgba(255,250,238,0.8); border: 1px solid var(--gold-line); border-radius: 10px; box-shadow: 0 2px 8px rgba(120,90,40,0.18); text-shadow: 0 1px 4px rgba(255,250,238,0.9); pointer-events: none; }
.mg-rt-dodged { position: absolute; top: 20px; right: 14px; font-size: 12px; color: #7a6535; text-shadow: 0 1px 3px rgba(255,250,238,0.85); }
.mg-rt-hint { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; font-size: 11px; color: rgba(92,74,42,0.66); pointer-events: none; }

/* —— 结算 —— */
.mg-end { text-align: center; }
.mg-seal {
  width: 56px; height: 56px; margin: 0 auto 10px;
  font-family: var(--serif); font-size: 28px; line-height: 56px; color: #fffdf6;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #d4a94e, #b0833c);
  box-shadow: 0 4px 14px rgba(176, 131, 60, 0.45);
}
.mg-seal.fail { background: radial-gradient(circle at 50% 38%, #c0a0a0, #9a6a6a); box-shadow: none; }
.mg-end-stat { margin: 0 0 8px; font-size: 13px; color: var(--text-dim); }
.mg-rewards { margin: 0 0 16px; font-size: 15px; color: #b0633c; }

/* ===== 目标资料卡「结缘」操作区（求道侣/结拜/拜师） ===== */
.pf-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-action-btn {
  flex: 1 1 28%;
  min-width: 84px;
  padding: 9px 10px;
  font-size: 14px;
  font-family: var(--serif);
  color: #fffdf6;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #cfa452, #b0833c);
  box-shadow: 0 3px 10px rgba(176, 131, 60, 0.3);
  cursor: pointer;
}
.pf-action-btn:disabled {
  color: var(--text-faint);
  background: rgba(200, 190, 170, 0.4);
  box-shadow: none;
  cursor: not-allowed;
}

/* ===== 死亡结算浮层（败北时全屏弹出，somber 暗调，区别于明亮玻璃面板） ===== */
.death-modal {
  background: radial-gradient(circle at 50% 36%, rgba(40, 18, 18, 0.86), rgba(12, 8, 10, 0.94));
  backdrop-filter: blur(3px);
  animation: death-fade 0.5s ease-out;
}
@keyframes death-fade { from { opacity: 0; } to { opacity: 1; } }
.death-card {
  width: min(86%, 360px);
  padding: 30px 26px 24px;
  text-align: center;
  color: #e8d8c8;
  background: linear-gradient(180deg, rgba(46, 26, 26, 0.7), rgba(26, 16, 18, 0.7));
  border: 1px solid rgba(180, 90, 70, 0.5);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(150, 40, 30, 0.25);
  animation: banner-in 0.45s ease-out;
}
.death-seal {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  font-family: var(--serif);
  font-size: 30px;
  line-height: 56px;
  color: #f0d2c2;
  border: 1px solid rgba(200, 110, 90, 0.6);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(120, 40, 35, 0.7), rgba(60, 22, 22, 0.7));
}
.death-title {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-size: 26px;
  letter-spacing: 4px;
  color: #f3c9b8;
}
.death-killer { margin: 4px 0 12px; font-size: 14px; color: #c9a89a; }
.death-loss {
  list-style: none;
  margin: 10px auto;
  padding: 10px 0;
  border-top: 1px solid rgba(180, 90, 70, 0.3);
  border-bottom: 1px solid rgba(180, 90, 70, 0.3);
  font-size: 15px;
  color: #ddc4b4;
}
.death-loss li { margin: 4px 0; }
.death-loss b { color: #f08a6a; font-family: var(--serif); }
.death-loss-none { margin: 10px 0; font-size: 14px; color: #b59a8c; }
.death-respawn { margin: 12px 0 18px; font-size: 14px; color: #c9b09c; }
.death-count { color: #f0d2c2; }
.death-ok {
  width: 80%;
  padding: 12px 0;
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: 2px;
  color: #f3d8c8;
  background: linear-gradient(180deg, rgba(150, 60, 50, 0.85), rgba(110, 40, 35, 0.85));
  border: 1px solid rgba(210, 120, 100, 0.6);
  border-radius: 10px;
  cursor: pointer;
}
.death-ok:hover { background: linear-gradient(180deg, rgba(175, 75, 60, 0.95), rgba(130, 50, 42, 0.95)); }

/* ============== 快捷使用栏 QuickBar ============== */
/* 右下竖排槽位（避开左下方向键），战斗时整条隐藏（让位战斗菜单）。 */
.quickbar {
  position: absolute;
  right: max(10px, env(safe-area-inset-right));
  bottom: calc(var(--nav-clear) + 12px);
  z-index: 7;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.quick-slot {
  position: relative;
  width: 46px;
  height: 46px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--gold-line);
  border-radius: 12px;
  background: rgba(243, 236, 224, 0.86);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(60, 40, 10, 0.18);
  cursor: pointer;
}
.quick-slot img { width: 100%; height: 100%; object-fit: cover; }
/* 角标 ×：默认隐藏，桌面 hover 槽位时浮现（触屏无 hover，仍靠长按移除）。 */
.quick-clear {
  position: absolute;
  top: 0;
  right: 0;
  width: 16px;
  height: 16px;
  line-height: 14px;
  text-align: center;
  font-size: 13px;
  color: #fff;
  background: rgba(150, 40, 30, 0.92);
  border-bottom-left-radius: 8px;
  opacity: 0;
  transition: opacity 0.12s;
  pointer-events: none;
}
.quick-slot:hover .quick-clear { opacity: 1; pointer-events: auto; }
.quick-slot.empty .quick-clear { display: none; }
.quick-slot.empty {
  color: var(--gold);
  font-size: 22px;
  border-style: dashed;
  background: rgba(243, 236, 224, 0.5);
}
.quick-slot.out { filter: grayscale(1); opacity: 0.55; }
.quick-slot:active { transform: scale(0.94); }
.quick-fallback { font-size: 18px; color: var(--gold-ink); font-family: var(--serif); }
.quick-count {
  position: absolute;
  right: 2px;
  bottom: 1px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  line-height: 15px;
  text-align: center;
  font-size: 11px;
  border-radius: 8px;
  background: var(--gold);
  color: #fff;
}
.quick-count.out { background: #9a3b34; }

/* 选取器：全屏遮罩 + 居中卡片 */
.quick-picker {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(20, 14, 6, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.quick-picker-card {
  width: min(86vw, 360px);
  max-height: 70vh;
  overflow: auto;
  padding: 14px;
  background: var(--ink-1);
  border: 1px solid var(--gold-line);
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(30, 18, 4, 0.4);
}
.quick-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  color: var(--gold);
  font-weight: 600;
  font-family: var(--serif);
}
.quick-picker-close {
  border: none;
  background: transparent;
  font-size: 20px;
  color: var(--gold);
  cursor: pointer;
}
.quick-pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 10px;
}
.quick-pick-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  border: 1px solid var(--gold-line);
  border-radius: 10px;
  background: var(--ink-2);
  cursor: pointer;
}
.quick-pick-item:active { transform: scale(0.96); }
.quick-pick-item img { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; }
.quick-pick-name { font-size: 12px; color: var(--text); text-align: center; }
.quick-pick-empty { padding: 20px 0; color: #8a7d63; font-size: 13px; text-align: center; }

/* 屏幕阅读器专用：视觉隐藏、保留朗读（aria-live 播报区等无障碍用） */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}