/*
 * 《幽壤》横屏 HUD 皮肤 v2（模块 20+）——全部由 tools/gen_ui.py 程序化建模的青铜 / 石 / 漆组件贴图组成
 *   启用：<body class="skin-v2">（游戏页默认启用；预览页 hud_preview.html 同用此文件）
 *   布局档：
 *     手机横屏   —— 短边 ≤ 500（如 844×390 / 932×430）：紧凑；腰带居中，系统钮收进右上角竖列
 *     平板横屏   —— 短边 > 500 且宽 ≥ 1000（如 1180×820 / 1366×1024）：全尺寸；腰带含系统钮，左侧日志更宽
 *   单位：--u = 1 个界面单位（手机 0.82px、平板 1.1px），所有尺寸 × var(--u)
 */
body.skin-v2 { --u: 1px; --ui: url("../assets/ui/"); }
@media (orientation: landscape) and (max-height: 500px) { body.skin-v2 { --u: 0.82px; } }
@media (orientation: landscape) and (min-height: 501px) and (min-width: 1000px) { body.skin-v2 { --u: 1.12px; } }

/* ------------------------------------------------------------------ 头像 */
.skin-v2 .hud-tl { left: calc(12px + env(safe-area-inset-left)); top: calc(8px + var(--safe-t)); gap: calc(10 * var(--u)); }
.skin-v2 .por { width: calc(64 * var(--u)); height: calc(64 * var(--u)); border: 0; border-radius: 0; background: none; overflow: visible; box-shadow: none; }
.skin-v2 .por img { position: absolute; left: 14%; top: 14%; width: 72%; height: 72%; clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); transform: none; object-position: center 12%; filter: saturate(.85) contrast(1.05); }
.skin-v2 .por::before { content: ''; position: absolute; inset: -6%; background: url("../assets/ui/portrait_frame.png") center/contain no-repeat; z-index: 2; pointer-events: none; }
.skin-v2 .por b { right: 0; bottom: 1%; width: 26%; min-width: 0; height: 26%; border: 0; background: none; z-index: 3; display: grid; place-items: center; font: 700 calc(11 * var(--u)) var(--font); color: #f0dcae; text-shadow: 0 1px 2px #000; line-height: 1; }
.skin-v2 .pname { font-size: calc(16 * var(--u)); }
.skin-v2 .ptitle { font-size: calc(11 * var(--u)); }
.skin-v2 .xp { position: relative; width: calc(132 * var(--u)); height: calc(10 * var(--u)); border: 0; background: rgba(0,0,0,.55); margin-top: calc(5 * var(--u)); }
.skin-v2 .xp::after { content: ''; position: absolute; inset: -40% -3%; background: url("../assets/ui/xp_bar.png") center/100% 100% no-repeat; pointer-events: none; }
.skin-v2 .xp i { background: linear-gradient(#e2c27a, #8a6a34); }
.skin-v2 .corr { width: calc(132 * var(--u)); height: calc(12 * var(--u)); }

/* ------------------------------------------------------------------ 小地图 */
.skin-v2 .mini { width: calc(124 * var(--u)); height: calc(124 * var(--u)); border: 0; border-radius: 50%; box-shadow: none; background: none; overflow: visible; }
.skin-v2 .mini canvas { position: absolute; inset: 8%; width: 84%; height: 84%; border-radius: 50%; }
.skin-v2 .mini::after { content: ''; position: absolute; inset: -4%; background: url("../assets/ui/minimap_frame.png") center/contain no-repeat; pointer-events: none; }
.skin-v2 .mini b { top: -1%; bottom: auto; z-index: 2; font-size: calc(11 * var(--u)); color: #f0dcae; }
.skin-v2 .area { font-size: calc(15 * var(--u)); margin-top: calc(2 * var(--u)); }

/* ------------------------------------------------------------------ 右上系统圆钮 */
.skin-v2 .ib { width: calc(40 * var(--u)); height: calc(40 * var(--u)); border: 0; border-radius: 50%; background: url("../assets/ui/round_btn.png") center/contain no-repeat; font-family: var(--font); font-size: calc(15 * var(--u)); color: #e3c88e; text-shadow: 0 1px 2px #000; }
.skin-v2 .ib.tv { background: url("../assets/ui/round_btn.png") center/contain no-repeat; filter: hue-rotate(60deg) saturate(.8); }

/* ------------------------------------------------------------------ 底部腰带（石板） */
.skin-v2 .hud-bottom { bottom: calc(2px + var(--safe-b)); gap: calc(6 * var(--u)); align-items: flex-end; padding: 0 calc(90 * var(--u)); }
.skin-v2 .hud-bottom::before { content: ''; position: absolute; left: calc(36 * var(--u)); right: calc(36 * var(--u)); bottom: calc(-4 * var(--u)); height: calc(70 * var(--u)); background: url("../assets/ui/belt_plate.png") center bottom/100% 100% no-repeat; z-index: -1; pointer-events: none; }
.skin-v2 .orb { width: calc(92 * var(--u)); height: calc(92 * var(--u)); border: 0; border-radius: 50%; background: none; box-shadow: none; overflow: visible; position: absolute; bottom: calc(-2 * var(--u)); }
.skin-v2 .orb.hp { left: calc(-4 * var(--u)); } .skin-v2 .orb.mp { right: calc(-4 * var(--u)); }
.skin-v2 .orb { --ob: calc(92 * var(--u)); }
.skin-v2 .orb::before { content: ''; position: absolute; inset: 12.5%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #1c1712, #050403); box-shadow: inset 0 0 calc(10 * var(--u)) #000; }
.skin-v2 .orb-in { inset: 12.5%; }
/* 液体贴图 orb_*.png：320 画布里圆半径 0.375 → 贴图边长 = 整球直径 --ob，底边下移 12.5% 使圆底对齐 */
.skin-v2 .orb i, .skin-v2 .orb.hp i, .skin-v2 .orb.mp i { left: 0; right: 0; bottom: 0; top: auto; border-radius: 0; background-repeat: no-repeat; background-size: var(--ob) var(--ob); background-position: center bottom calc(-.125 * var(--ob)); }
.skin-v2 .orb.hp i { background-image: url("../assets/ui/orb_hp.png"); }
.skin-v2 .orb.mp i { background-image: url("../assets/ui/orb_mp.png"); }
.skin-v2 .orb i::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: calc(3 * var(--u)); background: linear-gradient(rgba(255,220,180,.35), transparent); }
.skin-v2 .orb::after { content: ''; position: absolute; inset: 0; background: url("../assets/ui/orb_glass.png") center/100% 100% no-repeat, url("../assets/ui/orb_frame.png") center/100% 100% no-repeat; pointer-events: none; z-index: 2; }
.skin-v2 .orb span { z-index: 3; font-size: calc(14 * var(--u)); }
.skin-v2 .orb em { z-index: 3; bottom: 20%; font-size: calc(9 * var(--u)); }
.skin-v2 .belt { gap: calc(4 * var(--u)); margin-bottom: calc(6 * var(--u)); }
.skin-v2 .pot { width: calc(42 * var(--u)); height: calc(42 * var(--u)); border: 0; border-radius: 0; background: url("../assets/ui/slot.png") center/contain no-repeat; }
.skin-v2 .pot i { left: 34%; right: 34%; top: 28%; bottom: 20%; }
.skin-v2 .pot span { font-size: calc(13 * var(--u)); }
.skin-v2 .pot em { right: 12%; bottom: 8%; font-size: calc(10 * var(--u)); }
.skin-v2 .sys { gap: calc(3 * var(--u)); margin-bottom: calc(8 * var(--u)); }
.skin-v2 .sb { width: calc(34 * var(--u)); height: calc(34 * var(--u)); border: 0; border-radius: 50%; background: url("../assets/ui/round_btn.png") center/contain no-repeat; color: #e3c88e; font-size: calc(13 * var(--u)); text-shadow: 0 1px 2px #000; }

/* ------------------------------------------------------------------ 技能盘 */
.skin-v2 .skills { width: calc(196 * var(--u)); height: calc(196 * var(--u)); right: calc(14px + env(safe-area-inset-right)); bottom: calc(10px + var(--safe-b)); transform: none; }
.skin-v2 .sk { border: 0; background: none; box-shadow: none; overflow: visible; }
.skin-v2 .sk::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: url("../assets/ui/skill_face.png") center/contain no-repeat; z-index: 0; }
.skin-v2 .sk::after { content: ''; position: absolute; inset: 0; background: url("../assets/ui/skill_frame.png") center/contain no-repeat; z-index: 2; pointer-events: none; }
.skin-v2 .sk.main::after { inset: -2%; background-image: url("../assets/ui/skill_main.png"); }
.skin-v2 .sk.main { width: calc(92 * var(--u)); height: calc(92 * var(--u)); font-size: calc(26 * var(--u)); color: #f0d79a; }
.skin-v2 .sk.s1 { width: calc(60 * var(--u)); height: calc(60 * var(--u)); right: calc(102 * var(--u)); bottom: calc(2 * var(--u)); font-size: calc(17 * var(--u)); }
.skin-v2 .sk.s2 { width: calc(60 * var(--u)); height: calc(60 * var(--u)); right: calc(86 * var(--u)); bottom: calc(78 * var(--u)); font-size: calc(17 * var(--u)); }
.skin-v2 .sk.s3 { width: calc(60 * var(--u)); height: calc(60 * var(--u)); right: calc(12 * var(--u)); bottom: calc(104 * var(--u)); font-size: calc(17 * var(--u)); }
.skin-v2 .sk.sc { width: calc(48 * var(--u)); height: calc(48 * var(--u)); right: calc(142 * var(--u)); bottom: calc(92 * var(--u)); color: #a8cf86; }
.skin-v2 .sk.sc::before { background-image: url("../assets/ui/skill_face_nether.png"); }
.skin-v2 .sk .ic { z-index: 1; text-shadow: 0 1px 3px #000, 0 0 8px rgba(0,0,0,.6); }
.skin-v2 .sk .cdn { inset: 10%; border-radius: 50%; background: conic-gradient(rgba(0,0,0,.72) var(--cd, 0deg), transparent 0); }
.skin-v2 .sk kbd { z-index: 4; right: 14%; bottom: 10%; }
.skin-v2 .sk.cap::after { filter: drop-shadow(0 0 6px rgba(232,165,74,.6)); }

/* ------------------------------------------------------------------ 摇杆 */
.skin-v2 .joy { width: calc(140 * var(--u)); height: calc(140 * var(--u)); left: calc(22px + env(safe-area-inset-left)); bottom: calc(16px + var(--safe-b)); border: 0; background: url("../assets/ui/joy_base.png") center/contain no-repeat; opacity: .92; }
.skin-v2 .joy i { width: calc(62 * var(--u)); height: calc(62 * var(--u)); margin: calc(-31 * var(--u)) 0 0 calc(-31 * var(--u)); border: 0; background: url("../assets/ui/joy_knob.png") center/contain no-repeat; }

/* ------------------------------------------------------------------ 首领血条 / 任务追踪 */
.skin-v2 #tgtBar.boss { width: min(70vw, calc(520 * var(--u))); }
.skin-v2 #tgtBar.boss i { position: relative; height: calc(12 * var(--u)); border: 0; margin: calc(8 * var(--u)) 6% 0; background: rgba(0,0,0,.7); }
.skin-v2 #tgtBar.boss i::after { content: ''; position: absolute; left: -8.5%; right: -8.5%; top: -170%; bottom: -170%; background: url("../assets/ui/boss_bar.png") center/100% 100% no-repeat; pointer-events: none; }
.skin-v2 .q-track { background: url("../assets/ui/quest_scroll.png") center/100% 100% no-repeat; padding: calc(8 * var(--u)) calc(14 * var(--u)) calc(9 * var(--u)) calc(28 * var(--u)); }
.skin-v2 .q-track b { font-size: calc(14 * var(--u)); } .skin-v2 .q-track span { font-size: calc(12 * var(--u)); }

/* ------------------------------------------------------------------ 面板角花（行囊 / 角色 / 设置…） */
.skin-v2 .inv { border: 1px solid #5a4630; }
.skin-v2 .inv::before, .skin-v2 .inv::after { content: ''; position: absolute; width: calc(54 * var(--u)); height: calc(54 * var(--u)); background: url("../assets/ui/panel_corner.png") center/contain no-repeat; pointer-events: none; z-index: 5; }
.skin-v2 .inv::before { left: 0; top: 0; } .skin-v2 .inv::after { right: 0; bottom: 0; transform: rotate(180deg); }

/* ------------------------------------------------------------------ 手机横屏：紧凑——系统钮从腰带移到右上，腰带只留药散，日志缩短 */
@media (orientation: landscape) and (max-height: 500px) {
  .skin-v2 .hud-bottom .sys { display: none; }
  .skin-v2 .hud-bottom { padding: 0 calc(84 * var(--u)); }
  .skin-v2 .hud-bottom::before { left: calc(30 * var(--u)); right: calc(30 * var(--u)); }
  .skin-v2 .hud-tr .ib { margin-top: calc(4 * var(--u)); }
  .skin-v2 .feed { top: calc(84 * var(--u) + var(--safe-t)); max-width: 34vw; }
  .skin-v2 .q-track { max-width: 34vw; }
  .skin-v2 .npc-tip { bottom: calc(96 * var(--u)); }
}
/* ------------------------------------------------------------------ 平板横屏：腰带完整（药散 + 系统钮），技能盘略外扩 */
@media (orientation: landscape) and (min-height: 501px) and (min-width: 1000px) {
  .skin-v2 .hud-bottom .sys { display: flex; }
  .skin-v2 .skills { right: calc(22px + env(safe-area-inset-right)); bottom: calc(18px + var(--safe-b)); }
  .skin-v2 .joy { left: calc(34px + env(safe-area-inset-left)); bottom: calc(26px + var(--safe-b)); }
  .skin-v2 .q-track { max-width: calc(300 * var(--u)); }
}

/* ------------------------------------------------------------------ v2.1 修正：键面层级 / 右上按钮横排 / 任务竹简避让 */
.skin-v2 .sk { isolation: isolate; }
.skin-v2 .sk::before { z-index: -1; }
.skin-v2 .hud-tr { position: absolute; }
.skin-v2 .ibs { position: absolute; top: 0; right: calc(100% + 8 * var(--u)); flex-direction: row; gap: calc(4 * var(--u)); }
.skin-v2 .ibs .ib { margin: 0; }
.skin-v2 .ibs .ib.bag { margin: 0; }
.skin-v2 .q-track { top: calc(8px + 50 * var(--u) + var(--safe-t)); right: calc(10px + 136 * var(--u) + env(safe-area-inset-right)); }
.skin-v2 .hud-bottom::before { height: calc(80 * var(--u)); bottom: calc(-6 * var(--u)); }
.skin-v2 .sk.main { color: #f0d79a; text-shadow: 0 1px 3px #000, 0 0 10px rgba(0,0,0,.8); }
.skin-v2 .sk.sc { right: calc(152 * var(--u)); bottom: calc(100 * var(--u)); }

/* ------------------------------------------------------------------ 手机竖屏：腰带贴底独占一行，摇杆 / 技能盘抬到腰带上方；右上按钮移到小地图下方，不再压住头像 */
@media (orientation: portrait) and (max-width: 700px) {
  body.skin-v2 { --u: 0.9px; }
  .skin-v2 .hud-bottom { bottom: calc(2px + var(--safe-b)); padding: 0 calc(92 * var(--u)); left: 50%; }
  .skin-v2 .hud-bottom::before { left: calc(30 * var(--u)); right: calc(30 * var(--u)); }
  .skin-v2 .pot { width: calc(38 * var(--u)); height: calc(38 * var(--u)); }
  .skin-v2 .hud-bottom .sys { display: none; }
  .skin-v2 .joy { bottom: calc(86px + var(--safe-b)); left: calc(14px + env(safe-area-inset-left)); }
  .skin-v2 .skills { bottom: calc(80px + var(--safe-b)); right: calc(6px + env(safe-area-inset-right)); }
  .skin-v2 .ibs { top: calc(100% + 4px); right: 0; }
  .skin-v2 .hud-tr .area, .skin-v2 .hud-tr .coord, .skin-v2 .hud-tr .kills, .skin-v2 .hud-tr .gold-t { margin-top: calc(44 * var(--u)); }
  .skin-v2 .hud-tr .coord, .skin-v2 .hud-tr .kills, .skin-v2 .hud-tr .gold-t { margin-top: 0; }
  .skin-v2 .q-track { top: calc(78px + var(--safe-t)); right: auto; left: calc(10px + env(safe-area-inset-left)); max-width: 56vw; }
  .skin-v2 .npc-tip { bottom: calc(250px + var(--safe-b)); }
}