/* hudMobile.css — HUD HP (body.ui-touch): ringkas & semi-transparan agar arena tetap terlihat.
   Dimuat setelah hud.css & hudV2.css; hanya menimpa untuk mode sentuh.
   Batas: huruf ≥11px (--fs-xs); area sentuh ≥44×44px (visual boleh lebih kecil, ::after memperluas).
   Tata letak diukur untuk HP landscape 360–430px tinggi:
     kiri  = profil (6–72) → Bayangan (78–133) → chat (80 / 140) → analog di bawah
     kanan = minimap (6–99) → baris tombol 32px (111–143) → feed loot (154) → ramuan, Aksi, Serang di bawah */

/* ---------- Profil kiri atas ---------- */
body.ui-touch #hud-status { top: calc(6px + env(safe-area-inset-top)); left: calc(8px + env(safe-area-inset-left)); }
body.ui-touch .hud-portrait { flex-basis: 46px; }
body.ui-touch .hud-portrait-ring { width: 46px; height: 46px; padding: 3px; box-shadow: 0 0 0 1.5px rgba(21, 26, 34, 0.8), 0 2px 8px rgba(0, 0, 0, 0.45); }
body.ui-touch .hud-lv { margin-top: -10px; padding: 0 6px; font-size: var(--fs-xs); border-width: 1.5px; }
body.ui-touch .hud-card {
  width: 168px; margin-left: -12px; margin-top: 3px; padding: 4px 8px 5px 16px; gap: 2px;
  background: rgba(22, 26, 33, 0.62); border: 1px solid rgba(170, 178, 188, 0.4); box-shadow: none;
}
body.ui-touch #hud-name { font-size: var(--fs-sm); text-shadow: 0 1px 2px #000; }
body.ui-touch .hud-zone-chip { display: none; }
body.ui-touch .hud-bar { height: 14px; border-color: rgba(38, 50, 72, 0.7); background: rgba(7, 10, 16, 0.6); }
body.ui-touch .hud-bar.exp { height: 4px; }
body.ui-touch .hud-bar.exp span { display: none; }
body.ui-touch .hud-res-row { gap: 10px; font-size: var(--fs-xs); text-shadow: 0 1px 2px #000; }
body.ui-touch .hud-res-ic { width: 13px; height: 13px; }

/* ---------- Kartu Bayangan ---------- */
body.ui-touch #mercenary-hud-card {
  top: calc(78px + env(safe-area-inset-top)); left: calc(8px + env(safe-area-inset-left)); width: 214px; padding: 4px 6px; gap: 6px; line-height: 1.2;
  border-radius: 8px; background: rgba(20, 16, 34, 0.62); box-shadow: none;
}
body.ui-touch #mercenary-hud-card .merc-ava { flex-basis: 28px; height: 28px; }
body.ui-touch #mercenary-hud-card .merc-body { gap: 2px; }
body.ui-touch #mercenary-hud-card .merc-top { font-size: var(--fs-xs); }
body.ui-touch #btn-dismiss-merc { position: relative; min-height: 30px; padding: 0 8px; font-size: var(--fs-xs); }
body.ui-touch #btn-dismiss-merc::after { content: ''; position: absolute; inset: -8px -4px; }

