:root {
    --background: 255, 6%, 5%;
    --foreground: 255, 6%, 98%;
}

/* Hover-tooltip "description" divs are appended directly to body with
   inline styles. Originally they stacked above Mapbox; with Leaflet they
   sit below leaflet-pane (z-index 700) by default. Lift them above.
   Fingerprint: padding: 7px AND border-radius: 20px is unique to the
   description divs (toggle buttons use 5px / 50%). Kept independent of
   display state so z-index applies whether hidden or shown. */
body > div[style*="padding: 7px"][style*="border-radius: 20px"] {
    z-index: 1100 !important;
    pointer-events: none !important;
}

body {
    font-family: "Inter", sans-serif;
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
}

#map {
    height: 500px;
}

.leaflet-tile-container img {
    width: 256.5px !important;
    height: 256.5px !important;
}

.leaflet-container {
    background: transparent;
}

.leaflet-popup-content {
    font-size: 1rem;
    font-weight: 800;
}

.tns-icon-marker {
    border-radius: 999px;
}

.floating-icon {
    animation: float 3s ease-in-out infinite;
}

.floating-icon2 {
    animation: bounce 4s ease-in-out infinite;
}

@keyframes bounce {
    0%, 100% {
        transform: translate(0,0);
    }
    50% {
        transform: translate(-1px, -2px);
    }
}

@keyframes float {
    0%, 100% {
        transform: translate(0,0);
    }
    50% {
        transform: translate(-2px, -1px);
    }
}