/* Load after mobile.css. The 44px thumb travels at most 44px in a 132px pad. */
#move-pad.joystick{
  --stick-x:0px;--stick-y:0px;position:relative;width:132px;height:132px;
  min-width:132px;min-height:132px;transform:none;isolation:isolate;
  border-radius:50%;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
}
#move-pad.joystick .pad-ring{
  position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:50%;
  border:1px solid rgb(246 243 235 / 35%);background:rgb(25 52 43 / 57%);
  box-shadow:inset 0 0 25px rgb(17 42 32 / 18%),0 3px 18px rgb(13 32 25 / 12%);backdrop-filter:blur(10px);
}
#move-pad.joystick.is-active .pad-ring{border-color:rgb(213 188 137 / 70%);background:rgb(25 52 43 / 70%)}
#move-pad.joystick button[data-move]{
  position:absolute;z-index:1;display:grid;place-items:center;width:44px;height:44px;
  min-width:44px;min-height:44px;margin:0;padding:0;border:0;border-radius:50%;
  color:rgb(246 243 235 / 72%);background:transparent;font:18px/1 Arial,sans-serif;touch-action:none;
}
#move-pad.joystick button[data-move]>*,#move-pad.joystick .joystick-thumb{pointer-events:none}
#move-pad.joystick [data-move=forward]{top:0;left:44px}
#move-pad.joystick [data-move=back]{bottom:0;left:44px}
#move-pad.joystick [data-move=left]{top:44px;left:0}
#move-pad.joystick [data-move=right]{top:44px;right:0}
#move-pad.joystick button.is-stick-direction{color:#f0dfb7;background:rgb(197 166 109 / 16%)}
#move-pad.joystick button[data-move]:focus-visible{outline:2px solid #e4c992;outline-offset:-4px;background:rgb(246 243 235 / 12%)}
#move-pad.joystick:focus-visible{outline:2px solid #e4c992;outline-offset:4px}
#move-pad.joystick .joystick-thumb{
  position:absolute;z-index:2;top:44px;left:44px;width:44px;height:44px;
  border:1px solid rgb(246 243 235 / 80%);border-radius:50%;background:#e9e3d3;
  box-shadow:0 3px 10px rgb(10 27 20 / 30%),inset 0 0 0 4px rgb(255 255 255 / 20%);
  transform:translate3d(var(--stick-x),var(--stick-y),0);
  transition:transform .14s cubic-bezier(.2,.8,.25,1),background .18s;
}
#move-pad.joystick .joystick-thumb::before{
  content:"";position:absolute;inset:10px;border:1px solid rgb(165 137 85 / 42%);border-radius:50%;
}
#move-pad.joystick .joystick-thumb::after{
  content:"";position:absolute;top:19px;left:19px;width:4px;height:4px;border-radius:50%;background:#a58955;
}
#move-pad.joystick.is-active .joystick-thumb{transition:none;background:#f6f3eb}
@media(prefers-reduced-motion:reduce){#move-pad.joystick .joystick-thumb{transition:none}}
@media(forced-colors:active){
  #move-pad.joystick .pad-ring{border-color:CanvasText;background:Canvas}
  #move-pad.joystick button[data-move]{color:CanvasText}
  #move-pad.joystick button.is-stick-direction{color:HighlightText;background:Highlight}
  #move-pad.joystick .joystick-thumb{border-color:ButtonText;background:ButtonFace;box-shadow:none}
  #move-pad.joystick .joystick-thumb::before{border-color:ButtonText}
  #move-pad.joystick .joystick-thumb::after{background:ButtonText}
}