/* Joystick */

.joystick {
  width: 200px;
  height: 200px;
  background-color: var(--bs-tertiary-bg);
  border-radius: 50%;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  user-select: none;
  touch-action: none;
}

.joystick-knob {
  width: 80px;
  height: 80px;
  background-color: var(--bs-primary);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.05s ease, box-shadow 0.1s ease, scale 0.1s ease;
}

.joystick-knob.active {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  scale: 0.975;
}

.joystick.disabled {
  cursor: initial;
  touch-action: initial;
}

.joystick.disabled > .joystick-knob {
  background-color: var(--bs-secondary);
}

/* Keyboard Buttons */

.keyboard-btn {
  width: 60px;
  height: 60px;
  font-size: 1.5rem;
  user-select: none;
  transition: box-shadow 0.1s ease, scale 0.1s ease;
}

.keyboard-btn:active,
.keyboard-btn.active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
  scale: 0.95;
}