.stack-holder {
    justify-content: center;
    gap: calc(15px * var(--canvas-scale));
}
.stack-holder > div {
    position: relative;
    /*flex: 1 1 auto;*/
    flex: 0 1 calc(130px * var(--canvas-scale));

    /* TODO verify this below if it works in al lcases ->
        but because we changed cards to relative, once they're selected, they otherwise increase the width of their container, which is a flex item
     */
    width: calc(130px * var(--canvas-scale));
}

.stack-holder .stack {
    position: relative;

    background: rgba(0, 0, 0, 0.1);
    border-radius: calc(7px * var(--canvas-scale));
    height: calc(184px * var(--canvas-scale));
}
/*.stack-holder .stack:is(#pile_clubs, #pile_hearts, #pile_spades, #pile_diamonds):after {*/ /* Not IE supported, so rather do old way*/
.stack-holder .stack.has-overlay-image:before {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    opacity: 0.7;
}
.stack-holder .stack.clubs:before {
    background: url('../images/misc/clubs_single.png') center center no-repeat;
    background-size: 50% auto;
}
.stack-holder .stack.hearts:before {
    background: url('../images/misc/hearts_single.png') center center no-repeat;
    background-size: 50% auto;
}
.stack-holder .stack.spades:before {
    background: url('../images/misc/spades_single.png') center center no-repeat;
    background-size: 50% auto;
}
.stack-holder .stack.diamonds:before {
    background: url('../images/misc/diamonds_single.png') center center no-repeat;
    background-size: 50% auto;
}
.stack-holder .stack.colliding,
.stack-holder .stack.colliding > :last-child{
    box-shadow: calc(3px * var(--canvas-scale)) calc(3px * var(--canvas-scale)) calc(10px * var(--canvas-scale)) rgba(255,255,0, 0.7);
}
.stack-holder #empty_pile1.stack {
    background: none;
    pointer-events: none;
}

.stack-holder .stack.no-offset .card {
    position: absolute;

    /*
        negate offsets from relative vertical stacks
    */
    top: 0 !important;
    margin-top: 0 !important;
}
/*
.stack-holder .stack .card:hover {
    cursor: pointer;
    box-shadow: 3px 3px 10px rgba(0,0,0, 0.5);
    transform: scale(1.03) translate(0, -5px);
}
*/

/* card stack offsets logic below */
/* Option 1 -> (ORIGINAL) using absolute positioning, same distance between all cards*/
/*
.stack-holder .stack .card {
    position: absolute;
}
.stack-holder .stack .card:nth-of-type(1) {
    top: calc(var(--offset-per-card) * 0);
}
.stack-holder .stack .card:nth-of-type(2) {
    top: calc(var(--offset-per-card) * 1);
}
.stack-holder .stack .card:nth-of-type(3) {
    top: calc(var(--offset-per-card) * 2);
}
.stack-holder .stack .card:nth-of-type(4) {
    top: calc(var(--offset-per-card) * 3);
}
.stack-holder .stack .card:nth-of-type(5) {
    top: calc(var(--offset-per-card) * 4);
}
.stack-holder .stack .card:nth-of-type(6) {
    top: calc(var(--offset-per-card) * 5);
}
.stack-holder .stack .card:nth-of-type(7) {
    top: calc(var(--offset-per-card) * 6);
}
.stack-holder .stack .card:nth-of-type(8) {
    top: calc(var(--offset-per-card) * 7);
}
.stack-holder .stack .card:nth-of-type(9) {
    top: calc(var(--offset-per-card) * 8);
}
.stack-holder .stack .card:nth-of-type(10) {
    top: calc(var(--offset-per-card) * 9);
}
.stack-holder .stack .card:nth-of-type(11) {
    top: calc(var(--offset-per-card) * 10);
}
.stack-holder .stack .card:nth-of-type(12) {
    top: calc(var(--offset-per-card) * 11);
}
.stack-holder .stack .card:nth-of-type(13) {
    top: calc(var(--offset-per-card) * 12);
}
.stack-holder .stack .card:nth-of-type(14) {
    top: calc(var(--offset-per-card) * 13);
}
.stack-holder .stack .card:nth-of-type(15) {
    top: calc(var(--offset-per-card) * 14);
}
.stack-holder .stack .card:nth-of-type(16) {
    top: calc(var(--offset-per-card) * 15);
}
.stack-holder .stack .card:nth-of-type(17) {
    top: calc(var(--offset-per-card) * 16);
}
.stack-holder .stack .card:nth-of-type(18) {
    top: calc(var(--offset-per-card) * 17);
}
.stack-holder .stack .card:nth-of-type(19) {
    top: calc(var(--offset-per-card) * 18);
}
.stack-holder .stack .card:nth-of-type(20) {
    top: calc(var(--offset-per-card) * 19);
}*/

