/* =========================================================
 *  挂机方舟 · 样式  (Lost Ark 风格 深色金边)
 * ========================================================= */
:root {
  --bg: #0a0c11;
  --bg2: #10141c;
  --panel: rgba(22, 27, 37, 0.92);
  --panel2: rgba(30, 36, 49, 0.85);
  --line: rgba(201, 162, 39, 0.28);
  --line2: rgba(255, 255, 255, 0.07);
  --gold: #d9b44a;
  --gold-l: #ffd97a;
  --txt: #d7dce6;
  --txt2: #8b93a3;
  --red: #e05555;
  --green: #5ec96e;
  --blue: #4aa3ff;
  --exp: #7ad9ff;
}

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

body {
  background:
    radial-gradient(1200px 600px at 50% -10%, #1b2333 0%, transparent 60%),
    linear-gradient(180deg, #0a0c11, #05070a);
  color: var(--txt);
  font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
  font-size: 13px;
  height: 100vh;
  overflow: hidden;
  user-select: none;
}
/* 2026-08-07 修复：<button> UA 默认黑色文字（buttontext）不继承 body 浅色 → 深色背景黑字不可见。
 * 全局兜底，特定类（.btn/.preset-chip 等）自带 color 优先级更高不受影响 */
button { color: var(--txt); }

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,.3); }
::-webkit-scrollbar-thumb { background: rgba(201,162,39,.35); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(201,162,39,.6); }

/* ---------- 布局 ---------- */
#app { display: flex; flex-direction: column; height: 100vh; }

