:root {
    --home-color: rgb(86, 167, 89);
    /* Example: a shade of green */
    --away-color: rgb(36, 74, 189);
    /* Example: a shade of blue */
    /* You can define any number of variables here */
}

.bg-score-none {
    background-color: #333;
}


.bg-pitch {
    background-color: rgb(64, 125, 77);
}

.btn-switch-team {
    border-radius: 2rem;
    background-color: none;
    color: #1d1d1d;
    padding: 7px 20px;
    font-size: 0.9em;
}

.btn-switch-team.active {
    border-radius: 2rem;
    background-color: rgba(255, 255, 255, 1);
    color: #121212;
    padding: 7px 20px;
}

.btn-switch-group {
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 30px;
    padding: 2px;
    width: fit-content;
    white-space: nowrap;
}

.pitch-container {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 1400px;
}

.team-logo {
    height: 50px;
}


.formation-display.full-pitch {
    background: linear-gradient(to right,
            rgb(64, 125, 77) 0%, rgb(64, 125, 77) 12.5%,
            /* Bande foncée */
            rgb(75, 140, 88) 12.5%, rgb(75, 140, 88) 25%,
            /* Bande claire légèrement plus foncée */
            rgb(64, 125, 77) 25%, rgb(64, 125, 77) 37.5%,
            rgb(75, 140, 88) 37.5%, rgb(75, 140, 88) 50%,
            rgb(64, 125, 77) 50%, rgb(64, 125, 77) 62.5%,
            rgb(75, 140, 88) 62.5%, rgb(75, 140, 88) 75%,
            rgb(64, 125, 77) 75%, rgb(64, 125, 77) 87.5%,
            rgb(75, 140, 88) 87.5%, rgb(75, 140, 88) 100%);
    border-radius: 25px;
    width: 100%;
    aspect-ratio: 1.7 / 1;
    /* Plus large que haut */
    position: relative;
    overflow: hidden;
    padding: 10px 0;
    box-sizing: border-box;
}

.team-title {
    color: white;
    font-size: 1.2em;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    position: absolute;
    top: 5px;
    z-index: 3;
}

.home-team-title {
    left: 2%;
    top: 2%;
    opacity: 30%;
}

.away-team-title {
    right: 2%;
    top: 2%;
    opacity: 30%;
}

.team-title img {
    vertical-align: middle;
}


.pitch-lines {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
}

.pitch-lines::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background-color: rgba(255, 255, 255, 0.3);
    transform: translateX(-50%);
}

.penalty-box {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.3);
    width: 15%;
    height: 44%;
    top: 28%;
}

.penalty-box.left {
    /* Surface de réparation de l'équipe à gauche (home) */
    left: 0;
    border-left: none;
}

.penalty-box.right {
    /* Surface de réparation de l'équipe à droite (away) */
    right: 0;
    border-right: none;
}


.sixmeters-box {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.3);
    width: 5%;
    height: 18%;
    top: 41%;
}

.sixmeters-box.left {
    /* Surface de réparation de l'équipe à gauche (home) */
    left: 0;
    border-left: none;
}

.sixmeters-box.right {
    /* Surface de réparation de l'équipe à droite (away) */
    right: 0;
    border-right: none;
}

