.battlefield-grass {
    position: absolute;
    width: 18px;
    height: 10px;
    pointer-events: none;
    opacity: 0.45;
    z-index: 1;
}

.battlefield-grass::before,
.battlefield-grass::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 2px;
    height: 9px;
    background: #3f4938;
    transform-origin: bottom;
}

.battlefield-grass::before {
    left: 6px;
    transform: rotate(-25deg);
}

.battlefield-grass::after {
    left: 11px;
    transform: rotate(25deg);
}

.battlefield-rock {
    position: absolute;
    width: 16px;
    height: 11px;
    background: #55594e;
    border: 1px solid #34382f;
    border-radius: 55% 45% 50% 40%;
    box-shadow:
        inset 3px 2px 0 rgba(255, 255, 255, 0.06),
        2px 3px 2px rgba(0, 0, 0, 0.22);
    pointer-events: none;
    opacity: 0.75;
    z-index: 1;
}

.battlefield-log {
    position: absolute;
    width: 55px;
    height: 10px;

    background: #514536;
    border: 1px solid #30291f;
    border-radius: 8px;

    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.06),
        2px 3px 3px rgba(0, 0, 0, 0.25);

    pointer-events: none;
    opacity: 0.85;
    z-index: 1;
}

/* Extrémité coupée du tronc */
.battlefield-log::before {
    content: "";
    position: absolute;

    right: -3px;
    top: 50%;

    width: 10px;
    height: 12px;

    transform: translateY(-50%);

    background: #75634b;
    border: 1px solid #30291f;
    border-radius: 50%;
}

/* Petite branche cassée */
.battlefield-log::after {
    content: "";
    position: absolute;

    left: 17px;
    top: -8px;

    width: 5px;
    height: 13px;

    background: #463a2d;
    border-radius: 3px;

    transform: rotate(35deg);
    transform-origin: bottom;
}

/* =========================================
   TRANCHÉE
========================================= */

.trench {
    position: absolute;

    width: 155px;
    height: 72px;

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

    pointer-events: none;
    z-index: 2;
}


/* Terre retournée autour */
.trench-dirt {
    position: absolute;
    inset: -8px;

    background: #70684d;

    border-radius:
        45% 55% 48% 52% /
        55% 45% 55% 45%;

    box-shadow:
        0 3px 5px rgba(0, 0, 0, 0.25),
        inset 0 0 8px rgba(0, 0, 0, 0.18);
}


/* Fosse */
.trench-hole {
    position: absolute;

    left: 7px;
    right: 7px;
    top: 8px;
    bottom: 8px;

    background: #302e25;

    border: 4px solid #514a37;

    border-radius: 16px;

    box-shadow:
        inset 0 5px 8px rgba(0, 0, 0, 0.65),
        0 0 0 2px #82785a;
}


/* Sol intérieur */
.trench-hole::before {
    content: "";

    position: absolute;

    left: 10px;
    right: 10px;
    top: 8px;
    bottom: 8px;

    background: #494536;

    border-radius: 8px;

    opacity: 0.8;
}


/* Planche centrale */
.trench-plank {
    position: absolute;

    left: 18px;
    right: 18px;

    top: 50%;

    height: 5px;

    transform: translateY(-50%);

    background: #67553c;

    border: 1px solid #342b20;

    box-shadow:
        0 2px 2px rgba(0, 0, 0, 0.35);

    z-index: 2;
}


/* Renforts en bois */
.trench-plank::before,
.trench-plank::after {
    content: "";

    position: absolute;

    width: 5px;
    height: 32px;

    top: 50%;

    transform: translateY(-50%);

    background: #594932;

    border: 1px solid #30271c;
}

.trench-plank::before {
    left: 16px;
}

.trench-plank::after {
    right: 16px;
}

/* =========================================
   PROFONDEUR VISUELLE DE LA TRANCHÉE
========================================= */

/* Les soldats restent au-dessus du fond */
.soldier {
    z-index: 5;
}

/* Terre + fosse derrière les soldats */
.trench-dirt,
.trench-hole {
    z-index: 2;
}

/* Planche au-dessus du fond */
.trench-plank {
    z-index: 3;
}

/* Rebord avant qui passe DEVANT les soldats */
.trench-front {
    position: absolute;

    left: 4px;
    right: 4px;
    bottom: -5px;

    height: 18px;

    background: #756c50;

    border-top: 3px solid #4e4735;

    border-radius:
        20% 25% 45% 40% /
        20% 20% 55% 50%;

    box-shadow:
        0 -3px 4px rgba(0, 0, 0, 0.25),
        inset 0 3px 2px rgba(255, 255, 255, 0.05);

    pointer-events: none;

    /* soldats = 5, donc rebord devant */
    z-index: 6;
}