/* Option 2 -> using relative positions, depending on if card before them is up or down facing */

.stack-holder .stack .card {
    position: relative;
}

.stack-holder .stack .card:nth-of-type(1) {
    top: calc(var(--offset-per-card-relative) * 0);
}
.stack-holder .stack .card:nth-of-type(2) {
    top: calc(var(--offset-per-card-relative) * 1);
}
.stack-holder .stack .card:nth-of-type(3) {
    top: calc(var(--offset-per-card-relative) * 2);
}
.stack-holder .stack .card:nth-of-type(4) {
    top: calc(var(--offset-per-card-relative) * 3);
}
.stack-holder .stack .card:nth-of-type(5) {
    top: calc(var(--offset-per-card-relative) * 4);
}
.stack-holder .stack .card:nth-of-type(6) {
    top: calc(var(--offset-per-card-relative) * 5);
}
.stack-holder .stack .card:nth-of-type(7) {
    top: calc(var(--offset-per-card-relative) * 6);
}
.stack-holder .stack .card:nth-of-type(8) {
    top: calc(var(--offset-per-card-relative) * 7);
}
.stack-holder .stack .card:nth-of-type(9) {
    top: calc(var(--offset-per-card-relative) * 8);
}
.stack-holder .stack .card:nth-of-type(10) {
    top: calc(var(--offset-per-card-relative) * 9);
}
.stack-holder .stack .card:nth-of-type(11) {
    top: calc(var(--offset-per-card-relative) * 10);
}
.stack-holder .stack .card:nth-of-type(12) {
    top: calc(var(--offset-per-card-relative) * 11);
}
.stack-holder .stack .card:nth-of-type(13) {
    top: calc(var(--offset-per-card-relative) * 12);
}
.stack-holder .stack .card:nth-of-type(14) {
    top: calc(var(--offset-per-card-relative) * 13);
}
.stack-holder .stack .card:nth-of-type(15) {
    top: calc(var(--offset-per-card-relative) * 14);
}
.stack-holder .stack .card:nth-of-type(16) {
    top: calc(var(--offset-per-card-relative) * 15);
}
.stack-holder .stack .card:nth-of-type(17) {
    top: calc(var(--offset-per-card-relative) * 16);
}
.stack-holder .stack .card:nth-of-type(18) {
    top: calc(var(--offset-per-card-relative) * 17);
}
.stack-holder .stack .card:nth-of-type(19) {
    top: calc(var(--offset-per-card-relative) * 18);
}
.stack-holder .stack .card:nth-of-type(20) {
    top: calc(var(--offset-per-card-relative) * 19);
}
/* if next card is face up, push it down by margin */
/*.stack-holder .stack .card + [data-face-up="true"] {*/
/*.stack-holder .stack .card[data-face-up="true"] {
    margin-bottom: calc(var(--offset-per-card-margin-faceup));
}*/