.center-circle-boundary {
    position: absolute;
    width: 20%;
    height: 32%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ************************************************************ */
/* Positionnement des lignes de joueurs titulaires sur le terrain DESKTOP (Horizontal) */
/* ************************************************************ */
.player-row {
    display: flex;
    position: absolute;
    box-sizing: border-box;
    padding: 0;

    flex-direction: column;
    /* Empile les joueurs verticalement */
    justify-content: space-around;
    /* Distribue les joueurs verticalement sur la ligne */
    align-items: center;
    /* Centre les joueurs horizontalement dans leur "colonne" */
    height: 100%;
    /* La ligne/colonne de joueurs s'étend sur toute la hauteur du terrain */
    width: auto;
    /* La largeur sera définie par la position latérale et non une largeur fixe */
}

/* HOME TEAM PLAYER ROWS - NOUVELLES POSITIONS */
.desktop-pitch .home-player-row-5[data-line="1"] {
    left: 3%;
}

.desktop-pitch .home-player-row-5[data-line="2"] {
    left: 12%;
}

.desktop-pitch .home-player-row-5[data-line="3"] {
    left: 23%;
}

.desktop-pitch .home-player-row-5[data-line="4"] {
    left: 33%;
}

.desktop-pitch .home-player-row-5[data-line="5"] {
    left: 42%;
}

.desktop-pitch .home-player-row-4[data-line="1"] {
    left: 3%;
}

.desktop-pitch .home-player-row-4[data-line="2"] {
    left: 15%;
}

.desktop-pitch .home-player-row-4[data-line="3"] {
    left: 27%;
}

.desktop-pitch .home-player-row-4[data-line="4"] {
    left: 40%;
}


/* AWAY TEAM PLAYER ROWS - NOUVELLES POSITIONS */
.desktop-pitch .away-player-row-5[data-line="1"] {
    right: 3%;
}

.desktop-pitch .away-player-row-5[data-line="2"] {
    right: 12%;
}

.desktop-pitch .away-player-row-5[data-line="3"] {
    right: 23%;
}

.desktop-pitch .away-player-row-5[data-line="4"] {
    right: 33%;
}

.desktop-pitch .away-player-row-5[data-line="5"] {
    right: 42%;
}

.desktop-pitch .away-player-row-4[data-line="1"] {
    right: 5%;
}

.desktop-pitch .away-player-row-4[data-line="2"] {
    right: 15%;
}

.desktop-pitch .away-player-row-4[data-line="3"] {
    right: 27%;
}

.desktop-pitch .away-player-row-4[data-line="4"] {
    right: 40%;
}


/* ************************************************************ */
/* Styles MUTUALISÉS pour les joueurs (titulaires et remplaçants) */
/* ************************************************************ */
.player {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 5px 0;
}

.player img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: contain;
    background-color: rgb(255, 255, 255, 0.1);
}

.player.mine img.player {
    background-color: rgb(255, 255, 255, 0.6);
}

.player.lineup img.player {
    background-color: rgb(255, 217, 136);
}

.player .player-name {
    color: white;
    font-size: 0.8em;
    text-align: center;
    margin-top: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* max-width: 60px; */
    background-color: rgba(255, 255, 255, 0.1);
    padding: 1px 7px;
    border-radius: 10px;
}

.player .player-name .numero {
    color: rgba(255, 255, 255, 0.5);
    margin-right: 5px;
}

.player .player-score {
    color: white;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 2px;
    border-radius: 20px;
    width: 3rem;
    z-index: 2;
}

.player-avatar-wrapper {
    position: relative;
    /* Parent pour les badges DS */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: -5px;
    /* Rapprocher l'avatar du score/nom */
    /* La taille est définie spécifiquement pour titulaires/remplaçants plus bas */
}

.player-avatar,
.bench-player-avatar {
    /* Styles communs pour les images d'avatar */
    border-radius: 50%;
    object-fit: contain;
    z-index: 1;
    /* En dessous des badges DS */
}

/* Styles spécifiques aux avatars de TITULAIRES */
.desktop-pitch .player-avatar-wrapper,
.mobile-pitch .player-avatar-wrapper {
    /* Titulaires: wrapper autour de l'avatar (desktop/mobile) */
    width: 60px;
    height: 60px;
    /* Taille par défaut pour les titulaires */
}

.desktop-pitch .player-avatar,
.mobile-pitch .player-avatar {
    /* Titulaires: image de l'avatar (desktop/mobile) */
    width: 100%;
    height: 100%;
    /* L'avatar remplit son wrapper */
    background-color: rgba(255, 255, 255, 0.1);
    padding-top: 5px;
}

.bg-color {
    background-color: rgba(255, 255, 255, 0.7);
}

