/* ==========================================================
   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.webp");

    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%;

    }

}

/* ==========================================================
   CAMPAGNE TERMINÉE
   Les boutons de jeu deviennent inactifs.
   Les contrôles de navigation de carte restent disponibles.
========================================================== */

.campaign-is-finished
.campaign-map-layout button:not(.map-control-button) {

    opacity: .45;

    cursor: not-allowed;

    pointer-events: none;

}


/* Actions de territoire */

.campaign-is-finished
.territory-actions {

    opacity: .45;

}


/* On garde les contrôles de carte */

.campaign-is-finished
.map-controls button {

    opacity: 1;

    cursor: pointer;

    pointer-events: auto;

}

/* ==========================================================
   BANDEAU — CAMPAGNE TERMINÉE
========================================================== */

.campaign-finished-banner {

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

    gap: 14px;

    width: 100%;
    min-height: 64px;

    box-sizing: border-box;

    padding: 10px 24px;
    margin: 0;

    background:
        linear-gradient(
            180deg,
            #352042 0%,
            #281831 100%
        );

    border-top: 1px solid #8d5ca8;
    border-bottom: 1px solid #71458a;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, .45),
        inset 0 1px 0 rgba(255, 255, 255, .04);

    text-align: center;
}


/* ==========================================================
   ICÔNE
========================================================== */

.campaign-finished-banner-icon {
    width: 30px;
    height: 30px;

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

    flex-shrink: 0;

    border: 1px solid rgba(132, 190, 143, .45);
    border-radius: 50%;

    background: #262d27;

    color: #9bd0a5;

    font-size: .85rem;
}


/* ==========================================================
   CONTENU
========================================================== */

.campaign-finished-banner > div {

    display: flex;

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

    flex-direction: column;

    gap: 2px;

    text-align: center;

}


/* ==========================================================
   TITRE
========================================================== */

.campaign-finished-banner strong {

    color: #f1d8ff;

    font-family: "Cinzel", serif;

    font-size: .76rem;
    font-weight: 600;

    letter-spacing: .18em;
    text-transform: uppercase;
}




/* ==========================================================
   SOUS-TEXTE
========================================================== */
.campaign-finished-banner span:not(.campaign-finished-banner-icon) {

    color: #d0b9da;

    font-size: .64rem;

    line-height: 1.4;
}

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

@media (max-width: 700px) {

    .campaign-finished-banner {

        gap: 10px;

        min-height: 62px;

        padding: 8px 14px;

    }

    .campaign-finished-banner-icon {

        width: 27px;
        height: 27px;

    }

    .campaign-finished-banner strong {

        font-size: .65rem;

    }

    .campaign-finished-banner span:not(.campaign-finished-banner-icon) {

        font-size: .58rem;

    }

}

/* ==========================================================
   BANDEAU MERCENAIRES
========================================================== */

.campaign-mercenary-banner {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 18px;

    margin: 0 12px 12px;

    padding: 14px 20px;

    border: 1px solid rgba(150, 35, 35, .75);
    border-radius: 8px;

    background:
        linear-gradient(
            90deg,
            rgba(110, 20, 20, .88),
            rgba(145, 30, 30, .72),
            rgba(110, 20, 20, .88)
        );

    box-shadow:
        0 4px 18px rgba(0, 0, 0, .28),
        inset 0 1px 0 rgba(255,255,255,.05);

    color: inherit;
    text-decoration: none;

    text-align: center;

    cursor: pointer;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .15s ease;
}

.campaign-mercenary-banner:hover {
    border-color: rgba(210, 70, 70, .95);

    background:
        linear-gradient(
            90deg,
            rgba(125, 22, 22, .94),
            rgba(165, 35, 35, .80),
            rgba(125, 22, 22, .94)
        );

    transform: translateY(-1px);
}


/* ==========================================================
   ICÔNE
========================================================== */

.campaign-mercenary-banner-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    border: 1px solid rgba(255, 220, 190, .30);
    border-radius: 7px;

    background: rgba(0,0,0,.15);

    color: #f0c7b2;

    font-size: 1.15rem;
}


/* ==========================================================
   CONTENU
========================================================== */

.campaign-mercenary-banner-content {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 4px;

    flex: 1;
}

.campaign-mercenary-banner-content strong {
    color: #fff1e8;

    font-family: "Cinzel", serif;
    font-size: .86rem;
    font-weight: 600;

    letter-spacing: .04em;
}

.campaign-mercenary-banner-content span {
    color: #f1d8cc;

    font-size: .68rem;
    line-height: 1.45;
}


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

@media (max-width: 700px) {

    .campaign-mercenary-banner {
        flex-direction: column;

        gap: 10px;

        padding: 16px;
    }

    .campaign-mercenary-banner-content {
        width: 100%;
    }
}

