/* ==========================================================
   MODAL ATTAQUE
   ========================================================== */

.attack-modal {
    width: 100%;
    max-height: 75vh;
    overflow-y: auto;
    padding: 4px 2px;
}

.attack-section {
    margin-bottom: 24px;
}

.attack-label {
    margin-bottom: 10px;

    color: var(--gold);

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

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

/* ==========================================================
   TERRITOIRE CIBLE
   ========================================================== */

.attack-target {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 18px;
    align-items: center;

    padding: 14px;

    border: 1px solid rgba(190, 160, 95, .22);
    border-radius: 12px;

    background: rgba(255, 255, 255, .025);
}

.attack-target > img {
    width: 150px;
    height: 95px;

    object-fit: cover;

    border-radius: 9px;
    border: 1px solid rgba(190, 160, 95, .25);

    flex-shrink: 0;
}

.attack-target-info {
    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 12px;
    min-width: 0;
}

.attack-target-name {
    font-family: "Cinzel", serif;

    font-size: 1.65rem;
    line-height: 1.15;

    color: #fff;
}

.attack-owner {
    display: flex;
    align-items: center;

    gap: 10px;

    color: #e8dfcf;
    font-size: .95rem;
    font-weight: 600;
}

.attack-owner img {
    width: 34px;
    height: 34px;

    object-fit: contain;

    border: 0;
}

/* ==========================================================
   FACTION DU CAPITAINE
   ========================================================== */

.attack-team-info {
    width: 100%;
}

.attack-team-info .modal-team {
    cursor: default;
}



/* ==========================================================
   CARTE DE FACTION
   ========================================================== */

.modal-team {
    display: flex;
    align-items: center;

    gap: 16px;

    width: 100%;
    padding: 14px 16px;

    border: 1px solid rgba(190, 160, 95, .22);
    border-radius: 10px;

    background: rgba(255, 255, 255, .025);

    cursor: pointer;

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

.modal-team:hover {
    border-color: rgba(190, 160, 95, .6);
    background: rgba(190, 160, 95, .06);
    transform: translateY(-1px);
}

.modal-team.selected {
    border-color: var(--gold);

    background: rgba(190, 160, 95, .12);
}

.modal-team img {
    width: 48px;
    height: 48px;

    object-fit: contain;

    flex-shrink: 0;
}

.modal-team-name {
    font-family: "Cinzel", serif;

    font-size: 1.05rem;
    line-height: 1.2;

    color: #fff;
}

.modal-team-count {
    margin-top: 4px;

    color: #b8b1a4;

    font-size: .82rem;
}

/* ==========================================================
   TERRITOIRE D'ORIGINE
   ========================================================== */

.attack-origin-list {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(150px, 1fr)
    );

    gap: 10px;

    margin-top: 8px;
}

.origin-button {
    width: 100%;

    padding: 11px 14px;

    border: 1px solid rgba(190, 160, 95, .25);
    border-radius: 8px;

    background: #2d2923;

    color: #fff;

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

    cursor: pointer;

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

.origin-button:hover {
    border-color: var(--gold);

    background: rgba(190, 160, 95, .08);

    transform: translateY(-1px);
}

.origin-button.selected {
    border-color: var(--gold);

    background: rgba(190, 160, 95, .18);

    box-shadow:
        0 0 0 1px rgba(190, 160, 95, .15);
}

/* ==========================================================
   MESSAGE D'ERREUR
   ========================================================== */

.attack-error {
    margin-top: 16px;

    padding: 11px 14px;

    border-radius: 8px;

    background: rgba(180, 40, 40, .15);

    border: 1px solid rgba(255, 80, 80, .35);

    color: #ffb3b3;

    font-size: .9rem;
    line-height: 1.4;
}

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

@media (max-width: 640px) {

    .attack-modal {
        max-height: 72vh;
    }

    .attack-target {
        grid-template-columns: 1fr;
    }

    .attack-target > img {
        width: 100%;
        height: 140px;
    }

    .attack-target-name {
        font-size: 1.4rem;
    }

    .attack-origin-list {
        grid-template-columns: 1fr;
    }

}


/* ==========================================================
   REVENDICATION DE TERRITOIRE
   ========================================================== */

.claim-modal p {
    margin: 0 0 22px;
    color: #e6dcc8;
    line-height: 1.6;
}

.claim-team-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.claim-team {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;

    border: 1px solid rgba(190, 160, 95, .25);
    border-radius: 10px;

    background: #2d2923;
    color: #fff;

    cursor: pointer;
    text-align: left;

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

.claim-team:hover {
    border-color: var(--gold);
    background: rgba(190, 160, 95, .08);
    transform: translateY(-1px);
}

.claim-team.selected {
    border-color: var(--gold);
    background: rgba(190, 160, 95, .18);
}

.claim-team img {
    width: 50px;
    height: 50px;

    object-fit: contain;
    flex-shrink: 0;
}

.claim-team span {
    font-family: "Cinzel", serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: #fff;
}

#claim-error {
    margin-top: 18px;
    padding: 12px 16px;

    border-radius: 8px;

    background: rgba(180, 40, 40, .15);
    border: 1px solid rgba(255, 80, 80, .35);

    color: #ffb3b3;
}