/* Touch controls sit above the HUD, below menus, and leave the hotbar free. */
#touchControls {
  --touch-size: 52px;
  position: fixed;
  inset: 0;
  height: 100%;
  height: 100dvh;
  z-index: 6;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
  color: #e5eeff;
}
body.is-desktop #touchControls,
#touchControls[hidden] { display: none !important; }
#touchControls .hidden { display: none !important; }
#touchControls button,
#touchControls #joystick,
#touchControls #lookZone { touch-action: none; -webkit-tap-highlight-color: transparent; }
.touch-guard, .touch-look {
  position: absolute;
  top: 0;
  right: 0;
  bottom: calc(90px + env(safe-area-inset-bottom, 0px));
  pointer-events: auto;
}
.touch-guard { left: 0; touch-action: none; }
.touch-look { width: 64%; }
.touch-joystick {
  position: absolute;
  left: calc(18px + env(safe-area-inset-left, 0px));
  bottom: calc(104px + env(safe-area-inset-bottom, 0px));
  width: 136px;
  height: 136px;
  border: 3px solid rgba(159, 184, 232, .6);
  background: rgba(9, 17, 32, .6);
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .5), 0 3px 0 rgba(0, 0, 0, .45);
  border-radius: 14px;
  pointer-events: auto;
  opacity: .5;
  transition: opacity .15s, border-color .15s;
}
.stick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(calc(-50% + var(--stick-x, 0px)), calc(-50% + var(--stick-y, 0px)));
  background: #273d60;
  border: 3px solid #91b8f5;
  box-shadow: inset 0 0 0 2px #122139, 0 3px 0 #0b1220;
  border-radius: 5px;
  pointer-events: none;
}
.stick-arrow { position: absolute; color: #c1d5fa; font-size: 15px; pointer-events: none; }
.stick-arrow.up { top: 5px; left: 50%; transform: translateX(-50%); }
.stick-arrow.down { bottom: 4px; left: 50%; transform: translateX(-50%); }
.stick-arrow.left { left: 6px; top: 50%; transform: translateY(-50%); }
.stick-arrow.right { right: 6px; top: 50%; transform: translateY(-50%); }
.touch-joystick.sprinting { border-color: #60a5fa; box-shadow: inset 0 0 0 3px #132a4d, 0 0 12px #3b82f666; }
.touch-toolbar, .touch-actions, .touch-flight { position: absolute; display: flex; gap: 7px; pointer-events: none; }
.touch-toolbar {
  top: calc(10px + env(safe-area-inset-top, 0px));
  right: calc(12px + env(safe-area-inset-right, 0px));
}
.touch-actions {
  bottom: calc(104px + env(safe-area-inset-bottom, 0px));
  right: calc(14px + env(safe-area-inset-right, 0px));
  display: grid;
  grid-template-columns: repeat(2, var(--touch-size));
}
.touch-actions [data-action="sneak"] { grid-column: 2; }
.touch-flight {
  bottom: calc(226px + env(safe-area-inset-bottom, 0px));
  right: calc(14px + env(safe-area-inset-right, 0px));
}
#touchControls .tbtn {
  flex: 0 0 var(--touch-size);
  width: var(--touch-size);
  min-width: 48px;
  height: var(--touch-size);
  min-height: 48px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 2px solid;
  border-color: #8faacd #21334e #16253e #607faa;
  border-radius: 5px;
  background: rgba(15, 26, 45, .82);
  color: #f0f5ff;
  box-shadow: inset 0 0 0 2px #0b1425, 0 3px 0 #050b15;
  font: bold 25px/1 ui-monospace, monospace;
  text-shadow: 1px 2px #000;
  pointer-events: auto;
  opacity: .5;
  transition: opacity .15s, background-color .15s;
}
#touchControls .tbtn:focus-visible { outline: 3px solid #60a5fa; outline-offset: 2px; }
#touchControls .touch-active { opacity: 1; }
#touchControls .tbtn.touch-active, #touchControls .tbtn.touch-toggled {
  opacity: 1;
  border-color: #bfdbfe #3b82f6 #244b7a #93c5fd;
  background: rgba(36, 74, 127, .93);
}
@media (orientation: portrait) {
  .touch-look { width: 60%; }
  .touch-joystick { left: calc(12px + env(safe-area-inset-left, 0px)); width: 124px; height: 124px; }
  .touch-toolbar { gap: 5px; top: calc(46px + env(safe-area-inset-top, 0px)); }
  #touchControls { --touch-size: 50px; }
}
@media (max-height: 420px) {
  #touchControls { --touch-size: 48px; }
  .touch-joystick { width: 116px; height: 116px; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
  .touch-actions { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
  .touch-flight { bottom: calc(204px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  #touchControls .tbtn, .touch-joystick { transition: none; }
}