/* ==========================================
   SACS DE SABLE
========================================== */

.sandbags {
    position: absolute;

    width: 115px;
    height: 45px;

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

    pointer-events: none;

    z-index: 6;
}

.sandbag {
    position: absolute;

    width: 30px;
    height: 13px;

    background: #8b744f;

    border: 2px solid #4f412c;
    border-radius: 45%;

    box-shadow:
        inset 0 -3px 0 rgba(0, 0, 0, 0.25),
        0 2px 3px rgba(0, 0, 0, 0.35);
}

.sandbag-1 {
    left: 5px;
    top: 22px;
}

.sandbag-2 {
    left: 27px;
    top: 22px;
}

.sandbag-3 {
    left: 49px;
    top: 22px;
}

.sandbag-4 {
    left: 71px;
    top: 22px;
}

.sandbag-5 {
    left: 38px;
    top: 10px;
}


/* ==========================================
   BARBELÉS
========================================== */

.barbed-wire {
    position: absolute;

    width: 125px;
    height: 35px;

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

    pointer-events: none;

    z-index: 5;
}

.wire-line {
    position: absolute;

    left: 4px;

    width: 117px;
    height: 2px;

    background: #767676;

    box-shadow:
        0 1px 1px rgba(0, 0, 0, 0.6);
}

.wire-line::before {
    content: "";

    position: absolute;

    left: 8px;
    right: 8px;

    top: -4px;

    height: 8px;

    background:
        repeating-linear-gradient(
            135deg,
            transparent 0px,
            transparent 8px,
            #777 9px,
            #777 10px,
            transparent 11px,
            transparent 18px
        );
}

.wire-line-1 {
    top: 11px;

    transform: rotate(4deg);
}

.wire-line-2 {
    top: 23px;

    transform: rotate(-4deg);
}

.wire-post {
    position: absolute;

    top: 3px;

    width: 4px;
    height: 30px;

    background: #554c3e;

    border: 1px solid #302b24;
}

.wire-post-1 {
    left: 8px;
}

.wire-post-2 {
    left: 60px;
}

.wire-post-3 {
    right: 8px;
}


/* ==========================================
   MINE
========================================== */

.landmine {
    position: absolute;

    width: 30px;
    height: 30px;

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

    pointer-events: none;

    z-index: 4;
}

.landmine-body {
    position: absolute;

    left: 4px;
    top: 8px;

    width: 22px;
    height: 15px;

    background: #41483b;

    border: 2px solid #252a22;

    border-radius: 50%;

    box-shadow:
        0 2px 3px rgba(0, 0, 0, 0.45),
        inset 0 2px 2px rgba(255, 255, 255, 0.08);
}

.landmine-center {
    position: absolute;

    left: 12px;
    top: 11px;

    width: 6px;
    height: 6px;

    background: #262b23;

    border-radius: 50%;
}


/* ==========================================
   EXPLOSION MINE
========================================== */

.mine-explosion {
    position: absolute;

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

    font-size: 50px;

    pointer-events: none;

    z-index: 50;

    animation:
        mineExplosion 0.5s ease-out forwards;
}

@keyframes mineExplosion {

    0% {
        transform:
            translate(-50%, -50%)
            scale(0.4);

        opacity: 1;
    }

    50% {
        transform:
            translate(-50%, -50%)
            scale(1.4);

        opacity: 1;
    }

    100% {
        transform:
            translate(-50%, -50%)
            scale(2);

        opacity: 0;
    }
}


/* ==========================================
   MODE PLACEMENT DÉFENSE
========================================== */

#battlefield.defense-targeting {
    cursor: crosshair;
}

/* ==========================================
   MITRAILLEUSE DÉFENSIVE
   ========================================== */

.defense-machinegun {
    position: absolute;

    width: 90px;
    height: 70px;

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

    pointer-events: auto;
    cursor: pointer;

    z-index: 7;
}


/* ==========================================
   TRÉPIED
   ========================================== */

