.player-background {
    position: relative;
    width: 1081px;
    height: 1921px;
    background-image: url('../../public/assets/img/beat-myteam.jpg'); /* Replace with your background image */
    background-size: cover;
    margin: 0 auto; /* Centering the background */
    overflow: hidden;
}

.offscreen {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

#team-name { /* EXP LANER */
    position: absolute;
    font-size: 40px !important;
    color: white !important;
    top: 450px;  /* Adjust top position */
    left: 90px; /* Adjust left position */
}

/* Style for each player card */
.player-card {
    position: absolute;
    width: 250px; /* Adjust width to match your card size */
    height: 350px; /* Adjust height to match your card size */
    text-align: center;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Dynamic positioning for each player card */
#player-card-1 { /* MID LANER */
    top: 720px;  /* Adjust top position */
    left: 90px; /* Adjust left position */
}

#player-card-2 { /* EXP LANER */
    top: 490px;  /* Adjust top position */
    left: 410px; /* Adjust left position */
}

#player-card-3 { /* JUNGLER */
    top: 720px;  /* Adjust top position */
    right: 90px; /* Adjust right position */
}

#player-card-4 { /* GOLD LANER */
    top: 1140px; /* Adjust top position */
    left: 200px; /* Adjust left position */
}

#player-card-5 { /* ROAMER */
    top: 1140px; /* Adjust top position */
    right: 190px; /* Adjust right position */
}

.player-card img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure the image fits nicely */
    border-radius: 8px;
}