:root{
  /* bảng màu theo client PC Kiếm Thế (layout \ui\…\*.ini): khung đá xám, lòng xám tối trong (45,45,45,224), tiêu đề xanh
     ngọc 170,230,130 (--title), nhãn 148,174,165 (--dim), viền BorderLineColor 110,114,109 — ảnh khung: game/assets/ui/pc */
  --bg:#0e100f; --panel:#202220; --panel2:#272927; --line:#5d625c; --gold:#ecdf9c; --gold2:#8a918a; --title:#aae682;
  --txt:#e8ece6; --dim:#94aea5; --red:#d9483b; --red-t:#f47c6e; --blue:#3f86d8; --green:#66c25a; --purple:#b072e8; --orange:#f09a3a;
  --font:"Segoe UI",Tahoma,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--txt);font:13px/1.4 var(--font);overflow:hidden;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
input{font:inherit}
/* ô đánh dấu theo màu giao diện (ô trắng mặc định của trình duyệt lạc tông với khung nâu-vàng) */
input[type=checkbox]{-webkit-appearance:none;appearance:none;width:16px;height:16px;margin:0 4px 0 0;flex:none;vertical-align:-3px;display:inline-grid;place-content:center;
  border:1px solid var(--gold2);border-radius:3px;background:#0c0907;box-shadow:inset 0 1px 2px #000;cursor:pointer}
input[type=checkbox]:checked{background:linear-gradient(#5b4122,#3a2913);border-color:var(--gold)}
input[type=checkbox]:checked::before{content:"";width:8px;height:4px;border:solid var(--gold);border-width:0 0 2px 2px;transform:translateY(-1px) rotate(-45deg)}
input[type=checkbox]:disabled{opacity:.45;cursor:default}
input[type=checkbox]:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.hidden{display:none!important}
b{font-weight:600}
small{font-size:max(10px,.833em)}   /* <small> mặc định 'smaller' (≈ 0,83em): không nhỏ hơn 10px trong khung chữ 11–12px */

/* ---------- nút ---------- */
.btn{background:linear-gradient(#5b4122,#3a2913);border:1px solid var(--gold2);color:var(--gold);padding:6px 14px;border-radius:3px;text-shadow:0 1px 0 #000}
.btn:hover{filter:brightness(1.2)}
/* nút khoá: vẫn đọc được (≥ 4,5:1), lý do để trong title (chạm trên mobile → toast, ui.js) */

.btn.sm{padding:3px 9px;font-size:12px}
.btn.big{padding:10px 22px;font-size:16px;letter-spacing:.5px}
.btn.red{border-color:#a3392f;color:#ffb3a8;background:linear-gradient(#5b2219,#33130d)}
/* đặt SAU mọi biến thể (.red, .big…) và cao specificity hơn để nút khoá luôn trông khoá */
button.btn:disabled,button.btn.red:disabled,button.btn.on:disabled{opacity:1;cursor:not-allowed;filter:none;color:#a89878;background:#2a2118;border-color:#4a3b26;text-shadow:none}
button.btn:disabled[title]{cursor:help}
.chip{background:rgba(20,14,8,.75);border:1px solid var(--line);color:var(--dim);padding:3px 9px;border-radius:12px;font-size:12px}
.chip.on{color:var(--gold);border-color:var(--gold2)}
.chip{position:relative}
.chip .dot{top:-2px;right:-2px}

/* ---------- boot ---------- */
#boot{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#0a0705 url(../assets/ui/bg-boot.jpg) center/cover}
#boot>*{position:relative}
#boot:before{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(0,0,0,.75))}
#boot .bar{margin-bottom:8vh}
.logo,#create h1,#auth h1{font:700 40px/1 Georgia,"Times New Roman",serif;color:var(--gold);letter-spacing:2px;text-shadow:0 2px 8px #000,0 0 18px rgba(232,192,106,.35);margin:0}
.logo b,#create h1 b,#auth h1 b{color:#fff3d0}
#boot .bar{width:260px;height:6px;background:#2b2116;border:1px solid var(--line)}
#boot .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold2),var(--gold))}
#bootMsg{color:var(--dim)}

/* ---------- tạo nhân vật ---------- */
#create{position:fixed;inset:0;overflow:auto;background:linear-gradient(rgba(10,7,4,.35),rgba(10,7,4,.8)),#0d0a07 url(../assets/ui/bg-create.jpg) center/cover fixed;display:flex;align-items:flex-start;justify-content:center;padding:20px 12px}
.cbox{width:min(880px,100%);background:rgba(14,10,6,.78);border:1px solid var(--line);border-radius:6px;padding:4px 18px 18px;box-shadow:0 8px 40px rgba(0,0,0,.6)}
#create h1{text-align:center;margin:10px 0 18px}
.crow{display:flex;gap:18px;flex-wrap:wrap}
.cprev{flex:0 0 260px;margin:0 auto;align-self:flex-start;text-align:center}
#prevCv{background:radial-gradient(ellipse 30% 12% at 50% 85%,rgba(255,214,120,.35),transparent),url(../assets/ui/bg-create.jpg) 50% 100%/520px auto no-repeat #1a120b;border:1px solid var(--line);border-radius:4px;width:260px;height:260px}
.sexsel{display:flex;gap:6px;justify-content:center;margin-top:8px}
.sexsel button,.facgrid button,.subgrid button{background:var(--panel2);border:1px solid var(--line);padding:6px 10px;border-radius:3px;color:var(--dim)}
.sexsel button.on,.facgrid button.on,.subgrid button.on{border-color:var(--gold);color:var(--gold);background:#3a2a16}
.cform{flex:1 1 360px;display:flex;flex-direction:column;gap:8px}
.cform label{display:flex;flex-direction:column;gap:4px;color:var(--dim)}
.cform input{background:#0e0b08;border:1px solid var(--line);color:var(--txt);padding:8px;border-radius:3px}
.cform input.err{border-color:var(--red-t)}
.cerr{color:var(--red-t);font-size:12px;margin-top:-4px}   /* lỗi tên nhân vật (KT: hộp thông báo «Lỗi nhập liệu») */
.lbl{color:var(--dim);margin-top:4px}
.facgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:5px}
.facgrid button{display:flex;align-items:center;gap:5px;padding:4px 6px;white-space:nowrap;font-size:12px;min-height:36px}
.facgrid button:disabled{color:#8f8068;background:#18120c;cursor:not-allowed}
.facgrid button:disabled i{opacity:.4;filter:grayscale(1)}
.facnote{font-size:11px;color:var(--dim)}
.facgrid button i{flex:none;width:26px;height:26px}
.subgrid{display:flex;gap:6px}
.subgrid button{flex:1}
.cinfo{background:var(--panel);border:1px solid var(--line);padding:8px 10px;border-radius:3px;min-height:86px;color:var(--dim);font-size:12px}
.cinfo b{color:var(--gold)}
#cGo{align-self:center;margin-top:8px}

/* ---------- bố cục game ---------- */
/* icon tiền client PC (\image\ui\002a\item\silver_money.spr / silver_coin.spr 17×14, cỡ gốc — tools/build_pcimg.py money) */
.bac{display:inline-block;width:17px;height:14px;background:url(../assets/ui/pc/silver.webp) no-repeat;margin-right:3px;vertical-align:-2px}
/* Đồng khóa (đồng vàng) / Kim Nguyên Bảo (thỏi vàng) — ví p.dong / p.knb (docs/economy.md) */
.dongi{display:inline-block;width:17px;height:14px;background:url(../assets/ui/pc/coin.webp) no-repeat;margin-right:3px;vertical-align:-2px}
.knbi{display:inline-block;width:14px;height:9px;border-radius:2px 2px 7px 7px;background:linear-gradient(#fff3b0,#f0c040 45%,#a87412);box-shadow:0 -2px 0 -1px #f7d56a;margin-right:4px;vertical-align:0}

#battle{grid-area:battle;position:relative;overflow:hidden;background:#000}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block}
/* tên map = đầu khung bản đồ nhỏ (KT UIMiniMap ghi tên map ở header, không đè lên cảnh — nhãn cổng / NPC ở mép trên không bị che chữ) */
/* hàng buff / trạng thái của nhân vật (KT UIRolePart_BuffList) — dưới khung nhiệm vụ (top đặt bằng JS: UI.buffBar) */
#buffs:empty{display:none}
#buffs .bf{position:relative;width:24px;height:24px;border:1px solid var(--line);border-radius:3px;background:#1a130c center/cover;cursor:pointer;padding:0;overflow:hidden}
#buffs .bf.deb{border-color:#c0503a}
#buffs .bf.txt{font-size:10px;line-height:22px;text-align:center;color:var(--txt)}
#buffs .bf b{position:absolute;right:0;bottom:0;font:600 10px/1 sans-serif;color:#fff;text-shadow:0 0 2px #000,0 0 2px #000;padding:0 1px;background:rgba(0,0,0,.45)}
#buffTip{position:absolute;left:0;top:calc(100% + 4px);width:max-content;max-width:min(260px,calc(100vw - 32px));background:rgba(12,9,6,.94);border:1px solid var(--gold2);border-radius:3px;padding:5px 7px;font-size:11.5px;line-height:1.35;color:var(--txt);z-index:6}
#buffTip b{color:var(--gold)}
#bigMap{position:absolute;inset:0;z-index:7;background:rgba(5,4,2,.82);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:8px}
#bigMap.hidden{display:none}
#bigMap .bmHead{display:flex;align-items:center;gap:10px;width:100%;max-width:100%;justify-content:center}
#bigMap .bmHead b{font:700 16px Georgia,serif;color:var(--gold)}
#bigMap .bmHead small{color:#cfc3a8}
/* khung cuộn của bản đồ khu vực (màn hẹp / phóng to: canvas lớn hơn khung — UIScroll_LocalMap) */
#bmWrap{max-width:100%;max-height:calc(100% - 84px);overflow:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);background:#000;flex:0 1 auto;min-height:0}
#bmCv{display:block;background:#000;cursor:crosshair}
#bigMap .bmFoot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;color:#cfc3a8;font-size:12px;max-width:100%}
#bigMap .bmFoot label{display:inline-flex;align-items:center;gap:4px}
#bigMap .bmFoot input{width:64px;background:#120d08;color:var(--txt);border:1px solid var(--line);border-radius:3px;padding:3px 5px;font-size:12px}
#bmPos{min-width:110px;text-align:center}
#bigMap .bmHead{flex-wrap:wrap;row-gap:4px}
/* tiêu đề / chân bản đồ lớn: nền đặc — chữ HUD (theo dõi nhiệm vụ, thanh chiêu) không lộ ra sau chữ qua lớp phủ bán trong */
#bigMap .bmHead,#bigMap .bmFoot{background:#0d0a07;padding:3px 8px;border-radius:3px;box-sizing:border-box}
@media (max-width:844px),(max-height:500px){#bigMap{background:rgba(5,4,2,.95)}}
#mapLoad{position:absolute;inset:0;background:#000 url(../assets/ui/bg-map.jpg) center/cover;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:12%;pointer-events:none;transition:opacity .45s;z-index:5}
#mapLoad.out{opacity:0}
#mapLoad b{font:700 26px/1.2 Georgia,serif;color:var(--gold);text-shadow:0 2px 6px #000,0 0 14px #000}
#mapLoad small{color:#f3e6c8;text-shadow:0 1px 3px #000}
/* thanh chip: khung không nhận click (chỉ các chip nhận) để chạm vào khoảng trống vẫn đi / chọn quái được */
#deadOv{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:radial-gradient(ellipse at center,rgba(70,0,0,.35),rgba(0,0,0,.7));pointer-events:none}
#deadOv b{font:700 28px/1.2 Georgia,serif;color:#ff6a5a;text-shadow:0 2px 6px #000}
#deadOv small{color:#f3e6c8;font-size:14px;text-shadow:0 1px 3px #000}
#deadOv #deadMed{pointer-events:auto;margin-top:6px;max-width:calc(100% - 32px);line-height:1.25;padding:4px 14px}
#deadOv #deadMed small{display:block;font-size:11px;color:#f3e6c8;text-shadow:none}

#dialog{position:absolute;left:50%;bottom:64px;transform:translateX(-50%);width:min(560px,94%);display:flex;gap:10px;z-index:6;max-height:calc(100% - 80px);background:linear-gradient(rgba(36,26,15,.95),rgba(18,13,8,.95));border:1px solid var(--gold2);border-radius:4px;padding:8px;box-shadow:0 4px 18px #000}
.dnpc{flex:0 0 120px;text-align:center;font-size:12px;color:var(--gold)}
.dnpc canvas{display:block;width:120px;height:140px}   /* bitmap = CSS × dpr, NPC phóng nguyên lần (sprites.js S.crisp) */
.dtxt{flex:1;display:flex;flex-direction:column;gap:4px}
#dlgTitle{color:var(--gold);font-weight:600}
#dlgText{flex:1;white-space:pre-line;color:var(--txt)}
#dlgOk{align-self:flex-end;margin-right:26px}
#dialog .mx{top:2px;right:2px}
#dlgText{overflow:auto;min-height:0}
#dlgOpts{display:flex;flex-direction:column;align-items:stretch;gap:4px;overflow:auto;min-height:0;margin-right:26px}
#dlgOpts:empty{display:none}
#dlgOpts .btn{text-align:left;white-space:normal;flex:none}
#dialog.opts #dlgText{flex:0 0 auto;max-height:5.6em}

/* thanh tab: một hàng cuộn ngang (ui.js dựng theo nhóm) + nút ☰ mở lưới mọi tab — không bao giờ cao hơn 1 hàng */
.dot{position:absolute;top:5px;right:4px;width:7px;height:7px;border-radius:50%;background:var(--red);display:none}
.dot.on{display:block}

/* thiết bị cảm ứng / màn gọn: vùng chạm ≥ 32px */
@media (max-width:820px), (max-height:500px), (pointer:coarse){
  #panel .btn,#mBody .btn,#cfBody .btn,.cfbtn .btn,#panel select,#mBody select,#panel input[type=number],#mBody input[type=number],#bigMap .btn,#dialog .btn{min-height:32px}
  #panel .btn.sm,#mBody .btn.sm{padding:5px 10px}
  #panel button,#mBody button{min-height:32px}
  #panel input[type=checkbox],#mBody input[type=checkbox]{width:20px;height:20px;flex:none;margin:0 2px 0 0;vertical-align:-5px}
  #panel input[type=checkbox]:checked::before,#mBody input[type=checkbox]:checked::before{width:10px;height:5px}
  #panel label:has(input[type=checkbox]),#mBody label:has(input[type=checkbox]){display:inline-flex;align-items:center;gap:6px;min-height:32px}
  #panel .pts .btn{padding:4px 10px;min-width:40px}
  #panel .sys-challenge-orb>button{width:32px;min-width:32px;min-height:32px}
  .mx{width:36px;height:36px}
  .kb{display:none}
  #bigMap small .tc{display:inline}
}
/* ---------- panel ---------- */
h3{margin:4px 0 6px;color:var(--gold);font-size:14px;border-bottom:1px solid var(--line);padding-bottom:3px}
.log p{margin:1px 0;font-size:12px}
.log .c-exp{color:#9ad3ff}.log .c-bac{color:#e8e8e8}.log .c-item{color:var(--gold)}.log .c-q{color:var(--green)}.log .c-sys{color:var(--orange)}.log .c-die{color:var(--red-t)}
.kv{display:grid;grid-template-columns:1fr auto;gap:2px 10px;font-size:12px}
.kv span{color:var(--dim)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pts{display:grid;grid-template-columns:auto 1fr auto auto;gap:4px 8px;align-items:center;margin:6px 0}
.pts .btn{padding:0 7px}
.eqgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:6px 0}
.slot{position:relative;aspect-ratio:1;border:1px solid var(--line);background:#120d08;border-radius:3px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.slot .ph{color:#8f7b5c;font-size:10px;text-align:center}
.slot canvas,.slot .ic{width:80%;height:80%}
.slot .en{position:absolute;right:2px;top:1px;font-size:10px;color:var(--gold);font-weight:700;text-shadow:0 0 2px #000}
.slot .n{position:absolute;right:2px;bottom:0;font-size:10px;color:#fff;text-shadow:0 0 2px #000}
.slot.q1{border-color:#3f86d8}.slot.q2{border-color:#b072e8}.slot.q3{border-color:#f09a3a}.slot.q4{border-color:#e8c06a;box-shadow:inset 0 0 6px rgba(232,192,106,.4)}
.slot.lock::after{content:"🔒";position:absolute;left:1px;top:-1px;font-size:10px}
.invgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:4px}
.ic{display:block;background-repeat:no-repeat;image-rendering:auto}
.toolbar{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 8px;align-items:center}
.toolbar .sp{flex:1}
.q0{color:#e9e9e9}.q1{color:#6aa8ff}.q2{color:#c89bff}.q3{color:#ffad55}.q4{color:#ffd96a}
.skrow{display:flex;gap:8px;align-items:center;padding:6px;border:1px solid #2e2418;border-radius:3px;margin-bottom:4px;background:var(--panel2)}
.skrow.lockd{background:#1a140e}
.skrow.lockd .nm b{color:#bfa678}
.skrow .nm{flex:1}
.skic{flex:none;width:38px;height:38px;border:1px solid var(--line);border-radius:50%}
.lockd .skic{filter:grayscale(1) brightness(.6)}
.worldmap{display:block;width:100%;max-width:520px;margin:0 auto 8px;border:1px solid var(--line);border-radius:3px}
/* bản đồ thế giới tương tác (UILocalMap_WorldMapTab): toạ độ % của khung 1123.1 × 767.8, chữ / icon theo cqw (cỡ gốc 24 px) */
.wmap{overflow-x:auto;overflow-y:hidden;max-width:760px;margin:0 auto 8px;border:1px solid var(--line);border-radius:3px;overscroll-behavior-x:contain}
.wm-in{position:relative;container-type:inline-size;width:100%;min-width:600px;aspect-ratio:1123.1/767.8;background-size:100% 100%;background-color:#2a2418}
.wm-in button{position:absolute;transform:translate(-50%,-50%);padding:0;margin:0;border:0;background:none;cursor:pointer;min-height:0!important;line-height:1}
/* vùng chạm ≥ 24 px (uiaudit tap<24, màn cảm ứng): nút co theo icon / chữ nhỏ → nới khung, nội dung giữ ở tâm (toạ độ là tâm nút) */
.wm-in button{min-width:24px;min-height:24px!important;display:flex;align-items:center;justify-content:center}
.wm-pl i{display:block;background-repeat:no-repeat}
.wm-pl .wm-dot{width:1.2cqw;height:1.2cqw;border-radius:50%;background:#ffd76a}
.wm-pl span{position:absolute;top:92%;left:50%;transform:translateX(-50%);white-space:nowrap;font:bold max(10px,1.9cqw) Tahoma,Arial,sans-serif;color:#fff;text-shadow:0 0 2px #000,0 0 3px #000,1px 1px 1px #000;pointer-events:none}
.wm-pl:hover span,.wm-pl:focus-visible span{text-decoration:underline}
.wm-ar{font:bold max(14px,3.4cqw) Tahoma,Arial,sans-serif;color:#ffe9a0;text-shadow:0 0 3px #000,0 0 6px #000,1px 1px 2px #000;white-space:nowrap}
.wm-ar:hover{color:#fff}
.wm-cur{position:absolute;left:50%;bottom:88%;width:3.4cqw;height:2.7cqw;transform:translateX(-50%);background:#ffd400;clip-path:polygon(0 0,100% 0,50% 100%);filter:drop-shadow(0 0 2px #000);animation:wmBob 1s ease-in-out infinite alternate;pointer-events:none}
@keyframes wmBob{to{transform:translate(-50%,-30%)}}
/* bản đồ thế giới client PC (ui/wm/pc.json — ui.js wmPcHtml): ảnh 794×535 cỡ gốc (chỉ thu nhỏ), toạ độ % / cqw của khung 794 */
.wmap.pc{max-width:796px}
/* PC (≥ 1000 px): khung bên chỉ ~380 px → bản đồ PC co vừa khung, không cuộn ngang (chữ max(10px, cqw) vẫn đọc được); xem cỡ
   gốc ở cửa sổ lớn «Bản đồ thế giới» (#modal.wmbig, ui.js wmOpen — KT UILocalMap_WorldMapTab là cửa sổ toàn màn) */
@media (min-width:1000px){#panel .wm-in.pc{min-width:0}}
#modal.wmbig .mbox{max-width:830px}
#modal.wmbig .wmap{margin-bottom:0}
@media (min-width:700px){#modal.wmbig .wm-in.pc{min-width:0}}
.wm-in.pc{aspect-ratio:794/535;background-color:#1c1a14}
.wmp-reg{position:absolute;inset:0;width:100%;height:100%}
.wmp-reg polygon{fill:transparent;cursor:pointer;stroke:transparent;stroke-width:2}
.wmp-reg polygon:hover{fill:rgba(255,236,170,.14);stroke:rgba(255,226,140,.7)}
.wm-in .wmp-hit{border-radius:3px}
.wm-in .wmp-hit:hover,.wm-in .wmp-hit:focus-visible{background:rgba(255,236,170,.18);outline:1px solid rgba(255,226,140,.8)}
.wmp-ic{position:absolute;transform:translate(-50%,-50%)}
.wmp-ic i{display:block;background:url(../assets/ui/wm/icons.webp) no-repeat}
.wmp-ic:hover i,.wmp-ic:focus-visible i{background-position-x:var(--hx)!important}
.wmp-ic.off{opacity:.55}
.wmp-t{position:absolute;white-space:pre;font:max(10px,1.512cqw)/1.15 Tahoma,Arial,sans-serif;text-shadow:0 0 2px #000,1px 1px 1px #000;pointer-events:none}
.wmp-t.big{font-weight:bold;font-size:max(12px,2.267cqw)}
.wmp-mark{position:absolute;background:url(../assets/ui/wm/mark.webp) no-repeat 0 0;animation:wmpMark 1.33s steps(7,jump-none) infinite;pointer-events:none}
@keyframes wmpMark{to{background-position-x:100%}}
.skrow .nm b{color:var(--gold)}
.skrow .nm small{display:block;color:var(--dim)}
.skrow.main{border-color:var(--gold2)}
.qitem{padding:6px 8px;border:1px solid #2e2418;background:var(--panel2);border-radius:3px;margin-bottom:5px}
.qitem.cur{border-color:var(--gold2)}
.qitem .t{color:var(--gold)}
.qitem .s{color:var(--dim);font-size:12px;white-space:pre-line}
.maprow{display:flex;align-items:center;gap:8px;padding:5px 8px;border:1px solid #2e2418;background:var(--panel2);border-radius:3px;margin-bottom:4px}
.maprow.cur{border-color:var(--gold2)}
.maprow .nm{flex:1}
.maprow small{color:var(--dim)}
.forge{display:flex;gap:10px;align-items:center;background:var(--panel2);border:1px solid #2e2418;padding:8px;border-radius:3px;margin-bottom:6px}
.forge .slot{width:46px;flex:0 0 46px}
.forge .nm{flex:1}
.muted{color:var(--dim)}
.good{color:var(--green)}.bad{color:var(--red-t)}

/* ---------- modal / tooltip / toast ---------- */
#modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:20;padding:10px}
/* modal: khung không cuộn, chỉ #mBody cuộn → nút ✕ luôn ở góc, không có 2 thanh cuộn lồng nhau */
.mbox{position:relative;display:flex;flex-direction:column;background:linear-gradient(#271d13,#18120c);border:1px solid var(--gold2);border-radius:4px;max-width:440px;width:100%;max-height:90vh;max-height:90dvh;overflow:hidden;padding:0;box-shadow:0 8px 30px #000}
#mBody,#cfBody{overflow:auto;min-height:0;padding:12px;overscroll-behavior:contain}
#mBody>:first-child{margin-right:28px}
.mx{position:absolute;right:4px;top:4px;z-index:2;width:28px;height:28px;padding:0;background:rgba(24,18,12,.85);border:1px solid transparent;border-radius:50%;color:var(--dim);font-size:16px;line-height:1}
.mx:hover{color:var(--gold);border-color:var(--line)}
#confirm{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:25;padding:10px}
#confirm .mbox{max-width:380px}
#confirm p{margin:6px 0}
.cfbtn{padding:0 12px 12px;margin:0}
.itip .nm{font-size:15px;font-weight:600}
.itip .ln{font-size:12px}
.itip .at{color:#7fb6ff;font-size:12px}
.itip .en{color:var(--gold);font-size:12px}
.itip .kt-g{color:#6fd06a}.itip .kt-h{color:#c9b98f;margin-top:3px}.itip .kt-off{color:var(--dim)}.itip .kt-e{color:var(--gold)}.itip .kt-s{color:var(--gold);margin-top:3px}.itip .kt-w{color:var(--orange)}
.itip .cmp{font-size:12px;margin-top:6px;border-top:1px dashed var(--line);padding-top:4px}
.itip .head{display:flex;gap:10px;align-items:center;margin-bottom:6px}
.itip .head .slot{width:52px;flex:0 0 52px}
#toast{position:fixed;left:50%;top:60px;transform:translateX(-50%);z-index:30;display:flex;flex-direction:column;gap:4px;align-items:center;pointer-events:none}
/* trong game: toast nằm trong khung trận, trên thanh kỹ năng (tối đa 3 — util.js) */
#toast div{max-width:100%;text-align:center}
#toast div{background:rgba(20,14,8,.92);border:1px solid var(--gold2);color:var(--gold);padding:5px 14px;border-radius:3px;animation:tfade 2.6s forwards;font-size:13px}
@keyframes tfade{0%{opacity:0;transform:translateY(-6px)}10%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0}}

/* bảng admin */
.adtabs .btn.on{border-color:var(--gold);color:var(--gold)}
.adlist{max-height:46vh;overflow:auto;margin-top:6px}
@media (max-height:600px){.adlist{max-height:none;overflow:visible}}
.adrow{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 2px;border-bottom:1px solid rgba(255,255,255,.06)}
#mBody select,#mBody input[type=number],#panel select,#panel input[type=number],#adFind{background:#0e0b08;color:#e9dcc3;border:1px solid #5a4526;padding:3px 5px}
.chip.hidden{display:none}

/* đăng nhập (dùng lại khung #create) */
#auth{position:fixed;inset:0;overflow:auto;background:linear-gradient(rgba(10,7,4,.35),rgba(10,7,4,.8)),#0d0a07 url(../assets/ui/bg-boot.jpg) center/cover fixed;display:flex;align-items:center;justify-content:center;padding:20px 12px;z-index:5}
#auth.hidden{display:none}
#auth h1{text-align:center;margin:10px 0 18px}
.abox{width:min(420px,100%)}
.arow{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.arow .btn{flex:1 1 140px}
#aMsg{min-height:1.4em;color:#ffb3a8}
#aMsg:empty{display:none}
/* kho xếp chồng (Vật phẩm) */
.stackgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px}
/* khung hẹp (điện thoại dọc / ngang thấp): một cột — tên dài như 'Lệnh bài Tẩy Tủy Đảo' đủ chỗ trong 2 dòng cạnh số lượng + nút Dùng */
@media (max-width:480px),(max-height:500px){.stackgrid{grid-template-columns:1fr}}
.stk{display:flex;align-items:center;gap:6px;border:1px solid var(--line);background:#120d08;border-radius:3px;padding:3px 6px;font-size:12px;cursor:pointer;min-height:40px}
.stk:hover{border-color:var(--gold2)}
.stk .ic{flex:0 0 32px;width:32px;height:32px}
.stk span{flex:1;min-width:0;line-height:1.2;overflow-wrap:anywhere}   /* tên dài («Lệnh bài Tẩy Tủy Đảo» ở ô hẹp) xuống đủ dòng, không cắt */
.stk b{color:var(--gold)}

/* hướng dẫn bản đồ lớn theo loại thiết bị */
#bigMap .tc{display:none}
/* mobile: nút "Bước vào giang hồ" luôn thấy */
@media (max-width:820px), (max-height:500px){
  #cGo{position:sticky;bottom:6px;align-self:stretch;box-shadow:0 -4px 16px rgba(0,0,0,.85);z-index:1}
  .cprev{flex-basis:200px}
  #prevCv{width:200px;height:200px}
}
/* ngang rất thấp (≤ 420px, vd. 844×390): thanh dính che mất ghi chú môn phái + hàng 'Hướng tu luyện' → nút về cuối form */
@media (max-height:420px){
  #cGo{position:static;box-shadow:none}
}
/* module Cường hoá: cột giá trị không xuống dòng */
#panel .sys-forge-ln span:last-child:not(:first-child){white-space:nowrap;flex:none}   /* nhãn 'đã mở' bên phải; dòng bộ một span thì xuống dòng */

/* chip vật phẩm (UI.itemChip): icon + tên, xuống dòng gọn ở màn hẹp */
.ichip{display:inline-flex;align-items:center;gap:3px;max-width:100%;padding:0 5px 0 1px;margin:1px 3px 1px 0;border:1px solid var(--line);border-radius:3px;background:rgba(0,0,0,.25);color:var(--gold);font-size:12px;line-height:20px;vertical-align:middle;cursor:pointer;overflow-wrap:anywhere}
.ichip .ic{flex:0 0 auto;display:inline-block}

/* ---------- cửa sổ nổi Nhân vật (F1) / Hành trang (F2) kiểu KT PC (game/js/win.js, docs/ui.md §7) ---------- */
.kwin{position:fixed;left:12px;top:60px;z-index:16;display:flex;flex-direction:column;background:linear-gradient(#271d13,#17110b);border:1px solid var(--gold2);border-radius:4px;box-shadow:0 8px 30px #000;max-height:calc(100vh - 12px);max-height:calc(100dvh - 12px)}
.kwin.top{z-index:17}
.kw-head{display:flex;align-items:center;gap:6px;padding:3px 3px 3px 10px;background:linear-gradient(#3d2c17,#231910);border-bottom:1px solid var(--line);border-radius:4px 4px 0 0;cursor:move;user-select:none;-webkit-user-select:none;touch-action:none}
.kw-head b{color:var(--gold);font-size:14px;letter-spacing:.3px}
.kw-hk{font-size:10px;color:#b9a27a;border:1px solid #5a4526;border-radius:2px;padding:0 4px;line-height:15px}
.kw-head .sp{flex:1}
.kw-head .kw-sw{padding:2px 8px;font-size:11px}
.kw-head .mx{position:static;flex:none;width:26px;height:26px}
.kw-body{overflow:auto;padding:8px 10px 6px;overscroll-behavior:contain}
.kw-c{min-width:0}
.kw-c .slot{width:100%}
.kw-c.drag{opacity:.4}
.kw-hint{margin:4px 0 0;color:var(--dim);font-size:11px;line-height:1.35}
/* Nhân vật: lưới 5 × 6 như prefab UIRoleInfo (Equip Info) — hình nhân vật giữa, tên ở chỗ ô Mặt nạ */
#win-char{width:300px}
.kw-eq{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;grid-template-areas:"helm nm nm mantle weapon" "armor fig fig fig necklace" "belt fig fig fig ring" "cuff fig fig fig pendant" "boots fig fig fig amulet" "horse zhen signet chop book";padding:4px;border:1px solid #3a2d1c;border-radius:3px;background:radial-gradient(ellipse at 50% 55%,#2c2115 0%,#120d08 75%)}
.kw-eq.kw-drop,.kw-grid.kw-drop{outline:2px dashed var(--gold);outline-offset:1px}
.kw-eq .slot .ph{font-size:10px;line-height:1.1;padding:0 2px}
.kw-nm{display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:0;text-align:center;line-height:1.2}
.kw-nm b{color:var(--gold);font-size:13px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kw-nm small{color:var(--dim);font-size:11px}
.kw-fig{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-height:0;overflow:hidden}
.kw-fig canvas{position:absolute;left:0;top:0;width:100%;height:calc(100% - 16px)}   /* bitmap theo khung × dpr (S.crisp), không co giãn CSS */
.kw-fig small{font-size:11px;color:var(--dim);white-space:nowrap}
.kw-side{margin-top:6px}
.kw-kv{grid-template-columns:auto 1fr auto 1fr;gap:1px 8px}
.kw-kv b{color:var(--gold);text-align:right}
.kw-btns{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
.kw-btns .btn{flex:1;position:relative;padding:4px 6px;white-space:nowrap}
.kw-btns .dot{top:-3px;right:-3px}
/* Hành trang: 10 cột như túi KT, trang Trang bị / Vật phẩm */
#win-bag{width:404px}
.kw-pages{display:flex;gap:5px;margin-bottom:6px}
.kw-pages .btn{flex:1;padding:4px 6px}
.kw-pages .btn.on{border-color:var(--gold);color:#fff;filter:brightness(1.25)}
.kw-pages small{color:#cdb88f}
.kw-grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:3px;padding:3px;border:1px solid #3a2d1c;border-radius:3px;background:#0e0a06}
.kw-grid .slot .ic{width:84%;height:84%}
.kw-grid .slot .en,.kw-grid .slot .n{font-size:10px}
.kw-foot{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:6px}
.kw-foot .sp{flex:1}
.kw-foot .btn{padding:3px 8px}
/* tooltip rê chuột (#tip trong index.html) */
#tip{position:fixed;z-index:19;max-width:300px;padding:8px 10px;background:rgba(20,15,10,.97);border:1px solid var(--gold2);border-radius:4px;box-shadow:0 6px 20px #000;pointer-events:none}
#tip .itip .head .slot{width:46px;flex:0 0 46px}
/* nút mở cửa sổ: góc dưới-trái màn chơi */
.hkeys{grid-template-columns:auto 1fr;gap:3px 12px;margin-bottom:6px}
.hkeys b{font-weight:400;color:var(--txt)}
kbd{display:inline-block;min-width:22px;padding:0 5px;border:1px solid #6a5534;border-bottom-width:2px;border-radius:3px;background:#1a130c;color:var(--gold);font:600 11px/17px var(--font);text-align:center}
@media (max-width:820px), (max-height:500px), (pointer:coarse){
  .hkbox,.wbtn span,.kw-hk{display:none}
  .wbtn{width:36px;height:36px}
  .kwin .btn{min-height:32px}
  .kw-head .mx{width:34px;height:34px}
}
/* màn gọn: cửa sổ thành tấm phủ cả màn (mỗi lần một cửa sổ, nút đổi ở tiêu đề), không kéo được */
@media (max-width:820px), (max-height:500px){
  .kwin,#win-char,#win-bag{left:0!important;top:0!important;width:auto;right:0;bottom:0;max-height:none;border-radius:0;padding-top:env(safe-area-inset-top)}
  .kw-head{cursor:default;border-radius:0;padding:4px 4px 4px 10px}
  .kw-head b{font-size:15px}
  .kw-body{flex:1;padding:8px 10px calc(8px + env(safe-area-inset-bottom))}
  .kw-eq,.kw-side{max-width:420px;margin-left:auto;margin-right:auto}
  .kw-grid,.kw-pages,.kw-foot,#win-bag .kw-hint{max-width:560px;margin-left:auto;margin-right:auto}
  .kw-pages{margin-bottom:6px}
  .kw-foot{margin-top:6px}
}
/* điện thoại xoay ngang: lưới trang bị bên trái (vừa chiều cao), chỉ số bên phải */
@media (max-height:500px) and (orientation:landscape){
  #win-char .kw-body{display:flex;gap:12px;align-items:flex-start;justify-content:center}
  #win-char .kw-eq{width:calc((100vh - 64px) * 5 / 6);width:calc((100dvh - 64px) * 5 / 6);flex:none;margin:0}
  #win-char .kw-side{flex:0 1 320px;margin:0}
  .kw-grid{grid-template-columns:repeat(20,minmax(0,1fr));max-width:none}
  .kw-pages,.kw-foot,#win-bag .kw-hint{max-width:none}
}

/* =====================================================================================================================
   GIAO DIỆN PC — ảnh thật của client PC Kiếm Thế (tools/build_pcui.py -> game/assets/ui/pc/*.webp, docs/ui.md §PC).
   9-slice bằng border-image: border-width giữ nguyên (bố cục không đổi), border-image-width vẽ khung lấn vào lớp đệm.
   background-color (cắt content-box) = màu trung bình của ảnh — để đo tương phản (uiaudit) đúng màu khung thật.
   ===================================================================================================================== */
/* nút chữ: common\btn_4ch.spr (Up 0 / UpOver 1 / Down 2 / Disable 3) */
.btn{border-radius:0;border-color:transparent;color:#fff;text-shadow:0 1px 1px #000;
  background:#1f3c37 content-box;border-image:url(../assets/ui/pc/btn.webp) 5 fill / 5px stretch}
.btn:hover{filter:none;border-image-source:url(../assets/ui/pc/btn1.webp);background-color:#26593a}
.btn:active{border-image-source:url(../assets/ui/pc/btn2.webp);background-color:#031a16}
.btn.on,.adtabs .btn.on,.kw-pages .btn.on{border-image-source:url(../assets/ui/pc/btnon.webp);background-color:#26593a;color:#fff;filter:none}
.btn.red{color:#ffe0da;background-color:#401c1a;border-image-source:url(../assets/ui/pc/btnr.webp)}
.btn.red:hover{border-image-source:url(../assets/ui/pc/btnr1.webp);background-color:#61201e}
.btn.red:active{border-image-source:url(../assets/ui/pc/btnr2.webp);background-color:#1c0201}
button.btn:disabled,button.btn.red:disabled,button.btn.on:disabled{color:#141414;text-shadow:none;background-color:#7e7e7e;border-color:transparent;
  border-image-source:url(../assets/ui/pc/btn3.webp)}
/* chip HUD (Tự động, Theo NV…): nút PC nhỏ */
.chip{border-radius:0;border-color:transparent;color:#e6ece8;text-shadow:0 1px 1px #000;background:#1f3c37 content-box;
  border-image:url(../assets/ui/pc/btn.webp) 5 fill / 5px stretch}
.chip:hover{border-image-source:url(../assets/ui/pc/btn1.webp)}
.chip.on{color:#fff;border-image-source:url(../assets/ui/pc/btnon.webp);background-color:#26593a}
/* ô đánh dấu */
input[type=checkbox]{border-color:#8e8e8e;border-radius:0;background:#0b0d0c}
input[type=checkbox]:checked{background:#1f3c37;border-color:var(--title)}
input[type=checkbox]:checked::before{border-color:var(--title)}
/* ô nhập / chọn: nền đen trong + viền đá (main\bg_chat_input) */
.cform input,#mBody select,#mBody input[type=number],#panel select,#panel input[type=number],#adFind,#bigMap .bmFoot input{
  background:#0c100e;border:1px solid #727272;border-radius:0;color:var(--txt);box-shadow:inset 0 0 0 1px #000}
.cform input:focus,#mBody input:focus,#panel input:focus,#panel select:focus{outline:1px solid var(--title);outline-offset:0}

/* khung cửa sổ: deathoperation\main.spr — dải ngọc + hoa văn trái (slice 48) + ô ✕ đá phải (slice 30), lòng xám trong */
.kwin,.mbox,#dialog,.cbox{border:0 solid transparent;border-radius:0;box-shadow:none;background:none;
  border-image:url(../assets/ui/pc/win.webp) 38 30 17 48 fill / 38px 30px 17px 48px round stretch}
.kwin{padding:0 8px 12px}
.kw-head{background:none;border:0;border-radius:0;height:34px;padding:4px 30px 6px 46px;margin:0 -8px}
.kw-head b{color:var(--title);text-shadow:0 1px 1px #000;font-size:14px}
.kw-hk{color:#cfd8d2;border-color:#727272;background:rgba(0,0,0,.35)}
.kw-head .kw-sw{padding:1px 8px;font-size:11px;min-height:0}
.kw-body{padding:4px 4px 2px}
/* nút đóng: common\button_close.spr 14×14 (thường / rê / nhấn) đè đúng ô ✕ vẽ sẵn ở góc phải khung (right 4, top 11) */
.kwin .mx,.mbox .mx,#dialog .mx,.kw-head .mx{position:absolute;right:0;top:0;width:30px;height:32px;border:0;border-radius:0;background:none;color:transparent;overflow:hidden}
.kwin .mx::before,.mbox .mx::before,#dialog .mx::before{content:"";position:absolute;right:4px;top:11px;width:14px;height:14px;
  background:url(../assets/ui/pc/close.webp) 0 0/56px 14px no-repeat}
.kwin .mx:hover::before,.mbox .mx:hover::before,#dialog .mx:hover::before{background-position:-14px 0}
.kwin .mx:active::before,.mbox .mx:active::before,#dialog .mx:active::before{background-position:-28px 0}
.kwin .mx:focus-visible,.mbox .mx:focus-visible,#dialog .mx:focus-visible{outline:1px solid var(--title);outline-offset:-6px}
.kwin{position:fixed}
.kw-head{position:relative}
/* hộp thoại / modal: dải tiêu đề trống, nội dung dưới dải */
.mbox{padding:34px 6px 12px}
#mBody,#cfBody{padding:6px 8px}
.cfbtn{padding:0 8px 4px}
#dialog{padding:36px 10px 14px;gap:10px}
#dlgTitle{color:var(--title)}
.dnpc{color:var(--title)}
/* hộp đăng nhập / tạo nhân vật */
.cbox{padding:38px 18px 20px}
#create h1,#auth h1{margin-top:0}
.cinfo,.sexsel button,.facgrid button,.subgrid button{border-radius:0}
.sexsel button.on,.facgrid button.on,.subgrid button.on{background:#1f3c37;border-color:var(--title);color:#fff}

/* tooltip: item\itemtips\frame\*.spr (góc 6, cạnh 2 px) + nền DescBgColor 0,30,19 */
#tip,#buffTip,#toast div{border:0 solid transparent;border-radius:0;box-shadow:0 4px 14px rgba(0,0,0,.6);background:none;
  border-image:url(../assets/ui/pc/tip.webp) 6 fill / 6px stretch}
#tip{padding:9px 11px}
#toast div{color:#fff6c8}

/* ô vật phẩm / trang bị / kỹ năng: 1 ô của 001b\main\bg_shortcut_bar.spr (viền 3 px, lòng đen trong) — phẩm chất = viền màu trong ô */
.slot,.sk,#buffs .bf{border-color:transparent;border-radius:0;background-color:transparent;
  border-image:url(../assets/ui/pc/slot.webp) 3 fill / 3px stretch}
.slot{background:none}
.slot:hover{filter:brightness(1.25)}
.slot.q1,.slot.q2,.slot.q3,.slot.q4{outline:1px solid;outline-offset:-4px}
.slot.q1{outline-color:#3f86d8}.slot.q2{outline-color:#b072e8}.slot.q3{outline-color:#f09a3a}.slot.q4{outline-color:#e8c06a;box-shadow:none}
.slot .ph{color:#8fa39b}
.kw-eq{border-color:#4a4e4a;border-radius:0;background:radial-gradient(ellipse at 50% 55%,rgba(70,76,72,.55) 0%,rgba(0,0,0,.35) 75%)}
.kw-grid{border-color:#363735;border-radius:0;background:rgba(0,0,0,.45)}
.kw-nm b{color:var(--title)}
#buffs .bf{background-color:transparent}
#buffs .bf.deb{border-color:transparent;outline:1px solid #c0503a;outline-offset:-3px}
/* thanh kỹ năng: khe main\bg_player (viền 2 px) + sư tử đá đầu thanh bg_shortcut_bar (chỉ màn rộng) */

/* thanh trên: khe Sinh lực / Nội lực của main\bg_player + vạch đỏ / lam (playerstate_life / _mana) + đốt tím exp_state */
/* bản đồ nhỏ: tên map trên thanh main\bg_server_info, khung đá bg_map_normal_vn quanh canvas */

/* bảng bên + thanh tab: lòng xám PC, tab = common\page_button.spr (thường / rê / đang mở) */
h3{color:var(--title);border-bottom-color:#4a5a50}
.skrow,.qitem,.maprow,.forge,.stk,.cinfo{border-color:#3e423e;border-radius:0}
.skrow.main,.qitem.cur,.maprow.cur{border-color:var(--title);background:#25332c}
.skrow .nm b,.qitem .t{color:var(--gold)}
.stk:hover{border-color:var(--title)}
.ichip{border-color:#4a4e4a;border-radius:0}
kbd{border-color:#727272;background:#121413}
/* thanh cuộn: main\bg_scrollbar (rãnh), common\scroll.spr (con trượt), main\btn_scrollbar_up / _down */
@media (pointer:fine){
  ::-webkit-scrollbar{width:15px;height:10px;background:#000}
  ::-webkit-scrollbar-track:vertical{background:url(../assets/ui/pc/sbtrack.webp) 0 0/15px 15px}
  ::-webkit-scrollbar-thumb:vertical{border:0 solid transparent;border-image:url(../assets/ui/pc/sbthumb.webp) 7 fill / 7px stretch;min-height:29px}
  ::-webkit-scrollbar-thumb:vertical:hover{border-image-source:url(../assets/ui/pc/sbthumb1.webp)}
  ::-webkit-scrollbar-thumb:horizontal{background:#5a5a5a;border:1px solid #000}
  ::-webkit-scrollbar-button{display:none;width:0;height:0}
  ::-webkit-scrollbar-button:vertical:start:decrement{display:block;height:15px;background:url(../assets/ui/pc/sbup.webp) 0 0/15px 15px}
  ::-webkit-scrollbar-button:vertical:end:increment{display:block;height:15px;background:url(../assets/ui/pc/sbdown.webp) 0 0/15px 15px}
  ::-webkit-scrollbar-corner{background:#000}
}
/* màn gọn: cửa sổ phủ cả màn — khung giữ nguyên, nút đóng vùng chạm 36px vẫn đè ô ✕ */
@media (max-width:820px), (max-height:500px){
  .kwin,#win-char,#win-bag{border-radius:0}
  .kw-head{padding:4px 36px 6px 46px;height:36px}
  .kwin .mx,.mbox .mx,#dialog .mx,.kw-head .mx{width:36px;height:36px}
  #dialog{padding:36px 8px 14px}
  #mapName{border-image:none;background:none}
  #skillbar::before{display:none}
}
@media (max-width:820px), (max-height:500px), (pointer:coarse){
  .kwin .mx,.mbox .mx,#dialog .mx,.kw-head .mx{width:36px;height:36px}
}
/* màn gọn: cửa sổ phủ cả màn → lòng đặc (không lộ bảng bên dưới) */
@media (max-width:820px), (max-height:500px){
  .kwin,#win-char,#win-bag{background:#2a2c2a padding-box}
}
/* hình nhân vật (Nhân vật): khung canvas làm tròn xuống điểm ảnh nguyên → bitmap S.crisp khớp khung × dpr (không nhoè) */
.kw-fig canvas{width:round(down,100%,1px);height:round(down,calc(100% - 16px),1px)}
.kw-pages small{color:#dfe8e2}
@media (max-width:820px), (max-height:500px), (pointer:coarse){
  .kw-head .kw-sw{min-height:28px;padding:2px 10px}
}
/* bảng ☰ tab / menu Khác lớn: lòng đặc DescBgColor (chữ của bảng bên dưới không lộ qua) */
/* hộp đăng nhập / tạo nhân vật không có nút đóng → khung xoá nét ✕ (win0) */
.cbox{border-image-source:url(../assets/ui/pc/win0.webp)}
#confirm .mbox{border-image-source:url(../assets/ui/pc/win0.webp)}

/* =====================================================================================================================
   KHUNG CLIENT PC (docs/ui.md §9) — HUD đặt theo toạ độ layout 1024×768 của client Kiếm Thế PC (\ui\001b\wndconfig.ini +
   \ui\…\*.ini), ảnh ui/pc/hud/* (tools/build_pcimg.py hud). Màn chơi phủ cả cửa sổ trình duyệt; mọi chức năng mở thành cửa sổ
   nổi (KT.WIN, lớp #panel). Màn gọn (≤ 820 rộng hoặc ≤ 500 cao): cùng mảnh PC, xếp gọn; cửa sổ thành tấm phủ cả màn.
   ===================================================================================================================== */
:root{--psx:0px}
@media (min-width:1600px){:root{--psx:145px}}   /* UI_PLAYERSTATE=145,-1 (chừa cột chân dung tổ đội bên trái như PC) */
#app{position:fixed;inset:0;display:block}
#battle{position:absolute;inset:0;overflow:hidden;background:#000}
#tabs{display:contents}
#top,#mm,#buffs,#questHud,#ctl,#pcBar,#pcSide,#pcPop,#acts,#mmSide,#mmMap,#tabAll,#chat{position:absolute;z-index:3}
#mapLoad{z-index:9}
#dialog{z-index:6;bottom:84px}
/* ---- lớp cửa sổ chức năng: khung trong suốt phủ màn, chỉ cửa sổ nhận chuột */
#panel{position:fixed;inset:0;z-index:16;pointer-events:none;overflow:hidden;padding:0;background:none;border:0;box-shadow:none}
#panel>.kwin{pointer-events:auto;position:absolute;max-height:calc(100vh - 8px);max-height:calc(100dvh - 8px)}
.kwin.kw-tab{height:min(var(--wh,500px),calc(100vh - 8px));height:min(var(--wh,500px),calc(100dvh - 8px))}
.kwin.kw-tab .kw-body{flex:1;min-height:0}
.kwin>.kw-head .kw-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#panel .tab{min-width:0}

/* ---- thanh nhân vật: playerstate.ini — bg_player.spr 697×79; chân dung ImgPortrait (49,5) 37×37, TxtLevel (58,43), nội lực
   ImgManaBg (97,11) 150, sinh lực ImgLifeBg (263,12) 200, tinh lực ImgStaminaBg (479,11) 150, kinh nghiệm ImgPartExp (110,2) 509×10,
   BtnPartner (90,30) 26×26 */
#top{left:var(--psx);top:-1px;width:697px;height:79px;background:url(../assets/ui/pc/hud/player.webp) no-repeat;pointer-events:none}
#top>*{pointer-events:auto}
#top .ps-por{position:absolute;left:50px;top:5px;width:37px;height:37px;cursor:pointer}
#top .lvbox{position:absolute;left:53px;top:43px;width:31px;height:14px;font:600 11px/14px var(--font);color:#fff;text-align:center;text-shadow:0 1px 1px #000;border:0;background:none;border-image:none}
#top .ps-pow{position:absolute;left:45px;top:60px;width:47px;height:17px;font:600 10px/17px var(--font);color:var(--gold);text-align:center;overflow:hidden;white-space:nowrap}
#top .ps-pow .pl,#top .ps-pow .ps{display:none}
#top .ps-ptn{position:absolute;left:89px;top:31px;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:url(../assets/ui/pc/hud/ptn.webp) 1px 1px no-repeat}
#top .ps-ptn:hover{background-position:-21px 1px}
#top .ps-ptn:active{background-position:-43px 1px}
#top .facic{position:absolute;left:117px;top:31px;width:24px;height:24px;border-radius:50%}
#top .bars{position:absolute;inset:0;pointer-events:none}
#top .bar{position:absolute;overflow:hidden;background:none;border:0;border-image:none;border-radius:0}
#top .bar i{position:absolute;left:0;top:0;bottom:0;max-width:100%;width:0;transition:width .2s}
#top .bar span{position:absolute;inset:0;text-align:center;font:600 10px var(--font);color:#fff;text-shadow:0 0 2px #000,0 0 2px #000,0 1px 1px #000;white-space:nowrap}
#top .bar.mp{left:98px;top:14px;width:149px;height:12px}
#top .bar.mp i{background:url(../assets/ui/pc/mp.webp) 0 0/149px 12px no-repeat}
#top .bar.hp{left:264px;top:14px;width:199px;height:15px}
#top .bar.hp i{background:url(../assets/ui/pc/hp.webp) 0 0/199px 15px no-repeat}
#top .bar.st{left:480px;top:14px;width:149px;height:12px}
#top .bar.st i{background:url(../assets/ui/pc/hud/st.webp) 0 0/149px 12px no-repeat}
#top .bar.xp{left:110px;top:2px;width:509px;height:10px}
#top .bar.xp i{background:url(../assets/ui/pc/xp.webp) 0 0/51px 10px repeat-x}
#top .bar.mp span,#top .bar.st span{line-height:12px}
#top .bar.hp span{line-height:15px;font-size:11px}
#top .bar.xp span{line-height:10px;font-size:10px}
/* tên · phái · tiền: dòng chữ dưới thanh (không có trong bg_player — PC hiện tên trên đầu nhân vật, tiền ở Hành trang) */
#top .who,#top .wealth{position:absolute;top:61px;height:17px;display:flex;align-items:center;gap:6px;padding:0 6px;background:rgba(0,0,0,.6);font-size:11px;white-space:nowrap}
#top .who{left:150px;max-width:300px}
#top .who b{color:#fff;font-weight:600;overflow:hidden;text-overflow:ellipsis}
#top .who span{color:var(--dim)}
#top .wealth{left:458px}
#top .money{color:var(--gold)}
/* ---- hàng buff (buffbar.ini: Main (314,37) → dưới thanh nhân vật; ô 24×24, cách 5) */
#buffs{left:calc(var(--psx) + 150px);top:36px;max-width:440px;display:flex;flex-wrap:wrap;gap:3px}
#buffs:empty{display:none}
#buffs .bf{position:relative;width:24px;height:24px;padding:0;overflow:hidden;cursor:pointer;background-position:center;background-repeat:no-repeat}
#buffs .bf.txt{font-size:10px;line-height:22px;text-align:center;color:var(--txt)}
#buffs .bf b{position:absolute;right:0;bottom:0;font:600 10px/1 sans-serif;color:#fff;text-shadow:0 0 2px #000,0 0 2px #000;padding:0 1px;background:rgba(0,0,0,.45)}
#buffTip{position:absolute;left:0;top:calc(100% + 4px);width:max-content;max-width:min(260px,calc(100vw - 32px));padding:5px 7px;font-size:12px;z-index:5}
#buffTip b{color:var(--gold)}

/* ---- bản đồ nhỏ: _ui3\minimapnormal.ini — bg_map_normal_vn.spr 176×181 ở góc phải trên; tên map trên thanh bg_server_info
   (chữ 0,255,0), MapRect (33,25) 136×136, X / Y + nút đi (46…171, 165), cột nút AddOns bên trái (x 0…32) */
#mm{right:0;top:0;width:176px;height:181px;background:url(../assets/ui/pc/hud/mm.webp) no-repeat}
#mapName{position:absolute;left:30px;top:3px;width:126px;height:15px;line-height:15px;padding:0 2px;font:600 12px/15px var(--font);color:#00ff00;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;background:#000}
#mapName:hover{color:#00ffff}
#mmHide{position:absolute;left:158px;top:1px;width:17px;height:19px;padding:0;border:0;background:url(../assets/ui/pc/hud/mmhide.webp) 0 0 no-repeat}
#mmHide:hover{background-position:-17px 0}
#mm.fold #mmHide{background-position:-68px 0}
#mm.fold{height:21px;background-size:176px 181px;background-position:0 0;clip-path:inset(0 0 160px 0)}
#mm.fold{clip-path:none;height:21px;overflow:hidden}
#mm.fold #mini,#mm.fold #mmPos,#mm.fold #mmGo{display:none}
#mini{position:absolute;left:33px;top:25px;width:136px;height:136px;cursor:pointer;background:#000;border:0;border-image:none}
#mmPos{position:absolute;left:36px;top:146px;font:600 10px/12px var(--font);color:#00ff00;text-shadow:0 0 2px #000,0 0 2px #000;pointer-events:none}
.mm-go input{position:absolute;top:166px;width:37px;height:13px;padding:0 2px;border:0;background:transparent;color:#fff;font:11px/13px var(--font);-moz-appearance:textfield}
.mm-go input::-webkit-inner-spin-button,.mm-go input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.mm-go input::placeholder{color:#ffff37}
#mmX{left:58px}#mmY{left:112px}
.mm-go .mm-enter{position:absolute;left:151px;top:165px;width:21px;height:15px;padding:0;border:0;background:url(../assets/ui/pc/hud/posin.webp) 0 0 no-repeat}
.mm-go .mm-enter:hover{background-position:-21px 0}
.mm-go .mm-enter:active{background-position:-42px 0}
/* cột nút bản đồ nhỏ (AddOns Top 12): Kỳ Trân Các (0,10) 32×32, thư (10,66), xếp hạng (10,89), tự đánh (10,112), thưởng online
   (10,135), lịch (4,158) 28×28 — nút 21×21 khung 0 thường / 1 rê / 2 nhấn */
#mmSide{right:144px;top:12px;width:32px;height:190px;pointer-events:none}
#mmSide>*,#mmMap>*{pointer-events:auto}
.mmb{position:absolute;width:21px;height:21px;padding:0;border:0;background:url(../assets/ui/pc/hud/mmb.webp) 0 0 no-repeat;font-size:0;color:transparent;overflow:visible}
.mmb:hover{background-position-x:-21px}
.mmb:active,.mmb.on{background-position-x:-42px}
.mmb b,.mmb span{position:absolute;right:-4px;top:-5px;font-size:10px;line-height:10px;color:var(--red-t)!important;text-shadow:0 0 2px #000}
.mmb .dot{top:-2px;right:-2px}
.mm-mail{left:10px;top:66px;background-position-y:0}
.mm-rank{left:10px;top:89px;background-position-y:-21px}
.mm-fight{left:10px;top:112px;background-position-y:-42px}
.mm-lj{left:10px;top:135px;background-position-y:-63px}
.mm-market{left:0;top:10px;width:32px;height:32px;background-image:url(../assets/ui/pc/hud/market.webp)}
.mm-market:hover{background-position-x:-32px}.mm-market:active{background-position-x:-64px}
.mm-cal{left:4px;top:158px;width:28px;height:28px;background-image:url(../assets/ui/pc/hud/cal.webp)}
.mm-cal:hover{background-position-x:-28px}.mm-cal:active{background-position-x:-56px}
#bAuto.on{background-position-x:-42px;outline:1px solid #ffef6a;outline-offset:0}
#mmMap{right:0;top:0;width:176px;height:0;pointer-events:none}
.mm-world{right:8px;top:139px;background-position-y:-105px}
.mm-flag{right:31px;top:139px;background-position-y:-126px}
#mm.fold~#tabs #mmMap{display:none}

/* ---- khay chức năng (góc phải trên, trái bản đồ nhỏ): nút icon (ô slot PC + icon vật phẩm / võ công) + nhãn — mọi cửa sổ không có
   nút ở thanh chức năng / bản đồ nhỏ + nút của module (UI.addButton) */
#acts{top:2px;right:182px;left:calc(var(--psx) + 704px);display:flex;flex-wrap:wrap;justify-content:flex-end;align-content:flex-start;gap:2px 1px;pointer-events:none}
#tabRow,#ctlExt{display:contents}
#acts .act{pointer-events:auto}
.act{position:relative;width:54px;min-height:34px;padding:35px 1px 1px;border:0;background:none;color:#f2f2e6;font:11px/1.15 var(--font);text-align:center;text-shadow:0 0 2px #000,0 0 3px #000,0 1px 1px #000;overflow-wrap:anywhere}
.act::before{content:"";position:absolute;left:50%;top:0;width:34px;height:34px;margin-left:-17px;box-sizing:border-box;padding:1px;
  background:var(--aib,none) var(--aip,0 0)/var(--ais,auto) no-repeat,url(../assets/ui/pc/slot.webp) 0 0/34px 34px no-repeat;background-origin:content-box,border-box;background-clip:content-box,border-box}
.act.noic,.act:not([style*="--aib"]){padding:0 4px;min-height:34px;height:auto;display:flex;align-items:center;justify-content:center;border:0 solid transparent;border-image:url(../assets/ui/pc/slot.webp) 3 fill / 3px stretch}
.act.noic::before,.act:not([style*="--aib"])::before{display:none}
.act:hover::before{filter:brightness(1.3)}
.act:hover{color:#fff}
.act.on{color:#fff}
.act.on::before{outline:1px solid var(--title);outline-offset:-2px}
.act.hidden{display:none}
.act .dot{top:-1px;right:8px}
.act b[style],.act span[style]{text-shadow:none}
#tabAll{display:none}
/* ---- theo dõi nhiệm vụ (tasktrack.ini (814,300) 200×280, chữ trắng không khung) + Theo NV */
#ctl{right:6px;top:212px;display:flex;gap:4px;pointer-events:none}
#ctl>*{pointer-events:auto}
#ctl .chip{padding:2px 10px;font-size:12px}
#questHud{right:6px;top:240px;width:210px;padding:4px 6px;font-size:12px;background:rgba(0,0,0,.55);cursor:pointer;text-shadow:0 1px 1px #000}
#questHud:empty{display:none}
#questHud .qt{color:#ffd400;font-weight:600}
#questHud .qd{color:#fff}
#questHud .qp{color:#00ff00}
#questHud .qw{color:var(--orange)}

/* ---- đáy màn: thanh phím tắt (shortcutbar.ini (52,713): bg_shortcut_bar 488×55, ô 37×37 từ (66,16) cách 5, số phím 1 … 0 góc ô) +
   thanh kỹ năng (skillbar.ini (540,700): bg_skill_bar 110×71, 2 ô (15,2) cách 5) + thanh chức năng (sidebar.ini (644,714): 319×55,
   nút 23×33 từ (5,18) cách 28) + thanh nhanh (popbar.ini (694,685)); cả cụm (52 … 963) canh giữa màn */
#pcBar{left:calc(50% - 460px);bottom:0;width:598px;height:71px;pointer-events:none}
#skillbar{position:absolute;left:0;bottom:0;width:488px;height:55px;padding:16px 0 0 66px;display:flex;gap:5px;background:url(../assets/ui/pc/hud/short.webp) no-repeat;border:0;border-image:none;pointer-events:auto}
#skbar2{position:absolute;left:488px;bottom:0;width:110px;height:71px;padding:2px 0 0 15px;display:flex;gap:5px;align-items:flex-start;background:url(../assets/ui/pc/hud/skbar.webp) no-repeat;pointer-events:auto}
.sk{position:relative;flex:none;width:37px;height:37px;padding:0;display:flex;align-items:center;justify-content:center;font-size:10px;text-align:center;line-height:1.1;color:var(--txt);cursor:pointer;
  border:0;border-image:none;background-color:transparent;background-repeat:no-repeat;overflow:hidden}
#skillbar .sk,#skbar2 .sk{background-color:transparent}
.sk[style*="ui/skills"]{font-size:0}
.sk::after{content:attr(data-key);position:absolute;left:2px;top:1px;font:600 10px/1 var(--font);color:#c4c4c4;text-shadow:0 0 2px #000,0 0 2px #000}
.sk em{position:absolute;right:2px;bottom:1px;font:600 10px/1 var(--font);font-style:normal;color:var(--gold);text-shadow:0 0 2px #000,0 0 2px #000}
.sk.pot b{position:absolute;bottom:1px;right:2px;font:600 10px/1 var(--font);color:#fff;text-shadow:0 0 2px #000}
.sk .cd{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.6)}
.sk.main{outline:1px solid #ffef6a;outline-offset:-1px;box-shadow:none}
.sk.empty{cursor:default}
.sk:not(.empty):hover{filter:brightness(1.25)}
#pcSide{z-index:4;left:calc(50% - 460px + 592px);bottom:0;width:319px;height:55px;background:url(../assets/ui/pc/hud/side.webp) no-repeat}
.sbb{position:absolute;top:18px;left:calc(5px + 28px * var(--r));width:23px;height:33px;padding:0;border:0;background:url(../assets/ui/pc/hud/sb.webp) 0 calc(-33px * var(--r)) no-repeat}
.sbb:hover{background-position-x:-23px}
.sbb:active,.sbb.on{background-position-x:-46px}
.sbb .dot{top:-3px;right:-3px}
.pcmenu{position:absolute;bottom:56px;left:140px;display:flex;flex-direction:column;gap:2px;padding:6px;border:0 solid transparent;border-image:url(../assets/ui/pc/tip.webp) 6 fill / 6px stretch;background:rgb(0,30,19) padding-box;z-index:4}
.pcmenu button{background:none;border:0;color:#fff;padding:4px 14px;text-align:left;font-size:12px;white-space:nowrap}
.pcmenu button:hover{color:#00ff00}
#pcPop{left:calc(50% - 460px + 642px);bottom:53px;width:250px;height:32px;pointer-events:none}
.popb{position:absolute;pointer-events:auto;padding:0;border:0}
.pop-mount{left:91px;top:2px;width:26px;height:28px;background:url(../assets/ui/pc/hud/pop.webp) 0 -56px no-repeat;font-size:0;color:transparent}
.pop-mount:hover{background-position-x:-26px}
.pop-mount.on{background-position-x:-52px}
.pop-pk{left:122px;top:2px;width:110px;height:28px;background:url(../assets/ui/pc/hud/pk.webp) no-repeat;color:#ffd400;font:600 12px/28px var(--font);text-shadow:0 1px 1px #000}
.pop-pk:hover{color:#fff}

/* ---- khung chat (chatpanel.ini: Main (0,542), tin 280×140 cuộn, tab kênh btn_chat_chaneltab 52×16 từ (15,140); chatinput.ini:
   ô nhập bg_chat_input 262×19, nút kênh / biểu cảm / gửi) — trái dưới, trên thanh phím tắt */
#chat{left:0;bottom:58px;width:345px;display:flex;flex-direction:column;pointer-events:none}
#chat>*{pointer-events:auto}
#chatLog{order:1;height:150px;overflow-y:auto;padding:3px 6px;background:rgba(0,0,0,.5);font-size:12px;line-height:16px;color:#fff994;overscroll-behavior:contain}
#chat[data-sz="0"] #chatLog{display:none}
#chat[data-sz="2"] #chatLog{height:280px}
#chatLog p{margin:0 0 2px;overflow-wrap:anywhere;text-shadow:0 1px 1px #000}
#chatLog p[style]{color:var(--cc)}
#chatLog .ct{color:var(--cc);font-weight:600}
#chatLog .cw{color:#dcdcdc;font-weight:600}
#chatLog .cx{color:var(--cc)}
#chatLog .cl-log.c-exp{color:#9ad3ff}#chatLog .cl-log.c-item{color:var(--gold)}#chatLog .cl-log.c-q{color:#00ff00}#chatLog .cl-log.c-sys{color:var(--orange)}#chatLog .cl-log.c-die{color:var(--red-t)}
#chatLog .cl-empty{color:var(--dim)}
.ch-tabs{order:2;display:flex;align-items:flex-end;height:17px;padding-left:15px;gap:1px}
.ch-tabs [data-ct]{width:52px;height:16px;padding:0;border:0;background:url(../assets/ui/pc/chtab.webp) 0 0/52px 16px no-repeat;color:#ff8000;font:600 11px/16px var(--font);text-shadow:0 1px 1px #000}
.ch-tabs [data-ct]:hover{color:#4aa3ff}
.ch-tabs [data-ct].on{background-image:url(../assets/ui/pc/chtab1.webp);color:#ffb04a}
.ch-tabs .ch-size,.ch-tabs .ch-log{width:16px;height:16px;padding:0;border:0;margin-left:3px;background:url(../assets/ui/pc/hud/chat.webp) 0 -96px no-repeat}
.ch-tabs .ch-size:hover{background-position-x:-24px}
.ch-tabs .ch-log{background:#000;border:1px solid #727272;position:relative}
.ch-tabs .ch-log::before{content:"";position:absolute;left:3px;right:3px;top:3px;height:8px;border-top:2px solid #c8c8c8;border-bottom:2px solid #c8c8c8}
.ch-in{order:3;position:relative;display:flex;align-items:center;gap:1px;height:25px;padding:0 4px 0 2px}
.ch-sel{flex:none;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:url(../assets/ui/pc/hud/chat.webp) 0 -72px no-repeat;color:#ffd94e;font:600 10px/24px var(--font);text-shadow:0 0 2px #000,0 0 2px #000}
.ch-sel:hover{background-position-x:-24px;color:#00ff00}
#chatIn{flex:1;min-width:0;height:19px;padding:0 4px;border:0 solid transparent;border-image:url(../assets/ui/pc/input.webp) 4 fill / 4px stretch;background:#0e2a24 padding-box;color:#fff;font:12px/19px var(--font)}
#chatIn:focus{outline:none;border-image-source:url(../assets/ui/pc/input1.webp)}
#chatIn::placeholder{color:#9fb7ae}
.ch-face{flex:none;width:22px;height:20px;padding:0;border:0;background:url(../assets/ui/pc/hud/chat.webp) 0 -24px no-repeat}
.ch-face:hover{background-position-x:-24px}
.ch-send{flex:none;width:23px;height:20px;padding:0;border:0;background:url(../assets/ui/pc/hud/chat.webp) 0 0 no-repeat}
.ch-send:hover{background-position-x:-24px}
.ch-menu{position:absolute;left:0;bottom:26px;display:grid;grid-template-columns:repeat(2,auto);gap:1px 6px;padding:6px;border:0 solid transparent;border-image:url(../assets/ui/pc/tip.webp) 6 fill / 6px stretch;background:rgb(0,30,19) padding-box;z-index:5}
.ch-menu button{background:none;border:0;color:#fff;text-align:left;padding:3px 6px;font-size:12px;white-space:nowrap}
.ch-menu button:hover{color:#00ff00}
/* ---- thông báo hệ thống (_ui3\systemmsg.ini (560,500)): trên cụm thanh đáy */
#battle #toast{position:absolute;top:auto;bottom:140px;left:50%;transform:translateX(-50%);z-index:8;width:max-content;max-width:min(94%,560px)}
/* bảng tiến độ của module (Vượt ải, Phó bản…) giữ chỗ cũ trên màn chơi */

/* =================== màn gọn (điện thoại dọc ≤ 820 rộng, xoay ngang ≤ 500 cao): cùng mảnh PC, xếp gọn =================== */
@media (max-width:820px), (max-height:500px){
  #top{left:0;top:0;width:min(calc(100% - 112px),360px);height:48px;background:rgba(10,12,11,.82);border-bottom:1px solid #727272;border-right:1px solid #727272}
  #top .ps-por{left:4px;top:4px}
  #top .lvbox{left:4px;top:31px;width:37px;height:13px;font-size:10px;line-height:13px;background:rgba(0,0,0,.75)}
  #top .ps-pow,#top .ps-ptn,#top .facic,#top .who,#top .wealth,#top .bar.st{display:none}
  #top .bar,#top .bar.hp,#top .bar.mp,#top .bar.xp{border:0 solid transparent;border-image:url(../assets/ui/pc/barbg.webp) 3 fill / 3px stretch;left:46px;right:4px;width:auto}
  #top .bar i{top:2px;bottom:2px;left:2px;max-width:calc(100% - 4px)}
  #top .bar.hp{top:3px;height:15px}
  #top .bar.hp i{background-size:100% 100%}
  #top .bar.mp{top:19px;height:13px}
  #top .bar.mp i{background-size:100% 100%}
  #top .bar.xp{top:33px;height:13px}
  #top .bar.xp i{background-size:51px 100%}
  #top .bar span,#top .bar.hp span,#top .bar.mp span,#top .bar.xp span{line-height:inherit;display:flex;align-items:center;justify-content:center;font-size:10px}
  #buffs{left:4px;top:52px;max-width:calc(100% - 118px)}
  #questHud{left:4px;right:auto;top:52px;width:auto;max-width:calc(100% - 118px);font-size:11px;padding:3px 6px}
  #battle.hasbf #questHud{top:80px}
  #mm{width:106px;height:96px;background:none}
  #mapName{left:0;top:0;width:106px;height:20px;line-height:20px;font-size:11px;border:0 solid transparent;border-image:url(../assets/ui/pc/mmbar.webp) 4 fill / 4px stretch;background:#000 padding-box}
  #battle.mn2 #mapName{white-space:normal;line-height:10px;font-size:10px}
  #mmHide,#mmGo{display:none}
  #mini{left:3px;top:21px;width:100px;height:74px;border:1px solid #000;border-image:url(../assets/ui/pc/mmframe.webp) 9 / 9px / 6px stretch}
  #mmPos{left:6px;top:80px}
  #mmSide{right:0;top:98px;width:106px;height:62px}
  /* nút 21×21 giữ cỡ gốc, viền trong suốt 4 px làm vùng chạm 29 px (ảnh không lộ khung bên cạnh: clip content-box) */
  .mmb,.mm-market,.mm-cal,.mm-world,.mm-flag{box-sizing:content-box;width:21px;height:21px;border:4px solid transparent;background-origin:content-box;background-clip:content-box}
  .mm-market,.mm-cal{background-size:84px 21px;background-position-y:0}
  .mm-market:hover,.mm-cal:hover{background-position-x:-21px}
  .mm-market:active,.mm-cal:active{background-position-x:-42px}
  .mm-mail{left:2px;top:0}.mm-rank{left:38px;top:0}.mm-fight{left:74px;top:0}
  .mm-lj{left:2px;top:31px}.mm-market{left:38px;top:31px}.mm-cal{left:74px;top:31px}
  #mmMap{width:106px}
  .mm-world{right:0;top:66px}
  .mm-flag{right:30px;top:66px}
  #tabAll{display:block;right:0;top:164px;width:106px;height:30px;padding:0;color:#fff;font-size:12px;border:0 solid transparent;border-image:url(../assets/ui/pc/btn.webp) 5 fill / 5px stretch;background:#1f3c37 content-box}
  #tabAll::after{content:"Chức năng ▾";position:relative}
  #tabs.open #tabAll{border-image-source:url(../assets/ui/pc/btnon.webp)}
  #tabAll .dot{top:2px;right:2px}
  #ctl{right:0;top:198px}
  #ctl .chip{min-height:30px;width:106px}
  #acts{display:none}
  #tabs.open #acts{display:grid;grid-template-columns:repeat(auto-fill,58px);justify-content:end;gap:4px 2px;left:auto;right:0;top:198px;z-index:12;width:min(calc(100% - 8px),316px);max-height:calc(100% - 300px);overflow-y:auto;padding:8px;border:0 solid transparent;border-image:url(../assets/ui/pc/tip.webp) 6 fill / 6px stretch;background:rgb(0,30,19) padding-box}
  .act{width:58px}
  /* đáy: thanh chức năng + thanh nhanh (hàng 1), thanh phím tắt (hàng 2 ở màn dọc; cùng hàng ở màn ngang) */
  #pcSide{left:0;bottom:0;width:254px;height:38px;background:rgba(10,12,11,.88);border-top:1px solid #727272}
  .sbb{top:2px;left:calc(2px + 28px * var(--r));width:28px;height:34px;background:none}
  .sbb::before{content:"";position:absolute;left:2px;top:0;width:23px;height:33px;background:url(../assets/ui/pc/hud/sb.webp) 0 calc(-33px * var(--r)) no-repeat}
  .sbb:hover::before{background-position-x:-23px}
  .sbb.on::before,.sbb:active::before{background-position-x:-46px}
  .pcmenu{bottom:40px;left:120px}
  #pcPop{left:256px;right:auto;bottom:0;width:132px;height:38px;background:rgba(10,12,11,.88);border-top:1px solid #727272}
  .pop-mount{left:2px;top:5px}
  .pop-pk{left:30px;top:5px;width:100px;background-size:100px 28px;font-size:11px}
  #pcBar{left:0;bottom:39px;width:auto;height:40px}
  #skillbar{position:static;width:auto;height:40px;padding:1px;gap:1px;background:rgba(10,12,11,.82);border-top:1px solid #727272}
  #skillbar .sk{width:37px;height:37px;border:0 solid transparent;border-image:url(../assets/ui/pc/slot.webp) 3 fill / 3px stretch}
  #skbar2{display:none}
  #chat{bottom:80px;width:min(100%,340px)}
  #chatLog{height:84px}
  #chat[data-sz="2"] #chatLog{height:170px}
  #battle #toast{bottom:210px;max-width:calc(100% - 12px)}
  #dialog{bottom:84px;left:6px;right:6px;width:auto;transform:none;max-height:calc(100% - 140px)}
  #dialog .dnpc{display:none}
  #bigMap .bmHead small{font-size:11px}
  #battle #sysChHud,#battle #sys-dungeon-hud{left:6px;right:114px;transform:none;width:auto;min-width:0;max-width:none;top:auto;bottom:206px}
  /* cửa sổ: tấm phủ cả màn (win.js đặt cỡ ini inline → !important) */
  #panel>.kwin{width:auto!important;height:auto!important;max-height:none}
}
@media (max-height:500px) and (orientation:landscape){
  #pcBar{left:390px;bottom:0}
  #skillbar{border-left:1px solid #727272}
  #chat{bottom:40px;width:min(42%,330px)}
  #chatLog{height:64px}
  #chat[data-sz="2"] #chatLog{height:130px}
  #battle #toast{bottom:150px}
  #dialog{bottom:44px;max-height:calc(100% - 96px)}
  #battle #sysChHud,#battle #sys-dungeon-hud{bottom:150px}
}
@media (max-width:820px), (max-height:500px), (pointer:coarse){
  #panel .btn,#panel select,#panel input[type=number],#panel button{min-height:32px}
  #panel .btn.sm{padding:5px 10px}
  #panel input[type=checkbox]{width:20px;height:20px;flex:none;margin:0 2px 0 0;vertical-align:-5px}
  #panel input[type=checkbox]:checked::before{width:10px;height:5px}
  #panel label:has(input[type=checkbox]){display:inline-flex;align-items:center;gap:6px;min-height:32px}
  #panel .pts .btn{padding:4px 10px;min-width:40px}
  #panel .sys-challenge-orb>button{width:32px;min-width:32px;min-height:32px}
  #mBody .btn,#cfBody .btn,.cfbtn .btn,#mBody select,#mBody input[type=number],#bigMap .btn,#dialog .btn{min-height:32px}
  #mBody .btn.sm{padding:5px 10px}
  #mBody button{min-height:32px}
  #mBody input[type=checkbox]{width:20px;height:20px;flex:none;margin:0 2px 0 0;vertical-align:-5px}
  #mBody label:has(input[type=checkbox]){display:inline-flex;align-items:center;gap:6px;min-height:32px}
  .mx{width:36px;height:36px}
  .kb{display:none}
  #bigMap small .tc{display:inline}
  .ch-tabs [data-ct]{height:22px;line-height:22px;background-size:52px 22px}
  .ch-tabs{height:23px}
  .ch-tabs .ch-size,.ch-tabs .ch-log{width:24px;height:22px;background-position:4px -93px}
  #chatIn{height:26px}
  .ch-face,.ch-send{width:26px;height:26px;background-position:2px 3px}
  .ch-face{background-position:2px -21px}
  .ch-in{height:30px}
}

#questHud .qt:not(:first-child){margin-top:5px;padding-top:4px;border-top:1px solid rgba(255,255,255,.15)}
/* khay: nút không icon (x1, Admin…) cỡ ô 34 như nút icon */
#acts .act.noic,#acts .act:not([style*="--aib"]){width:40px;margin:0 7px;font-weight:600}
@media (max-width:820px), (max-height:500px), (pointer:coarse){.pcmenu button,.ch-menu button{min-height:30px}}
/* khay quá chỗ (hud.js H.fit): tối đa 2 hàng, phần còn lại sau «Thêm ▸»; mở → cả khay trên nền khung tooltip PC */
#acts .act.ovf{display:none}
#tabs.more #acts .act.ovf{display:block}
#tabs.more #acts .act.noic.ovf,#tabs.more #acts .act.ovf:not([style*="--aib"]){display:flex}
#tabs.more #acts{z-index:12;padding:6px;border:0 solid transparent;border-image:url(../assets/ui/pc/tip.webp) 6 fill / 6px stretch;background:rgba(0,30,19,.92) padding-box}
#acts .act.act-more{width:54px;margin:0;padding:0 2px;min-height:34px;color:#ffd400;font-weight:600}
@media (max-width:820px), (max-height:500px), (pointer:coarse){
  .ch-tabs{height:25px}
  .ch-tabs [data-ct]{height:24px;line-height:24px;background-size:52px 24px}
  .ch-tabs .ch-size,.ch-tabs .ch-log{width:26px;height:24px}
}