:root {
    --atlantia-gold: #c5a35c;
    --atlantia-gold-bright: #e6cf8a;
    --atlantia-gold-pale: #f4e4b0;
    --atlantia-text: #eee6d3;
    --atlantia-text-soft: #beb49e;
}


/* ==========================================================
   HOSTED MAP — WORDPRESS PAGE COMPATIBILITY FIX
   V1.0.1

   The WordPress page owns the viewport.
   This plugin fills ONLY the assigned map-host Group.
   ========================================================== */

.atlantia-celia-map-shell {
    position: relative !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 0 !important;
    min-height: 0 !important;

    max-width: 100% !important;
    max-height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;

    color: var(--atlantia-text);

    font-family:
        "Spectral",
        Georgia,
        "Times New Roman",
        serif;

    background: #08070A;

    isolation: isolate;
}


/*
   JavaScript calculates the largest possible 2752:1536 rectangle
   inside the WordPress map host.

   This preserves:
   - full map visibility
   - the canonical aspect ratio
   - SVG alignment
   - city/POI marker alignment
*/

.atlantia-celia-map-stage {
    position: relative !important;

    flex: none !important;

    width: 100%;
    height: auto;

    aspect-ratio: 2752 / 1536;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    user-select: none;
    -webkit-user-select: none;

    background: #08070A;

    box-shadow:
        0 0 55px rgba(0,0,0,.70);
}


.atlantia-celia-picture,
.atlantia-celia-map-image {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


.atlantia-celia-map-image {
    display: block !important;

    object-fit: fill !important;

    pointer-events: none !important;
}

/* ==========================================================
   APPROVED SVG REGIONS
   ========================================================== */

.atlantia-celia-region-layer {
    position: absolute;
    inset: 0;

    z-index: 4;
}

.atlantia-celia-region-layer svg {
    display: block;

    width: 100%;
    height: 100%;
}

.atlantia-celia-region-layer .celia-region {
    cursor: pointer;

    fill: rgba(218,183,101,0) !important;
    stroke: rgba(247,221,152,0) !important;

    transition:
        fill .22s ease,
        stroke .22s ease,
        filter .22s ease;
}

.atlantia-celia-region-layer .celia-region:hover,
.atlantia-celia-region-layer .celia-region:focus-visible {
    fill: rgba(218,183,101,.085) !important;
    stroke: rgba(247,221,152,.90) !important;

    filter:
        drop-shadow(
            0 0 8px rgba(232,198,112,.72)
        );

    outline: none;
}


/* ==========================================================
   CITY / POI MARKERS
   ========================================================== */

.atlantia-celia-marker-layer {
    position: absolute;
    inset: 0;

    z-index: 6;

    pointer-events: none;
}

.atlantia-celia-marker {
    position: absolute;

    width: 30px;
    height: 30px;

    transform:
        translate(-50%, -50%);

    padding: 0;

    border: 0;
    border-radius: 50%;

    cursor: pointer;
    pointer-events: auto;

    background: transparent;
}

.atlantia-celia-marker::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 7px;
    height: 7px;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background:
        var(--atlantia-gold-pale);

    box-shadow:
        0 0 0 2px rgba(13,10,5,.82),
        0 0 8px rgba(230,194,102,.56);

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.atlantia-celia-marker::after {
    content: "";

    position: absolute;
    inset: 2px;

    border-radius: 50%;

    border:
        1px solid rgba(243,215,137,0);

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}

.atlantia-celia-marker:hover::before,
.atlantia-celia-marker:focus-visible::before {
    transform:
        translate(-50%, -50%)
        scale(1.5);

    box-shadow:
        0 0 0 2px rgba(13,10,5,.90),
        0 0 15px rgba(243,215,137,.92);
}

.atlantia-celia-marker:hover::after,
.atlantia-celia-marker:focus-visible::after {
    border-color:
        rgba(243,215,137,.72);

    box-shadow:
        0 0 13px rgba(243,215,137,.42);
}

.atlantia-celia-marker:focus {
    outline: none;
}


/* ==========================================================
   TOOLTIP
   ========================================================== */

.atlantia-celia-tooltip {
    position: fixed;

    z-index: 999998;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transform:
        translate(12px, 12px);

    padding:
        8px 11px;

    color:
        #f5e9c3;

    font-size:
        12px;

    font-weight:
        500;

    letter-spacing:
        .045em;

    white-space:
        nowrap;

    background:
        rgba(5,8,11,.94);

    border:
        1px solid rgba(218,183,101,.46);

    border-radius:
        4px;

    box-shadow:
        0 8px 28px rgba(0,0,0,.55);

    transition:
        opacity .12s ease;
}

.atlantia-celia-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
}


/* ==========================================================
   SMALL MAP HINT
   ========================================================== */

