/* ── Intro band ───────────────────────────────── */

.maps-page {
    padding-top: 20px;
    padding-bottom: 80px;
}

.maps-intro {
    text-align: center;
    padding: 30px 8% 10px;
}

.maps-intro h1 {
    font-size: 3.4rem;
    letter-spacing: 8px;
    margin: 10px 0 14px;
    color: #f2e0b7;
    text-shadow:
        0 0 10px rgba(242, 224, 183, .25),
        0 0 30px rgba(200, 164, 106, .15);
}

.maps-intro p {
    color: #d5d5d5;
    letter-spacing: 1px;
    max-width: 640px;
    margin: 0 auto;
}

/* ── Map panel ────────────────────────────────── */

/* Panel chrome (background/border/backdrop-filter) is shared with
   .lore-entry, .rule-section, and .sidebar — defined in style.css */
.map-panel {
    width: min(1100px, 90%);
    margin: 30px auto 0;
    padding: 14px;
    transition: width .3s ease;
}

/* Grow the panel by the info pane's own footprint (320px + 16px gap)
   when it pops out, so the map itself never has to shrink to make room.
   Scoped above the mobile breakpoint, where the info pane stacks below
   the map instead and needs no extra width. */
@media (min-width: 769px) {
    .map-panel.info-open {
        width: min(1436px, calc(100vw - 40px));
    }
}

.map-panel-body {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.map-frame {
    position: relative;
    overflow: hidden;
    line-height: 0;
    flex: 1 1 0;
    min-width: 0;
}

.map-frame img {
    display: block;
    width: 100%;
    height: auto;
    cursor: zoom-in;
}

.map-expand {
    position: absolute;
    top: 28px;
    right: 28px;
    z-index: 2;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(200, 164, 106, .5);
    background: rgba(0, 0, 0, .45);
    backdrop-filter: blur(6px);
    color: var(--gold);
    cursor: pointer;
    transition: .25s;
}

.map-expand:hover {
    color: var(--gold-light);
    border-color: var(--gold);
    box-shadow: 0 0 16px rgba(200, 164, 106, .3);
}

.map-expand svg {
    width: 18px;
    height: 18px;
}

/* ── Region markers ───────────────────────────── */

.map-marker {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 60px;
    border-radius: 8px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: box-shadow .25s ease, background .25s ease;
}

.map-marker:hover {
    background: rgba(200, 164, 106, .1);
    box-shadow: 0 0 0 1px rgba(200, 164, 106, .5), 0 0 14px rgba(200, 164, 106, .25);
}

.map-marker.active {
    background: rgba(200, 164, 106, .16);
    box-shadow: 0 0 0 1px rgba(200, 164, 106, .7), 0 0 16px rgba(200, 164, 106, .35);
}

/* ── Region info panel ────────────────────────── */

/* Panel chrome (background/border/backdrop-filter) is shared with
   .lore-entry, .rule-section, and .sidebar — defined in style.css */
.map-info {
    position: relative;
    flex: 0 0 320px;
    display: none;
    padding: 24px 22px;
    align-self: stretch;
}

.map-info.open {
    display: block;
}

.map-info-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    color: var(--gold);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    transition: color .25s;
}

.map-info-close:hover {
    color: var(--gold-light);
}

.map-info-placeholder {
    color: #9a9a9a;
    font-style: italic;
}

.map-info-body h3 {
    color: var(--gold-light);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0 30px 14px 0;
}

.map-info-body p {
    color: #d9c19a;
    line-height: 1.7;
    font-size: .95rem;
}

.map-info-link {
    display: inline-block;
    margin-top: 16px;
    color: var(--gold);
    text-decoration: none;
    letter-spacing: 1px;
    font-size: .85rem;
    text-transform: uppercase;
    transition: color .25s;
}

.map-info-link:hover {
    color: var(--gold-light);
}

/* ── Legend (touch-friendly duplicate of the marker buttons) ─────────── */

.map-legend {
    width: min(1100px, 90%);
    margin: 20px auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.map-legend button {
    font: inherit;
    padding: 8px 18px;
    border: 1px solid rgba(200, 164, 106, .4);
    background: rgba(0, 0, 0, .3);
    color: var(--gold);
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: .85rem;
    cursor: pointer;
    transition: .25s;
}

.map-legend button:hover {
    color: var(--gold-light);
    border-color: var(--gold);
    background: rgba(200, 164, 106, .12);
}

/* ── Lightbox ─────────────────────────────────── */

.map-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    background: rgba(4, 8, 14, .92);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}

.map-lightbox.open {
    opacity: 1;
    visibility: visible;
}

.map-lightbox-scroll {
    margin: auto;
    max-width: 96vw;
    max-height: 96vh;
    overflow: auto;
}

.map-lightbox-scroll img {
    display: block;
    width: 1400px;
    max-width: none;
}

.map-lightbox-close {
    position: fixed;
    top: 24px;
    right: max(24px, calc(50% - 660px));
    width: 44px;
    height: 44px;
    border: 1px solid rgba(200, 164, 106, .5);
    background: rgba(0, 0, 0, .5);
    color: var(--gold);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    transition: .25s;
}

.map-lightbox-close:hover {
    color: var(--gold-light);
    border-color: var(--gold);
}

/* ── Responsive ───────────────────────────────── */

@media (max-width: 768px) {
    .maps-intro h1 {
        font-size: 1.9rem;
        letter-spacing: 4px;
    }

    .map-panel {
        padding: 8px;
    }

    .map-expand {
        top: 18px;
        right: 18px;
    }

    .map-panel-body {
        flex-direction: column;
    }

    .map-frame {
        flex: none;
        width: 100%;
    }

    .map-info {
        flex: 1 1 auto;
        align-self: stretch;
    }

    .map-lightbox-scroll img {
        width: 1000px;
    }
}