#characteronewraper {
    position: absolute;
    background-image: url('/images/character/one-male.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    
    transition: top 0.3s ease, left 0.3s ease;
    z-index: 1000;
}

#charactertwowraper {
    position: absolute;
    background-image: url(/images/character/two-male.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: top 0.3s ease, left 0.3s ease;
    z-index: 1000;
}

#characterthreewraper {
    position: absolute;
    background-image: url(/images/character/three-male.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: top 0.3s ease, left 0.3s ease;
    z-index: 1000;
}

#characterfourwraper {
    position: absolute;
    background-image: url(/images/character/four-male.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: top 0.3s ease, left 0.3s ease;
    z-index: 1000;
}

#characterfivewraper {
    position: absolute;
    background-image: url(/images/character/five-male.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: top 0.3s ease, left 0.3s ease;
    z-index: 1000;
}

#charactersixwraper {
    position: absolute;
    background-image: url(/images/character/six-male.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: top 0.3s ease, left 0.3s ease;
    z-index: 1000;
}


#characteronewraper.characterGenderfemale {
    position: absolute;
    background-image: url('/images/character/one-female.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: top 0.3s ease, left 0.3s ease;
    z-index: 1000;
}

#charactertwowraper.characterGenderfemale {
    position: absolute;
    background-image: url(/images/character/two-female.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: top 0.3s ease, left 0.3s ease;
    z-index: 1000;
}

#characterthreewraper.characterGenderfemale {
    position: absolute;
    background-image: url(/images/character/three-female.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: top 0.3s ease, left 0.3s ease;
    z-index: 1000;
}

#characterfourwraper.characterGenderfemale {
    position: absolute;
    background-image: url(/images/character/four-female.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: top 0.3s ease, left 0.3s ease;
    z-index: 1000;
}

#characterfivewraper.characterGenderfemale {
    position: absolute;
    background-image: url(/images/character/five-female.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: top 0.3s ease, left 0.3s ease;
    z-index: 1000;
}

#charactersixwraper.characterGenderfemale {
    position: absolute;
    background-image: url(/images/character/six-female.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: top 0.3s ease, left 0.3s ease;
    z-index: 1000;
}


    .characterSize.jump {
        animation: jumpBounce 0.4s ease;
    }

.step-highlight {
    animation: blinkHighlight 1s infinite;
    border-radius: 10px;
    z-index: 999 !important
}

@keyframes blinkHighlight {
    0%, 100% {
        box-shadow: 0 0 0px rgba(255, 255, 0, 0.7);
    }

    50% {
        box-shadow: 0 0 20px 8px rgba(255, 255, 0, 1);
    }
}



@keyframes jumpBounce {

    0% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-35px);
    }

    70% {
        transform: translateY(-15px);
    }

    100% {
        transform: translateY(0);
    }
}


.player-label {
    /*height: 13%;*/
    justify-content: center;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    flex-direction: column;
}


/* Left & Right Player Containers for 16:9 */


#player-left {
    left: 0;
}

#player-right {
    right: 0;
}

/* Top & Bottom Player Containers for 4:3 */
.player-row {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 2000;
}

#player-top {
    top: 0;
}

#player-bottom {
    bottom: 0;
}

/* Individual Player Label Styling */

.player-info {
    display: flex;
    flex-direction: row;
    white-space: nowrap;
    height: 100%;
    border-bottom: 2px solid;
    padding-bottom: 10px;
}

.point-and-nickname {
    display: flex;
    flex-direction: column;
    text-align: center;
    flex: 1;
    background-color: inherit;
  
}

.nickname {
    font-size: 16px;
    text-align: center;
    color: #fff;
    padding: 0;
    display: flex;
    justify-content: left;
    align-items: center;
    flex: 1 1 0;
}

.nickname-text {
    padding: 3px 10px;
    background: #fff;
    font-weight: bold;
    display: flex;
    align-items: center;
}

