/* 基础操作 · 手游化对局 HUD（深色金边、圆角卡片；横屏为主，竖屏自动收紧） */
:root { --hud: rgba(14, 12, 9, 0.84); --hud2: rgba(30, 25, 18, 0.92); --hl: rgba(227, 185, 85, 0.45); }
body.playing .hubback { display: none; }
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#hud > * { pointer-events: auto; }
body.nohud #hud { display: none; }
#bShow { display: none; position: fixed; right: calc(10px + var(--sar)); top: calc(10px + var(--sat)); z-index: 30; }
body.nohud #bShow { display: block; }
.hb { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--hl); background: var(--hud); color: var(--gold2); font-size: 16px; cursor: pointer; display: grid; place-items: center; font-family: inherit; padding: 0; }
.hb:active, .hb.on { background: var(--gold); color: #221; }

/* —— 顶栏 —— */
#top { position: absolute; top: 0; left: 0; right: 0; height: 58px; padding: calc(6px + var(--sat)) calc(10px + var(--sar)) 0 calc(10px + var(--sal)); display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; }
#top > * { pointer-events: auto; }
#top .tl, #top .tr { display: flex; gap: 6px; align-items: center; }
#res { display: flex; gap: 2px; background: var(--hud); border: 1px solid var(--hl); border-radius: 20px; padding: 2px 8px 2px 4px; height: 38px; align-items: center; }
#res .r { display: flex; align-items: center; gap: 5px; padding: 0 8px 0 2px; font-size: 15px; font-weight: 800; color: #f8f0dc; font-variant-numeric: tabular-nums; }
#res .r + .r { border-left: 1px solid rgba(255,255,255,.1); padding-left: 6px; }
#res .r svg { width: 26px; height: 26px; flex: 0 0 auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)); }
#res .r.full b { color: #ff6a5a; }
/* 圆形日夜盘：表盘 24 小时刻度 + 昼夜扇区 + 时针，内嵌太阳 / 月亮，下方数字时间 */
#dial { position: absolute; left: 50%; top: calc(4px + var(--sat)); transform: translateX(-50%); width: 76px; height: 76px; pointer-events: auto; cursor: pointer; }
#dial canvas { width: 76px; height: 76px; display: block; filter: drop-shadow(0 3px 6px rgba(0,0,0,.55)); }
#dial .clock { white-space: nowrap; position: absolute; left: 50%; top: 74px; transform: translateX(-50%); font-size: 11.5px; font-weight: 800; color: #fff4d8; letter-spacing: 1px; text-shadow: 0 1px 3px #000, 0 0 6px #000; font-variant-numeric: tabular-nums; background: rgba(14,12,9,.7); border: 1px solid var(--hl); border-radius: 8px; padding: 0 7px; line-height: 16px; }
#dial .clock.night { color: #b8d0ff; }

/* —— 小地图 —— */
#mmWrap { position: absolute; left: calc(8px + var(--sal)); bottom: calc(8px + var(--sab)); padding: 5px; background: var(--hud); border: 1px solid var(--hl); border-radius: 12px; }
#mm { display: block; width: 168px; height: 168px; border-radius: 7px; background: #000; touch-action: none; }
.mmBtns { position: absolute; right: -40px; bottom: 0; display: flex; flex-direction: column; gap: 4px; }
.mmBtns button { width: 32px; height: 30px; border-radius: 9px; border: 1px solid var(--hl); background: var(--hud); color: var(--gold2); font-size: 15px; cursor: pointer; padding: 0; }
.mmBtns button.on { color: #221; background: var(--gold); }

/* —— 魔兽式控制台：统一的金边框，左 = 信息面板，右 = 指令卡（3 行 × 4 列） —— */
#console { position: absolute; right: calc(8px + var(--sar)); bottom: calc(6px + var(--sab)); display: flex; align-items: stretch; background: linear-gradient(180deg, rgba(36,30,20,.95), rgba(14,12,9,.95)); border: 2px solid #8a6a2a; border-radius: 14px; box-shadow: 0 6px 24px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,220,140,.15); padding: 6px; gap: 6px; }
#console::before { content: ''; position: absolute; left: 10px; right: 10px; top: -2px; height: 2px; background: linear-gradient(90deg, transparent, #e3b955, transparent); }
#info { width: 330px; min-height: 152px; border-radius: 9px; background: rgba(0,0,0,.35); border: 1px solid rgba(227,185,85,.22); padding: 7px 8px; display: flex; gap: 9px; align-items: stretch; }
#info.empty { align-items: center; justify-content: center; color: var(--dim); font-size: 12px; }
#info .por { position: relative; flex: 0 0 auto; width: 92px; display: flex; flex-direction: column; gap: 4px; }
#info .por .face { position: relative; width: 92px; height: 92px; border-radius: 9px; overflow: hidden; border: 2px solid #8a6a2a; background: radial-gradient(circle at 50% 40%, #3a3428, #121008); }
#info .por canvas { width: 100%; height: 100%; display: block; }
#info .por .ico { width: 100%; height: 100%; display: grid; place-items: center; font-size: 46px; }
#info .por .lv { position: absolute; left: 3px; top: 3px; font-size: 10px; font-weight: 800; color: #111; border-radius: 8px; padding: 0 5px; z-index: 1; }
#info .main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
#info .nm { font-size: 14.5px; font-weight: 800; color: var(--gold2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#info .nm small { display: block; font-size: 11px; color: var(--dim); font-weight: 400; margin-top: 1px; }
.gauge { position: relative; height: 15px; border-radius: 4px; background: rgba(0,0,0,.6); overflow: hidden; border: 1px solid rgba(255,255,255,.12); }
.gauge i { position: absolute; left: 0; top: 0; bottom: 0; transition: width .15s; }
.gauge.hp i { background: linear-gradient(#5ae85a, #1e8a1e); } .gauge.hp.mid i { background: linear-gradient(#f0d84a, #a08a10); } .gauge.hp.low i { background: linear-gradient(#ff5a4a, #a01a10); }
.gauge.mp i { background: linear-gradient(#6ab8ff, #1a4aa8); } .gauge.gold i { background: linear-gradient(#ffe06a, #b8861a); } .gauge.wood i { background: linear-gradient(#9ae86a, #3a7a1a); }
.gauge span { position: absolute; inset: 0; text-align: center; font-size: 10.5px; line-height: 14px; color: #fff; font-weight: 700; text-shadow: 0 1px 2px #000; }
#info .st { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 8px; font-size: 11.5px; color: #ccc; }
#info .st b { color: #fff; font-weight: 700; }
#info .state { font-size: 11px; color: #9ad8ff; } #info .state.warn { color: #ffb08a; }
#info .desc { font-size: 11px; color: #aaa; line-height: 1.55; }
#info .abl { display: flex; gap: 4px; flex-wrap: wrap; } #info .abl span { font-size: 10.5px; border: 1px solid rgba(227,185,85,.3); border-radius: 6px; padding: 0 5px; color: #ddd; }
#info .multi { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; flex: 1; align-content: start; }
#info .multi .cell { position: relative; height: 40px; border-radius: 7px; border: 2px solid #5a4a22; background: #1a160e; display: grid; place-items: center; font-size: 10px; color: #ddd; cursor: pointer; overflow: hidden; text-align: center; line-height: 1.1; padding: 1px; }
#info .multi .cell.cur { border-color: var(--gold); }
#info .multi .cell u { position: absolute; left: 2px; right: 2px; bottom: 2px; height: 4px; background: #000; text-decoration: none; } #info .multi .cell u i { display: block; height: 100%; background: #4ade4a; }
#info .multi .cell .g { font-size: 15px; }
#info .multi .more { color: var(--dim); font-size: 11px; align-self: center; }
#cmd { display: grid; grid-template-columns: repeat(4, 48px); grid-template-rows: repeat(3, 48px); gap: 4px; align-content: center; }
#cmd button, #cmd .empty { border-radius: 9px; }
#cmd button { position: relative; border: 1px solid rgba(227,185,85,.38); background: linear-gradient(160deg, #3e3322, #17130b); color: #f4ecd8; font-size: 19px; cursor: pointer; padding: 0; font-family: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; box-shadow: inset 0 1px 0 rgba(255,230,160,.12); }
#cmd button small { font-size: 9.5px; margin-top: 3px; color: #cbb; }
#cmd button kbd { position: absolute; right: 3px; top: 2px; font-size: 8.5px; color: #998; font-family: inherit; }
#cmd button.on { background: var(--gold); color: #221; } #cmd button.on small { color: #332; }
#cmd button.force { border-color: #d8603a; } #cmd button.force.on { background: #e0603a; color: #fff; }
#cmd button.skill { border-color: rgba(160,120,255,.6); background: linear-gradient(160deg, #2e2446, #120e1e); }
#cmd button:disabled { opacity: .28; }
#cmd .empty { border: 1px dashed rgba(255,255,255,.06); background: rgba(0,0,0,.2); }
#groups { position: absolute; right: calc(8px + var(--sar)); bottom: calc(176px + var(--sab)); display: flex; gap: 4px; }
#groups button { min-width: 34px; height: 28px; border-radius: 8px; border: 1px solid rgba(255,255,255,.18); background: var(--hud); color: #ccc; font-size: 12px; cursor: pointer; font-family: inherit; padding: 0 6px; }
#groups button.has { border-color: var(--hl); color: var(--gold2); } #groups button.cur { background: var(--gold); color: #221; }
#groups button small { font-size: 9px; opacity: .8; margin-left: 2px; }
/* 左侧工具条（原指令面板中的 全选 / 回城 / 隐藏界面 / 镜头跟随 等移到这里） */
#tools { position: absolute; left: calc(8px + var(--sal)); bottom: calc(196px + var(--sab)); display: flex; flex-direction: column; gap: 5px; }
#tools button { width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--hl); background: var(--hud); color: var(--gold2); font-size: 17px; cursor: pointer; padding: 0; font-family: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
#tools button small { font-size: 8.5px; color: #bba; margin-top: 2px; }
#tools button.on { background: var(--gold); color: #221; } #tools button.on small { color: #332; }
#hint { position: absolute; left: 50%; top: calc(100px + var(--sat)); transform: translateX(-50%); background: rgba(0,0,0,.65); color: var(--gold2); font-size: 12.5px; padding: 5px 14px; border-radius: 14px; display: none; white-space: nowrap; }
#hint.on { display: block; } #hint.force { color: #ff9a7a; border: 1px solid #e0603a; }

/* 框选 */
#box { position: fixed; border: 1.5px solid #6aff6a; background: rgba(106,255,106,.1); pointer-events: none; display: none; z-index: 9; }

/* 弹出面板 */
.sheet { position: fixed; z-index: 40; right: calc(10px + var(--sar)); top: calc(52px + var(--sat)); width: 300px; max-height: calc(100% - 70px); overflow-y: auto; background: var(--hud2); border: 1px solid var(--hl); border-radius: 14px; padding: 12px 14px; display: none; }
.sheet.on { display: block; }
.sheet h3 { color: var(--gold); font-size: 15px; margin-bottom: 8px; display: flex; justify-content: space-between; } .sheet h3 button { background: none; border: 0; color: #aaa; font-size: 18px; cursor: pointer; }
.sheet label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #ccc; margin: 8px 0; } .sheet label span { width: 64px; flex: 0 0 auto; } .sheet label input[type=range] { flex: 1; } .sheet label em { width: 38px; text-align: right; font-style: normal; color: var(--gold2); font-size: 12px; }
.sheet .row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.sheet p, .sheet li { font-size: 12.5px; color: #bbb; line-height: 1.75; } .sheet ul { padding-left: 18px; } .sheet b { color: var(--gold2); }
#menu { left: calc(10px + var(--sal)); right: auto; }
#help { width: 380px; }

/* 选图界面 */
#picker { position: fixed; inset: 0; z-index: 50; background: radial-gradient(1000px 600px at 50% 0%, #2a2214, #0a0806 75%); display: none; overflow-y: auto; padding: calc(60px + var(--sat)) 16px 30px; }
#picker.on { display: block; }
#picker h1 { text-align: center; color: var(--gold); letter-spacing: 6px; font-size: 24px; } #picker > p { text-align: center; color: var(--dim); font-size: 13px; margin: 6px 0 18px; }
#picker .grid { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
#picker .card { text-align: left; background: linear-gradient(150deg, rgba(255,255,255,.06), rgba(255,255,255,.01)); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; color: #eee; cursor: pointer; font-family: inherit; }
#picker .card:hover { border-color: var(--gold); } #picker .card b { color: var(--gold2); font-size: 14.5px; display: block; } #picker .card small { color: var(--dim); font-size: 11.5px; }
#picker .card .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
#picker .opts { max-width: 1000px; margin: 0 auto 14px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; font-size: 12.5px; color: #ccc; align-items: center; }
#picker select { background: rgba(0,0,0,.5); color: #eee; border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; font-family: inherit; }

/* —— 竖屏 / 小屏 —— */
@media (max-width: 1000px) { #info { width: 270px; } }
@media (max-height: 500px) {
  #mm { width: 118px; height: 118px; } #tools { bottom: calc(146px + var(--sab)); } #tools button { width: 36px; height: 36px; font-size: 15px; }
  #cmd { grid-template-columns: repeat(4, 40px); grid-template-rows: repeat(3, 40px); gap: 3px; } #cmd button { font-size: 16px; } #cmd button small { font-size: 8.5px; }
  #info { min-height: 128px; width: 250px; padding: 5px 6px; } #info .por { width: 66px; } #info .por .face { width: 66px; height: 66px; } #info .st { font-size: 10.5px; } #info .nm { font-size: 13px; } #info .multi .cell { height: 30px; font-size: 9px; } #info .multi .cell .g { font-size: 12px; } #info .abl { display: none; }
  #groups { bottom: calc(150px + var(--sab)); } #top { height: 46px; }
  #dial, #dial canvas { width: 62px; height: 62px; } #dial .clock { top: 60px; font-size: 10.5px; }
  #res .r svg { width: 22px; height: 22px; } #res .r { font-size: 13.5px; } #res { height: 34px; }
}
@media (max-width: 640px) and (orientation: portrait) {
  #mm { width: 100px; height: 100px; } #tools { bottom: calc(118px + var(--sab)); flex-direction: row; } #tools button { width: 34px; height: 34px; }
  #console { left: calc(6px + var(--sal)); right: calc(6px + var(--sar)); bottom: calc(118px + var(--sab)); flex-direction: column; }
  #info { width: auto; min-height: 0; } #cmd { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 38px); }
  #mmWrap { bottom: calc(6px + var(--sab)); } #groups { display: none; }
  #res .r { padding: 0 3px; font-size: 12.5px; } #res .r svg { width: 19px; height: 19px; }
  #dial { top: calc(48px + var(--sat)); } #bHelp { display: none; }
}

/* —— v21：指令卡线条图标 / 技能格 / 类型方框 / 经验条 / 技能介绍 —— */
#cmd button .ci { width: 22px; height: 22px; color: #f4ecd8; filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
#cmd button.on .ci { color: #221; }
#cmd button.force .ci { color: #f4ecd8; } #cmd button.force.on .ci { color: #fff; }
#cmd button .sg { width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; font-size: 15px; color: #fff; text-shadow: 0 0 4px #000; border: 1px solid rgba(255,255,255,.25); }
#cmd button.skill.pas .sg { border-style: dashed; }
#cmd button.skill.lock { filter: grayscale(1); opacity: .5; }
#cmd button.skill.lock::after { content: '🔒'; position: absolute; left: 3px; top: 2px; font-size: 9px; }
#info .por .types { display: flex; flex-direction: column; gap: 4px; }
.tbox { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #fff; }
.tbox .tico { width: 26px; height: 26px; border-radius: 5px; border: 1.5px solid; background: rgba(0,0,0,.5); display: grid; place-items: center; flex: none; box-shadow: inset 0 0 6px rgba(0,0,0,.6); }
.tbox .tico svg { width: 18px; height: 18px; }
.tbox b { font-weight: 800; font-variant-numeric: tabular-nums; }
.gauge.xp { height: 9px; } .gauge.xp i { background: linear-gradient(#c88aff, #6a2aa8); } .gauge.xp span { font-size: 8.5px; line-height: 8px; color: #d8c8ff; }
#info .main { gap: 3px; } #info .st { grid-template-columns: 1fr 1fr 1fr; gap: 1px 6px; font-size: 11px; } #info .state { min-height: 14px; }
#skTip { position: fixed; z-index: 60; width: 300px; max-width: calc(100vw - 16px); background: linear-gradient(180deg, rgba(36,30,20,.97), rgba(14,12,9,.97)); border: 1.5px solid #8a6a2a; border-radius: 12px; padding: 10px 12px; display: none; box-shadow: 0 8px 26px rgba(0,0,0,.6); }
#skTip.on { display: block; }
#skTip .th { display: flex; gap: 9px; align-items: center; } #skTip .th b { color: var(--gold2); font-size: 14px; } #skTip .th small { display: block; color: var(--dim); font-size: 10.5px; }
#skTip .sg { width: 34px; height: 34px; border-radius: 7px; display: grid; place-items: center; font-size: 19px; color: #fff; flex: none; border: 1px solid rgba(255,255,255,.25); }
#skTip p { font-size: 11.5px; color: #ccc; line-height: 1.6; margin: 6px 0; }
#skTip .tl { font-size: 11px; color: #6a665e; line-height: 1.55; padding: 3px 0; border-top: 1px solid rgba(255,255,255,.05); }
#skTip .tl b { margin-right: 5px; } #skTip .tl em { font-style: normal; margin-right: 6px; font-size: 10px; }
#skTip .tl.on { color: #fff; } #skTip .tl.on em { color: #8ae86a; }
#skTip .hint { font-size: 10px; color: var(--dim); margin-top: 6px; }
@media (max-height: 500px) { #cmd button .ci { width: 18px; height: 18px; } #cmd button .sg { width: 21px; height: 21px; font-size: 12px; } .tbox .tico { width: 21px; height: 21px; } .tbox .tico svg { width: 14px; height: 14px; } .tbox { font-size: 10.5px; } #info .st { font-size: 9.5px; } }

/* —— v22：信息面板固定高度 + 网格布局 —— */
#console { height: 176px; box-sizing: border-box; }
#info { height: 100%; min-height: 0; overflow: hidden; display: grid; grid-template-columns: 92px 1fr; grid-template-rows: 92px 1fr; column-gap: 10px; row-gap: 6px; align-items: start; }
#info.empty, #info:not(:has(.foot)) { display: flex; }
#info .main { height: 92px; display: flex; flex-direction: column; justify-content: space-between; gap: 0; min-width: 0; }
#info .main .nm { line-height: 1.15; }
#info .bars { display: flex; flex-direction: column; gap: 4px; }
#info .bars .gauge { height: 15px; }
#info .gauge.xp span { font-size: 10.5px; line-height: 14px; color: #e8dcff; }
#info .gauge.ghost { visibility: hidden; }
#info .foot { grid-column: 1 / -1; display: grid; grid-template-columns: 92px 1fr; column-gap: 10px; align-items: center; }
#info .foot .types { display: flex; flex-direction: column; gap: 4px; }
#info .tbox { cursor: pointer; user-select: none; -webkit-user-select: none; }
#info .attrs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
#info .attr { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; -webkit-user-select: none; }
#info .attr .aico { width: 34px; height: 34px; border-radius: 8px; background: rgba(0,0,0,.45); border: 1.5px solid currentColor; display: grid; place-items: center; flex: none; box-shadow: inset 0 0 8px rgba(0,0,0,.6); }
#info .attr .aico svg { width: 24px; height: 24px; }
#info .attr .an { font-size: 11px; color: #bbb; line-height: 1.15; display: flex; flex-direction: column; } #info .attr .an b { font-size: 16px; color: #fff; font-weight: 800; }
#info .por .types { display: none; }
#info .multi { max-height: 100%; overflow: hidden; }
#groups { bottom: calc(188px + var(--sab)); }
#infoTip { position: fixed; z-index: 60; min-width: 170px; max-width: 260px; background: rgba(10, 8, 6, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(227,185,85,.45); border-radius: 10px; padding: 8px 11px; font-size: 12px; color: #eee; line-height: 1.6; display: none; pointer-events: auto; }
#infoTip.on { display: block; } #infoTip b { color: var(--gold2); display: block; margin-bottom: 2px; } #infoTip small { display: block; color: #aaa; font-size: 10.5px; margin-top: 3px; }
@media (max-height: 500px) {
  #console { height: 140px; } #info { grid-template-columns: 66px 1fr; grid-template-rows: 66px 1fr; row-gap: 4px; column-gap: 8px; padding: 5px 6px; }
  #info .main { height: 66px; } #info .bars { gap: 2px; } #info .bars .gauge { height: 12px; } #info .gauge span, #info .gauge.xp span { font-size: 9px; line-height: 11px; }
  #info .foot { grid-template-columns: 66px 1fr; column-gap: 8px; } #info .attr .aico { width: 26px; height: 26px; } #info .attr .aico svg { width: 18px; height: 18px; } #info .attr .an b { font-size: 13px; } #info .attr .an { font-size: 9.5px; }
  #info .tbox .tico { width: 20px; height: 20px; } #info .foot .types { gap: 2px; }
  #groups { bottom: calc(150px + var(--sab)); }
}
@media (max-width: 640px) and (orientation: portrait) { #console { height: auto; } #info { height: 150px; } }

/* —— v29：英雄物品栏（6 格 · 2 列 × 3 行，位于信息面板与指令卡之间；非英雄单位不显示）—— */
#inv { display: grid; grid-template-columns: repeat(2, 46px); grid-template-rows: repeat(3, 46px); gap: 4px; align-content: center; padding: 0 6px; border-left: 1px solid rgba(227,185,85,.22); border-right: 1px solid rgba(227,185,85,.22); background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.32)); border-radius: 8px; }
#inv .slot { position: relative; padding: 0; border-radius: 8px; border: 2px solid color-mix(in srgb, var(--tc, #5a4a22) 70%, #000); background: radial-gradient(circle at 50% 35%, #2e2618, #0c0a06); cursor: pointer; overflow: hidden; box-shadow: inset 0 0 10px rgba(0,0,0,.7), 0 0 6px color-mix(in srgb, var(--tc, #000) 35%, transparent); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#inv .slot.empty { border: 2px dashed rgba(138,106,42,.45); background: rgba(0,0,0,.35); box-shadow: inset 0 0 8px rgba(0,0,0,.6); cursor: default; }
#inv .slot img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; filter: drop-shadow(0 1px 2px #000); }
#inv .slot .n { position: absolute; right: 2px; bottom: 1px; font-size: 11px; font-weight: 900; color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000; }
#inv .slot .k { position: absolute; left: 2px; top: 1px; font-size: 10px; line-height: 1; color: #d0a0ff; text-shadow: 0 0 3px #000; } #inv .slot .k.p { color: #ffd86a; }
#inv .slot .cd { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.6); color: #fff; font-weight: 900; font-size: 15px; }
#inv .slot:active:not(.empty) { transform: scale(.94); }
@media (max-height: 500px) { #inv { grid-template-columns: repeat(2, 38px); grid-template-rows: repeat(3, 38px); gap: 3px; padding: 0 4px; } }
@media (max-width: 640px) and (orientation: portrait) { #inv { grid-template-columns: repeat(6, 1fr); grid-template-rows: 40px; padding: 4px; border: 0; } }

/* —— v40 英雄信息：三围图标缩小、数字之间留白，底部状态栏；加成以绿色「+N」单独显示 —— */
#info .foot { grid-template-rows: auto auto; row-gap: 3px; }
#info .attrs { gap: 12px; align-self: start; }
#info .attr { gap: 4px; }
#info .attr .aico { width: 22px; height: 22px; border-radius: 6px; border-width: 1.2px; }
#info .attr .aico svg { width: 15px; height: 15px; }
#info .attr .an { font-size: 9.5px; } #info .attr .an b { font-size: 13px; }
em.plus { font-style: normal; color: #6aff7a; font-weight: 800; margin-left: 2px; font-size: .92em; }
#infoTip em.plus { margin-left: 4px; }
#info .buffs { grid-column: 2; display: flex; gap: 4px; min-height: 18px; align-items: center; flex-wrap: wrap; }
#info .buffs .bf { position: relative; width: 18px; height: 18px; border-radius: 4px; border: 1px solid var(--c); background: rgba(0,0,0,.55); color: #fff; font-size: 11px; display: grid; place-items: center; cursor: pointer; box-shadow: 0 0 5px var(--c); }
#info .buffs .bf i { position: absolute; right: -3px; bottom: -4px; font-style: normal; font-size: 8px; color: #fff; text-shadow: 0 0 2px #000; }
#info #gHp, #info #gMp { cursor: pointer; }
@media (max-height: 500px) { #info .attr .aico { width: 18px; height: 18px; } #info .attr .aico svg { width: 12px; height: 12px; } #info .attr .an b { font-size: 11px; } #info .buffs { min-height: 14px; } #info .buffs .bf { width: 14px; height: 14px; font-size: 9px; } }

/* v45 模块 06 · 酒馆 / 商店 / 雇佣兵营地 */
#info .nshop { margin-top: 4px; } #info .nhint { font-size: 10.5px; color: #c8b88a; margin: 2px 0 4px; }
#info .nrow { display: flex; flex-wrap: wrap; gap: 4px; }
#info .nbtn { position: relative; display: flex; flex-direction: column; align-items: center; width: 62px; padding: 3px 2px; border-radius: 7px; border: 1px solid #8a6a2a; background: linear-gradient(180deg, #2a2112, #15100a); color: #e8dcc0; cursor: pointer; font: inherit; }
#info .nbtn img { width: 34px; height: 30px; object-fit: contain; } #info .nbtn .ni { font-size: 20px; line-height: 30px; }
#info .nbtn b { font-size: 10px; font-weight: 600; white-space: nowrap; overflow: hidden; max-width: 58px; } #info .nbtn small { font-size: 9px; color: #e8c86a; }
#info .nbtn em { position: absolute; top: 1px; right: 3px; font-style: normal; font-size: 10px; color: #fff; background: #5a3a1a; border-radius: 6px; padding: 0 3px; }
#info .nbtn.no { opacity: 0.5; filter: grayscale(0.6); }

/* v45 模块 10 · 存档位 */
.gmSaves .gsv { display: flex; align-items: center; gap: 4px; padding: 4px 0; border-bottom: 1px solid rgba(184,138,52,.2); font-size: 12px; }
.gmSaves .gsv > b { width: 18px; color: #f0cf7a; } .gmSaves .gsv span { flex: 1; color: #e8dcc0; } .gmSaves .gsv span small { display: block; color: #8a7a5a; font-size: 10px; } .gmSaves .gsv i { color: #6a5a40; }
.gmSaves button { padding: 3px 7px; border-radius: 6px; border: 1px solid #8a6a2a; background: #1d160a; color: #e8dcc0; cursor: pointer; font: inherit; font-size: 11px; } .gmSaves button:disabled { opacity: .4; }