.atlantia-celia-map-hint {
    position: absolute;

    z-index: 20;

    left: 50%;
    bottom: 18px;

    transform:
        translateX(-50%);

    padding:
        7px 13px;

    pointer-events: none;

    color:
        rgba(234,218,178,.66);

    font-size:
        10px;

    font-weight:
        500;

    letter-spacing:
        .09em;

    text-transform:
        uppercase;

    white-space: nowrap;

    background:
        rgba(2,6,9,.53);

    border:
        1px solid rgba(209,175,91,.17);

    border-radius:
        999px;

    -webkit-backdrop-filter:
        blur(4px);

    backdrop-filter:
        blur(4px);
}


/* ==========================================================
   MODAL BACKDROP
   ========================================================== */

.atlantia-celia-modal-backdrop {
    position: fixed;
    inset: 0;

    z-index: 999999;

    display: grid;
    place-items: center;

    padding: 26px;

    opacity: 0;
    visibility: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(4,7,9,.52) 0%,
            rgba(1,4,7,.78) 72%,
            rgba(0,2,4,.88) 100%
        );

    -webkit-backdrop-filter:
        blur(7px)
        saturate(.78);

    backdrop-filter:
        blur(7px)
        saturate(.78);

    transition:
        opacity .27s ease,
        visibility .27s ease;
}

.atlantia-celia-modal-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}

body.atlantia-celia-modal-open {
    overflow: hidden !important;
}


/* ==========================================================
   APPROVED DARK-FANTASY LORE WINDOW
   ========================================================== */

.atlantia-celia-lore-modal {
    position: relative;

    width:
        min(760px, 94vw);

    max-height:
        min(86vh, 860px);

    overflow-y: auto;

    padding:
        50px 56px 52px;

    isolation: isolate;

    color:
        var(--atlantia-text);

    font-family:
        "Spectral",
        Georgia,
        "Times New Roman",
        serif;

    background:
        linear-gradient(
            145deg,
            rgba(19,20,19,.988),
            rgba(8,12,15,.992)
        );

    border:
        1px solid rgba(205,169,85,.54);

    border-radius:
        5px;

    box-shadow:
        0 38px 125px rgba(0,0,0,.92),
        0 0 60px rgba(157,115,40,.055),
        inset 0 0 90px rgba(114,83,32,.045);

    transform:
        translateY(20px)
        scale(.972);

    transition:
        transform .27s cubic-bezier(.18,.75,.3,1);
}

.atlantia-celia-modal-backdrop.is-open
.atlantia-celia-lore-modal {
    transform:
        translateY(0)
        scale(1);
}

.atlantia-celia-lore-modal::before {
    content: "";

    position: absolute;
    inset: 11px;

    z-index: -1;

    pointer-events: none;

    border:
        1px solid rgba(211,178,94,.15);

    border-radius:
        2px;
}

.atlantia-celia-lore-modal::after {
    content: "";

    position: absolute;

    z-index: -2;

    left: 13%;
    right: 13%;
    top: -1px;

    height: 90px;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at top,
            rgba(209,177,96,.10),
            transparent 70%
        );
}


/* ==========================================================
   ORNAMENTAL CORNERS
   ========================================================== */

.atlantia-ornament {
    position: absolute;

    width: 42px;
    height: 42px;

    pointer-events: none;

    opacity: .72;
}

.atlantia-ornament::before,
.atlantia-ornament::after {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    background:
        linear-gradient(
            90deg,
            rgba(223,190,104,.78),
            rgba(223,190,104,.12)
        );
}

.atlantia-ornament::before {
    width: 34px;
    height: 1px;
}

.atlantia-ornament::after {
    width: 1px;
    height: 34px;
}

.atlantia-ornament-tl {
    left: 17px;
    top: 17px;
}

.atlantia-ornament-tr {
    right: 17px;
    top: 17px;

    transform:
        scaleX(-1);
}

.atlantia-ornament-bl {
    left: 17px;
    bottom: 17px;

    transform:
        scaleY(-1);
}

.atlantia-ornament-br {
    right: 17px;
    bottom: 17px;

    transform:
        scale(-1);
}


/* ==========================================================
   ARTWORK
   ========================================================== */

.atlantia-celia-modal-image-wrap {
    position: relative;

    margin:
        -8px 0 30px;

    aspect-ratio:
        16 / 7;

    overflow: hidden;

    border:
        1px solid rgba(207,171,84,.28);

    background:
        #090c0d;
}

.atlantia-celia-modal-image-wrap[hidden] {
    display: none !important;
}

.atlantia-celia-modal-image-wrap::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    box-shadow:
        inset 0 0 55px rgba(0,0,0,.72);
}

.atlantia-celia-modal-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        saturate(.84)
        contrast(1.04)
        brightness(.88);
}


/* ==========================================================
   MODAL CONTENT
   ========================================================== */