.mg-tripod {
    position: absolute;

    left: 45px;
    top: 35px;

    width: 4px;
    height: 30px;

    background: #36382f;

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

.mg-tripod::before,
.mg-tripod::after {
    content: "";

    position: absolute;

    left: 1px;
    top: 12px;

    width: 4px;
    height: 25px;

    background: #36382f;

    transform-origin:
        top center;
}

.mg-tripod::before {
    transform:
        rotate(45deg);
}

.mg-tripod::after {
    transform:
        rotate(-45deg);
}


/* ==========================================
   CORPS DE L'ARME
   ========================================== */

.mg-body {
    position: absolute;

    left: 37px;
    top: 18px;

    width: 25px;
    height: 11px;

    background: #292d27;

    border: 2px solid #111;

    border-radius: 3px;

    box-sizing: border-box;
}


/* ==========================================
   CANON
   ========================================== */

.mg-barrel {
    position: absolute;

    left: 58px;
    top: 22px;

    width: 29px;
    height: 4px;

    background: #1d201c;

    border-radius: 0 3px 3px 0;

    transform-origin:
        left center;
}


/* ==========================================
   SIÈGE OPÉRATEUR
   ========================================== */

.mg-seat {
    position: absolute;

    left: 36px;
    top: 49px;

    width: 18px;
    height: 11px;

    background: #554a35;

    border: 2px solid #27231c;

    border-radius: 3px;
}


/* ==========================================
   ÉTAT DE LA MG
   ========================================== */

.mg-status {
    position: absolute;

    left: 50%;
    top: -17px;

    transform:
        translateX(-50%);

    white-space: nowrap;

    font-size: 8px;
    font-weight: bold;

    letter-spacing: 0.5px;

    padding: 2px 4px;

    background:
        rgba(10, 12, 9, 0.85);

    border:
        1px solid #555;

    color:
        #aaa;

    pointer-events: none;
}


/* ==========================================
   MG ACTIVE
   ========================================== */

.defense-machinegun.active
.mg-status {
    color: #9fdb83;

    border-color:
        #638957;
}


/* ==========================================
   MG INACTIVE
   ========================================== */

.defense-machinegun.inactive
.mg-body,
.defense-machinegun.inactive
.mg-barrel {
    opacity: 0.65;
}

.mg-body,
.mg-barrel {
    transition: transform 0.12s linear;
}

/* =========================================
   DOMINATION
========================================= */

.domination-flag {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 1px;
    height: 1px;

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

    z-index: 5;

    pointer-events: none;
}


/* =========================================
   GRANDE ZONE DE CAPTURE
========================================= */

.domination-zone {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 160px;
    height: 160px;

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

    border: 2px dashed rgba(235, 238, 225, 0.7);
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,0.035) 0%,
            rgba(255,255,255,0.015) 50%,
            transparent 72%
        );

    box-sizing: border-box;

    transition:
        border-color 0.2s,
        background 0.2s;

    pointer-events: none;
}


/* =========================================
   PETIT CERCLE CENTRAL
========================================= */

.domination-inner-zone {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 58px;
    height: 58px;

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

    border: 3px dashed rgba(235, 238, 225, 0.75);
    border-radius: 50%;

    opacity: 0.75;

    pointer-events: none;
}


/* =========================================
   DRAPEAU
========================================= */

.flag-pole {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 5px;
    height: 58px;

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

    background:
        linear-gradient(
            90deg,
            #777 0%,
            #ddd 45%,
            #aaa 70%,
            #555 100%
        );

    border: 1px solid #282828;
    border-radius: 3px;

    box-shadow:
        1px 2px 3px rgba(0,0,0,0.4);

    z-index: 3;

    pointer-events: none;
}


/* TISSU */

.flag-cloth {
    position: absolute;

    left: 4px;
    top: 5px;

    width: 31px;
    height: 20px;

    background:
        linear-gradient(
            135deg,
            #777,
            #4e4e4e
        );

    border: 2px solid #292929;

    clip-path: polygon(
        0 0,
        100% 0,
        82% 50%,
        100% 100%,
        0 100%
    );

    box-sizing: border-box;

    transition: background 0.2s;

    pointer-events: none;
}


/* =========================================
   BASE DU DRAPEAU
========================================= */

.flag-base {
    position: absolute;

    left: 50%;
    bottom: -5px;

    width: 30px;
    height: 12px;

    transform: translateX(-50%);

    pointer-events: none;
}

.flag-base span {
    position: absolute;

    bottom: 0;

    width: 10px;
    height: 8px;

    background: #666;

    border: 1px solid #292929;
    border-radius: 50% 50% 35% 35%;
}

.flag-base span:nth-child(1) {
    left: 1px;
    transform: rotate(-20deg);
}

.flag-base span:nth-child(2) {
    left: 10px;
    bottom: -2px;
}

.flag-base span:nth-child(3) {
    right: 1px;
    transform: rotate(20deg);
}


/* =========================================
   HUD SCORE
========================================= */

