/* ==========================================================
   FOND GLOBAL DE LA PAGE DE CAMPAGNE
========================================================== */

.campaign-map-page {

    position: relative;

    width: 100%;

    min-height: 100vh;

    background:
        linear-gradient(
            rgba(8, 8, 7, .28),
            rgba(8, 8, 7, .68)
        ),
        url("/images/ui/dashboard-background.png");

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;

}

/* ==========================================================
   ZONE CENTRALE — CARTE DE CAMPAGNE
   ========================================================== */

.map-container {

    position: relative;

    display: flex;

    flex-direction: column;

    width: 100%;
    height: 100%;
    min-height: 0;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            rgba(22, 20, 17, .48),
            rgba(12, 11, 9, .58)
        );

    border: 1px solid rgba(190, 160, 95, .28);

    border-radius: 14px;

    box-shadow:
        0 18px 50px rgba(0, 0, 0, .42);

    backdrop-filter: blur(2px);

}


/* ==========================================================
   CONTENU DE LA CARTE
   ========================================================== */

.map-content {

    position: relative;

    flex: 1;

    min-height: 0;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(85, 74, 57, .08),
            rgba(12, 11, 9, .24) 70%
        );

}


/* ==========================================================
   VUE
   ========================================================== */

.map-viewport {

    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    cursor: grab;

    user-select: none;

}


.map-viewport:active {

    cursor: grabbing;

}


/* ==========================================================
   CAMÉRA
   ========================================================== */

.map-camera {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;

}


/* ==========================================================
   SVG
   ========================================================== */

.map-camera svg {

    display: block;

    width: auto;
    height: 96%;

    max-width: none;
    max-height: none;

    filter:
        drop-shadow(
            0 10px 18px rgba(0, 0, 0, .40)
        );

}


/* ==========================================================
   TERRITOIRES
   ========================================================== */

.map-camera path {

    cursor: pointer;

    stroke:
        rgba(218, 175, 77, .75);

    stroke-width: 4;

    stroke-linejoin: round;
    stroke-linecap: round;

    transition:
        fill .25s ease,
        fill-opacity .25s ease,
        stroke .25s ease,
        stroke-width .25s ease,
        filter .25s ease,
        opacity .25s ease;

}


/* ==========================================================
   HOVER
   ========================================================== */

.map-camera path:hover {

    fill-opacity: .46;

    stroke:
        rgba(239, 207, 130, .95);

    filter:
        brightness(1.08)
        drop-shadow(
            0 0 7px rgba(255, 230, 170, .45)
        );

}


/* ==========================================================
   TERRITOIRE SÉLECTIONNÉ
   ========================================================== */

.map-camera path.selected {

    stroke: #d9b66b;

    stroke-width: 5px;

    filter:
        drop-shadow(
            0 0 12px rgba(216, 179, 106, .90)
        )
        brightness(1.10);

}


/* ==========================================================
   TERRITOIRES VOISINS
   ========================================================== */

.map-camera path.neighbour {

    stroke: #76bfff;

    stroke-width: 4px;

    filter:
        drop-shadow(
            0 0 5px rgba(118, 191, 255, .30)
        );

}


/* ==========================================================
   TERRITOIRES ATTAQUABLES
   ========================================================== */

.map-camera path.attackable {

    stroke: #d94b4b;

    stroke-width: 4px;

    animation:
        pulseAttack 1.6s infinite;

}


/* ==========================================================
   ALLIÉS
   ========================================================== */

.map-camera path.ally {

    opacity: 1;

}


/* ==========================================================
   ENNEMIS
   ========================================================== */

.map-camera path.enemy {

    opacity: .48;

}


/* ==========================================================
   ANIMATION ATTAQUE
   ========================================================== */

@keyframes pulseAttack {

    0% {

        filter:
            drop-shadow(
                0 0 4px rgba(217, 75, 75, .60)
            );

    }

    50% {

        filter:
            drop-shadow(
                0 0 14px rgba(217, 75, 75, .95)
            );

    }

    100% {

        filter:
            drop-shadow(
                0 0 4px rgba(217, 75, 75, .60)
            );

    }

}


/* ==========================================================
   NOMS DES TERRITOIRES
   ========================================================== */

.territory-map-label {

    font-family: "Cinzel", serif;

    font-weight: 700;

    fill: #f2ede0;

    pointer-events: none;

    user-select: none;

    paint-order: stroke;

    stroke:
        rgba(20, 17, 13, .90);

    stroke-width: 3px;

}


/* ==========================================================
   PETIT VIGNETTAGE
   ========================================================== */

.map-content::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    box-shadow:
        inset 0 0 90px rgba(0, 0, 0, .42);

}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 900px) {

    .map-container {

        border-radius: 10px;

    }

    .map-camera svg {

        height: 94%;

    }

}


@media (max-width: 600px) {

    .map-container {

        border-radius: 8px;

    }

    .map-camera svg {

        height: 88%;

    }

}