/* ======================================================
   CARTOLA MIL GRAU
   ====================================================== */

.cmg-wrapper{

    max-width:1000px;

    margin:40px auto;

    font-family:Arial,Helvetica,sans-serif;

}

/* ======================================================
   CABEÇALHO
   ====================================================== */

.cmg-header{

    background:#16a34a;

    color:#fff;

    border-radius:18px;

    padding:25px;

    margin-bottom:25px;

    box-shadow:0 10px 25px rgba(0,0,0,.12);

}

.cmg-header h2{

    margin:0;

    font-size:34px;

}

.cmg-info{

    margin-top:12px;

    font-size:18px;

    opacity:.95;

}

/* ======================================================
   CAMPO
   ====================================================== */

.cmg-field{

    position:relative;

    width:100%;

    aspect-ratio:700/1050;

    border-radius:25px;

    overflow:hidden;

    background:
    repeating-linear-gradient(

        180deg,

        #2d9445 0px,

        #2d9445 60px,

        #339e4d 60px,

        #339e4d 120px

    );

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

}

/* LINHAS */

.cmg-field::before{

    content:"";

    position:absolute;

    inset:15px;

    border:3px solid rgba(255,255,255,.75);

    border-radius:10px;

}

/* CÍRCULO CENTRAL */

.cmg-field::after{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    border:3px solid rgba(255,255,255,.7);

    border-radius:50%;

    left:50%;

    top:50%;

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

}

/* LINHA CENTRAL */

.cmg-middle-line{

    position:absolute;

    width:100%;

    height:3px;

    top:50%;

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

}

/* ÁREA SUPERIOR */

.cmg-area-top{

    position:absolute;

    width:45%;

    height:14%;

    left:27.5%;

    top:15px;

    border:3px solid rgba(255,255,255,.7);

}

/* ÁREA INFERIOR */

.cmg-area-bottom{

    position:absolute;

    width:45%;

    height:14%;

    left:27.5%;

    bottom:15px;

    border:3px solid rgba(255,255,255,.7);

}

/* ======================================================
   JOGADORES
   ====================================================== */

.cmg-player{

    position:absolute;

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

    width:120px;

    text-align:center;

}

.cmg-photo{

    width:72px;

    height:72px;

    border-radius:50%;

    background:#fff;

    border:4px solid #fff;

    box-shadow:0 6px 15px rgba(0,0,0,.30);

    transition:.25s;

}

.cmg-photo:hover{

    transform:scale(1.08);

}

.cmg-player-name{

    margin-top:8px;

    color:#fff;

    font-size:15px;

    font-weight:bold;

    text-shadow:0 2px 4px rgba(0,0,0,.7);

}

.cmg-player small{

    display:block;

    color:#fff;

    margin-top:2px;

    font-size:12px;

}

/* ======================================================
   CAPITÃES E RESERVAS
   ====================================================== */

.cmg-section{

    margin-top:35px;

}

.cmg-section h3{

    margin-bottom:15px;

    color:#222;

    font-size:28px;

}

.cmg-list{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(170px,1fr));

    gap:15px;

}

.cmg-item{

    display:flex;

    align-items:center;

    gap:12px;

    background:#fff;

    border-radius:14px;

    padding:14px;

    box-shadow:0 4px 15px rgba(0,0,0,.08);

    transition:.25s;

}

.cmg-item:hover{

    transform:translateY(-3px);

}

.cmg-item img{

    width:45px;

    height:45px;

    border-radius:50%;

}

/* ======================================================
   RESPONSIVO
   ====================================================== */

@media(max-width:900px){

    .cmg-player{

        width:90px;

    }

    .cmg-photo{

        width:58px;

        height:58px;

    }

    .cmg-player-name{

        font-size:13px;

    }

}

@media(max-width:600px){

    .cmg-header h2{

        font-size:26px;

    }

    .cmg-info{

        font-size:15px;

    }

    .cmg-player{

        width:75px;

    }

    .cmg-photo{

        width:48px;

        height:48px;

    }

    .cmg-player-name{

        font-size:11px;

    }

}