/* Chỉ làm nổi ô kiếm đang cầm; không đổi vị trí năm ô và joystick ẩn. */
[data-hotbar-slot].is-equipped{border-color:#f2ca71!important;box-shadow:0 0 0 2px #eec36880,inset 0 0 16px #e5b66c24!important;background:#58472dd9!important}
[data-hotbar-slot].is-equipped::after{content:'';position:absolute;left:32%;right:32%;top:4px;height:3px;border-radius:3px;background:#ffe1a0}
#pvp-hint{position:absolute;top:calc(58px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);max-width:calc(100% - 220px);padding:7px 12px;border:1px solid #9ab7c659;border-radius:12px;background:#102436d9;color:#ffe0a1;z-index:6;font-size:12px;font-weight:650;text-align:center;pointer-events:none}
#pvp-down{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);padding:18px 24px;max-width:80%;border:1px solid #9fbad7;border-radius:16px;background:#122a40ed;color:#fff;text-align:center;font-weight:700;z-index:50;pointer-events:none}
#pvp-hint[hidden],#pvp-down[hidden]{display:none!important}
.pvp-shop-intro{padding:12px;border-radius:10px;background:#23435670;line-height:1.55;color:#e8f1f5}
@media(max-width:800px),(pointer:coarse){#pvp-hint{top:8px;padding:5px 7px;font-size:10px;max-width:calc(100% - 215px)}#pvp-down{font-size:13px;padding:14px;max-width:80%}body.mobile-typing #pvp-hint{display:none!important}}
/* Mobile dọc: không thêm một nhãn đè Online/minimap; ô kiếm sáng cho biết đang cầm. */
@media (max-width:650px) and (orientation:portrait){#pvp-hint{display:none!important}}

/* Võ sư: đã sở hữu vũ khí thì không hiển thị nút Mua. */
.pvp-owned-tag{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;padding:8px 12px;border-radius:9px;background:#143e36;color:#95f3bb;font-size:13px;font-weight:750;border:1px solid #2c795a}

/* Hai trạng thái dùng chung một ảnh WebP; chỉ số là DOM cập nhật từ máy chủ. */
:root{--vitals-width:min(480px,calc(100vw - 480px));--vitals-top:max(4px,env(safe-area-inset-top))}
.vitals-hud{
 position:absolute;z-index:4;top:var(--vitals-top);left:50%;transform:translateX(-50%);
 width:var(--vitals-width);aspect-ratio:6;pointer-events:none;user-select:none;
 -webkit-user-select:none;isolation:isolate;container-type:inline-size;
}
.vitals-frame{position:absolute;inset:0;background:url('assets/ui/vitals-v175.webp') center top/100% 200% no-repeat}
.vitals-hud[data-mode="armed"] .vitals-frame,.vitals-hud[data-mode="cooldown"] .vitals-frame{background-position:center bottom}
.vitals-hud[data-mode="unknown"] .vitals-frame{filter:grayscale(1)}
.vitals-meter{position:absolute;top:37.57%;height:23.48%;width:30.3%;z-index:1}
.vitals-health{left:11.14%}.vitals-stamina{right:11.14%}
.vitals-track{position:absolute;inset:0;overflow:hidden;background:#060b10;box-sizing:border-box}
.vitals-health-track{clip-path:polygon(9.5% 0,100% 0,90.5% 100%,0 100%)}
.vitals-stamina-track{clip-path:polygon(0 0,90.5% 0,100% 100%,9.5% 100%)}
.vitals-fill{position:absolute;top:0;bottom:0;width:100%;transition:width .14s linear;box-shadow:inset 0 1px 1px #ffffff6b,inset 0 -1px 2px #0008}
.vitals-health-fill{right:0;background:repeating-linear-gradient(125deg,transparent 0 12px,#b7ff5a5c 12px 13px,transparent 13px 25px),linear-gradient(0deg,#4bed0b,#08a703 40%,#063c08)}
.vitals-stamina-fill{left:0;background:repeating-linear-gradient(55deg,transparent 0 12px,#7feeff70 12px 13px,transparent 13px 25px),linear-gradient(0deg,#16d9f9,#008dcc 40%,#033e70)}
.vitals-value{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:0;color:#fff;font-size:clamp(9px,2.8cqw,16px);font-weight:800;line-height:1;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px #000,0 0 3px #000}
.vitals-value small{font-size:1em;color:inherit}
.combat-badge{position:absolute;left:45.2%;top:18.5%;width:9.6%;height:44.5%;z-index:2;display:grid;place-items:center}
.combat-countdown{display:none;position:relative;z-index:1;color:#fff3e7;line-height:1;font-size:clamp(14px,4.6cqw,27px);font-weight:850;font-variant-numeric:tabular-nums;text-shadow:0 2px 3px #000}
.combat-badge[data-mode="cooldown"]::before,.combat-badge[data-mode="unknown"]::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse,#202126 35%,#101116 85%);clip-path:polygon(18% 0,82% 0,100% 50%,82% 100%,18% 100%,0 50%)}
.combat-badge[data-mode="cooldown"] .combat-countdown,.combat-badge[data-mode="unknown"] .combat-countdown{display:block}
.vitals-mode-label{position:absolute;left:42%;width:16%;top:68%;height:16%;display:flex;align-items:center;justify-content:center;text-align:center;white-space:nowrap;color:#fff5df;font-size:clamp(6.5px,2cqw,11px);font-weight:800;line-height:1;letter-spacing:0;text-shadow:0 1px 2px #000}
.vitals-hud[data-mode="cooldown"] .vitals-mode-label{color:#ffcdcb}
.vitals-hud[data-mode="unknown"] .vitals-mode-label{color:#ced7df;font-size:clamp(6px,1.8cqw,10px)}
.vitals-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body:not(.in-game) .vitals-hud{display:none}
.topbar #vehicle-status{max-width:115px}
#pvp-hint{top:calc(var(--vitals-top) + var(--vitals-width) / 6 + 8px)}
@media(prefers-reduced-motion:reduce){.vitals-fill{transition:none}}
/* Bố cục gọn: PC nhỏ hơn; mobile có hàng riêng cho HUD / minimap.
   Đây là vị trí của neo thật, cả hình vẽ Canvas và vùng chặn chạm đều theo neo. */
:root{
 --mini-top:max(13px,env(safe-area-inset-top));
 --mini-right:max(13px,env(safe-area-inset-right));
}
.canvas-wrap .online-widget{top:calc(var(--mini-top) + var(--mini-height) + 36px);right:var(--mini-right)}
.quickbar{--slot-size:60px;--slot-gap:8px}
/* Bên trái chỉ còn Cấp độ và Tiền; không cần giữ chiều rộng của HUD cũ. */
.left-status-stack{width:196px}

@media(max-width:800px),(pointer:coarse){
 :root{--vitals-width:min(360px,calc(100vw - 350px));--vitals-top:max(5px,env(safe-area-inset-top))}
 body.mobile-typing .vitals-hud,body.keyboard-open .vitals-hud,body.chat-open .vitals-hud{display:none!important}
 .chat-toggle{top:max(10px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left))}
 .hud-icon{width:42px;height:42px;border-radius:11px;font-size:22px}
 .hud-icon svg{width:21px;height:21px}
 .hud-tools{top:calc(max(10px,env(safe-area-inset-top)) + 48px);left:max(10px,env(safe-area-inset-left));gap:6px;max-height:calc(100% - 155px);padding-right:3px}
 .canvas-wrap .left-status-stack{left:max(10px,env(safe-area-inset-left))!important;bottom:calc(66px + env(safe-area-inset-bottom));width:144px}
 .left-status-stack #status-hud{width:100%;max-width:100%;padding:3px 6px;border-radius:11px}
 .left-status-stack .status-hud-row{min-height:24px;grid-template-columns:15px minmax(0,1fr) auto;column-gap:4px;padding:4px 2px;font-size:10px}
 .left-status-stack .status-hud-row b{font-size:10px;max-width:100%}
 .left-status-stack .status-hud-icon{font-size:12px}
 .canvas-wrap .quickbar{--slot-size:44px;--slot-gap:6px;bottom:calc(10px + env(safe-area-inset-bottom));left:50%;right:auto;transform:translateX(-50%)}
 .hotbar-slot{border-radius:11px;padding:4px 4px 12px}
 .hotbar-key{font-size:11px;line-height:12px;bottom:3px;right:5px}
 .hotbar-item{width:28px;height:28px}
 .hotbar-quantity{font-size:8px;line-height:10px;padding:1px 3px}
 .canvas-wrap .actions{right:max(10px,env(safe-area-inset-right));bottom:calc(66px + env(safe-area-inset-bottom));max-width:calc(100% - 176px);gap:4px;flex-direction:row;align-items:center;justify-content:flex-end;flex-wrap:wrap}
 #fullscreen-btn{width:36px;height:36px;min-width:36px;min-height:36px}
 .actions #logout-btn{min-height:36px;padding:6px;font-size:10px}
 .actions #furniture-btn{font-size:10px;min-height:34px;padding:6px 8px}
 #online-toggle{top:calc(var(--mini-top) + var(--mini-height) + 36px);right:var(--mini-right);min-height:32px;padding:5px 8px;font-size:10px}
 .canvas-wrap .online-widget{top:calc(var(--mini-top) + var(--mini-height) + 73px);max-height:max(80px,calc(100% - var(--mini-top) - var(--mini-height) - 220px));max-width:calc(100% - 75px);padding:7px;overflow:auto}
 .online-widget .social-title{font-size:10px}.online-title-actions #online-count{font-size:10px}
 .online-widget .online-list li{height:29px;font-size:10px}
 .canvas-wrap #quest.quest{left:60px;top:58px;max-width:calc(100% - 72px)}
}
/* Dọc: thanh sinh lực nằm trên cùng, cạnh nút Chat; minimap xuống hàng kế tiếp.
   Không lấy chiều cao minimap làm độ lệch HUD nữa (nguyên nhân thanh nằm giữa màn). */
@media(max-width:650px) and (orientation:portrait){
 :root{--vitals-width:min(260px,calc(100vw - 100px));--vitals-top:max(6px,env(safe-area-inset-top));--mini-top:calc(max(6px,env(safe-area-inset-top)) + 68px)}
 .vitals-hud{left:calc(50% + 22px);transform:translateX(-50%)}
 .topbar{top:calc(var(--mini-top) + 2px);left:62px;right:calc(var(--mini-width) + 30px);height:26px}
 #multiplayer-status{font-size:9px;padding:5px 6px}
 .canvas-wrap .hud-tools{max-height:calc(100% - 210px)}
 .canvas-wrap .chat-widget{left:60px;top:max(10px,env(safe-area-inset-top));width:calc(100% - 72px);max-height:calc(100% - 24px)}
}
@media(max-width:360px) and (orientation:portrait){
 .canvas-wrap .left-status-stack{width:134px}
 .canvas-wrap .actions{max-width:calc(100% - 158px)}
 .left-status-stack .status-hud-row{font-size:9px}.left-status-stack .status-hud-row b{font-size:9px}
 .canvas-wrap .quickbar{--slot-gap:5px}
}
/* Ngang: cùng một hàng dưới; không dành chỗ cho joystick vì cần điều khiển đã ẩn. */
@media(orientation:landscape) and (pointer:coarse),(orientation:landscape) and (max-height:550px){
 .canvas-wrap .left-status-stack{bottom:max(10px,env(safe-area-inset-bottom));left:max(10px,env(safe-area-inset-left))!important;width:144px}
 .canvas-wrap .actions{bottom:max(10px,env(safe-area-inset-bottom));max-width:calc(50% - 140px);right:max(10px,env(safe-area-inset-right))}
 .canvas-wrap .hud-tools{max-height:calc(100% - 142px)}
 .canvas-wrap .online-widget{max-height:max(70px,calc(100% - var(--mini-top) - var(--mini-height) - 153px))}
}
@media(orientation:landscape) and (max-width:700px){
 :root{--vitals-width:calc(100vw - 344px)}
 .canvas-wrap .left-status-stack{width:128px}
 .left-status-stack .status-hud-row{font-size:9px}.left-status-stack .status-hud-row b{font-size:9px}
 .canvas-wrap .actions{max-width:calc(50% - 125px)}
}
/* Bàn phím thật sự đang mở: không để UI chơi game đè lên ô nhập. */
@media(max-width:800px),(pointer:coarse){
 body.mobile-typing .left-status-stack,body.keyboard-open .left-status-stack,
 body.mobile-typing .actions,body.keyboard-open .actions,
 body.mobile-typing .quickbar,body.keyboard-open .quickbar{display:none!important}
}

/* Nhãn xe không lấn minimap đã phóng 140% trên PC. */
@media(min-width:801px) and (pointer:fine){
 .topbar{right:calc(var(--mini-width) + var(--mini-right) + 18px)}
}
@media(min-width:801px) and (max-width:1100px){.topbar #vehicle-status{display:none!important}}