.atlantia-celia-modal-close {
    position: absolute;

    top: 17px;
    right: 19px;

    z-index: 5;

    width: 38px;
    height: 38px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    cursor: pointer;

    color:
        #d8bd72;

    background:
        rgba(255,255,255,.018);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        26px;

    line-height:
        36px;

    transition:
        color .16s ease,
        background .16s ease,
        box-shadow .16s ease;
}

.atlantia-celia-modal-close:hover,
.atlantia-celia-modal-close:focus-visible {
    color:
        #f6e4aa;

    background:
        rgba(218,183,101,.08);

    box-shadow:
        0 0 12px rgba(218,183,101,.11);

    outline: none;
}

.atlantia-celia-modal-kind {
    margin-bottom:
        12px;

    color:
        #a98c54;

    font-size:
        10px;

    font-weight:
        600;

    letter-spacing:
        .18em;

    text-transform:
        uppercase;
}

.atlantia-celia-modal-release {
    margin:
        -3px 0 14px;

    color:
        rgba(207,180,112,.64);

    font-size:
        11px;

    font-weight:
        500;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;
}

.atlantia-celia-modal-release[hidden] {
    display: none !important;
}

.atlantia-celia-modal-title {
    margin:
        0 50px 10px 0 !important;

    padding: 0 !important;

    color:
        #f0daa0 !important;

    font-family:
        "Spectral",
        Georgia,
        serif !important;

    font-size:
        clamp(34px, 4.2vw, 52px) !important;

    font-weight:
        500 !important;

    line-height:
        1.02 !important;

    letter-spacing:
        -.015em !important;

    text-transform: none !important;

    text-shadow:
        0 3px 15px rgba(0,0,0,.84);
}

.atlantia-celia-modal-separator {
    display: flex;
    align-items: center;

    gap: 11px;

    width: 178px;

    margin:
        22px 0 26px;
}

.atlantia-celia-modal-separator::before {
    content: "";

    width: 7px;
    height: 7px;

    transform:
        rotate(45deg);

    border:
        1px solid rgba(213,178,91,.76);

    background:
        rgba(213,178,91,.10);
}

.atlantia-celia-modal-separator::after {
    content: "";

    flex: 1;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(206,171,84,.80),
            rgba(206,171,84,0)
        );
}

.atlantia-celia-modal-summary {
    margin:
        0 0 24px;

    color:
        #e4dac4;

    font-size:
        18px;

    font-weight:
        400;

    line-height:
        1.62;

    font-style:
        italic;
}

.atlantia-celia-modal-body {
    color:
        #bcb29d;

    font-size:
        15px;

    font-weight:
        400;

    line-height:
        1.82;
}

.atlantia-celia-modal-body > :first-child {
    margin-top: 0;
}

.atlantia-celia-modal-body > :last-child {
    margin-bottom: 0;
}

.atlantia-celia-modal-body p,
.atlantia-celia-modal-body li {
    color:
        #bcb29d;
}

.atlantia-celia-modal-body h2,
.atlantia-celia-modal-body h3,
.atlantia-celia-modal-body h4 {
    color:
        #dfca91;

    font-family:
        "Spectral",
        Georgia,
        serif;
}

.atlantia-celia-modal-body a {
    color:
        #e6cf8a;
}

.atlantia-celia-modal-body blockquote {
    margin:
        24px 0;

    padding:
        2px 0 2px 20px;

    border-left:
        1px solid rgba(213,178,91,.48);

    color:
        #d5c8ac;
}

.atlantia-celia-modal-body img {
    max-width: 100%;
    height: auto;
}

.atlantia-celia-sealed-note {
    margin: 0 !important;

    color:
        #bcb29d !important;

    font-style:
        italic;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 720px) {

    .atlantia-celia-map-hint {
        bottom:
            9px;

        font-size:
            8px;
    }

    .atlantia-celia-modal-backdrop {
        align-items: end;

        padding:
            10px;
    }

    .atlantia-celia-lore-modal {
        width:
            100%;

        max-height:
            88vh;

        padding:
            38px 27px 34px;

        border-radius:
            5px 5px 0 0;
    }

    .atlantia-celia-modal-title {
        font-size:
            32px !important;
    }

    .atlantia-celia-modal-summary {
        font-size:
            16px;
    }

    .atlantia-celia-modal-body {
        font-size:
            14px;

        line-height:
            1.72;
    }

    .atlantia-ornament {
        width:
            31px;

        height:
            31px;
    }

    .atlantia-ornament::before {
        width:
            25px;
    }

    .atlantia-ornament::after {
        height:
            25px;
    }

}


/* ==========================================================
   ACCESSIBILITY
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .atlantia-celia-region-layer .celia-region,
    .atlantia-celia-marker::before,
    .atlantia-celia-marker::after,
    .atlantia-celia-modal-backdrop,
    .atlantia-celia-lore-modal {
        transition:
            none !important;
    }

}