/* ===== HUD chế độ PC (html.nu): bình kinh nghiệm tròn + HP/MP bên phải (js/hud.js) =====
   Ngôn ngữ thiết kế: Material / phẳng (màu đặc, không bóng kính, đổ bóng nhẹ, bo góc).
   Bố cục: [bình EXP 64px, số cấp ở giữa] [HP trên / MP dưới] [ngân lượng]; rộng cố định --hud-w (không co theo cửa sổ).
   Thanh HP/MP bắt đầu từ tâm bình, cạnh trái bị khoét cong theo vòng tròn (mask) cách bình --hud-gap.
   Màu viền và màu nước theo hệ ngũ hành: .hud1[data-el=0..4] = Kim, Mộc, Thủy, Hỏa, Thổ. */

html.nu{
  --hud-orb:64px;            /* đường kính bình */
  --hud-gap:3px;             /* khe giữa bình và cạnh cong của thanh */
  --hud-bar-h:13px;
  --hud-hp-top:17px;         /* HP: 17..30, MP: 34..47 -> đối xứng quanh tâm bình (y = 32), khe 4px */
  --hud-mp-top:34px;
  --hud-bar-w:186px;         /* bề rộng CỐ ĐỊNH mỗi thanh tính từ tâm bình (phần nhìn thấy ≈ 151px) */
  --hud-arc:calc(var(--hud-orb) / 2 + var(--hud-gap));   /* điểm xa nhất của cạnh cong (= bán kính khoét 35): chữ căn giữa phần còn lại */
  --hud-fill0:31px;          /* điểm gần nhất của cạnh cong (góc ngoài thanh, |dy| = 15): √(35² − 15²) ≈ 31.6 -> phần đầy bắt đầu đây, 0% bị che hết */
  --hud-dy:53px;             /* phần HUD cao thêm so với dải 17px cũ: các khối bên trái lùi xuống */
  --hud-side:90px;           /* cột bên phải thanh HP/MP (ô ngân lượng ngang hàng HP), gồm khe 6px */
  --hud-w:320px;             /* khung HUD (bình + thanh + ô ngân lượng); cố định, không co theo cửa sổ */
  --hud-name-dy:-8px;        /* .hname chỉ còn 1 dòng (ẩn "Chiêu chính" + ngân lượng): các khối dưới nhích lên */
  --hud-surface:rgba(20,26,24,.78);
  --hud-hp:#e53935;          /* Material Red 600 */
  --hud-mp:#1e88e5;          /* Material Blue 600 */
}

