/* hud2.css — lanjutan hud.css (dipecah agar tiap file < 20 KB; urutan muat tetap hud.css lalu hud2.css) */
#hud .st .si{font-size:14px;flex:none}#hud .st .sn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;opacity:.9}#hud .st .sd{flex:none;font-style:normal;font-weight:700;color:#ffd37a}
#hud .st.more{justify-content:center;height:16px;line-height:16px;opacity:.8;border-left-color:#888}
@media (max-width:640px),(max-height:480px){#hud .status{top:calc(max(12px,env(safe-area-inset-top)) + 150px);width:104px}#hud .st .sn{display:none}}

/* I-20y: petunjuk tombol — bilah ringkas (desktop) + layar bantuan */
#hintbar{position:fixed;left:max(12px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom));max-width:calc(50vw - 190px);display:flex;flex-wrap:wrap;gap:3px 8px;z-index:4;pointer-events:none;font:11px system-ui,sans-serif;color:#fff;text-shadow:0 1px 2px #000;opacity:.85}
#hintbar kbd,#help kbd{display:inline-block;min-width:18px;padding:0 5px;border-radius:4px;border:1px solid rgba(255,255,255,.55);background:rgba(0,0,0,.5);font:600 11px/17px system-ui,sans-serif;text-align:center;color:#ffd37a;text-shadow:none}
body.touch #hintbar,body.invopen #hintbar{display:none}
#helpbtn{position:fixed;right:max(114px,calc(env(safe-area-inset-right) + 114px));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:20px;display:none;pointer-events:auto}
body.touch #helpbtn{display:block}
/* I-20y (revisi): petunjuk = bilah, BUKAN layar penuh. Normal: hanya chip pembuka (H / ? Petunjuk). Ditekan: panel daftar lengkap muncul di atas bilah (tak membekukan pemain, tak menangkap klik), otomatis menutup lagi. */
#help{position:fixed;left:max(12px,env(safe-area-inset-left));bottom:max(36px,calc(env(safe-area-inset-bottom) + 24px));z-index:6;width:max(220px,min(340px,calc(50vw - 190px)));max-height:64vh;overflow:hidden;pointer-events:none;background:rgba(18,20,30,.88);border:1px solid rgba(255,255,255,.3);border-radius:10px;padding:8px 10px 6px;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#fff;animation:helpin .15s ease-out}
#help[hidden]{display:none}
@keyframes helpin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
body.touch #help{left:50%;transform:translateX(-50%);top:max(60px,calc(env(safe-area-inset-top) + 56px));bottom:auto;width:min(340px,calc(100vw - 24px))}
#help .ht{font-weight:700;font-size:13px;margin-bottom:4px;padding-bottom:4px;border-bottom:1px solid rgba(255,255,255,.15)}
#help .hr{display:flex;align-items:center;gap:8px;padding:2px 0;font-size:12px;line-height:1.3}
#help .hr kbd{flex:none;min-width:70px;text-align:center}#help .hr span{flex:1;min-width:0}
#help .hf{margin-top:4px;font-size:10px;opacity:.7;text-align:center}

/* I-20ab (revisi pemilik): daftar skill = PANEL SISI KANAN. Tertutup: hanya gagang tipis di tepi; buka/tutup dengan klik/ketuk gagang (desktop: K); autohide lewat js/ui/skillbar.js. Daftar digulir vertikal TANPA scrollbar. */
#skillbar{position:fixed;right:0;top:200px;z-index:6;display:flex;align-items:flex-start;width:218px;transform:translateX(188px);transition:transform .22s ease;pointer-events:none;color:#fff;text-shadow:0 1px 2px #000;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;user-select:none;-webkit-user-select:none}
#skillbar.open{transform:none}#skillbar.off{display:none}
#skillbar .sbh{pointer-events:auto;flex:none;width:30px;height:88px;padding:0;border:2px solid rgba(255,255,255,.55);border-right:0;border-radius:10px 0 0 10px;background:rgba(0,0,0,.55);color:#fff;font:700 11px system-ui,sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;opacity:.6;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#skillbar.open .sbh,#skillbar .sbh:hover,#skillbar.pick .sbh{opacity:1}
#skillbar .sbh .sbv{writing-mode:vertical-rl;letter-spacing:1px}
#skillbar .sbh .sbk{padding:0 4px;border-radius:4px;border:1px solid rgba(255,255,255,.55);font:600 10px/14px system-ui,sans-serif;color:#ffd37a;text-shadow:none}
body.touch #skillbar .sbk{display:none}
#skillbar .sbp{pointer-events:auto;visibility:hidden;transition:visibility 0s .22s;width:188px;box-sizing:border-box;height:min(240px,calc(100vh - 260px));max-height:240px;display:flex;flex-direction:column;background:rgba(14,16,26,.9);border:2px solid rgba(255,255,255,.4);border-right:0;border-radius:0 0 0 10px}
#skillbar.open .sbp{visibility:visible;transition:none}
#skillbar .sbt{flex:none;display:flex;align-items:center;gap:4px;padding:3px 6px;font-size:12px;border-bottom:1px solid rgba(255,255,255,.18)}
#skillbar .sbt b{flex:1}
#skillbar .sbs{width:26px;height:20px;padding:0;border-radius:5px;border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.4);color:#fff;font-size:10px;cursor:pointer}
body.touch #skillbar .sbs{display:none}
#skillbar .sbl{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;-ms-overflow-style:none;touch-action:pan-y;scroll-snap-type:y proximity;padding:3px 4px}
#skillbar .sbl::-webkit-scrollbar{display:none;width:0;height:0}
#skillbar .sk{display:flex;align-items:center;gap:6px;height:38px;margin-bottom:3px;padding:0 6px;border-radius:7px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);scroll-snap-align:start;cursor:pointer}
#skillbar .sk .ic{flex:none;width:24px;text-align:center;font-size:20px;line-height:24px}
#skillbar .sk .mid{flex:1;min-width:0}
#skillbar .sk b{display:block;font-size:12px;line-height:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#skillbar .sk small{display:block;font-size:10px;line-height:12px;color:#8fc8ff}
#skillbar .sk .bd{flex:none;min-width:16px;height:16px;border-radius:4px;background:#ffd37a;color:#222;font:700 11px/16px system-ui,sans-serif;font-style:normal;text-align:center;text-shadow:none}
#skillbar .sk .bd:empty{display:none}
#skillbar .sk.on{border-color:rgba(255,211,122,.55)}
#skillbar .sk.sel{border-color:#ffd37a;background:rgba(255,211,122,.22);box-shadow:0 0 8px rgba(255,211,122,.55)}
#skillbar .sbi{flex:none;padding:4px 8px;font-size:10px;line-height:13px;border-top:1px solid rgba(255,255,255,.18);opacity:.9;min-height:26px}
#skillbar .sbx{flex:none;margin:0 6px 6px;padding:4px;border-radius:6px;border:1px solid #a33;background:rgba(120,30,30,.5);color:#fff;font-size:11px;cursor:pointer}
#skillbar .sbx[hidden]{display:none}
/* hotbar saat mengatur: slot kosong bisa diketuk, slot berkedip bila ada pilihan */
#hotbar.edit .slot{outline:2px dashed rgba(255,211,122,.8);outline-offset:1px}
#hotbar.edit .slot.empty{pointer-events:auto;opacity:.65}
#hotbar.pick .slot{animation:hbpick .7s ease-in-out infinite alternate}
@keyframes hbpick{from{box-shadow:0 0 0 0 rgba(255,211,122,0)}to{box-shadow:0 0 12px 2px #ffd37a}}
/* sentuh: tak menimpa joystick/Serang/Lompat/hotbar-kanan-bawah — gagang & panel hanya di sisi kanan antara tombol atas dan hotbar */
body.touch #skillbar{top:calc(var(--bt,70px) + 112px * var(--ts,1) + 20px);width:188px;transform:translateX(158px)}
body.touch #skillbar.open{transform:none}
body.touch #skillbar .sbh{width:30px;height:64px;font-size:10px}
body.touch #skillbar .sbt{font-size:10px;padding:2px 4px}
body.touch #skillbar .sk{height:29px;gap:4px;padding:0 4px;margin-bottom:2px}
body.touch #skillbar .sk .ic{width:18px;font-size:15px;line-height:18px}
body.touch #skillbar .sk b{font-size:10px;line-height:12px}
body.touch #skillbar .sk small{font-size:9px;line-height:10px}
body.touch #skillbar .sk .inf{width:22px;height:22px;font-size:12px;line-height:18px}
body.touch #skillbar .sbi{font-size:9px;line-height:11px;padding:2px 5px}
body.touch #skillbar.tight .sbi{display:none}
body.touch #skillbar .sbp{height:min(108px,calc(100vh - 300px));max-height:108px;width:158px}
body.touch #skillbar .sbi{min-height:0}
@media (max-height:480px){#skillbar .sk{height:34px;margin-bottom:2px}#skillbar .sbt{padding:1px 6px}#skillbar .sbh{height:72px}}
/* I-20ad: lingkaran level skill (hotbar, panel skill, baris pasif) */
.lvc{flex:none;min-width:15px;height:15px;border-radius:50%;background:#2d6cdf;color:#fff;border:1px solid rgba(255,255,255,.7);font:700 9px/13px system-ui,sans-serif;font-style:normal;text-align:center;text-shadow:none;pointer-events:none}
.lvc.max{background:#e0a800;color:#222}.lvc:empty{display:none}
#hotbar .lvc{position:absolute;right:2px;top:2px}
#skillbar .pkh{margin:6px 2px 3px;font-size:10px;color:#9fb4d0;letter-spacing:.5px}
#skillbar .pk{display:flex;align-items:center;gap:6px;height:30px;margin-bottom:2px;padding:0 6px;border-radius:7px;border:1px dashed rgba(255,255,255,.18);opacity:.85}
#skillbar .pk .ic{flex:none;width:22px;text-align:center;font-size:16px;line-height:22px}#skillbar .pk .mid{flex:1;min-width:0}
#skillbar .pk b{display:block;font-size:11px;line-height:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#skillbar .pk small{display:block;font-size:9px;line-height:11px;color:#8fc8ff}

/* I-23c: cutscene Sharingan (overlay mata) + semu merah & ikon mata selama buff nj3 */
#sharingan{position:fixed;inset:0;z-index:40;pointer-events:none;display:none;opacity:0;background:radial-gradient(ellipse at center,rgba(20,0,4,.55) 0,rgba(0,0,0,.88) 75%)}
#sharingan.on{display:block}#sharingan svg{position:absolute;left:50%;top:50%;width:min(92vmin,640px);height:min(92vmin,640px);transform:translate(-50%,-50%)}
#sharingan .shf{position:absolute;inset:0;background:radial-gradient(circle,#fff 0,#ff3b4a 70%);opacity:0}
#shvig{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .6s;background:radial-gradient(ellipse at center,rgba(200,0,30,0) 55%,rgba(200,0,30,.38) 100%)}
#shvig.on{opacity:1;animation:shpulse 2.4s ease-in-out infinite alternate}@keyframes shpulse{from{filter:brightness(.8)}to{filter:brightness(1.25)}}
#sheye{position:fixed;z-index:5;left:calc(50% + min(160px,22vw) + 10px);top:max(8px,env(safe-area-inset-top));display:none;font-size:20px;line-height:24px;pointer-events:none;text-shadow:0 0 8px #e0102a,0 1px 2px #000}
#sheye.on{display:block}
/* I-23o: ikon mata Mangekyo (Kage) */
#sheye.kage{color:#ff2a12;font-size:24px;line-height:28px;text-shadow:0 0 12px #ff1a1a,0 0 26px #6a0008,0 1px 2px #000}
/* I-23o: vignette gelap-merah selama buff Kage */
#shk{position:fixed;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .9s;background:radial-gradient(ellipse at center,rgba(30,0,0,0) 38%,rgba(60,0,6,.5) 78%,rgba(10,0,2,.92) 100%)}
#shk.on{opacity:1;animation:shkpulse 3.2s ease-in-out infinite alternate}@keyframes shkpulse{from{filter:brightness(.75) saturate(1)}to{filter:brightness(1.2) saturate(1.5)}}
/* I-23j: widget quiver */
#quiver{position:fixed;left:max(12px,env(safe-area-inset-left));bottom:max(64px,calc(env(safe-area-inset-bottom) + 56px));z-index:6;display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:10px;background:rgba(0,0,0,.5);border:2px solid var(--qc,#c8a064);color:#fff;font:700 13px system-ui,sans-serif;pointer-events:auto;touch-action:none;cursor:pointer}
#quiver[hidden]{display:none}#quiver i{width:10px;height:10px;border-radius:50%;background:var(--qc,#c8a064)}#quiver small{font-weight:500;opacity:.85}
#quiver.empty{border-color:#f55;animation:qblink .8s infinite}@keyframes qblink{50%{background:rgba(170,0,0,.65)}}
body.invopen #quiver{z-index:1}body.lefty #quiver{left:auto;right:max(12px,env(safe-area-inset-right))}

/* I-25f: tombol ⓘ per baris skill + kartu info (#skinfo, di kiri panel) */
#skillbar .sk .inf{flex:none;width:28px;height:28px;padding:0;border-radius:50%;border:2px solid #8fc8ff;background:rgba(0,0,0,.45);color:#cfe6ff;font:italic 700 15px/24px Georgia,serif;text-align:center;cursor:pointer;pointer-events:auto;-webkit-appearance:none;appearance:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#skillbar .sk.sinf{border-color:#8fc8ff}#skillbar .sk.sinf .inf{background:#8fc8ff;color:#112}
#skinfo{position:fixed;right:196px;top:200px;z-index:8;width:200px;max-height:300px;max-width:calc(100vw - 214px);overflow-y:auto;padding:6px 8px;box-sizing:border-box;background:rgba(14,16,26,.94);border:2px solid #8fc8ff;border-radius:10px;color:#fff;font:11px/15px system-ui,sans-serif;text-shadow:none;pointer-events:auto;touch-action:pan-y}
#skinfo[hidden]{display:none}#skinfo{-webkit-overflow-scrolling:touch}
#skinfo .sih{display:flex;align-items:center;gap:6px;margin-bottom:4px;padding-bottom:3px;border-bottom:1px solid rgba(255,255,255,.2)}
#skinfo .sih b{flex:1;font-size:13px;min-width:0}#skinfo .sih i{font-style:normal;color:#ffd37a;font-weight:700}
#skinfo .six{width:22px;height:22px;padding:0;border-radius:5px;border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.4);color:#fff;cursor:pointer}
#skinfo .sir{display:flex;justify-content:space-between;gap:8px;padding:1px 0}#skinfo .sir span{color:#9fb4d0;flex:none}#skinfo .sir em{font-style:normal;text-align:right}
body.touch #skinfo{top:calc(var(--bt,70px) + 112px * var(--ts,1) + 20px)}
/* I-30e: skill dari card (🃏) */
#skillbar .sk.card{border-color:rgba(255,216,107,.55);background:rgba(255,216,107,.08)}