.player-ds-group {
    position: absolute;
    /* Ajustez ces valeurs pour coller au coin supérieur droit de l'avatar */
    top: 0px;
    /* Déplace le groupe légèrement au-dessus du bord supérieur de l'avatar */
    right: 0px;
    /* Déplace le groupe légèrement au-delà du bord droit de l'avatar */

    display: flex;
    flex-direction: row-reverse;
    /* Pour empiler de droite à gauche */
    /* align-items: center; /* Utile si les badges ont des hauteurs différentes, mais ici ils sont fixes */
    z-index: 3;
    /* Le groupe de badges doit être au-dessus de l'avatar et du score */
    /* width: auto; height: auto; -- Géré par le contenu */
}

.player-ds-count {
    position: absolute;
    /* ESSENTIEL : Positionnement absolu par rapport au .player */
    top: -8px;
    /* Ajustez cette valeur pour positionner verticalement, relative à l'image */
    /* right: Xpx est maintenant appliqué inline via PHP */

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

    background-color: white;
    /* Fond blanc comme sur l'image */
    border-radius: 50%;
    width: 20px;
    /* Taille des badges */
    height: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    /* Ombre douce */
    overflow: hidden;

    /* z-index est maintenant appliqué inline via PHP */
    /* margin-left: -10px; -- Plus nécessaire si right est calculé individuellement */
}

/* NOUVEAU/MODIFIÉ: Style de l'image à l'intérieur du badge DS */
.player-ds-count img {
    width: 100%;
    /* L'image prend toute la place du badge */
    height: 100%;
    object-fit: contain;
    /* S'assure que l'icône est entièrement visible */
    /* padding: 3px; */
    /* Ajouter un padding pour que l'icône ne colle pas aux bords du cercle */
}

/* Styles pour le nom du joueur (le lien) */
.player-name-link {
    /* Nouvelle classe pour le lien du nom */
    color: white;
    font-size: 0.8em;
    text-align: center;
    margin-top: 8px;
    /* Ajustez la marge pour le positionnement */
    /* white-space: nowrap; */
    /* overflow: hidden; */
    /* text-overflow: ellipsis; */
    /* max-width: 60px; */
    background-color: rgba(255, 255, 255, 0.15);
    padding: 1px 7px;
    border-radius: 10px;
    display: block;
    /* Pour que max-width et text-align fonctionnent bien */
    text-decoration: none;
    /* Enlever le soulignement du lien */
}

.player-name-link:hover {
    color: #ebebeb;
}

.player .player-name-link .numero {
    color: rgba(255, 255, 255, 0.5);
    margin-right: 5px;
}

/* ... (votre CSS .player.mine img.player devient) ... */
.player.mine .player-avatar {
    /* Cibler la nouvelle classe d'image */
    background-color: rgb(255, 255, 255, 0.6);
}

.player.lineup .player-avatar {
    /* Cibler la nouvelle classe d'image */
    background-color: rgb(255, 217, 136);
}


/* ************************************************************ */
/* Styles pour le BANC DE REMPLAÇANTS (utilise .player-card et des styles spécifiques) */
/* ************************************************************ */
.bench-players {
    width: 100%;
    max-width: 1400px;
    /* Pour s'aligner avec la largeur du terrain */
    background-color: rgb(75, 140, 88);
    padding: 15px;
    border-radius: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.bench-players h3 {
    text-align: center;
    color: #ffffff;
    margin-bottom: 15px;
    font-size: 1.2em;
}

/* Le conteneur qui organise les joueurs en ligne */
.bench-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 50px;
    /* Espace entre les joueurs (ajusté pour la taille des titulaires) */
    padding: 10px 0;
}

/*
Comme les remplaçants sont sur fond blanc, nous devons surcharger
la couleur du texte de leur nom, qui est blanc par défaut.
*/


.bench-list .player .player-name-link .numero {
    color: rgba(255, 255, 255, 0.5);
}

/* Media Query pour ajuster l'espacement sur mobile */
@media (max-width: 768px) {
    .bench-list {
        gap: 25px;
    }
}

/* Styles pour le conteneur des statistiques de match - Révision Complète */
.match-stats-container {
    width: 100%;
    margin-top: 25px;
    background-color: #fff;
    border-radius: 8px;
    padding: 15px;
}