@media (max-width: 700px) {

    .map-container {

        width: 100%;

        height: 100%;

        border-radius: 8px;

    }

    .map-camera svg {

        height: 94%;

    }

}

/* ==========================================================
   GESTION DES GESTES TACTILES DE LA CARTE
   ========================================================== */

.map-viewport {
    touch-action: none;
    overscroll-behavior: contain;
    user-select: none;
    -webkit-user-select: none;
}

/* ==========================================================
   CONFLITS SUR LA CARTE
========================================================== */

.conflict-boundary {
    fill: none;

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

    pointer-events: none;
}


/* Halo */

.conflict-boundary-attacker,
.conflict-boundary-defender {
    stroke: rgba(255, 82, 58, .55);

    stroke-width: 12;

    filter:
        drop-shadow(
            0 0 8px rgba(255, 70, 45, .95)
        );

    animation:
        conflictBoundaryPulse 1.8s ease-in-out infinite;
}


/* Trait central */

.conflict-boundary-defender {
    stroke: rgba(239, 190, 92, .95);

    stroke-width: 5;

    filter:
        drop-shadow(
            0 0 5px rgba(239, 190, 92, .90)
        );
}


/* ==========================================================
   MARQUEURS DE CONFLIT
========================================================== */

.conflict-marker-group {
    pointer-events: auto;
    cursor: pointer;

    transition:
        filter .18s ease;
}


/* ==========================================================
   GROSSISSEMENT DU MARQUEUR
========================================================== */

.conflict-marker-group .conflict-marker-emblem,
.conflict-marker-group .conflict-marker-halo {
    transition:
        transform .18s ease;

    transform-box: fill-box;
    transform-origin: center;
}


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

.conflict-marker-group:hover {
    filter:
        drop-shadow(
            0 0 10px rgba(239, 190, 92, .85)
        );
}

.conflict-marker-group:hover .conflict-marker-emblem {
    transform: scale(1.18);
}

.conflict-marker-group:hover .conflict-marker-halo {
    transform: scale(1.22);
}


/* ==========================================================
   CONFLIT SÉLECTIONNÉ
   Reste dans le même état que le hover
========================================================== */

.conflict-marker-group.is-selected {
    filter:
        drop-shadow(
            0 0 10px rgba(239, 190, 92, .85)
        );
}

.conflict-marker-group.is-selected .conflict-marker-emblem {
    transform: scale(1.18);
}

.conflict-marker-group.is-selected .conflict-marker-halo {
    transform: scale(1.22);
}


/* ==========================================================
   HALO
========================================================== */

.conflict-marker-halo {
    fill: rgba(190, 42, 32, .16);

    stroke: rgba(239, 190, 92, .32);

    stroke-width: 2;

    filter:
        drop-shadow(
            0 0 9px rgba(255, 70, 45, .65)
        );
}


/* Halo renforcé au hover OU à la sélection */

.conflict-marker-group:hover .conflict-marker-halo,
.conflict-marker-group.is-selected .conflict-marker-halo {
    fill: rgba(190, 42, 32, .28);

    stroke: rgba(239, 190, 92, .65);

    filter:
        drop-shadow(
            0 0 13px rgba(255, 70, 45, .85)
        );
}


/* ==========================================================
   CERCLES DES EMBLÈMES
========================================================== */

.conflict-marker-emblem {
    fill: rgba(12, 10, 8, .92);

    stroke-width: 2;
}


/* ==========================================================
   ATTAQUANT
========================================================== */

.conflict-marker-attacker {
    stroke: #d94b3f;

    filter:
        drop-shadow(
            0 0 6px rgba(217, 75, 63, .85)
        );
}


/* ==========================================================
   DÉFENSEUR
========================================================== */

.conflict-marker-defender {
    stroke: #d8b46a;

    filter:
        drop-shadow(
            0 0 6px rgba(216, 180, 106, .75)
        );
}


/* ==========================================================
   ÉPÉES
========================================================== */

.conflict-marker-swords {
    fill: #f2ede0;

    font-family:
        "Segoe UI Symbol",
        "Noto Sans Symbols",
        sans-serif;

    font-weight: 700;

    paint-order: stroke;

    stroke: rgba(20, 16, 12, .95);

    stroke-width: 2;
}


/* ==========================================================
   BADGE
========================================================== */

.conflict-marker-badge {
    fill: rgba(28, 23, 17, .96);

    stroke: rgba(216, 180, 106, .85);

    stroke-width: 1.5;
}


/* ==========================================================
   NUMÉRO
========================================================== */

.conflict-marker-number {
    fill: #e8d5a7;

    font-family:
        "Cinzel",
        serif;

    font-size: 0.9em;

    font-weight: 700;

    pointer-events: none;

    paint-order: stroke;

    stroke: rgba(20, 16, 12, .95);

    stroke-width: 1.5;
}

