/* 暗黑破坏神2 放置版 — 客户端 UI（上/左/中/右 四区固定，中间 Canvas 小人打怪回放）
 * 皮肤：对齐 diabloforfans.com/cube——近黑暖底 + 顶光渐变 + 细线 + 金 accent；纯色，已去掉羊皮纸/金属框/哥特地牢背景贴图
 * 颜色集中在下方 :root 与末尾「主题皮肤」段 */
:root{
  /* 底色/配色对齐 diabloforfans.com/cube：近黑暖底(#0c0b09) + 顶部椭圆暖光 + 米白字 + 金 accent；纯色，不再用任何背景贴图 */
  --bg:#0c0b09; --bg2:#131110; --bg3:#100f0c; --line:#241f18; --line2:#2f2820;
  --txt:#e7e0d2; --mute:#aca495; --gold:#c8a45c; --pri:#c8a45c;
  --hp:#8f1d1d; --mp:#1d4a8f; --sd:#4a7a2a; --ok:#5aa050; --warn:#c9a24a; --bad:#c0392b;
  --elite:#b06ad0; --boss:#ff5252;
  /* 暗黑品质配色（暗金/套装/魔法/稀有/符文之语）+ 难度色：对齐参考站 .q-* */
  --unique:#c8a05e; --set:#4fae4f; --magic:#7f9cd0; --rare:#d6c35b; --runeword:#c9b98f;
  --super:#ff6a3c; --nightmare:#a06ad0; --hell:#d0402a;
  --glow:#e6cb92;   /* 物品格/高亮发光主色 */
  /* 参考站面板/文字阶梅（供本文件皮肤段与弹层共用） */
  --panel:#131110; --panel-1:#191612; --panel-2:#1b1814; --panel-3:#221d17;
  --gold-hi:#e6cb92; --gold-txt:#d9be82; --dim:#9b9384; --ink-on-gold:#14120f;
  /* 装备格边长（用户 2026-09：方框恒定大小）：装备栏 / 背包 / 仓库三处共用一个尺，
   * 不随面板宽拉伸——格子只按这个尺寸往一行里塞几个，多出来的空间留白而不是把格子顶大 */
  --cell:72px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;color:var(--txt);overflow:hidden;
  font:14px/1.55 "Microsoft YaHei","PingFang SC",system-ui,sans-serif;
  background:
    radial-gradient(1100px 520px at 50% -180px,#191611 0%,#0c0b09 70%),
    var(--bg)}
button{font:inherit;cursor:pointer;color:var(--txt);background:#1b2135;border:1px solid var(--line);
  border-radius:6px;padding:5px 10px}
button:hover{border-color:var(--pri);background:#222a44}
button:disabled{opacity:.45;cursor:not-allowed}
button.pri{background:var(--pri);border-color:var(--pri);color:#fff}
button.pri:hover{background:#5d7dff}
button.ghs{background:transparent}
button.danger{background:transparent;border-color:#5b2a2e;color:#f08a86}
button.on{border-color:var(--gold);color:var(--gold);background:#2a2413}
input,select,textarea{background:#0a0e19;color:var(--txt);border:1px solid var(--line);border-radius:5px;
  padding:5px 7px;font:inherit;min-width:0}
input:focus,select:focus{outline:none;border-color:var(--pri)}
label{display:block;color:var(--mute);font-size:12px}
label>input,label>select{width:100%;margin-top:3px}
ul{list-style:none;margin:0;padding:0}
.hide{display:none !important}
.mute{color:var(--mute)}
.gold{color:var(--gold)}
.msg{min-height:20px;font-size:12px;color:var(--bad)}
.tip{font-size:12px;color:var(--mute);margin:8px 0 0}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}
.tabs{display:flex;gap:5px;margin-bottom:10px;flex-wrap:wrap}
.tab.on{border-color:var(--gold);color:var(--gold)}

/* ---------------- 全屏卡（登录/选角） ---------------- */
.screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(1200px 600px at 50% -10%,#1b2440,#080a11 70%),var(--bg);z-index:60;padding:16px}
.screen-box{width:400px;max-width:100%;background:linear-gradient(180deg,var(--bg2),var(--bg3));
  border:1px solid var(--line);border-radius:12px;padding:22px;box-shadow:0 16px 48px #000a}
.screen-box.wide{width:720px}
.logo{margin:0 0 4px;font-size:26px;letter-spacing:3px}
.logo span{color:var(--gold);font-size:16px;letter-spacing:1px}
.hd2{margin:0 0 12px;font-size:19px}
.card{background:#0d1120;border:1px solid var(--line);border-radius:9px;padding:12px;margin-top:12px}
.card h3{margin:0 0 8px;font-size:14px;color:var(--gold)}
.char-list li{display:flex;align-items:center;gap:10px;padding:9px 10px;margin:6px 0;
  border:1px solid var(--line);border-radius:8px;background:#0d1120}
.char-list li.cur{border-color:var(--gold)}
.char-list .cx{flex:1}
.char-list .cn{color:var(--txt);font-weight:700}

/* ---------------- 主界面骨架 ---------------- */
.game{display:flex;flex-direction:column;height:100%}
.topbar{flex:0 0 auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:7px 12px;
  background:linear-gradient(180deg,#151a2b,#0d1120);border-bottom:1px solid var(--line)}
.topbar .who{font-weight:700;margin-right:2px}
.topbar .sep{flex:1}
.topbar .kv{font-size:12px;color:var(--mute)}
.topbar .kv b{color:var(--txt)}
/* 顶栏玩家群号（可点复制，cursor:copy 与 ACT['copy-qq'] 对得上） */
.topbar .qq{color:var(--gold);border:1px solid #4a3d1c;border-radius:9px;padding:2px 8px;background:#191528;cursor:copy}
/* 角色面板的六维现值（力量/敏捷/体力/智力/统率 + 可用点）：数字全来自服务端 p.stats，本层只排版。
 * 固定三列而不是原来的 flex-wrap：六个格子排成等宽 3×2，宽屏只是每格变宽，
 * 不会像上一版那样在窄列里挤成 4+2、在宽列里挤成 5+1（落单那一个就是「乱」） */
.stat-line{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;align-items:center}
.stat-line .kv{font-size:12px;color:var(--mute);background:#0f1424;border:1px solid var(--line);border-radius:9px;
  padding:2px 8px;display:flex;align-items:center;justify-content:space-between;gap:6px}
.stat-line .kv b{color:var(--txt);font-weight:700}
.stat-line .kv.pts b{color:var(--gold)}
.main{flex:1 1 auto;display:grid;grid-template-columns:minmax(420px,1fr) 500px;
  gap:10px;padding:10px;overflow:hidden}
.col-left,.col-right,.col-mid{display:flex;flex-direction:column;gap:10px;overflow:auto;padding-right:2px}
.col-left::-webkit-scrollbar,.col-right::-webkit-scrollbar,.col-mid::-webkit-scrollbar,.pbody::-webkit-scrollbar,
.modal-box::-webkit-scrollbar,.log-list::-webkit-scrollbar{width:8px;height:8px}
.col-left::-webkit-scrollbar-thumb,.col-right::-webkit-scrollbar-thumb,.col-mid::-webkit-scrollbar-thumb,
.pbody::-webkit-scrollbar-thumb,.modal-box::-webkit-scrollbar-thumb,.log-list::-webkit-scrollbar-thumb{
  background:#332d24;border-radius:6px}
.col-left::-webkit-scrollbar-thumb:hover,.col-right::-webkit-scrollbar-thumb:hover,.col-mid::-webkit-scrollbar-thumb:hover,
.pbody::-webkit-scrollbar-thumb:hover,.modal-box::-webkit-scrollbar-thumb:hover,.log-list::-webkit-scrollbar-thumb:hover{
  background:#4c4337}

.panel{background:linear-gradient(180deg,var(--bg2),var(--bg3));border:1px solid var(--line);
  border-radius:10px;overflow:hidden;flex:0 0 auto}
.panel>h3{margin:0;padding:8px 12px;font-size:14px;color:var(--gold);
  background:#161c2e;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px}
.panel>h3 small{color:var(--mute);font-weight:400;font-size:12px;margin-left:auto}
.pbody{padding:10px 12px}
.pbody.dense{padding:8px 10px}

/* 通用小组件 */
.kv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 10px}
.kv-grid div{font-size:12.5px;color:var(--mute);display:flex;justify-content:space-between;gap:6px}
.kv-grid b{color:var(--txt);font-weight:600}
.kv-grid b.hi{color:var(--gold)}
/* 复合项（键里带「 / 」或值长过十几个字）跨整行：判据在 panels.js 角色面板那条 kvw 里。
 * 没这一句的话 class="w" 只是个空挂的名：两列格里长值折行，还会把同行短邻居一起撑高 */
.kv-grid .w{grid-column:1/-1}
.pill{display:inline-block;padding:1px 7px;border-radius:9px;font-size:11.5px;border:1px solid var(--line);color:var(--mute)}
.pill.ok{color:var(--ok);border-color:#2a4a35}
.pill.bad{color:var(--bad);border-color:#4a2a2c}
.pill.gd{color:var(--gold);border-color:#4a3d1c}
/* 顶栏三难度分段切换（普通/噩梦/地狱）：紧凑成组，当前档靠 button.on 金色高亮 */
.dseg{display:inline-flex;align-items:center;gap:2px;margin:0 4px;padding:2px 4px;border:1px solid var(--line);border-radius:8px}
.dseg .dseg-b{padding:1px 8px;font-size:12px;line-height:1.5;border-radius:6px}
.bar{position:relative;height:13px;background:#0a0d17;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.bar>i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,#8d2f2a,var(--hp))}
.bar.mp>i{background:linear-gradient(90deg,#235f8d,var(--mp))}
.bar.sd>i{background:linear-gradient(90deg,#2f6b33,var(--sd))}
.bar.xp>i{background:linear-gradient(90deg,#6b5a1c,var(--gold))}
.bar span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:11px;color:#eef2ff;text-shadow:0 1px 1px #000}
.bars3{display:grid;gap:4px;margin:6px 0}
/* 加点那五个框：一格一维、定宽五列。不能放在 .row（flex）里：number 框的固有宽度会把 label
 * 撑到 178px，窄列就排成五行、宽列排成 2+2+1（统率落单）；网格下每格等宽，列宽不够也只是格内变窄。
 * 上下转钮去掉：左列 322px 下一格只分到 58px，那对箭头要占 16px，三位数就写不下了（键盘上下仍可调） */
.allocrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.allocrow label{min-width:0;display:flex;flex-direction:column;gap:2px;font-size:11.5px}
.allocrow input{width:100%;min-width:0;margin-top:0;padding:3px 4px;text-align:center;
  font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
.allocrow input::-webkit-outer-spin-button,.allocrow input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* 成组动作键：等宽铺满一行，窄列两两换行，不会出现「两个占一行、第三个掉下一行」 */
.acts2{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:6px}
/* 数量档（果实 1 / 2 / 5 / 10 颗）：与执行键分家后自己一行，整行等宽 */
.chiprow{display:grid;grid-template-columns:repeat(auto-fit,minmax(52px,1fr));gap:5px}
.chiprow .chip{text-align:center}
/* 那四枚果实进度：与六维同一个道理——.map-info 是 flex-wrap，窄列里「合计」会孤零零掉到第三行；
 * 两列网格 + 合计跨整行，四枚等宽、最后一行永远是那句合计。
 * 选择器必须写成 .map-info.fruitgrid 而不是光 .fruitgrid：下面那条 .map-info{display:flex} 同权重且排在
 * 后面，会把 display 抢回 flex（实测：网格看着写了，四枚 pill 还是按 flex 换行，.sum 那句 grid-column 直接落空）。
 * .map-info 本行不动：地图面板也用它 */
.map-info.fruitgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.fruitgrid .sum{grid-column:1/-1}
.slotbar{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin:6px 0}
.slot{position:relative;aspect-ratio:1/1;border:1px solid var(--line);border-radius:6px;background:#0a0e19;
  display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--mute);text-align:center;
  overflow:hidden;padding:2px}
.slot.filled{color:var(--txt);border-color:#2f2820;background:#1b1814}
.slot small{position:absolute;left:2px;top:1px;font-size:10px;color:#6f7ca0}
.slot.tgt{border-color:var(--gold)}
/* 技能栏装载格（.slotbar.bars58）：每格固定 58px 对齐技能树图标板；.slot.ic 把格自身边框/底色交里面的 .skic 金属板，序号浮左上、移除号浮右上 */
.slotbar.bars58{grid-template-columns:repeat(5,58px);justify-content:start;gap:6px}
.slot.ic{width:58px;height:58px;aspect-ratio:auto;padding:0;border:0;background:none;box-shadow:none;overflow:visible}
.slot.ic:hover,.slot.ic.filled:hover{border:0;box-shadow:none}
.slot.ic small,.slot.ic>i{z-index:4}
.slot.ic>i{position:absolute;right:3px;top:2px;font-style:normal;font-size:14px;line-height:1;font-weight:700;color:#e8b8a6;cursor:pointer;text-shadow:0 1px 2px #000}
/* 等级角标：直读技能树同一份等级，浮在图标板右下角（与 skbadge 同款配色）；装备 +N 所有技能走 .e 亮金前缀 */
.slot .sklv{position:absolute;right:1px;bottom:1px;font-family:var(--mono);font-size:10px;line-height:1.35;color:var(--gold);
  background:rgba(0,0,0,.72);border:1px solid rgba(84,70,47,.6);border-radius:6px;padding:0 3px;z-index:4;pointer-events:none}
.slot .sklv .e{font-style:normal;color:var(--gold-hi);font-weight:700;margin-right:1px}
.chips{display:flex;flex-wrap:wrap;gap:4px}
.chip{border:1px solid var(--line);border-radius:14px;padding:2px 8px;font-size:12px;background:#0f1424;cursor:pointer}
.chip.on{border-color:var(--gold);color:var(--gold);background:#231f11}
.chip.dis{opacity:.4;cursor:not-allowed}
.list-sm{max-height:168px;overflow:auto;margin-top:6px}
.list-sm .it{display:flex;align-items:center;gap:6px;padding:3px 4px;border-bottom:1px dashed #1e2438;font-size:12.5px}
.list-sm .it .n{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.empty{color:var(--mute);font-size:12.5px;padding:8px 2px}
.pots{display:grid;grid-template-columns:repeat(2,1fr);gap:4px}

/* 中栏：地图投放 */
.map-info{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--mute);margin-top:7px}
.map-info b{color:var(--txt)}
.spawn-table{width:100%;border-collapse:collapse;font-size:12px;margin-top:6px}
.spawn-table th,.spawn-table td{border-bottom:1px solid #1c2336;padding:2px 4px;text-align:left;color:var(--mute)}
.spawn-table td{color:var(--txt)}
.spawn-table th{color:#6f7ca0;font-weight:400}
.opt-inline{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--txt)}
.opt-inline input[type=checkbox]{width:15px;height:15px}
.opt-inline input[type=range]{flex:1}

/* 中栏：舞台 */
.stage{position:relative;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#05070d;
  flex:0 0 auto}
#battle{display:block;width:100%;height:auto;aspect-ratio:900/420;touch-action:manipulation}
.stage-hud{position:absolute;left:0;right:0;bottom:0;display:flex;gap:14px;padding:4px 10px;font-size:12px;
  color:#aeb9d8;background:linear-gradient(180deg,transparent,#000c);pointer-events:none}
.stage-mask{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:#000a;font-size:16px;letter-spacing:2px;color:var(--gold)}

/* 战斗日志 */
.log-list{max-height:150px;overflow:auto;font-size:12.5px;padding:6px 10px}
.log-item{padding:1px 0;border-bottom:1px dashed #161c2c;color:#a7b3d2;white-space:pre-wrap}
.log-item.kill{color:#c8d3f2}.log-item.drop{color:#e8c15a}.log-item.lv{color:#7cc36b}
.log-item.warn{color:#e6a23c}.log-item.bad{color:#ef7b76}.log-item.sys{color:#7b87ab}

/* 背包/仓库/装备栏的格子表：列宽就是那个固定边长（不是 1fr，否则面板一宽格子就跟着胖）
   auto-fill 让窄屏自己减列数换行，不会把格子压扁 */
.grid8{display:grid;grid-template-columns:repeat(auto-fill,var(--cell));gap:4px;justify-content:start}
/* 动作条：面板里成排的按钮 / 勾选；td.acts 是商店表里的购买列，不能走 flex */
.acts{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:8px}
td.acts{display:table-cell;margin:0;white-space:nowrap}
td.acts button{padding:2px 8px;font-size:12px}
.grp{margin:10px 0 2px;font-size:12px;color:var(--gold);border-bottom:1px solid var(--line);padding-bottom:3px}
.item-detail{margin-top:8px;border:1px solid var(--line);border-radius:8px;background:#0d1120;padding:8px 10px}
.item-detail .t{display:flex;gap:8px;align-items:center;font-size:13px}
.item-detail .t b{color:var(--txt)}
.item-detail .t .gold{margin-left:auto}
.item-detail .s{font-size:12px;color:var(--mute);margin-top:2px;word-break:break-all}
.item-detail .s.ok{color:var(--ok)}
.item-detail .s.warn{color:var(--warn)}
/* 宝石强化：左选目标 / 右看宝石方案（弹层内两栏，窄屏自动回单栏） */
.enh-cols{display:grid;grid-template-columns:minmax(230px,320px) 1fr;gap:0 14px;align-items:start}
.enh-cols>.enh-col{min-width:0}                       /* 不写这条，长物品名会把左栏撑过 1fr 把右栏挤变形 */
.enh-cols .list-sm{max-height:260px}
.enh-cols .tbl td{vertical-align:top}
.enh-cols .tbl small{line-height:1.5}
@media (max-width:760px){.enh-cols{grid-template-columns:1fr}}
.cell{position:relative;width:var(--cell);height:var(--cell);border:1px solid var(--line);border-radius:5px;background:#0a0e19;
  font-size:10.5px;color:var(--mute);display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:7px 2px 2px;overflow:hidden;line-height:1.15}
.cell.has{background:#1b1814;color:var(--txt);border-color:#2f2820}
.cell.plus{border-color:#3d6b4a}
/* 幸运件蓝框蓝名（用户 2026-09：「幸运装备和卓越装备一样改成蓝色字体」）：与下面卓越那档同权，靠书写顺序定主次 ——
   本块刻意排在 .cell.ex 之前，所以「既幸运又卓越」的件仍是绿框绿名（用户同一条里说的「以卓越绿色为主」）。
   类名用 luck 不用 lk：.cell .lk 早被右上角那颗「锁」角标占了。 */
.cell.luck{border-color:#3f7fc4;color:#8ec8ff;box-shadow:inset 0 0 6px #1d4a6b55}
.cell.luck em{color:#8ec8ff}
.cell.luck .l2,.cell.luck .l3{color:#7fa8c9}   /* 同卓越那档的处理：那两行跟着蓝一档，但仍比名字暗，不抢「名字是蓝的」那句话 */
/* 卓越件在背包 / 仓库 / 装备栏一律绿框绿名（用户 2026-09）：比「追加≥7」那档暗绿亮一档，
   两档同时命中时（既 +7 又卓越）下面这条排在后面，按类名优先级盖掉暗绿边，不会两色打架 */
.cell.ex{border-color:#38d17c;color:#8ee0a1;box-shadow:inset 0 0 6px #1d6b3e55}
.cell.ex em{color:#8ee0a1}          /* 只改名字与边框：右上角那颗「锁」角标、左下角的追加数仍走金色，不抢它们的语义 */
.cell.set{border-color:var(--set)}
.cell.sel{outline:1px solid var(--gold)}
.cell.lock{border-color:#4a3d1c}
.cell.tosell{box-shadow:inset 0 0 0 1px var(--bad)}
.cell small{position:absolute;left:2px;top:1px;font-size:9px;color:#6f7ca0}
/* 格内三行（名称 / 攻防 / 需求）：字号由 panels.js 的 cellFont 按内容长度算好写在容器上（CSS 不会按「几个字」缩字），
 * 这里只负责换行与兜底：长名字整词换行而不是被省略号截掉，真放不下就裁掉多出来的那一行，格子尺寸绝不涨 */
.cell .ct{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:100%;
  max-height:100%;overflow:hidden}
.cell em{font-style:normal;display:block;width:100%;word-break:break-all;overflow-wrap:anywhere}
.cell .l2,.cell .l3{display:block;width:100%;color:var(--mute);word-break:break-all;overflow-wrap:anywhere}
.cell.ex .l2,.cell.ex .l3{color:#7fbf95}   /* 卓越件那两行跟着绿一档，但仍比名字暗：不抢「名字是绿的」那句话 */
.cell .lk{position:absolute;right:2px;top:0;font-size:9px;color:var(--gold);font-weight:400}
.cell i{position:absolute;right:1px;bottom:0;font-style:normal;font-size:10px;color:var(--gold)}
.drop-item{display:flex;gap:6px;align-items:center;font-size:12.5px;padding:3px 10px;border-bottom:1px dashed #161c2c}
.drop-item .tag{flex:0 0 auto;font-size:10.5px;padding:0 5px;border-radius:3px;background:#1d2438;color:#9fb0d8}
.drop-item .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 最近掉落：gear/jewel/potion/book 按类型分色（panels.js 取 indexOf+1 → g1~g4） */
.drop-item.g0 .nm{color:#cfd8f0}.drop-item.g1 .nm{color:#cfd8f0}.drop-item.g2 .nm{color:#7fd0ff}
.drop-item.g3 .nm{color:#8ee0a1}.drop-item.g4 .nm{color:#e8c15a}

/* 弹层 */
.modal{position:fixed;inset:0;background:#000b;display:flex;align-items:center;justify-content:center;z-index:80;padding:16px}
.modal-box{width:min(940px,100%);max-height:88vh;overflow:auto;background:linear-gradient(180deg,var(--bg2),var(--bg3));
  border:1px solid var(--line);border-radius:12px;padding:16px;box-shadow:0 20px 60px #000c}
.modal-box h2{margin:0 0 10px;font-size:18px;color:var(--gold);display:flex;align-items:center;gap:10px}
.modal-box h2 .x{margin-left:auto}
.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.tbl th,.tbl td{border-bottom:1px solid #1c2336;padding:4px 6px;text-align:left}
.tbl th{color:#6f7ca0;font-weight:400;background:#101523;position:sticky;top:0}
.tbl tr.me td{color:var(--gold)}
/* 商店里穿不上的装备行：置灰但仍可读（服务端仍会硬拦，这里只是提前提示） */
.tbl tr.dim td{color:#5f6b8c}
.tbl tr.dim .gold{color:#7a6a35}
/* 交易市场：商品那一格整格可点（展开/收起完整属性），鼠标指针变成手型才看得出它是个按钮；
   展开行只装一个 .item-detail，背景比常规行略深一点，扫一眼就能分清哪一行被展开了 */
.tbl td.nm{cursor:pointer}
.tbl td.nm:hover{background:#141b2e}
.tbl tr.rowinfo>td{background:#0b1020;padding:2px 6px 8px}
.tbl tr.rowinfo .item-detail{margin-top:2px;border-color:#26314e}
.off-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 12px;margin:10px 0}
.off-grid div{font-size:12.5px;color:var(--mute);display:flex;justify-content:space-between;gap:6px}
.off-grid b{color:var(--txt)}

/* 提示条 */
.toast{position:fixed;left:50%;top:14px;transform:translateX(-50%);z-index:120;max-width:80vw;
  background:#1a2136;border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:8px;
  padding:9px 14px;box-shadow:0 10px 30px #000a;font-size:13px}
.toast.bad{border-left-color:var(--bad)}
.toast.ok{border-left-color:var(--ok)}
.toast.warn{border-left-color:var(--warn)}

/* 图鉴（t10②）：装备页 = 按部位分组的大表 + 勾选屏蔽；
   列宽靠 nowrap 守住，否则一个长属性串会把「拥有/掉落地图」顶到弹层外 */
.dex-tbl{font-size:12px}
.dex-tbl td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
.dex-tbl td:nth-child(2){white-space:normal;overflow:visible;text-overflow:clip}
.dex-grp td{background:#101523;color:var(--gold);font-size:12.5px;padding:6px}
.dex-off td{color:#5f6b8c}
/* 只划名称那一列：整行划线会把复选框与面板数字一起花掉，反而看不出勾了哪个 */
.dex-off td:nth-child(2){color:#7b8798;text-decoration:line-through}
.dex-acts{float:right;display:flex;gap:6px}
.dex-bar{font-size:12.5px;color:var(--mute);margin:2px 0 8px}
.dex-bar b{color:var(--txt)}

@media (max-width:1200px){
  .main{grid-template-columns:1fr;grid-auto-rows:min-content;overflow:auto;align-content:start}
  html,body{overflow:auto}
  /* 三列必须同规则：上一版漏了 .col-mid，单列网格下中间列塌成 0 高，
     战斗画面 / 地图投放 / 战斗统计 / 战斗日志整列看不见 */
  .col-left,.col-mid,.col-right{overflow:visible;min-height:0;height:auto;position:relative}
  /* 窄视口堆叠后若仍有溢出，必须保证左侧可交互列盖在右侧展示列之上：
     否则「最近掉落」的行会盖住角色面板的按钮，elementFromPoint 命中的是掉落行，真实点击永远打不到 */
  .col-left{z-index:3}.col-mid{z-index:2}.col-right{z-index:1}
  .col-mid{min-height:360px}          /* 兜底：即使内容未撑开也保证画布可见 */
}

/* ============================================================
 * 主题皮肤（对齐 diabloforfans.com/cube：近黑暖底 + 细线 + 金 accent，纯色无贴图）——所有观感覆盖集中在这里，
 * 只改观感不改布局类名，与上方同权重选择器靠“写在后面”生效；与弹层（配装器/方块/佣兵）同一套色板。
 * ============================================================ */
/* 顶栏：纯色面板 + 底部细线 + 金色标题（去铜钉金属贴图） */
.topbar{background:linear-gradient(180deg,#131110,#100f0c);
  border-bottom:1px solid var(--line);box-shadow:0 2px 10px #0008}
.topbar .logo{color:var(--gold-txt);text-shadow:0 1px 2px #000}
.topbar .who{color:#f0e9dc;text-shadow:0 1px 2px #000}
/* 面板：纯色 + 1px 细线 + 12px 圆角（与配装器 / 方块弹层同款） */
.panel{background:var(--panel);
  border:1px solid var(--line);border-radius:12px;overflow:hidden;
  box-shadow:0 4px 14px #0007}
.panel>h3{color:var(--gold-txt);background:#100f0c;
  border-bottom:1px solid var(--line);text-shadow:none;letter-spacing:.06em}
/* 卡片/弹层/登录卡：纯色面板（去羊皮纸贴图） */
.card,.screen-box,.modal-box{background:var(--panel);
  border:1px solid var(--line);box-shadow:0 14px 40px #000b}
.screen{background:radial-gradient(1100px 520px at 50% -180px,#191611 0%,#0c0b09 70%),var(--bg)}
.logo{color:var(--gold-txt);text-shadow:0 1px 2px #000}
/* 按钮：扁平深色，主按钮金底深字，hover 金边亮金，选中深底金字 */
button{background:#191612;border:1px solid var(--line2);color:#ded5c2;
  text-shadow:none;border-radius:8px;box-shadow:none}
button:hover{border-color:var(--gold);background:var(--panel-2);color:var(--gold-hi)}
button.pri{background:var(--gold);border-color:var(--gold);color:var(--ink-on-gold)}
button.pri:hover{background:var(--gold-hi);border-color:var(--gold-hi)}
button.on,.tab.on,.chip.on{border-color:var(--gold);color:var(--gold);background:var(--panel-3)}
input,select,textarea{background:#0d0b09;color:var(--txt);border:1px solid var(--line2)}
input:focus,select:focus{border-color:var(--gold)}
/* 血/蓝/体力/经验条：保留 .bar 布局与液体渐变（这些是状态色，非贴图） */
.bar{background:#0d0b09;border-color:var(--line2)}
.bar>i{background:linear-gradient(180deg,#c0453a,#8f1d1d 60%,#5a0f0f)}
.bar.mp>i{background:linear-gradient(180deg,#3f7fc4,#1d4a8f 60%,#0f2c5a)}
.bar.sd>i{background:linear-gradient(180deg,#6fae4a,#4a7a2a 60%,#274617)}
.bar.xp>i{background:linear-gradient(180deg,#f0d06a,#c8a45c 60%,#7a5f1e)}
/* 装备/背包格：深色内嵌凹槽（去 radial 纹理，改扁平 + 细线，保留悬停/选中发光反馈） */
.slot,.cell{background:linear-gradient(180deg,#14110d,#0b0a08);border:1px solid var(--line2);border-radius:6px;
  box-shadow:inset 0 2px 5px #000d;transition:box-shadow .12s,border-color .12s}
.slot.filled,.cell.has{background:#1b1814}
.slot:hover,.cell:hover{border-color:var(--gold);box-shadow:inset 0 2px 5px #000d,0 0 10px #c8a45c55}
.slot.tgt,.cell.sel{border-color:var(--gold);box-shadow:inset 0 2px 5px #000d,0 0 12px #c8a45c88}
/* 战斗舞台：纯色底（去哥特地牢贴图） */
.stage{border-color:var(--line);background:#0c0b09;
  box-shadow:inset 0 0 0 1px #000}
#battle{background:transparent}
/* 补齐：基础段里残留的冷蓝/旧棕底——这些基础规则特异度不低，必须在皮肤段用同名且靠后重写才能盖住 */
.char-list li{background:var(--panel);border-color:var(--line2)}
.char-list li.cur{border-color:var(--gold)}
.stat-line .kv{background:var(--panel);border-color:var(--line2)}
.chip{background:var(--panel);border-color:var(--line2)}
.item-detail{background:var(--panel);border-color:var(--line2)}
.tbl th{background:#100f0c;color:var(--mute)}
.tbl tr.rowinfo>td{background:#0d0b09}
.topbar .qq{background:var(--panel-3);border-color:#54462f;color:var(--gold-txt)}
.toast{background:var(--panel-2);border-color:var(--line2)}
.log-item{color:#cfc6b2}
.log-item.drop{color:#e6cb92}.log-item.lv{color:#8fce6b}.log-item.sys{color:var(--dim)}
.drop-item .tag{background:var(--panel-3);color:var(--mute)}
.spawn-table th{color:var(--mute)}
.spawn-table th,.spawn-table td{border-bottom-color:var(--line)}
.list-sm .it{border-bottom-color:var(--line)}
.dex-grp td{background:var(--panel-1)}
.tbl td.nm:hover{background:var(--panel-2)}

/* ===== 暗黑2 三页技能树（展示形式：节点按前置分层，每排一行） ===== */
.d2tree{max-height:328px;overflow:auto;padding:4px 2px}
.d2row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 0 10px}
.d2node{width:108px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;
  border:1px solid var(--line);border-radius:6px;background:#151210;text-align:center}
.d2node .ic{width:30px;height:30px}
.d2node b{font-size:12px;font-weight:600;line-height:1.25}
.d2node small{font-size:10px;color:var(--mute);line-height:1.3}
.d2node button{font-size:11px;padding:1px 10px;margin-top:2px}
.d2node.on{border-color:var(--gold);box-shadow:0 0 8px rgba(230,203,146,.35)}
.d2node.lock{opacity:.55;filter:saturate(.35)}
/* 三树并排（配装器 sheet 风）：每树一列横向排开；列自然长高，整块交给弹层 modal-box 纵向滚动（不再套一层列内滚动） */
.d2sheet.d2trees{display:flex;gap:10px;align-items:flex-start;overflow-x:auto;padding:2px}
.d2sheet.d2trees .d2tree{flex:1 1 0;min-width:158px;border:1px solid #241f18;border-radius:8px;
  padding:6px 8px;background:rgba(19,17,16,.4);border-bottom:1px solid #241f18;max-height:none;overflow:visible}
.d2sheet.d2trees .d2tree .dlabel{text-align:center;margin-bottom:8px}

/* ===== D2 技能树弹层（顶栏「技能」）：仿 diabloforfans.com/skills —— 三树纵向 + 前置连线 + 金属图标板 ===== */
.skmodal .sktabs{margin-bottom:6px}
.sktrees{display:flex;flex-direction:column;gap:14px}
.sktree{border:1px solid var(--line);border-radius:10px;padding:10px 12px 12px;background:radial-gradient(120% 100% at 50% 0,#191611,#0c0b09)}
.sktree-h{display:flex;align-items:center;justify-content:space-between;font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--gold);margin-bottom:12px;padding-bottom:6px;border-bottom:1px solid rgba(84,70,47,.35)}
.sktree-h>b{font-size:14px;color:var(--glow)}
.sktree-body{position:relative;max-width:520px;margin:0 auto}
/* 前置连线覆盖层：尺寸/ viewBox 由 main.js layoutSkillLines() 按网格真实像素设置（width/height 属性），
   这里只把它绝对定位到网格左上角；不再用 inset/width:100% 拉伸，避免宽屏下盒子与网格不一致而错位 */
.sklines{position:absolute;left:0;top:0;z-index:0;pointer-events:none;overflow:visible;display:block}
.sklines path{fill:none;stroke:#54462f;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;opacity:.8}
/* 十宫格：3 列 × 4 行等高、gap:0 —— 这样格中心恰为 (col+0.5)/3、(row+0.5)/4，连线才能对准图标 */
.skgrid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,124px);gap:0;width:100%}
.sknode{position:relative;height:100%;display:flex;align-items:center;justify-content:center;cursor:pointer}
/* 金属图标板：可用=青铜描边，锁定=冷钢；图标坐在板内 */
.sknode .skic,.slot .skic{position:relative;display:inline-block;width:58px;height:58px;flex:0 0 auto;border-radius:5px;
  background:linear-gradient(158deg,#241f18,#14110d);border:2px solid #54462f;
  box-shadow:inset 0 0 0 1px #100c07,inset 0 2px 6px rgba(255,220,150,.12),0 3px 7px rgba(0,0,0,.55);
  transition:box-shadow .12s,transform .08s,border-color .12s}
.sknode .skic>.ic,.slot .skic>.ic{position:absolute;inset:4px;width:calc(100% - 8px);height:calc(100% - 8px);border-radius:3px}
/* 真图标：显式锁死尺寸（不能靠 width:auto —— 下载回来的 PNG 原图很大，auto 会按内在尺寸撑破 58px 板与邻居重叠） */
.sknode .skic>img,.slot .skic>img{position:absolute;inset:4px;width:calc(100% - 8px);height:calc(100% - 8px);object-fit:contain;border-radius:3px;image-rendering:auto}
/* 名称/等级门槛绝对贴在格子底部，不参与图标居中，保证图标中心 = 格中心 */
.sknode .skfoot{position:absolute;left:2px;right:2px;bottom:2px;text-align:center;line-height:1.25}
.sknode .sknm{display:block;font-size:11.5px;font-weight:600;color:var(--txt)}
.sknode .skreq{display:block;font-size:10px;color:var(--mute)}
/* 角标 n/max：现在是 .skic 的子元素，钉在图标板右上角（与参考站同款） */
.sknode .skbadge{position:absolute;right:-6px;top:-7px;font-family:var(--mono);font-size:10.5px;color:var(--gold);
  background:rgba(0,0,0,.72);border:1px solid rgba(84,70,47,.6);border-radius:6px;padding:0 4px;line-height:1.5;z-index:2}
/* 角标里的「+N」：装备「+N 所有技能」的额外等级，亮金加粗以区别于技能树本身点数 */
.sknode .skbadge .skb-e{font-style:normal;color:var(--gold-hi);font-weight:700;margin-right:2px}
/* 金色 ◆：标记「被别的技当前置」的节点，钉在图标板左上角 */
.sknode .skdiamond{position:absolute;left:-7px;top:-8px;font-size:13px;color:var(--glow);text-shadow:0 0 5px rgba(0,0,0,.9);pointer-events:none;z-index:2}
/* ---- 富悬停说明：格子里的 .sktipbox 只作数据源（隐藏），main.js 悬停时克隆到 body 层 #sktip-pop ---- */
.sknode .sktipbox{display:none}
#sktip-pop{position:fixed;left:0;top:0;z-index:9999;max-width:320px;min-width:210px;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,14,7,.98),rgba(9,6,3,.98));border:1px solid #2f2820;border-radius:8px;
  box-shadow:0 10px 30px #000c,inset 0 0 0 1px rgba(84,70,47,.25);padding:9px 11px;color:var(--txt);font-size:12.5px;line-height:1.5}
#sktip-pop .sktipx{display:flex;flex-direction:column;gap:5px}
#sktip-pop .skt-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;border-bottom:1px solid rgba(84,70,47,.35);padding-bottom:4px}
#sktip-pop .skt-h b{font-size:14.5px;color:var(--gold);font-weight:700}
#sktip-pop .skt-tag{font-family:var(--mono);font-size:10.5px;color:var(--mute);white-space:nowrap}
#sktip-pop .skt-meta{font-family:var(--mono);font-size:11.5px;color:#aca495}
#sktip-pop .skt-eff{display:flex;flex-direction:column;gap:1px}
#sktip-pop .skt-eff p{margin:0;color:#9ec7ea}
#sktip-pop .skt-desc{color:#ded5c2;font-size:12px;border-top:1px solid rgba(84,70,47,.25);padding-top:5px}
#sktip-pop .skt-syn{border-top:1px solid rgba(84,70,47,.25);padding-top:5px}
#sktip-pop .skt-syn-h{color:var(--gold);font-size:11.5px;margin-bottom:2px}
#sktip-pop .skt-syn p{margin:0;font-size:11.5px;color:#4fae4f}
#sktip-pop .skt-pre{font-size:11px;color:#d07f7f}
#sktip-pop .skt-foot{font-family:var(--mono);font-size:10.5px;color:var(--mute);border-top:1px solid rgba(84,70,47,.25);padding-top:4px}
/* 状态：可投点悬停放大发光；已投=金环；满级=绿环；锁定=冷钢去饱和 */
.sknode.can:hover .skic,.sknode:hover .skic{transform:translateY(-2px);box-shadow:inset 0 0 0 1px #100c07,0 0 12px rgba(230,203,146,.5)}
.sknode.can .skic{border-color:#6b5a3a}
.sknode.on .skic{border-color:var(--gold);box-shadow:inset 0 0 0 1px #100c07,0 0 9px rgba(200,164,92,.55)}
.sknode.on .skbadge{color:#fff;background:var(--pri)}
.sknode.maxed .skic{border-color:var(--ok);box-shadow:inset 0 0 0 1px #100c07,0 0 9px rgba(90,180,90,.5)}
.sknode.maxed .skbadge{color:#eaffea;background:#2f5d2f}
.sknode.lock{cursor:not-allowed}
.sknode.lock .skic{background:linear-gradient(158deg,#2b2f34,#141719);border-color:#3c434a;filter:saturate(.35) brightness(.82);opacity:.72}
.sknode.lock .sknm{color:var(--mute)}
.skdetail{font-size:11px;color:var(--mute);margin-top:6px;line-height:1.5}

/* ============================================================
 * 配装器皮肤段（样式数值取自自有站 diabloforfans.com/build 实测：
 * 10×4 背包格 / 纸娃娃 named-grid / 属性行分隔线 / mono 数字列）
 * 类名全部新起（.invgrid/.dslot/.statrow…），不与旧 .cell/.slot 互抢；
 * 想撤掉这一段回到旧观感，整段删除即可。
 * ============================================================ */
:root{--mono:"Consolas","IBM Plex Mono",ui-monospace,monospace}

/* ---- 物品栏：10 列 × N 行方格（配装器 #b-inv.invgrid 同款） ---- */
.invgrid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));grid-auto-rows:auto;gap:3px;padding:4px 2px 8px}
.invcell{position:relative;aspect-ratio:1/1;border:1px solid #2f2820;border-radius:4px;
  background:linear-gradient(180deg,#14110d,#0b0a08);box-shadow:inset 0 2px 5px #000d,inset 0 1px 0 #ffffff0f;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:2px;overflow:hidden;
  font-size:9.5px;line-height:1.15;color:#9b9384;cursor:pointer;transition:border-color .12s,background .12s}
.invcell:hover{border-color:#3d3427;background:#1b1814}
.invcell .icw{width:62%;height:62%}
.invcell .nm{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}
.invcell .qty{position:absolute;right:2px;bottom:0;font-family:var(--mono);font-size:9.5px;color:var(--gold)}
.invcell .lk{position:absolute;right:2px;top:-1px;font-size:9px;color:var(--gold);font-weight:400}
/* 镶孔角标（装备显示孔洞）：格子左下一排小圆点，空孔描边、已镶符文的点亮 */
.invcell .sk,.dslot .sk{position:absolute;left:2px;bottom:1px;display:flex;gap:1px;align-items:center;line-height:0}
.sk .sok{width:5px;height:5px;border-radius:50%;box-sizing:border-box;border:1px solid #6f5c38;background:#0b0a08}
.sk .sok.f{background:#e8c66a;border-color:#f0d080}
.invcell.sel{border-color:rgb(84,70,47);background:#17140f;box-shadow:inset 0 2px 5px #000d,0 0 8px #d8b24a55}
.invcell.tosell{box-shadow:inset 0 0 0 1px var(--bad)}
/* 品质描边（对表配装器：暗金暖铜 / 套装绿 / 符文之语骨白 / 卓越走魔法蓝） */
.invcell.q-unique,.dslot.q-unique{border-color:#c8a05e}
.invcell.q-set,.dslot.q-set{border-color:#4fae4f}
.invcell.q-runeword,.dslot.q-runeword{border-color:#b09a6a}
.invcell.q-magic,.dslot.q-magic{border-color:#7f9cd0}
.invcell.q-magic .nm,.dslot.q-magic .nm{color:#9db8e8}
/* 金币行（D2 背包底部那条） */
.goldline{display:flex;align-items:center;gap:6px;padding:5px 10px;margin-top:2px;border:1px solid #2f2820;
  border-radius:4px;background:#0e0c08;font-family:var(--mono);font-size:13px;color:#aca495}
.goldline b{color:#e6cb92;font-weight:400}

/* ---- 装备纸娃娃（配装器 #b-slots.doll 同款 named-grid）
 * 用户 2026-09：把本服多出的护腿(pants)挖到铠甲正下方（对齐暗黑「腰带」位，本服腰带就落 pants 槽）；
 * 部位显示名（腰带/手套…）统一由导出数据 slotCn 驱动，不在前端另盖；双手/翅膀/宠物等塞不进模板的仍走 .doll-more 小格 ---- */
.doll{display:grid;gap:8px;padding:8px 4px;
  grid-template-columns:1.2fr .78fr 1.05fr .78fr 1.2fr;
  grid-template-rows:118px 118px 112px;
  grid-template-areas:"wp .  hm am sh" "wp .  ar .  sh" "gl r1 pc r2 bt"}
.a-weapon{grid-area:wp}.a-helm{grid-area:hm}.a-necklace{grid-area:am}.a-shield{grid-area:sh}
.a-armor{grid-area:ar}.a-pants{grid-area:pc}.a-gloves{grid-area:gl}.a-ring1{grid-area:r1}
.a-belt{grid-area:bl}.a-ring2{grid-area:r2}.a-boots{grid-area:bt}
.dslot{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-width:0;padding:5px 4px;border:1px solid #565048;border-radius:3px;
  background:linear-gradient(180deg,#0f0d0b,#191713);box-shadow:inset 0 2px 5px #000d,inset 0 1px 0 #ffffff12;
  cursor:pointer;overflow:hidden;transition:border-color .12s,box-shadow .12s;text-align:center}
.dslot:hover{border-color:#8d7d68}
.dslot.filled{border-color:rgb(138,111,62)}
.dslot.filled:hover{border-color:var(--gold)}
.dslot .icw{width:42px;height:42px}
.dslot .cap{font-size:11px;color:#a79c8b;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dslot .cap.empty{color:#9b9384}
.dslot .nm{font-size:10.5px;color:var(--txt);width:100%;overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-all}
.dslot.sel{box-shadow:inset 0 2px 5px #000d,0 0 9px #d8b24a66;border-color:var(--gold)}
.dslot .lk{position:absolute;right:2px;top:-1px;font-size:9px;color:var(--gold);font-weight:400}
/* 纸娃娃塞不下的部位（双手/翅膀/宠物）走这里一行小格 */
.doll-more{display:flex;gap:8px;justify-content:center;padding:2px 4px 8px}
.doll-more .dslot{width:62px;height:62px;padding:4px}
.doll-more .dslot .icw{width:30px;height:30px}
.doll-more .dslot .cap,.doll-more .dslot .nm{font-size:9.5px;-webkit-line-clamp:1}

/* ---- 角色面板：属性行（配装器 .allocrow/.basestat 同款：名称/步进/装备加成/总计） ---- */
.statrow{display:grid;grid-template-columns:46px auto 1fr 46px;gap:8px;align-items:center;
  padding:5px 2px;border-top:1px solid #2f2820;font-size:13.5px}
.statrow .an{color:#ded5c2}
.statrow .eqv{font-family:var(--mono);font-size:12.5px;color:#4fae4f;text-align:right}
.statrow .at{font-family:var(--mono);font-size:14.5px;color:#e6cb92;text-align:right}
.astep{display:flex;gap:6px;align-items:center;justify-content:center}
.astep button{width:24px;height:24px;line-height:1;padding:0;border-radius:6px;font-size:15px}
.astep input{width:44px;height:24px;text-align:center;padding:0 2px;font-family:var(--mono);font-size:13px}
.d2sheet .dsec{padding:8px 2px;border-bottom:1px solid #241f18}
.d2sheet .dlabel{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:#9b9384;margin-bottom:6px}
.basestat{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding:2.5px 0;color:#aca495}
.basestat b{color:#ded5c2;font-family:var(--mono);font-weight:400;text-align:right}
.basestat b.pos{color:#4fae4f}.basestat b.neg{color:#d07f7f}.basestat b.hi{color:#e6cb92}
.allochead{display:flex;justify-content:space-between;align-items:baseline;padding:2px;font-size:13px;color:#aca495}
.allochead b{font-family:var(--mono);font-size:15px;color:#e6cb92}
.allochead b.neg{color:#d07f7f}

/* ---- 赫拉迪克方块（弹层）：分类 chips + 配方卡（输入→输出，配装器 .cube 卡风） ---- */
.cube-cats{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.cube-list{max-height:58vh;overflow:auto;padding-right:4px}
.cube-r{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;border:1px solid #2f2820;border-radius:8px;
  padding:7px 10px;margin:0 0 6px;background:#131110;font-size:12.5px;color:#ded5c2}
.cube-r .m{display:flex;align-items:center;gap:4px;white-space:nowrap}
.cube-r .m .ic{width:20px;height:20px}
.cube-r .m .n{color:#cfc6b2}
.cube-r .ar{color:#9b9384;font-family:var(--mono)}
.cube-r .out{color:#e6cb92}
.cube-r.can{border-color:rgb(84,70,47)}
.cube-r.na{opacity:.55}
.cube-r .why{font-size:11px;color:#9b9384}
.cube-r button{padding:1px 10px;font-size:12px}
/* ---- 符文之语 · 逐孔镶嵌工作台（方块弹层顶部）：底材列表 → 孔格 → 符文候选 ---- */
.rw-wrap{border:1px solid #3a2f22;border-radius:8px;background:#181310;padding:8px 10px;margin:0 0 10px}
.rw-h{margin:0 0 6px;font-size:15px;color:#f0c860}
.rw-list{display:flex;flex-wrap:wrap;gap:6px}
.rw-card{display:flex;flex-direction:column;align-items:flex-start;gap:2px;border:1px solid #4a3c28;border-radius:6px;
  background:#221a12;color:#e8dcc0;padding:5px 9px;cursor:pointer;font-size:12.5px}
.rw-card:hover{border-color:#d8bd79}
.rw-card .rw-nm{color:#f0c860}
.rw-card .rw-ho{color:#9b9384;font-size:11px}
.rw-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.rw-head b{color:#f0c860;font-size:14px}
.rw-back{margin-left:auto;padding:1px 10px;font-size:12px}
.rw-holes{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.rw-socket{width:52px;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  border:2px dashed #5a4a30;border-radius:8px;background:#120e0a;color:#e8dcc0;font-size:11px;cursor:pointer;padding:3px}
.rw-socket .ic{width:30px;height:30px}
.rw-socket .rn{line-height:1.1;text-align:center;font-size:10px;color:#c9b98a}
.rw-socket.empty{color:#7a6a4a;font-size:22px}
.rw-socket.empty:hover{border-color:#d8bd79;color:#f0c860}
.rw-socket.filled{border-style:solid;border-color:#6b5326;background:#1e160e}
.rw-socket.filled:hover{border-color:#c76a4a}
.rw-socket.full{box-shadow:0 0 8px 1px rgba(216,189,121,.55)}
.rw-pick{margin-top:8px;font-size:12.5px;color:#c9b98a}
.rw-cands{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.rw-cand{display:flex;align-items:center;gap:4px;border:1px solid #4a3c28;border-radius:6px;background:#221a12;
  color:#e8dcc0;padding:4px 8px;cursor:pointer;font-size:12px}
.rw-cand:hover{border-color:#d8bd79}
/* 已镶符文各自加了什么（与悬浮同一份行文本，面板不另写一套口径） */
.rw-stats{margin-top:6px;display:flex;flex-direction:column;gap:3px}
.rw-srow{display:flex;align-items:baseline;gap:6px;font-size:12px}
.rw-srow b{color:#f0c860;min-width:62px;white-space:nowrap}
.rw-snote{color:#8a7a55;font-size:11.5px;line-height:1.5}
.rw-cand .ic{width:22px;height:22px}
.rw-cand .rw-c{color:#9b9384}
/* ---- 方块打孔（xform）：卡片内展开的目标选择行（复用 .rw-list / .rw-card） ---- */
.cube-xhead{flex-basis:100%;margin-top:6px;font-size:12.5px;color:#c9b98a}
.cube-xhead b{color:#f0c860}
.rw-card.on{border-color:#d8bd79;background:var(--panel-3);box-shadow:0 0 6px 0 rgba(216,189,121,.4)}
button.chip.dis{opacity:.55;cursor:not-allowed}

/* ---- 雇佣兵（NPC 版，弹层）：四幕招募卡 + 光环 chips + 我的在队行（配装器 sheet 风） ---- */
.dlabel{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:#9b9384;margin:4px 0 6px}
.merc-acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(224px,1fr));gap:8px;margin:10px 0}
.merc-act{border:1px solid #2f2820;border-radius:9px;padding:9px 11px;background:#131110;
  display:flex;flex-direction:column;gap:6px}
.merc-act.dim{opacity:.6}
.merc-act-h{display:flex;align-items:center;gap:7px}
.merc-act-h b{font-size:14px;color:#e6cb92}
.merc-ic{font-size:18px;line-height:1}
.merc-desc{font-size:11.5px;line-height:1.4;color:#aca495}
.merc-stat{display:flex;flex-wrap:wrap;gap:4px 12px;font-family:var(--mono);font-size:12px;color:#aca495}
.merc-auras{display:flex;flex-wrap:wrap;gap:5px}
.merc-auras.mute{font-size:11.5px;color:#9b9384}
.merc-aura{padding:2px 9px;font-size:11.5px;border:1px solid var(--line);border-radius:14px;
  background:#1b1814;color:#aca495;cursor:pointer;transition:border-color .12s,color .12s}
.merc-aura.on{border-color:var(--gold);color:var(--gold);background:var(--panel-3)}
.merc-act-f{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto}
.merc-act-f .gold{font-family:var(--mono)}
.merc-act-f button{padding:2px 14px;font-size:12.5px}
.merc-row{border:1px solid #2f2820;border-radius:8px;padding:8px 10px;margin:0 0 6px;background:#151210;
  display:flex;flex-direction:column;gap:6px}
.merc-row-h{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.merc-row-h b{font-size:13.5px;color:#ded5c2}
.merc-row-f{display:flex;gap:6px;flex-wrap:wrap}
.merc-row-f button{padding:2px 10px;font-size:12px}

/* ===== 佣兵计算器（配装器同款：左选择器 / 中属性 / 右装备纸娃娃） ===== */
.mc{display:flex;flex-wrap:wrap;gap:12px;margin:10px 0}
.mc-col{background:#131110;border:1px solid #2f2820;border-radius:10px;padding:11px 12px}
.mc-sel{flex:1 1 200px;min-width:186px;display:flex;flex-direction:column;gap:11px}
.mc-attr{flex:1 1 220px;min-width:200px;display:flex;flex-direction:column;gap:11px}
.mc-doll{flex:0 0 auto;min-width:116px;display:flex;flex-direction:column;align-items:center;gap:6px}
.mc-grp{display:flex;flex-direction:column;gap:5px}
.mc-lab{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:#9b9384}
.mc-chips{display:flex;flex-wrap:wrap;gap:5px}
.mc-chip{padding:3px 11px;font-size:12px;border:1px solid var(--line);border-radius:14px;
  background:#1b1814;color:#aca495;cursor:pointer;transition:border-color .12s,color .12s}
.mc-chip.on{border-color:var(--gold);color:var(--gold);background:var(--panel-3)}
.mc-noaura{font-size:11.5px}
.mc-lvl{width:88px}
.mc-hire-btn{width:100%;padding:6px 10px;font-size:13px;margin-top:2px}
.mc-hire-btn[disabled]{opacity:.5;cursor:not-allowed}
.mc-why{font-size:11.5px}
.mc-busy{font-size:11px;color:var(--warn)}
.mc-busy-on .mc-attr,.mc-busy-on .mc-doll{opacity:.55;transition:opacity .1s}
.mc-note{font-size:11px;line-height:1.45;margin-top:2px}
.mc-stats{display:grid;grid-template-columns:1fr 1fr;gap:3px 14px}
.mc-stat{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;border-bottom:1px dashed #241d15;padding:2px 0}
.mc-stat span{color:#aca495}
.mc-stat b{color:#e6cb92;font-family:var(--mono);font-weight:600}
.mc-res-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px 14px}
.mc-res{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;padding:2px 0}
.mc-res span{color:#aca495}
.mc-res b{color:#7fb0d0;font-family:var(--mono)}
.mc-skills{display:flex;flex-direction:column;gap:3px}
.mc-skill{display:flex;justify-content:space-between;gap:8px;font-size:12.5px}
.mc-skill span{color:#ded5c2}
.mc-skill b{color:#9bc07f;font-family:var(--mono)}
.mc-aura-eff{font-size:11.5px;color:#aca495;margin-top:4px}
.mc-slot{display:flex;flex-direction:column;align-items:center;gap:2px}
.mc-slot-w .mc-slot-box{height:78px}
.mc-slot-box{width:52px;height:52px;display:flex;align-items:center;justify-content:center;font-size:22px;
  border:1px dashed #3a2f20;border-radius:8px;background:#0d0b09;opacity:.72}
.mc-slot span{font-size:11px;color:#9b9384}
.mc-doll-body{font-size:34px;line-height:1;margin:4px 0}
.mc-doll-note{font-size:10.5px}

/* 在队佣兵的装备编辑器（三槽可穿卸：候选来自背包 pool，能不能穿服务端判） */
.merc-eq{margin:6px 0;border:1px solid #2f2820;border-radius:8px;padding:8px 10px;background:#131110}
.merc-eq-slot{margin-bottom:8px}
.merc-eq-slot:last-of-type{margin-bottom:2px}
.merc-eq-h{display:flex;align-items:center;gap:8px;font-size:13px}
.merc-eq-cur{color:#e6a23c}
.merc-eq-h button{padding:2px 10px;font-size:12px}
.merc-eq-cands{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.merc-eq-cands button{padding:2px 9px;font-size:12px;border:1px solid #3a2f20;border-radius:6px;background:#0d0b09;color:#cfc7b6;cursor:pointer}
.merc-eq-cands button:hover{border-color:#e6a23c;color:#e6a23c}
.merc-eq-none{font-size:11.5px;margin-top:3px}
.merc-eq-bonus{font-size:12px;margin-top:4px;color:#9b9384}
.merc-eq-note{font-size:10.5px;margin-top:2px}

/* ===== 原创图标图集切格（sprite：装备/技能/职业三张规整网格图） ===== */
.ic{display:inline-block;background-repeat:no-repeat;image-rendering:auto;border-radius:4px;vertical-align:middle}
/* 装备图标盒（计划 D2 Item Icons Import）：sprite .ic 打底 + 自托管 <img .ii> 叠上层，两层绝对填满 .icw；
 * 缺图时 onerror 摘除 <img> 自然回落 sprite。.icw 具体尺寸由上下文定（.invcell/.dslot），img 靠 object-fit:contain 不撑破 */
.icw{position:relative;display:inline-block;vertical-align:middle;flex:0 0 auto}
.icw>.ic,.icw>.ii{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border-radius:4px}
.ic4{background-size:400% 400%}
.ic2{background-size:400% 200%}
.eq0,.eq1,.eq2,.eq3,.eq4,.eq5,.eq6,.eq7,.eq8,.eq9,.eq10,.eq11,.eq12,.eq13,.eq14,.eq15{background-image:url('../img/icons_equipment.png')}
.sk0,.sk1,.sk2,.sk3,.sk4,.sk5,.sk6,.sk7,.sk8,.sk9,.sk10,.sk11,.sk12,.sk13,.sk14,.sk15{background-image:url('../img/icons_skills.png')}
.cl0,.cl1,.cl2,.cl3,.cl4,.cl5,.cl6,.cl7{background-image:url('../img/icons_classes.png')}
.eq0{background-position:0 0}.eq1{background-position:33.333% 0}.eq2{background-position:66.667% 0}.eq3{background-position:100% 0}
.eq4{background-position:0 33.333%}.eq5{background-position:33.333% 33.333%}.eq6{background-position:66.667% 33.333%}.eq7{background-position:100% 33.333%}
.eq8{background-position:0 66.667%}.eq9{background-position:33.333% 66.667%}.eq10{background-position:66.667% 66.667%}.eq11{background-position:100% 66.667%}
.eq12{background-position:0 100%}.eq13{background-position:33.333% 100%}.eq14{background-position:66.667% 100%}.eq15{background-position:100% 100%}
.sk0,.sk1,.sk2,.sk3,.sk4,.sk5,.sk6,.sk7,.sk8,.sk9,.sk10,.sk11,.sk12,.sk13,.sk14,.sk15{background-position:0 0}
.sk1{background-position:33.333% 0}.sk2{background-position:66.667% 0}.sk3{background-position:100% 0}
.sk4{background-position:0 33.333%}.sk5{background-position:33.333% 33.333%}.sk6{background-position:66.667% 33.333%}.sk7{background-position:100% 33.333%}
.sk8{background-position:0 66.667%}.sk9{background-position:33.333% 66.667%}.sk10{background-position:66.667% 66.667%}.sk11{background-position:100% 66.667%}
.sk12{background-position:0 100%}.sk13{background-position:33.333% 100%}.sk14{background-position:66.667% 100%}.sk15{background-position:100% 100%}
.cl0{background-position:0 0}.cl1{background-position:33.333% 0}.cl2{background-position:66.667% 0}.cl3{background-position:100% 0}
.cl4{background-position:0 100%}.cl5{background-position:33.333% 100%}.cl6{background-position:66.667% 100%}.cl7{background-position:100% 100%}

/* ===== 品质/难度文字与格边（供 panels.js 后续打类名）：暗黑2 风——格边+同色发光 ===== */
.q-unique{color:var(--unique)}.q-set{color:var(--set)}.q-magic{color:var(--magic)}.q-rare{color:var(--rare)}.q-runeword{color:var(--runeword)}
.d-normal{color:var(--ok)}.d-nightmare{color:var(--nightmare)}.d-hell{color:var(--hell)}
.slot.q-unique,.cell.q-unique{border-color:var(--unique);box-shadow:inset 0 2px 6px #000c,0 0 9px #c8a05e66}
.slot.q-set,.cell.q-set{border-color:var(--set);box-shadow:inset 0 2px 6px #000c,0 0 9px #4fae4f55}
.slot.q-magic,.cell.q-magic{border-color:var(--magic);box-shadow:inset 0 2px 6px #000c,0 0 8px #7f9cd055}
.slot.q-rare,.cell.q-rare{border-color:var(--rare);box-shadow:inset 0 2px 6px #000c,0 0 8px #d6c35b44}
.slot.q-runeword,.cell.q-runeword{border-color:var(--runeword);box-shadow:inset 0 2px 6px #000c,0 0 9px #c9b98f66}