.match-stats-container h5 {
    text-align: center;

    margin-bottom: 20px;
    color: #333;
    font-size: 1.3em;
}

.stat-item {
    display: flex;
    flex-direction: column;
    /* NOUVEAU: Empile le label et la rangée de barres verticalement */
    align-items: center;
    /* NOUVEAU: Centre tout le bloc stat-item horizontalement */
    margin-bottom: 18px;
    /* Plus d'espace entre chaque bloc de stats */
    font-size: 0.9em;
    color: #555;
    width: 100%;
    /* S'assure que chaque item prend toute la largeur */
}

.stat-label-above {
    color: #333;
    /* Couleur plus foncée pour le label principal */
    margin-bottom: 8px;
    /* Espace entre le label et la rangée barre/valeurs */
    /* font-size: 1.1em; */
    text-align: center;
    width: 100%;
    /* Pour centrer le texte */
}

/* Nouveau conteneur pour les valeurs et les barres sur une ligne */
.stat-bar-values-row {
    display: flex;
    /* NOUVEAU: Aligne les valeurs et la barre horizontalement */
    align-items: center;
    /* NOUVEAU: Centre verticalement les éléments dans cette ligne */
    width: 100%;
    /* Prend toute la largeur disponible dans stat-item */
}

.stat-value {
    width: 10%;
    text-align: center;
    color: #333;
    flex-shrink: 0;
    font-size: 1em;
}

/* Style spécifique pour les valeurs de possession (première stat) */
.stat-item:first-child .stat-value.home-value {
    background-color: var(--home-color);
    color: white;
    border-radius: 20px;
    padding: 0;
}

.stat-item:first-child .stat-value.away-value {
    background-color: var(--away-color);
    color: white;
    border-radius: 20px;
    padding: 0;
}

.stat-bar-wrapper {
    flex-grow: 1;
    /* Prend l'espace restant au centre */
    display: flex;
    /* NOUVEAU: Pour aligner les barres internes */
    position: relative;
    /* Pour positionner les barres colorées */
    height: 8px;
    /* Hauteur de la barre */
    border-radius: 20px;
    background-color: #e0e0e0;
    /* Fond neutre pour la barre complète */
    overflow: hidden;
    margin: 0 5px;
    /* Réduit l'espace entre les valeurs et la barre */
}

/* L'ancien .stat-label (si encore dans votre HTML) doit être caché */
.stat-label-center {
    /* Renommé et stylé pour être sur les barres comme dans votre image */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    /* Blanc pour contraster avec les barres */
    white-space: nowrap;
    z-index: 2;
    font-size: 0.85em;
    /* Pas de background ici, le texte est directement sur le dégradé des barres */
}


.stat-bar {
    height: 100%;
    position: absolute;
    top: 0;
    transition: width 0.6s ease-out;
}

.stat-bar.home-bar {
    background-color: var(--home-color);
    right: 0;
    border-top-left-radius: 9px;
    border-bottom-left-radius: 9px;
}

.stat-bar.away-bar {
    background-color: var(--away-color);
    left: 0;
    border-top-right-radius: 9px;
    border-bottom-right-radius: 9px;
}