/* ---------- Chat: pil kecil transparan (ketuk untuk membuka) ---------- */
body.ui-touch #social-hud-dock { bottom: auto; top: calc(80px + env(safe-area-inset-top)); left: calc(8px + env(safe-area-inset-left)); width: 214px; gap: 4px; }
body.ui-touch.has-merc #social-hud-dock { top: calc(140px + env(safe-area-inset-top)); }
body.ui-touch #chat-box { border-radius: 8px; background: rgba(12, 16, 24, 0.5); border-color: rgba(255, 255, 255, 0.12); box-shadow: none; }
body.ui-touch #chat-box:has(#chat-body:not(.minimized)) { background: rgba(12, 16, 24, 0.78); }
body.ui-touch .chat-header { min-height: 44px; padding: 0 4px 0 10px; font-size: var(--fs-xs); gap: 6px; }
body.ui-touch .chat-header .chat-actions { gap: 8px; }
body.ui-touch .chat-header button { height: 36px; min-width: 36px; padding: 0 6px; background: rgba(255, 255, 255, 0.06); }
body.ui-touch .chat-header button::after { content: ''; position: absolute; inset: -5px; }
body.ui-touch #chat-preview { font-size: var(--fs-xs); text-shadow: 0 1px 2px #000; }
body.ui-touch #chat-messages { height: 84px; font-size: var(--fs-sm); padding: 2px 8px 4px; }
body.ui-touch .chat-input-row { padding: 4px; }
body.ui-touch #chat-input { min-height: 44px; padding: 6px 10px; }
body.ui-touch #emoji-bar { background: rgba(12, 16, 24, 0.78); }
body.ui-touch .emoji-btn { width: 44px; height: 44px; }
body.ui-touch .chat-sos-btn { min-height: 32px; }
body.ui-touch .chat-sos-btn::after { content: ''; position: absolute; inset: -6px -2px; }

/* ---------- Kanan atas: minimap & tombol ---------- */
body.ui-touch #top-right-controls { top: calc(6px + env(safe-area-inset-top)); right: calc(8px + env(safe-area-inset-right)); gap: 12px; }
body.ui-touch #minimap-panel { width: 124px; height: 93px; padding: 2px; border-radius: 8px; opacity: 0.85; box-shadow: 0 0 0 1.5px #151a22, 0 2px 8px rgba(0, 0, 0, 0.4); }
body.ui-touch #minimap-panel.is-big { width: 250px; height: 188px; opacity: 0.95; }
body.ui-touch #minimap-canvas { border-radius: 6px; }
/* Visual 28px di sudut dalam minimap; ::after memperluas area sentuh menjadi 44×44 */
body.ui-touch .mm-btn { top: 2px; right: 2px; width: 28px; height: 28px; font-size: 16px; border-width: 1.5px; }
body.ui-touch .mm-btn::after { inset: -9.5px; }
body.ui-touch #minimap-label { bottom: -9px; padding: 0 6px; border-width: 1px; }
body.ui-touch .mm-row { gap: 6px; }
body.ui-touch #net-stats { font-size: var(--fs-xs); }
/* Tombol di bawah peta: visual 32px & tembus pandang agar tidak menutupi arena (permintaan pemilik).
   ::after memperluas area sentuh ke 44×44; jarak 12px = area sentuh bersebelahan tanpa tumpang-tindih.
   Tas tampil ikon saja (nama tetap dibacakan lewat aria-label). */
body.ui-touch .tr-row { gap: 12px; }
body.ui-touch .hud-top-btn {
  height: 32px; min-width: 32px; width: 32px; padding: 0; gap: 0; font-size: 16px; border-radius: 7px;
  background: rgba(18, 25, 38, 0.5); border: 1px solid rgba(255, 255, 255, 0.16); border-bottom: 2px solid rgba(0, 0, 0, 0.45); box-shadow: none;
}
/* inset diukur dari kotak padding (di dalam bingkai 1/1/1/2px): -7/-7/-8/-7 = tepat 44×44 dari tepi luar */
body.ui-touch .hud-top-btn::after { content: ''; position: absolute; inset: -7px -7px -8px -7px; }
body.ui-touch .hud-top-btn.btn-square { width: 32px; padding: 0; }
body.ui-touch .hud-top-btn.btn-bag { border-color: rgba(242, 204, 96, 0.5); }
body.ui-touch .hud-top-btn .bag-lbl { display: none; }
body.ui-touch .hud-ic { width: 18px; height: 18px; }
body.ui-touch .mail-badge { min-width: 16px; height: 16px; top: -7px; right: -7px; border-width: 1.5px; }

