*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#0f172a;
    font-family:Arial, Helvetica, sans-serif;
    color:#fff;
    padding:5px;
}

/* CONTAINER */

.container{
    width:100%;
    max-width:950px;
    margin:auto;
}

/* TOPO */

.topo{
    background:linear-gradient(135deg,#2563eb,#1d4ed8);
    border-radius:14px;
    padding:4px;
    margin-bottom:15px;

    display:flex;
    align-items:center;
    gap:10px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.35);
}

.logo img{
    width:140px;
    border-radius:5px;
}

.info-topo{
    flex:1;
}

.info-topo h1{
    font-size:28px;
    font-weight:900;
    margin-bottom:10px;
}

.stats{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
    align-items:center;
}

.stat{
    background:rgba(255,255,255,.15);
    padding:10px 12px;
    border-radius:10px;
    min-width:150px;
}

.stat-label{
    font-size:12px;
    opacity:.8;
    margin-bottom:2px;
}

.stat-value{
    font-size:20px;
    font-weight:bold;
}

/* CARD */

.card-luta{
    background:#111827;
    border-radius:10px;
    overflow:hidden;
    margin-bottom:4px;

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

    box-shadow:
    0 5px 25px rgba(0,0,0,.3);

    transition:.2s;
}

.card-luta:hover{
    transform:translateY(-3px);
}

/* HEADER */

.card-header{
    background:linear-gradient(90deg,#facc15,#eab308);
    color:#000;

    padding:10px 12px;

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

    font-weight:bold;
}

.categoria{
    font-size:18px;
}

.hora{
    background:#000;
    color:#fff;

    padding:5px 10px;

    border-radius:10px;

    font-size:14px;
}

/* ATLETAS */

.atleta{
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:4px 8px;
}

.atleta-1{
    background:#2563eb;
    color:#FFFFFF;
}

.atleta-2{
    background:#FFFFFF;
    color:#000000;
}

.atleta-info{
    flex:1;
}

.nome{
    font-size:18px;
    font-weight:900;
    margin-bottom:2px;
}

.academia{
    font-size:18px;
    opacity:.9;
}

.status img{
    width:19px;
    height:19px;
}

/* FOOTER CARD */

.card-footer{
    background:#0b1220;

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

    padding:10px 15px;

    font-size:14px;

    color:#cbd5e1;
}

/* RODAPE */

.rodape{
    background:#1e293b;
    padding:18px;
    border-radius:20px;

    text-align:center;

    font-size:18px;
    font-weight:bold;
}

/* RESPONSIVO */

@media(max-width:700px){

    body{
        padding:10px;
    }

    .topo{
        flex-direction:column;
        text-align:center;
    }

    .info-topo h1{
        font-size:28px;
    }

    .stats{
        justify-content:center;
    }

    .nome{
        font-size:20px;
    }

    .atleta{
        padding:15px;
    }

    .card-header{
        flex-direction:column;
        gap:10px;
        text-align:center;
    }

    .card-footer{
        flex-direction:column;
        gap:8px;
        text-align:center;
    }

}