@media (pointer:coarse),(max-width:780px){
  .joystick{
    display:none;
    width:92px;
    height:92px;
    margin:0;
    transform:translate(-50%,-50%);
    pointer-events:none;
    border:1px solid rgba(95,244,255,.26);
    background:rgba(5,12,24,.28);
    box-shadow:0 0 24px rgba(95,244,255,.08);
    backdrop-filter:blur(5px)
  }

  .joystick.joystick--active{display:block}

  .joystick i{
    width:42px;
    height:42px;
    left:25px;
    top:25px;
    background:rgba(95,244,255,.18);
    border-color:rgba(95,244,255,.6)
  }
}

@media (pointer:coarse) and (orientation:landscape) and (max-height:520px){
  .joystick{width:82px;height:82px}
  .joystick i{width:36px;height:36px;left:23px;top:23px}
}