/*
  TOUCH CONTROLS
  ==============
  Invisible on desktop by construction: #touch-controls starts empty of any
  visible content and only gains `.touch-active` (see InputManager.js) the
  first time an actual touch event happens. The joystick (walking, and —
  pushed near its own edge — running), the three action buttons (jump,
  crouch, zoom), and the tappable HUD prompt (see main.css's .hud-prompt)
  are the entire touch-specific surface; ladder climbing needs none of its
  own, since it already reads the same forward/back joystick input
  ordinary ground movement does.
*/

#workshop-canvas {
  touch-action: none; /* we handle drag-to-look ourselves; stop the browser's own scroll/zoom/pull-to-refresh from competing with it */
}

#touch-controls {
  position: fixed;
  inset: 0;
  z-index: 52;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-medium) var(--ease-standard);
}
#touch-controls.touch-active {
  opacity: 1;
}
#touch-controls.modal-hidden {
  opacity: 0;
}
#touch-controls.modal-hidden #touch-joystick-base {
  pointer-events: none;
}

#touch-joystick-base {
  position: absolute;
  left: max(28px, env(safe-area-inset-left));
  bottom: max(28px, env(safe-area-inset-bottom));
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: var(--surface-glass);
  border: 2px solid var(--wood-mid);
  touch-action: none;
  pointer-events: auto;
}

#touch-joystick-nub {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 46px;
  margin-left: -23px;
  margin-top: -23px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--brass-bright), var(--brass));
  border: 2px solid var(--wood-dark);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

/* Jump, crouch, and zoom — the touch movement/view controls that need an
   actual button (see InputManager.js's own comment on why running and
   ladder climbing don't). Positioned opposite the joystick, stacked
   bottom-to-top (crouch, jump, zoom), same glass/wood styling, same
   reveal-on-first-touch and modal-hidden behaviour every other touch
   control already has. */
#touch-jump-button,
#touch-crouch-button,
#touch-zoom-button {
  position: absolute;
  right: max(28px, env(safe-area-inset-right));
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--surface-glass);
  border: 2px solid var(--wood-mid);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 12px;
  touch-action: none;
  pointer-events: auto;
}
#touch-crouch-button {
  bottom: max(28px, env(safe-area-inset-bottom));
}
#touch-jump-button {
  bottom: max(108px, calc(env(safe-area-inset-bottom) + 108px));
}
#touch-zoom-button {
  bottom: max(188px, calc(env(safe-area-inset-bottom) + 188px));
}
#touch-crouch-button.active,
#touch-zoom-button.active {
  background: rgba(184, 134, 59, 0.35);
  border-color: var(--brass-bright);
  color: var(--brass-bright);
}
#touch-controls.modal-hidden #touch-jump-button,
#touch-controls.modal-hidden #touch-crouch-button,
#touch-controls.modal-hidden #touch-zoom-button {
  pointer-events: none;
}