body {
    margin:0;
    font-family: Arial;
    background:#eef2f5;
    text-align:center;
}

/* TERRAIN */
.field {
    position:relative;
    width:95%;
    max-width:480px;
    height:500px;
    margin:20px auto;
    border-radius:20px;
    background:linear-gradient(#3cb371,#2e8b57);
    box-shadow:0 10px 25px rgba(0,0,0,0.2);
}

/* ligne centrale */
.field:before{
    content:"";
    position:absolute;
    left:50%;
    width:2px;
    height:100%;
    background:white;
}

/* POSTES */
.position{
    position:absolute;
    width:60px;
    height:60px;
    border-radius:50%;
    transform:translate(-50%,-50%);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:10px;
    font-weight:bold;
    cursor:pointer;
    transition:0.3s;
    background:white;
}

/* états */
.primary{background:#2ecc71;color:white;}
.secondary{background:#f1c40f;color:black;}
.none{background:white;color:#333;border:2px solid #ccc;}

.tag {
    display:inline-block;
    padding:6px 10px;
    border-radius:10px;
    margin:4px;
    font-size:12px;
}

.green{background:#2ecc71;color:white;}
.yellow{background:#f1c40f;}
.white{background:#ecf0f1;}