/* DOM-based map markers */
.dom-marker {
  position: absolute !important;
  width: 16px !important;
  height: 16px !important;
  margin-left: -8px !important; /* Center marker */
  margin-top: -8px !important; /* Center marker */
  border-radius: 50% !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 0 4px rgba(0,0,0,0.5) !important;
  transition: transform 0.1s ease-in-out, box-shadow 0.2s ease-in-out !important;
  pointer-events: auto !important;
  z-index: 30 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.dom-marker:hover {
  transform: scale(1.5) !important;
  z-index: 50 !important; /* Even higher z-index on hover */
}

/* Even larger hover for glitched vehicles - maintain category color with enhanced glow */
.dom-marker.glitched:hover {
  transform: scale(1.8) !important;
  z-index: 55 !important; /* Highest z-index when glitched vehicle is hovered */
  /* Keep standard black border, just enhance the red glow */
  box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.9), 0 0 10px 5px rgba(255, 0, 0, 0.5) !important; /* Dramatic red glow */
}

/* Special hover style for players */
.dom-marker.player:hover,
.dom-marker.player-in-vehicle:hover {
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.8), 0 0 0 8px rgba(245, 158, 11, 0.4) !important;
}

/* Base styling for all vehicles */
.dom-marker.vehicle {
  /* No background color here - will be set by JavaScript based on vehicle type */
  border: 2px solid #000000 !important; /* Black circle for vehicles */
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Player markers get enhanced styling - for players on foot */
.dom-marker.player {
  width: 20px !important;
  height: 20px !important;
  margin-left: -10px !important; /* Center the larger marker */
  margin-top: -10px !important;
  background-color: #8B5CF6 !important; /* Purple for players on foot */
  border: 2px solid #ffffff !important; /* White border for players */
  box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.5) !important; /* Orange halo for players - LARGER */
  animation: pulse-player 1.5s infinite !important; /* Enhanced pulse for players */
  z-index: 40 !important; /* Higher z-index for players */
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Vehicles with players: keep vehicle color, add orange halo */
.dom-marker.player-in-vehicle {
  width: 20px !important;
  height: 20px !important;
  margin-left: -10px !important; /* Center the larger marker */
  margin-top: -10px !important;
  /* No background-color override - keeps the original vehicle color */
  border: 2px solid #ffffff !important; /* White border for vehicles with players */
  box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.5) !important; /* Orange halo for player vehicles - LARGER */
  animation: pulse-player 1.5s infinite !important; /* Enhanced pulse for players in vehicles */
  z-index: 40 !important; /* Higher z-index for players */
}

/* Vehicles with AI: keep vehicle color, add white halo */
.dom-marker.ai-active {
  width: 20px !important;
  height: 20px !important;
  margin-left: -10px !important;
  margin-top: -10px !important;
  /* No background-color override - keeps the original vehicle color */
  border: 2px solid #ffffff !important;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.6) !important; /* White halo for AI vehicles - LARGER */
  animation: pulse-ai 2s infinite !important; /* Slower pulse for AI */
  z-index: 35 !important; /* Above regular vehicles but below players */
}

/* Vehicles with controller but no player: keep vehicle color, add red halo */
.dom-marker.controller-active {
  width: 20px !important;
  height: 20px !important;
  margin-left: -10px !important;
  margin-top: -10px !important;
  /* No background-color override - keeps the original vehicle color */
  border: 2px solid #ffffff !important;
  box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.5) !important; /* Red halo for controlled vehicles - LARGER */
  animation: pulse-controller 2s infinite !important;
  z-index: 35 !important; /* Above regular vehicles but below players */
}

/* Glitched vehicles - ONLY add red glow, keep original color and standard border */
.dom-marker.glitched {
  /* CRITICAL: No background-color override - keeps the original vehicle color */
  background-color: inherit !important; /* ENSURE we never override the original vehicle color */
  animation: pulse-glitched 1s infinite !important; /* Custom animation for glitched vehicles */
  /* No border override - keep standard black border */
  box-shadow: 0 0 0 4px rgba(255, 0, 0, 0.6) !important; /* Red glow only */
  z-index: 50 !important; /* Higher z-index to show above other elements */
}

/* Cancel pulsing when the toggle is off */
.dom-marker.no-pulse {
  animation: none !important;
}

/* Different static shadow styles when pulse is disabled */
.dom-marker.player.no-pulse {
  box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.5) !important; /* Orange shadow for players */
}

.dom-marker.player-in-vehicle.no-pulse {
  box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.5) !important; /* Orange shadow for player vehicles */
}

.dom-marker.ai-active.no-pulse {
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.6) !important; /* White shadow for AI */
}

.dom-marker.controller-active.no-pulse {
  box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.5) !important; /* Red shadow for controller */
}

/* X symbol for glitched vehicles now created directly in JavaScript 
 * This ensures the vehicle maintains its original category color
 * while still having the red glow/pulse effect and the X mark
 */

/* Enhanced pulse animation with orange halo effect for players */
@keyframes pulse-player {
  0% {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 6px rgba(245, 158, 11, 0.5);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.8), 0 0 0 15px rgba(245, 158, 11, 0);
    transform: scale(1.25);
  }
  100% {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 6px rgba(245, 158, 11, 0.5);
    transform: scale(1);
  }
}

