/* =========================================
   M&B MOBILE
   UNITS.CSS
   UNITÉS ALLIÉES
   Palette beige / blanc cassé
========================================= */


/* =========================================
   CONTENEUR
========================================= */

.soldier {
    position: absolute;

    width: 28px;
    height: 28px;

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

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;

    cursor: pointer;

    user-select: none;

    z-index: 20;
}


/* Désactive les anciens pseudo-éléments */

.soldier::before,
.soldier::after {
    content: none !important;
    display: none !important;
}


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

.unit-icon {
    position: absolute;

    left: 50%;
    top:50%;

    width: 22px;
    height: 24px;

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

    filter:
        drop-shadow(
            1px 2px 1px
            rgba(0, 0, 0, 0.5)
        );
}


/* =========================================
   CORPS
========================================= */

.unit-body {
    position: absolute;

    left: 50%;
    top: 10px;

    width: 18px;
    height: 11px;

    transform:
        translateX(-50%);

    background: #c7c2aa;

    border:
        1px solid #49483f;

    border-radius:
        7px 7px 4px 4px;
}


/* Sac / équipement */

.unit-body::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 3px;

    width: 8px;
    height: 9px;

    transform:
        translateX(-50%);

    background: #918d79;

    border-radius: 2px;
}


/* =========================================
   CASQUE
========================================= */

.unit-helmet {
    position: absolute;

    left: 50%;
    top: 2px;

    width: 14px;
    height: 11px;

    transform:
        translateX(-50%);

    background: #d8d4bd;

    border:
        1px solid #48483f;

    border-radius:
        50% 50% 35% 35%;

    z-index: 3;
}


/* Bord du casque */

.unit-helmet::after {
    content: "";

    position: absolute;

    left: -2px;
    bottom: 0;

    width: 16px;
    height: 3px;

    background: #aaa58f;

    border-radius: 3px;
}


/* =========================================
   ARME
========================================= */

.unit-gun {
    position: absolute;

    left: 16px;
    top: 8px;

    width: 3px;
    height: 21px;

    transform:
        rotate(-15deg);

    transform-origin:
        top center;

    background: #151714;

    border-radius: 1px;

    z-index: 4;
}


/* Partie bois / poignée */

.unit-gun::after {
    content: "";

    position: absolute;

    left: -1px;
    top: 8px;

    width: 5px;
    height: 6px;

    background: #665744;

    border-radius: 1px;
}


/* =========================================
   FANTASSIN
========================================= */

.soldier.rifleman .unit-body {
    background: #c8c3aa;
}

.soldier.rifleman .unit-helmet {
    background: #ddd8c0;
}


/* =========================================
   TIREUR
========================================= */

.soldier.marksman .unit-icon {
    transform:
        translate(-50%, -50%)
        scale(0.95);
}


.soldier.marksman .unit-body {
    background: #b9b6a4;
}


.soldier.marksman .unit-helmet {
    background: #d0cdbb;
}


.soldier.marksman .unit-gun {
    height: 28px;
    width: 2px;

    top: 5px;
}


/* Lunette */

.soldier.marksman .unit-gun::before {
    content: "";

    position: absolute;

    left: -2px;
    top: 8px;

    width: 6px;
    height: 3px;

    background: #080908;

    border-radius: 2px;
}


/* =========================================
   ÉCLAIREUR
========================================= */

.soldier.scout .unit-icon {
    transform:
        translate(-50%, -50%)
        scale(0.85);
}


.soldier.scout .unit-body {
    background: #d2cdb5;
}


.soldier.scout .unit-helmet {
    background: #e1dcc5;
}


.soldier.scout .unit-gun {
    height: 17px;
}


/* =========================================
   MITRAILLEUR
========================================= */

.soldier.gunner .unit-icon {
    transform:
        translate(-50%, -50%)
        scale(1.15);
}


.soldier.gunner .unit-body {
    width: 20px;

    background: #aaa795;
}


.soldier.gunner .unit-helmet {
    background: #c3c0ad;
}


.soldier.gunner .unit-gun {
    width: 4px;
    height: 25px;

    background: #101210;
}


/* =========================================
   UNITÉ SÉLECTIONNÉE
========================================= */

.soldier.selected .unit-icon::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 29px;
    height: 29px;

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

    border:
        1px dashed
        rgba(245, 241, 215, 0.95);

    border-radius: 50%;

    pointer-events: none;

    z-index: -1;
};

