/* menu.css — I-17b: panel inventori (#inv) + tombol 🎒 (sentuh); I-18b: panel toko (#shop) memakai aturan yang sama. Gaya selaras hud.css. */
#inv,#shop,#quest,#job,#tele,#merc,#slotup{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#fff;padding:env(safe-area-inset-top) 8px env(safe-area-inset-bottom)}
#inv[hidden],#shop[hidden],#quest[hidden],#job[hidden],#tele[hidden],#merc[hidden],#slotup[hidden]{display:none}
#inv .box,#shop .box,#quest .box,#job .box,#tele .box,#merc .box,#slotup .box{position:relative;width:min(560px,100%);max-height:84vh;display:flex;flex-direction:column;background:rgba(18,20,30,.95);border:1px solid rgba(255,255,255,.3);border-radius:12px;padding:12px 12px 8px}
#inv .head,#shop .head,#quest .head,#job .head,#tele .head,#merc .head,#slotup .head{font-size:13px;line-height:1.5;padding-right:30px;opacity:.95;border-bottom:1px solid rgba(255,255,255,.15);padding-bottom:6px;margin-bottom:6px}
#inv .head div:first-child,#shop .head div:first-child,#quest .head div:first-child,#job .head div:first-child,#tele .head div:first-child,#merc .head div:first-child,#slotup .head div:first-child{font-weight:700;font-size:15px}
#inv .x,#shop .x,#quest .x,#job .x,#tele .x,#merc .x,#slotup .x{position:absolute;right:8px;top:8px;width:30px;height:30px;border-radius:8px;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.08);color:#fff;font-size:15px;cursor:pointer}
#inv .tabs,#shop .tabs,#quest .tabs,#job .tabs,#tele .tabs,#merc .tabs,#slotup .tabs{display:flex;gap:6px;margin-bottom:6px}
#inv .tabs button,#shop .tabs button,#quest .tabs button,#job .tabs button,#tele .tabs button,#merc .tabs button,#slotup .tabs button{flex:1;padding:7px 0;border-radius:8px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.06);color:#fff;font-size:13px;cursor:pointer}
#inv .tabs button.on,#shop .tabs button.on,#quest .tabs button.on,#job .tabs button.on,#tele .tabs button.on,#merc .tabs button.on,#slotup .tabs button.on{background:#3b6fd4;border-color:#8fb2ff;font-weight:700}
#inv .list,#shop .list,#quest .list,#job .list,#tele .list,#merc .list,#slotup .list{overflow-y:auto;overscroll-behavior:contain;min-height:120px}
#inv .empty,#shop .empty,#quest .empty,#job .empty,#tele .empty,#merc .empty,#slotup .empty{padding:24px;text-align:center;opacity:.6;font-size:13px}
#inv .row,#shop .row,#quest .row,#job .row,#tele .row,#merc .row,#slotup .row{display:flex;align-items:center;gap:8px;padding:7px 8px;margin-bottom:5px;border-radius:8px;background:rgba(255,255,255,.06);border-left:3px solid transparent}
#inv .row.eq,#shop .row.eq,#quest .row.eq,#job .row.eq,#tele .row.eq,#merc .row.eq,#slotup .row.eq{background:rgba(70,130,255,.2);border-left-color:#8fb2ff}
#inv .row.no,#shop .row.no,#quest .row.no,#job .row.no,#tele .row.no,#merc .row.no,#slotup .row.no{opacity:.55}
#inv .ic,#shop .ic,#quest .ic,#job .ic,#tele .ic,#merc .ic,#slotup .ic{font-size:22px;width:28px;text-align:center}
#inv .mid,#shop .mid,#quest .mid,#job .mid,#tele .mid,#merc .mid,#slotup .mid{flex:1;min-width:0;font-size:12px}
#inv .mid b,#shop .mid b,#quest .mid b,#job .mid b,#tele .mid b,#merc .mid b,#slotup .mid b{font-size:13px}
#inv .sub,#shop .sub,#quest .sub,#job .sub,#tele .sub,#merc .sub,#slotup .sub{opacity:.85}
#inv .perk,#shop .perk,#quest .perk,#job .perk,#tele .perk,#merc .perk,#slotup .perk{color:#ffd86b}
#inv .only,#shop .only,#quest .only,#job .only,#tele .only,#merc .only,#slotup .only{color:#ff9d9d;font-size:11px}
#inv .dlt-up,#shop .dlt-up,#quest .dlt-up,#job .dlt-up,#tele .dlt-up,#merc .dlt-up,#slotup .dlt-up{color:#7be08a;font-style:normal;font-weight:700}
#inv .dlt-dn,#shop .dlt-dn,#quest .dlt-dn,#job .dlt-dn,#tele .dlt-dn,#merc .dlt-dn,#slotup .dlt-dn{color:#ff8a8a;font-style:normal;font-weight:700}
#inv .row button,#shop .row button,#quest .row button,#job .row button,#tele .row button,#merc .row button,#slotup .row button{padding:8px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.4);background:#2f8f4e;color:#fff;font-size:13px;cursor:pointer}
#inv .row button:disabled,#shop .row button:disabled,#quest .row button:disabled,#job .row button:disabled,#tele .row button:disabled,#merc .row button:disabled,#slotup .row button:disabled{background:#444;opacity:.6;cursor:not-allowed}
#invbtn{position:fixed;right:max(10px,env(safe-area-inset-right));top:max(10px,env(safe-area-inset-top));z-index:7;width:44px;height:44px;border-radius:10px;border:2px solid rgba(255,255,255,.55);background:rgba(0,0,0,.5);color:#fff;font-size:22px;display:none;pointer-events:auto}
body.touch #invbtn{display:block}
body.invopen #invbtn,body.invopen #hotbar{z-index:1}
#shop .btns,#quest .btns,#job .btns,#tele .btns,#merc .btns,#slotup .btns{display:flex;flex-direction:column;gap:4px}
#shop .row .btns button,#quest .row .btns button,#job .row .btns button,#tele .row .btns button,#merc .row .btns button,#slotup .row .btns button{white-space:nowrap;font-size:12px;padding:7px 10px}
#shop .row .btns button+button,#quest .row .btns button+button,#job .row .btns button+button,#tele .row .btns button+button,#merc .row .btns button+button,#slotup .row .btns button+button{background:#3b6fd4}
#shop .row .btns button:disabled,#quest .row .btns button:disabled,#job .row .btns button:disabled,#tele .row .btns button:disabled,#merc .row .btns button:disabled,#slotup .row .btns button:disabled{background:#444}
#shopprompt,#questprompt,#chestprompt{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}
#shopprompt[hidden],#questprompt[hidden],#chestprompt[hidden]{display:none}
body.touch #shopprompt,body.touch #questprompt,body.touch #chestprompt{bottom:max(210px,calc(env(safe-area-inset-bottom) + 190px))}

