/* Estils per al quadrat del jugador */
.jugadors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* Amplada mínima de 150px */
    gap: 10px; /* Espai entre quadres */
    padding: 10px; /* Padding del contenidor */
}

.jugador-card {
    border: 1px solid #ccc; /* Vora del quadre */
    border-radius: 5px; /* Vores arrodonides */
    padding: 10px; /* Espai intern */
    text-align: center; /* Centra el text */
    cursor: pointer; /* Canvia el cursor a pointer */
    transition: background-color 0.3s; /* Transició suau */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    .jugador-card:hover {
        background-color: #f0f0f0; /* Color de fons al passar el ratolí */
    }

.dorsal {
    font-size: 1.5em; /* Mida del dorsal */
    font-weight: bold; /* Negreta */
    margin-bottom: 5px; /* Espai inferior */
}

.nom {
    font-size: 1em; /* Mida del nom */
}

/* Estil específic per als botons dels jugadors */
.jugador-card .btn {
    width: 50%; /* Amplada del 50% */
    max-width: 100px; /* Amplada màxima per evitar que es faci massa gran */
    margin: 0 auto; /* Centra el botó dins del quadre */
    padding: 0.25rem 0.5rem; /* Padding reduït */
    font-size: 0.8em; /* Mida de la font reduïda */
}

/* Estils per a les estadístiques i antagònics */
.estadistica-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra horitzontalment */
    justify-content: center; /* Centra verticalment */
    text-align: center; /* Centra el text dins dels contenidors */
    gap: 1rem; /* Espai entre estadística principal i antagònica */
    max-width: 200px; /* Limita l'amplada màxima */
    margin: 0 auto; /* Centra el contenidor */
}

.estadistica-principal,
.estadistica-antagonica {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem; /* Espai entre elements dins de cada estadística */
    padding: 10px; /* Afegir espai intern */
    border: 1px solid #ddd; /* Afegir vora per diferenciar */
    border-radius: 5px; /* Vores arrodonides */
    width: 100%; /* Ocupa tota l'amplada del contenidor */
}

.estadistica-antagonica {
    margin-top: 1rem; /* Afegir un marge superior per separar de l'estadística principal */
    background-color: #f8f9fa; /* Color de fons lleuger per diferenciar */
}

/* Estils específics per a mòbils */
@media (max-width: 600px) {
    .jugadors-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); /* Quadres més petits en mòbils */
        gap: 8px; /* Menys espai entre quadres */
        padding: 8px; /* Menys padding */
    }

    .jugador-card {
        padding: 8px; /* Menys espai intern */
    }

    .dorsal {
        font-size: 1.2em; /* Mida del dorsal reduïda */
    }

    .nom {
        font-size: 0.9em; /* Mida del nom reduïda */
    }

    .jugador-card .btn {
        width: 60%; /* Amplada del 60% en mòbils */
        max-width: 80px; /* Amplada màxima reduïda */
        font-size: 0.75em; /* Mida de la font més petita */
    }

    .estadistica-container {
        width: 100%; /* Ocupa tota l'amplada disponible */
        max-width: none; /* Elimina el límit d'amplada */
    }

    .estadistica-principal,
    .estadistica-antagonica {
        width: 100%; /* Ocupa tota l'amplada disponible */
        padding: 8px; /* Redueix el padding en mòbils */
    }

    .estadistica-antagonica {
        margin-top: 0.75rem; /* Redueix el marge superior en mòbils */
    }
}