/* Media Query pour la responsivité */
@media (max-width: 1200px) {
    /* Pour les tablettes et petits écrans */

    .team-logo {
        height: 10vw;
    }

    .team-name {
        font-size: 0.8rem;

        line-height: 0.5em;
    }

    /* Styles pour le TERRAIN MOBILE (s'applique aux éléments dans .mobile-pitch) */
    .mobile-pitch .formation-display.full-pitch {
        aspect-ratio: 1 / 1.7;
        /* Terrain plus haut que large */
        background: linear-gradient(to bottom,
                rgb(64, 125, 77) 0%, rgb(64, 125, 77) 20%,
                rgb(75, 140, 88) 20%, rgb(75, 140, 88) 40%,
                rgb(64, 125, 77) 40%, rgb(64, 125, 77) 60%,
                rgb(75, 140, 88) 60%, rgb(75, 140, 88) 80%,
                rgb(64, 125, 77) 80%, rgb(64, 125, 77) 100%);
        padding: 5px;
        border-radius: 0;
    }

    .mobile-pitch .bench-players {
        border-radius: 0;
    }

    /* Titres des équipes pour terrain mobile */
    .mobile-pitch .team-title {
        font-size: 1.1em;
        top: auto;
        max-width: 90%;
        transform: translateX(-50%);
        left: 50%;
    }

    .mobile-pitch .home-team-title {
        top: 5px;
        left: 50%;
    }

    .mobile-pitch .away-team-title {
        bottom: 5px;
        left: 50%;
        top: auto;
    }

    .mobile-pitch .team-title img {
        height: 35px;
    }

    /* Lignes du terrain mobile */
    .mobile-pitch .pitch-lines::before {
        content: '';
        position: absolute;
        top: 80%;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: rgba(255, 255, 255, 0.3);
        transform: translateY(-50%);
    }

    .mobile-pitch .pitch-lines::after {
        display: none;
    }

    .mobile-pitch .penalty-box {
        width: 70%;
        height: 15%;
        left: 15%;
        top: auto;
    }

    .mobile-pitch .penalty-box.left {
        top: 0;
        border-top: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        border-left: 1px solid rgba(255, 255, 255, 0.3);
    }

    .mobile-pitch .penalty-box.right {
        bottom: 0;
        border-bottom: none;
        border-top: 1px solid rgba(255, 255, 255, 0.3);
    }

    .mobile-pitch .sixmeters-box {
        width: 30%;
        height: 5%;
        left: 35%;
        top: auto;
    }

    .mobile-pitch .sixmeters-box.left {
        top: 0;
        border-top: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        border-left: 1px solid rgba(255, 255, 255, 0.3);
    }

    .mobile-pitch .sixmeters-box.right {
        bottom: 0;
        border-bottom: none;
        border-top: 1px solid rgba(255, 255, 255, 0.3);
    }

    .mobile-pitch .center-circle-boundary {
        width: 35%;
        height: 20%;
        top: 80%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    /* Joueurs titulaires sur terrain mobile (lignes horizontales) */
    .mobile-pitch .player-row {
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        height: auto;
        left: 0;
        right: 0;
        padding: 0 5px;
    }


    .mobile-pitch .player-row-5[data-line="1"] {
        top: 2%;
    }

    .mobile-pitch .player-row-5[data-line="2"] {
        top: 24%;
    }

    .mobile-pitch .player-row-5[data-line="3"] {
        top: 46%;
    }

    .mobile-pitch .player-row-5[data-line="4"] {
        top: 66%;
    }

    .mobile-pitch .player-row-5[data-line="5"] {
        top: 84%;
    }

    .mobile-pitch .player-row-4[data-line="1"] {
        top: 2%;
    }

    .mobile-pitch .player-row-4[data-line="2"] {
        top: 30%;
    }

    .mobile-pitch .player-row-4[data-line="3"] {
        top: 54%;
    }

    .mobile-pitch .player-row-4[data-line="4"] {
        top: 76%;
    }


    /* Ajustements des tailles de joueur (titulaires) pour mobile */
    .mobile-pitch .player-avatar-wrapper {
        width: 10vw;
        height: 10vw;
        min-width: 40px;
        min-height: 40px;
    }

    .mobile-pitch .player-avatar {
        min-width: 10vw;
        min-height: 10vw;
    }

    .mobile-pitch .player-score {
        font-size: 3.4vw;
        max-width: 10vw;
        /* min-width: 65px; */
        padding: 2px 5px;
        margin-top: 3px;
    }

    .mobile-pitch .player-name-link {
        font-size: 2.8vw;
        max-width: 25vw;
        min-width: 50px;
        padding: 1px 4px;
    }

    .mobile-pitch .player-ds-count {
        top: -5px;
        right: -5px;
        width: 18px;
        height: 18px;
    }

    .mobile-pitch .player-ds-count img {
        padding: 2px;
    }



    /********** STATS ************/
    .stat-item {
        margin-bottom: 12px;
        /* Ajuster espacement mobile */
    }

    .stat-label-above {
        font-size: 1em;
        margin-bottom: 5px;
    }

    .stat-bar-values-row {
        font-size: 0.9em;
    }

    .stat-value {
        width: 20%;
        /* Plus de place pour les valeurs */
    }

    .stat-bar-wrapper {
        height: 12px;
        /* Réduire la hauteur de la barre */
    }

    .stat-label-center {
        font-size: 0.7em;
        /* Réduire la taille du label */
        padding: 0 3px;
    }
}

@media (max-width: 480px) {
    .stat-value {
        font-size: 0.9em;
        /* Valeurs numériques plus petites */
        width: 22%;
        /* Peut-être un peu plus de place pour les valeurs */
    }

    .stat-label-above {
        font-size: 0.9em;
        /* Label encore plus petit */
    }
}

@media (max-width: 480px) {

    /* Pour les très petits smartphones */
    .mobile-pitch .formation-display.full-pitch {
        aspect-ratio: 1 / 1.5;
    }

    .mobile-pitch .team-title {
        font-size: 1em;
        max-width: 95%;
    }

    .mobile-pitch .penalty-box {
        width: 60%;
        height: 20%;
        left: 20%;
        top: auto;
    }

    .mobile-pitch .sixmeters-box {
        width: 25%;
        height: 6%;
        left: 37%;
        top: auto;
    }

    .mobile-pitch .center-circle-boundary {
        width: 50%;
        height: 32%;
    }

    /* Joueurs titulaires - redimensionnement plus agressif */
    .player-card .player-avatar-wrapper {
        width: 10vw;
        height: 10vw;
        min-width: 30px;
        min-height: 30px;
    }

    .player-card .player-avatar {
        min-width: 10vw;
        min-height: 10vw;
    }

    .player-card .player-score {
        font-size: 2vw;
        max-width: 15vw;
        min-width: 25px;
    }

    .player-card .player-name-link {
        font-size: 2.2vw;
        max-width: 20vw;
        min-width: 35px;
    }

    .player-card .player-ds-count {
        width: 16px;
        height: 16px;
        top: -4px;
        right: -4px;
    }

    /* Ajustements des positions des lignes pour les très petits écrans */
    /* HOME TEAM PLAYER ROWS - NOUVELLES POSITIONS */
    .mobile-pitch .player-row-5[data-line="1"] {
        top: 2%;
    }

    .mobile-pitch .player-row-5[data-line="2"] {
        top: 24%;
    }

    .mobile-pitch .player-row-5[data-line="3"] {
        top: 46%;
    }

    .mobile-pitch .player-row-5[data-line="4"] {
        top: 66%;
    }

    .mobile-pitch .player-row-5[data-line="5"] {
        top: 83%;
    }

    .mobile-pitch .player-row-4[data-line="1"] {
        top: 2%;
    }

    .mobile-pitch .player-row-4[data-line="2"] {
        top: 30%;
    }

    .mobile-pitch .player-row-4[data-line="3"] {
        top: 54%;
    }

    .mobile-pitch .player-row-4[data-line="4"] {
        top: 76%;
    }



    /* Ajustements du banc sur mobile très petit */
    .mobile-pitch .bench-players {
        width: 100%;
        max-width: 100%;
        padding: 0px;
        margin: 0;
    }

    .bench-player-avatar-wrapper {
        width: 6vw;
        height: 6vw;
        min-width: 25px;
        min-height: 25px;
    }

    .bench-player-avatar {
        min-width: 25px;
        min-height: 25px;
    }

    .bench-player-ds-count {
        width: 14px;
        height: 14px;
        top: -2px;
        right: -2px;
    }

    .bench-player-ds-count img {
        padding: 1px;
    }

    .bench-player .player-score {
        font-size: 0.7em;
    }

    .bench-player .player-name {
        font-size: 0.7em;
    }
}