/* I-19b: pelacak quest */
#tracker{position:fixed;right:max(42px,calc(env(safe-area-inset-right) + 42px));top:max(64px,calc(env(safe-area-inset-top) + 56px));z-index:4;width:min(210px,40vw);pointer-events:none;font:12px system-ui,sans-serif;color:#fff;text-shadow:0 1px 2px #000}
#tracker[hidden]{display:none}
#tracker .tq{display:flex;justify-content:space-between;gap:8px;padding:3px 8px;margin-bottom:3px;border-radius:6px;background:rgba(0,0,0,.45);border-right:3px solid #8fb2ff}
#tracker .tq.rdy{border-right-color:#7be08a}#tracker .tq.rdy i{color:#7be08a}
#tracker b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#tracker i{font-style:normal;white-space:nowrap;opacity:.9}
#quest .btns,#job .btns,#tele .btns,#merc .btns,#slotup .btns{display:flex;flex-direction:column;gap:4px}

#questbtn{position:fixed;right:max(62px,calc(env(safe-area-inset-right) + 62px));top:max(10px,env(safe-area-inset-top));z-index:7;width:44px;height:44px;border-radius:10px;border:2px solid rgba(255,255,255,.55);background:rgba(0,0,0,.5);color:#fff;font-size:22px;display:none;pointer-events:auto}
body.touch #questbtn{display:block}
body.invopen #questbtn{z-index:1}

