/* ==========================================================
   ELYVARA MAP TERRITORIES R1.2
   ========================================================== */


.elyvara-map-territory-layer
{
    position:absolute;
    inset:0;
    z-index:3;

    width:100%;
    height:100%;

    overflow:visible;
    pointer-events:none;
}


.elyvara-map-territory-zone
{
    position:absolute;

    box-sizing:border-box;

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

    border-radius:50%;

    pointer-events:none;
}


/* LIBRE */

.elyvara-map-territory-zone.free
{
    border:4px solid rgba(69, 164, 220, .92);

    background:
        rgba(44, 137, 193, .20);

    box-shadow:
        inset 0 0 45px rgba(45, 137, 193, .13),
        0 0 8px rgba(69, 164, 220, .17);
}


/* OCCUPE */

.elyvara-map-territory-zone.occupied
{
    border:4px solid rgba(211, 79, 69, .94);

    background:
        rgba(176, 52, 44, .23);

    box-shadow:
        inset 0 0 45px rgba(181, 52, 44, .14),
        0 0 8px rgba(211, 79, 69, .17);
}


/* JOUEUR DANS UNE ZONE */

.elyvara-map-territory-zone.inside,
.elyvara-map-territory-zone.capturing
{
    outline:
        4px solid
        rgba(222, 185, 83, .90);

    outline-offset:
        4px;
}


/* VOTRE TERRITOIRE */

.elyvara-map-territory-zone.owned
{
    outline:
        4px solid
        rgba(226, 192, 97, .92);

    outline-offset:
        4px;
}


.elyvara-map-territory-label
{
    position:absolute;

    left:50%;
    top:50%;

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

    max-width:180px;

    padding:4px 7px;

    overflow:hidden;

    border:
        1px solid
        rgba(235, 243, 239, .18);

    border-radius:999px;

    color:#edf5f2;

    background:
        rgba(3, 16, 12, .82);

    box-shadow:
        0 3px 12px
        rgba(0, 0, 0, .28);

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

    text-align:center;

    text-overflow:ellipsis;
    white-space:nowrap;
}


/* ==========================================================
   LEGENDE
   ========================================================== */


.elyvara-map-legend-dot
{
    display:inline-block;

    width:8px;
    height:8px;

    margin-right:5px;

    border-radius:50%;
}


.elyvara-map-legend-dot.purple
{
    background:#a657df;

    box-shadow:
        0 0 8px
        rgba(166, 87, 223, .55);
}


.elyvara-map-legend-dot.blue
{
    background:#489fd4;

    box-shadow:
        0 0 8px
        rgba(72, 159, 212, .45);
}


.elyvara-map-legend-dot.red
{
    background:#cf554c;

    box-shadow:
        0 0 8px
        rgba(207, 85, 76, .45);
}


/* ==========================================================
   PANNEAU SOUS LA CARTE
   ========================================================== */


.elyvara-map-territory-status
{
    margin-top:12px;
    padding:13px 14px;
}


.elyvara-map-territory-summary
{
    display:flex;

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

    gap:12px;
}


.elyvara-map-territory-summary > div
{
    display:grid;
    gap:3px;
}


.elyvara-map-territory-summary strong
{
    color:#dceae5;
    font-size:12px;
}


.elyvara-map-territory-summary span
{
    color:#739187;
    font-size:9px;
}


.elyvara-map-territory-message
{
    margin-top:10px;

    padding:10px 11px;

    border:
        1px solid
        rgba(91, 157, 138, .12);

    border-radius:9px;

    color:#839f95;

    background:
        rgba(3, 17, 13, .43);

    font-size:10px;
}


.elyvara-map-territory-message.inside
{
    color:#dbc278;

    border-color:
        rgba(214, 177, 76, .22);

    background:
        rgba(73, 57, 18, .21);
}


.elyvara-map-territory-message.owned
{
    color:#e0c87f;

    border-color:
        rgba(216, 180, 83, .22);

    background:
        rgba(68, 52, 16, .21);
}


/* ==========================================================
   CAPTURE
   ========================================================== */


.elyvara-map-capture-card
{
    display:flex;

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

    gap:14px;

    margin-top:10px;

    padding:11px 12px;

    border:
        1px solid
        rgba(218, 179, 76, .23);

    border-radius:10px;

    background:
        rgba(67, 51, 14, .24);
}


.elyvara-map-capture-card > div
{
    display:grid;
    gap:2px;
}


.elyvara-map-capture-card small
{
    color:#b99b4f;

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

    letter-spacing:.12em;
}


.elyvara-map-capture-card strong
{
    color:#ead897;
    font-size:13px;
}


.elyvara-map-capture-card span
{
    color:#9b8954;
    font-size:9px;
}


.elyvara-map-capture-card b
{
    color:#e5c86e;
    font-size:17px;
}


.elyvara-map-capture-progress
{
    height:7px;

    margin-top:8px;

    overflow:hidden;

    border-radius:999px;

    background:
        rgba(115, 95, 40, .19);
}


.elyvara-map-capture-progress > span
{
    display:block;

    width:0;
    height:100%;

    border-radius:inherit;

    background:
        linear-gradient(
            90deg,
            #9f7930,
            #e4bd5d
        );

    box-shadow:
        0 0 12px
        rgba(217, 177, 74, .19);

    transition:
        width .6s linear;
}


@media (max-width:700px)
{
    .elyvara-map-territory-status
    {
        padding:11px;
    }


    .elyvara-map-capture-card
    {
        align-items:flex-start;
        flex-direction:column;
    }
}


/* ==========================================================
   FIN ELYVARA MAP TERRITORIES R1.2
   ========================================================== */