@media (pointer:coarse),(max-width:780px){
  canvas{touch-action:none}

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

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

  .joystick i{
    width:46px;
    height:46px;
    left:36px;
    top:36px;
    background:rgba(95,244,255,.2);
    border-color:rgba(95,244,255,.68)
  }
}

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