/* 奇迹MU 放置版 3.0 — 客户端 UI（上/左/中/右 四区固定，中间 Canvas 小人打怪回放） */
:root{
  --bg:#080a11; --bg2:#111523; --bg3:#0c1020; --line:#29304a; --line2:#3b4568;
  --txt:#dbe2f4; --mute:#7b87ab; --gold:#e8c15a; --pri:#4b6ef5;
  --hp:#e0564f; --mp:#4aa3e0; --sd:#7cc36b; --ok:#57c27b; --warn:#e6a23c; --bad:#e0564f;
  --elite:#ab47bc; --boss:#ff5252;
  /* 装备格边长（用户 2026-09：方框恒定大小）：装备栏 / 背包 / 仓库三处共用一个尺，
   * 不随面板宽拉伸——格子只按这个尺寸往一行里塞几个，多出来的空间留白而不是把格子顶大 */
  --cell:72px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--txt);overflow:hidden;
  font:14px/1.55 "Microsoft YaHei","PingFang SC",system-ui,sans-serif}
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:322px minmax(420px,1fr) 340px;
  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:#2a3150;border-radius:4px}

.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}
.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}
.miles{white-space:nowrap}
.miles>*{margin-right:4px}
.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(5,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:#4a5578;background:#141a2c}
.slot small{position:absolute;left:2px;top:1px;font-size:10px;color:#6f7ca0}
.slot.tgt{border-color:var(--gold)}
.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)}
/* 宝石强化 + 翅膀合成（移植 F:\MU「💎 宝石强化」单栏面板；配色改走 3.0 主题：紫 = --elite 呼应 MU、蓝 = --pri 主操作、金 = --gold 计数） */
.enh-modal{max-width:640px;margin:0 auto}
.enh-modal .list-sm{max-height:200px}
.jewel-panel{border:1px solid #4a2a6a;border-radius:10px;background:#0d1120;padding:10px 12px;margin-top:10px}
.enh-modal>.jewel-panel:first-child{margin-top:0}
.enh-sel{width:100%;margin-bottom:6px}
.jewel-target{display:flex;align-items:center;gap:8px;padding:8px;background:#160f28;border:1px dashed #4a2a6a;border-radius:6px;margin:2px 0 8px;font-size:.9em;flex-wrap:wrap}
.jewel-target .target-name{color:#4fc3f7;font-weight:700}
.enh-btnrow{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.chaos-group{display:inline-flex;gap:6px;align-items:center;padding:2px 6px;border:1px dashed var(--elite);border-radius:6px}
.btn-enhance{background:linear-gradient(135deg,#5b2a86,var(--elite));color:#fff;border:none;border-radius:6px;padding:8px 12px;font-weight:700;font-size:.9em;cursor:pointer}
.btn-enhance:hover{background:linear-gradient(135deg,#7b3aa6,#c06fd0)}
.btn-enhance:disabled{background:#20263a;color:#5a6280;cursor:not-allowed}
.btn-charm-toggle{background:#2a1f3f;color:#c9b8e8;border:1px solid var(--elite);border-radius:5px;padding:3px 8px;font-size:.82em;cursor:pointer}
.btn-charm-toggle.on{background:var(--elite);color:#fff}
.btn-guardian-toggle{background:#1c2430;color:#cfd8dc;border:1px solid #3a4a5a;border-radius:5px;padding:3px 8px;font-size:.82em;cursor:pointer}
.btn-guardian-toggle.on{background:var(--gold);color:#1a1200;font-weight:700}
.enh-note{color:var(--mute);font-size:11.5px;margin-top:4px;line-height:1.5}
.enh-note b{color:#c9b8e8}
.enh-note .warn{color:var(--bad)}
.enhance-result{min-height:20px;text-align:center;font-size:.85em;font-weight:700;margin:6px 0}
.enhance-result.ok{color:var(--ok)}
.enhance-result.fail{color:var(--bad)}
.jewel-row{display:flex;align-items:center;gap:8px;padding:5px 8px;background:#0b0f1c;border-radius:6px;margin-bottom:5px;font-size:.82em}
.jewel-row .jewel-icon{font-size:1.25em}
.jewel-row .jewel-name{color:#c9b8e8;font-weight:700;min-width:66px}
.jewel-row .jewel-count{color:var(--gold);min-width:34px}
.jewel-row .jewel-use{color:var(--mute);flex:1}
.wing-panel .wing-title{font-weight:700;margin-bottom:6px}
.wing-panel .wing-title .mute{font-weight:400}
.wing-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:6px 0 2px}
.wing-row .enh-sel{flex:1;min-width:160px;width:auto;margin:0}
.wing-desc{color:var(--mute);font-size:11.5px;margin-bottom:6px}
.wing-desc .lack{color:var(--bad)}
.wing-note{font-size:11.5px;margin-top:6px}
.warn{color:var(--warn)}
.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:#151b2e;color:var(--txt);border-color:#46527a}
.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:#3a5a8c}
.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)}
/* 既卓越又幸运：格子左下角补一枚金色 ★（用户 2026-09）。判据（ex&&luck 两者同时）住在 panels.js 贴的 .star 类，
 * 这里只画字符 —— 与右上锁(.lk)、右下(<i>)、左上部位(<small>)各占一角互不盖；纯卓越/纯幸运不挂 star 故不出星 */
.cell.star::after{content:'★';position:absolute;left:2px;bottom:0;font-size:11px;line-height:1;color:#ffd24a;text-shadow:0 0 2px #000,0 1px 1px #000}
.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}          /* 兜底：即使内容未撑开也保证画布可见 */
}