#mobile-controls{position:absolute;inset:0;z-index:30;pointer-events:none;--control-opacity:.58}
#look-zone{position:absolute;left:35%;right:0;top:0;bottom:0;pointer-events:auto;touch-action:none}
#joystick{pointer-events:auto;position:absolute;left:calc(var(--safe-left) + 18px);bottom:calc(var(--safe-bottom) + 18px);width:calc(126px * var(--joystick-scale));height:calc(126px * var(--joystick-scale));border:2px solid rgba(255,255,255,.24);border-radius:50%;background:rgba(0,0,0,.27);touch-action:none}
#joystick-knob{position:absolute;left:50%;top:50%;width:47px;height:47px;border:2px solid rgba(255,255,255,.82);border-radius:50%;background:rgba(255,255,255,.61);transform:translate(-50%,-50%)}
.touch-button{pointer-events:auto;position:absolute;width:calc(64px * var(--button-scale));height:calc(64px * var(--button-scale));border:1px solid rgba(255,255,255,.34);border-radius:50%;color:#fff;background:rgba(5,11,16,var(--control-opacity));font-size:11px;font-weight:800;touch-action:none}
.touch-button.active{background:rgba(16,217,154,.9);color:#04130e}
#sprint-button{left:calc(var(--safe-left) + 18px);top:calc(var(--safe-top) + 112px)}
#crouch-button{left:calc(var(--safe-left) + 108px);bottom:calc(var(--safe-bottom) + 104px)}
/* Right thumb cluster: every control has an isolated lane. */
#fire-button{right:calc(var(--safe-right) + 16px);top:calc(var(--safe-top) + 64px);width:calc(82px * var(--button-scale) * var(--fire-scale,1));height:calc(82px * var(--button-scale) * var(--fire-scale,1));border-color:rgba(255,92,92,.72)}
#ads-button{right:calc(var(--safe-right) + 112px);top:calc(var(--safe-top) + 92px)}
#reload-button{right:calc(var(--safe-right) + 108px);bottom:calc(var(--safe-bottom) + 22px)}
#jump-button{right:calc(var(--safe-right) + 18px);bottom:calc(var(--safe-bottom) + 94px)}
#mobile-controls.compact #ads-button{right:calc(var(--safe-right) + 92px)}
#mobile-controls.compact #reload-button{right:calc(var(--safe-right) + 92px)}
#mobile-controls.lefty #joystick{left:auto;right:calc(var(--safe-right) + 18px)}
#mobile-controls.lefty #sprint-button{left:auto;right:calc(var(--safe-right) + 18px)}
#mobile-controls.lefty #crouch-button{left:auto;right:calc(var(--safe-right) + 108px)}
#mobile-controls.lefty #fire-button{right:auto;left:calc(var(--safe-left) + 16px)}
#mobile-controls.lefty #ads-button{right:auto;left:calc(var(--safe-left) + 112px)}
#mobile-controls.lefty #reload-button{right:auto;left:calc(var(--safe-left) + 108px)}
#mobile-controls.lefty #jump-button{right:auto;left:calc(var(--safe-left) + 18px)}
@media(pointer:fine){#mobile-controls{display:none}}
@media(max-height:430px){
  #joystick{width:calc(108px * var(--joystick-scale));height:calc(108px * var(--joystick-scale))}
  .touch-button{width:calc(54px * var(--button-scale));height:calc(54px * var(--button-scale));font-size:9px}
  #fire-button{width:calc(68px * var(--button-scale) * var(--fire-scale,1));height:calc(68px * var(--button-scale) * var(--fire-scale,1));top:calc(var(--safe-top) + 52px)}
  #ads-button{right:calc(var(--safe-right) + 94px);top:calc(var(--safe-top) + 72px)}
  #jump-button{bottom:calc(var(--safe-bottom) + 70px)}
  #reload-button{right:calc(var(--safe-right) + 92px);bottom:calc(var(--safe-bottom) + 10px)}
}