/* mobile.css — M-51: HUD HP potret sempit (≤600 px lebar) tak saling tumpuk. Hanya body.touch + portrait; lanskap & desktop TIDAK berubah.
   Akar masalah (diukur di 390×844): baris tombol atas 5×44 px (±262 px dari kanan) menimpa kompas (tengah) & #mapbtn (dekat minimap); bar HP/MP (tengah bawah, 195 px) tertimpa tombol Lompat/Serang.
   Tata letak baru: atas = minimap 84 px (kiri) + 6 tombol 38 px rata kanan (map·👤·menu·bantuan·quest·tas); kompas turun ke baris kedua; bawah = bar HP/MP di sudut seberang tombol serang (kiri; kanan bila `lefty`). */
@media (max-width:600px) and (orientation:portrait){
  /* --- minimap lebih kecil --- */
  body.touch #hud .mm{width:84px}
  body.touch #hud .mm canvas{width:84px!important;height:84px!important}
  /* --- baris tombol atas: 38 px, jarak 4 px, rata kanan, tak pernah menyentuh minimap (≤ 8+84 px dari kiri; 6 tombol = 248 px + 8 px tepi → mulai ≥ 104 px pada lebar 360) --- */
  body.touch #invbtn,body.touch #questbtn,body.touch #helpbtn,body.touch #menubtn,body.touch #charbtn,body.touch #mapbtn{width:38px;height:38px;font-size:18px;line-height:34px;padding:0;top:max(10px,env(safe-area-inset-top));left:auto}
  body.touch #invbtn{right:max(8px,env(safe-area-inset-right))}
  body.touch #questbtn{right:max(50px,calc(env(safe-area-inset-right) + 50px))}
  body.touch #helpbtn{right:max(92px,calc(env(safe-area-inset-right) + 92px))}
  body.touch #menubtn{right:max(134px,calc(env(safe-area-inset-right) + 134px))}
  body.touch #charbtn{right:max(176px,calc(env(safe-area-inset-right) + 176px))}
  body.touch #mapbtn{right:max(218px,calc(env(safe-area-inset-right) + 218px))}
  /* --- kompas: baris kedua, di bawah deretan tombol (tak lagi di bawah tombol) --- */
  body.touch #hud .compass{top:calc(max(10px,env(safe-area-inset-top)) + 46px);width:min(180px,46vw)}
  #bossbar{top:calc(max(10px,env(safe-area-inset-top)) + 98px)}
  /* --- bar HP/MP/EXP: lebar = sisa di sebelah kluster tombol Lompat+Serang (≈176 px × skala sentuh), sudut kiri --- */
  body.touch #hud .stats{left:max(10px,env(safe-area-inset-left));right:auto;transform:none;width:max(150px,calc(100vw - 28px - 176px * var(--ts,1)));bottom:max(8px,env(safe-area-inset-bottom))}
  body.touch.lefty #hud .stats{left:auto;right:max(10px,env(safe-area-inset-right))}
  /* --- ONLINE saja (tak teruji di browser tanpa server): tombol chat 7 jarak 42 px tak muat di baris atas → pindah ke kiri-bawah di atas bar HP; log chat naik di atas hotbar 2 baris dan selebar layar; frame party sedikit turun dari nama peta --- */
  body.touch #chatbtn{right:auto;left:max(10px,env(safe-area-inset-left));top:auto;bottom:calc(max(8px,env(safe-area-inset-bottom)) + 76px);width:38px;height:38px;font-size:18px;line-height:34px;padding:0}
  body.touch #chat{bottom:calc(max(86px,env(safe-area-inset-bottom) + 72px) + 104px);width:calc(100vw - 24px);min-width:0}
  body.touch .party{top:calc(max(10px,env(safe-area-inset-top)) + 130px)}
}

/* --- M-51b: Lompat/Serang = emoji terpusat di dalam lingkaran (teks lama melenceng ke tepi atas tombol; semua orientasi sentuh) --- */
body.touch #bAtk,body.touch #bJump{font-size:0!important;line-height:1;display:flex;align-items:center;justify-content:center}
body.touch #bAtk::before{content:'⚔️';font-size:36px}
body.touch #bJump::before{content:'⬆️';font-size:28px}
/* --- M-51b: pil "👥 N" (#presence, gaya inline JS: kanan-atas 12 px) menimpa Tas/Quest → turun ke baris kedua kanan; kamera/duduk (--bt) ikut turun --- */
body.touch{--bt:calc(max(10px,env(safe-area-inset-top)) + 96px)}
body.touch #presence{top:calc(max(10px,env(safe-area-inset-top)) + 50px)!important;right:max(8px,env(safe-area-inset-right))!important}

/* --- M-51d (laporan pemilik: hotbar di kiri mengganggu gerak/joystick): LANSKAP sentuh — hotbar pindah ke KANAN, di samping tab SKILL (kiri tab, sejajar di atas kluster Lompat/Serang). Kiri-bawah kembali bebas untuk joystick. Kidal: tetap sisi kanan, di atas bar HP/MP. Log chat (online) naik di atas hotbar & dibatasi tingginya agar tak menabrak minimap. --- */
@media (orientation:landscape) and (max-height:480px){
  body.touch #hotbar{left:auto;right:max(64px,calc(env(safe-area-inset-right) + 64px));transform:none;bottom:max(120px,calc(env(safe-area-inset-bottom) + 100px))}   /* ≥ 64 px dari tepi: tak menimpa tab SKILL (30 px) & tombol 📷/duduk (hingga 58 px); ≥ 120 px dari bawah: di atas Lompat/Serang */
  body.touch.lefty #hotbar{left:auto;right:max(40px,calc(env(safe-area-inset-right) + 40px));bottom:calc(max(8px,env(safe-area-inset-bottom)) + 76px)}
  body.touch:not(.lefty) #bAtk{right:max(36px,calc(env(safe-area-inset-right) + 18px))}   /* tab SKILL (kanan, ±24 px) tak lagi tertimpa lingkaran Serang (diukur: 12 px) */
  body.touch:not(.lefty) #bJump{right:max(130px,calc(env(safe-area-inset-right) + 112px))}
  body.touch #chat{bottom:calc(max(8px,env(safe-area-inset-bottom)) + 136px)}
  body.touch #chat .ch-log{max-height:min(9.6em,calc(100vh - 300px))}body.touch #chat.typing .ch-log{max-height:min(12em,calc(100vh - 300px))}
}

/* --- M-51e (usul pemilik): tombol 📷 (#bView) disembunyikan di HP — kamera diganti lewat Pengaturan (Kamera) atau tombol V; jarang dipindah. Tombol duduk naik mengisi tempatnya. --- */
body.touch #bView{display:none!important}
body.touch #bSit{top:var(--bt,70px)}