/* Mobile Controls Styling */
#mobile-controls {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  z-index: 1000;
  pointer-events: none;
  touch-action: none;
  user-select: none;
}

#left-joystick,
#right-joystick {
  position: absolute;
  width: 150px;
  height: 150px;
  pointer-events: auto;
}

#left-joystick {
  bottom: 20%;
  left: 20%;
  transform: translate(-50%, 0);
}

#right-joystick {
  bottom: 20%;
  right: 20%;
  transform: translate(50%, 0);
}

/* Make nipples bigger and less transparent */
.nipple {
  opacity: 0.9 !important;
}

.front {
  background-color: rgba(200, 200, 200, 0.9) !important;
}

.back {
  background-color: rgba(100, 100, 100, 0.8) !important;
}

#action-buttons {
  position: absolute;
  bottom: 45%;
  right: 20%;
  display: flex;
  justify-content: center;
  gap: 15px;
  transform: translate(50%, 0);
}

#action-buttons button {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  color: white;
  border: none;
  outline: none;
  font-size: 14px;
  font-weight: bold;
  pointer-events: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

#action-buttons button:active {
  transform: scale(0.95);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

#slash-btn {
  background-color: #f44336;
}

#kick-btn {
  background-color: #4caf50;
}

#lock-btn {
  background-color: #2196f3;
}

#heal-btn {
  background-color: #7b1fa2;
  background-image: linear-gradient(to bottom, #9c27b0, #6a1b9a);
  border: 2px solid #ba68c8;
  box-shadow: 0 4px 8px rgba(156, 39, 176, 0.4),
    inset 0 -2px 5px rgba(0, 0, 0, 0.2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Responsive adjustments for different screen sizes */
@media (max-height: 600px) {
  #action-buttons {
    bottom: 40%;
  }

  #action-buttons button {
    width: 60px;
    height: 60px;
    font-size: 12px;
  }

  #left-joystick,
  #right-joystick {
    width: 130px;
    height: 130px;
    bottom: 18%;
  }
}

@media (max-width: 480px) {
  #left-joystick {
    left: 25%;
  }

  #right-joystick {
    right: 25%;
  }

  #action-buttons {
    right: 25%;
    gap: 10px;
  }

  #action-buttons button {
    width: 60px;
    height: 60px;
  }
}

/* Landscape orientation specific styles */
@media (orientation: landscape) {
  #action-buttons {
    position: absolute;
    bottom: 130%; /* Position just above the right joystick */
    right: 20%;
    display: flex;
    justify-content: center;
    gap: 10px;
    transform: translate(50%, 0);
    z-index: 1010; /* Ensure buttons appear above joystick */
  }

  #action-buttons button {
    width: 55px;
    height: 55px;
    font-size: 11px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); /* Enhanced shadow for better visibility */
    border: 2px solid rgba(255, 255, 255, 0.3); /* Slight border for contrast */
  }

  /* Position joysticks closer to edges in landscape mode */
  #left-joystick {
    left: 15%; /* Was 10% - moved slightly away from edge */
    bottom: 25%; /* Raised from 20% to 25% for better thumb reach */
  }

  #right-joystick {
    right: 15%; /* Was 10% - moved slightly away from edge */
    bottom: 25%; /* Raised from 20% to 25% for better thumb reach */
  }

  /* Override any conflicting styles from other media queries */
  #slash-btn,
  #kick-btn,
  #lock-btn {
    opacity: 0.95; /* Slightly more opaque */
  }

  /* Ensure heal button maintains its vibrant appearance */
  #heal-btn {
    opacity: 0.95;
    border: 2px solid rgba(186, 104, 200, 0.7);
    box-shadow: 0 4px 10px rgba(156, 39, 176, 0.5),
      inset 0 -2px 5px rgba(0, 0, 0, 0.2);
  }
}

/* Specific adjustments for small height in landscape */
@media (orientation: landscape) and (max-height: 450px) {
  #action-buttons {
    bottom: 150%;
  }

  #action-buttons button {
    width: 50px;
    height: 50px;
    font-size: 10px;
  }

  /* Keep joysticks at middle distance for very small height screens */
  #left-joystick {
    left: 13%;
    bottom: 28%;
  }

  #right-joystick {
    right: 13%;
    bottom: 28%;
  }
}

/* Adjustments for wider screens in landscape */
@media (orientation: landscape) and (min-width: 800px) {
  #action-buttons {
    right: 15%;
    bottom: 140%;
  }

  #action-buttons button {
    width: 65px;
    height: 65px;
    font-size: 12px;
  }

  /* For wider screens, position joysticks slightly inward */
  #left-joystick {
    left: 12%;
    bottom: 30%;
  }

  #right-joystick {
    right: 12%;
    bottom: 30%;
  }
}