/* Alegacy World Map — Cobalt dark style (Leaflet edition) */

.map-page {
    --map-bg: var(--al-surface);
    --map-border: var(--al-border);
    --map-accent: var(--al-accent);
    --map-ctl-bg: rgba(16, 16, 19, .92);
    color: #fff;
}

.map-title {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0;
    color: #fff;
}

.map-subtitle {
    margin: .25rem 0 0;
    font-size: .85rem;
    color: var(--al-text-dim);
}

.map-card {
    background: var(--map-bg);
    border: 1px solid var(--map-border);
    border-radius: var(--al-radius);
    padding: 1rem;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
    overflow: hidden;
}

.map-viewport {
    position: relative;
    width: 100%;
    height: 70vh;
    min-height: 400px;
    background: #0a0a0c;
    border-radius: .4rem;
    overflow: hidden;
}

.map-leaflet {
    width: 100%;
    height: 100%;
    background: #0a0a0c;
    /* Leaflet tiles are fully opaque only where data exists; the
       background shows through the "not yet captured" areas. */
}

/* ------------------------- overlays ------------------------- */

.map-overlay {
    position: absolute;
    inset: 0;
    z-index: 1000; /* above leaflet panes (max 700) */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    background: rgba(10, 10, 12, .78);
    backdrop-filter: blur(3px);
    color: rgba(255, 255, 255, .75);
    font-size: .95rem;
    text-align: center;
    padding: 1rem;
}

.map-overlay[hidden] {
    display: none;
}

.map-spinner {
    width: 2.4rem;
    height: 2.4rem;
    border: 3px solid rgba(255, 255, 255, .12);
    border-top-color: var(--al-accent-light);
    border-radius: 50%;
    animation: map-spin .9s linear infinite;
}

@keyframes map-spin {
    to { transform: rotate(360deg); }
}

.map-noscript {
    padding: 2rem;
    text-align: center;
    color: var(--al-text-dim);
}

/* ------------------------- buttons ------------------------- */

.map-btn {
    min-width: 2.2rem;
    height: 2.2rem;
    border-radius: .4rem;
    border: 1px solid var(--map-border);
    background: var(--map-ctl-bg);
    color: #fff;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background .2s, border-color .2s, box-shadow .2s;
    backdrop-filter: blur(10px);
}

.map-btn:hover {
    background: var(--map-accent);
    border-color: var(--map-accent);
    box-shadow: 0 0 14px rgba(224, 68, 68, .45);
}

.map-btn-wide {
    padding: 0 1.2rem;
    width: auto;
}


/* ----------------------- season selector ----------------------- */

.map-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.map-header-main {
    min-width: 0;
}

.map-season {
    position: relative;
    flex-shrink: 0;
}

.map-season-toggle {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem .9rem;
    background: var(--map-ctl-bg);
    border: 1px solid var(--map-border);
    border-radius: .4rem;
    color: rgba(255, 255, 255, .85);
    font-size: .9rem;
    cursor: pointer;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
    transition: background .15s, border-color .15s, box-shadow .2s;
}

.map-season-toggle:hover,
.map-season.open .map-season-toggle {
    background: rgba(255, 255, 255, .05);
    border-color: var(--map-accent);
    box-shadow: 0 0 14px rgba(224, 68, 68, .35);
}

.map-season-icon {
    color: var(--map-accent);
    font-size: .8rem;
}

.map-season-current {
    font-weight: 600;
    letter-spacing: .02em;
}

.map-season-arrow {
    font-size: .7rem;
    color: rgba(255, 255, 255, .55);
    transition: transform .2s ease;
}

.map-season.open .map-season-arrow {
    transform: rotate(180deg);
}

.map-season-dropdown {
    position: absolute;
    top: calc(100% + .35rem);
    right: 0;
    z-index: 30;
    min-width: 100%;
    background: rgba(20, 20, 24, .98);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: .4rem;
    padding: .35rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
    backdrop-filter: blur(8px);
}

.map-season-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.map-season-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .45rem .6rem;
    border-radius: .3rem;
    color: rgba(255, 255, 255, .8);
    text-decoration: none;
    white-space: nowrap;
    transition: background .1s;
}

.map-season-item:hover .map-season-link,
.map-season-item.selected .map-season-link {
    background: rgba(255, 255, 255, .05);
}

.map-season-item.selected .map-season-name {
    color: #fff;
    text-shadow: 0 0 8px rgba(224, 68, 68, .45);
}

.map-season-check {
    color: var(--map-accent);
    font-size: .7rem;
}

/* ------------------- custom leaflet controls ------------------- */

.al-ctl {
    background: var(--map-ctl-bg);
    border: 1px solid var(--map-border);
    border-radius: .4rem;
    color: #fff;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
}

.al-coords {
    padding: .3rem .6rem;
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, .85);
    pointer-events: none;
    white-space: nowrap;
}

.al-status {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    max-width: 60%;
    padding: .3rem .6rem;
    font-size: .72rem;
    color: var(--al-text-dim);
    pointer-events: none;
}

.al-status:empty {
    display: none;
}

.al-status-badge {
    color: #e0a83c;
    font-weight: 600;
}