.domination-score {
    position: absolute;

    left: 50%;
    bottom: 91px;

    transform: translateX(-50%);

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

    min-width: 105px;
    height: 28px;

    padding: 0 15px;

    background:
        linear-gradient(
            180deg,
            rgba(30,32,29,0.96),
            rgba(8,10,8,0.96)
        );

    border: 2px solid #d5d8d0;

    clip-path: polygon(
        8px 0,
        calc(100% - 8px) 0,
        100% 50%,
        calc(100% - 8px) 100%,
        8px 100%,
        0 50%
    );

    box-shadow:
        0 3px 6px rgba(0,0,0,0.5);

    color: white;

    font-size: 12px;
    font-weight: 900;

    letter-spacing: 1px;

    white-space: nowrap;

    z-index: 6;

    pointer-events: none;
}


/* =========================================
   FLÈCHES DU SCORE
========================================= */

.score-arrow {
    position: absolute;

    top: 50%;

    width: 7px;
    height: 7px;

    border-top: 2px solid white;
    border-right: 2px solid white;
}

.score-arrow.left {
    left: 8px;

    transform:
        translateY(-50%)
        rotate(-135deg);
}

.score-arrow.right {
    right: 8px;

    transform:
        translateY(-50%)
        rotate(45deg);
}


/* =========================================
   PETIT POINTEUR SOUS LE SCORE
========================================= */

.domination-pointer {
    position: absolute;

    left: 50%;
    bottom: 74px;

    width: 0;
    height: 0;

    transform: translateX(-50%);

    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 9px solid #eee;

    filter:
        drop-shadow(0 1px 1px rgba(0,0,0,0.8));

    pointer-events: none;
}


/* =========================================
   ÉTATS DU POINT
========================================= */

/* NEUTRE */

.domination-flag.neutral .domination-zone {
    border-color: rgba(235,238,225,0.7);
}

.domination-flag.neutral .flag-cloth {
    background: #707070;
}


/* ALLIÉ */

.domination-flag.allied .domination-zone {
    border-color: rgba(80,220,100,0.95);

    background:
        radial-gradient(
            circle,
            rgba(80,220,100,0.13),
            transparent 70%
        );
}

.domination-flag.allied .domination-inner-zone {
    border-color: rgba(80,220,100,0.85);
}

.domination-flag.allied .flag-cloth {
    background: #4fd266;
}


/* ENNEMI */

.domination-flag.enemy .domination-zone {
    border-color: rgba(230,70,70,0.95);

    background:
        radial-gradient(
            circle,
            rgba(230,70,70,0.13),
            transparent 70%
        );
}

.domination-flag.enemy .domination-inner-zone {
    border-color: rgba(230,70,70,0.85);
}

.domination-flag.enemy .flag-cloth {
    background: #d94b4b;
}


/* CONTESTÉ */

.domination-flag.contested .domination-zone {
    border-color: rgba(255,170,50,0.95);

    background:
        radial-gradient(
            circle,
            rgba(255,170,50,0.14),
            transparent 70%
        );
}

.domination-flag.contested .domination-inner-zone {
    border-color: rgba(255,170,50,0.9);
}

.domination-flag.contested .flag-cloth {
    background: #e5a13a;
}

/* =========================================
   PROPRIÉTAIRE DU SCORE
========================================= */

.domination-flag.score-allied .domination-score {
    border-color: #50dc64;
    color: #72ef83;
}

.domination-flag.score-enemy .domination-score {
    border-color: #e64646;
    color: #ff6868;
}

