/* Kerajaan Kaisar — r6-kontrol.css: kontrol jalan kaki + obrolan suara ala Roblox.
   - #kkWalkJoy (joystick, kiri) digeser dari tepi: 16px terlalu mepet
     sudut layar, jempol sulit menggeser ke kiri/bawah.
   - #kkJumpBtn (lompat, kanan bawah) — hanya tampil di Mode Jalan Kaki.
   - #kkSuaraBtn (mik) + #kkSuaraOff (x) — tampil di kota; di mode jalan
     pindah tepat di atas tombol lompat.
   Dimuat SESUDAH r5-f.css / r5-g.css (aturan joystick di sini menang). */

#kkWalkJoy,
body #kkWalkJoy{left:calc(env(safe-area-inset-left,0px) + 44px);bottom:calc(env(safe-area-inset-bottom,0px) + 56px);width:128px;height:128px}

#kkJumpBtn{position:fixed;right:calc(env(safe-area-inset-right,0px) + 44px);bottom:calc(env(safe-area-inset-bottom,0px) + 64px);width:84px;height:84px;border-radius:50%;display:none;align-items:center;justify-content:center;background:rgba(20,9,11,.45);border:2px solid rgba(212,175,55,.75);color:#f3e9d2;z-index:12;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.4)}
#kkJumpBtn svg{width:40px;height:40px}
#kkJumpBtn:active{background:rgba(212,175,55,.85);color:#241203;transform:scale(.94)}

#kkSuaraBtn{position:fixed;right:calc(env(safe-area-inset-right,0px) + 16px);bottom:calc(env(safe-area-inset-bottom,0px) + 190px);width:52px;height:52px;border-radius:50%;display:none;align-items:center;justify-content:center;background:rgba(20,9,11,.92);border:2px solid rgba(212,175,55,.8);color:#f3e9d2;z-index:30;cursor:pointer;-webkit-tap-highlight-color:transparent;padding:0;--lv:0}
#kkSuaraBtn svg{width:26px;height:26px;position:absolute}
#kkSuaraBtn[data-state="aktif"]{border-color:#2ecc71;color:#2ecc71;box-shadow:0 0 0 calc(var(--lv) * 9px) rgba(46,204,113,.45)}
#kkSuaraBtn[data-state="bisu"]{border-color:#e74c3c;color:#e74c3c}
#kkSuaraBtn[data-state="mulai"]{opacity:.6}
#kkSuaraOff{position:fixed;right:calc(env(safe-area-inset-right,0px) + 8px);bottom:calc(env(safe-area-inset-bottom,0px) + 232px);width:22px;height:22px;border-radius:50%;display:none;align-items:center;justify-content:center;background:#241203;border:1px solid #d4af37;color:#f3e9d2;font:700 14px/1 sans-serif;z-index:31;cursor:pointer;padding:0}
/* Mode jalan kaki: mik tepat di atas tombol lompat (kolom kanan ala Roblox). */
body.kk-cam-walk #kkSuaraBtn{right:calc(env(safe-area-inset-right,0px) + 60px);bottom:calc(env(safe-area-inset-bottom,0px) + 164px)}
body.kk-cam-walk #kkSuaraOff{right:calc(env(safe-area-inset-right,0px) + 52px);bottom:calc(env(safe-area-inset-bottom,0px) + 206px)}

#kkSuaraLayer{position:fixed;inset:0;pointer-events:none;z-index:11}
.kk-suara-tag{position:absolute;transform:translate(-50%,-100%);pointer-events:auto;white-space:nowrap;background:rgba(20,9,11,.82);border:1px solid #2ecc71;color:#f3e9d2;border-radius:999px;font:600 12px sans-serif;padding:3px 9px;cursor:pointer}

/* HP portrait: bar "Jalan Kaki | Keluar" ada di kanan bawah (r5-g.css),
   jadi lompat + mik naik di atasnya. */
@media (max-width:480px){
  #kkJumpBtn{right:calc(env(safe-area-inset-right,0px) + 28px);bottom:calc(env(safe-area-inset-bottom,0px) + 96px)}
  body.kk-cam-walk #kkSuaraBtn{right:calc(env(safe-area-inset-right,0px) + 44px);bottom:calc(env(safe-area-inset-bottom,0px) + 196px)}
  body.kk-cam-walk #kkSuaraOff{right:calc(env(safe-area-inset-right,0px) + 36px);bottom:calc(env(safe-area-inset-bottom,0px) + 238px)}
}
/* Jumlah pemain yang suaranya tersambung (sim-suara.js, data-n). */
#kkSuaraBtn[data-n]::after{content:attr(data-n);position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;border-radius:9px;background:#2ecc71;color:#08200f;font:700 11px/18px sans-serif;text-align:center;padding:0 4px;box-sizing:border-box}
/* Tombol mode tekan-untuk-bicara (PTT), di bawah tombol x (sim-suara.js). */
#kkSuaraPtt{position:fixed;right:calc(env(safe-area-inset-right,0px) + 8px);bottom:calc(env(safe-area-inset-bottom,0px) + 164px);height:22px;border-radius:11px;display:none;align-items:center;justify-content:center;background:#241203;border:1px solid #d4af37;color:#f3e9d2;font:700 10px/1 sans-serif;z-index:31;cursor:pointer;padding:0 7px}
#kkSuaraPtt.on{background:#2ecc71;color:#08200f;border-color:#2ecc71}
body.kk-cam-walk #kkSuaraPtt{right:calc(env(safe-area-inset-right,0px) + 52px);bottom:calc(env(safe-area-inset-bottom,0px) + 138px)}
@media (max-width:480px){ body.kk-cam-walk #kkSuaraPtt{right:calc(env(safe-area-inset-right,0px) + 36px);bottom:calc(env(safe-area-inset-bottom,0px) + 170px)} }