/* TouchControls.css
 * Virtual joystick and button controls for mobile devices
 */

/* On :root so an overlay sharing the screen can keep clear of the controls. */
:root {
  --joystick-size: 150px;
  /* The controls are drawn in see-through white, which is nothing at all
     over a white HUD piece or a bright sky: a dark shadow under each whole
     control, icon and knob included, keeps it in sight on any ground. */
  --touch-control-shadow: drop-shadow(var(--shadow-text));
}

.touch-controls {
  position: absolute;
  bottom: calc(var(--space-2) + var(--safe-area-bottom));
  left: calc(var(--space-2) + var(--safe-area-left));
  right: calc(var(--space-2) + var(--safe-area-right));
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  /* One step over the game's own 2D UI (B2D_Canvas), which is added to the
     page after the controls and at the same layer drew over them: a HUD
     piece laid across the jump button took every touch meant for it. Still
     under the end screen (--z-canvas-end). */
  z-index: calc(var(--z-canvas-ui) + 1);
}

.joystick-container {
  --joystick-radius: calc(var(--joystick-size) / 2);
  --joystick-walk-threshold: 0.45;
  --joystick-jog-threshold: 0.9;
  width: var(--joystick-size);
  height: var(--joystick-size);
  background:
    linear-gradient(
      to right,
      transparent 50%,
      var(--overlay-white-25) 50%,
      var(--overlay-white-25) calc(50% + 1px),
      transparent calc(50% + 1px)
    ),
    linear-gradient(
      to bottom,
      transparent 50%,
      var(--overlay-white-25) 50%,
      var(--overlay-white-25) calc(50% + 1px),
      transparent calc(50% + 1px)
    ),
    var(--overlay-white-10);
  border: 2px solid var(--overlay-white-40);
  border-radius: 50%;
  filter: var(--touch-control-shadow);
  position: relative;
  pointer-events: auto;
}

/* Breakpoint circles for walk/jog and jog/run thresholds */
.joystick-container::before,
.joystick-container::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid var(--overlay-white-20);
  pointer-events: none;
  z-index: 1;
}

.joystick-container::before {
  width: calc(var(--joystick-radius) * var(--joystick-walk-threshold) * 2);
  height: calc(var(--joystick-radius) * var(--joystick-walk-threshold) * 2);
}

.joystick-container::after {
  width: calc(var(--joystick-radius) * var(--joystick-jog-threshold) * 2);
  height: calc(var(--joystick-radius) * var(--joystick-jog-threshold) * 2);
}

.joystick {
  width: 50px;
  height: 50px;
  background: var(--overlay-white-50);
  border: 2px solid var(--overlay-white-75);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.1s ease-out;
  z-index: 2;
}

/* Horizontal-only joystick (for side-scrollers) */
.joystick-container.horizontal-only {
  width: 200px;
  height: 50px;
  border-radius: 25px;
  align-self: center;
  /* Override background to remove horizontal crosshair line */
  background:
    linear-gradient(
      to right,
      transparent 50%,
      var(--overlay-white-25) 50%,
      var(--overlay-white-25) calc(50% + 1px),
      transparent calc(50% + 1px)
    ),
    var(--overlay-white-10);
}

/* Vertical breakpoint lines for horizontal joystick */
/* Max distance = 75px, so 0.45 = 33.75px, 0.9 = 67.5px from center */
.joystick-container.horizontal-only::before,
.joystick-container.horizontal-only::after {
  width: 1px;
  height: 100%;
  border: none;
  border-radius: 0;
  background: var(--overlay-white-20);
  top: 0;
  transform: translateX(-50%);
}

/* Walk/jog threshold at 0.45 (33.75px from center) */
.joystick-container.horizontal-only::before {
  left: calc(50% - 33.75px);
  box-shadow:
    33.75px 0 0 0 var(--overlay-white-25),
    /* Center line */ 67.5px 0 0 0 var(--overlay-white-20); /* Mirror on right */
}

/* Jog/run threshold at 0.9 (67.5px from center) */
.joystick-container.horizontal-only::after {
  left: calc(50% - 67.5px);
  box-shadow: 135px 0 0 0 var(--overlay-white-20); /* Mirror on right */
}

.joystick-container.horizontal-only .joystick {
  width: 50px;
  height: 50px;
}

/* One column of up to three buttons, which is every game that has only
 * Jump, Grab and Throw. A fourth and fifth start a second column on the
 * inside, packed to the bottom where a thumb reaches. */
.touch-controls-right {
  --touch-button-size: calc((var(--joystick-size) - var(--space-2)) / 2);
  display: flex;
  flex-flow: column wrap-reverse;
  justify-content: flex-end;
  align-content: flex-start;
  gap: var(--space-2);
  max-height: calc(var(--touch-button-size) * 3 + var(--space-2) * 2);
}

/* Every button shares one shape; each action brings only its icon. */
.touch-button {
  width: var(--touch-button-size);
  height: var(--touch-button-size);
  background: var(--overlay-white-15);
  border: 2px solid var(--overlay-white-40);
  border-radius: 50%;
  filter: var(--touch-control-shadow);
  pointer-events: auto;
  position: relative;
  transition:
    background 0.1s ease-out,
    transform 0.1s ease-out;
}

.touch-button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  background: var(--touch-button-icon) center/contain no-repeat;
}

.touch-button:active {
  background: var(--overlay-white-40);
  transform: scale(0.95);
}

.jump-button {
  --touch-button-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.7)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='14' cy='4' r='2.5' fill='rgba(255,255,255,0.7)'/%3E%3Cpath d='M12 9 L10 14'/%3E%3Cpath d='M12 9 L5 12'/%3E%3Cpath d='M12 9 L20 11'/%3E%3Cpath d='M10 14 L13 17 L15 22'/%3E%3Cpath d='M10 14 L7 19 L4 20'/%3E%3C/svg%3E");
}

.grab-button {
  --touch-button-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.7)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 11V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2v0'/%3E%3Cpath d='M14 10V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v2'/%3E%3Cpath d='M10 10.5V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2v8'/%3E%3Cpath d='M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15'/%3E%3C/svg%3E");
}

.throw-button {
  --touch-button-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.7)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='4' cy='19' r='2.5' fill='rgba(255,255,255,0.7)'/%3E%3Cpath d='M5 17 C 9 6 16 5 20 9'/%3E%3Cpath d='M20 9 L20 5'/%3E%3Cpath d='M20 9 L16 9'/%3E%3C/svg%3E");
}

.interact-button {
  --touch-button-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.7)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 14a8 8 0 0 1-8 8'/%3E%3Cpath d='M18 11v-1a2 2 0 0 0-2-2a2 2 0 0 0-2 2'/%3E%3Cpath d='M14 10V9a2 2 0 0 0-2-2a2 2 0 0 0-2 2v1'/%3E%3Cpath d='M10 9.5V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v10'/%3E%3Cpath d='M18 11a2 2 0 1 1 4 0v3a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15'/%3E%3C/svg%3E");
}

.attack-button {
  --touch-button-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.7)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 17.5 L3 6 L3 3 L6 3 L17.5 14.5'/%3E%3Cpath d='M13 19 L19 13'/%3E%3Cpath d='M16 16 L20 20'/%3E%3Cpath d='M19 21 L21 19'/%3E%3C/svg%3E");
}

/* Touch-to-look overlay (invisible touch area for camera control) */
.touch-look-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* Behind the other controls (.touch-controls) and the game's 2D UI */
  z-index: 98;
  /* Transparent but captures touch events */
  background: transparent;
}