/* ---------- Bar boss: sempit agar tidak menabrak profil kiri & minimap kanan ---------- */
body.ui-touch #boss-bar { top: calc(6px + env(safe-area-inset-top)); width: clamp(180px, calc(100vw - 470px), 380px); padding: 4px 10px 6px; }
body.ui-touch #boss-bar .boss-name { font-size: var(--fs-sm); margin-bottom: 2px; }
body.ui-touch #boss-bar .hud-bar { height: 14px; }
body.ui-touch #btn-sos-flare { top: calc(54px + env(safe-area-inset-top)); }

/* ---------- Analog gaya Brawl Stars (touchControls.js; ukuran = bawaan phaser-virtual-joystick) ----------
   Zona aktif: separuh kiri layar di bawah 20% atas. Pangkal r=64 (cincin tipis + titik tengah = zona mati),
   stik r=40 emas. Diam: tampil samar di kiri bawah sebagai petunjuk. Ditekan: muncul tepat di bawah jari. */
body.ui-touch #joy-zone { top: 20vh; bottom: 0; width: 50vw; height: auto; }
body.ui-touch #joy-base {
  left: calc(20px + env(safe-area-inset-left)); bottom: calc(18px + env(safe-area-inset-bottom)); width: 128px; height: 128px;
  background: rgba(20, 28, 42, 0.18); border: 2px solid rgba(255, 255, 255, 0.32); box-shadow: none; opacity: 0.3; transition: opacity 0.15s;
}
body.ui-touch #joy-base::before { content: ''; position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); }
body.ui-touch #joy-base.is-active { opacity: 1; }
body.ui-touch #joy-thumb { width: 80px; height: 80px; margin: -40px 0 0 -40px; opacity: 0.9; border-width: 2px; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.25), 0 3px 8px rgba(0, 0, 0, 0.4); }

/* ---------- Tombol Serang / Aksi: lebih kecil & tembus pandang ---------- */
body.ui-touch #btn-touch-attack {
  right: calc(20px + env(safe-area-inset-right)); bottom: calc(22px + env(safe-area-inset-bottom)); width: 82px; height: 82px;
  opacity: 0.78; border-width: 2px; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.35);
}
body.ui-touch #btn-touch-attack.is-pressed { opacity: 1; }
body.ui-touch .touch-btn .ic { width: 28px; height: 28px; }
body.ui-touch #btn-touch-action { right: calc(116px + env(safe-area-inset-right)); bottom: calc(30px + env(safe-area-inset-bottom)); width: 66px; height: 66px; opacity: 0.92; border-width: 2px; }
body.ui-touch #btn-touch-action.is-hidden { opacity: 0; }
body.ui-touch #btn-touch-action .lb { max-width: 58px; }

/* ---------- Notifikasi ---------- */
body.ui-touch #loot-feed { bottom: auto; top: calc(154px + env(safe-area-inset-top)); width: 180px; }
body.ui-touch .loot-row { font-size: var(--fs-xs); background: rgba(14, 18, 26, 0.62); }
/* Layar sangat pendek: hanya 2 baris terbaru agar feed tidak menimpa tombol ramuan */
@media (max-height: 380px) { body.ui-touch .loot-row:nth-last-child(n + 3) { display: none; } }
body.ui-touch .reward-card { min-width: 200px; padding: 5px 12px 5px 6px; gap: 8px; border-width: 1.5px; }
body.ui-touch .reward-card .rw-ic { flex-basis: 30px; height: 30px; font-size: 1.1rem; }
body.ui-touch .reward-card .rw-ic .gi, body.ui-touch .reward-card .rw-ic svg { width: 22px; height: 22px; }
body.ui-touch .reward-card .rw-title { font-size: var(--fs-xs); }
body.ui-touch .reward-card .rw-text { font-size: var(--fs-sm); }