/* ==========================================================
   PAGE CONFLITS
========================================================== */

.conflict-page{

    min-height:100vh;

    padding:34px;

    background:
        radial-gradient(
            circle at top,
            rgba(184,156,99,.08),
            transparent 32%
        ),
        var(--campaign-bg);

    color:var(--campaign-text);

}


/* ==========================================================
   HEADER
========================================================== */

.conflict-header{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:30px;

    margin-bottom:28px;

}


.conflict-kicker{

    margin-bottom:8px;

    color:#d8b36a;

    font-size:.68rem;

    letter-spacing:.28em;

    text-transform:uppercase;

}


.conflict-title{

    margin:0;

    font-family:"Cinzel",serif;

    font-size:2rem;

    font-weight:500;

    color:#f2ede0;

}


.conflict-subtitle{

    margin-top:7px;

    color:var(--campaign-muted);

    font-size:.82rem;

}


.conflict-header-actions{

    flex-shrink:0;

}


.conflict-back-button{

    display:inline-flex;

    align-items:center;

    gap:8px;

    min-height:44px;

    padding:0 16px;

    border:1px solid var(--campaign-border-light);

    border-radius:8px;

    color:#ddc385;

    text-decoration:none;

    font-family:"Cinzel",serif;

    font-size:.76rem;

    transition:.2s ease;

}


.conflict-back-button:hover{

    background:rgba(184,156,99,.08);

}


/* ==========================================================
   RESUME
========================================================== */

.conflict-summary{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:12px;

    margin-bottom:24px;

}


.conflict-summary-card{

    display:flex;

    align-items:center;

    gap:14px;

    min-height:84px;

    padding:15px 18px;

    border:1px solid var(--campaign-border);

    border-radius:12px;

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

}


.conflict-summary-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:42px;

    height:42px;

    border:1px solid rgba(184,156,99,.20);

    border-radius:9px;

    background:rgba(184,156,99,.04);

    color:#d8b36a;

    font-size:1.2rem;

}


.conflict-summary-label{

    display:block;

    color:var(--campaign-muted);

    font-size:.62rem;

    letter-spacing:.16em;

}


.conflict-summary-value{

    display:block;

    margin-top:3px;

    font-family:"Cinzel",serif;

    font-size:1.4rem;

    color:#f2ede0;

}


/* ==========================================================
   LISTE
========================================================== */

.conflict-list{

    display:flex;

    flex-direction:column;

    gap:16px;

}


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

.conflict-card{

    overflow:hidden;

    border:1px solid var(--campaign-border);

    border-radius:14px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.025),
            rgba(255,255,255,.01)
        );

    box-shadow:
        0 15px 38px rgba(0,0,0,.18);

    transition:.2s ease;

}


.conflict-card:hover{

    border-color:var(--campaign-border-light);

    box-shadow:
        0 18px 42px rgba(0,0,0,.28);

    transform:translateY(-2px);

}


.conflict-card-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 18px;

    border-bottom:1px solid var(--campaign-border);

}


.conflict-card-number{

    color:var(--campaign-muted);

    font-size:.62rem;

    letter-spacing:.16em;

}


.conflict-status{

    padding:5px 9px;

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

    border-radius:999px;

    font-size:.62rem;

    letter-spacing:.06em;

}


.conflict-status-pending{

    color:#dfbf77;

    border-color:rgba(216,179,106,.28);

    background:rgba(216,179,106,.06);

}


.conflict-status-active{

    color:#e8a56e;

    border-color:rgba(220,140,70,.28);

    background:rgba(220,140,70,.06);

}


.conflict-status-resolved{

    color:#83cf9d;

    border-color:rgba(85,170,105,.28);

    background:rgba(85,170,105,.06);

}


/* ==========================================================
   AFFRONTEMENT
========================================================== */

.conflict-battle{

    display:grid;

    grid-template-columns:1fr 100px 1fr;

    align-items:center;

    padding:26px 30px 22px;

}


.conflict-team{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

}


.conflict-team-emblem{

    width:68px;

    height:68px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid rgba(184,156,99,.22);

    border-radius:12px;

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

}


.conflict-team-emblem img{

    width:52px;

    height:52px;

    object-fit:contain;

}


.conflict-team-emblem span{

    color:#d8b36a;

    font-size:1.8rem;

}


.conflict-team-name{

    margin-top:10px;

    font-family:"Cinzel",serif;

    font-size:1.05rem;

    color:#f2ede0;

}


.conflict-team-role{

    margin-top:4px;

    color:var(--campaign-muted);

    font-size:.58rem;

    letter-spacing:.17em;

}


.conflict-versus{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

}


.conflict-versus-line{

    width:24px;

    height:1px;

    background:rgba(184,156,99,.25);

}


.conflict-versus-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:42px;

    height:42px;

    border:1px solid rgba(216,179,106,.30);

    border-radius:50%;

    background:rgba(216,179,106,.06);

    color:#e2c27c;

    font-size:1.35rem;

}


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

.conflict-territory{

    margin:0 28px;

    padding:16px;

    border-top:1px solid var(--campaign-border);

    border-bottom:1px solid var(--campaign-border);

    text-align:center;

}


.conflict-territory-label{

    color:var(--campaign-muted);

    font-size:.6rem;

    letter-spacing:.2em;

}


.conflict-territory-name{

    margin-top:5px;

    font-family:"Cinzel",serif;

    font-size:1.35rem;

    color:#f2ede0;

}