/* I-20c: panel ganti job (#job) — aturan dasar dipakai bersama #quest (di atas) */
#job .conf,/* I-20c: panel ganti job (#tele) — aturan dasar dipakai bersama #quest (di atas) */
#tele .conf,#merc .conf,#slotup .conf{margin:8px 4px;padding:8px 10px;border-radius:8px;background:rgba(255,210,90,.12);border:1px solid rgba(255,210,90,.4);font-size:12px;line-height:1.5}
#job .row button.cancel,#tele .row button.cancel,#merc .row button.cancel,#slotup .row button.cancel{background:#6a3b3b}
#job .row .btns button,#tele .row .btns button,#merc .row .btns button,#slotup .row .btns button{white-space:nowrap;font-size:12px;padding:7px 12px}

/* I-20e: ikon SVG gear (InvUI + ShopUI) */
#inv .ic.gi,#shop .ic.gi{width:40px;height:40px;flex:none;font-size:0;display:block}
#inv .ic.gi svg,#shop .ic.gi svg{display:block;width:100%;height:100%}

/* I-20f: centang "Tampilkan semua" (InvUI + ShopUI) */
#inv .flt,#shop .flt{display:flex;align-items:center;gap:6px;margin:0 2px 6px;font-size:12px;opacity:.9;cursor:pointer;user-select:none}
#inv .flt[hidden],#shop .flt[hidden]{display:none}
#inv .flt input,#shop .flt input{width:16px;height:16px;margin:0}

/* I-20t: pratinjau 3D gear (GearPreview) di InvUI/ShopUI — kotak di kanan-atas panel, kanvas dipindah bersama */
#inv .pv,#shop .pv{position:absolute;right:44px;top:8px;width:112px;height:112px;border-radius:10px;border:1px solid rgba(255,255,255,.25);background:radial-gradient(circle at 50% 40%,rgba(90,120,200,.35),rgba(10,12,20,.85));overflow:hidden;pointer-events:none}
#inv .pv[hidden],#shop .pv[hidden]{display:none}
#inv .pv canvas,#shop .pv canvas{width:100%;height:100%;display:block}
#inv .box.haspv .head,#shop .box.haspv .head{padding-right:168px;min-height:106px}
#inv .row.pvf,#shop .row.pvf{outline:1px solid rgba(143,178,255,.7)}
body.touch #inv .pv,body.touch #shop .pv{width:84px;height:84px;right:40px}
body.touch #inv .box.haspv .head,body.touch #shop .box.haspv .head{padding-right:140px;min-height:80px}

/* I-21: menu jeda + pengaturan (#menu) */
#menu{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#fff;padding:10px}
#menu[hidden]{display:none}
#menu .box{position:relative;width:min(440px,100%);max-height:90vh;overflow-y:auto;background:rgba(18,20,30,.96);border:1px solid rgba(255,255,255,.35);border-radius:12px;padding:12px 14px}
#menu .head{padding-right:30px;border-bottom:1px solid rgba(255,255,255,.15);padding-bottom:6px;margin-bottom:8px}
#menu .head div:first-child{font-weight:700;font-size:16px}#menu .head div:last-child{font-size:12px;opacity:.7}
#menu .x{position:absolute;right:8px;top:8px;width:30px;height:30px;border-radius:8px;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.08);color:#fff;font-size:15px;cursor:pointer}
#menu .mrow{margin-bottom:12px;font-size:13px}#menu .mrow label{display:block;margin-bottom:4px}#menu .mrow b{color:#ffd86b;margin-left:4px}
#menu input[type=range]{width:100%;height:26px}
#menu .seg{display:flex;gap:6px}#menu .seg button,#menu .macts button{flex:1;padding:9px 4px;border-radius:8px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.06);color:#fff;font-size:13px;cursor:pointer}
#menu .seg button.on{background:#3b6fd4;border-color:#8fb2ff;font-weight:700}
#menu .macts{display:flex;flex-direction:column;gap:6px;margin-top:4px}#menu .macts button.go{background:#2f8f4e;border-color:#7be08a;font-weight:700;padding:11px}
#menubtn{position:fixed;right:max(166px,calc(env(safe-area-inset-right) + 166px));top:max(10px,env(safe-area-inset-top));z-index:7;width:44px;height:44px;border-radius:10px;border:2px solid rgba(255,255,255,.55);background:rgba(0,0,0,.5);color:#fff;font-size:22px;pointer-events:auto;cursor:pointer}
body.menuopen #menubtn{z-index:1}

