.controls{
  grid-template-columns:auto minmax(0,1fr) auto;
}
.block-info{bottom:102px}
.toast{bottom:160px}
.view-joystick-wrap{
  width:62px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  user-select:none;
  -webkit-user-select:none;
}
.view-joystick-wrap>.label{
  font-size:8px;
  letter-spacing:.1em;
}
.view-joystick{
  position:relative;
  width:54px;
  height:54px;
  border-radius:50%;
  border:1px solid rgba(98,221,255,.28);
  background:radial-gradient(circle,rgba(98,221,255,.09) 0 42%,rgba(92,140,255,.08) 43% 70%,rgba(4,12,23,.55) 71%);
  box-shadow:inset 0 0 16px rgba(98,221,255,.08),0 4px 14px rgba(0,0,0,.22);
  touch-action:none;
  cursor:grab;
}
.view-joystick:active{cursor:grabbing}
.view-joystick-cross::before,.view-joystick-cross::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  background:rgba(142,211,255,.12);
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.view-joystick-cross::before{width:34px;height:1px}
.view-joystick-cross::after{width:1px;height:34px}
.view-joystick-knob{
  position:absolute;
  left:50%;
  top:50%;
  width:24px;
  height:24px;
  margin:-12px 0 0 -12px;
  border-radius:50%;
  border:1px solid rgba(184,239,255,.7);
  background:radial-gradient(circle at 35% 30%,#bff5ff,#62ddff 42%,#327ca8 100%);
  box-shadow:0 2px 10px rgba(98,221,255,.36),inset 0 1px 2px rgba(255,255,255,.7);
  will-change:transform;
  pointer-events:none;
}
@media (max-width:430px){
  .controls{left:7px;right:7px;padding:7px;gap:5px}
  .block-info{bottom:96px}
  .toast{bottom:151px}
  .view-joystick-wrap{width:57px}
  .view-joystick{width:50px;height:50px}
  .selection{max-width:94px;padding:0 4px}
  .selection strong{font-size:11.5px}
  .axis-controls{gap:4px}
  .axis{min-width:46px;height:44px;padding:0 7px}
}
@media (max-width:365px){
  .selection{display:none}
  .controls{grid-template-columns:auto 1fr}
  .axis-controls{justify-self:end}
}
@media (max-height:620px){
  .block-info{bottom:88px}
  .toast{bottom:142px}
}