.al-status-flash {
    color: var(--al-accent-light);
    font-weight: 600;
}

.al-spawn-btn {
    padding: .35rem .7rem;
    font-size: .78rem;
    cursor: pointer;
}

.al-spawn-btn:hover {
    border-color: var(--map-accent);
    color: var(--al-accent-light);
}

/* ------------------- leaflet chrome restyle ------------------- */

.map-leaflet .leaflet-control-zoom {
    border: 1px solid var(--map-border);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
}

.map-leaflet .leaflet-bar a {
    background: var(--map-ctl-bg);
    color: #fff;
    border-bottom: 1px solid var(--map-border);
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
}

.map-leaflet .leaflet-bar a:hover,
.map-leaflet .leaflet-bar a:focus {
    background: var(--map-accent);
    color: #fff;
}

.map-leaflet .leaflet-bar a.leaflet-disabled {
    background: rgba(16, 16, 19, .6);
    color: rgba(255, 255, 255, .25);
}

.map-leaflet .leaflet-control-layers {
    background: var(--map-ctl-bg);
    border: 1px solid var(--map-border);
    border-radius: .4rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
    color: #fff;
    backdrop-filter: blur(10px);
}

.map-leaflet .leaflet-control-layers-toggle {
    /* layers.png icon is dark; invert for the dark panel */
    filter: invert(.85);
    width: 2rem;
    height: 2rem;
    background-size: 1.2rem 1.2rem;
}

.map-leaflet .leaflet-control-layers-expanded {
    padding: .5rem .8rem;
    color: #fff;
}

.map-leaflet .leaflet-control-layers label {
    color: rgba(255, 255, 255, .85);
    font-size: .82rem;
    cursor: pointer;
}

.map-leaflet .leaflet-control-attribution {
    background: rgba(16, 16, 19, .75);
    color: var(--al-text-dim);
    font-size: .68rem;
}

.map-leaflet .leaflet-control-attribution a {
    color: var(--al-accent-light);
}

.map-leaflet .leaflet-container {
    font: inherit;
}

/* ------------------------- markers ------------------------- */

.al-marker {
    background: none;
    border: none;
}

.al-marker-pin {
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .85);
    background: var(--al-marker-color, #b678e0);
    box-shadow: 0 0 6px rgba(0, 0, 0, .7), 0 0 10px var(--al-marker-color, #b678e0);
}

/* per-kind colours — the kind names come from LAYER_DEFS in map.js */
.al-marker-npc    { --al-marker-color: #e0a83c; }
.al-marker-guide  { --al-marker-color: #58a6ff; }
.al-marker-poi    { --al-marker-color: #b678e0; }
.al-marker-city   { --al-marker-color: #3fbf7f; }
.al-marker-marker { --al-marker-color: #d98c4a; }
.al-marker-claim  { --al-marker-color: #4ac3d9; }
.al-marker-player { --al-marker-color: #e04444; }

/* claim coverage rectangles (marker.area → L.rectangle) */
.al-claim-rect {
    fill: rgba(74, 195, 217, .10);
    stroke: rgba(74, 195, 217, .75);
    stroke-dasharray: 6 4;
    fill-rule: evenodd;
}

.al-marker-player .al-marker-pin {
    animation: al-marker-pulse 2s ease-in-out infinite;
}

@keyframes al-marker-pulse {
    0%, 100% { box-shadow: 0 0 6px rgba(0, 0, 0, .7), 0 0 8px rgba(224, 68, 68, .4); }
    50%      { box-shadow: 0 0 6px rgba(0, 0, 0, .7), 0 0 16px rgba(224, 68, 68, .9); }
}

/* ------------------------- popup / tooltip ------------------------- */

.al-popup-wrap .leaflet-popup-content-wrapper {
    background: var(--al-surface);
    border: 1px solid var(--map-border);
    border-radius: var(--al-radius);
    color: #fff;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .5);
}

.al-popup-wrap .leaflet-popup-content {
    margin: .7rem .9rem;
    font-size: .85rem;
    line-height: 1.35;
}

.al-popup-wrap .leaflet-popup-tip {
    background: var(--al-surface);
    border: 1px solid var(--map-border);
}

.al-popup-wrap .leaflet-popup-close-button {
    color: var(--al-text-dim);
}

.al-popup-title {
    font-weight: 700;
    font-size: .95rem;
    margin-bottom: .15rem;
}

.al-popup-type {
    color: var(--al-accent-light);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .35rem;
}

.al-popup-desc {
    color: rgba(255, 255, 255, .8);
    margin-bottom: .35rem;
    max-width: 260px;
}

.al-popup-coords {
    color: var(--al-text-dim);
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
}

.al-tooltip {
    background: var(--map-ctl-bg);
    border: 1px solid var(--map-border);
    color: #fff;
    font-size: .75rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}

.al-tooltip.leaflet-tooltip-top::before {
    border-top-color: var(--map-border);
}

/* ------------------------- mobile ------------------------- */

@media (max-width: 640px) {
    .map-viewport {
        height: 60vh;
        min-height: 320px;
    }

    .map-card {
        padding: .5rem;
    }

    .al-status {
        max-width: 75%;
    }
}