/* JOYSTICK ẨN / ĐỘNG: chỉ là hình vẽ phủ lên canvas khi giữ tay.
   Không tạo vùng chiếm chỗ; không chặn các nút UI; không dời UI khi hiện/ẩn. */
.move-joystick{
 --stick-size:112px;position:absolute;left:0;top:0;right:auto;bottom:auto;
 display:block;width:var(--stick-size);height:var(--stick-size);box-sizing:border-box;
 transform:translate(-50%,-50%);z-index:13;pointer-events:none!important;
 visibility:hidden;opacity:0;border-radius:50%;user-select:none;-webkit-user-select:none;
 border:1px solid #c9eee66e;background:radial-gradient(circle,#468f8c14,#265f681a 65%,#88e3c51f);
 box-shadow:inset 0 0 0 5px #c9f3df10;transition:opacity .08s linear;
}
.move-joystick.is-held{visibility:visible;opacity:.48}
.joystick-ring{position:absolute;inset:9px;border:1px solid #c5eed758;border-radius:50%;pointer-events:none}
.joystick-ring i{position:absolute;left:50%;top:0;width:3px;height:6px;border-radius:2px;background:#daf6ed9c;transform:translateX(-50%)}
.joystick-ring i:nth-child(2){left:100%;top:50%;transform:translate(-100%,-50%) rotate(90deg)}
.joystick-ring i:nth-child(3){top:100%;transform:translate(-50%,-100%)}
.joystick-ring i:nth-child(4){left:0;top:50%;transform:translateY(-50%) rotate(90deg)}
.joystick-knob{position:absolute;top:50%;left:50%;width:44px;height:44px;box-sizing:border-box;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;border:1px solid #d5f5edba;background:linear-gradient(145deg,#a4c9c680,#387c8190);box-shadow:inset 0 1px 2px #fff3;display:flex;align-items:center;justify-content:center;will-change:transform}
.joystick-knob span{width:8px;height:8px;border-radius:50%;border:1px solid #c6eee288;background:#bbecde44}
.move-joystick.is-sprinting{border-color:#a3f5c99c}
.joystick-caption,.mobile-controls,#interact{display:none!important}
body:not(.in-game) .move-joystick,.keyboard-open .move-joystick,body:has(.panel:not([hidden])) .move-joystick{visibility:hidden;opacity:0}
/* Bỏ mọi vùng dự phòng cho cụm mũi tên / joystick cố định cũ.
   Dọc: thanh vật phẩm dưới cùng; HUD/nút góc ngay phía trên thanh.
   Ngang: HUD bên trái, thanh vật phẩm dưới giữa, nút bên phải. */
@media(max-width:800px),(pointer:coarse){
 .left-status-stack{left:max(10px,env(safe-area-inset-left));bottom:calc(80px + env(safe-area-inset-bottom));width:155px}
 .left-status-stack #status-hud{width:155px;max-width:155px}
 .quickbar{bottom:max(12px,env(safe-area-inset-bottom))}
 .actions{right:max(10px,env(safe-area-inset-right));bottom:calc(80px + env(safe-area-inset-bottom));max-width:calc(100% - 175px);flex-direction:row;gap:5px;flex-wrap:wrap;justify-content:flex-end}
 .hud-tools{max-height:calc(100% - 255px)}
 #touch-furniture-tools:not([hidden]){left:12px;bottom:calc(190px + env(safe-area-inset-bottom))}
 .keyboard-open .quickbar{visibility:hidden;pointer-events:none}
}
@media(max-width:360px) and (orientation:portrait){
 .left-status-stack{width:138px}.left-status-stack #status-hud{width:138px;max-width:138px}
 .hud-tools{max-height:calc(100% - 245px)}
 .actions{max-width:calc(100% - 160px)}
}
@media(orientation:landscape) and (pointer:coarse),(orientation:landscape) and (max-height:550px){
 .move-joystick{--stick-size:104px}
 .left-status-stack{left:max(12px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom));width:150px}
 .left-status-stack #status-hud{width:150px;max-width:150px}
 .left-status-stack .status-hud-row{font-size:10px;padding:3px 6px}.left-status-stack .status-hud-row b{font-size:10px}
 .quickbar{--slot-size:48px;--slot-gap:6px;left:50%;right:auto;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%)}
 .actions{right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));flex-direction:row;max-width:calc(50% - 150px);flex-wrap:wrap;justify-content:flex-end}
 .hud-tools{max-height:calc(100% - 190px)}
 #touch-furniture-tools:not([hidden]){left:50%;transform:translateX(-50%);bottom:calc(74px + env(safe-area-inset-bottom))}
}
@media(orientation:landscape) and (max-width:650px) and (max-height:550px){
 .left-status-stack{width:138px}.left-status-stack #status-hud{width:138px;max-width:138px}
 .quickbar{--slot-size:40px;--slot-gap:4px}
 .actions{max-width:calc(50% - 118px);gap:4px}
 .actions #logout-btn{font-size:10px;padding:6px}
 #fullscreen-btn{width:32px;min-width:32px}
}
@media(prefers-reduced-motion:reduce){.move-joystick{transition:none}.joystick-knob{will-change:auto}}

/* Khi bàn phím ảo mở / ô nhập đang được chọn trên mobile:
   ẩn thanh 1–5 và ba nút góc phải; giữ nguyên khung Chat và nút Gửi. */
@media(max-width:800px),(pointer:coarse){
 body.mobile-typing .quickbar,
 body.keyboard-open .quickbar,
 body.mobile-typing .actions,
 body.keyboard-open .actions{
   display:none!important;
 }
 body.mobile-typing .move-joystick,
 body.keyboard-open .move-joystick{visibility:hidden!important;opacity:0!important}
}

/* Mobile: ẩn HUD cấp độ / máu / tiền khi focus ô nhập hoặc mở bàn phím ảo. */
@media (max-width:800px), (pointer:coarse) {
  body.mobile-typing #status-hud,
  body.keyboard-open #status-hud {
    display:none!important;
  }
}

/* Căn lại HUD mobile: dịch vào trong thêm 12px, không đổi PC. */
@media (max-width:800px), (pointer:coarse) {
  .canvas-wrap .left-status-stack { left: max(22px, env(safe-area-inset-left)) !important; }
}
@media (orientation:landscape) and (pointer:coarse) {
  .canvas-wrap .left-status-stack { left: max(24px, env(safe-area-inset-left)) !important; }
}

/* Thêm thanh thể lực: cột công cụ vẫn cuộn được, không chạm vào HUD. */
@media(max-width:800px),(pointer:coarse){.hud-tools{max-height:calc(100% - 290px)}}
@media(max-width:360px) and (orientation:portrait){.hud-tools{max-height:calc(100% - 280px)}}
@media(orientation:landscape) and (pointer:coarse),(orientation:landscape) and (max-height:550px){.hud-tools{max-height:calc(100% - 225px)}}