#topbar {
  height: 46px; flex: 0 0 46px;
  display: flex; align-items: center; gap: 14px;
  padding: 0 14px;
  background: linear-gradient(180deg, #171d28, #0d1118);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 12px rgba(0,0,0,.6);
}
.logo {
  flex: 0 0 auto;   /* 不被顶栏挤压（防文字溢出被资源条遮挡） */
  font-size: 16px; font-weight: 900; letter-spacing: 2px;
  background: linear-gradient(180deg, #ffe9a8, #c9a227);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  white-space: nowrap;
}
.logo small {
  font-size: 10px; letter-spacing: 1px; opacity: .8;
  /* 必须显式设色：.logo 是 color:transparent + background-clip:text 渐变文字，
   * small 继承 transparent 但自身无背景可裁剪 → 电脑上完全透明不可见（手机渲染差异才偶现） */
  color: #c9a227;
}
.res-bar { display: flex; gap: 6px; flex: 1; overflow-x: auto; }
.res {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: 4px;
  background: rgba(0,0,0,.4); border: 1px solid var(--line2);
  font-size: 11.5px; white-space: nowrap;
  flex: 0 0 auto;   /* 禁止 flex 压缩：窄屏下保持完整，超出由 res-bar 横向滚动（否则数字被挤没） */
}
.res .res-nm { font-size: 11px; }
.res b { font-weight: 700; color: #eef2f8; }

main {
  flex: 1; display: grid;
  grid-template-columns: 268px 1fr 320px;
  gap: 8px; padding: 8px; min-height: 0;
}
.col { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.col.scroll { overflow-y: auto; overflow-x: hidden; padding-right: 3px; }

/* ---------- 面板 ---------- */
.panel {
  background: var(--panel);
  border: 1px solid var(--line2);
  border-radius: 6px;
  position: relative;
}
.panel::before {
  content: ''; position: absolute; inset: 0; border-radius: 6px; pointer-events: none;
  border: 1px solid transparent;
  background: linear-gradient(135deg, rgba(201,162,39,.35), transparent 30%, transparent 70%, rgba(201,162,39,.25)) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.panel > h3 {
  font-size: 12px; font-weight: 700; letter-spacing: 1px;
  padding: 7px 10px; color: var(--gold-l);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(180deg, rgba(201,162,39,.10), transparent);
}
.panel > h3 .sub { font-size: 10px; color: var(--txt2); font-weight: 400; }
.pbody { padding: 9px 10px; }

/* ---------- 角色卡 ---------- */
.hero-card { display: flex; gap: 10px; align-items: center; }
.hero-avatar {
  width: 58px; height: 58px; border-radius: 6px; flex: 0 0 58px;
  border: 1px solid var(--line); position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 900; cursor: pointer; transition: border-color .15s;
}
.hero-avatar:hover { border-color: var(--gold); }
.hero-avatar::after {
  content: '📷'; position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.55); color: #fff; font-size: 18px; border-radius: 6px;
  opacity: 0; transition: opacity .15s; pointer-events: none;
}
.hero-avatar:hover::after { opacity: 1; }
.hero-avatar.custom::after { content: '✎'; }
.hero-avatar .avatar-img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.hero-avatar .av-clear {
  position: absolute; top: -5px; right: -5px; z-index: 3;
  width: 17px; height: 17px; line-height: 15px; text-align: center;
  background: #e05555; color: #fff; border-radius: 50%;
  font-size: 13px; font-weight: 700; cursor: pointer;
  box-shadow: 0 0 0 2px var(--bg);
}
.hero-avatar .av-clear:hover { background: #ff6b6b; }
.hero-meta { flex: 1; min-width: 0; }
.hero-name-row { display: flex; align-items: center; gap: 4px; }
.hero-name { font-size: 14px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm-edit { background: none; border: none; color: var(--txt2, #8b93a3); font-size: 11px; cursor: pointer; padding: 0 2px; line-height: 1; }
.nm-edit:hover { color: var(--gold-l, #ffd45e); }
.hero-sub { font-size: 11px; color: var(--txt2); margin-top: 2px; }
.ilvl-badge {
  display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 3px;
  background: linear-gradient(90deg, #6b5416, #c9a227);
  color: #150f00; font-weight: 900; font-size: 11px;
}

.bar { height: 12px; border-radius: 3px; background: rgba(0,0,0,.5); overflow: hidden; position: relative; border: 1px solid var(--line2); }
.bar > div { height: 100%; transition: width .18s linear; }
.bar span {
  position: absolute; inset: 0; text-align: center; font-size: 10px; line-height: 12px;
  color: #fff; text-shadow: 0 1px 2px #000; font-weight: 700;
}
.bar.hp > div { background: linear-gradient(90deg, #d94a4a, #ff8a6b); }
.bar.exp > div { background: linear-gradient(90deg, #2f7ac4, #7ad9ff); }

/* ---------- 属性表 ---------- */
.stat-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 3px 4px; font-size: 12px; border-radius: 3px;
}
/* 二级属性行：数值 + 转化效果（换行小字） */
.stat-row.attr-row { flex-wrap: wrap; }
.stat-row.attr-row .attr-eff { flex-basis: 100%; color: var(--txt2); font-size: 10.5px; padding-left: 4px; }
/* 套装行：已生效提示 + 全部属性（换行小字） */
.stat-row.set-row { flex-wrap: wrap; background: rgba(201,100,255,.06); border: 1px solid rgba(201,100,255,.25); }
.stat-row.set-row .k { color: #c964ff; }
.stat-row.set-row.off { background: rgba(255,255,255,.02); border: 1px dashed rgba(255,255,255,.12); }
.stat-row.set-row.off .k { color: var(--txt2); }
.stat-row.set-row .set-eff { flex-basis: 100%; color: var(--txt2); font-size: 10.5px; padding-left: 4px; }
.stat-row.set-row .set-eff em { font-style: normal; }
.stat-row.set-row .set-eff em.ok { color: #c964ff; font-weight: 700; }            /* 已生效档位 */
.stat-row.set-row .set-eff em.soon { color: var(--txt2); }                        /* 差 1 件：属性灰显 */
.stat-row.set-row .set-eff em.soon b { color: var(--gold-l, #ffd45e); font-weight: 700; margin-left: 2px; }   /* 还差1件提示金色 */
.stat-row.set-row .set-eff em.far { color: rgba(139,147,163,.55); }               /* 差得多：更淡 */
.stat-row:nth-child(odd) { background: rgba(255,255,255,.025); }
.stat-row .k { color: var(--txt2); }
.stat-row .k small { opacity: .6; margin-left: 3px; }
.stat-row .v { font-weight: 700; color: #eef2f8; }
.stat-row .v.up { color: var(--gold-l); }
.divider { height: 1px; background: var(--line); margin: 7px 0; opacity: .6; }

/* ---------- 刻印 ---------- */
.engr-item {
  display: flex; align-items: center; gap: 6px; padding: 4px 5px;
  border-radius: 4px; background: rgba(0,0,0,.3); margin-bottom: 4px;
  border-left: 3px solid var(--line);
}
.engr-item.lv1 { border-left-color: #5ec96e; }
.engr-item.lv2 { border-left-color: #4aa3ff; }
.engr-item.lv3 { border-left-color: #ffab2e; }
.engr-item .nm { flex: 1; font-size: 11.5px; }
.engr-item .pt { font-size: 10px; color: var(--txt2); }
.engr-item .lvb {
  font-size: 10px; font-weight: 900; padding: 0 5px; border-radius: 2px;
  background: rgba(255,255,255,.08);
}

/* ---------- 中栏战斗 ---------- */
#stage {
  flex: 1; min-height: 240px; position: relative;
  border-radius: 6px; overflow: hidden; border: 1px solid var(--line);
  box-shadow: inset 0 0 40px rgba(0,0,0,.6);
}
#stage canvas { display: block; }
/* 连刷中战斗区浮动停止按钮（2026-08-06）：右上角，随时可点 */
#autoRiftStop { position: absolute; top: 6px; right: 6px; z-index: 30; box-shadow: 0 2px 10px rgba(0,0,0,.5); }
.stage-overlay {
  position: absolute; left: 10px; bottom: 8px; right: 10px;
  display: flex; gap: 8px; align-items: flex-end; pointer-events: none;
}
/* 拾取 buff 明细：血条上方（图标 + 名字 + 剩余时间） */
.active-buffs { position: absolute; left: 0; bottom: 58px; display: flex; flex-direction: column; gap: 3px; z-index: 4; }
.ab { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: #fff; background: rgba(10,14,22,.62); border: 1px solid rgba(255,255,255,.16); border-radius: 4px; padding: 2px 8px; text-shadow: 0 1px 2px #000; white-space: nowrap; }
.ab i { font-style: normal; }
.ab .ab-img { width: 18px; height: 18px; object-fit: cover; border-radius: 3px; vertical-align: middle; }
.ab em { font-style: normal; color: var(--gold-l, #ffd45e); margin-left: 2px; }
.hp-plate { pointer-events: auto; width: 210px; }
.hp-plate .nm { font-size: 11px; margin-bottom: 2px; text-shadow: 0 1px 3px #000; }

/* ---------- 难度选择（面板标题内的下拉） ---------- */
.hd-tools { display: flex; align-items: center; gap: 5px; }
.cur-zone { font-size: 11px; font-weight: 700; color: var(--gold-l, #ffd45e); margin-right: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46%; vertical-align: middle; }
/* 战斗界面开关（动画 / 数字） */
.stage-toggles { position: absolute; top: 8px; right: 8px; z-index: 5; display: flex; gap: 6px; }
.stage-toggles .tg { display: flex; align-items: center; gap: 4px; padding: 2px 8px; font-size: 11px; color: var(--txt, #cfd6e4); background: rgba(10, 14, 22, 0.55); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 12px; cursor: pointer; user-select: none; }
.stage-toggles .tg input { accent-color: #ffd45e; margin: 0; cursor: pointer; }
.stage-toggles .tg:has(input:not(:checked)) { opacity: 0.55; }
/* 掉落记录（长期驻留战斗界面右侧，最近掉落最新在最上） */
.drop-list { position: absolute; right: 8px; top: 44px; bottom: 46px; width: 178px; z-index: 4; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; overflow: hidden; pointer-events: none; }
.drop-item { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 4px; background: rgba(10, 14, 22, 0.62); border: 1px solid rgba(255, 255, 255, 0.1); text-shadow: 0 1px 2px #000; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; animation: dropIn .25s ease; }
.drop-item.fresh { box-shadow: 0 0 8px currentColor; }
@keyframes dropIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.diff-sel {
  padding: 3px 6px; font-size: 11px; max-width: 170px;
  border-radius: 4px; cursor: pointer; font-weight: 700;
  transition: border-color .15s, box-shadow .15s, color .15s;
}
.diff-sel option { background: #161b25; color: var(--txt); font-weight: 400; }
.diff-sel.lv0 { border-color: #8ad95e; color: #8ad95e; box-shadow: 0 0 6px rgba(138,217,94,.25); }
.diff-sel.lv1 { border-color: #8ad9ff; color: #8ad9ff; box-shadow: 0 0 6px rgba(138,217,255,.25); }
.diff-sel.lv2 { border-color: #ffd45e; color: #ffd45e; box-shadow: 0 0 6px rgba(255,212,94,.3); }
.diff-sel.lv3 { border-color: #ff9a3d; color: #ff9a3d; box-shadow: 0 0 7px rgba(255,154,61,.35); }
.diff-sel.lv4 { border-color: #ff4d6d; color: #ff4d6d; box-shadow: 0 0 9px rgba(255,77,109,.45); }

/* ---------- 技能栏 ---------- */
.skills { display: flex; gap: 6px; flex-wrap: wrap; }
.skill {
  width: 52px; height: 52px; border-radius: 5px; position: relative;
  background: linear-gradient(160deg, #2a3243, #171c26);
  border: 1px solid var(--line2); overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: transform .1s, border-color .15s;
}
.skill:hover { transform: translateY(-2px); border-color: var(--gold); }
.skill.awaken { border-color: #ff4d8d; box-shadow: 0 0 10px rgba(255,77,141,.35); }
.skill .icon { font-size: 17px; }
.skill .icon img.skill-img, .sb-skill .icon img.skill-img {
  width: 30px; height: 30px; object-fit: cover; border-radius: 6px;
  vertical-align: middle; box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.skill .icon .emo, .sb-skill .icon .emo { font-size: inherit; line-height: 1; }
.skill .nm { font-size: 9px; color: var(--txt2); margin-top: 2px; text-align: center; line-height: 1.1; padding: 0 2px; }
.skill .cd {
  position: absolute; inset: 0; background: rgba(0,0,0,.66);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 900; color: #fff;
}
.skill .slv {
  position: absolute; right: 2px; top: 1px; font-size: 9px; font-weight: 900;
  color: var(--gold-l); text-shadow: 0 1px 2px #000;
}
.skill.locked { opacity: .32; filter: grayscale(1); }

/* ---------- 技能书 ---------- */
#btnSkillBook { margin-left: auto; }
.sb-head { font-size: 12px; color: var(--txt2); margin-bottom: 8px; }
.sb-head b { color: var(--gold-l); }
.sb-sub { font-size: 11px; color: var(--txt2); margin-bottom: 6px; padding-left: 4px; border-left: 2px solid var(--line2); }
.sb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.sb-grid.awaken-row { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.sb-skill {
  position: relative; border-radius: 6px; padding: 8px 6px 7px; cursor: pointer;
  background: linear-gradient(160deg, #232b39, #161b25);
  border: 1px solid var(--line2); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  transition: transform .1s, border-color .15s, box-shadow .15s;
}
.sb-skill:hover { transform: translateY(-2px); border-color: var(--gold); }
.sb-skill .icon { font-size: 20px; }
.sb-skill .nm { font-size: 10.5px; color: var(--txt); line-height: 1.15; }
.sb-skill .slv { position: absolute; right: 4px; top: 3px; font-size: 9px; font-weight: 900; color: var(--gold-l); text-shadow: 0 1px 2px #000; }
.sb-skill.active { border-color: var(--gold); box-shadow: 0 0 12px rgba(255,184,46,.4); background: linear-gradient(160deg, #3a3320, #221d12); }
.sb-skill.awaken { border-color: #ff4d8d; }
.sb-skill.awaken.active { box-shadow: 0 0 14px rgba(255,77,141,.5); }
.sb-skill.locked { opacity: .38; filter: grayscale(1); cursor: not-allowed; }
.sb-skill .tag { font-size: 9px; font-weight: 800; color: #0d0f14; background: var(--gold); border-radius: 4px; padding: 1px 5px; }
.sb-skill .tag.lock { background: #555; color: #ccc; }
.sb-skill .lvstep { display: flex; gap: 5px; align-items: center; margin-top: 1px; }
.lvbtn { font: inherit; font-size: 12px; line-height: 1; cursor: pointer; width: 22px; height: 19px;
  border-radius: 4px; padding: 0; background: linear-gradient(160deg,#252d3b,#171c26);
  border: 1px solid var(--line2); color: var(--gold-l); transition: border-color .15s, box-shadow .15s; }
.lvbtn:hover:not(.dis) { border-color: var(--gold); box-shadow: 0 0 7px rgba(255,184,46,.35); }
.lvbtn.dis { opacity: .28; cursor: not-allowed; color: var(--txt2); }

/* ---------- 预设方案条 ---------- */
.sb-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px;
  padding: 8px; background: rgba(0,0,0,.22); border: 1px solid var(--line2); border-radius: 8px; }
.sb-preset-label { font-size: 11px; color: var(--txt2); margin-right: 2px; }
.preset-chip { font: inherit; font-size: 11px; font-weight: 700; color: var(--txt); cursor: pointer;
  background: linear-gradient(160deg,#252d3b,#171c26); border: 1px solid var(--line2); border-radius: 14px;
  padding: 4px 11px; display: inline-flex; align-items: center; gap: 5px; transition: border-color .15s, box-shadow .15s; }
.preset-chip:hover { border-color: var(--gold); }
.preset-chip.on { border-color: var(--gold); box-shadow: 0 0 10px rgba(255,184,46,.4); background: linear-gradient(160deg,#3a3320,#221d12); color: var(--gold-l); }
.preset-chip.save { border-style: dashed; color: var(--gold-l); }
.preset-chip.reset { margin-left: auto; border-color: #b9444a; color: #ff8a90; }
.preset-chip.reset:hover { border-color: #ff6b72; box-shadow: 0 0 10px rgba(255,107,114,.35); }
.preset-pts { font-style: normal; font-weight: 400; font-size: 10px; color: var(--gold-l); opacity: .85;
  background: rgba(255,184,46,.12); border-radius: 8px; padding: 1px 6px; }
.preset-chip.on .preset-pts { opacity: 1; background: rgba(255,184,46,.22); }
.preset-del { font-size: 9px; font-style: normal; color: var(--txt2); background: rgba(255,255,255,.08);
  border-radius: 50%; width: 14px; height: 14px; line-height: 14px; text-align: center; }
.preset-del:hover { color: #e05555; background: rgba(224,85,85,.18); }

/* ---------- 三脚架 ---------- */
.tp-wrap { display: flex; flex-direction: column; gap: 10px; }
.tp-skill { background: rgba(0,0,0,.2); border: 1px solid var(--line2); border-radius: 8px; padding: 8px 10px; }
.tp-name { font-size: 12px; font-weight: 800; color: var(--gold-l); margin-bottom: 4px; }
.tp-aw { font-size: 9px; font-weight: 800; color: #0d0f14; background: #ff4d8d; border-radius: 4px; padding: 0 4px; margin-left: 4px; }
.tp-slots { display: flex; flex-direction: column; gap: 5px; }
/* 每个槽位一行：槽名 | 选项按钮 | 描述（描述紧贴选项右侧，省去独立侧栏） */
.tp-slot { display: grid; grid-template-columns: max-content max-content 1fr; align-items: center; gap: 8px; }
.tp-slot.locked { opacity: .5; }
.tp-slot.locked .tp-opts { filter: grayscale(.7); }
.tp-slotname { font-size: 11px; color: var(--txt2); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.tp-lock { font-size: 9px; color: #ffb84e; background: rgba(255,184,46,.12); border: 1px solid rgba(255,184,46,.4); border-radius: 4px; padding: 0 4px; }
.tp-opts { display: flex; gap: 5px; flex-wrap: wrap; }
.tp-opt { font: inherit; font-size: 10.5px; color: var(--txt); cursor: pointer;
  background: linear-gradient(160deg,#222a38,#161b25); border: 1px solid var(--line2); border-radius: 5px; padding: 3px 8px;
  transition: border-color .15s, box-shadow .15s; }
.tp-opt:hover { border-color: var(--gold); }
.tp-opt.on { border-color: #5ec96e; box-shadow: 0 0 8px rgba(94,201,110,.35); background: linear-gradient(160deg,#1f3326,#16231a); color: #8be39a; }

/* 槽位右侧的内联描述 */
.tp-slotdesc { font-size: 11px; color: var(--txt2); min-width: 0; line-height: 1.3; }
.tp-slotdesc.on { color: var(--txt); }
.tp-slotdesc.on b { color: #8be39a; }
.tp-slotdesc.off { color: #ffb84e; }
.tp-slotdesc .eff { color: #8be39a; font-style: normal; }
/* P1 三脚架自动/手动标记 + 复位按钮 */
.tp-tag { font-size: 8.5px; font-weight: 800; border-radius: 4px; padding: 0 4px; margin-left: 4px; letter-spacing: .3px; }
.tp-tag.auto { color: #0d0f14; background: #5ec96e; }
.tp-tag.manual { color: #0d0f14; background: #ffb84e; }
.tp-auto-btn { font: inherit; font-size: 9px; font-weight: 700; color: var(--txt2); background: #1c2433; border: 1px solid #2e3a52; border-radius: 5px; padding: 1px 6px; margin-left: 6px; cursor: pointer; }
.tp-auto-btn:hover { border-color: var(--gold); color: var(--gold-l); }

/* ---------- 日志 ---------- */
#log { height: 108px; overflow-y: auto; font-size: 11.5px; line-height: 1.65; padding: 6px 9px; }
#log div { border-bottom: 1px dashed rgba(255,255,255,.05); padding: 1px 0; }
.l-drop { color: var(--gold-l); } .l-boss { color: #ffab2e; }
.l-raid { color: #ff6b8d; } .l-fail { color: var(--red); }
.l-buff { color: #8ad9ff; } .l-card { color: #c964ff; }
.l-lv { color: #5ec96e; font-weight: 700; } .l-sys { color: var(--txt2); } .l-mat { color: #b06bff; font-weight: 600; }

/* ---------- 装备栏 ---------- */
.gear-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.slot {
  aspect-ratio: 1; border-radius: 5px; position: relative; cursor: pointer;
  background: rgba(0,0,0,.4); border: 1px solid var(--line2);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: transform .1s, box-shadow .15s;
  overflow: hidden;
}
.slot:hover { transform: scale(1.06); z-index: 3; }
.slot .sn { font-size: 9px; color: var(--txt2); position: absolute; top: 2px; left: 3px; }
.slot .ic { font-size: 16px; }
.slot .hn {
  position: absolute; bottom: 1px; right: 3px; font-size: 10px; font-weight: 900;
  color: var(--gold-l); text-shadow: 0 1px 2px #000;
}
/* 2026-08-09 祝福券提炼套装：装备右下角提炼按钮（紧贴 +15 上方）+ 已提炼 ✓ 标记 */
.slot .slot-extract {
  position: absolute; bottom: 1px; right: 24px;
  width: 18px; height: 14px; padding: 0; line-height: 12px;
  font-size: 11px; font-weight: 700; cursor: pointer;
  border: 1px solid #c99dff; border-radius: 3px;
  background: rgba(201,157,255,.18); color: #dcc4ff;
  text-shadow: 0 1px 1px #000;
}
.slot .slot-extract:hover {
  background: rgba(201,157,255,.38); border-color: #e4cfff;
  box-shadow: 0 0 6px rgba(201,157,255,.5);
}
.slot .slot-extracted {
  position: absolute; bottom: 1px; right: 24px;
  font-size: 11px; font-weight: 900; color: #9fe1cb;
  text-shadow: 0 1px 2px #000; pointer-events: none;
}
/* 2026-08-09 提炼副本槽位（额外格子）+ 取消按钮 */
.slot.has-extract .sn { color: #c99dff; font-weight: 700; }
.slot .extract-set-name {
  position: absolute; left: 2px; right: 2px; bottom: 2px;
  font-size: 11px; font-weight: 800;
  color: #fff;
  background: linear-gradient(rgba(80,40,140,.85), rgba(60,30,120,.85));
  border: 1px solid #c99dff;
  border-radius: 2px;
  padding: 1px 0;
  text-align: center; pointer-events: none;
  text-shadow: 0 1px 2px #000;
  white-space: nowrap; overflow: hidden;
  letter-spacing: .5px;
}
.slot .hn-extract {
  position: absolute; bottom: 1px; left: 3px;
  font-size: 10px; font-weight: 900; color: #c99dff;
  text-shadow: 0 1px 2px #000;
}
.slot .slot-extract-cancel {
  position: absolute; top: 2px; right: 3px;
  width: 14px; height: 14px; padding: 0; line-height: 12px;
  font-size: 10px; cursor: pointer;
  border: 1px solid #ff8a90; border-radius: 3px;
  background: rgba(255,138,144,.15); color: #ff8a90;
}
.slot .slot-extract-cancel:hover { background: rgba(255,138,144,.35); }
.slot.extract-slot-hint .empty-tip {
  position: absolute; bottom: 1px; left: 3px; right: 24px;
  font-size: 9px; color: #888; text-align: center;
}
.slot.empty .ic { opacity: .22; }

/* ---------- 背包 ---------- */
.bag-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.bag-pages { display: inline-flex; gap: 3px; margin: 0 6px; vertical-align: middle; }
.bag-page {
  min-width: 20px; height: 20px; line-height: 18px; text-align: center; padding: 0 5px;
  border-radius: 4px; font-size: 10.5px; font-weight: 700; color: var(--txt2); cursor: pointer;
  background: rgba(0,0,0,.4); border: 1px solid var(--line2); transition: .12s;
}
.bag-page:hover { border-color: var(--gold); color: var(--gold-l); }
.bag-page.on { background: var(--gold); color: #1a1406; border-color: var(--gold); }
.bag-tools {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  margin-bottom: 7px; padding: 5px 6px; border-radius: 4px;
  background: rgba(0,0,0,.28); border: 1px solid var(--line2); font-size: 11px;
}
/* 装备操作提示行（醒目：双击锁定功能说明） */
.bag-ops {
  margin-bottom: 6px; padding: 5px 8px; border-radius: 4px; font-size: 11.5px;
  color: #ffd97a; background: rgba(80,60,0,.22); border: 1px solid rgba(255,217,122,.35);
}
.bag-ops b { color: #fff; }
.bag-tools .bt-salvage { display: flex; align-items: center; gap: 4px; margin-left: auto; color: var(--txt2); }
.bag-tools select { padding: 2px 4px; font-size: 10.5px; }
/* 红包栏（背包面板内库存计数，不会被分解） */
.rp-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 7px; padding: 6px 8px; border-radius: 4px; font-size: 12px;
  color: #ffd1d1; background: rgba(120,20,20,.26); border: 1px solid rgba(255,94,94,.45);
}
.rp-bar b { color: #fff; font-size: 13px; }
.rp-bar .btn { margin-left: 2px; }
.bag-cell {
  aspect-ratio: 1; border-radius: 4px; cursor: pointer; position: relative;
  background: rgba(0,0,0,.35); border: 1px solid var(--line2);
  display: flex; align-items: center; justify-content: center; font-size: 14px;
  transition: transform .1s;
}
.bag-cell:hover { transform: scale(1.12); z-index: 3; }
.bag-cell .hn { position: absolute; bottom: 0; right: 2px; font-size: 9px; font-weight: 900; color: #ffd97a; }
.bag-cell .lk { position: absolute; top: 0; left: 2px; font-size: 10px; filter: drop-shadow(0 0 3px rgba(0,0,0,.9)); }
.bag-cell.locked { box-shadow: inset 0 0 0 2px rgba(255,217,122,.55); }

/* ---------- 宝石页（第 3 页背包） ---------- */
.gem-page { display: block; }   /* 覆盖 bag-grid 的 6 列网格，否则整页被挤进 1 格 */
.gem-wrap { display: flex; flex-direction: column; gap: 6px; }
.gem-sec-title { font-size: 12px; font-weight: 700; color: var(--gold-l); margin: 4px 0 2px; display: flex; align-items: baseline; gap: 8px; }
.gem-sum { font-size: 10.5px; font-weight: 400; color: var(--txt2); }
.gem-slots { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.gem-slot {
  aspect-ratio: 1; border-radius: 5px; border: 1px dashed var(--line2); background: rgba(0,0,0,.3);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; cursor: pointer; font-size: 11px;
}
.gem-slot.on { border-style: solid; border-color: var(--gold); background: rgba(255,212,94,.08); }
.gem-slot:hover { transform: scale(1.06); }
.gem-slot .gem-empty { color: var(--txt3); font-size: 10px; }
.gem-ic { font-size: 18px; line-height: 1; }
/* 宝石真实图标（2026-08-10 T3 本地化）：img 替代 emoji，固定尺寸与原 18px emoji 接近 */
.gem-img { width: 20px; height: 20px; vertical-align: -4px; object-fit: contain; }
.drop-gem { vertical-align: -3px; }
.gem-lv { font-weight: 700; font-size: 11px; }
.gem-eff { font-size: 9.5px; color: #ff9ec4; }
.gem-n { position: absolute; top: 1px; right: 3px; font-size: 9px; font-weight: 700; color: #ffd97a; background: rgba(0,0,0,.55); border-radius: 6px; padding: 0 3px; }
.gem-comb { display: flex; flex-wrap: wrap; gap: 5px; max-height: 19vh; overflow-y: auto; overflow-x: hidden; padding-right: 3px; }
.gem-grid-scroll { max-height: 44vh; overflow-y: auto; overflow-x: hidden; padding-right: 3px; border: 1px solid var(--line); border-radius: 6px; background: rgba(0,0,0,.18); padding: 5px; }
.gem-comb-btn { background: rgba(255,107,157,.12); border-color: #ff6b9d; color: #ff9ec4; }
.gem-comb-btn:hover { background: rgba(255,107,157,.24); }
.gem-comb-all { background: rgba(176,107,255,.14); border-color: #b06bff; color: #d8b4ff; margin-left: 8px; font-weight: 600; }
.gem-comb-all:hover { background: rgba(176,107,255,.28); }
.gem-hint { font-size: 10.5px; color: var(--txt3); padding: 4px 2px; }
.gem-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; }
.gem-cell {
  min-height: 50px; border-radius: 5px; border: 1px solid var(--line2); background: rgba(0,0,0,.32);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; cursor: pointer; position: relative; font-size: 10.5px; padding: 2px;
}
.gem-cell:hover { transform: scale(1.06); border-color: var(--gold); z-index: 3; }
@media (max-width: 900px) { .gem-grid { grid-template-columns: repeat(6, 1fr); } .gem-slots { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .gem-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- 按钮 ---------- */
.btn {
  padding: 5px 11px; border-radius: 4px; cursor: pointer; font-size: 12px;
  background: linear-gradient(180deg, #2b3345, #161c28);
  border: 1px solid var(--line); color: var(--gold-l);
  transition: .15s; white-space: nowrap; font-family: inherit;
}
.btn:hover { background: linear-gradient(180deg, #3b4761, #202839); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn.sm { padding: 3px 8px; font-size: 11px; }
.btn.primary { background: linear-gradient(180deg, #c9a227, #8a6b16); color: #16100a; font-weight: 700; border-color: #ffd97a; }
.btn.danger { border-color: rgba(224,85,85,.5); color: #ff8a8a; }
.btn:disabled { opacity: .38; cursor: not-allowed; }
.btn-row { display: flex; gap: 5px; flex-wrap: wrap; }

/* ---------- 标签页 ---------- */
.tabs { display: flex; gap: 3px; padding: 5px 6px 0; }
.tab {
  padding: 4px 10px; font-size: 11.5px; cursor: pointer; border-radius: 4px 4px 0 0;
  border: 1px solid transparent; border-bottom: none; color: var(--txt2);
}
.tab.on { background: rgba(201,162,39,.12); border-color: var(--line); color: var(--gold-l); }

/* ---------- 提示框 ---------- */
#tip {
  position: fixed; z-index: 999; pointer-events: none; display: none;
  width: 262px; padding: 9px 11px; border-radius: 6px;
  background: rgba(10, 13, 18, .97); border: 1px solid var(--gold);
  box-shadow: 0 8px 30px rgba(0,0,0,.8); font-size: 11.5px; line-height: 1.6;
}
#tip .t-name { font-size: 13px; font-weight: 700; margin-bottom: 2px; }
#tip .t-desc {
  color: #c3cad6; font-size: 11px; line-height: 1.55; margin: 3px 0 5px;
  padding: 4px 7px; background: rgba(255,255,255,.05); border-radius: 4px;
  border-left: 2px solid rgba(201,162,39,.45);
}
#tip .t-sub { color: var(--txt2); font-size: 10.5px; margin-bottom: 5px; }
#tip .t-line { display: flex; justify-content: space-between; }
#tip .t-aff { color: #8ad9ff; }
#tip .t-eng { color: #ffab2e; }
#tip .t-tp { margin: 1px 0; }
#tip .t-tp span { color: var(--txt2); }
#tip .t-tp b { color: #8be39a; font-weight: 700; }
#tip .t-buff { color: #ffd97a; } #tip .t-buff b { color: #ffd97a; font-weight: 700; }
#tip .t-buff b.pos { color: #5ec96e; }   /* 加成/减CD 生效时高亮绿 */
#tip .t-cd { color: #5ec96e; font-weight: 700; }   /* 扣减后实际冷却 */
#tip .t-cap { color: var(--txt2); font-weight: 400; font-size: 10px; }   /* 上限提示（如 cdr 上限 70%） */
#tip .t-tgt { color: #8ad9ff; } #tip .t-tgt b { color: #8ad9ff; font-weight: 700; }
#tip .t-tgt b.pos { color: #5ec96e; }   /* 范围/弹射/单体命中时高亮绿 */
#tip .t-set { color: #c964ff; }
#tip .t-src { font-size: 10px; color: var(--txt2); margin-top: 4px; border-top: 1px dashed var(--line2); padding-top: 4px; }
#tip .t-cmp { margin-top: 5px; padding-top: 5px; border-top: 1px dashed var(--line); }
#tip .t-cmp-t { font-size: 10.5px; color: var(--txt2); margin-bottom: 3px; }
#tip .t-diff { margin-left: 6px; font-weight: 700; font-size: 11px; }
#tip .t-diff.pos { color: #5ec96e; }
#tip .t-diff.neg { color: #e05555; }
#tip hr { border: none; border-top: 1px dashed rgba(255,255,255,.12); margin: 5px 0; }

/* ---------- 模态框 ---------- */
.modal {
  position: fixed; inset: 0; z-index: 500; display: none;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,.72); backdrop-filter: blur(3px);
}
.modal.on { display: flex; }
.modal-box {
  width: min(760px, 92vw); max-height: 86vh; overflow-y: auto;
  background: linear-gradient(180deg, #151b26, #0c1017);
  border: 1px solid var(--gold); border-radius: 8px;
  box-shadow: 0 20px 70px rgba(0,0,0,.9);
}
.modal-box h2 {
  font-size: 15px; padding: 12px 16px; color: var(--gold-l);
  border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
}
.modal-body { padding: 14px 16px; }

/* 排行榜 */
#mdRank .modal-body { max-height: 76vh; display: flex; flex-direction: column; }
.rank-name-row { display: flex; gap: 6px; margin-bottom: 10px; }
.rank-name-row input { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); color: var(--txt,#cfd6e4); border-radius: 6px; padding: 5px 8px; font-size: 12px; }
.rank-list { flex: 1; overflow-y: auto; }
.rank-row { display: flex; align-items: center; gap: 8px; padding: 5px 6px; font-size: 12px; border-radius: 4px; }
.rank-row:nth-child(odd) { background: rgba(255,255,255,.03); }
.rank-row.me { background: rgba(255,212,94,.12); border: 1px solid rgba(255,212,94,.4); }
.rank-row .rk { width: 26px; text-align: center; font-weight: 700; flex-shrink: 0; }
.rank-row .rank-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rank-row .rank-line1 { display: flex; align-items: center; gap: 8px; }
.rank-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
.rank-dot.on { background: #4ade80; box-shadow: 0 0 5px #4ade80; }
.rank-dot.off { background: #4b5563; }
.rank-row .rn2 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-row .rc { flex-shrink: 0; font-size: 11px; }
.rank-row .rank-line2 { display: flex; align-items: center; gap: 8px; font-size: 10.5px; }
.rank-row .rl { flex-shrink: 0; color: var(--gold-l,#ffd45e); white-space: nowrap; }
.rank-row .rz { flex: 1; min-width: 0; color: var(--txt2,#8b93a3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-tip { color: var(--txt2,#8b93a3); font-size: 12px; text-align: center; padding: 30px 0; }
.rank-me { margin-top: 10px; font-size: 12px; padding: 8px 10px; background: rgba(255,212,94,.08); border-radius: 6px; }

/* 词缀 & Buff 图鉴（顶栏 📖 说明） */
#mdHelp .modal-body { max-height: 74vh; }
.help-sec { margin-bottom: 14px; }
.help-sec h4 { font-size: 13px; color: var(--gold-l, #ffd45e); margin: 0 0 8px; }
.help-sec h4 em { color: var(--txt, #cfd6e4); font-style: normal; }
.help-sec h4 small { color: var(--txt2, #8b93a3); font-size: 11px; }
.help-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.help-item {
  display: flex; align-items: center; gap: 7px; padding: 6px 9px;
  background: rgba(255,255,255,.03); border: 1px solid var(--line2, #2a3242); border-radius: 6px;
  font-size: 12px;
}
.help-item i { font-style: normal; font-size: 15px; flex: none; }
.help-item b { color: var(--txt, #cfd6e4); white-space: nowrap; }
.help-item em { font-style: normal; color: var(--txt2, #8b93a3); font-size: 11px; }


/* 职业选择 */
.class-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.class-card {
  padding: 10px; border-radius: 6px; cursor: pointer; position: relative;
  background: rgba(255,255,255,.03); border: 1px solid var(--line2);
  transition: .15s;
}
.class-card:hover, .class-card.on { border-color: var(--gold); background: rgba(201,162,39,.12); transform: translateY(-2px); }
.class-card .cavatar {
  width: 46px; height: 46px; border-radius: 8px; margin: 0 auto 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 900; color: #fff; overflow: hidden;
}
.class-card .cavatar img { width: 100%; height: 100%; object-fit: contain; display: block; }
.class-card .cn { font-size: 14px; font-weight: 700; }
.class-card .ck { font-size: 10px; color: var(--txt2); }
.class-card .cd2 { font-size: 10.5px; color: var(--txt2); margin-top: 5px; line-height: 1.5; }
.class-card .tag {
  display: inline-block; font-size: 9px; padding: 1px 6px; border-radius: 8px;
  background: rgba(255,255,255,.09); margin-top: 5px; margin-right: 3px;
}

/* 转职 */
.cc-intro { font-size: 12px; color: var(--txt2); margin-bottom: 8px; line-height: 1.6; }
.cc-intro b { color: var(--gold-l); }
.cc-costrow { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.cc-cost { font-size: 12px; padding: 3px 10px; border-radius: 20px; background: rgba(255,255,255,.05); border: 1px solid var(--line2); }
.cc-cost.lack { color: #ff6b6b; border-color: #ff6b6b55; }
.cc-cost.free { color: #1a1406; background: var(--gold); border-color: var(--gold); font-weight: 700; }
.cc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.cc-card { padding: 10px 8px; border-radius: 8px; text-align: center; cursor: pointer; position: relative;
  background: rgba(255,255,255,.03); border: 1px solid var(--line2); transition: .15s; }
.cc-card:hover { transform: translateY(-2px); border-color: var(--cc, var(--gold)); }
.cc-card.picked { border-color: var(--cc, var(--gold)); background: color-mix(in srgb, var(--cc, var(--gold)) 16%, transparent); box-shadow: 0 0 0 1px var(--cc, var(--gold)); }
.cc-card.on { opacity: .55; cursor: not-allowed; border-color: var(--gold); }
.cc-av { width: 44px; height: 44px; border-radius: 8px; margin: 0 auto 6px; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 900; color: #fff; overflow: hidden; }
.cc-av img { width: 100%; height: 100%; object-fit: cover; }
.cc-name { font-size: 13px; font-weight: 700; }
.cc-line { font-size: 10px; color: var(--txt2); margin-top: 2px; }
.cc-cur { position: absolute; top: 4px; right: 4px; font-size: 9px; background: var(--gold); color: #1a1a1a; padding: 1px 5px; border-radius: 6px; font-weight: 800; }
.cc-warn { color: #ff6b6b; font-size: 12px; min-height: 16px; margin: 10px 0 4px; }
.cc-foot { text-align: right; display: flex; gap: 8px; justify-content: flex-end; align-items: center; }

/* 角色管理网格 */
.char-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.char-card {
  padding: 10px; border-radius: 6px; position: relative;
  background: rgba(255,255,255,.03); border: 1px solid var(--line2);
  transition: .15s;
}
.char-card:hover, .char-card.on { border-color: var(--gold); background: rgba(201,162,39,.12); transform: translateY(-2px); }
.char-card .cav {
  width: 46px; height: 46px; border-radius: 8px; margin: 0 auto 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 900; color: #fff; overflow: hidden;
}
.char-card .cav img { width: 100%; height: 100%; object-fit: contain; display: block; }
.char-card .cn { font-size: 14px; font-weight: 700; }
.char-card .ck { font-size: 10px; color: var(--txt2); margin-top: 2px; }
.char-card .crow { margin-top: 8px; display: flex; gap: 6px; }
.char-card .on-tag { background: var(--gold); color: #1a1206; font-weight: 700; margin: 0; }

/* 挑战列表 */
.raid-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; margin-bottom: 6px;
  border-radius: 5px; background: rgba(255,255,255,.03); border: 1px solid var(--line2);
}
.raid-row.locked { opacity: .45; }
.raid-row .rn { flex: 1; }
.raid-row .rn b { font-size: 13px; }
.raid-row .rn div { font-size: 10.5px; color: var(--txt2); margin-top: 2px; }
.raid-row .il { font-size: 11px; color: var(--gold-l); font-weight: 700; }

/* 军团长三难度选择条 */
.raid-diff-bar { display: flex; gap: 6px; margin-bottom: 8px; }
.diff-tab {
  flex: 1; padding: 5px 0; font-size: 11px; border-radius: 5px; cursor: pointer;
  border: 1px solid var(--line2); background: rgba(255,255,255,.03); color: var(--txt2);
}
.diff-tab.on { background: rgba(255,217,122,.14); border-color: var(--gold-l); color: var(--gold-l); font-weight: 700; }

/* 地区列表 */
.zone-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 6px; }
.zone-card {
  padding: 7px 9px; border-radius: 5px; cursor: pointer; font-size: 11.5px;
  background: rgba(255,255,255,.03); border: 1px solid var(--line2);
}
.zone-card:hover { border-color: var(--gold); }
.zone-card.on { background: rgba(201,162,39,.16); border-color: var(--gold); }
.zone-card.locked { opacity: .4; cursor: not-allowed; }
.zone-card b { font-size: 12px; }
.zone-card div { color: var(--txt2); font-size: 10px; margin-top: 2px; }

/* 开关 */
.sw-row { display: flex; align-items: center; justify-content: space-between; padding: 5px 2px; font-size: 12px; }
.sw {
  width: 38px; height: 20px; border-radius: 10px; background: rgba(0,0,0,.6);
  border: 1px solid var(--line2); position: relative; cursor: pointer; transition: .18s; flex: 0 0 38px;
}
.sw::after {
  content: ''; position: absolute; width: 14px; height: 14px; border-radius: 50%;
  background: var(--txt2); top: 2px; left: 2px; transition: .18s;
}
.sw.on { background: rgba(201,162,39,.4); border-color: var(--gold); }
.sw.on::after { left: 20px; background: var(--gold-l); }

select, input[type=text] {
  background: rgba(0,0,0,.45); border: 1px solid var(--line2); color: var(--txt);
  border-radius: 4px; padding: 4px 7px; font-size: 12px; font-family: inherit; outline: none;
}
select:focus, input:focus { border-color: var(--gold); }

.empty-tip { color: var(--txt2); font-size: 11px; text-align: center; padding: 12px 0; }

.t-op { font-size: 10px; color: var(--txt3, #5d6678); margin-top: 5px; padding-top: 5px; border-top: 1px dashed rgba(255,255,255,.1); }

/* 洗练区（手动 + 自动） */
.reroll-row { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.reroll-row input[type=number] {
  background: rgba(0,0,0,.5); border: 1px solid var(--line2); border-radius: 4px;
  color: var(--gold-l); padding: 3px 5px; font-size: 12px; font-weight: 700; text-align: center;
}
.reroll-row input[type=number]:focus { border-color: var(--gold); outline: none; }

/* 匠人气息进度条（强化界面） */
.art-bar {
  position: relative; height: 14px; margin-top: 6px; border-radius: 7px;
  background: rgba(0,0,0,.5); border: 1px solid var(--line2); overflow: hidden;
}
.art-bar .art-fill {
  height: 100%; border-radius: 7px;
  background: linear-gradient(90deg, #2a6fd8, #5ec9ff);
  transition: width .3s;
}
.art-bar span {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 9.5px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.8); font-weight: 700;
}

@media (max-width: 1180px) {
  main { grid-template-columns: 230px 1fr 280px; }
}
@media (max-width: 980px) {
  /* 手机/窄屏单列：flex 纵向堆叠，战斗区（中列）置顶——打开先看挂机战斗，再向下滚动看角色/装备/背包 */
  main { display: flex; flex-direction: column; overflow-y: auto; }
  main > .col { flex: none; min-height: 0; }
  main > .col:nth-child(2) { order: -1; }   /* 战斗列排第一 */
  .col.scroll { overflow: visible; }
  #stage { height: 320px; }
}

/* ---------- 装备真实图标（装备栏 / 背包共用） ---------- */
.slot .slot-img, .bag-cell .slot-img {
  width: 26px; height: 26px; object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.6));
  pointer-events: none;
}
.slot .slot-img { margin-top: 6px; }
.slot .ic, .bag-cell .ic { font-size: 16px; line-height: 1; }

/* ---------- 卡牌图鉴 ---------- */
.codex-head {
  font-size: 11px; color: var(--txt2); padding: 4px 2px 8px; line-height: 1.6;
}
.card-codex {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 5px;
  max-height: 46vh; overflow-y: auto; padding-right: 2px;
}
.card-cell {
  border-radius: 5px; padding: 5px 3px 4px; text-align: center; cursor: default;
  background: rgba(255,255,255,.028); border: 1px solid var(--line2);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  opacity: .5; transition: opacity .15s, border-color .15s, background .15s;
}
.card-cell.lit { opacity: 1; background: rgba(201,162,39,.10); border-color: rgba(201,162,39,.45); }
.card-cell.full { border-color: var(--gold); box-shadow: 0 0 6px rgba(201,162,39,.35); }
.card-ic { height: 30px; display: flex; align-items: center; justify-content: center; }
.card-ic .card-img {
  width: 30px; height: 30px; object-fit: contain;
  filter: grayscale(1) brightness(.55); opacity: .8;
}
.card-cell.lit .card-ic .card-img { filter: none; opacity: 1; }
.card-ic .emo { font-size: 22px; filter: grayscale(1) opacity(.5); }
.card-cell.lit .card-ic .emo { filter: none; }
.card-nm {
  font-size: 9.5px; color: var(--txt2); line-height: 1.2; max-height: 2.4em;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.card-cell.lit .card-nm { color: #e8ecf4; }
.card-st { font-size: 8px; letter-spacing: .5px; line-height: 1; white-space: nowrap; }
.card-st i { font-style: normal; color: var(--gold-l); text-shadow: 0 0 4px rgba(255,200,80,.5); }
.card-st b { font-weight: 400; color: rgba(255,255,255,.18); }

/* ---------- 子地图选择（大陆内 5 张练级过渡区） ---------- */
.zone-card .sub-row {
  display: flex; align-items: center; gap: 3px; margin-top: 5px; padding-top: 5px;
  border-top: 1px dashed rgba(255,255,255,.08);
}
.zone-card .sub-lb { font-size: 9px; color: var(--txt3, #5d6678); margin-right: 2px; }
.sub-dot {
  width: 16px; height: 16px; line-height: 15px; text-align: center; border-radius: 50%;
  font-size: 9px; font-weight: 700; color: var(--txt2); cursor: pointer;
  background: rgba(0,0,0,.4); border: 1px solid var(--line2);
  transition: .12s; flex: 0 0 16px;
}
.sub-dot:hover { border-color: var(--gold); color: var(--gold-l); }
.sub-dot.on { background: var(--gold); color: #1a1406; border-color: var(--gold); }
.sub-dot.lock { opacity: .4; cursor: not-allowed; border-style: dashed; }
.sub-dot.lock:hover { border-color: var(--line2); color: var(--txt2); }
.zone-card.locked .sub-dot { pointer-events: none; opacity: .35; }

/* ---------- 卡牌入口（角色面板） ---------- */
.card-entry {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 8px; padding: 5px 8px; border-radius: 4px;
  background: rgba(201,162,39,.08); border: 1px solid rgba(201,162,39,.25); font-size: 11px;
}
.card-entry span { color: var(--txt2); }
.card-entry b { font-size: 12px; }

/* ---------- 卡牌图鉴弹窗 ---------- */
#mdCards .modal-body { max-height: 72vh; }
.codex-layout { display: flex; gap: 12px; align-items: flex-start; }
.codex-left { flex: 0 0 250px; max-height: 64vh; overflow-y: auto; }
.codex-right { flex: 1 1 auto; min-width: 0; max-height: 64vh; overflow-y: auto; }
.codex-right .card-codex { max-height: none; }
.codex-big { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
.codex-big .card-cell { padding: 7px 4px 6px; }
.codex-big .card-ic { height: 38px; }
.codex-big .card-ic .card-img { width: 38px; height: 38px; }
.codex-big .card-ic .emo { font-size: 28px; }
.codex-big .card-nm { font-size: 10.5px; }
.card-detail {
  margin-top: 0; padding: 8px 10px; border-radius: 5px;
  background: rgba(0,0,0,.4); border: 1px solid rgba(201,162,39,.3);
  min-height: 0;
}
.cd-empty { color: var(--txt3, #5d6678); font-size: 11px; text-align: center; padding: 24px 0; }

/* ---------- 云存档弹窗 ---------- */
.cs-form { display: flex; flex-direction: column; gap: 10px; }
.cs-row { display: flex; align-items: center; gap: 8px; }
.cs-row label { width: 62px; font-size: 12px; color: var(--txt2); flex-shrink: 0; }
.cs-row input {
  flex: 1; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
  color: var(--txt); border-radius: 6px; padding: 7px 9px; font-size: 13px; outline: none;
}
.cs-row input:focus { border-color: var(--gold); }
.cs-actions { display: flex; gap: 8px; margin-top: 4px; }
.cs-actions .btn { flex: 1; padding: 8px 10px; font-size: 13px; }
.cs-note { font-size: 11px; color: var(--txt2); line-height: 1.8; margin-top: 10px; padding: 8px 10px; border-radius: 6px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); }
.cs-panel { display: flex; flex-direction: column; gap: 8px; }
.cs-row2 { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; }
.cs-row2 span { color: var(--txt2); }

/* 冲突选择 */
.cs-conflict { display: flex; align-items: stretch; gap: 10px; }
.cs-side { flex: 1; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 10px 12px; background: rgba(255,255,255,.03); }
.cs-side-h { font-size: 12px; font-weight: 700; margin-bottom: 6px; display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.cs-side-b { font-size: 12.5px; line-height: 1.6; }
.cs-side-t { font-size: 10.5px; color: var(--txt2); margin-top: 4px; }
.cs-vs { align-self: center; font-size: 12px; font-weight: 700; color: var(--txt2); }
.cs-tag { font-size: 10px; color: var(--txt2); font-weight: 400; }
.cs-hint { margin-top: 12px; font-size: 12px; color: var(--gold-l); text-align: center; }

/* =========================================================
 *  移动端适配（手机 / 窄屏平板）
 *  断点：≤820px 窄屏布局，≤480px 手机布局
 * ========================================================= */
@media (max-width: 820px) {
  #app { height: 100vh; height: 100dvh; }          /* 地址栏伸缩不跳动 */
  body { touch-action: manipulation; -webkit-touch-callout: none; }  /* 禁双击缩放/长按系统菜单 */
  /* 顶栏允许换行：第一行 logo+按钮，资源条独占第二行完整显示（可横滑），不再与按钮抢宽度。
   * ⚠️ 2026-08-06 修复：容器固定 height:46px 时 wrap 换行必然溢出（按钮行+资源行 ≈108px），
   *    溢出的资源条/按钮被下方 main 遮挡 → 断点下改为高度自适应（min-height 保住桌面观感） */
  #topbar { gap: 6px; padding: 0 8px; flex-wrap: wrap; overflow-x: visible; height: auto; flex: 0 0 auto; min-height: 46px; }
  #topbar .btn { flex: 0 0 auto; }
  .logo { font-size: 13px; letter-spacing: 1px; }
  .logo small { font-size: 9px; letter-spacing: 0; }   /* 窄屏不隐藏交流群，仅缩小 */
  .res-bar { flex: 1 1 100%; order: 10; max-width: 100%; overflow-x: auto; padding: 3px 0 5px; -webkit-overflow-scrolling: touch; }   /* 资源条独立一行，货币完整可见 */
  .res-bar::-webkit-scrollbar { height: 3px; }
  .drop-list { width: 120px; }
  .hp-plate { width: 160px; }
  .rank-row .rz { display: none; }                 /* 排行榜手机端隐藏区域列 */
  .bag-grid { grid-template-columns: repeat(5, 1fr); }
  /* 手机端面板内联工具区（讨伐按钮组）允许换行，区域名独占一行，避免 h3 标题挤乱 */
  .hd-tools { flex-wrap: wrap; gap: 4px; }
  .cur-zone { max-width: 100%; flex-basis: 100%; margin-right: 0; }
  /* 属性/刻印面板手机端紧凑：字号缩小、行距收紧 */
  #statList, #engrList { font-size: 10.5px; }
  #statList .t-line, #engrList .t-line { padding: 1px 0; }
  /* 技能栏手机端：格子自适应缩小 */
  .skills { gap: 3px; }
  .skills .skill { min-width: 0; flex: 1 1 15%; }
  /* 日志面板手机端限高，避免无限拉长页面 */
  #log { max-height: 160px; }
  /* 战斗 HUD 相关面板（装备栏）手机端 2 列 */
  .gear-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 480px) {
  #topbar { gap: 4px; padding: 0 6px; }
  #topbar .btn.sm { padding: 3px 5px; font-size: 10px; }
  .logo { font-size: 12px; }
  .logo small { font-size: 8px; }
  .res { font-size: 10px; padding: 2px 5px; }
  .res .res-nm { font-size: 10px; }
  main { padding: 6px; gap: 6px; }
  #stage { height: 240px; }
  .drop-list { width: 92px; }
  .stage-toggles { top: 4px; right: 4px; gap: 4px; }
  .stage-toggles .tg { padding: 1px 5px; font-size: 10px; }
  .panel > h3 { padding: 6px 8px; }
  .pbody { padding: 7px 8px; }
  .modal-box { max-height: 92dvh; }
  .gear-grid { grid-template-columns: repeat(3, 1fr); }
  .bag-grid { grid-template-columns: repeat(4, 1fr); }
  .skill { width: 46px; height: 46px; }
  .skill .icon { font-size: 14px; }
  .skill .nm { font-size: 8px; }
  .sb-skill { min-width: 0; }
  /* 480px 内：小屏手机进一步压缩 */
  .hd-tools .btn.sm { padding: 2px 5px; font-size: 10px; }
  .cur-zone { font-size: 10px; }
  #log { max-height: 120px; font-size: 10.5px; }
  .hero-card { gap: 8px; }
  .hero-avatar { width: 52px; height: 52px; }
  .res-bar { gap: 3px; }
}

/* ---------- 冒险之书（P0 兑换所 + 荣誉收藏） ---------- */
.adv-tabs { display: flex; gap: 8px; margin: 2px 0 12px; }
.adv-tab { padding: 6px 16px; border-radius: 8px 8px 0 0; background: rgba(255,255,255,.03); color: var(--txt2); cursor: pointer; font-size: 13px; border: 1px solid var(--line2); border-bottom: none; }
.adv-tab.on { background: rgba(201,162,39,.1); color: var(--txt); font-weight: 700; }
.adv-card { display: flex; gap: 12px; padding: 10px 12px; border: 1px solid var(--line2); border-radius: 10px; background: rgba(255,255,255,.03); margin-bottom: 8px; align-items: center; }
.adv-ic { font-size: 28px; width: 44px; text-align: center; flex: none; }
.adv-info { flex: 1; min-width: 0; }
.adv-name { font-weight: 700; font-size: 14px; }
.adv-lv { color: var(--gold-l); font-size: 12px; margin-left: 6px; }
.adv-desc { font-size: 12px; color: var(--txt2); margin: 2px 0 6px; }
.adv-desc b { color: #8be39a; }
.adv-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.adv-cost { font-size: 12px; color: var(--txt2); }
.adv-cost.lack { color: #ff7a7a; }
.adv-buy:disabled { opacity: .5; cursor: not-allowed; }
.adv-empty { padding: 30px 12px; text-align: center; color: var(--txt2); font-size: 13px; line-height: 1.8; }
.adv-coll-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.adv-coll-item { border: 1px solid var(--line2); border-radius: 10px; background: rgba(255,255,255,.03); padding: 10px; text-align: center; }
.adv-coll-ic { font-size: 26px; }
.adv-coll-name { font-weight: 700; font-size: 13px; margin-top: 2px; }
.adv-coll-lv { color: var(--gold-l); font-size: 11px; }
.adv-locked { margin: 8px 0; padding: 24px 16px; text-align: center; border: 1px dashed var(--line2); border-radius: 12px; background: rgba(255,255,255,.02); }
.adv-locked-ic { font-size: 36px; margin-bottom: 6px; }
.adv-locked-title { font-weight: 700; font-size: 15px; color: var(--txt); }
.adv-locked-sub { font-size: 12px; color: var(--txt2); margin: 6px 0; line-height: 1.6; }

/* ---------- 改名弹窗 ---------- */
.rn-hint { font-size: 11.5px; color: var(--txt2); line-height: 1.6; margin-bottom: 8px; }
.rn-input {
  width: 100%; box-sizing: border-box; padding: 8px 10px; font-size: 13px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18);
  color: var(--txt1); border-radius: 6px; outline: none;
}
.rn-input:focus { border-color: var(--gold); box-shadow: 0 0 8px rgba(201,162,39,.3); }

/* ---------- 排行榜分版 tab ---------- */
.rank-tabs { display: flex; gap: 6px; margin: 2px 0 8px; }
.rank-tab {
  padding: 4px 14px; border-radius: 6px; font-size: 12px; cursor: pointer;
  background: rgba(255,255,255,.04); border: 1px solid var(--line2); color: var(--txt2);
}
.rank-tab.on { background: rgba(201,162,39,.15); border-color: var(--gold); color: var(--gold-l); font-weight: 700; }
.adv-locked-prog { font-size: 13px; color: var(--gold-l); margin-top: 8px; }
.adv-locked-prog b { font-size: 15px; }

/* 冒险之书 · 成就系统 */
.ach-head { font-size: 14px; color: var(--txt); padding: 6px 2px 12px; border-bottom: 1px solid var(--line2); margin-bottom: 12px; }
.ach-head b { color: var(--gold-l); }
.ach-bonus { color: #ff7a45 !important; }
.ach-cat { font-size: 12px; color: var(--txt2); font-weight: 700; margin: 14px 2px 8px; letter-spacing: 1px; }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ach-card { border: 1px solid var(--line2); border-radius: 10px; background: rgba(255,255,255,.02); padding: 10px; text-align: center; opacity: .55; transition: opacity .2s, border-color .2s; }
.ach-card.on { opacity: 1; border-color: rgba(201,162,39,.5); background: rgba(201,162,39,.06); }
.ach-ic { font-size: 24px; }
.ach-name { font-weight: 700; font-size: 13px; margin-top: 2px; color: var(--txt); }
.ach-desc { font-size: 11px; color: var(--txt2); margin: 4px 0; line-height: 1.4; min-height: 30px; }
.ach-state { font-size: 11px; color: var(--txt2); }
.ach-card.on .ach-state { color: #4caf72; }
.ach-state.lock { color: #8a8a8a; }
.ach-prog { margin-top: 6px; }
.ach-bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.ach-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-l), #ff9a3d); border-radius: 3px; transition: width .3s ease; }
.ach-prog-txt { display: block; font-size: 10px; color: var(--txt2); margin-top: 3px; letter-spacing: .3px; }

/* ---------- P2 轮回弹窗 ---------- */
.rb-intro { font-size: 13px; color: var(--txt); margin: 2px 0 8px; }
.rb-intro b { color: var(--gold-l); font-size: 15px; }
.rb-costrow { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 12px; color: var(--txt2); margin-bottom: 12px; padding: 8px 10px; border: 1px solid var(--line2); border-radius: 8px; background: rgba(255,255,255,.02); }
.rb-cost.lack { color: #ff6b81; }
.rb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.rb-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px; border: 1px solid var(--line2); border-radius: 12px; background: rgba(255,255,255,.03); cursor: pointer; transition: .12s; text-align: center; }
.rb-card:hover { border-color: var(--gold-l); background: rgba(201,162,39,.08); }
.rb-card.on { border-color: var(--gold-l); background: rgba(201,162,39,.16); box-shadow: 0 0 0 1px var(--gold-l) inset; }
.rb-ic { font-size: 30px; }
.rb-name { font-weight: 700; font-size: 14px; }
.rb-desc { font-size: 11px; color: var(--txt2); line-height: 1.4; }
.rb-have { font-size: 10px; color: var(--gold-l); margin-top: 2px; }
.rb-keep { margin: 10px 0 4px; }
.rb-keep-t { font-size: 11px; color: var(--txt2); margin-bottom: 6px; }
.rb-keep-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.rb-keep-card { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 6px 10px; border: 1px solid var(--line2); border-radius: 10px; background: rgba(255,255,255,.03); cursor: pointer; transition: .12s; font-size: 12px; max-width: 200px; color: var(--txt); }
.rb-keep-card:hover { border-color: var(--gold-l); background: rgba(201,162,39,.08); }
.rb-keep-card.on { border-color: var(--gold-l); background: rgba(201,162,39,.16); box-shadow: 0 0 0 1px var(--gold-l) inset; }
.rb-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.rb-warn { font-size: 11px; color: #ffb86b; line-height: 1.5; flex: 1; min-width: 200px; }
.adv-coll-val { font-size: 12px; color: #8be39a; margin-top: 3px; }
.adv-coll-src { font-size: 10px; color: var(--txt2); margin-top: 4px; border-top: 1px dashed var(--line2); padding-top: 4px; }
.adv-coll-note { margin-top: 12px; font-size: 11px; color: var(--txt2); line-height: 1.7; }


/* ---------- 大秘境（模仿 D4 奈非天大秘境） ---------- */
.rift-intro { font-size: 12px; color: var(--txt2); line-height: 1.7; background: rgba(176,107,255,.08); border: 1px solid rgba(176,107,255,.25); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.rift-intro b { color: #d8b4ff; }
.rift-tiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 7px; }
.rift-tier { display: flex; flex-direction: column; gap: 2px; padding: 8px 9px; border-radius: 7px; border: 1px solid var(--line2); background: rgba(0,0,0,.28); cursor: pointer; text-align: left; color: var(--txt); transition: .12s; }
.rift-tier:hover:not(.locked) { border-color: #b06bff; transform: translateY(-1px); }
.rift-tier.sel { border-color: var(--gold); background: rgba(255,212,94,.1); }
.rift-tier.locked { opacity: .5; cursor: not-allowed; }
.rift-tier.rec { box-shadow: 0 0 0 1px rgba(94,201,110,.5) inset; }
.rift-tier b { font-size: 13px; }
.rt-sub { font-size: 9.5px; color: var(--txt3); }
.rt-best { font-size: 9.5px; color: #ffd97a; }
.rift-foot { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
/* 技能方案选择器（副本/军团长/大秘境入口） */
.scheme-pick { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--txt2); }
.scheme-pick select { background: #1b2230; color: var(--txt1); border: 1px solid var(--line2); border-radius: 6px; padding: 3px 6px; font-size: 11px; outline: none; cursor: pointer; }
.sel { background: #1b2230; color: var(--txt1); border: 1px solid var(--line2); border-radius: 6px; padding: 3px 6px; font-size: 11px; outline: none; cursor: pointer; }
.mr-top { margin-bottom: 8px; display: flex; align-items: center; }
.rift-hint { font-size: 10.5px; color: var(--txt3); }
/* 自动连刷（2026-08-06）：横幅 + 开关 */
.rift-auto-banner { display: flex; align-items: center; gap: 10px; background: linear-gradient(90deg, rgba(201,162,39,.14), rgba(201,162,39,.04)); border: 1px solid rgba(201,162,39,.45); border-radius: 8px; padding: 8px 12px; margin: 10px 0 4px; font-size: 12px; color: var(--gold-l); }
.rift-auto-banner .btn.danger { margin-left: auto; }
.rift-auto { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--txt2); margin: 8px 0 2px; cursor: pointer; user-select: none; }
.rift-auto input { accent-color: var(--gold); cursor: pointer; }

/* ---------- 秘境精华商店（大秘境弹窗内） ---------- */
.rift-shop {
  margin: 8px 0; padding: 8px 10px; border-radius: 6px;
  background: rgba(122,217,255,.05); border: 1px solid rgba(122,217,255,.22);
}
.rs-head { font-size: 11.5px; color: #7ad9ff; font-weight: 700; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rs-head b { font-size: 13px; }
.rs-tip { font-size: 10px; color: var(--txt2); font-weight: 400; }
.rs-grid { display: flex; gap: 6px; flex-wrap: wrap; }
.rs-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: 11px;
  background: rgba(10,14,22,.55); border: 1px solid rgba(122,217,255,.25); color: var(--txt);
  transition: border-color .15s, transform .1s;
}
.rs-item:hover:not(:disabled) { border-color: #7ad9ff; transform: translateY(-1px); }
.rs-item.dis, .rs-item:disabled { opacity: .38; cursor: not-allowed; }
.rs-item .rs-ic { font-size: 16px; }
.rs-item .rs-nm { font-weight: 700; }
.rs-item .rs-cost { font-size: 10px; color: #7ad9ff; }

/* ---------- 地狱狂潮（吸血鬼幸存者玩法） ---------- */
.surv-hud { margin: 4px 0 8px; padding: 8px 10px; background: rgba(10,6,20,.55);
  border: 1px solid #5e4a8a; border-radius: 8px; color: var(--txt); font-size: 12px; line-height: 1.7; }
.sv-row { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.sv-time { color: #ffd45e; font-size: 15px; font-weight: 700; letter-spacing: .5px; }
.sv-bar { position: relative; height: 12px; margin: 4px 0 2px; background: rgba(0,0,0,.4);
  border: 1px solid #3c3489; border-radius: 6px; overflow: hidden; }
.sv-bar-in { height: 100%; background: linear-gradient(90deg,#7f77dd,#ffd45e); border-radius: 6px; transition: width .3s; }
.sv-bar span { position: absolute; inset: 0; text-align: center; font-size: 10px; line-height: 12px; color: #fff; text-shadow: 0 1px 2px #000; }
.sv-wps { color: #c9b8ff; }
.sv-psv { color: #9fe1cb; }
.sv-tip { font-size: 10px; color: var(--txt3); margin-top: 3px; }
.sv-choice-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 10px; }
.sv-choice { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; text-align: left;
  padding: 14px 12px; background: rgba(20,14,38,.7); border: 1px solid var(--line2); border-radius: 10px;
  cursor: pointer; transition: border-color .15s, transform .15s; color: var(--txt); }
.sv-choice:hover { border-color: #7f77dd; transform: translateY(-2px); }
.sv-c-icon { font-size: 26px; }
.sv-c-title { font-weight: 700; font-size: 14px; color: var(--gold-l); }
.sv-c-sub { font-size: 11px; color: var(--txt2); line-height: 1.5; }
.sv-c-tag { font-size: 10px; color: #9fe1cb; }
.sv-auto { display: flex; align-items: center; gap: 6px; margin-top: 10px; cursor: pointer;
  font-size: 12px; color: var(--txt2); user-select: none; }
.sv-auto input { accent-color: #7f77dd; cursor: pointer; }
.sv-pick-btn {
  border: 2px solid var(--gold-l, #ffd45e); color: var(--gold-l, #ffd45e);
  background: rgba(8, 4, 18, 0.92);
  font-weight: 700; font-size: 18px; padding: 14px 26px;
  border-radius: 10px; letter-spacing: .5px;
  box-shadow: 0 0 24px rgba(255, 212, 94, 0.5), inset 0 0 12px rgba(255, 212, 94, 0.15);
  animation: svPickPulse 1.4s infinite;
  text-shadow: 0 1px 2px #000, 0 0 8px rgba(255, 212, 94, 0.5);
}
.sv-pick-btn:hover {
  background: rgba(20, 12, 36, 0.96); border-color: #ffe88a; color: #ffe88a;
  box-shadow: 0 0 32px rgba(255, 212, 94, 0.7), inset 0 0 16px rgba(255, 212, 94, 0.25);
  transform: translateY(-1px);
}
@keyframes svPickPulse {
  0%, 100% { box-shadow: 0 0 24px rgba(255, 212, 94, 0.5), inset 0 0 12px rgba(255, 212, 94, 0.15); }
  50%      { box-shadow: 0 0 36px rgba(255, 212, 94, 0.8), inset 0 0 18px rgba(255, 212, 94, 0.3); }
}
/* 选择强化按钮：战斗模块中上悬浮（地狱狂潮升级暂停时显示） */
.sv-pick-abs { position: absolute; top: 15%; left: 50%; transform: translateX(-50%);
  z-index: 31; }
.sv-auto-toggle { border-color: #7f77dd; color: #ffd45e; background: rgba(127,119,221,.15);
  font-size: 12px; padding: 3px 10px; margin-bottom: 6px; }
.sv-auto-toggle:hover { background: rgba(127,119,221,.3); box-shadow: 0 0 10px rgba(127,119,221,.4); }
.sv-auto-row { display: flex; align-items: center; }
.sv-revive { color: #ff8a90; font-weight: 700; font-size: 12px; text-shadow: 0 0 8px rgba(255,107,114,.5); }
.sv-cleared { color: #9fe1cb; font-size: 12px; text-shadow: 0 0 8px rgba(159,225,203,.5); }