#touch-controls[hidden], #touch-controls button[hidden] { display: none; }

.touch-game {
  --touch-bottom: max(10px, env(safe-area-inset-bottom));
  --touch-left: max(12px, env(safe-area-inset-left));
  --touch-right: max(12px, env(safe-area-inset-right));
  --touch-controls-bottom: calc(var(--touch-bottom) + 66px);
}

#touch-controls {
  position: fixed;
  z-index: 10;
  inset: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

#touch-stick, .touch-actions {
  position: absolute;
  bottom: var(--touch-controls-bottom);
  pointer-events: auto;
}

#touch-stick {
  left: var(--touch-left);
  width: clamp(96px, 28vmin, 126px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 2px solid #d6bd8199;
  border-radius: 50%;
  background: #102c36ad;
  touch-action: none;
}

#touch-stick span {
  width: 38%;
  aspect-ratio: 1;
  border: 2px solid #ecd29a;
  border-radius: 50%;
  background: #60756b;
  pointer-events: none;
}

.touch-actions {
  right: var(--touch-right);
  display: grid;
  gap: 6px;
}

.touch-actions button {
  min-height: 44px;
  padding: 5px 10px;
  background: #17373aeb;
}

#touch-revive { touch-action: none; }

.touch-game #vbx-actionbar {
  bottom: var(--touch-bottom);
  padding: 4px;
  gap: 4px;
}

.touch-game #vbx-actionbar button {
  width: clamp(50px, 17vw, 72px);
  height: 52px;
}

.touch-game #vbx-actionbar button > span { font-size: 22px; line-height: 26px; }
.touch-game #vbx-actionbar button strong { font-size: 8px; white-space: normal; }
.touch-game #vbx-actionbar kbd, .touch-game .auto-slot,
.touch-game #combat-help, .touch-game .world-footer > span:last-child { display: none; }

.touch-game #world-radar {
  width: 66px !important;
  height: 66px !important;
  left: var(--touch-left) !important;
  bottom: calc(var(--touch-controls-bottom) + clamp(96px, 28vmin, 126px) + 8px) !important;
}

.touch-game #camp-help { left: var(--touch-left); bottom: var(--touch-bottom); min-height: 44px; }

@media (orientation: landscape) {
  .touch-game { --touch-controls-bottom: var(--touch-bottom); }
  .touch-game #camp-help {
    bottom: calc(var(--touch-bottom) + clamp(96px, 28vmin, 126px) + 8px);
  }
  .touch-game #world-radar {
    bottom: calc(var(--touch-bottom) + clamp(96px, 28vmin, 126px) + 60px) !important;
  }
}

@media (orientation: portrait) and (max-width: 430px) {
  .touch-game #vbx-actionbar { left: auto; right: var(--touch-right); transform: none; }
}