#menu .macts button.danger{border-color:#e06666;color:#ffb0b0}
#menu .mslots{display:flex;flex-direction:column;gap:5px}#menu .mslot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px;border-radius:8px;border:1px solid rgba(255,255,255,.2);font-size:13px}#menu .mslot.on{border-color:#7be08a}#menu .mslot button{padding:6px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.06);color:#fff}#menu .mslot button:disabled{opacity:.5}
body.touch .tbtn{transform:scale(var(--ts,1));transform-origin:100% 100%}body.touch #bView{transform-origin:100% 0}
body.lefty #tl{left:auto;right:0}body.lefty #tr{right:auto;left:0}
body.lefty #bAtk{right:auto;left:max(18px,env(safe-area-inset-left))}body.lefty #bJump{right:auto;left:max(112px,calc(env(safe-area-inset-left) + 94px))}body.lefty #bView{right:auto;left:max(14px,env(safe-area-inset-left))}
body.lefty .tbtn{transform-origin:0 100%}body.lefty #bView{transform-origin:0 0}
body.lefty.touch #hotbar{right:auto;left:max(14px,env(safe-area-inset-left))}

/* ⚙ desktop: di atas gagang SKILL (gagang top:200px, tinggi 88px) */
body:not(.touch) #menubtn{right:0;top:128px;width:36px;height:44px;border-right:0;border-radius:10px 0 0 10px;font-size:20px}
/* I-23r: tombol peta sentuh (di sebelah minimap) */
#mapbtn{position:fixed;left:max(152px,calc(env(safe-area-inset-left) + 152px));top:max(12px,env(safe-area-inset-top));z-index:7;width:40px;height:40px;border-radius:10px;border:2px solid rgba(255,255,255,.55);background:rgba(0,0,0,.5);color:#fff;font-size:20px;display:none;pointer-events:auto}
body.touch #mapbtn{display:block}body.invopen #mapbtn{z-index:1}
@media (max-width:640px),(max-height:480px){#mapbtn{left:max(120px,calc(env(safe-area-inset-left) + 120px));width:36px;height:36px}}
/* I-23t: World Map (#worldmap) */
#worldmap{position:fixed;inset:0;z-index:31;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.65);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#fff;padding:12px;box-sizing:border-box}
#worldmap[hidden]{display:none}
#worldmap .box{position:relative;display:flex;flex-direction:column;gap:6px;max-width:100%;background:rgba(18,20,30,.96);border:1px solid rgba(255,255,255,.35);border-radius:12px;padding:10px;box-sizing:border-box}
#worldmap .head{font-size:12px;line-height:1.4;padding-right:34px;opacity:.95}#worldmap .head div:first-child{font-weight:700;font-size:15px}
#worldmap canvas{display:block;border-radius:8px;border:2px solid rgba(255,255,255,.45);background:#0c1118;touch-action:manipulation}
#worldmap .info{min-height:54px;font-size:12px;line-height:1.5;padding:6px 8px;border-radius:8px;background:rgba(255,255,255,.07)}#worldmap .info b{font-size:14px}#worldmap .hint{opacity:.7}
#worldmap .foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11px;opacity:.95}
#worldmap .bk{padding:8px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.4);background:#3b6fd4;color:#fff;font-size:13px;cursor:pointer}
#worldmap .x{position:absolute;right:8px;top:8px;width:30px;height:30px;border-radius:8px;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.08);color:#fff;font-size:15px;cursor:pointer}
body.lefty #joyfix{left:auto;right:max(34px,calc(env(safe-area-inset-right) + 30px))}
/* duduk (Insert / tombol sentuh) */
#bSit{right:max(14px,env(safe-area-inset-right));top:calc(var(--bt,70px) + 44px * var(--ts,1) + 8px);width:44px;height:44px;font-size:21px;line-height:40px}body.touch #bSit{transform-origin:100% 0}body.lefty #bSit{right:auto;left:max(14px,env(safe-area-inset-left));transform-origin:0 0}
/* I-25f: jalur tombol Kamera/Duduk (kanan, lebar 44 px × skala) — pelacak quest (sentuh) selalu di KIRI jalur itu, jadi tak mungkin saling menimpa; kidal: tombol pindah kiri, pelacak kembali ke kanan */
body.touch #tracker{right:calc(max(14px,env(safe-area-inset-right)) + 44px * var(--ts,1) + 12px)}
body.lefty.touch #tracker{right:max(42px,calc(env(safe-area-inset-right) + 42px))}

/* I-26e: HUD kecil tentara bayaran (atas-tengah, di bawah kompas) */
#mchud{position:fixed;left:50%;transform:translateX(-50%);top:max(40px,calc(env(safe-area-inset-top) + 34px));z-index:4;width:150px;pointer-events:none;font:700 11px system-ui,sans-serif;color:#ffe9a8;text-shadow:0 1px 2px #000;text-align:center}
#mchud[hidden]{display:none}
#mchud .bar{height:5px;margin-top:2px;border-radius:3px;background:rgba(0,0,0,.6);overflow:hidden}
#mchud .bar i{display:block;height:100%;width:100%;background:#3fbf5f}
#mchud.down .bar i{background:#b34a4a}

/* I-30e: tab Card */
#inv .cinfo{padding:6px 8px;margin-bottom:6px;border-radius:8px;background:rgba(255,216,107,.08);font-size:12px}
#inv .csk{color:#9fe6ff;font-size:11px}
#inv .csec{margin:8px 2px 4px;font-size:12px;font-weight:700;opacity:.8}
#inv .crow{cursor:pointer}
#inv .cslot{display:flex;align-items:center;gap:6px;margin-top:3px;font-size:11px}
#inv .cslot .dia{color:#ffd86b}
#inv .cslot .cn{font-weight:700}
#inv .cslot .cn.dim{opacity:.5;font-weight:400}
#inv .cslot .cfx{flex:1;opacity:.85;min-width:0}
#inv .cslot button{margin-left:auto;padding:3px 8px;border-radius:6px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:inherit;font-size:11px}
#inv .cslot button:disabled{opacity:.35}
/* I-31: tombol ⓘ di baris skill toko sihir + kartu info #shinfo (gaya sama dgn #skinfo di hud2.css) */
#shop .row button.inf{flex:none;width:30px;height:30px;padding:0;border-radius:50%;border:2px solid #8fc8ff;background:rgba(0,0,0,.45);color:#cfe6ff;font:italic 700 15px/26px Georgia,serif;text-align:center;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#shop .row.sinf{outline:1px solid #8fc8ff}#shop .row.sinf button.inf{background:#8fc8ff;color:#112}
#shinfo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;width:min(300px,calc(100vw - 24px));max-height:72vh;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:8px 10px;box-sizing:border-box;background:rgba(14,16,26,.97);border:2px solid #8fc8ff;border-radius:10px;color:#fff;font:12px/17px system-ui,sans-serif;box-shadow:0 6px 24px rgba(0,0,0,.6)}
#shinfo[hidden]{display:none}
#shinfo .sih{display:flex;align-items:center;gap:6px;margin-bottom:5px;padding-bottom:4px;border-bottom:1px solid rgba(255,255,255,.2)}
#shinfo .sih b{flex:1;font-size:14px;min-width:0}
#shinfo .six{width:26px;height:26px;padding:0;border-radius:6px;border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.4);color:#fff;cursor:pointer}
#shinfo .sir{display:flex;justify-content:space-between;gap:10px;padding:1px 0}#shinfo .sir span{color:#9fb4d0;flex:none}#shinfo .sir em{font-style:normal;text-align:right}

/* I-36: Slot Smith */
#slotup .sub b{color:#ffd86b}#slotup .chn{color:#ff9d9d}#slotup .stone{display:flex;align-items:center;gap:8px;padding:7px 8px;margin-bottom:6px;border-radius:8px;background:rgba(111,208,255,.12);border:1px solid rgba(111,208,255,.35);font-size:12px}#slotup .stone .mid{flex:1}