.cards-container{
    width: 100%;
    height: 100%;
}

.player-card, .banker-card, .deck, .trash{
    position: absolute;
    width: 100%;
    height: 100%;
}

.deck-img{
    height: 100%;
    width: 100%;
}

.trash-img{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.animation-card.player{
    z-index: 10001;
}

.animation-card.banker{
    z-index: 10000;
}
.animation-card{
    position: absolute;
    display: none;
    animation: animate-to-place 0.6s linear forwards;
    filter: drop-shadow(0 0.6px 0 rgba(0, 0, 0, .35)) drop-shadow(0 4px 6px rgba(0, 0, 0, .18));
}

.animation-card-third{
    z-index: 10000;
    position: absolute;
    display: block;
    animation: animate-to-place-flip-fade 0.8s linear forwards;
    filter: drop-shadow(0 0.6px 0 rgba(0, 0, 0, .35)) drop-shadow(0 4px 6px rgba(0, 0, 0, .18));
}

.animation-card.animate-to-place{
    display: block;
}

.card-show-card.flip-card-show {
    animation: flip-card-show 0.5s linear forwards;
}
.animation-card.flip-card-hide {
    animation: flip-card-hide 0.5s linear forwards;
}

@keyframes animate-to-place {
    from {
        left: var(--left-start);
        top: var(--top-start);
    }
    to {
        left: var(--left-target);
        top: var(--top-target);
    }
}

/* Animation to flip card after sliding */
@keyframes flip-card-show {
    0% {
        transform: rotateY(180deg) scaleX(1);
        opacity: 1;
    }
    100% {
        transform: rotateY(0deg) scaleX(1);
        opacity: 1;
    }
}

@keyframes flip-card-hide {
    0% {
        background-color: red;
        transform: rotateY(0deg) scaleX(1);
        opacity: 1;
    }
    100% {
        transform: rotateY(180deg) scaleX(1);
        opacity: 0;
    }
}

@keyframes animate-to-place-flip-fade {
    0% {
        left: var(--left-start);
        top: var(--top-start);
        transform: rotateY(-180deg) scaleX(1);
        opacity: 1;
    }
    63% {
        left: calc(var(--left-start) + (var(--left-target) - var(--left-start)) * 0.85);
        top: calc(var(--top-start) + (var(--top-target) - var(--top-start)) * 0.85);
        transform: rotateY(-180deg) scaleX(1);
        opacity: 1;
    }
    78% {
        left: var(--left-target);
        top: var(--top-target);
        transform: rotateY(-90deg) scaleX(0.3);
        opacity: 1;
    }
    95% {
        left: var(--left-target);
        top: var(--top-target);
        transform: rotateY(0deg) scaleX(1);
        opacity: 1;
    }
    100% {
        left: var(--left-target);
        top: var(--top-target);
        transform: rotateY(0deg) scaleX(1);
        opacity: 0;
    }
}

.animate-to-trash{
    position: absolute;
    display: block !important;
    animation: animate-to-trash 0.5s ease forwards;
}

@keyframes animate-to-trash {
    0% {
        left: var(--left-start);
        top: var(--top-start);
        opacity: 1;
    }
    99% {
        left: var(--trash-left);
        top: var(--trash-top);
        opacity: 1;
    }
    100% {
        left: var(--trash-left);
        top: var(--trash-top);
        opacity: 0;
        visibility: hidden;
    }
}