.domination-flag.score-neutral .domination-score {
    border-color: #d5d8d0;
    color: #ffffff;
}

        /* ==========================================
           OBSTACLES
        ========================================== */

        .map-obstacle {
            position: absolute;

            z-index: 4;

            box-sizing: border-box;

            pointer-events: none;
        }


        /* ==========================================
           BÂTIMENT
        ========================================== */

        .map-obstacle.building {
            background:
                repeating-linear-gradient(
                    45deg,
                    #363936 0px,
                    #363936 12px,
                    #2b2e2b 12px,
                    #2b2e2b 24px
                );

            border: 4px solid #171917;

            box-shadow:
                inset 0 0 0 2px rgba(255, 255, 255, 0.06),
                0 5px 10px rgba(0, 0, 0, 0.45);
        }

        
        /* ==========================================
           MAP 2 — ZONE URBAINE
        ========================================== */

        #battlefield.map-urban {
            overflow: hidden;

            background:
                radial-gradient(
                    circle at 20% 25%,
                    rgba(255, 255, 255, 0.025),
                    transparent 18%
                ),
                radial-gradient(
                    circle at 80% 70%,
                    rgba(0, 0, 0, 0.08),
                    transparent 25%
                ),
                #656760;
        }


        /* ==========================================
           ÉLÉMENTS DE CARTE
        ========================================== */

        .map-decoration {
            position: absolute;
            box-sizing: border-box;
            pointer-events: none;
        }


        /* ==========================================
           ROUTES
        ========================================== */

        .urban-road {
            z-index: 1;

            background:
                linear-gradient(
                    90deg,
                    rgba(255, 255, 255, 0.025),
                    transparent 20%,
                    rgba(0, 0, 0, 0.06) 50%,
                    transparent 80%,
                    rgba(255, 255, 255, 0.025)
                ),
                #303336;

            box-shadow:
                inset 0 0 8px
                    rgba(0, 0, 0, 0.35);
        }


        /* ==========================================
           TROTTOIRS
        ========================================== */

        .urban-sidewalk {
            z-index: 2;

            background:
                repeating-linear-gradient(
                    90deg,
                    #858780 0px,
                    #858780 24px,
                    #777972 25px,
                    #777972 26px
                );

            border:
                1px solid #555750;

            box-shadow:
                inset 0 0 4px
                    rgba(255, 255, 255, 0.08);
        }


        /* ==========================================
           BÂTIMENTS
        ========================================== */

        #battlefield.map-urban
        .map-obstacle.urban-building {
            z-index: 5;

            border:
                4px solid #1c1e1f;

            box-shadow:
                0 6px 10px
                    rgba(0, 0, 0, 0.55),
                inset 0 0 0 2px
                    rgba(255, 255, 255, 0.06);
        }


        /* IMMEUBLE BÉTON */

        #battlefield.map-urban
        .urban-building-1 {
            background:
                repeating-linear-gradient(
                    90deg,
                    transparent 0px,
                    transparent 34px,
                    rgba(0, 0, 0, 0.08) 35px,
                    rgba(0, 0, 0, 0.08) 37px
                ),
                repeating-linear-gradient(
                    0deg,
                    #55595a 0px,
                    #55595a 28px,
                    #4b4f50 29px,
                    #4b4f50 31px
                );
        }


        /* TOIT INDUSTRIEL */

        #battlefield.map-urban
        .urban-building-2 {
            background:
                repeating-linear-gradient(
                    90deg,
                    #484b4d 0px,
                    #484b4d 12px,
                    #3e4143 13px,
                    #3e4143 15px
                );
        }


        /* PETIT BÂTIMENT */

        #battlefield.map-urban
        .urban-building-3 {
            background:
                linear-gradient(
                    135deg,
                    rgba(255, 255, 255, 0.06),
                    transparent 35%
                ),
                #59534b;
        }

    
        /* ==========================================
           MARQUAGES ROUTIERS
        ========================================== */

        .urban-marking {
            z-index: 2;
            opacity: 0.65;

            background:
                #d5d0ad;
        }


        /* ==========================================
           PASSAGES PIÉTONS
        ========================================== */

        .urban-crosswalk {
            z-index: 3;
            opacity: 0.55;
        }


        .urban-crosswalk.horizontal {
            background:
                repeating-linear-gradient(
                    90deg,
                    #d9d9d2 0px,
                    #d9d9d2 7px,
                    transparent 7px,
                    transparent 14px
                );
        }


        .urban-crosswalk.vertical {
            background:
                repeating-linear-gradient(
                    0deg,
                    #d9d9d2 0px,
                    #d9d9d2 7px,
                    transparent 7px,
                    transparent 14px
                );
        }


        /* ==========================================
           PARKING
        ========================================== */

        .urban-parking {
            z-index: 2;

            background:
                repeating-linear-gradient(
                    90deg,
                    transparent 0px,
                    transparent 34px,
                    rgba(
                        230,
                        230,
                        215,
                        0.45
                    ) 35px,
                    rgba(
                        230,
                        230,
                        215,
                        0.45
                    ) 37px
                ),
                rgba(
                    25,
                    27,
                    29,
                    0.32
                );

            border:
                1px solid
                rgba(
                    255,
                    255,
                    255,
                    0.08
                );
        }


        /* ==========================================
           DÉTAILS DES TOITS
        ========================================== */

        .urban-roof-detail {
            z-index: 6;

            border:
                2px solid #202223;

            box-shadow:
                2px 3px 4px
                    rgba(
                        0,
                        0,
                        0,
                        0.45
                    );
        }


        .urban-roof-detail.vent {
            background:
                repeating-linear-gradient(
                    90deg,
                    #777b7c 0px,
                    #777b7c 3px,
                    #4b4e50 4px,
                    #4b4e50 6px
                );
        }


        .urban-roof-detail.ac {
            background:
                repeating-linear-gradient(
                    0deg,
                    #686c6d 0px,
                    #686c6d 4px,
                    #3e4142 5px,
                    #3e4142 7px
                );
        }

    
        /* ==========================================
           OBSTACLES URBAINS
        ========================================== */

        #battlefield.map-urban
        .urban-prop {
            z-index: 5;

            transform-origin: center;

            box-shadow:
                2px 4px 6px
                    rgba(0, 0, 0, 0.55);
        }


        /* ==========================================
           VOITURES ABANDONNÉES
        ========================================== */

        #battlefield.map-urban
        .urban-car {
            border:
                2px solid #17191a;

            border-radius:
                8px 12px 8px 12px;

            background:
                linear-gradient(
                    90deg,
                    #26292b 0%,
                    #44494b 18%,
                    #687074 28%,
                    #687074 72%,
                    #44494b 82%,
                    #26292b 100%
                );

            box-shadow:
                inset 0 0 0 2px
                    rgba(255, 255, 255, 0.05),
                3px 5px 7px
                    rgba(0, 0, 0, 0.55);
        }


        #battlefield.map-urban
        .urban-car::before {
            content: "";

            position: absolute;

            left: 17%;
            top: 20%;

            width: 66%;
            height: 60%;

            border-radius: 4px;

            background:
                linear-gradient(
                    90deg,
                    #182126,
                    #34434a 45%,
                    #182126
                );

            border:
                1px solid
                    rgba(0, 0, 0, 0.7);
        }


        #battlefield.map-urban
        .urban-car::after {
            content: "";

            position: absolute;

            left: 48%;
            top: 18%;

            width: 2px;
            height: 64%;

            background:
                rgba(0, 0, 0, 0.55);
        }


        /* ==========================================
           BARRICADES
        ========================================== */

        #battlefield.map-urban
        .urban-barricade {
            border:
                2px solid #29200f;

            background:
                repeating-linear-gradient(
                    135deg,
                    #c99728 0px,
                    #c99728 10px,
                    #252525 10px,
                    #252525 20px
                );

            box-shadow:
                2px 4px 5px
                    rgba(0, 0, 0, 0.5);
        }


        #battlefield.map-urban
        .urban-barricade::before,
        #battlefield.map-urban
        .urban-barricade::after {
            content: "";

            position: absolute;

            top: 100%;

            width: 6px;
            height: 8px;

            background:
                #242424;
        }


        #battlefield.map-urban
        .urban-barricade::before {
            left: 8px;
        }


        #battlefield.map-urban
        .urban-barricade::after {
            right: 8px;
        }


        /* ==========================================
           BENNES
        ========================================== */

        #battlefield.map-urban
        .urban-dumpster {
            border:
                3px solid #202522;

            border-radius: 3px;

            background:
                repeating-linear-gradient(
                    90deg,
                    #39463f 0px,
                    #39463f 8px,
                    #303b35 9px,
                    #303b35 11px
                );

            box-shadow:
                inset 0 0 0 2px
                    rgba(255, 255, 255, 0.04),
                3px 5px 6px
                    rgba(0, 0, 0, 0.55);
        }


        #battlefield.map-urban
        .urban-dumpster::before {
            content: "";

            position: absolute;

            left: 5px;
            right: 5px;
            top: 5px;

            height: 5px;

            background:
                rgba(0, 0, 0, 0.35);
        }


        /* ==========================================
           DÉBRIS URBAINS
        ========================================== */

        #battlefield.map-urban
        .urban-debris {
            z-index: 3;

            background:
                linear-gradient(
                    35deg,
                    transparent 0%,
                    transparent 18%,
                    #47433e 19%,
                    #47433e 45%,
                    transparent 46%
                ),
                linear-gradient(
                    -25deg,
                    transparent 0%,
                    transparent 35%,
                    #282b2c 36%,
                    #282b2c 68%,
                    transparent 69%
                );

            opacity: 0.85;
        }


        /* ==========================================
           FISSURES DANS LA ROUTE
        ========================================== */

        #battlefield.map-urban
        .urban-road-crack {
            z-index: 2;

            background:
                #191b1c;

            opacity: 0.75;

            transform-origin:
                left center;

            box-shadow:
                8px 3px 0 -1px
                    rgba(
                        20,
                        22,
                        23,
                        0.55
                    );
        }

    
        /* ==========================================
           DEBUG MAP 2
        ========================================== */

        #battlefield.map-urban
        .map-decoration,
        #battlefield.map-urban
        .map-obstacle {
            z-index: 999 !important;
        }


        /* ==========================================
           COUCHES VISUELLES — MAP 2
        ========================================== */

        #battlefield.map-urban
        .urban-road {
            z-index: 1;
        }


        #battlefield.map-urban
        .urban-marking,
        #battlefield.map-urban
        .urban-road-crack {
            z-index: 2;
        }


        #battlefield.map-urban
        .urban-sidewalk,
        #battlefield.map-urban
        .urban-crosswalk,
        #battlefield.map-urban
        .urban-parking {
            z-index: 3;
        }


        #battlefield.map-urban
        .urban-debris {
            z-index: 4;
        }


        #battlefield.map-urban
        .map-obstacle,
        #battlefield.map-urban
        .urban-building,
        #battlefield.map-urban
        .urban-prop {
            z-index: 5;
        }


        #battlefield.map-urban
        .urban-roof-detail {
            z-index: 6;
        }


        #battlefield.map-urban
        .soldier,
        #battlefield.map-urban
        .enemy {
            z-index: 20 !important;
        }


        /* ==========================================
           MAP 1 — ARBRES SOLIDES
        ========================================== */

        #battlefield.map-battlefield
        .map1-tree {
            z-index: 5;

            border: none;

            border-radius: 48%;

            background:
                radial-gradient(
                    circle at 34% 31%,
                    #68764c 0%,
                    #68764c 18%,
                    transparent 19%
                ),
                radial-gradient(
                    circle at 66% 32%,
                    #596942 0%,
                    #596942 21%,
                    transparent 22%
                ),
                radial-gradient(
                    circle at 29% 63%,
                    #4f603b 0%,
                    #4f603b 23%,
                    transparent 24%
                ),
                radial-gradient(
                    circle at 68% 65%,
                    #445537 0%,
                    #445537 25%,
                    transparent 26%
                ),
                radial-gradient(
                    circle at 50% 48%,
                    #5d6d45 0%,
                    #5d6d45 39%,
                    #3b4930 40%,
                    #3b4930 48%,
                    transparent 49%
                );

            box-shadow:
                none;
        }


        #battlefield.map-battlefield
        .map1-tree::before {
            content: "";

            position: absolute;

            left: 50%;
            top: 50%;

            width: 13px;
            height: 13px;

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

            border-radius: 50%;

            background:
                radial-gradient(
                    circle,
                    #6f5638 0%,
                    #4b3827 65%,
                    #30241a 100%
                );

            box-shadow:
                2px 3px 4px
                    rgba(0, 0, 0, 0.45);
        }

    
        /* ==========================================
           MAP 1 — ARBRES
        ========================================== */

        
        /* ==========================================
           MAP 1 — ARBRES
        ========================================== */

        .battlefield-tree {
            position: absolute;

            width: 82px;
            height: 82px;

            z-index: 30;

            pointer-events: none;

            border-radius: 45% 55% 48% 52%;

            background:
                radial-gradient(
                    ellipse at 25% 28%,
                    #718154 0%,
                    #718154 17%,
                    transparent 18%
                ),
                radial-gradient(
                    ellipse at 52% 18%,
                    #526a43 0%,
                    #526a43 22%,
                    transparent 23%
                ),
                radial-gradient(
                    ellipse at 76% 32%,
                    #61784a 0%,
                    #61784a 19%,
                    transparent 20%
                ),
                radial-gradient(
                    ellipse at 20% 57%,
                    #4b623d 0%,
                    #4b623d 23%,
                    transparent 24%
                ),
                radial-gradient(
                    ellipse at 52% 52%,
                    #5d7547 0%,
                    #5d7547 31%,
                    transparent 32%
                ),
                radial-gradient(
                    ellipse at 82% 62%,
                    #405537 0%,
                    #405537 21%,
                    transparent 22%
                ),
                radial-gradient(
                    ellipse at 42% 82%,
                    #455b39 0%,
                    #455b39 23%,
                    transparent 24%
                ),
                radial-gradient(
                    ellipse at 69% 82%,
                    #354b32 0%,
                    #354b32 18%,
                    transparent 19%
                );

            filter:
                drop-shadow(
                    6px
                    8px
                    4px
                    rgba(0, 0, 0, 0.38)
                );
        }


        .battlefield-tree::before {
            content: "";

            position: absolute;

            left: 50%;
            top: 50%;

            width: 10px;
            height: 10px;

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

            border-radius: 40%;

            background:
                #493725;

            box-shadow:
                8px 4px 0 -3px #59432d,
                -7px 5px 0 -3px #59432d,
                3px -8px 0 -3px #59432d;

            z-index: -1;
        }


        .battlefield-tree::after {
            content: "";

            position: absolute;

            left: 18%;
            top: 14%;

            width: 25%;
            height: 18%;

            border-radius: 50%;

            background:
                rgba(157, 171, 108, 0.25);

            transform:
                rotate(-25deg);

            pointer-events: none;
        }

        
        /* ==========================================
           MAP 1 — GROS ROCHERS SOLIDES
        ========================================== */

        .map1-solid-rock {
            position: absolute;

            z-index: 12;

            pointer-events: none;

            border-radius:
                48% 52%
                43% 57%;

            background:
                radial-gradient(
                    ellipse at 32% 27%,
                    #85897c 0%,
                    #85897c 16%,
                    transparent 17%
                ),
                radial-gradient(
                    ellipse at 42% 38%,
                    #73786d 0%,
                    #73786d 38%,
                    transparent 39%
                ),
                radial-gradient(
                    ellipse at 62% 60%,
                    #565c53 0%,
                    #565c53 50%,
                    transparent 51%
                ),
                #646a60;

            box-shadow:
                inset 5px 5px 5px
                    rgba(255, 255, 255, 0.08),
                inset -7px -8px 6px
                    rgba(0, 0, 0, 0.25),
                5px 7px 5px
                    rgba(0, 0, 0, 0.30);

            transform:
                rotate(-8deg);
        }


        .map1-solid-rock::after {
            content: "";

            position: absolute;

            left: 18%;
            top: 20%;

            width: 30%;
            height: 18%;

            border-radius: 50%;

            background:
                rgba(190, 195, 175, 0.15);

            transform:
                rotate(-20deg);
        }

        


        /* ==========================================
           MAP 1 — TRONCS COUCHÉS
        ========================================== */

        .map1-solid-log {
            position: absolute;

            z-index: 14;

            pointer-events: none;

            box-sizing: border-box;

            /* Silhouette irrégulière */
            clip-path: polygon(
                0% 38%,
                5% 30%,
                9% 34%,
                15% 24%,
                22% 29%,
                31% 20%,
                42% 27%,
                53% 19%,
                64% 26%,
                74% 22%,
                83% 31%,
                91% 26%,
                100% 38%,
                96% 48%,
                100% 60%,
                91% 67%,
                83% 62%,
                74% 72%,
                63% 65%,
                52% 75%,
                42% 67%,
                31% 73%,
                21% 65%,
                12% 70%,
                5% 60%,
                0% 63%
            );

            background:
                /* mousse */
                radial-gradient(
                    ellipse at 24% 35%,
                    #65743d 0%,
                    #65743d 10%,
                    transparent 22%
                ),

                radial-gradient(
                    ellipse at 67% 38%,
                    #536638 0%,
                    #536638 9%,
                    transparent 20%
                ),

                radial-gradient(
                    ellipse at 82% 56%,
                    #6a7543 0%,
                    #6a7543 7%,
                    transparent 16%
                ),

                /* écorce claire */
                linear-gradient(
                    174deg,
                    transparent 0%,
                    transparent 22%,
                    rgba(139, 107, 70, 0.65) 24%,
                    rgba(139, 107, 70, 0.65) 37%,
                    transparent 39%,
                    transparent 100%
                ),

                /* écorce sombre */
                linear-gradient(
                    184deg,
                    transparent 0%,
                    transparent 48%,
                    rgba(48, 34, 24, 0.65) 50%,
                    rgba(48, 34, 24, 0.65) 68%,
                    transparent 70%
                ),

                linear-gradient(
                    180deg,
                    #59442f 0%,
                    #71573a 35%,
                    #5a412d 58%,
                    #3d2d22 100%
                );

            filter:
                drop-shadow(
                    4px
                    5px
                    3px
                    rgba(0, 0, 0, 0.32)
                );
        }


        /* ==========================================
           BOIS CASSÉ À GAUCHE
        ========================================== */

        .map1-solid-log::before {
            content: "";

            position: absolute;

            left: 1%;
            top: 29%;

            width: 18%;
            height: 42%;

            background:
                linear-gradient(
                    90deg,
                    #30231a,
                    #75563a
                );

            clip-path: polygon(
                0% 50%,
                22% 10%,
                35% 35%,
                55% 0%,
                68% 38%,
                100% 28%,
                100% 72%,
                70% 62%,
                50% 100%,
                34% 67%,
                15% 92%
            );
        }


        /* ==========================================
           PETITE BRANCHE CASSÉE
        ========================================== */

        .map1-solid-log::after {
            content: "";

            position: absolute;

            left: 58%;
            top: 22%;

            width: 23%;
            height: 18%;

            background:
                linear-gradient(
                    90deg,
                    #4a3626,
                    #684b31
                );

            clip-path: polygon(
                0% 35%,
                62% 35%,
                100% 0%,
                72% 48%,
                100% 78%,
                61% 62%,
                0% 70%
            );
        }