.card-pile {
    width: 12.5%;
    margin-right: 2.08333%;
}

.card {
    background-size: contain;
    will-change: transform;
    -webkit-transform: translate3d(0, 0, 0);
}

#bottom-stacks .card {
    top: 20%;
}

#bottom-stacks .card.facedown {
    top: 9%;
}

#bottom-stacks .stack > .card {
    top: 0;
}

#bottom-stacks .card.facedown > .card {
    top: 9%;
}

.card.back {
    transform: rotateX(180deg);
}

.card.flip {
    animation-name: flip;
    animation-duration: 300ms;

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

@-ms-keyframes flip { 
    from { 
        -ms-transform: rotateY(-180deg); 
    } to { 
        -ms-transform: rotateY(0deg); 
    }
}
@-moz-keyframes flip { 
    from { 
        -moz-transform: rotateY(-180deg); 
    } to { 
        -moz-transform: rotateY(0deg); 
    }
}
@-webkit-keyframes flip { 
    from { 
        -webkit-transform: rotateY(-180deg); 
    } to { 
        -webkit-transform: rotateY(0deg); 
    }
}
@keyframes flip { 
    from { 
        transform: rotateY(-180deg); 
    } to { 
        transform: rotateY(0deg); 
    }
}

#header-stacks .card {
    top: 0;
}

#gameField {
    /*min-height: 150vh; */ /*dimas add 01.10.24*/
    /*padding-bottom: 140px; */ /*dimas add 04.11.24 - t.k. esli mnogo kart v stolbce, to na poslednuyu nelza peremestit kartu*/
}

@media only screen and (max-width: 960px) {
    #gameField {
        padding-bottom: 80px;
    }
}

.stack {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 135%;
}

.hide {
    display: none !important;
}