/* màu theo hệ: --el chính (viền, nước), --el-lt sắc nhạt (lớp sóng sau) */
.hud1{--el:#9e9e9e;--el-lt:#e0e0e0}
.hud1[data-el="0"]{--el:#f9c02d;--el-lt:#ffe082}   /* Kim  */
.hud1[data-el="1"]{--el:#43a047;--el-lt:#a5d6a7}   /* Mộc  */
.hud1[data-el="2"]{--el:#1e88e5;--el-lt:#90caf9}   /* Thủy */
.hud1[data-el="3"]{--el:#f4511e;--el-lt:#ffab91}   /* Hỏa  */
.hud1[data-el="4"]{--el:#a1744a;--el-lt:#d7b899}   /* Thổ  */

/* khung HUD: góc trên trái; drop-shadow theo đúng hình (kể cả cạnh cong đã mask) = độ nổi Material */
html.nu .hud1{left:calc(var(--safe-l,0px) + var(--hud-x,6px));right:auto;top:4px;width:var(--hud-w);height:var(--hud-orb);display:block;background:none;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.55))}

/* ---- bình kinh nghiệm (dùng lại .hslot.xp: có sẵn --v = tỉ lệ EXP 0..1) ---- */
html.nu .hud1 .hslot.xp{position:absolute;left:0;top:0;z-index:2;width:var(--hud-orb)!important;height:var(--hud-orb);box-sizing:border-box;
  border:3px solid var(--el);border-image:none;border-radius:50%;overflow:hidden;isolation:isolate;pointer-events:auto;
  background:var(--hud-surface);box-shadow:none}
html.nu .hud1 .hslot.xp i{display:none!important}
/* nước: hai hình vuông bo góc lớn xoay chậm -> mặt nước gợn sóng; đỉnh nằm ở mức (1 − --v) */
html.nu .hud1 .hslot.xp::before,html.nu .hud1 .hslot.xp::after{content:"";position:absolute;left:-50%;width:200%;height:200%;
  top:calc((1 - var(--v,0)) * 104% - 4%);transition:top .6s cubic-bezier(.4,0,.2,1);z-index:0}
html.nu .hud1 .hslot.xp::before{background:var(--el);border-radius:42%;animation:hudWave 7s linear infinite}
html.nu .hud1 .hslot.xp::after{background:var(--el-lt);opacity:.4;border-radius:46%;margin-top:-3px;animation:hudWave 11s linear infinite reverse;z-index:-1}
@keyframes hudWave{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){html.nu .hud1 .hslot.xp::before,html.nu .hud1 .hslot.xp::after{animation:none;border-radius:0}}
/* phần trăm EXP: chữ nhỏ ở đáy bình */
html.nu .hud1 .hslot.xp span{left:0;right:0;top:auto;bottom:8px;z-index:2;font:500 9px/10px var(--font);letter-spacing:.2px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.7)}
html.nu .hud1 .hslot.xp span::before{content:none}

/* ---- số cấp: đè lên tâm bình ---- */
html.nu .hud1 .hcap{position:absolute;left:0;top:0;width:var(--hud-orb);height:var(--hud-orb);background:none;z-index:3;pointer-events:none}
html.nu .hud1 .hcap #lv{left:0;top:0;width:100%;height:100%;display:grid;place-items:center;padding-bottom:5px;box-sizing:border-box;
  font:700 24px/1 var(--font);color:#fff;letter-spacing:-.5px;text-shadow:0 1px 3px rgba(0,0,0,.75),0 0 1px rgba(0,0,0,.9)}

/* ---- HP (trên) / MP (dưới): bắt đầu từ tâm bình, cạnh trái khoét cong theo vòng tròn ---- */
html.nu .hud1 .hslot.hp,html.nu .hud1 .hslot.mp{position:absolute;z-index:1;left:calc(var(--hud-orb) / 2);right:auto;width:var(--hud-bar-w)!important;height:var(--hud-bar-h);
  border:0;border-image:none;border-radius:0 4px 4px 0;overflow:hidden;background:var(--hud-surface);box-shadow:none;
  --cy:calc(var(--hud-orb) / 2 - var(--top));   /* tâm bình theo trục y của chính thanh */
  --cut:calc(var(--hud-orb) / 2 + var(--hud-gap));
  -webkit-mask:radial-gradient(circle var(--cut) at 0 var(--cy),transparent calc(var(--cut) - .5px),#000 calc(var(--cut) + .5px));
          mask:radial-gradient(circle var(--cut) at 0 var(--cy),transparent calc(var(--cut) - .5px),#000 calc(var(--cut) + .5px))}
html.nu .hud1 .hslot.hp{--top:var(--hud-hp-top);top:var(--hud-hp-top)}
html.nu .hud1 .hslot.mp{--top:var(--hud-mp-top);top:var(--hud-mp-top)}
/* phần đầy tính từ cạnh cong: 0% = vừa chạm cạnh cong, 100% = hết thanh */
html.nu .hud1 .hslot.hp i,html.nu .hud1 .hslot.mp i{left:0;top:0;bottom:0;height:auto;
  width:calc(var(--hud-fill0) + (100% - var(--hud-fill0)) * var(--v,0))!important;transition:width .2s cubic-bezier(.4,0,.2,1)}
html.nu .hud1 .hslot.hp i{background:var(--hud-hp)}
html.nu .hud1 .hslot.mp i{background:var(--hud-mp)}
html.nu .hud1 .hslot.hp span,html.nu .hud1 .hslot.mp span{left:var(--hud-arc);right:0;padding:0 6px;text-align:center;
  font:500 10px/var(--hud-bar-h) var(--font);letter-spacing:.2px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6)}

/* ---- ngân lượng: chip Material ngang hàng thanh HP, ở cột bên phải (hud.js chuyển .hgold vào .hud1) ---- */
html.nu .hud1 .hgold{position:absolute;left:calc(var(--hud-orb) / 2 + var(--hud-bar-w) + 6px);right:auto;
  top:calc(var(--hud-hp-top) + var(--hud-bar-h) / 2 - 9px);height:18px;box-sizing:border-box;
  display:flex;align-items:center;gap:1px;padding:0 7px 0 0;border-radius:9px;background:var(--hud-surface);pointer-events:auto;
  font:500 11px/1 var(--font);letter-spacing:.2px;color:#ffe082;font-variant-numeric:tabular-nums;white-space:nowrap}
html.nu .hud1 .hgold img{display:block;flex:none;width:18px;height:18px;image-rendering:pixelated}   /* biểu tượng gốc ui/v2/money2.png */

/* ---- biểu tượng môn phái (hud.js FAC_IC): huy hiệu tròn đè lên góc dưới phải bình EXP, ngay trên tên; màu hệ ngũ hành ---- */
.hfac{display:none}
html.nu .hud1 .hfac:not([hidden]){position:absolute;z-index:4;left:calc(var(--hud-orb) - 12px);top:calc(var(--hud-orb) - 20px);   /* tách khỏi chữ % EXP, đáy huy hiệu không chạm tên */
  display:grid;place-items:center;width:24px;height:24px;border-radius:50%;pointer-events:auto;cursor:default;
  background:color-mix(in srgb,var(--c) 24%,#121816);box-shadow:0 0 0 2px #121816,inset 0 0 0 1.5px var(--c)}
html.nu .hud1 .hfac svg{width:15px;height:15px;fill:none;stroke:var(--c);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}

/* ---- Vượt ải: đã có trong Tự luyện > Chiến đấu -> ẩn nút ở chế độ PC (vẫn giữ trong DOM: Tự luyện và phím F gọi nút này) ---- */
html.nu #jxPush{display:none!important}

/* ---- .hname: chỉ giữ tên (phái · chế độ); ẩn "Chiêu chính" (vẫn còn trong DOM vì code cũ ghi vào #mainSk) ---- */
html.nu .hname small{display:none}
html.nu .hname{left:calc(var(--safe-l,0px) + var(--hud-name-x,6px))}

/* ---- các khối bên trái lùi xuống dưới HUD ---- */
html.nu .hname{top:calc(25px + var(--hud-dy) + var(--safe-t,0px))}   /* cách bình kinh nghiệm 6px */
/* nút Hoạt động thụt vào --hud-acts-in so với mép trái bình EXP (--hud-x đổi theo độ dài tên) */
html.nu .acts{flex-direction:column;align-items:flex-start;gap:6px;top:calc(52px + var(--hud-dy) + var(--hud-name-dy) + var(--safe-t,0px));left:calc(var(--safe-l,0px) + var(--hud-x,6px) + var(--hud-acts-in,6px))}   /* thụt vào so với mép trái bình EXP */
/* dải trạng thái đã chuyển vào HUD (hud.js) -> nhật ký trên sân lên ngay dưới nút Hoạt động */
html.nu #jxChat{top:calc(92px + var(--hud-dy) + var(--hud-name-dy) + var(--safe-t,0px))!important}

/* ---- dải trạng thái dưới thanh MP: chữ nhỏ trên nền mờ viên thuốc, bắt đầu ngay sau huy hiệu môn phái ---- */
html.nu .hud1 #jxStat{position:absolute;left:calc(var(--hud-orb) + 16px);top:calc(var(--hud-mp-top) + var(--hud-bar-h) + 4px);right:auto;z-index:1;
  max-width:calc(var(--hud-orb) / 2 + var(--hud-bar-w) - var(--hud-orb) - 16px + var(--hud-side));height:18px;box-sizing:border-box;padding:0 10px;
  display:block;border:0;border-image:none;border-radius:999px;background:rgba(10,14,12,.55);
  font:500 10.5px/18px var(--font);letter-spacing:.2px;color:#dfe7e2;text-shadow:0 1px 2px rgba(0,0,0,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
html.nu .hud1 #jxStat.adm{background:rgba(198,40,40,.85);color:#fff;pointer-events:auto;cursor:pointer}

/* Dải biểu tượng trạng thái (#jxBuffs, js/buffs.js): PC ngay trên thanh kỹ năng (.jb-bar), Mobile bên phải #jxStat ở cả PC và Mobile; không có nhãn đếm ngược, không bấm được */
#jxBuffs{position:absolute;z-index:6;display:flex;gap:4px;pointer-events:auto}
#jxBuffs[hidden]{display:none}
#jxBuffs.jb-bar{z-index:30}
#jxBuffs .jb{position:relative;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;overflow:hidden;background:rgba(58,70,64,.9);filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));cursor:default}
#jxBuffs .jb img{width:20px;height:20px;object-fit:contain;pointer-events:none}
#jxBuffs .jb-atk{animation:jbPulse 1s ease-in-out infinite}
@keyframes jbPulse{50%{background:rgba(143,227,74,.22)}}
@media (prefers-reduced-motion:reduce){#jxBuffs .jb-atk{animation:none}}
#jxBuffs .jb-tmd{overflow:visible}
/* thanh thời gian còn lại của trạng thái có thời hạn (không có ở vòng sáng) */
#jxBuffs .jb-p{position:absolute;left:2px;right:2px;bottom:-5px;height:3px;border-radius:2px;background:rgba(0,0,0,.6);overflow:hidden;pointer-events:none}
#jxBuffs .jb-p i{display:block;height:100%;width:100%;border-radius:2px;background:#ffd54f;transition:width .45s linear}

/* Nút cạnh ngân lượng (hud.js #hudTools): đổi chế độ hiển thị + Hệ thống; nút #jxDisp và "Mở rộng" ở cột phải ẩn ở PC */
#hudTools{display:none}
html.nu #hudTools{position:absolute;display:flex;gap:4px;transform:translateY(-50%);pointer-events:auto;z-index:2}
html.nu .hud-tb{width:22px;height:22px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:var(--hud-surface,rgba(20,26,24,.88));box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 1px 3px rgba(0,0,0,.4);color:#dfe7e2;transition:color .15s,box-shadow .15s}
html.nu .hud-tb svg{width:13px;height:13px;fill:currentColor}
html.nu .hud-tb:hover{color:#ffd54f;box-shadow:inset 0 0 0 1px rgba(255,213,79,.6),0 1px 3px rgba(0,0,0,.4)}
html.nu .hud-tb:focus-visible{outline:2px solid #ffd54f;outline-offset:2px}
html.nu #jxDisp,html.nu #jxMenu,html.nu #jxOverflow{display:none!important}
/* Mobile: jxshell layout() ghi top nội tuyến cho #jxActs -> giữ vị trí dưới tên như PC */
html.nu .acts{top:calc(52px + var(--hud-dy) + var(--hud-name-dy) + var(--safe-t,0px))!important}
html.nu .acts::before{display:none!important}   /* nền chuyển tối "vùng ngón cái" của Mobile cũ (body.jxthumb / jxland) */