/* HUD v3 (desktop only): two orbs + compact skill dock, slim top line, see-through log.
   Seam: everything is scoped to body.hud3 (toggled by src/ui/hud3.js). Remove this file, hud3.js
   and their tags in index.html to drop it; the old u20 HUD underneath is untouched. */
.h3orb,#h3tg{display:none}
body.u20:not(.u2m,.u2s) #h3tg{display:block;position:fixed;right:8px;bottom:56px;z-index:9;height:20px;padding:0 8px;
  font:600 10px/18px var(--font);letter-spacing:1px;color:#c9b88f;background:#0d0b09d9;border:1px solid #4a3a26;cursor:var(--cur-hot)}
body.u20:not(.u2m,.u2s) #h3tg:hover{color:#f3dfb0;border-color:#c9a165}

/* Bottom dock (v4, after the owner's reference): one bronze-framed block with an info row
   (level · hand power · XP %) and an XP line inside, three sunken slot groups, two heavy-ring orbs.
   hud3.js moves #hud (level / power / rank) into #pad and mirrors HP/MP/XP onto the orbs and the line. */
body.hud3.u20:not(.u2m,.u2s) #pad{bottom:8px!important;padding:26px 14px 8px!important;overflow:visible;gap:6px!important;align-items:flex-end!important;
  background:linear-gradient(#211a13,#0d0a08 55%,#0a0807)!important;border:2px solid #5e4a2e!important;border-radius:9px!important;
  box-shadow:0 0 0 1px #000,inset 0 0 0 1px #000,inset 0 1px 0 #c9a16577,inset 0 -1px 0 #c9a16533,0 8px 22px #000!important}
/* XP line under the info row */
body.hud3.u20:not(.u2m,.u2s) #pad::before{content:'';position:absolute;left:44px;right:44px;top:21px;height:2px;border-radius:1px;
  background:linear-gradient(90deg,#8d6b1e,#f0d47e) 0 0/var(--xp,0%) 100% no-repeat,#2a2218;box-shadow:0 0 4px #c9a16544}
/* The old top #hud is replaced by #h3info on the dock (its rank button moves to the top-right chips) */
body.hud3.u20:not(.u2m,.u2s) #hud{display:none!important}
#h3info,#h3ctl{display:none}
/* Info row: same type for all three stats, level left / hand power centred / XP right */
body.hud3.u20:not(.u2m,.u2s) #h3info{display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;position:absolute;left:44px;right:44px;top:4px;height:15px;
  z-index:3;white-space:nowrap;font:500 11px/15px var(--font);text-shadow:0 1px 2px #000}
#h3info span{display:flex;align-items:baseline;gap:5px}
#h3info span:nth-child(2){justify-content:center}
#h3info span:last-child{justify-content:flex-end}
#h3info em{font-style:normal;color:#a8977a}
#h3info b{font:700 12px/15px var(--font);color:#f3d27a}
/* Control tab on the dock's top edge: mode switch | rotation | auto as one segmented strip */
body.hud3.u20:not(.u2m,.u2s) #h3ctl{display:flex;align-items:stretch;position:absolute;left:50%;bottom:100%;transform:translateX(-50%);height:24px;
  padding:3px 4px 0;background:linear-gradient(#211a13,#16110c);border:2px solid #5e4a2e;border-bottom:0;border-radius:7px 7px 0 0;
  box-shadow:0 -1px 0 #000,inset 0 1px 0 #c9a16555;z-index:4}
body.hud3.u20:not(.u2m,.u2s) #h3ctl>#modeSw,body.hud3.u20:not(.u2m,.u2s) #h3ctl>#topCtl{position:relative!important;inset:auto!important;transform:none!important;
  display:flex;flex-direction:row;gap:0;margin:0;border:0;box-shadow:none}
body.hud3.u20:not(.u2m,.u2s) #h3ctl>#modeSw.hidden{display:none}
body.hud3.u20:not(.u2m,.u2s) #h3ctl #mswBtn,body.hud3.u20:not(.u2m,.u2s) #h3ctl .chip{height:20px!important;min-height:0!important;margin:0!important;padding:0 9px!important;
  background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;font:500 11px/20px var(--font)!important;color:#a8977a!important;white-space:nowrap}
body.hud3.u20:not(.u2m,.u2s) #h3ctl #mswBtn b{color:#f3d27a}
/* Fewer glyphs: no "Chế Độ:" prefix or checkboxes, an on chip is lit gold and an off chip is dimmed */
body.hud3.u20:not(.u2m,.u2s) #h3ctl #mswBtn{font-size:0!important}
body.hud3.u20:not(.u2m,.u2s) #h3ctl #mswBtn b{font-size:11px;font-weight:600}
body.hud3.u20:not(.u2m,.u2s) #h3ctl #mswBtn::after{content:" ▴";font-size:9px;color:#8a7a5e}
body.hud3.u20:not(.u2m,.u2s) #h3ctl #rotBtn,body.hud3.u20:not(.u2m,.u2s) #h3ctl #ctrlBtn{font-size:0!important;color:#5e5240!important}
body.hud3.u20:not(.u2m,.u2s) #h3ctl #rotBtn::before{content:"Xoay chiêu";font-size:11px}
body.hud3.u20:not(.u2m,.u2s) #h3ctl #ctrlBtn::before{content:"Auto";font-size:11px}
body.hud3.u20:not(.u2m,.u2s) #h3ctl #rotBtn.on,body.hud3.u20:not(.u2m,.u2s) #h3ctl #ctrlBtn.on{color:#f3d27a!important;text-shadow:0 0 6px #c9a16588}
body.hud3.u20:not(.u2m,.u2s) #h3ctl .ck{display:none}
body.hud3.u20:not(.u2m,.u2s) #h3ctl .chip{border-left:1px solid #3a2e20!important}
body.hud3.u20:not(.u2m,.u2s) #h3ctl .chip:empty{display:none}
body.hud3.u20:not(.u2m,.u2s) #h3ctl #mswBtn:hover,body.hud3.u20:not(.u2m,.u2s) #h3ctl .chip:hover{color:#f3dfb0!important}
body.hud3.u20:not(.u2m,.u2s) #h3ctl #mswMenu{bottom:24px;left:-6px}
body.hud3.u20:not(.u2m,.u2s) #h3ctl #mswMenu button{height:26px;background:#0d0b09f2;color:#d9c79f;font:500 12px/26px var(--font)}
body.hud3.u20:not(.u2m,.u2s) #h3ctl #mswMenu button.on{background:#2a2015;color:#f3dfb0;box-shadow:inset 2px 0 0 #c9a165}
/* Sunken slot groups */
body.hud3.u20:not(.u2m,.u2s) #pad .hb{gap:3px;padding:3px;border-radius:4px;background:#070605;border:1px solid #2a2117!important;box-shadow:inset 0 2px 4px #000,0 1px 0 #c9a16522!important}
body.hud3.u20:not(.u2m,.u2s) #pad .hb+.hb{margin-left:0!important;padding-left:3px!important}
body.hud3.u20:not(.u2m,.u2s) #pad .pbtn{width:34px;height:34px;border:1px solid #3a2e20!important;border-radius:3px!important;background:radial-gradient(#15110d,#070605)!important;box-shadow:inset 0 0 0 1px #000!important}
body.hud3.u20:not(.u2m,.u2s) #pad .pbtn.mn{width:42px;height:42px;border-color:#c9a165!important;box-shadow:inset 0 0 0 1px #000,0 0 8px #c9a16555!important}
body.hud3.u20:not(.u2m,.u2s) #pad .pbtn.cur{border-color:#f0d47e!important;box-shadow:inset 0 0 0 1px #000,0 0 7px #f0d47e88!important}
body.hud3.u20:not(.u2m,.u2s) #pad .pbtn b,body.hud3.u20:not(.u2m,.u2s) #pad .pbtn em{font-size:10px}
/* Quieter slots: key labels small and dim, the ▾ picker and skill level only on hover */
body.hud3.u20:not(.u2m,.u2s) #pad .pbtn b{font-size:9px!important;color:#9a8a6c!important;font-weight:500!important}
body.hud3.u20:not(.u2m,.u2s) #pad .pbtn .pk,body.hud3.u20:not(.u2m,.u2s) #pad .pbtn .sklv{opacity:0;transition:opacity .15s}
body.hud3.u20:not(.u2m,.u2s) #pad .pbtn:hover .pk,body.hud3.u20:not(.u2m,.u2s) #pad .pbtn:hover .sklv{opacity:1}
body.hud3.u20:not(.u2m,.u2s) #pad .hb{border-color:#1e1811!important;box-shadow:inset 0 2px 4px #000!important}
/* Orbs: thick bevelled bronze ring */
body.hud3.u20:not(.u2m,.u2s) .h3orb{display:block;position:relative;flex:none;align-self:center;width:88px;height:88px;margin:-22px 0 -14px;border-radius:50%;padding:8px;z-index:2;
  background:radial-gradient(circle,#0000 58%,#000 59%,#0000 61%),conic-gradient(from 200deg,#2e2316,#d8b273,#5a4429,#a8834e,#2e2316,#c9a165,#2e2316);
  box-shadow:0 0 0 1px #000,inset 0 0 0 2px #1a130c,inset 0 2px 2px #f3dfb066,0 6px 16px #000}
body.hud3.u20:not(.u2m,.u2s) .h3orb.hp{margin-left:-58px}
body.hud3.u20:not(.u2m,.u2s) .h3orb.mp{margin-right:-58px}
.h3orb s{position:absolute;inset:8px;border-radius:50%;overflow:hidden;background:#0c0606;box-shadow:inset 0 0 0 2px #000,inset 0 0 16px #000}
.h3orb i{position:absolute;left:0;right:0;bottom:0;height:var(--v,100%);transition:height .25s}
.h3orb.hp i{background:radial-gradient(90% 70% at 40% 20%,#f0563f,#a3140d 55%,#3a0403)}
.h3orb.mp i{background:radial-gradient(90% 70% at 40% 20%,#5b97f0,#1846b0 55%,#05103a)}
.h3orb s::after{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(42% 28% at 36% 22%,#fff6,#0000 70%),radial-gradient(circle,#0000 62%,#0007)}
.h3orb b{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font:700 14px/15px var(--font);color:#fff;text-shadow:0 1px 2px #000,0 0 6px #000;z-index:1}
.h3orb b small{font-weight:400;font-size:10px;color:#fffc}

body.hud3.u20:not(.u2m,.u2s) #toast{bottom:144px!important}

/* Log: no box, fewer lines, old lines fade out */
body.hud3.u20:not(.u2m,.u2s) #u20lines{height:min(26vh,220px)!important;max-height:min(26vh,220px)!important;background:#0a0807c7!important;
  -webkit-mask-image:linear-gradient(#0008,#000 18%);mask-image:linear-gradient(#0008,#000 18%)}
body.hud3.u20:not(.u2m,.u2s) #u20ct button{background:#0d0b09d9;border-color:#4a3a26;color:#a8977a}
body.hud3.u20:not(.u2m,.u2s) #u20ct button.on{background:#1a140c;border-color:#c9a165;color:#f3dfb0}

/* Bottom-right menu: flat dark frame */
body.hud3.u20:not(.u2m,.u2s) #u20menu{background:#0d0b09e6;border:1px solid #4a3a26;border-radius:0;box-shadow:0 0 0 1px #000,0 6px 16px #000}

/* Round top-right buttons: smaller, flat */
body.hud3.u20:not(.u2m,.u2s) .u20rb{width:40px;height:40px;border-width:1px;border-color:#6b5333;background:#0d0b09e6;font-size:9px}

/* Boss bar: thin */
body.hud3.u20:not(.u2m,.u2s) #u20boss{top:34px}
body.hud3.u20:not(.u2m,.u2s) #u20boss .b{height:6px;border:0;border-radius:0;box-shadow:0 0 0 1px #000;background:#1a0a08}
body.hud3.u20:not(.u2m,.u2s) #u20boss .b i{background:linear-gradient(90deg,#6e0d06,#d23a22)}
body.hud3.u20:not(.u2m,.u2s) #u20boss .b span{display:none}

/* Floating windows (src/ui/hud3.js): one per menu tab, no backdrop, several open at once */
body.hud3.u20:not(.u2m,.u2s) #panel{display:none!important}
.h3w{position:fixed;z-index:30;display:flex;flex-direction:column;min-width:220px;min-height:120px;max-height:calc(100vh - 150px);
  resize:both;overflow:hidden;background:rgba(18,18,16,.96);border:1px solid #4a3a26;box-shadow:0 0 0 1px #000,0 12px 34px #000c}
.h3w[hidden]{display:none}
.h3wh{flex:none;display:flex;align-items:center;height:26px;padding:0 4px 0 10px;cursor:move;user-select:none;
  background:linear-gradient(#2a2117,#15110c);border-bottom:1px solid #4a3a26;color:#e6c77d;font:600 12px/26px var(--font);letter-spacing:1px}
.h3wh span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h3wh button{width:20px;height:20px;padding:0;border:1px solid #4a3a26;background:#0d0b09;color:#a8977a;font-size:11px;line-height:18px;cursor:var(--cur-hot)}
.h3wh button:hover{color:#f3dfb0;border-color:#c9a165}
.h3wb{flex:1;min-height:0;overflow:auto}
.h3wb>.tab,.h3wb>.tab.hidden{display:block!important}

/* Same look as inside #panel (ui20.css), the tabs no longer live there */
body.hud3 .h3w .tab{padding:6px 10px 0}
body.hud3 .h3w .btn{background:linear-gradient(#5d684d,#2e3825)!important;border:1px solid #a6ad80!important;color:#f3edc8!important;border-radius:3px!important;box-shadow:inset 0 1px 0 #ffffff22,0 1px 2px #000;text-shadow:0 1px 1px #000}
body.hud3 .h3w .btn:hover:not(:disabled){filter:brightness(1.2)}
body.hud3 .h3w .btn.on{background:linear-gradient(#8a7434,#4a3c14)!important;border-color:#e8c860!important}
body.hud3 .h3w .btn.red{background:linear-gradient(#7a3a2e,#3e1a12)!important;border-color:#c48a70!important}
body.hud3 .h3w .it{background:var(--w2cell);border:1px solid #4e4c3c;border-radius:0;box-shadow:inset 0 0 6px #000}
body.hud3 .h3w .it.r1{border-color:#6aa8ff}body.hud3 .h3w .it.r2{border-color:#ffd24a}body.hud3 .h3w .it.r3{border-color:#c77bff}
body.hud3.u2rxon .h3w[data-k=inv]{width:524px!important}
.h3w{zoom:var(--fs,1)}

/* Top band in the same language as the dock: plain gold numbers, flat dark chips with a thin bronze border */
#h3rank{display:none}
body.hud3.u20:not(.u2m,.u2s) #h3rank:not([hidden]){display:block}
body.hud3.u20:not(.u2m,.u2s) #u20r{gap:4px;top:8px!important}
body.hud3.u20:not(.u2m,.u2s) .u20rb{width:auto;height:24px;padding:0 9px;border-radius:0;white-space:nowrap;font:600 11px/22px var(--font)}
body.hud3.u20:not(.u2m,.u2s) .u20rb:hover{border-color:#c9a165;color:#f3dfb0;filter:none}
/* Town actions: a stack under the minimap's zone label (which already names the town) instead of a bar
   mid-screen; Kỳ Trân Các is in the top-right row, so it is dropped here. --h3z* mirror #u20zone (hud3.js).
   The mail/horse/helper icons below the label step down while the stack is shown. */
body.hud3.u20:not(.u2m,.u2s) #townBar{left:auto!important;right:var(--h3zr,6px)!important;top:var(--h3zt,182px)!important;width:var(--h3zw,150px)!important;
  transform:none!important;max-width:none!important;flex-direction:column;align-items:stretch;gap:2px;padding:0;background:none;border:0;border-radius:0;box-shadow:none}
body.hud3.u20:not(.u2m,.u2s) #townBar b,body.hud3.u20:not(.u2m,.u2s) #townBar #bKtcT{display:none!important}
body.hud3.u20:not(.u2m,.u2s):has(#townBar:not(.hidden)) #u20rc,body.hud3.u20:not(.u2m,.u2s):has(#townBar:not(.hidden)) #u20side{margin-top:110px}
body.hud3.u20:not(.u2m,.u2s) #townBar #bSellTown{font-size:0!important}
body.hud3.u20:not(.u2m,.u2s) #townBar #bSellTown::before{content:"Bán đồ ngoài lọc";font-size:11px}
body.hud3.u20:not(.u2m,.u2s) #townBar .btn{width:100%;margin:0!important;height:24px;padding:0 9px;background:#0d0b09e6!important;border:1px solid #6b5333!important;border-radius:0!important;box-shadow:none!important;color:#d9c79f!important;font:600 11px/22px var(--font)!important;text-shadow:none}
body.hud3.u20:not(.u2m,.u2s) #townBar .btn:hover{border-color:#c9a165!important;color:#f3dfb0!important;filter:none}
body.hud3.u20:not(.u2m,.u2s) #townBar .btn.on{background:#2a2015!important;border-color:#c9a165!important;color:#f3dfb0!important}

/* Same vertical centring for all three tab entries: the mode button holds bold text + an emoji, the chips plain text */
body.hud3.u20:not(.u2m,.u2s) #h3ctl #mswBtn,body.hud3.u20:not(.u2m,.u2s) #h3ctl .chip{display:inline-flex!important;align-items:center;justify-content:center}
body.hud3.u20:not(.u2m,.u2s) #h3ctl #mswBtn b,body.hud3.u20:not(.u2m,.u2s) #h3ctl #mswBtn::after,
body.hud3.u20:not(.u2m,.u2s) #h3ctl #rotBtn::before,body.hud3.u20:not(.u2m,.u2s) #h3ctl #ctrlBtn::before{line-height:1}
body.hud3.u20:not(.u2m,.u2s) #h3ctl #mswBtn::after{margin-left:4px}
/* The mode name starts with an emoji (another font) whose taller glyph pushes the text 1px below the two chips
   (measured on screen pixels: cap bottoms 883 vs 881). Nudged up to line up; the chips are plain text. */
body.hud3.u20:not(.u2m,.u2s) #h3ctl #mswBtn b{position:relative;top:-1px}

/* Remaining dialogs (shop, shared stash, Kỳ Trân Các, item details ...): no dark backdrop, the game and the open
   windows stay usable behind them; hud3.js makes the dialog draggable by its top strip. Locked dialogs (login,
   character creation, death) keep the backdrop. */
body.hud3.u20:not(.u2m,.u2s):not(.ngate-on) #modal:not([data-locked="1"]){background:none!important;pointer-events:none!important}
body.hud3.u20:not(.u2m,.u2s):not(.ngate-on) #modal:not([data-locked="1"]) .mbox{pointer-events:auto;box-shadow:0 0 0 1px #000,0 12px 34px #000c!important}
body.hud3.u20:not(.u2m,.u2s) #modal .mbox.h3top{cursor:move}

/* Bag drag and drop (hud3.js): drop zones appear while an item is dragged */
#h3ghost{position:fixed;z-index:99999;width:44px;height:44px;margin:-22px 0 0 -22px;pointer-events:none;opacity:.9;filter:drop-shadow(0 4px 8px #000)}
#h3dz{position:fixed;left:50%;bottom:176px;transform:translateX(-50%);z-index:99998;display:none;gap:8px}
#h3dz.on{display:flex}
#h3dz b{display:flex;flex-direction:column;align-items:center;justify-content:center;width:112px;height:58px;font:600 12px/1.25 var(--font);color:#d9c79f;
  background:#0d0b09ee;border:1px dashed #6b5333}
#h3dz b small{font:400 10px/1.2 var(--font);color:#a8977a}
#h3dz b.hot{border-style:solid;border-color:#f0d47e;color:#fff3c0;background:#2a2015}
.h3w.h3drop{outline:2px solid #f0d47e;outline-offset:-2px}