/* Cercles des emblèmes */

.conflict-marker-emblem {
    fill: rgba(12, 10, 8, .92);

    stroke-width: 2;
}


/* Attaquant */

.conflict-marker-attacker {
    stroke: #d94b3f;

    filter:
        drop-shadow(
            0 0 6px rgba(217, 75, 63, .85)
        );
}


/* Défenseur */

.conflict-marker-defender {
    stroke: #d8b46a;

    filter:
        drop-shadow(
            0 0 6px rgba(216, 180, 106, .75)
        );
}


/* Épées */

.conflict-marker-swords {
    fill: #f2ede0;

    font-family:
        "Segoe UI Symbol",
        "Noto Sans Symbols",
        sans-serif;

    font-weight: 700;

    paint-order: stroke;

    stroke: rgba(20, 16, 12, .95);

    stroke-width: 2;
}


/* Badge #12 */

.conflict-marker-badge {
    fill: rgba(28, 23, 17, .96);

    stroke: rgba(216, 180, 106, .85);

    stroke-width: 1.5;
}


.conflict-marker-number {
    fill: #e8d5a7;

    font-family:
        "Cinzel",
        serif;

    font-size: 0.9em;

    font-weight: 700;

    pointer-events: none;

    paint-order: stroke;

    stroke: rgba(20, 16, 12, .95);

    stroke-width: 1.5;
}


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

@keyframes conflictBoundaryPulse {

    0% {
        opacity: .65;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: .65;
    }

}

/* =========================================================
   PANNEAU TERRITOIRE — APPARITION AU CLIC
   ========================================================= */

.territory-panel {
    opacity: 0;
    transform: translateX(18px);
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        visibility 0s linear 0.25s;
}

.territory-panel.is-visible {
    opacity: 1;
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        visibility 0s;
}

/* ==========================================================
   LAYOUT CARTE
   ========================================================== */

.campaign-map-layout {
    grid-template-columns:
        220px
        minmax(0, 1fr)
        0;

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


/* ==========================================================
   ZONE CENTRALE
   ========================================================== */

.campaign-map-layout > section {
    min-width: 0;
    min-height: 0;
    height: 100%;
}


/* ==========================================================
   PANNEAU DROIT FERMÉ
   ========================================================== */

.campaign-map-layout > aside:last-child {
    width: 0;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}


/* ==========================================================
   PANNEAU DROIT OUVERT
   ========================================================== */

.campaign-map-layout:has(.territory-panel.is-visible) {
    grid-template-columns:
        220px
        minmax(0, 1fr)
        280px;
}

.campaign-map-layout:has(.territory-panel.is-visible) > aside:last-child {
    width: auto;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
}


/* ==========================================================
   CARTE — PLEINE HAUTEUR
   ========================================================== */

.map-container {
    height: 100%;
    min-height: 0;
}

.map-content {
    height: 100%;
    min-height: 0;
}

.map-viewport {
    height: 100%;
    min-height: 0;
}


/* ==========================================================
   ANIMATION DU PANNEAU
   ========================================================== */

.territory-panel {
    opacity: 0;
    transform: translateX(20px);
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity .25s ease,
        transform .25s ease,
        visibility 0s linear .25s;
}

.territory-panel.is-visible {
    opacity: 1;
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;

    transition:
        opacity .25s ease,
        transform .25s ease,
        visibility 0s;
}

.territory-header {
    position: relative;
}

.territory-close {
    position: absolute;
    top: 0;
    right: 0;

    width: 30px;
    height: 30px;

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

    padding: 0;

    background: rgba(216, 180, 106, 0.06);
    border: 1px solid rgba(216, 180, 106, 0.25);
    border-radius: 6px;

    color: #d8b46a;
    font-size: 22px;
    line-height: 1;

    cursor: pointer;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .2s ease;
}

.territory-close:hover {
    background: rgba(216, 180, 106, 0.15);
    border-color: rgba(216, 180, 106, 0.5);
    color: #f0d99b;
    transform: scale(1.05);
}



/* ==========================================================
   MOBILE — PANNEAU TERRITOIRE / CONFLIT
   ========================================================== */

@media (max-width: 700px) {

    /*
     * Par défaut, la colonne droite n'existe pas.
     */
    .campaign-map-layout > aside:last-child {
        display: none !important;
        width: 100%;
        height: 0;
        min-height: 0;
        max-height: 0;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    /*
     * Lorsqu'un territoire ou un conflit est ouvert,
     * on réactive complètement la colonne.
     */
    .campaign-map-layout:has(
        > aside:last-child .territory-panel.is-visible
    ) > aside:last-child {
        display: block !important;
        width: 100%;
        height: auto;
        min-height: 0;
        max-height: none;
        margin: 0;
        padding: 0;
        overflow: visible;
    }

}