/* 《幽壤》游戏客户端 —— 移动端优先 HUD */
html, body { overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
#app { position: fixed; inset: 0; background: #0b0a08; }
#cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; touch-action: none; }
.hidden { display: none !important; }
.screen { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; }

/* ---------------- 选择主角 */
#pick { background: linear-gradient(rgba(10, 8, 6, .82), rgba(10, 8, 6, .94)), url("../assets/renders/v7_game_1.jpg") center/cover, #0f0d0b; padding: calc(10px + var(--safe-t)) 14px calc(12px + var(--safe-b)); overflow: auto; }
.pick-hd { display: flex; align-items: center; gap: 12px; }
.pick-hd .back { font-size: 28px; color: var(--gold2); padding: 0 8px; }
.logo { font-family: var(--font); font-size: 30px; letter-spacing: 10px; color: var(--gold2); text-shadow: 0 2px 10px #000; }
.logo-sub { font-size: 12px; color: var(--text2); letter-spacing: 2px; }
.heroes { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; margin: 14px 0 10px; }
.hc { position: relative; border: 1px solid var(--line2); border-radius: 4px; overflow: hidden; background: var(--panel); cursor: pointer; transition: .15s; }
.hc img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; filter: saturate(.8) brightness(.9); }
.hc .n { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 6px; background: linear-gradient(transparent, rgba(10, 8, 6, .95)); font-family: var(--font); color: var(--text); font-size: 16px; letter-spacing: 2px; }
.hc .n small { display: block; font-size: 11px; color: var(--text2); letter-spacing: 0; font-family: var(--sans); }
.hc.sel { border-color: var(--gold2); box-shadow: 0 0 0 1px var(--gold2), 0 6px 20px rgba(0, 0, 0, .6); }
.hc.sel img { filter: none; }
.hc .dlc { position: absolute; right: 4px; top: 4px; font-size: 10px; padding: 1px 5px; background: rgba(0, 0, 0, .7); border: 1px solid var(--line2); color: var(--text2); }
.pick-info { border: 1px solid var(--line2); background: rgba(28, 24, 19, .85); border-radius: 4px; padding: 10px 14px; min-height: 90px; }
.pick-info .t { font-family: var(--font); font-size: 20px; color: var(--gold2); letter-spacing: 3px; }
.pick-info .t small { font-size: 12px; color: var(--text2); letter-spacing: 1px; margin-left: 8px; }
.pick-info p { margin: 6px 0; font-size: 13px; line-height: 1.8; color: var(--text2); }
.pick-info q { display: block; font-family: var(--font); color: var(--text); margin: 6px 0; }
.pick-info .st span { display: inline-block; margin-right: 10px; font-size: 12px; color: var(--text); }
.pick-ft { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 12px; flex-wrap: wrap; }
.map-sel { white-space: nowrap; font-size: 12px; color: var(--text2); display: flex; align-items: center; gap: 6px; }
.map-sel select { background: var(--panel2); border: 1px solid var(--line2); color: var(--text); padding: 6px; border-radius: 3px; }
.btn.primary { background: linear-gradient(#6e4f28, #4a341a); border-color: var(--gold); color: #f3e2bd; font-size: 16px; padding: 10px 26px; letter-spacing: 3px; font-family: var(--font); }

/* ---------------- 载入 */
#loading { background: #0b0a08 center/cover; align-items: center; justify-content: flex-end; padding-bottom: calc(60px + var(--safe-b)); }
#loading::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, .2), rgba(8, 6, 4, .92) 75%); }
#loading > * { position: relative; }
.ld-name { font-family: var(--font); font-size: 30px; letter-spacing: 8px; color: var(--gold2); text-shadow: 0 2px 12px #000; }
.ld-tip { margin: 10px 20px 22px; font-family: var(--font); color: var(--text2); font-size: 14px; text-align: center; max-width: 560px; line-height: 1.9; }
.ld-bar { width: min(70vw, 460px); height: 4px; background: rgba(255, 255, 255, .08); border: 1px solid var(--line2); }
.ld-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--ochre), var(--gold2)); transition: width .2s; }
.ld-msg { margin-top: 8px; font-size: 11px; color: var(--dim); }

/* ---------------- HUD */
#hud { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
#hud button, #hud .joy, #hud .menu { pointer-events: auto; }
.hud-tl { position: absolute; left: calc(10px + env(safe-area-inset-left)); top: calc(8px + var(--safe-t)); display: flex; gap: 8px; align-items: center; }
.por { position: relative; width: 54px; height: 54px; border: 2px solid var(--gold); border-radius: 50%; overflow: hidden; background: #000; box-shadow: 0 2px 10px rgba(0, 0, 0, .7); }
.por img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; transform: scale(1.5); transform-origin: 50% 20%; }
.por b { position: absolute; right: -2px; bottom: -2px; min-width: 20px; height: 20px; border-radius: 10px; background: #2a1f12; border: 1px solid var(--gold2); color: var(--gold2); font: 600 11px/18px var(--sans); text-align: center; }
.pname { font-family: var(--font); font-size: 16px; color: var(--text); letter-spacing: 2px; text-shadow: 0 1px 3px #000; }
.ptitle { font-size: 11px; color: var(--text2); text-shadow: 0 1px 2px #000; }
.xp { width: 120px; height: 3px; background: rgba(0, 0, 0, .6); margin-top: 4px; border: 1px solid rgba(180, 140, 78, .4); }
.xp i { display: block; height: 100%; background: var(--gold2); }
.hud-tr { position: absolute; right: calc(10px + env(safe-area-inset-right)); top: calc(8px + var(--safe-t)); text-align: right; }
.area { font-family: var(--font); font-size: 15px; color: var(--gold2); letter-spacing: 2px; text-shadow: 0 1px 3px #000; }
.coord { font-size: 10px; color: var(--dim); text-shadow: 0 1px 2px #000; }
.ib { margin-top: 6px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line2); background: rgba(20, 16, 12, .75); color: var(--text); font-size: 18px; }
.banner { position: absolute; left: 0; right: 0; top: 22%; text-align: center; opacity: 0; transition: opacity 1s; }
.banner.show { opacity: 1; }
.banner .b1 { font-family: var(--font); font-size: 34px; letter-spacing: 12px; color: #e8d3a6; text-shadow: 0 2px 16px #000, 0 0 2px #000; }
.banner .b2 { font-family: var(--font); font-size: 14px; letter-spacing: 4px; color: var(--text2); margin-top: 6px; text-shadow: 0 1px 6px #000; }
.npc-tip { position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); max-width: min(86vw, 520px); background: rgba(14, 11, 8, .86); border: 1px solid var(--line2); border-radius: 4px; padding: 8px 14px; text-align: center; }
.nt-n { font-family: var(--font); color: var(--gold2); font-size: 14px; letter-spacing: 2px; }
.nt-l { font-family: var(--font); color: var(--text); font-size: 14px; margin-top: 4px; line-height: 1.7; }

.hud-bottom { position: absolute; left: 50%; bottom: calc(8px + var(--safe-b)); transform: translateX(-50%); display: flex; align-items: flex-end; gap: 8px; }
.orb { position: relative; width: 66px; height: 66px; border-radius: 50%; overflow: hidden; border: 2px solid #4a3a24; background: radial-gradient(circle at 35% 30%, #2a2219, #0c0a08); box-shadow: inset 0 0 12px #000, 0 2px 10px rgba(0, 0, 0, .7); }
.orb-in { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; text-decoration: none; }
.orb i { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; transition: height .25s; }
.orb.hp i { background: radial-gradient(circle at 40% 30%, #a83a2a, #4a120c 70%); }
.orb.mp i { background: radial-gradient(circle at 40% 30%, #3e6a78, #11252c 70%); }
.orb span { position: absolute; inset: 0; display: grid; place-items: center; font: 600 13px var(--sans); color: #f3e7c9; text-shadow: 0 1px 2px #000; }
.orb em { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-style: normal; font-size: 9px; color: rgba(240, 225, 190, .65); }
.belt { display: flex; gap: 4px; margin-bottom: 4px; }
.pot { width: 34px; height: 34px; border: 1px solid var(--line2); background: rgba(20, 16, 12, .8); color: var(--dim); font-size: 11px; border-radius: 3px; }
.sys { display: flex; gap: 4px; margin-bottom: 4px; }
.sb { width: 30px; height: 30px; border: 1px solid var(--line2); background: rgba(20, 16, 12, .8); color: var(--text2); font-family: var(--font); border-radius: 3px; }
.sb:disabled, .sk:disabled { opacity: .45; }
.skills { position: absolute; right: calc(16px + env(safe-area-inset-right)); bottom: calc(18px + var(--safe-b)); width: 170px; height: 170px; }
.sk { position: absolute; border-radius: 50%; border: 2px solid #5a4529; background: radial-gradient(circle at 35% 30%, #3a2e20, #120e0a); color: var(--gold2); font-family: var(--font); box-shadow: 0 2px 10px rgba(0, 0, 0, .7); }
.sk.main { right: 0; bottom: 0; width: 82px; height: 82px; font-size: 24px; }
.sk.s1 { right: 92px; bottom: 2px; width: 54px; height: 54px; font-size: 16px; }
.sk.s2 { right: 76px; bottom: 70px; width: 54px; height: 54px; font-size: 16px; }
.sk.s3 { right: 10px; bottom: 96px; width: 54px; height: 54px; font-size: 16px; }
.sk:active:not(:disabled) { transform: scale(.94); }
.joy { position: absolute; left: calc(26px + env(safe-area-inset-left)); bottom: calc(26px + var(--safe-b)); width: 128px; height: 128px; border-radius: 50%; border: 1px solid rgba(180, 140, 78, .35); background: radial-gradient(circle, rgba(30, 24, 18, .35), rgba(10, 8, 6, .15)); touch-action: none; }
.joy i { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(210, 170, 98, .55), rgba(80, 60, 30, .5)); border: 1px solid rgba(210, 170, 98, .6); }
.fps { display: none; position: absolute; left: 50%; top: calc(4px + var(--safe-t)); transform: translateX(-50%); font-size: 10px; color: var(--dim); }
.menu { position: absolute; inset: 0; background: rgba(6, 5, 4, .78); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.menu .mt { font-family: var(--font); font-size: 26px; letter-spacing: 10px; color: var(--gold2); margin-bottom: 8px; }
.menu .btn { min-width: 200px; text-align: center; padding: 10px; font-family: var(--font); letter-spacing: 3px; }
.menu .note { margin-top: 12px; font-size: 12px; color: var(--dim); text-align: center; line-height: 1.8; max-width: 360px; }
.click-fx { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border: 2px solid rgba(210, 170, 98, .9); border-radius: 50%; pointer-events: none; animation: clk .5s ease-out forwards; z-index: 9; }
@keyframes clk { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
@media (max-width: 700px) {
  .orb { width: 56px; height: 56px; } .sys { display: none; } .belt .pot { width: 30px; height: 30px; }
  .hud-bottom { bottom: calc(150px + var(--safe-b)); left: 50%; }
  .skills { transform: scale(.88); transform-origin: 100% 100%; } .joy { width: 112px; height: 112px; }
  .banner .b1 { font-size: 26px; letter-spacing: 8px; }
}
@media (pointer: fine) and (min-width: 900px) { .joy { display: none; } }

.dbg .fps { display: block; }
@media (max-width: 700px) and (orientation: portrait) { .npc-tip { bottom: 230px; } .belt { flex-direction: row; } }
@media (max-width: 700px) {
  .heroes { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .hc .n { font-size: 13px; padding: 14px 5px 4px; } .hc .n small { font-size: 10px; }
  .pick-ft { position: sticky; bottom: 0; background: linear-gradient(transparent, rgba(10, 8, 6, .95) 30%); padding: 14px 0 4px; }
}

/* ---- 模块 2 · 战斗 ---- */
#dmgLayer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.dmg { position: absolute; left: 0; top: 0; font: 700 17px var(--sans); color: #e9dcc0; text-shadow: 0 1px 2px #000, 0 0 4px #000; white-space: nowrap; will-change: transform; }
.dmg.crit { color: #f0b54a; font-size: 24px; }
.dmg.crit::after { content: '!'; }
.dmg.in { color: #d24a3a; font-size: 18px; }
.dmg.heal { color: #7fc48a; }
.mplate { position: absolute; left: 0; top: 0; text-align: center; pointer-events: none; }
.mplate b { display: block; font: 500 11px var(--font); color: #d9b46a; text-shadow: 0 1px 2px #000; letter-spacing: 1px; }
.mplate i { display: block; width: 64px; height: 4px; margin: 2px auto 0; background: rgba(0,0,0,.7); border: 1px solid rgba(0,0,0,.8); }
.mplate s { display: block; height: 100%; background: #9a2e22; text-decoration: none; }
#tgtBar { position: absolute; left: 50%; top: calc(10px + var(--safe-t)); transform: translateX(-50%); width: min(56vw, 360px); text-align: center; pointer-events: none; }
#tgtBar .tn { font: 500 13px var(--font); color: #e3d2ac; letter-spacing: 2px; text-shadow: 0 1px 3px #000; }
#tgtBar i { display: block; height: 8px; margin-top: 3px; background: rgba(0,0,0,.72); border: 1px solid #4a3a24; }
#tgtBar s { display: block; height: 100%; background: linear-gradient(#a5382a, #5e1810); text-decoration: none; transition: width .15s; }
#tgtBar .tv { font-size: 10px; color: var(--dim); margin-top: 1px; text-shadow: 0 1px 2px #000; }
#tgtBar.boss { width: min(74vw, 480px); }
#tgtBar.boss .tn { color: #e8a54a; font-size: 15px; }
#tgtBar.boss i { height: 11px; border-color: #7a5a2a; }
.kills { font-size: 10px; color: var(--text2); text-shadow: 0 1px 2px #000; }
.dead-ov { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(circle, rgba(60,8,4,.25), rgba(20,2,0,.7)); pointer-events: none; }
.dead-ov .d1 { font-family: var(--font); font-size: 40px; letter-spacing: 14px; color: #b23a2a; text-shadow: 0 2px 18px #000; }
.dead-ov .d2 { font-family: var(--font); font-size: 14px; color: var(--text2); margin-top: 10px; letter-spacing: 3px; }
.hurt-fx { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 80px rgba(160,20,10,.55); opacity: 0; transition: opacity .35s; }
.hurt-fx.on { opacity: 1; transition: none; }
.sk.main.on { border-color: #b58a46; box-shadow: 0 0 14px rgba(200,150,70,.5); }
@media (max-width: 700px) { #tgtBar { top: calc(54px + var(--safe-t)); } }

/* ---- 模块 3 · 技能 ---- */
.sk { overflow: hidden; }
.sk .ic { position: relative; z-index: 1; }
.sk::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(rgba(0,0,0,.72) var(--cd, 0deg), transparent 0); z-index: 2; pointer-events: none; }
.sk .cdn { position: absolute; inset: 0; display: grid; place-items: center; z-index: 3; font: 600 15px var(--sans); color: #f1e2bd; text-shadow: 0 1px 3px #000; pointer-events: none; }
.sk kbd { position: absolute; right: 6px; bottom: 3px; z-index: 3; font: 9px var(--sans); color: rgba(230,210,170,.55); }
.sk.nomp .ic { color: #5d7f9a; }
.sk.deny { animation: deny .3s; }
@keyframes deny { 0%, 100% { transform: none; } 30% { transform: translateX(-3px); } 70% { transform: translateX(3px); } }
@media (pointer: coarse) { .sk kbd { display: none; } }
.sk-tip { position: absolute; right: 16px; bottom: 210px; width: min(78vw, 300px); background: rgba(14,11,8,.94); border: 1px solid var(--line2); border-radius: 4px; padding: 10px 12px; pointer-events: none; }
.sk-tip b { font-family: var(--font); color: var(--gold2); font-size: 15px; letter-spacing: 2px; }
.sk-tip small { display: block; color: #6f9ab0; font-size: 11px; margin: 2px 0 4px; }
.sk-tip p { font-size: 12px; color: var(--text); line-height: 1.7; margin: 0; }
.dmg.dot { color: #9cbf5c; font-size: 13px; }
.skl { margin-top: 10px; display: grid; gap: 6px; }
.sk-i { display: flex; gap: 8px; align-items: flex-start; }
.sk-i > b { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid #5a4529; background: radial-gradient(circle at 35% 30%, #3a2e20, #120e0a); color: var(--gold2); font: 14px/26px var(--font); text-align: center; }
.sk-i em { font-style: normal; font-family: var(--font); color: var(--text); font-size: 13px; }
.sk-i em small { color: var(--dim); font-size: 10px; font-family: var(--sans); }
.sk-i p { margin: 1px 0 0; font-size: 11px; color: var(--text2); line-height: 1.5; }
@media (max-width: 700px) { .sk-i p { display: none; } .skl { grid-template-columns: 1fr; gap: 3px; } }
.sk.cool .ic { opacity: .3; }

/* ---- 模块 4 · 掉落 ---- */
#lootLayer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.loot-lb { position: absolute; left: 0; top: 0; padding: 1px 6px; background: rgba(8,6,4,.78); border: 1px solid rgba(120,100,70,.45); font: 500 11px var(--font); color: #d8ccb2; white-space: nowrap; pointer-events: auto; cursor: pointer; text-shadow: 0 1px 2px #000; }
.loot-lb.qg { color: #c9a24f; }
.loot-lb.q3, .loot-lb.q4 { border-color: currentColor; font-weight: 700; }
.feed { position: absolute; left: calc(12px + env(safe-area-inset-left)); top: calc(92px + var(--safe-t)); display: flex; flex-direction: column; gap: 2px; pointer-events: none; }
.fd { font: 500 12px var(--font); text-shadow: 0 1px 2px #000, 0 0 3px #000; transition: opacity .6s; }
.fd.out { opacity: 0; }
.gold-t { font-size: 11px; color: #c9a24f; text-shadow: 0 1px 2px #000; }
.ib.bag { display: block; margin-left: auto; font-family: var(--font); font-size: 15px; color: var(--gold2); position: relative; }
.ib.bag.alert::after { content: ''; position: absolute; right: 1px; top: 1px; width: 9px; height: 9px; border-radius: 50%; background: #c9a24f; box-shadow: 0 0 6px #c9a24f; }
.pot { position: relative; overflow: hidden; padding: 0; }
.pot i { position: absolute; left: 30%; right: 30%; bottom: 4px; top: 30%; border-radius: 3px 3px 6px 6px; opacity: .7; }
.pot span { position: relative; font-family: var(--font); font-size: 13px; color: #efe2c4; text-shadow: 0 1px 2px #000; }
.pot em { position: absolute; right: 2px; bottom: 0; font: 600 10px var(--sans); color: #f1e6c8; font-style: normal; text-shadow: 0 1px 2px #000; }
.pot.empty { opacity: .4; }
.pot:active { transform: scale(.92); }
/* ---- 模块 5 · 行囊 ---- */
.inv { position: absolute; inset: 0; z-index: 20; background: rgba(8,6,5,.97); pointer-events: auto; display: flex; flex-direction: column; padding: calc(8px + var(--safe-t)) 10px 10px; overflow: auto; }
.inv-hd { display: flex; align-items: center; gap: 12px; padding: 4px 4px 8px; border-bottom: 1px solid var(--line2); }
.inv-hd b { font-family: var(--font); font-size: 20px; letter-spacing: 8px; color: var(--gold2); }
.inv-hd .gold { color: #c9a24f; font-size: 13px; } .inv-hd .cnt { color: var(--dim); font-size: 12px; }
.inv-hd .x { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line2); background: rgba(20,16,12,.8); color: var(--text); font-size: 16px; }
.inv-bd { display: flex; gap: 14px; padding-top: 10px; flex: 1; min-height: 0; }
.inv .lc { width: 300px; flex: none; } .inv .rc { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.eq { position: relative; height: 210px; border: 1px solid var(--line); background: radial-gradient(circle at 50% 40%, rgba(60,46,30,.35), rgba(10,8,6,.6)); }
.eq-por { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; object-fit: cover; opacity: .55; filter: grayscale(.4); }
.cell { position: relative; aspect-ratio: 1; border: 1px solid #3a3022; background: rgba(18,14,10,.85); border-radius: 3px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; }
.cell .ci { font-family: var(--font); font-size: 15px; color: var(--text); line-height: 1; }
.cell .cn { font-size: 9px; color: var(--dim); margin-top: 2px; white-space: nowrap; }
.cell .ph { font-family: var(--font); font-size: 18px; color: rgba(180,150,100,.25); }
.cell .up { position: absolute; right: 2px; top: 0; color: #8fc46a; font-size: 12px; }
.cell.no { opacity: .45; }
.cell.sel { box-shadow: 0 0 0 2px #e0c27a inset; }
.cell.q1 { background: rgba(30,36,48,.85); } .cell.q2 { background: rgba(44,40,20,.85); } .cell.q3 { background: rgba(50,34,16,.88); } .cell.q4 { background: rgba(26,42,24,.88); }
.slot { position: absolute; width: 52px; }
.s-weapon { left: 12px; top: 72px; } .s-armor { left: 50%; margin-left: -26px; bottom: 8px; } .s-helm { left: 50%; margin-left: -26px; top: 8px; }
.s-boots { right: 12px; top: 72px; } .s-ring1 { left: 12px; bottom: 8px; } .s-ring2 { right: 12px; bottom: 8px; }
.stats { margin-top: 8px; border: 1px solid var(--line); padding: 6px 10px; background: rgba(14,11,8,.7); }
.sr { display: flex; justify-content: space-between; font-size: 12px; line-height: 1.85; color: var(--text2); } .sr b { color: var(--text); font-weight: 500; }
.ibelt { margin-top: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.bp { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text2); }
.bp b { width: 20px; height: 20px; border-radius: 3px; display: grid; place-items: center; font: 11px var(--font); color: #f1e6c8; }
.bag { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.det { border: 1px solid var(--line); background: rgba(14,11,8,.7); padding: 8px 10px; min-height: 120px; display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.det .hint { font-size: 12px; color: var(--dim); line-height: 1.8; }
.card { min-width: 200px; max-width: 280px; flex: 1; }
.card .cn { font-family: var(--font); font-size: 16px; letter-spacing: 1px; margin-bottom: 2px; }
.card .l { font-size: 12px; line-height: 1.7; color: var(--text); }
.card .l.dim { color: var(--dim); font-size: 11px; } .card .l.aff { color: #8fa9d6; } .card .l.bad { color: #c0503c; } .card .l.lore { color: #a8946c; font-style: italic; font-family: var(--font); margin-top: 4px; }
.card.sm { opacity: .78; } .card.sm .cn { font-size: 13px; }
.cmp-h { width: 100%; font-size: 10px; color: var(--dim); letter-spacing: 2px; border-top: 1px dashed var(--line); padding-top: 4px; }
.det .acts { width: 100%; display: flex; gap: 8px; }
.det .acts .btn { min-width: 90px; text-align: center; }
@media (max-width: 700px) {
  .inv-bd { flex-direction: column; } .inv .lc { width: auto; }
  .eq { height: 190px; } .bag { grid-template-columns: repeat(6, 1fr); }
  .stats { font-size: 11px; } .card { min-width: 0; max-width: none; }
  .feed { top: calc(120px + var(--safe-t)); }
}
@media (max-width: 700px) {
  .det.has { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; max-height: 58vh; overflow: auto; background: rgba(12,9,7,.98); border-top: 1px solid var(--line2); padding: 12px 14px calc(12px + var(--safe-b)); box-shadow: 0 -10px 30px rgba(0,0,0,.7); }
  .det:not(.has) { min-height: 0; }
}
.det .btn.ghost { margin-left: auto; }

/* ---- 模块 6 · 角色 ---- */
.hud-tl .por { pointer-events: auto; cursor: pointer; }
.hud-tl .por.pts::after, .sb.pts::after { content: '+'; position: absolute; left: -4px; top: -4px; width: 18px; height: 18px; border-radius: 50%; background: #c9a24f; color: #1a120a; font: 700 13px/18px var(--sans); text-align: center; box-shadow: 0 0 8px #c9a24f; animation: pulse 1.4s infinite; }
.sb { position: relative; }
@keyframes pulse { 50% { transform: scale(1.15); } }
.dmg.xp { color: #b9a46a; font-size: 12px; }
.dmg.lvup { color: #e6c46e; font: 700 22px var(--font); letter-spacing: 6px; }
.ch-bd { display: flex; gap: 18px; padding-top: 12px; }
.ch-l { width: 260px; flex: none; text-align: center; }
.ch-por { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; border: 2px solid #5a4529; }
.ch-lv { font-family: var(--font); font-size: 20px; color: var(--gold2); margin-top: 8px; letter-spacing: 3px; }
.ch-lv small { font-family: var(--sans); font-size: 11px; color: var(--dim); letter-spacing: 0; }
.ch-xp { height: 6px; margin: 6px 20px; background: rgba(0,0,0,.6); border: 1px solid #4a3a24; } .ch-xp i { display: block; height: 100%; background: var(--gold2); }
.ch-q { font-family: var(--font); font-size: 13px; color: var(--text2); margin: 12px 10px; line-height: 1.8; }
.ch-r { flex: 1; min-width: 0; max-width: 560px; }
.cs-hd { font-family: var(--font); color: var(--gold2); letter-spacing: 4px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.cs-hd .pts { font-family: var(--sans); letter-spacing: 0; font-size: 12px; color: var(--dim); } .cs-hd .pts.on { color: #e0c27a; }
.cs-row { display: grid; grid-template-columns: 28px 64px 1fr 34px 34px; align-items: center; gap: 6px; padding: 6px 4px; border-bottom: 1px solid rgba(90,70,40,.25); }
.cs-row b { font-family: var(--font); font-size: 18px; color: var(--text); }
.cs-row.main b { color: #e0c27a; }
.cs-row .v { font: 600 16px var(--sans); color: var(--text); } .cs-row .v em { font-style: normal; color: #8fc46a; font-size: 13px; }
.cs-row small { font-size: 11px; color: var(--dim); line-height: 1.4; }
.pm { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line2); background: rgba(30,24,16,.9); color: var(--gold2); font-size: 18px; }
.pm:disabled { opacity: .3; }
.cs-act { display: flex; gap: 8px; margin: 10px 0; flex-wrap: wrap; } .cs-act .btn { min-width: 96px; text-align: center; }
@media (max-width: 700px) {
  .ch-bd { flex-direction: column; gap: 6px; } .ch-l { width: auto; display: grid; grid-template-columns: 76px 1fr; text-align: left; gap: 0 10px; align-items: center; }
  .ch-por { width: 76px; height: 76px; grid-row: span 3; } .ch-lv { margin: 0; font-size: 17px; } .ch-xp { margin: 4px 0; } .ch-q { margin: 2px 0; font-size: 11px; }
  .cs-row { grid-template-columns: 24px 54px 1fr 32px 32px; } .cs-row small { font-size: 10px; }
}

/* ---- 模块 7 · 对话 ---- */
.npc-tip { pointer-events: auto; }
.nt-talk { margin-top: 8px; padding: 6px 22px; border: 1px solid var(--gold); background: linear-gradient(#5e4322, #3a2914); color: #f3e2bd; font-family: var(--font); font-size: 15px; letter-spacing: 4px; border-radius: 3px; position: relative; }
.nt-talk kbd { font: 9px var(--sans); color: rgba(240,220,180,.55); margin-left: 6px; letter-spacing: 0; }
.nt-talk.fresh::before { content: '!'; position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: #c9a24f; color: #1a120a; font: 700 12px/18px var(--sans); letter-spacing: 0; box-shadow: 0 0 8px #c9a24f; animation: pulse 1.4s infinite; }
@media (pointer: coarse) { .nt-talk kbd { display: none; } }
#hud.talking > :not(.dlg):not(#dmgLayer):not(.feed) { opacity: 0; pointer-events: none !important; transition: opacity .3s; }
.dlg { position: absolute; inset: 0; z-index: 18; pointer-events: auto; display: flex; align-items: flex-end; justify-content: center; background: linear-gradient(transparent 45%, rgba(4,3,2,.75)); }
.dlg-box { position: relative; width: min(94vw, 860px); margin-bottom: calc(14px + var(--safe-b)); display: flex; gap: 14px; align-items: flex-start; background: rgba(14,11,8,.95); border: 1px solid var(--line2); border-top: 2px solid #6e5430; padding: 14px 16px 12px; box-shadow: 0 10px 40px rgba(0,0,0,.8); }
.dlg-por { width: 110px; height: 110px; flex: none; object-fit: cover; border: 1px solid #5a4529; filter: sepia(.25) contrast(1.05); }
.dlg-box.me { flex-direction: row-reverse; } .dlg-box.me .dlg-n { text-align: right; }
.dlg-main { flex: 1; min-width: 0; }
.dlg-n { font-family: var(--font); font-size: 18px; color: var(--gold2); letter-spacing: 3px; }
.dlg-n small { font-size: 12px; color: var(--text2); margin-left: 10px; letter-spacing: 1px; }
.dlg-t { font-family: var(--font); font-size: 16px; line-height: 1.95; color: var(--text); margin-top: 6px; min-height: 3.9em; white-space: pre-wrap; }
.dlg-t.narr { color: #b8aa8c; font-style: italic; }
.dlg-opts { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.dlg-opt { text-align: left; padding: 7px 12px; background: rgba(36,28,18,.85); border: 1px solid #4a3a24; color: #e6d6b2; font-family: var(--font); font-size: 15px; border-radius: 2px; cursor: pointer; }
.dlg-opt em { font-style: normal; font: 600 11px var(--sans); color: var(--dim); margin-right: 10px; }
.dlg-opt:hover, .dlg-opt:active { background: rgba(70,52,28,.9); border-color: var(--gold); }
.dlg-opt.seen { color: #9a8d74; }
.dlg-opt.leave { color: #a99c82; }
.dlg-cont { font-size: 11px; color: var(--dim); text-align: right; }
.dlg-more { position: absolute; right: 16px; bottom: 6px; color: var(--gold2); font-size: 11px; animation: pulse 1.2s infinite; }
.dlg-x { position: absolute; right: 6px; top: 6px; width: 28px; height: 28px; border: 0; background: transparent; color: var(--dim); font-size: 14px; }
@media (max-width: 700px) {
  .dlg-box { padding: 10px 12px; gap: 10px; } .dlg-por { width: 64px; height: 64px; }
  .dlg-n { font-size: 15px; } .dlg-n small { display: block; margin: 0; font-size: 11px; }
  .dlg-t { font-size: 14px; line-height: 1.85; min-height: 5.5em; } .dlg-opt { font-size: 14px; padding: 9px 10px; }
}

/* ---- 模块 8 · 任务 ---- */
#qLayer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.q-track { position: absolute; right: calc(58px + env(safe-area-inset-right)); top: calc(8px + var(--safe-t)); max-width: 260px; text-align: right; padding: 4px 10px 5px; background: linear-gradient(90deg, transparent, rgba(10,8,6,.72)); pointer-events: auto; cursor: pointer; }
.q-track b { display: block; font: 500 14px var(--font); color: #e0c27a; letter-spacing: 1px; text-shadow: 0 1px 3px #000; }
.q-track b.main { color: #e8a54a; } .q-track b.secret { color: #c09ae0; }
.q-track span { display: block; font-size: 12px; color: var(--text); line-height: 1.55; text-shadow: 0 1px 2px #000; }
.q-track small { display: block; font-size: 10px; color: var(--dim); }
.hud-tr { display: flex; flex-direction: column; align-items: flex-end; }
.ibs { display: flex; flex-direction: column; align-items: flex-end; }
.q-pin { position: absolute; left: 0; top: 0; text-align: center; pointer-events: none; }
.q-pin b { display: block; color: #e0c27a; font-size: 18px; text-shadow: 0 0 8px rgba(224,194,122,.8), 0 1px 2px #000; animation: bob 1.4s ease-in-out infinite; }
.q-pin span { font: 500 11px var(--font); color: #e6d6b2; background: rgba(8,6,4,.7); padding: 0 6px; white-space: nowrap; }
@keyframes bob { 50% { transform: translateY(-5px); } }
.q-arrow { position: absolute; left: 0; top: 0; text-align: center; pointer-events: none; }
.q-arrow i { display: block; font-style: normal; font-size: 26px; color: #e0c27a; text-shadow: 0 0 10px rgba(224,194,122,.7), 0 1px 3px #000; }
.q-arrow span { font: 600 10px var(--sans); color: #e6d6b2; text-shadow: 0 1px 2px #000; }
.q-head { position: absolute; left: 0; top: 0; font: 700 26px var(--font); text-shadow: 0 0 10px currentColor, 0 2px 3px #000; pointer-events: none; will-change: transform; }
.q-head i { display: block; font-style: normal; animation: bob 1.6s ease-in-out infinite; }
.q-head.new { color: #e0c27a; } .q-head.rdy { color: #9ccf6e; }
.q-lb { position: absolute; left: 0; top: 0; padding: 1px 6px; background: rgba(40,28,12,.85); border: 1px solid #b08a46; font: 500 11px var(--font); color: #f0d9a2; white-space: nowrap; pointer-events: none; }
.q-lb.lore { border-color: #7a6a52; color: #cbbd9e; background: rgba(20,16,12,.85); }
.lore-card { position: absolute; left: 50%; top: 18%; transform: translate(-50%, -10px); width: min(88vw, 460px); background: rgba(16,12,9,.93); border: 1px solid var(--line2); border-left: 3px solid #8a6a3a; padding: 10px 16px 12px; opacity: 0; transition: opacity .6s, transform .6s; pointer-events: none; }
.lore-card.show { opacity: 1; transform: translate(-50%, 0); }
.lore-card small { font-size: 10px; letter-spacing: 3px; color: var(--dim); }
.lore-card b { display: block; font: 500 18px var(--font); color: var(--gold2); letter-spacing: 3px; margin: 2px 0 4px; }
.lore-card p { margin: 0; font: 14px/1.9 var(--font); color: var(--text); }
.narr { position: absolute; left: 50%; bottom: 34%; transform: translateX(-50%); width: min(90vw, 620px); text-align: center; font: italic 16px/1.9 var(--font); color: #d8cbb0; text-shadow: 0 1px 4px #000, 0 0 10px #000; opacity: 0; transition: opacity .8s; pointer-events: none; }
.narr.show { opacity: 1; }
.qp-tabs { display: flex; gap: 4px; } .qp-tabs button { padding: 5px 14px; border: 1px solid var(--line2); background: rgba(20,16,12,.8); color: var(--text2); font-family: var(--font); letter-spacing: 2px; }
.qp-tabs button.on { color: var(--gold2); border-color: var(--gold); background: rgba(60,44,22,.8); }
.qp-bd { display: flex; gap: 14px; padding-top: 10px; min-height: 0; flex: 1; }
.qp-l { width: 280px; flex: none; display: flex; flex-direction: column; gap: 4px; overflow: auto; }
.qi { padding: 7px 10px; border: 1px solid #3a3022; background: rgba(18,14,10,.85); cursor: pointer; }
.qi b { display: block; font: 500 14px var(--font); color: var(--text); } .qi.main b { color: #e8a54a; } .qi.secret b { color: #c09ae0; } .qi.secret { border-left: 2px solid #8a64b0; }
.qi small { font-size: 11px; color: var(--dim); }
.qi.sel { border-color: var(--gold); background: rgba(50,38,20,.85); } .qi.done { opacity: .55; }
.qp-d { flex: 1; min-width: 0; border: 1px solid var(--line); background: rgba(14,11,8,.7); padding: 12px 16px; overflow: auto; }
.qd-n { font: 500 20px var(--font); color: var(--gold2); letter-spacing: 3px; } .qd-n small { display: block; font: 11px var(--sans); color: var(--dim); letter-spacing: 0; margin-top: 2px; }
.qd-desc { font: 14px/1.9 var(--font); color: var(--text2); }
.qd-steps { margin: 8px 0; } .qs { font-size: 13px; line-height: 2; color: var(--dim); } .qs.cur { color: #e6d6b2; } .qs.ok { color: #8fae74; }
.qd-rw { font-size: 12px; color: #c9a24f; margin: 8px 0; }
.qd-done { font: italic 13px/1.8 var(--font); color: #a8946c; border-top: 1px dashed var(--line); padding-top: 6px; }
.qp-j { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; overflow: auto; }
.jn { border-left: 2px solid #6a5434; padding: 4px 12px; } .jn.slip { border-color: #8a7a5a; } .jn.quest { border-color: #9ccf6e; }
.jn small { font-size: 10px; color: var(--dim); letter-spacing: 2px; } .jn b { display: block; font: 500 15px var(--font); color: var(--gold2); }
.jn p { margin: 2px 0 0; font: 13px/1.8 var(--font); color: var(--text2); }
@media (max-width: 700px) {
  .q-track { top: calc(118px + var(--safe-t)); right: 8px; max-width: 200px; }
  .q-track span { font-size: 11px; }
  .qp-bd { flex-direction: column; } .qp-l { width: auto; max-height: 34vh; }
  .lore-card { top: 24%; } .narr { bottom: 40%; font-size: 14px; }
}

/* ---- 模块 9 · 存档 ---- */
.sv { margin: 8px 0; padding: 8px 12px; border: 1px solid #5a4529; border-left: 3px solid var(--gold); background: rgba(40,30,16,.6); }
.sv b { font-family: var(--font); color: var(--gold2); font-size: 15px; letter-spacing: 2px; margin-right: 10px; }
.sv span { font-size: 12px; color: var(--text); } .sv small { display: block; font-size: 11px; color: var(--dim); margin-top: 2px; }
.sv.none { border-left-color: #4a3a24; color: var(--dim); font-size: 12px; background: rgba(20,16,12,.5); }
.hc .lv { position: absolute; left: 4px; top: 4px; font: 600 10px var(--sans); padding: 1px 6px; background: rgba(60,44,20,.9); border: 1px solid var(--gold); color: #f0d9a2; }
.sv-btns { display: flex; gap: 6px; flex-wrap: wrap; } .btn.sm { padding: 6px 10px; font-size: 12px; }
.pick-ft { gap: 10px; flex-wrap: wrap; }
.save-tip { position: absolute; right: 14px; bottom: calc(100px + var(--safe-b)); font: 12px var(--font); color: #b9a98a; opacity: 0; transition: opacity .5s; pointer-events: none; text-shadow: 0 1px 2px #000; }
.save-tip.show { opacity: 1; }

/* 模块9 · 选人页溢出修正：子项不收缩，整页滚动 */
#pick > * { flex-shrink: 0; }
#pick .pick-ft { position: sticky; bottom: calc(-12px - var(--safe-b)); background: linear-gradient(transparent, rgba(10, 8, 6, .96) 30%); padding: 14px 0 8px; margin-top: 4px; z-index: 2; }

/* ---------------- 模块 10 · 地图切换 / 驿亭 / 地名 */
#fade { position: fixed; inset: 0; z-index: 90; background: #050403; opacity: 0; pointer-events: none; transition: opacity .45s ease; }
#fade.on { opacity: 1; pointer-events: auto; }
#travelLayer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.tv-lbl { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 5px; white-space: nowrap; font: 500 12px var(--font); letter-spacing: 1px; color: #d8ccb0; text-shadow: 0 1px 3px #000; }
.tv-lbl span { background: rgba(8, 6, 4, .66); border: 1px solid rgba(160, 140, 100, .28); padding: 1px 7px; border-radius: 2px; }
.tv-lbl.wp b { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: rgba(40, 64, 56, .85); border: 1px solid #6f9585; color: #cfe3d8; }
.tv-lbl.wp.dim b { background: rgba(30, 30, 28, .8); border-color: #555; color: #888; } .tv-lbl.wp.dim span { color: #8a8270; }
.tv-lbl.ex span { color: #e2cf9f; border-color: rgba(201, 162, 79, .45); }
.tv-lbl.ex.locked span { color: #b98272; border-color: rgba(150, 70, 55, .45); }
.area-bn { position: absolute; top: calc(52px + var(--safe-t)); right: 14px; font: 500 15px var(--font); letter-spacing: 6px; color: #d8c9a6; text-shadow: 0 1px 6px #000; opacity: 0; transform: translateY(-4px); transition: opacity .6s, transform .6s; pointer-events: none; }
.area-bn.first::after { content: '新发现'; margin-left: 8px; font-size: 10px; letter-spacing: 1px; color: #1a120a; background: #b9985a; padding: 1px 5px; vertical-align: 2px; }
.area-bn.show { opacity: 1; transform: none; }
.ib.tv { color: #cfe3d8; border-color: #6f9585; background: rgba(32, 52, 46, .85); animation: pulse 1.6s infinite; }
.tvp .tv-bd { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; padding-top: 10px; }
.tv-map { border: 1px solid var(--line2); background: rgba(24, 20, 16, .85); border-radius: 4px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.tv-map.cur { border-color: #6f9585; }
.tv-mh b { font-family: var(--font); font-size: 17px; letter-spacing: 3px; color: var(--gold2); display: block; } .tv-mh small { font-size: 11px; color: var(--text2); }
.tv-wp { display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 8px; border: 1px solid var(--line2); background: rgba(14, 12, 10, .8); color: var(--text); border-radius: 3px; }
.tv-wp > b { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(40, 64, 56, .85); border: 1px solid #6f9585; color: #cfe3d8; font-family: var(--font); }
.tv-wp em { font-style: normal; font-family: var(--font); font-size: 15px; letter-spacing: 2px; } .tv-wp em small { color: #8fb3a2; font-size: 11px; letter-spacing: 0; }
.tv-wp p { margin: 2px 0 0; font-size: 12px; color: var(--text2); line-height: 1.6; }
.tv-wp:not(:disabled):hover { border-color: #6f9585; background: rgba(30, 44, 38, .8); }
.tv-wp.off { opacity: .5; } .tv-wp.off > b { background: #222; border-color: #555; color: #777; }
.tv-wp.here { border-color: #6f9585; } .tv-wp:disabled { cursor: default; }
.tv-ft { margin-top: 12px; font-size: 12px; color: var(--dim); line-height: 1.7; }
.tv-ask { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 30; width: min(88vw, 380px); pointer-events: auto; background: rgba(14, 11, 8, .97); border: 1px solid var(--gold); border-radius: 4px; padding: 16px 18px; text-align: center; box-shadow: 0 10px 40px #000; }
.tv-ask b { font-family: var(--font); font-size: 19px; letter-spacing: 3px; color: var(--gold2); } .tv-ask p { font-size: 13px; color: var(--text2); line-height: 1.8; }
.tv-ask div { display: flex; gap: 10px; justify-content: center; } .tv-ask .btn.primary { font-size: 15px; padding: 8px 22px; }
/* 地名：顶部居中淡显；追踪栏下移让出右上地名行 */
.area-bn { top: calc(64px + var(--safe-t)); right: auto; left: 50%; transform: translate(-50%, -4px); font-size: 17px; letter-spacing: 8px; }
.area-bn.show { transform: translate(-50%, 0); }
@media (min-width: 701px) { .q-track { top: calc(66px + var(--safe-t)); } }
@media (max-width: 720px), (orientation: portrait) { .area-bn { top: calc(88px + var(--safe-t)); font-size: 15px; } }

/* ---------------- 模块 11 · 首领战 */
#tgtBar .ph { font: 500 11px var(--font); letter-spacing: 3px; color: #b89a64; margin-top: 1px; text-shadow: 0 1px 2px #000; }
#tgtBar.enr s { background: linear-gradient(#c2401f, #6a120a); animation: enr 0.9s ease-in-out infinite; }
#tgtBar.enr .ph { color: #e0603a; }
@keyframes enr { 50% { filter: brightness(1.4); } }
.p-st { font: 500 11px var(--font); color: #c2503a; text-shadow: 0 1px 2px #000; min-height: 0; }

/* ---------------- 模块 12 · 小地图 / 舆图 */
.mini { position: relative; width: 116px; height: 116px; border-radius: 50%; border: 2px solid #5a4529; box-shadow: 0 2px 12px rgba(0,0,0,.75), inset 0 0 18px rgba(0,0,0,.8); overflow: hidden; background: #0c0a08; cursor: pointer; pointer-events: auto; margin-bottom: 4px; }
.mini canvas { width: 100%; height: 100%; display: block; }
.mini b { position: absolute; left: 50%; bottom: 1px; transform: translateX(-50%); font: 600 10px var(--font); color: #c9a86a; text-shadow: 0 1px 2px #000; }
.mapp .bm-bd { display: flex; gap: 12px; padding-top: 10px; flex: 1; min-height: 0; }
.bm-wrap { flex: 1; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; }
.bm-cv { border: 1px solid #5a4529; box-shadow: 0 4px 20px #000; image-rendering: auto; }
.bm-side { width: 170px; flex: none; display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text2); }
.bm-side p { font-size: 11px; color: var(--dim); line-height: 1.7; }
.bm-lg { display: flex; align-items: center; gap: 8px; }
.bm-lg i { width: 10px; height: 10px; border: 1px solid #000; flex: none; }
.lg-npc { background: #e3c98a; border-radius: 50%; } .lg-wp { background: #8fc4ad; transform: rotate(45deg); } .lg-ex { background: #e2cf9f; } .lg-q { background: #f0c860; border-radius: 50%; box-shadow: 0 0 0 2px rgba(240,200,96,.4); } .lg-mon { background: #b8402e; border-radius: 50%; }
@media (max-width: 700px) {
  .mini { width: 92px; height: 92px; }
  .mapp .bm-bd { flex-direction: column; } .bm-side { width: auto; flex-direction: row; flex-wrap: wrap; gap: 4px 12px; } .bm-side p { width: 100%; margin: 0; }
}

/* ---------------- 模块 13 · 商店 / 寄存 */
.shp .sh-bd { display: flex; gap: 14px; padding-top: 10px; flex: 1; min-height: 0; }
.shp .sh-bd > div { flex: 1; min-width: 0; }
.shp .sh-bd > .det { max-width: 340px; }
.sh-h { display: flex; align-items: center; gap: 10px; font-family: var(--font); color: var(--gold2); letter-spacing: 2px; margin-bottom: 8px; }
.sh-h small { font-family: var(--sans); color: var(--dim); letter-spacing: 0; font-size: 11px; } .sh-h .btn { margin-left: auto; }
.sh-grid { grid-template-columns: repeat(6, 1fr) !important; }
.cell .pr { position: absolute; left: 2px; bottom: 1px; font-style: normal; font-size: 9px; color: #c9a24f; text-shadow: 0 1px 1px #000; }
.cell .du { position: absolute; left: 0; bottom: 0; height: 2px; background: #b8402e; }
.cell.broken { filter: grayscale(.8) brightness(.7); }
.sh-pots { display: flex; flex-direction: column; gap: 8px; }
.sh-pot { display: flex; align-items: center; gap: 10px; text-align: left; padding: 8px 10px; border: 1px solid var(--line2); background: rgba(18,14,10,.85); color: var(--text); border-radius: 3px; }
.sh-pot:hover { border-color: var(--gold); }
.sh-pot > b { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font); color: #f2e2c0; }
.sh-pot.charm > b { background: #7a6a2a; }
.sh-pot em { font-style: normal; font-family: var(--font); font-size: 15px; } .sh-pot em small { font-family: var(--sans); color: var(--dim); font-size: 11px; }
.sh-pot p { margin: 2px 0 0; font-size: 12px; color: var(--text2); } .sh-pot > div { flex: 1; }
.sh-pot .pr { color: #c9a24f; font-size: 13px; white-space: nowrap; }
.sh-rep { display: flex; flex-direction: column; gap: 8px; }
.rp { display: grid; grid-template-columns: 1fr 120px 56px 64px; gap: 10px; align-items: center; font-size: 13px; }
.rp i { height: 6px; background: rgba(0,0,0,.6); border: 1px solid #3a3022; } .rp s { display: block; height: 100%; background: #8a9a5a; } .rp s.lo { background: #b8402e; }
.rp span { color: var(--dim); font-size: 11px; } .rp em { font-style: normal; color: #c9a24f; font-size: 12px; text-align: right; }
.sh-msg { margin: 8px 4px 0; padding: 6px 10px; border-left: 2px solid #8a9a5a; background: rgba(40,44,30,.5); color: #cfd8b8; font-size: 13px; }
.sh-msg.bad { border-color: #b8402e; background: rgba(60,24,18,.5); color: #e0b0a0; }
.dlg-opt.shop { color: #c9a24f; }
@media (max-width: 700px) {
  .shp .sh-bd { flex-direction: column; } .shp .sh-bd > .det { max-width: none; }
  .rp { grid-template-columns: 1fr 70px 50px 52px; gap: 6px; font-size: 12px; }
}

/* ---------------- 模块 14 · 腐化 */
.corr { position: relative; width: 120px; height: 12px; margin-top: 4px; background: rgba(0,0,0,.6); border: 1px solid rgba(110,140,90,.35); pointer-events: auto; cursor: pointer; }
.corr i { position: absolute; left: 0; top: 0; bottom: 0; background: #8a9a84; transition: width .3s; }
.corr span { position: absolute; left: 4px; top: 0; font: 500 9px/11px var(--font); color: #d8e0c8; text-shadow: 0 1px 2px #000; white-space: nowrap; letter-spacing: 1px; }
.corr.hi { box-shadow: 0 0 8px rgba(110,160,70,.5); }
.corr-fx { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, transparent 45%, rgba(20,40,14,.55) 85%, rgba(6,14,4,.85)); transition: opacity 1s; mix-blend-mode: multiply; }
.corr-fx.t2 { background: radial-gradient(ellipse at center, rgba(30,50,20,.12) 30%, rgba(20,40,14,.6) 75%, rgba(4,10,2,.92)); animation: corrp 4s ease-in-out infinite; }
.corr-fx.t3 { animation-duration: 2.2s; }
@keyframes corrp { 50% { filter: brightness(1.25) hue-rotate(-10deg); } }
#whisper { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
#whisper .wh { position: absolute; font: italic 15px var(--font); letter-spacing: 3px; color: rgba(170,200,140,.0); text-shadow: 0 0 8px rgba(80,120,50,.6); animation: wh 4.2s ease-in-out forwards; white-space: nowrap; }
@keyframes wh { 0% { color: rgba(170,200,140,0); transform: translateX(-6px); } 30% { color: rgba(170,200,140,.75); } 70% { color: rgba(170,200,140,.55); } 100% { color: rgba(170,200,140,0); transform: translateX(10px); } }
.sk.sc { right: 128px; bottom: 82px; width: 44px; height: 44px; font-size: 15px; color: #9cbf7a; border-color: #3e5a34; background: radial-gradient(circle at 35% 30%, #24301e, #0c100a); }
.sk.sc.full { opacity: .4; }
@media (max-width: 700px) {
  .q-track { top: calc(84px + var(--safe-t)); right: auto; left: 8px; text-align: left; background: linear-gradient(90deg, rgba(10,8,6,.72), transparent); max-width: 210px; }
  .feed { top: calc(150px + var(--safe-t)); }
  .mapp .bm-wrap { flex: 1; }
}
@media (min-width: 701px) { .q-track { top: calc(196px + var(--safe-t)); } }

/* ---------------- 模块 15 · 技能树 */
.tlp .tl-bd { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding-top: 10px; }
.tl-col { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line2); background: rgba(22,18,14,.8); border-radius: 4px; padding: 8px; position: relative; }
.tl-hd { display: flex; gap: 8px; align-items: center; padding-bottom: 6px; border-bottom: 1px solid var(--line2); }
.tl-hd > b { width: 34px; height: 34px; border-radius: 50%; border: 1px solid #5a4529; background: radial-gradient(circle at 35% 30%, #3a2e20, #120e0a); color: var(--gold2); font: 16px/32px var(--font); text-align: center; flex: none; }
.tl-hd em { font-style: normal; font-family: var(--font); color: var(--text); font-size: 15px; display: block; } .tl-hd small { color: var(--dim); font-size: 11px; }
.tl-n { position: relative; text-align: left; padding: 6px 8px 6px 10px; border: 1px solid #3a3022; background: rgba(12,10,8,.85); color: var(--text2); border-radius: 3px; }
.tl-n + .tl-n::before { content: ''; position: absolute; left: 50%; top: -7px; width: 2px; height: 6px; background: #3a3022; }
.tl-n.on + .tl-n::before { background: #8a6a36; }
.tl-n em { font-style: normal; font-family: var(--font); font-size: 14px; color: var(--text); letter-spacing: 2px; }
.tl-n p { margin: 2px 0 0; font-size: 11px; line-height: 1.5; } .tl-n small { font-size: 10px; color: #7a6a52; }
.tl-n .tl-r { position: absolute; right: 6px; top: 5px; font: 600 11px var(--sans); color: var(--dim); }
.tl-n.on { border-color: #8a6a36; background: rgba(46,34,18,.85); } .tl-n.on .tl-r { color: var(--gold2); }
.tl-n.max { border-color: var(--gold); box-shadow: inset 0 0 10px rgba(201,162,79,.18); }
.tl-n.cap em { color: #e8a54a; } .tl-n.cap.on { border-color: #e8a54a; box-shadow: 0 0 10px rgba(232,165,74,.35); }
.tl-n.lock { opacity: .45; }
.tl-n:not(:disabled):hover { border-color: var(--gold); color: var(--text); }
.inv-hd .pts-on { color: #8fc46a; }
.btn.tl-open { margin-left: auto; } .btn.tl-open.pts { border-color: #8fc46a; color: #b8e090; }
.btn.tl-open + .x { margin-left: 8px; }
.sk.cap { border-color: #b8843a; box-shadow: 0 0 10px rgba(232,165,74,.35), 0 2px 10px rgba(0,0,0,.7); }
@media (max-width: 700px) { .tlp .tl-bd { grid-template-columns: 1fr; } .tl-col { padding: 6px; } }

/* ---------------- 模块 16 · 声音设置 */
.au { width: 100%; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line2); display: flex; flex-direction: column; gap: 6px; }
.au-hd { display: flex; align-items: center; justify-content: space-between; font-family: var(--font); color: var(--gold2); letter-spacing: 3px; }
.au-r { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text2); }
.au-r span { width: 48px; flex: none; } .au-r input { flex: 1; accent-color: #b8944a; }
.menu { overflow: auto; justify-content: flex-start; padding: calc(24px + var(--safe-t)) 16px 24px; z-index: 25; pointer-events: auto; }
.menu > * { flex-shrink: 0; } .menu .note { max-width: 520px; } .menu .au { max-width: 320px; }
.menu .au .btn { min-width: 0; padding: 4px 12px; letter-spacing: 1px; }
.menu { background: rgba(6, 5, 4, .93); }
@media (max-width: 700px) { .tlp .inv-hd { flex-wrap: wrap; gap: 6px 10px; } .tlp .inv-hd .cnt { display: none; } .tlp .inv-hd .gold { white-space: nowrap; } .tlp .inv-hd .btn { margin-left: auto; } }

/* ================= 模块 17 · 副本 */
.dg-bar { position: absolute; left: 50%; top: calc(64px + var(--safe-t)); transform: translateX(-50%); padding: 4px 16px; font: 500 14px var(--font); letter-spacing: 3px; color: #d9c49a; background: linear-gradient(90deg, transparent, rgba(30, 18, 12, .85), transparent); text-shadow: 0 1px 4px #000; pointer-events: none; z-index: 3; }
.tv-lbl.dg span { color: #e0b46a; border-color: rgba(224, 180, 106, .5); }
/* ================= 模块 19 · 过场 / 阅读 */
.cine { position: absolute; inset: 0; z-index: 60; pointer-events: auto; }
.cine .cn-bar { position: absolute; left: 0; right: 0; height: 0; background: #000; transition: height .6s ease; }
.cine .cn-bar.t { top: 0; } .cine .cn-bar.b { bottom: 0; }
.cine.on .cn-bar { height: 11vh; }
.cine.black { background: #050403; transition: background .6s; }
.cine .cn-card { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 1s; pointer-events: none; }
.cine .cn-card.show { opacity: 1; }
.cine .cn-card b { font: 400 54px var(--font); letter-spacing: 26px; color: #d8c08e; text-shadow: 0 0 30px rgba(0, 0, 0, .9); padding-left: 26px; }
.cine .cn-card small { margin-top: 14px; font: 15px var(--font); letter-spacing: 8px; color: var(--text2); }
.cine .cn-sub { position: absolute; left: 50%; bottom: calc(11vh + 18px); transform: translateX(-50%); width: min(86vw, 760px); text-align: center; font: 18px/1.9 var(--font); color: #e6dac0; text-shadow: 0 1px 4px #000, 0 0 12px #000; pointer-events: none; }
.cine .cn-sub em { display: block; font-style: normal; font-size: 12px; letter-spacing: 6px; color: #a8916a; margin-bottom: 2px; }
.cine .cn-skip { position: absolute; right: calc(16px + env(safe-area-inset-right)); top: calc(11vh + 10px); background: rgba(0, 0, 0, .45); border: 1px solid var(--line2); color: var(--text2); padding: 5px 14px; font: 13px var(--font); letter-spacing: 2px; border-radius: 3px; }
#hud.cine > *:not(#dmgLayer) { visibility: hidden; }
.reader { position: absolute; inset: 0; z-index: 55; background: rgba(5, 4, 3, .82); display: flex; align-items: center; justify-content: center; padding: 16px; }
.rd-box { width: min(92vw, 560px); max-height: 86vh; overflow: auto; background: linear-gradient(#2a2219, #1c1712); border: 1px solid #5a4630; box-shadow: 0 10px 40px #000, inset 0 0 60px rgba(0, 0, 0, .5); padding: 14px 26px 16px; position: relative; }
.rd-box::before, .rd-box::after { content: ''; position: absolute; left: 0; right: 0; height: 8px; background: linear-gradient(#4a3824, #2b2016); }
.rd-box::before { top: 0; } .rd-box::after { bottom: 0; }
.rd-box.slip { background: repeating-linear-gradient(90deg, #3a2f20 0 26px, #33291c 26px 28px); }
.rd-hd { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.rd-hd small { font-size: 11px; letter-spacing: 4px; color: var(--dim); }
.rd-hd .x { background: none; border: 0; color: var(--text2); font-size: 18px; }
.rd-t { display: block; text-align: center; font: 500 24px var(--font); letter-spacing: 8px; color: var(--gold2); margin: 8px 0 12px; }
.rd-p p { margin: 0 0 8px; font: 16px/2.1 var(--font); color: #ddd0b4; text-indent: 2em; }
.rd-ft { display: flex; justify-content: space-between; align-items: center; margin: 12px 0 6px; font-size: 12px; color: var(--dim); letter-spacing: 4px; }
.qp-j .jn { cursor: pointer; } .qp-j .jn:hover { background: rgba(255, 255, 255, .03); }
.lore-card { pointer-events: auto; cursor: pointer; }
/* ================= 模块 18 · 终局 */
.ending { position: absolute; inset: 0; z-index: 70; background: #000; overflow: hidden; }
.ed-cv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ed-sub { position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%); width: min(86vw, 760px); text-align: center; font: 19px/1.9 var(--font); color: #eadcbc; text-shadow: 0 1px 6px #000; opacity: 0; transition: opacity 1.2s; }
.ed-sub.show { opacity: 1; }
.ed-sub em { display: block; font-style: normal; font-size: 12px; letter-spacing: 6px; color: #a8916a; }
.ed-skip { position: absolute; right: 16px; top: calc(14px + var(--safe-t)); background: rgba(0, 0, 0, .5); border: 1px solid var(--line2); color: var(--text2); padding: 5px 14px; font: 13px var(--font); border-radius: 3px; z-index: 2; }
.ending.done .ed-cv { filter: brightness(.45) blur(1px); transition: filter 1.5s; }
.ed-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(92vw, 560px); max-height: 92vh; overflow: auto; text-align: center; background: rgba(12, 10, 8, .86); border: 1px solid #5a4630; padding: 18px 22px; animation: edIn 1.2s ease; }
@keyframes edIn { from { opacity: 0; transform: translate(-50%, -46%); } }
.ed-t { font: 400 30px var(--font); letter-spacing: 10px; color: var(--gold2); }
.ed-t small { display: block; font-size: 14px; letter-spacing: 12px; color: var(--text2); margin-top: 4px; }
.ed-st { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 14px 0; }
.ed-st span { font: 15px var(--font); color: var(--text); border: 1px solid var(--line2); padding: 5px 2px; }
.ed-st i { display: block; font-style: normal; font-size: 11px; color: var(--dim); letter-spacing: 3px; }
.ed-next { border-top: 1px solid var(--line2); padding-top: 10px; }
.ed-next b { font: 500 20px var(--font); letter-spacing: 6px; color: #c9a26a; }
.ed-next p { margin: 6px 0; font: 14px/1.9 var(--font); color: var(--text2); }
.ed-next .soon { color: var(--dim); font-size: 12px; letter-spacing: 3px; }
.ed-btns { display: flex; gap: 10px; justify-content: center; margin-top: 12px; }
/* ================= 模块 20 · 设置 / 引导 / 全屏 */
.stp .st-bd { overflow: auto; padding: 4px 16px 20px; flex: 1; }
.st-h { margin: 14px 0 6px; font: 500 14px var(--font); letter-spacing: 4px; color: var(--gold2); border-bottom: 1px solid var(--line2); padding-bottom: 4px; }
.st-r { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 13px; color: var(--text); flex-wrap: wrap; }
.st-c { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.st-c small { color: var(--dim); font-size: 11px; }
.st-note { font-size: 11px; color: var(--dim); line-height: 1.7; }
.seg { background: rgba(30, 25, 19, .9); border: 1px solid var(--line2); color: var(--text2); padding: 5px 12px; border-radius: 3px; font-size: 13px; min-width: 44px; }
.seg.on { border-color: var(--gold); color: #f0dcae; background: linear-gradient(#5a4122, #3a2a16); }
.ib.fs { font-size: 15px; }
body.joy-right .joy { left: auto; right: calc(26px + env(safe-area-inset-right)); }
body.joy-right .skills { right: auto; left: calc(16px + env(safe-area-inset-left)); transform: scaleX(-1); }
body.joy-right .skills .sk > * { transform: scaleX(-1); display: inline-block; }
.skills { transform-origin: bottom right; scale: var(--btnK, 1); }
body.joy-right .skills { transform-origin: bottom left; }
.joy { scale: var(--btnK, 1); transform-origin: bottom left; }
body.no-dmg .dmg:not(.lvup):not(.heal) { display: none; }
body.dbg-fps .fps { display: block; }
.tut { position: absolute; left: 0; right: 0; margin: 0 auto; top: calc(48% + var(--safe-t)); z-index: 30; width: min(88vw, 400px); pointer-events: none; }
.tu-box { pointer-events: auto; background: rgba(16, 12, 9, .92); border: 1px solid #6a5232; border-top: 3px solid #b48c4e; padding: 10px 14px 12px; box-shadow: 0 6px 24px rgba(0, 0, 0, .6); animation: tuIn .5s ease; }
@keyframes tuIn { from { opacity: 0; } }
.tu-box small { font-size: 10px; letter-spacing: 3px; color: var(--dim); }
.tu-box b { display: block; font: 500 18px var(--font); letter-spacing: 4px; color: var(--gold2); margin: 2px 0 4px; }
.tu-box p { margin: 0 0 8px; font-size: 13px; line-height: 1.8; color: var(--text); }
.tu-ft { display: flex; justify-content: space-between; }
.tut[data-step=move]::after, .tut[data-step=attack]::after, .tut[data-step=skill]::after, .tut[data-step=potion]::after { content: ''; position: fixed; width: 150px; height: 150px; border-radius: 50%; border: 2px solid rgba(220, 176, 96, .8); animation: tuPulse 1.2s infinite; pointer-events: none; }
.tut[data-step=move]::after { left: 14px; bottom: 14px; }
.tut[data-step=attack]::after, .tut[data-step=skill]::after { right: 10px; bottom: 10px; width: 190px; height: 190px; }
.tut[data-step=potion]::after { left: 50%; bottom: 4px; width: 200px; height: 60px; margin-left: -100px; border-radius: 8px; }
body.joy-right .tut[data-step=move]::after { left: auto; right: 14px; }
@keyframes tuPulse { 50% { opacity: .3; transform: scale(1.06); } }
@media (max-width: 720px) {
  .cine .cn-sub { font-size: 15px; } .cine .cn-card b { font-size: 38px; letter-spacing: 16px; }
  .ed-st { grid-template-columns: repeat(2, 1fr); } .ed-sub { font-size: 15px; }
  .rd-p p { font-size: 15px; } .tut { top: 40%; }
}
/* 模块 52 · HUD 布局编辑 */
.hud-edit { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.25); touch-action: none; }
.hud-edit .he-bar { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); display: flex; gap: 8px; align-items: center; background: rgba(20,16,12,.92); border: 1px solid #6b5332; padding: 6px 10px; border-radius: 6px; color: #d9c7a0; font-size: 13px; }
.hud-edit .he-box { position: fixed; border: 1px dashed #d2a95e; background: rgba(210,169,94,.12); color: #f0deb6; font-size: 12px; display: flex; align-items: flex-start; gap: 4px; padding: 2px 4px; cursor: move; box-sizing: border-box; }
.hud-edit .he-box button { pointer-events: auto; width: 22px; height: 22px; border: 1px solid #a88a56; background: #2a2118; color: #f0deb6; border-radius: 3px; }
/* 模块 45 / 46 / 48 */
.cell.set { box-shadow: inset 0 0 0 1px #4fa58a; }
.card .l.set { color: #6fc0a2; }
.sr.set span { color: #6fc0a2; }
.ach-st { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ach-st div { background: rgba(255,255,255,.04); padding: 6px 8px; border-radius: 4px; } .ach-st small { display: block; color: #9c8c70; } .ach-st b { color: #e7d3a6; }
.ach-l { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.ach-i { padding: 6px 8px; border: 1px solid #3b3126; border-radius: 4px; opacity: .55; } .ach-i.on { opacity: 1; border-color: #a88a56; }
.ach-i b { display: block; color: #e7d3a6; font-size: 13px; } .ach-i small { color: #9c8c70; font-size: 11px; }
/* 模块 65 · 一次性提示卡 */
.hint-card { position: absolute; right: calc(12px + var(--safe-r, 0px)); top: calc(30% + var(--safe-t, 0px)); z-index: 32; width: min(72vw, 300px); padding: 10px 12px 10px; background: rgba(18, 15, 12, .92); border: 1px solid rgba(201, 162, 79, .55); border-left: 3px solid #c9a24f; color: #d8cdb8; font-size: 13px; line-height: 1.5; box-shadow: 0 6px 18px rgba(0, 0, 0, .5); pointer-events: auto; opacity: 1; transition: opacity .3s, transform .3s; }
.hint-card.pre { opacity: 0; transform: translateX(24px); }
.hint-card small { color: #9a8a6a; letter-spacing: .2em; font-size: 11px; }
.hint-card b { display: block; color: #e6c98a; font-size: 15px; margin: 2px 0 4px; }
.hint-card p { margin: 0 0 8px; }
.hint-card .btn { float: right; }
.hint-card.out { opacity: 0; transform: translateX(20px); transition: .3s; }
#trFloors { flex-direction: column; margin-bottom: 10px; } #trFloors .btn { width: 100%; }
#shopPanel .acts.forge { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 6px; } #shopPanel .acts.forge .btn { width: 100%; white-space: normal; }
/* 模块 88 · 结局图录 */
.end-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.end-i { border: 1px solid rgba(201, 162, 79, .18); padding: 8px 10px; background: rgba(255, 255, 255, .02); color: #6f665a; }
.end-i b { display: block; font-size: 13px; color: #8a7f6c; letter-spacing: 1px; margin-bottom: 4px; }
.end-i p { margin: 0; font-size: 12px; line-height: 1.6; }
.end-i .end-rp { margin-top: 6px; padding: 2px 10px; font-size: 12px; min-height: 0; }
.end-i.on { border-color: rgba(201, 162, 79, .55); color: #cfc4ae; } .end-i.on b { color: #e6c98a; }
@media (max-width: 720px) { .end-g { grid-template-columns: 1fr; } }

/* M110 词缀图鉴 */
.aff-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.aff-i { border: 1px solid rgba(201, 162, 79, .14); padding: 6px 9px; background: rgba(255, 255, 255, .02); color: #6f665a; }
.aff-i b { display: flex; justify-content: space-between; font-size: 13px; color: #7d7466; font-weight: normal; letter-spacing: 1px; }
.aff-i b small { font-size: 11px; color: #5d564c; }
.aff-i p { margin: 3px 0 0; font-size: 12px; line-height: 1.5; }
.aff-i.on { border-color: rgba(201, 162, 79, .35); color: #a99a80; }
.aff-i.on b { color: #c9a24f; }
.aff-i .aff-tip { color: #8d9a86; }
@media (max-width: 720px) { .aff-g { grid-template-columns: repeat(2, 1fr); } }
/* M137 / M139 · 药瓶图标（来自 3D 模型渲染：assets/icons/pot_*.png） */
.pot i.pic, .skin-v2 .pot i.pic { left: 6%; right: 6%; top: 4%; bottom: 8%; border-radius: 0; opacity: 1; background: center/contain no-repeat; }
.pot i.pic + span { display: none; }
.pot[data-t="4"]::after, .pot[data-t="5"]::after { content: ''; position: absolute; inset: 10%; border-radius: 50%; box-shadow: 0 0 10px rgba(220, 180, 100, .35) inset; pointer-events: none; }
.bp b.pic { width: 34px; height: 34px; background: center/contain no-repeat; }
.bp small { display: block; color: var(--dim); font-size: 10px; }
.sh-pl { border: 1px solid var(--line); border-radius: 3px; padding: 6px 8px; background: rgba(18, 14, 10, .7); }
.sh-plh { font-family: var(--font); color: var(--gold2); font-size: 14px; margin-bottom: 4px; } .sh-plh small { font-family: var(--sans); color: var(--dim); font-size: 11px; }
.sh-plr { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sh-pot2 { position: relative; display: flex; flex-direction: column; align-items: center; padding: 4px 2px 3px; border: 1px solid var(--line2); background: rgba(30, 24, 18, .85); color: var(--text); border-radius: 3px; cursor: pointer; }
.sh-pot2:hover { border-color: var(--gold); }
.sh-pot2 .pic { width: 44px; height: 44px; background: center/contain no-repeat; }
.sh-pot2 em { font-style: normal; font-family: var(--font); font-size: 13px; } .sh-pot2 small { color: var(--text2); font-size: 10px; }
.sh-pot2 .pr { color: #c9a24f; font-size: 12px; }
.sh-pot2 u { position: absolute; right: 3px; top: 2px; text-decoration: none; font-size: 10px; color: #f1e6c8; background: rgba(0, 0, 0, .5); padding: 0 3px; border-radius: 2px; }
.sh-pot2.lock { opacity: .38; filter: grayscale(.7); }
.pot-prev img { display: block; width: 140px; height: 140px; margin: 4px auto 6px; }
.pot-prev a.l { color: var(--gold2); margin-top: 8px; display: block; }
.sh-pot2.mix .mx { display: flex; align-items: center; gap: 2px; } .sh-pot2.mix .pic { width: 34px; height: 34px; } .sh-pot2.mix b { color: var(--gold2); }
/* M151 · 腰带长按 / 悬停：该线各级数量 */
.belt-peek { position: fixed; z-index: 60; width: 170px; padding: 6px 8px; background: rgba(20, 16, 12, .94); border: 1px solid #6b5332; border-radius: 4px; pointer-events: none; font-size: 12px; color: var(--text); }
.belt-peek b { font-family: var(--font); color: var(--gold2); font-size: 13px; } .belt-peek small { color: var(--dim); margin-left: 6px; }
.belt-peek div { display: grid; grid-template-columns: 22px 22px 1fr auto; align-items: center; gap: 4px; margin-top: 3px; }
.belt-peek div.z { opacity: .4; } .belt-peek i { width: 22px; height: 22px; background: center/contain no-repeat; }
.belt-peek em { font-style: normal; color: var(--text2); } .belt-peek u { text-decoration: none; color: #f1e6c8; }
/* M156 · 低血提示：腰带格呼吸闪烁（暗红光晕，不刺眼） */
.pot.warn { animation: potWarn 1.1s ease-in-out infinite; }
.pot.warn::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 2px rgba(214, 78, 52, .95), inset 0 0 14px rgba(196, 70, 48, .55), 0 0 14px rgba(196, 70, 48, .75); border-radius: inherit; animation: potWarn2 1.1s ease-in-out infinite; }
@keyframes potWarn { 50% { transform: scale(1.06); } }
@keyframes potWarn2 { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pot.warn, .pot.warn::after { animation: none; } .pot.warn::after { opacity: .9; } }

/* ---- M169 暗黑 3 式纸娃娃物品栏 ---- */
.eq.d3 { height: 340px; background: radial-gradient(ellipse at 50% 55%, rgba(92,66,38,.45), rgba(12,9,7,.85) 70%), linear-gradient(#1a140e, #0c0907); border: 1px solid #5a4630; box-shadow: inset 0 0 30px rgba(0,0,0,.8); }
.eq.d3 .doll { position: absolute; left: 64px; right: 64px; top: 4px; bottom: 4px; }
.eq.d3 .doll-cv { width: 100%; height: 100%; display: block; touch-action: none; outline: none; cursor: grab; }
.eq.d3 .doll-tip { position: absolute; left: 0; right: 0; bottom: 2px; text-align: center; font-size: 10px; color: rgba(210,190,150,.45); pointer-events: none; }
.eq.d3 .doll-grip { position: absolute; left: 0; right: 0; top: 4px; text-align: center; font-size: 11px; color: #c9a24f; letter-spacing: 2px; pointer-events: none; }
.eq.d3 .slot { position: absolute; width: 52px; height: 52px; margin: 0; z-index: 2; box-shadow: 0 0 0 1px #000, inset 0 0 12px rgba(0,0,0,.7); }
.eq.d3 .s-helm { left: 6px; top: 20px; bottom: auto; margin-left: 0; }
.eq.d3 .s-armor { left: 6px; top: 100px; bottom: auto; margin-left: 0; height: 72px; }
.eq.d3 .s-boots { left: 6px; top: 200px; right: auto; bottom: auto; }
.eq.d3 .s-weapon { right: 6px; left: auto; top: 20px; height: 92px; }
.eq.d3 .s-ring1 { right: 6px; left: auto; top: 140px; bottom: auto; }
.eq.d3 .s-ring2 { right: 6px; left: auto; top: 204px; bottom: auto; }
.eq.d3 .slot::before { position: absolute; top: -13px; left: 0; right: 0; text-align: center; font-size: 9px; color: rgba(200,170,120,.55); }
.eq.d3 .s-helm::before { content: '冠'; } .eq.d3 .s-armor::before { content: '甲'; } .eq.d3 .s-boots::before { content: '履'; } .eq.d3 .s-weapon::before { content: '兵'; } .eq.d3 .s-ring1::before, .eq.d3 .s-ring2::before { content: '佩'; }
.inv .lc:has(.eq.d3) { width: 340px; }
@media (max-width: 700px) { .eq.d3 { height: 300px; } .inv .lc:has(.eq.d3) { width: auto; } }

/* R30 · 6 格技能扇形 + 技艺书 */
.skills { width: 230px; height: 230px; }
.sk.s4 { right: 150px; bottom: 54px; width: 48px; height: 48px; font-size: 15px; }
.sk.s5 { right: 134px; bottom: 120px; width: 48px; height: 48px; font-size: 15px; }
.sk.s6 { right: 70px; bottom: 156px; width: 48px; height: 48px; font-size: 15px; }
.sk.sc { right: 4px; bottom: 166px; }
.sk.empty { opacity: .35; }
.tlp { width: min(980px, 96vw); }
.sb-bd { display: grid; grid-template-columns: 1.25fr 1fr; gap: 12px; padding-top: 10px; max-height: 68vh; overflow: auto; }
.sb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sb-col { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line2); background: rgba(22,18,14,.8); border-radius: 4px; padding: 6px; }
.sb-th b { font-family: var(--font); color: var(--gold2); letter-spacing: 2px; } .sb-th small { display: block; color: #9a8a62; font-size: 10px; }
.sb-sk { position: relative; display: flex; gap: 6px; align-items: center; text-align: left; padding: 5px; border: 1px solid #3a3022; background: rgba(12,10,8,.85); color: var(--text2); border-radius: 3px; }
.sb-sk > b { width: 30px; height: 30px; flex: none; border-radius: 50%; border: 1px solid #5a4529; background: radial-gradient(circle at 35% 30%, #3a2e20, #120e0a); color: var(--gold2); font: 14px/28px var(--font); text-align: center; }
.sb-sk em { font-style: normal; font-family: var(--font); color: var(--text); font-size: 13px; display: block; } .sb-sk small { font-size: 10px; color: #b08a4a; }
.sb-sk.sel { border-color: var(--gold); box-shadow: 0 0 8px rgba(200,150,70,.35); } .sb-sk.lock { opacity: .45; } .sb-sk.max > b { border-color: #e8a54a; box-shadow: 0 0 8px rgba(232,165,74,.5); }
.sb-sk kbd { position: absolute; right: 4px; top: 4px; font-size: 9px; color: #e0c27a; border: 1px solid #5a4529; padding: 0 3px; border-radius: 2px; }
.sb-det { border: 1px solid var(--line2); background: rgba(22,18,14,.85); border-radius: 4px; padding: 10px; }
.sb-dh { display: flex; gap: 10px; align-items: center; } .sb-dh > b { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #8a6a36; background: radial-gradient(circle at 35% 30%, #4a3a26, #120e0a); color: var(--gold2); font: 20px/42px var(--font); text-align: center; }
.sb-dh em { font-style: normal; font-family: var(--font); font-size: 17px; color: var(--text); display: block; } .sb-dh small { color: var(--dim); font-size: 11px; }
.sb-desc { font-size: 13px; line-height: 1.6; margin: 8px 0 4px; } .sb-next { font-size: 11px; color: #9ccf6e; margin: 0 0 6px; } .sb-next.cap { color: #e8a54a; }
.sb-act { display: flex; gap: 8px; align-items: center; margin: 6px 0; } .sb-hint { font-size: 11px; color: var(--dim); }
.sb-rh { font-family: var(--font); color: var(--gold2); font-size: 12px; letter-spacing: 2px; margin: 10px 0 4px; border-top: 1px solid var(--line2); padding-top: 6px; }
.sb-runes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sb-ru { text-align: left; padding: 6px; border: 1px solid #3a3022; background: rgba(12,10,8,.85); color: var(--text2); border-radius: 3px; }
.sb-ru em { font-style: normal; font-family: var(--font); color: var(--text); font-size: 13px; } .sb-ru p { margin: 2px 0 0; font-size: 10.5px; line-height: 1.45; } .sb-ru small { font-size: 10px; color: #7a6a52; }
.sb-ru.on { border-color: #9ccf6e; box-shadow: 0 0 8px rgba(156,207,110,.35); } .sb-ru.lock { opacity: .45; }
.sb-bar { display: flex; gap: 6px; } .sb-slot { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #5a4529; background: #120e0a; color: var(--gold2); position: relative; font-family: var(--font); }
.sb-slot kbd { position: absolute; left: -2px; top: -4px; font-size: 9px; } .sb-slot.on { border-color: #9ccf6e; }
@media (max-width: 760px) { .sb-bd { grid-template-columns: 1fr; } .sb-grid { grid-template-columns: 1fr; } }