/* HERO ROYALE V8.2.1 — COMBAT CONTROL LAYOUT HOTFIX
   Corrective-only patch: no gameplay/ability behavior changes.
   Purpose: separate DOM utility actions from the canvas tactical button,
   preserve thumb reach, and keep the cluster readable on iPhone landscape. */

:root{
  --hr821-safe-r:max(10px,env(safe-area-inset-right));
  --hr821-safe-b:max(8px,env(safe-area-inset-bottom));
}

/* Cohesive utility treatment. The tactical, jump, slide and fire buttons
   remain canvas-owned; these DOM controls orbit them instead of sitting on top. */
#hrSwapTap,#hrHealTap,#grenadeRealV6,#ult041{
  position:fixed!important;
  left:auto!important;
  top:auto!important;
  margin:0!important;
  padding:0!important;
  border-radius:50%!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
  box-shadow:0 8px 22px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.09)!important;
  letter-spacing:.055em!important;
  transform:none!important;
}

/* SWAP sits above/right of the tactical instead of covering it. */
#hrSwapTap{
  width:44px!important;
  height:44px!important;
  right:calc(var(--hr821-safe-r) + 174px)!important;
  bottom:calc(var(--hr821-safe-b) + 118px)!important;
  font:950 7px system-ui!important;
  background:radial-gradient(circle at 34% 24%,rgba(53,78,91,.97),rgba(5,16,24,.96) 72%)!important;
  border-color:rgba(159,219,239,.38)!important;
}

/* CELL gets its own lower-left pocket with clear separation from DOC/TACT. */
#hrHealTap{
  width:44px!important;
  height:44px!important;
  right:calc(var(--hr821-safe-r) + 230px)!important;
  bottom:calc(var(--hr821-safe-b) + 0px)!important;
  font:950 7px system-ui!important;
  background:radial-gradient(circle at 34% 24%,rgba(25,74,101,.98),rgba(5,16,24,.96) 72%)!important;
  border-color:rgba(99,216,239,.42)!important;
}

/* Grenade moves left of the tactical lane. */
#grenadeRealV6{
  width:50px!important;
  height:50px!important;
  right:calc(var(--hr821-safe-r) + 302px)!important;
  bottom:calc(var(--hr821-safe-b) + 42px)!important;
  font:950 7px system-ui!important;
  border-color:rgba(255,171,127,.42)!important;
}

/* Ultimate occupies the upper-left corner of the ability cluster.
   Do not override its dynamic conic-gradient readiness ring. */
#ult041{
  display:block!important;
  width:50px!important;
  height:50px!important;
  right:calc(var(--hr821-safe-r) + 244px)!important;
  bottom:calc(var(--hr821-safe-b) + 114px)!important;
  font:950 7px system-ui!important;
  border-width:1.5px!important;
}
#ult041 small{font-size:6px!important;line-height:1!important;opacity:.78!important;margin-top:2px!important}

#hrSwapTap:active,#hrHealTap:active,#grenadeRealV6:active,#ult041:active{
  transform:scale(.94)!important;
}

/* Grenade aim/throw mode still needs a clean temporary lane. */
#grenadeAimBtnV70{
  right:calc(var(--hr821-safe-r) + 92px)!important;
  bottom:calc(var(--hr821-safe-b) + 110px)!important;
}
#grenadeThrowBtnV70{
  right:calc(var(--hr821-safe-r) + 18px)!important;
  bottom:calc(var(--hr821-safe-b) + 6px)!important;
}

/* Compact phones / browser chrome reducing usable game height. */
@media(max-height:470px){
  #hrSwapTap{width:42px!important;height:42px!important;right:calc(var(--hr821-safe-r) + 172px)!important;bottom:calc(var(--hr821-safe-b) + 112px)!important}
  #hrHealTap{width:42px!important;height:42px!important;right:calc(var(--hr821-safe-r) + 228px)!important;bottom:calc(var(--hr821-safe-b) + 1px)!important}
  #grenadeRealV6{width:48px!important;height:48px!important;right:calc(var(--hr821-safe-r) + 298px)!important;bottom:calc(var(--hr821-safe-b) + 40px)!important}
  #ult041{width:48px!important;height:48px!important;right:calc(var(--hr821-safe-r) + 242px)!important;bottom:calc(var(--hr821-safe-b) + 108px)!important}
}