/* css/hud.css — I-1: crosshair, petunjuk klik, kontrol sentuh. HUD HP/MP/minimap menyusul I-7. */
#xhair{position:fixed;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;pointer-events:none;opacity:.85}
#xhair::before,#xhair::after{content:"";position:absolute;background:#fff;box-shadow:0 0 2px #000}
#xhair::before{left:8px;top:0;width:2px;height:18px}
#xhair::after{top:8px;left:0;height:2px;width:18px}
#hint{position:fixed;left:50%;top:62%;transform:translateX(-50%);padding:10px 18px;border-radius:10px;background:rgba(0,0,0,.55);font-size:14px;text-align:center;pointer-events:none;line-height:1.5}
body.locked #hint,body.touch #hint{display:none}
#touch{position:fixed;inset:0;pointer-events:none;z-index:5}
.tz{position:absolute;top:0;bottom:0;width:50%;pointer-events:auto;touch-action:none}
#tl{left:0}#tr{right:0}
#joy{display:none;position:absolute;width:144px;height:144px;margin:-72px 0 0 -72px;border-radius:50%;border:2px solid rgba(255,211,122,.8);background:rgba(255,211,122,.3);pointer-events:none}
#knob,#knobfix{position:absolute;left:52px;top:52px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.55)}
/* I-24r: joystick tetap (Pengaturan → Joystick → Tetap): pangkal selalu terlihat di kiri-bawah (kidal: kanan-bawah) */
#joyfix{display:none;position:absolute;left:max(34px,calc(env(safe-area-inset-left) + 30px));bottom:max(34px,calc(env(safe-area-inset-bottom) + 24px));width:144px;height:144px;border-radius:50%;border:2px solid rgba(255,211,122,.7);background:rgba(255,211,122,.26);pointer-events:none}
body.joyfixed #joyfix{display:block}
/* I-25: joystick 2 lingkaran — dalam (putus-putus, biru) = JALAN, cincin luar = LARI (menguning & berlabel saat lari) */
#joy .jw,#joyfix .jw{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;box-sizing:border-box;border-radius:50%;border:2px solid rgba(140,205,255,.95);background:rgba(70,140,230,.5)}   /* I-25g: inti JALAN analog (biru solid) */
#joy .jr,#joyfix .jr{position:absolute;left:50%;top:50%;width:98px;height:98px;margin:-49px 0 0 -49px;box-sizing:border-box;border-radius:50%;border:2px dashed rgba(255,255,255,.75);background:rgba(28,38,58,.78)}   /* I-25g: zona JALAN penuh (netral gelap) — di luarnya cincin kuning = LARI */
#joy.run .jr,#joyfix.run .jr{border-style:solid;border-color:#ffd37a;background:rgba(28,38,58,.55)}
#joy::after,#joyfix::after{content:'LARI';position:absolute;left:0;right:0;top:6px;text-align:center;font:700 10px/1 system-ui,sans-serif;letter-spacing:1px;color:#ffe9a8;text-shadow:0 1px 2px #000}
#joy.run,#joyfix.run{border-color:#fff3c4;background:rgba(255,200,70,.62)}
#joy.run::after,#joyfix.run::after{color:#ffd37a}
#joy.run .jw,#joyfix.run .jw{border-color:rgba(255,211,122,.9);background:rgba(255,211,122,.35)}
#joy.run #knob,#joyfix.run #knobfix{background:rgba(255,224,150,.85)}
.tbtn{position:absolute;pointer-events:auto;touch-action:none;border:2px solid rgba(255,255,255,.6);background:rgba(0,0,0,.35);color:#fff;font:600 13px system-ui,sans-serif;border-radius:50%;padding:0;-webkit-tap-highlight-color:transparent}
.tbtn.on{background:rgba(255,255,255,.4)}
#bAtk{right:max(18px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));width:84px;height:84px}
#bJump{right:max(112px,calc(env(safe-area-inset-right) + 94px));bottom:max(46px,calc(env(safe-area-inset-bottom) + 24px));width:64px;height:64px}
#bView{right:max(18px,env(safe-area-inset-right));bottom:max(122px,calc(env(safe-area-inset-bottom) + 100px));width:52px;height:52px;font-size:10px}
body.touch{--bt:calc(max(10px,env(safe-area-inset-top)) + 62px)}   /* I-24w: di bawah baris tombol atas (Tas/Quest/Bantuan/Menu, 44 px) agar tak saling menimpa */
#bView{right:max(14px,env(safe-area-inset-right));top:var(--bt,70px);width:44px;height:44px;font-size:21px;line-height:40px}   /* I-25f: simbol 📷, 44 px, jalur kanan (pelacak quest bergeser menjauh) */
/* I-6: fade pindah peta + pesan singkat */
#fade{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;z-index:8}
#toast{position:fixed;left:50%;top:14%;transform:translateX(-50%);padding:8px 18px;border-radius:10px;background:rgba(0,0,0,.6);font-size:15px;pointer-events:none;opacity:0;transition:opacity .3s;z-index:9;text-align:center}
#toast.show{opacity:1}
/* I-7: HUD — minimap + nama peta (kiri-atas), kompas (atas-tengah), bar HP/MP/EXP + level + gold (bawah-tengah) */
#hud{position:fixed;inset:0;pointer-events:none;z-index:4;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;text-shadow:0 1px 2px #000}
#hud .mm{position:absolute;left:max(12px,env(safe-area-inset-left));top:max(12px,env(safe-area-inset-top));width:132px}
#hud .mm canvas{display:block;border-radius:50%;border:2px solid rgba(255,255,255,.65);background:rgba(0,0,0,.45);box-shadow:0 2px 8px rgba(0,0,0,.5)}
#hud .mapname{margin-top:6px;font-size:13px;font-weight:600;text-align:center;line-height:1.2}
#hud .maplv{font-size:11px;opacity:.8;text-align:center}
#hud .compass{position:absolute;left:50%;top:max(10px,env(safe-area-inset-top));transform:translateX(-50%);width:min(320px,44vw);height:24px}
#hud .compass canvas{width:100%;height:100%;display:block;-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}
#hud .deg{position:absolute;left:0;right:0;top:25px;text-align:center;font-size:11px;opacity:.8}
#hud .stats{position:absolute;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(340px,46vw)}
#hud .head{display:flex;justify-content:space-between;font-size:13px;font-weight:700;margin-bottom:3px}
#hud .bar{position:relative;height:16px;margin-top:4px;border-radius:8px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.35);overflow:hidden}
#hud .bar .fill{position:absolute;left:0;top:0;bottom:0;width:100%;transition:width .15s}
#hud .bar .bt{position:absolute;inset:0;text-align:center;font-size:11px;line-height:15px;font-weight:600}
#hud .bar b{position:absolute;left:7px;top:0;font-size:10px;line-height:15px;opacity:.85}
#hud .hp .fill{background:linear-gradient(#ff6b6b,#c0392b)}
#hud .mp .fill{background:linear-gradient(#6bb8ff,#2e6fd0)}
#hud .exp{height:9px;margin-top:5px}#hud .exp .bt,#hud .exp b{display:none}
#hud .exp .fill{background:linear-gradient(#ffe27a,#d9a21b)}
@media (max-width:640px),(max-height:480px){
  #hud .mm{width:100px}#hud .mm canvas{width:100px!important;height:100px!important}
  #hud .mapname{font-size:11px}#hud .maplv{font-size:10px}
  #hud .stats{width:min(260px,50vw);bottom:max(8px,env(safe-area-inset-bottom))}
  #hud .bar{height:13px}#hud .bar .bt{font-size:10px;line-height:12px}#hud .bar b{line-height:12px}
  #hud .compass{width:min(240px,34vw)}
}
body.touch #hud .compass{left:50%}
#info{display:none}

/* I-14b: hotbar skill */
#hotbar{position:fixed;left:50%;bottom:max(100px,calc(env(safe-area-inset-bottom) + 86px));transform:translateX(-50%);display:grid;grid-template-columns:repeat(5,auto);justify-items:center;gap:6px;z-index:6;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;text-shadow:0 1px 2px #000;touch-action:none;user-select:none}
#hotbar .slot{position:relative;width:54px;height:54px;border-radius:9px;border:2px solid rgba(255,255,255,.55);background:rgba(0,0,0,.5);overflow:hidden;color:#fff;pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
#hotbar .slot.empty{opacity:.35;pointer-events:none}
#hotbar .slot.locked{display:none}   /* I-37: slot 6–10 tersembunyi sebelum pasif Quick Slot aktif */
#hotbar .slot:nth-child(-n+5){grid-row:2}#hotbar .slot:nth-child(n+6){grid-row:1}   /* baris 1–5 di bawah, 6–10 ditumpuk di atasnya */
#hotbar .k{position:absolute;left:3px;top:1px;font-size:10px;font-style:normal;font-weight:700;opacity:.85}
#hotbar .ic{position:absolute;left:0;right:0;top:7px;text-align:center;font-size:24px;line-height:26px}
#hotbar .nm{position:absolute;left:1px;right:1px;bottom:11px;text-align:center;font-size:8px;line-height:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.85}
#hotbar .mp{position:absolute;left:0;right:0;bottom:1px;text-align:center;font-size:9px;line-height:10px;color:#8fc8ff;font-weight:700}
#hotbar .cd{position:absolute;inset:0;background:rgba(0,0,0,.62);transform-origin:50% 100%;transform:scaleY(0)}
#hotbar .slot.casting .cd{background:rgba(90,170,255,.5)}
#hotbar .ct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700}
#hotbar .slot.nomp{border-color:#5a7fb0}#hotbar .slot.nomp .ic,#hotbar .slot.nomp .nm{opacity:.45}
#hotbar .slot.bad{border-color:#a33}#hotbar .slot.bad .ic{opacity:.35}
#hotbar .slot.hit{animation:hbhit .25s}
@keyframes hbhit{from{box-shadow:0 0 0 3px #ffd37a,0 0 14px #ffd37a}to{box-shadow:none}}
body.touch #hotbar{left:auto;right:max(14px,env(safe-area-inset-right));bottom:max(118px,calc(env(safe-area-inset-bottom) + 100px));transform:none;gap:4px}
body.touch #hotbar .slot{width:42px;height:42px}body.touch #hotbar .ic{top:5px;font-size:20px;line-height:22px}body.touch #hotbar .nm{display:none}body.touch #hotbar .mp{font-size:8px}
@media (max-width:640px),(max-height:480px){
  #hotbar{bottom:max(86px,calc(env(safe-area-inset-bottom) + 72px));gap:4px}#hotbar .slot{width:44px;height:44px}#hotbar .ic{top:5px;font-size:20px;line-height:22px}#hotbar .nm{display:none}
}

/* I-16: bar HP boss (#bossbar, satu .bb per boss engaged) */
#bossbar{position:fixed;left:50%;top:max(54px,calc(env(safe-area-inset-top) + 46px));transform:translateX(-50%);width:min(560px,86vw);display:flex;flex-direction:column;gap:8px;z-index:6;pointer-events:none;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;text-shadow:0 1px 2px #000;color:#fff}
#bossbar .bn{display:flex;justify-content:space-between;align-items:baseline;font-size:15px;padding:0 2px}
#bossbar .bn i{font-style:normal;font-size:12px;opacity:.8}
#bossbar .bt{position:relative;height:16px;border-radius:4px;border:2px solid rgba(255,255,255,.6);background:rgba(0,0,0,.6);overflow:hidden}
#bossbar .bt>div{position:absolute;inset:0;transform-origin:left center}
#bossbar .bf{background:linear-gradient(#e24a4a,#a01818)}
#bossbar .bl{background:#f2d28a;opacity:.85}
#bossbar .bt u{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:rgba(255,255,255,.7)}
#bossbar small{text-align:center;font-size:11px;opacity:.9;margin-top:-4px}
#bossbar .p2 .bf{background:linear-gradient(#ff6a2a,#d40000);box-shadow:0 0 10px #ff3b1a}
#bossbar .p2 .bn b{color:#ff8a6a}
#bossbar .dead{opacity:.7}

/* I-18: petunjuk NPC + kotak dialog */
#prompt{position:fixed;left:50%;bottom:max(176px,calc(env(safe-area-inset-bottom) + 160px));transform:translateX(-50%);padding:8px 16px;border-radius:20px;background:rgba(0,0,0,.65);border:1px solid rgba(255,224,102,.8);color:#ffe9a8;font:600 14px system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;z-index:8;pointer-events:auto;cursor:pointer;white-space:nowrap}
#prompt[hidden],#dialog[hidden]{display:none}
#dialog{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(640px,calc(100% - 20px));min-height:110px;padding:12px 16px 10px;border-radius:12px;background:rgba(14,16,26,.92);border:2px solid rgba(255,224,102,.75);color:#fff;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;z-index:25;pointer-events:auto;cursor:pointer;touch-action:none}
#dialog .nm{font-weight:700;font-size:15px;color:#ffe9a8;margin-bottom:6px}
#dialog .tx{font-size:15px;line-height:1.45;min-height:44px}
#dialog .ht{margin-top:8px;text-align:right;font-size:12px;opacity:.7}
body.touch #prompt{bottom:max(210px,calc(env(safe-area-inset-bottom) + 190px))}

/* I-20v: strip status buff/debuff (kolom di bawah minimap kiri; tak menyentuh tengah layar tempat angka damage) */
#hud .status{position:absolute;left:max(12px,env(safe-area-inset-left));top:calc(max(12px,env(safe-area-inset-top)) + 188px);display:flex;flex-direction:column;gap:3px;width:132px;max-height:150px;overflow:hidden;pointer-events:none}
#hud .status[hidden]{display:none}
#hud .st{display:flex;align-items:center;gap:5px;height:22px;padding:0 6px;border-radius:6px;background:rgba(0,0,0,.5);border-left:3px solid #7be08a;font-size:11px;line-height:22px;white-space:nowrap}
#hud .st.neg{border-left-color:#ff6b6b}