/* White halo pulse for AI vehicles */
@keyframes pulse-ai {
  0% {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 6px rgba(255, 255, 255, 0.6);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.8), 0 0 0 13px rgba(255, 255, 255, 0);
    transform: scale(1.15);
  }
  100% {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 6px rgba(255, 255, 255, 0.6);
    transform: scale(1);
  }
}

/* Red halo pulse for controller vehicles */
@keyframes pulse-controller {
  0% {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 6px rgba(239, 68, 68, 0.5);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.8), 0 0 0 13px rgba(239, 68, 68, 0);
    transform: scale(1.15);
  }
  100% {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 6px rgba(239, 68, 68, 0.5);
    transform: scale(1);
  }
}

/* Standard pulse animation for regular vehicles */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0);
    transform: scale(1.2);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    transform: scale(1);
  }
}

/* Custom pulse animation for glitched vehicles - red glow ONLY */
@keyframes pulse-glitched {
  0% {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.8), 0 0 0 4px rgba(255, 0, 0, 0.6);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.8), 0 0 0 10px rgba(255, 0, 0, 0);
    transform: scale(1.2);
  }
  100% {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.8), 0 0 0 4px rgba(255, 0, 0, 0.6);
    transform: scale(1);
  }
}

/* Map Container Responsive Styling - Improved */
.map-container {
  /* Full width on mobile */
  width: 100%;
  /* Center horizontally */
  margin: 0 auto;
  position: relative;
  background-color: transparent; /* Transparent background */
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

/* Ensure square aspect ratio using padding technique */
.map-square-container {
  position: relative;
  width: 100%;
  padding-bottom: 100%; /* Creates 1:1 aspect ratio */
  overflow: hidden;
}

/* Improved Canvas Positioning for Responsiveness */
#server-map-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 20;
}

/* Enhanced Responsive Breakpoints */
/* Mobile (default) - Full width, more space for controls */
@media (max-width: 639px) {
  .map-container {
    width: 100%;
    max-width: 100%;
  }
  
  .map-square-container {
    padding-bottom: 100%; /* Full square aspect ratio */
  }
  
  /* Smaller touch targets for mobile */
  .field-marker, .map-marker {
    transform: scale(1.2); /* Slightly larger for touch */
  }
  
  /* Ensure the map popup stays within bounds */
  #map-marker-popup {
    max-width: 90vw;
  }
}

/* Small tablets */
@media (min-width: 640px) and (max-width: 767px) {
  .map-container {
    max-width: 600px; /* Fixed width on small tablets */
    margin: 0 auto;
  }
  
  .map-square-container {
    padding-bottom: 100%; /* Maintain perfect square ratio */
  }
}

/* Tablets */
@media (min-width: 768px) and (max-width: 1023px) {
  .map-container {
    max-width: 700px; /* Fixed width on tablets */
    margin: 0 auto;
  }
  
  .map-square-container {
    padding-bottom: 100%; /* Maintain perfect square ratio */
  }
}

/* Desktop */
@media (min-width: 1024px) {
  #map-section {
    background-color: transparent;
  }
  
  .map-container {
    max-width: 800px; /* Fixed maximum width for desktop */
    height: auto; /* Let height be determined by content */
    background-color: transparent;
  }
  
  /* Maintain perfect 1:1 ratio */
  .map-square-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%; /* Maintain the 1:1 square ratio */
    max-width: 100%;
    background-color: #f3f4f6; /* Light gray background */
  }
}

/* Large Desktop */
@media (min-width: 1280px) {
  .map-container {
    max-width: 900px; /* Absolute maximum width for large screens */
    height: auto;
    margin: 0 auto; /* Center it */
  }
  
  .map-square-container {
    padding-bottom: 100%; /* Maintain 1:1 square ratio */
  }
  
  /* Ensure map controls stay within viewport */
  .map-controls {
    right: 10px !important; /* Force position */
    max-width: 200px; /* Limit width */
  }
}

/* Loading overlay for map */
#map-loading-overlay {
  z-index: 30;
  background-color: rgba(17, 24, 39, 0.7); /* bg-gray-900 with 70% opacity */
}

/* Map marker styling */
.map-marker {
  position: absolute;
  border-radius: 50%;
  border: 1px solid white;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease-in-out;
}

.map-marker:hover {
  transform: scale(1.5);
  z-index: 25;
}

/* Map popup */
#map-marker-popup {
  transition: opacity 0.2s ease;
  opacity: 0;
}

#map-marker-popup.visible {
  opacity: 1;
}

/* Player markers */
.player-marker {
  background-color: #2563eb; /* blue-600 */
  border: 1.5px solid white;
}

/* Vehicle markers */
.vehicle-marker {
  background-color: #10b981; /* emerald-500 */
  border: 1.5px solid white;
}

/* Glitched vehicle markers */
.glitched-vehicle-marker {
  background-color: #ef4444; /* red-500 */
  position: relative;
}

.glitched-vehicle-marker:before, 
.glitched-vehicle-marker:after {
  content: '';
  position: absolute;
  background-color: white;
  width: 70%;
  height: 2px;
  top: 50%;
  left: 15%;
  transform-origin: center;
}

.glitched-vehicle-marker:before {
  transform: rotate(45deg);
}

.glitched-vehicle-marker:after {
  transform: rotate(-45deg);
}