/* ===== TELESTRATION STYLES ===== */
/* Remove any glow effects from drawing elements */

/* Animated dashed line effect */
.telestration-animated-dash {
  animation: dash-flow 0.8s linear infinite;
}

@keyframes dash-flow {
  0% {
    stroke-dashoffset: 22;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

/* Specific telestration element classes */
.telestration-line,
.telestration-arrow {
  filter: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Ensure clean polylines with no glow */
.leaflet-interactive,
.leaflet-clickable {
  filter: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Clean SVG elements for arrows */
svg {
  filter: none !important;
}

svg polygon {
  filter: none !important;
  box-shadow: none !important;
}

/* Clean polyline paths */
path.leaflet-interactive {
  filter: none !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Ensure smooth drawing performance */
.leaflet-zoom-animated {
  will-change: transform;
}

/* Remove any potential glow from drawing layers */
.leaflet-pane svg,
.leaflet-overlay-pane svg {
  filter: none !important;
}

.leaflet-overlay-pane * {
  filter: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Optimize drawing performance */
.leaflet-overlay-pane {
  pointer-events: auto;
}

/* Smooth line rendering */
.leaflet-overlay-pane path {
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* ===== REALISTIC GROUND SHADOWS FOR MARKERS ===== */

/* Clean marker icons with realistic ground shadows */
.leaflet-marker-icon {
  filter: drop-shadow(0px 6px 8px rgba(0, 0, 0, 0.6)) !important;
}

/* Enhanced shadows for different marker types */
.radar-icon, .soldier-icon, .fire-icon, .tank-icon {
  filter: drop-shadow(0px 8px 12px rgba(0, 0, 0, 0.7)) !important;
}

/* Helicopter gets softer shadow (flying higher) */
.helicopter-icon {
  filter: drop-shadow(0px 12px 16px rgba(0, 0, 0, 0.5)) !important;
}

/* Dragging state - enhanced shadow when lifted */
.leaflet-marker-icon.leaflet-drag-target {
  filter: drop-shadow(0px 15px 25px rgba(0, 0, 0, 0.8)) !important;
  transform: scale(1.02);
  transition: all 0.2s ease-out;
}

/* ===== ANIMATED SVG MARKERS ===== */

/* Animated marker container */
.animated-marker {
  pointer-events: auto;
}

/* Soldier SVG Animation Styles */
.soldier-svg-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.soldier-svg-icon object {
  width: 64px;
  height: 64px;
  pointer-events: none;
}

/* Fallback styling for older browsers */
.soldier-fallback {
  font-size: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
}

/* Hover effect for animated markers */
.animated-marker:hover .soldier-svg-icon {
  transform: scale(1.1);
  transition: transform 0.2s ease-out;
}

/* ===== SPRITE ANIMATION MARKERS ===== */

/* Sprite marker container */
.sprite-marker {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sprite animation element */
.sprite-animation {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  background-color: rgba(255, 0, 0, 0.1); /* Debug: light red tint to see bounds */
  border: 1px solid rgba(0, 255, 0, 0.3); /* Debug: green border */
  transition: transform 0.2s ease-out;
}

/* Soldier marker specific styles */
.soldier-marker {
  filter: drop-shadow(0px 8px 12px rgba(0, 0, 0, 0.7));
}

/* Enhanced shadow when dragging sprite markers */
.sprite-marker.leaflet-drag-target {
  filter: drop-shadow(0px 15px 25px rgba(0, 0, 0, 0.8)) !important;
  transform: scale(1.05);
}

/* Hover effect for sprite markers */
.sprite-marker:hover .sprite-animation {
  transform: scale(1.1);
}