.points {
    font-size: 20px;
    text-align: center;
    position: relative;
    flex: 6;
}

    .points span {
        position: relative;
        display: flex;
        z-index: 2;
        padding: 3px 5px 4px 5px;
        justify-content: center;
        align-items: center;
        color:#fff !important
    }

.rank {
    font-size: 18px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 100%;
    width: auto;
    line-height: 65px;
}

    .rank span {
        position: relative;
        display: flex;
        z-index: 2;
        justify-content: center;
        align-items: center;
  
        color: #fff;
      
    }

.player-cards {
    display: flex;
    flex-direction: row; /* horizontal */
    gap: 8px;

    justify-content: center;
    flex-wrap: nowrap; /* or wrap if too many cards */
    flex: 1 1 0;
}

.card {
    /**/
    width: 40px;
    height: auto;
    border-radius: 6px;
    overflow: hidden;
    background-color: #222;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    flex-direction: column;
    position: relative;
    overflow: visible;
}

    .card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display:none
    }


.card-code{
    color:#fff
}

.player-cards-small {
    padding: 10px 0 0 5px
}
/*Player left*/
#player-left.widescreenplayer .points:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: calc(100% + 21px);
    background: #30373C;
    left: -25px;
    z-index: 1;
    height: calc(100% - 4px);
}

#player-left.widescreenplayer .rank:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    background: inherit;
    left: 0;
    z-index: 2;
    border-radius: 50%;
}


/*Player right*/
#player-right.widescreenplayer .player-info {
    flex-direction: row-reverse;
}



#player-right.widescreenplayer .points:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: calc(100% + 21px);
    background: #30373C;
    right: -25px;
    z-index: 1;
    height: calc(100% - 4px);
}

#player-right.widescreenplayer .rank:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    background: inherit;
    left: 0;
    z-index: 2;
    border-radius: 50%;
}


/*Player top*/

#player-top.notwidescreenplayer .player-label:not(:nth-child(3)) .points:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: calc(100% + 21px);
    background: #30373C;
    left: -25px;
    z-index: 1;
    height: calc(100% - 4px);
}

#player-top.notwidescreenplayer .player-label:not(:nth-child(3)) .rank:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    background: inherit;
    left: 0;
    z-index: 2;
    border-radius: 50%;
}

#player-top.notwidescreenplayer .player-label:nth-of-type(3) .player-info {
    flex-direction: row-reverse;
}


#player-top.notwidescreenplayer .player-label:nth-of-type(3) .points:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: calc(100% + 21px);
    background: #30373C;
    right: -25px;
    z-index: 1;
    height: calc(100% - 4px);
}

#player-top.notwidescreenplayer .player-label:nth-of-type(3) .rank:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    background: inherit;
    left: 0;
    z-index: 2;
    border-radius: 50%;
}




#player-bottom.notwidescreenplayer .player-label:not(:nth-child(3)) .points:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: calc(100% + 21px);
    background: #30373C;
    left: -25px;
    z-index: 1;

    height: calc(100% - 4px);
}

#player-bottom.notwidescreenplayer .player-label:not(:nth-child(3)) .rank:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    background: inherit;
    left: 0;
    z-index: 2;
    border-radius: 50%;
}

#player-bottom.notwidescreenplayer .player-label:nth-of-type(3) .player-info {
    flex-direction: row-reverse;
}

    

#player-bottom.notwidescreenplayer .player-label:nth-of-type(3) .points:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: calc(100% + 21px);
    background: #30373C;
    right: -25px;
    z-index: 1;
    height: calc(100% - 4px);
}

#player-bottom.notwidescreenplayer .player-label:nth-of-type(3) .rank:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    background: inherit;
    left: 0;
    z-index: 2;
    border-radius: 50%;
}

#player-bottom .player-label {
    flex-direction: column-reverse
}

.player-cards-on-turn{
    display:none
}