.soldier {
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

.soldier:focus,
.soldier:focus-visible,
.soldier:active {
    outline: none;
    box-shadow: none !important;
};

/* =========================================
   SOLDAT À COUVERT
========================================= */

.soldier.in-trench::after {
    content: "🛡️";

    display: block !important;

    position: absolute;
    left: 50%;
    top: -13px;

    transform: translateX(-50%);

    font-size: 10px;
    line-height: 1;

    z-index: 10;

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

    pointer-events: none;
}

/* ==========================================
   MÉDECIN
   ========================================== */

.soldier.medic .unit-helmet {
    position: relative;
}

.soldier.medic::after {
    content: "✚";

    position: absolute;

    left: 50%;
    top: -17px;

    transform: translateX(-50%);

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

    color: #ffffff;

    text-shadow:
        0 1px 2px #000;
}


/* ==========================================
   EFFET DE SOIN
   ========================================== */

.medic-heal-effect {
    position: absolute;

    left: 50%;
    top: -12px;

    transform: translateX(-50%);

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

    pointer-events: none;

    animation:
        medicHeal 0.6s ease-out forwards;
}


@keyframes medicHeal {

    0% {
        opacity: 1;
        transform:
            translate(-50%, 0)
            scale(0.8);
    }

    100% {
        opacity: 0;
        transform:
            translate(-50%, -18px)
            scale(1.3);
    }
}

/* ==========================================
   MÉDECIN
   ========================================== */

.soldier.medic .unit-helmet {
    position: relative;
}

.soldier.medic::after {
    content: "✚";

    position: absolute;

    left: 50%;
    top: -17px;

    transform: translateX(-50%);

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

    color: #ffffff;

    text-shadow:
        0 1px 2px #000;
}


/* ==========================================
   EFFET DE SOIN
   ========================================== */

.medic-heal-effect {
    position: absolute;

    left: 50%;
    top: -12px;

    transform: translateX(-50%);

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

    pointer-events: none;

    animation:
        medicHeal 0.6s ease-out forwards;
}


@keyframes medicHeal {

    0% {
        opacity: 1;
        transform:
            translate(-50%, 0)
            scale(0.8);
    }

    100% {
        opacity: 0;
        transform:
            translate(-50%, -18px)
            scale(1.3);
    }
}

/* =========================================
   MINIGUNNER V2
   Heavy gunner
========================================= */

.soldier.minigunner {
    width: 36px;
    height: 36px;
}


/* CONTENEUR */

.soldier.minigunner .unit-icon {
    width: 34px;
    height: 34px;
}


/* =========================================
   CORPS / ARMURE LOURDE
========================================= */

.soldier.minigunner .unit-body {
    left: 50%;
    top: 10px;

    width: 22px;
    height: 17px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            #30362f 0%,
            #626a5c 45%,
            #454c42 100%
        );

    border: 2px solid #1b201b;

    border-radius: 5px 5px 4px 4px;

    z-index: 3;
}


/* Plaque centrale */

.soldier.minigunner .unit-body::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 4px;

    width: 11px;
    height: 10px;

    transform: translateX(-50%);

    background: #737b69;

    border: 1px solid #252a24;

    border-radius: 2px;
}


/* =========================================
   CASQUE LOURD
========================================= */

.soldier.minigunner .unit-helmet {
    left: 50%;
    top: 0;

    width: 19px;
    height: 13px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            #737b69,
            #464d42
        );

    border: 2px solid #20251f;

    border-radius:
        9px 9px 4px 4px;

    z-index: 7;
}


/* Visière */

.soldier.minigunner .unit-helmet::after {
    content: "";

    position: absolute;

    left: 2px;
    bottom: 1px;

    width: 15px;
    height: 4px;

    background: #171b18;

    border-radius: 2px;

    box-shadow:
        inset 0 1px 0 #899183;
}


/* =========================================
   SAC DE MUNITIONS
========================================= */

.soldier.minigunner .minigun-backpack {
    position: absolute;

    left: -1px;
    top: 11px;

    width: 12px;
    height: 18px;

    background:
        linear-gradient(
            90deg,
            #20251f,
            #50574b
        );

    border: 2px solid #171b17;

    border-radius: 3px;

    z-index: 1;
}


/* =========================================
   MINIGUN
========================================= */

.soldier.minigunner .unit-gun.minigun {
    position: absolute;

    /*
       Le soldat entier tourne déjà vers sa cible.
       L'arme reste donc fixe par rapport au corps.
    */

    left: 19px;
    top: 14px;

    width: 15px;
    height: 10px;

    transform: rotate(90deg);

    transform-origin:
        left center;

    background:
        linear-gradient(
            #777d74,
            #292e2a
        );

    border: 2px solid #151815;

    border-radius: 4px;

    z-index: 8;
}


/* Supprime la poignée du fusil standard */

.soldier.minigunner
.unit-gun.minigun::after {
    display: none;
}


/* =========================================
   BLOC ROTATIF DES CANONS
========================================= */

.soldier.minigunner
.minigun-barrels {
    position: absolute;

    left: 12px;
    top: 1px;

    width: 28px;
    height: 8px;

    background:
        repeating-linear-gradient(
            0deg,
            #111411 0px,
            #111411 1px,
            #777d74 1px,
            #777d74 2px
        );

    border:
        1px solid #101210;

    border-radius:
        2px 5px 5px 2px;

    z-index: 9;
}


/* Anneau avant des canons */

.soldier.minigunner
.minigun-barrels::after {
    content: "";

    position: absolute;

    right: -3px;
    top: -2px;

    width: 5px;
    height: 12px;

    background: #202420;

    border:
        1px solid #0c0e0c;

    border-radius: 2px;
}


/* =========================================
   BOUCHE
========================================= */

.soldier.minigunner
.minigun-muzzle {
    position: absolute;

    left: 39px;
    top: 1px;

    width: 5px;
    height: 8px;

    background: #0d100e;

    border-radius: 1px;

    z-index: 10;
}


/* =========================================
   BANDE DE MUNITIONS
========================================= */

.soldier.minigunner
.minigun-ammo-belt {
    position: absolute;

    left: 7px;
    top: 24px;

    width: 22px;
    height: 9px;

    border-bottom:
        3px dotted #b3a05d;

    transform:
        rotate(-15deg);

    transform-origin:
        left center;

    z-index: 6;
}