/* reduce the spacing between cards, based on number of cards in the stack */
.stack-holder .stack .card:first-child:nth-last-child(5),
.stack-holder .stack .card:first-child:nth-last-child(5) ~ .card {
    /*--offset-per-card-relative: -91%;*/
    /*--offset-per-card-margin-faceup: calc(18px * var(--canvas-scale));*/
}
.stack-holder .stack .card:first-child:nth-last-child(6),
.stack-holder .stack .card:first-child:nth-last-child(6) ~ .card {
    /*--offset-per-card-relative: -91%;*/
    /*--offset-per-card-margin-faceup: calc(18px * var(--canvas-scale));*/
}
.stack-holder .stack .card:first-child:nth-last-child(7),
.stack-holder .stack .card:first-child:nth-last-child(7) ~ .card {
    /*--offset-per-card-relative: -92%;*/
    /*--offset-per-card-margin-faceup: calc(18px * var(--canvas-scale));*/
}
.stack-holder .stack .card:first-child:nth-last-child(8),
.stack-holder .stack .card:first-child:nth-last-child(8) ~ .card {
    /*--offset-per-card-relative: -92%;*/
    /*--offset-per-card-margin-faceup: calc(18px * var(--canvas-scale));*/
}
.stack-holder .stack .card:first-child:nth-last-child(9),
.stack-holder .stack .card:first-child:nth-last-child(9) ~ .card {
    /*--offset-per-card-relative: -93%;*/
    /*--offset-per-card-margin-faceup: calc(18px * var(--canvas-scale));*/
}
.stack-holder .stack .card:first-child:nth-last-child(10),
.stack-holder .stack .card:first-child:nth-last-child(10) ~ .card {
    /*--offset-per-card-relative: -93%;*/
    /*--offset-per-card-margin-faceup: calc(17px * var(--canvas-scale));*/
}
.stack-holder .stack .card:first-child:nth-last-child(11),
.stack-holder .stack .card:first-child:nth-last-child(11) ~ .card {
    /*--offset-per-card-relative: -94%;*/
    --offset-per-card-margin-faceup: calc(23px * var(--canvas-scale));
}
.stack-holder .stack .card:first-child:nth-last-child(12),
.stack-holder .stack .card:first-child:nth-last-child(12) ~ .card {
    /*--offset-per-card-relative: -94%;*/
    --offset-per-card-margin-faceup: calc(22px * var(--canvas-scale));
}
.stack-holder .stack .card:first-child:nth-last-child(13),
.stack-holder .stack .card:first-child:nth-last-child(13) ~ .card {
    /*--offset-per-card-relative: -95%;*/
    --offset-per-card-margin-faceup: calc(21px * var(--canvas-scale));
}
.stack-holder .stack .card:first-child:nth-last-child(14),
.stack-holder .stack .card:first-child:nth-last-child(14) ~ .card {
    /*--offset-per-card-relative: -95%;*/
    --offset-per-card-margin-faceup: calc(20px * var(--canvas-scale));
}
.stack-holder .stack .card:first-child:nth-last-child(15),
.stack-holder .stack .card:first-child:nth-last-child(15) ~ .card {
    /*--offset-per-card-relative: -96%;*/
    --offset-per-card-margin-faceup: calc(19px * var(--canvas-scale));
}
.stack-holder .stack .card:first-child:nth-last-child(16),
.stack-holder .stack .card:first-child:nth-last-child(16) ~ .card {
    /*--offset-per-card-relative: -96%;*/
    --offset-per-card-margin-faceup: calc(18px * var(--canvas-scale));
}
.stack-holder .stack .card:first-child:nth-last-child(17),
.stack-holder .stack .card:first-child:nth-last-child(17) ~ .card {
    /*--offset-per-card-relative: -97%;*/
    --offset-per-card-margin-faceup: calc(17px * var(--canvas-scale));
}
.stack-holder .stack .card:first-child:nth-last-child(18),
.stack-holder .stack .card:first-child:nth-last-child(18) ~ .card {
    /*--offset-per-card-relative: -97%;*/
    --offset-per-card-margin-faceup: calc(16px * var(--canvas-scale));
}
.stack-holder .stack .card:first-child:nth-last-child(19),
.stack-holder .stack .card:first-child:nth-last-child(19) ~ .card {
    /*--offset-per-card-relative: -98%;*/
    --offset-per-card-margin-faceup: calc(15px * var(--canvas-scale));
}
.stack-holder .stack .card:first-child:nth-last-child(20),
.stack-holder .stack .card:first-child:nth-last-child(20) ~ .card {
    /*--offset-per-card-relative: -98%;*/
    --offset-per-card-margin-faceup: calc(14px * var(--canvas-scale));
}


.stack-holder .stack .card[data-face-up="true"] + [data-face-up="true"] {
    margin-top: calc(var(--offset-per-card-margin-faceup));
}


.stack.top-card-clickable:before {
    /*content: 'Click to Re-Deal';*/
    content: '';

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    margin: auto;

    display: block;
    width: calc(80%);

    background: url('../images/misc/return_white_trans.png') center no-repeat;
    background-size: 80% auto;

    /*
    color: white;
    font-size: calc(20px * var(--canvas-scale));*/
    z-index: 0;

    text-align: center;

    cursor: pointer;
}



/* side stacks offsets  CSS below (i.e. for waste pile */
.stack-holder .stack[data-side-stack-cards="3"] .card:nth-last-child(3) {
    left: calc(var(--offset-per-card) * 0);
}
.stack-holder .stack[data-side-stack-cards="3"] .card:nth-last-child(2) {
    left: calc(var(--offset-per-card) * 1.7);
}
.stack-holder .stack[data-side-stack-cards="3"] .card:nth-last-child(1) {
    left: calc(var(--offset-per-card) * 3.4);
}

.stack-holder .stack[data-side-stack-cards] .card:not(:last-child) {
    pointer-events: none; /* only allow last card ot be clickable on dropoff stacks */
}