/* intel-habitat.css — Habitat map card on the Pal profile page.
 *
 * Loaded only by templates/intelligence/pal_profile.html. Styles the single
 * Habitat card that intel-habitat.js injects (a compact Leaflet map of the
 * Pal's wild-spawn hotspots) and its heat markers. Reuses the profile's theme
 * variables (--glass-*, --fire-*, --gold-*) so it reads as one page. Mobile-safe
 * (fluid width, shorter map, no horizontal overflow). ASCII only.
 */

.intel-profile-page .pp-habitat-card {
    /* Full-width card (sits after the stats grid, like Active Skills). */
    grid-column: 1 / -1;
}

.intel-profile-page .pp-habitat-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
    min-width: 0;
}

.intel-profile-page .pp-habitat-day i { color: var(--fire-yellow, #ffd27f); }
.intel-profile-page .pp-habitat-night i { color: #b9a7ff; }

.intel-profile-page .pp-habitat-map-wrap {
    position: relative;
    width: 100%;
    min-width: 0;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.14));
    background: #0a0705;
}

.intel-profile-page .pp-habitat-map {
    width: 100%;
    height: 380px;
    background: #0a0705;
}

@media (max-width: 768px) {
    .intel-profile-page .pp-habitat-map { height: 280px; }
}

/* Leaflet renders its own controls; keep them above the tiles and on-theme. */
.intel-profile-page .pp-habitat-map .leaflet-control-zoom a {
    background: rgba(20, 8, 4, 0.9);
    color: var(--gold-light, #ffcf87);
    border-color: var(--glass-border, rgba(255, 255, 255, 0.18));
}

.intel-profile-page .pp-habitat-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    margin-top: 10px;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.72);
    min-width: 0;
}

.intel-profile-page .pp-habitat-key {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.intel-profile-page .pp-habitat-note {
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}

.intel-profile-page .pp-habitat-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
.intel-profile-page .pp-habitat-dot.is-day {
    background: radial-gradient(circle, #ffb457 0%, #ef5b23 75%);
    box-shadow: 0 0 6px rgba(239, 91, 35, 0.7);
}
.intel-profile-page .pp-habitat-dot.is-night {
    background: radial-gradient(circle, #cbb9ff 0%, #7c5cff 75%);
    box-shadow: 0 0 6px rgba(124, 92, 255, 0.7);
}

.intel-profile-page .pp-habitat-none {
    margin: 4px 0 0;
}

/* --- Heat markers (divIcon injected by intel-habitat.js) ---------------- */
.pp-habitat-icon { background: transparent; border: 0; }

.pp-habitat-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--pp-heat, 22px);
    height: var(--pp-heat, 22px);
    border-radius: 50%;
    transform: translate(0, 0);
}
.pp-habitat-marker.is-day {
    background: radial-gradient(circle, rgba(255, 180, 87, 0.85) 0%,
                rgba(239, 91, 35, 0.42) 55%, rgba(239, 91, 35, 0) 72%);
    border: 1px solid rgba(255, 180, 87, 0.85);
    box-shadow: 0 0 10px rgba(239, 91, 35, 0.55);
}
.pp-habitat-marker.is-night {
    background: radial-gradient(circle, rgba(203, 185, 255, 0.85) 0%,
                rgba(124, 92, 255, 0.42) 55%, rgba(124, 92, 255, 0) 72%);
    border: 1px solid rgba(203, 185, 255, 0.9);
    box-shadow: 0 0 10px rgba(124, 92, 255, 0.6);
}

.pp-habitat-badge {
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    color: #1a0d05;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
    pointer-events: none;
}

.pp-habitat-tooltip {
    font-size: 0.78rem;
    font-weight: 600;
}