.conflict-territory-description{

    max-width:650px;

    margin:7px auto 0;

    color:var(--campaign-muted);

    font-size:.73rem;

    line-height:1.5;

}


/* ==========================================================
   FOOTER CARTE
========================================================== */

.conflict-card-footer{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding:15px 18px;

}


.conflict-score{

    display:flex;

    align-items:center;

    gap:28px;

}


.conflict-score-label{

    display:block;

    color:var(--campaign-muted);

    font-size:.58rem;

    letter-spacing:.15em;

}


.conflict-score strong{

    display:block;

    margin-top:3px;

    font-family:"Cinzel",serif;

    font-size:1rem;

    color:#f2ede0;

}


.conflict-score strong span{

    margin:0 5px;

    color:var(--campaign-muted);

}


.conflict-open-button{

    display:inline-flex;

    align-items:center;

    gap:9px;

    min-height:42px;

    padding:0 15px;

    border:1px solid var(--campaign-border-light);

    border-radius:7px;

    color:#dfc381;

    text-decoration:none;

    font-family:"Cinzel",serif;

    font-size:.7rem;

    transition:.2s ease;

}


.conflict-open-button:hover{

    background:rgba(184,156,99,.10);

}


/* ==========================================================
   VIDE
========================================================== */

.conflict-empty{

    min-height:380px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:40px;

    border:1px solid var(--campaign-border);

    border-radius:14px;

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

}


.conflict-empty-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:70px;

    height:70px;

    border:1px solid rgba(184,156,99,.20);

    border-radius:50%;

    color:#d8b36a;

    font-size:1.8rem;

}


.conflict-empty h2{

    margin-top:15px;

    font-family:"Cinzel",serif;

    color:#f2ede0;

}


.conflict-empty p{

    max-width:420px;

    margin:7px 0 18px;

    color:var(--campaign-muted);

    font-size:.76rem;

    line-height:1.5;

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:800px){

    .conflict-page{

        padding:20px;

    }


    .conflict-header{

        align-items:flex-start;

        flex-direction:column;

    }


    .conflict-summary{

        grid-template-columns:1fr;

    }


    .conflict-battle{

        grid-template-columns:1fr;

        gap:18px;

    }


    .conflict-versus{

        transform:rotate(90deg);

    }


    .conflict-card-footer{

        flex-direction:column;

        align-items:stretch;

    }


    .conflict-open-button{

        justify-content:center;

    }

}
/* ==========================================================
   ÉTAT DES CONFLITS DANS LA LISTE
   ========================================================== */

.conflict-card-active {
    opacity: 1;
    filter: none;
}

.conflict-card-resolved {
    opacity: .52;

    filter: saturate(.55);

    transition:
        opacity .25s ease,
        filter .25s ease,
        transform .25s ease;
}

.conflict-card-resolved:hover {
    opacity: .72;
    filter: saturate(.75);
}


/* ==========================================================
   STATUTS
   ========================================================== */

.conflict-card-active .conflict-status {
    font-weight: 600;
}

.conflict-card-resolved .conflict-status {
    opacity: .75;
}


/* ==========================================================
   CARTE ACTIVE
   ========================================================== */

.conflict-card-active {
    border-color: rgba(190, 160, 95, .32);

    box-shadow:
        0 8px 28px rgba(0, 0, 0, .18);
}


/* ==========================================================
   CARTE RÉSOLUE
   ========================================================== */

.conflict-card-resolved {
    border-color: rgba(130, 125, 115, .16);

    box-shadow:
        none;
}

.conflict-card-resolved .conflict-team-emblem,
.conflict-card-resolved .conflict-versus-icon {
    opacity: .65;
}

.conflict-card-resolved .conflict-territory-name,
.conflict-card-resolved .conflict-team-name {
    color: #aaa39a;
}

.conflict-card-resolved .conflict-score strong,
.conflict-card-resolved .conflict-games strong {
    color: #aaa39a;
}
.conflict-card-resolved .conflict-open-button {
    opacity: .65;
}

/* ==========================================================
   ÉTAT DES PARTIES
   ========================================================== */

.conflict-game-card-active {
    opacity: 1;
    border-color: rgba(190, 160, 95, .32);

    box-shadow:
        0 8px 26px rgba(0, 0, 0, .16);
}

.conflict-game-card-disputed {
    opacity: 1;

    border-color: rgba(170, 90, 80, .48);

    box-shadow:
        0 8px 26px rgba(80, 25, 20, .18);
}

.conflict-game-card-played {
    opacity: .48;

    filter: saturate(.55);

    border-color: rgba(130, 125, 115, .14);

    box-shadow: none;

    transition:
        opacity .2s ease,
        filter .2s ease;
}

.conflict-game-card-played:hover {
    opacity: .68;
    filter: saturate(.75);
}


/* ==========================================================
   BADGES D'ACTION
   ========================================================== */

.conflict-game-action-badge {
    display: inline-flex;
    align-items: center;

    padding: 6px 10px;

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

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

    color: var(--gold);

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

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

.conflict-game-action-disputed {
    border-color: rgba(170, 90, 80, .48);

    background: rgba(170, 90, 80, .10);

    color: #dfaaa3;
}


/* ==========================================================
   PARTIE TERMINÉE
   ========================================================== */

.conflict-game-card-played .conflict-game-result-badge,
.conflict-game-card-played .conflict-game-points {
    opacity: .7;
}

.conflict-game-card-played .conflict-game-players {
    color: #a7a197;
}

.conflict-game-card-played .conflict-game-number {
    opacity: .65;
}