.touch {
  --touch-scale: 1;
  --touch-opacity: 0.6;
  position: fixed;
  inset: 0;
  display: none;
  pointer-events: none;
}

.touch.visible {
  display: block;
}

.touch-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: auto;
  touch-action: none;
}

.touch-move {
  left: 0;
  width: 45%;
}

.touch-look {
  right: 0;
  width: 55%;
}

.touch.left-handed .touch-move {
  left: auto;
  right: 0;
}

.touch.left-handed .touch-look {
  right: auto;
  left: 0;
}

.joystick {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(128px * var(--touch-scale));
  height: calc(128px * var(--touch-scale));
  margin: calc(-64px * var(--touch-scale)) 0 0 calc(-64px * var(--touch-scale));
  border: 3px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  opacity: var(--touch-opacity);
  pointer-events: none;
}

.joystick[hidden] {
  display: none;
}

.joystick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(56px * var(--touch-scale));
  height: calc(56px * var(--touch-scale));
  margin: calc(-28px * var(--touch-scale)) 0 0 calc(-28px * var(--touch-scale));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.25);
}

.touch-btn {
  appearance: none;
  display: grid;
  place-items: center;
  padding: 0;
  border: 3px solid rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.38);
  opacity: var(--touch-opacity);
  pointer-events: auto;
  touch-action: none;
}

.touch-btn svg {
  width: 60%;
  height: 60%;
  fill: #ffffff;
}

.touch-btn.pressed {
  background: rgba(255, 255, 255, 0.35);
  transform: scale(0.94);
}

.touch-jump {
  position: absolute;
  right: calc(28px + var(--safe-right));
  bottom: calc(28px + var(--safe-bottom));
  width: calc(104px * var(--touch-scale));
  height: calc(104px * var(--touch-scale));
  border-radius: 16px;
}

.touch.left-handed .touch-jump {
  right: auto;
  left: calc(28px + var(--safe-left));
}

.touch-top {
  position: absolute;
  top: calc(10px + var(--safe-top));
  right: calc(12px + var(--safe-right));
  display: flex;
  gap: 10px;
}

.touch-small {
  width: calc(52px * var(--touch-scale));
  height: calc(52px * var(--touch-scale));
  border-radius: 10px;
}