:root {
    --card-width-default: 150px;
    --card-height-default: 225px;
    --card-padding-default: 15px;
    --card-border-radius-default: 12px;

    --card-scale-modifier: 1; /* scale, based on which above values are based */
    --card-transform-scale: 1; /* actual/current card transform scale for the specific card (i.e. hover, animated etc. */

    --card-scale: calc(var(--card-scale-modifier) * var(--card-transform-scale)); /* actual/current calculated card scale for the specific card */

    --card-scale-relative: var(--canvas-scale);
    /*--card-scale-relative: 1; !* uncomment above if we want cards scaling based on canvas size or not *!*/

    --card-fronts-bg: url('../images/cards/cards_sprite_horizontal_25_size.png');
    --card-backs-bg: url('../images/cards/backs/23.png?v=2');
}

.card {
    position: relative;

    --card-scale-modifier: 0.72; /* actual scale of cards for i.e. solitaire */
    --card-scale: calc(var(--card-scale-modifier) * var(--card-transform-scale)); /* we have to recalculate it here for it to apply*/

    width: calc(var(--card-width-default) * var(--card-scale-relative) * var(--card-scale));
    height: calc(var(--card-height-default) * var(--card-scale-relative) * var(--card-scale));
    padding: calc(var(--card-padding-default) * var(--card-scale-relative) * var(--card-scale));

    border-radius: calc(var(--card-border-radius-default) * var(--card-scale-relative) * var(--card-scale));

    perspective: calc(1000px * var(--card-scale-relative) * var(--card-scale)); /* TODO is this fine, or should be 1000px fixed ? */

    /* define transitions for sizes etc. -> has to be slightly higher than transform later, otherwise it won't work properly for some weird reason*/
    /* margin has to be 0, otherwise it can move to 2n row due to hwo centering is dont in certain situations*/
    transition: width 0ms ease-in-out, height 0ms ease-in-out, padding 0ms ease-in-out, left 50ms ease-in-out, border-radius 50ms ease-in-out, margin 0ms ease-in-out;
    /*transition: width 50ms ease-in-out, height 50ms ease-in-out, padding 50ms ease-in-out, left 50ms ease-in-out, border-radius 50ms ease-in-out, margin 50ms ease-in-out;*/

    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

    -moz-transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
.top-card-clickable .card:last-child {
    cursor: pointer;
}
.card[data-face-up="true"] {
    /*cursor: pointer;*/
}
.card.being-moved {
    transition: all 250ms ease-in-out, width 50ms ease-in-out, height 50ms ease-in-out, padding 50ms ease-in-out, left 50ms ease-in-out, border-radius 50ms ease-in-out, margin 50ms ease-in-out;
}
.card.force-in-front {
    /* for cards in front/being moved, slightly increase them to give the effect of "beign closer to you", plus also serving as clear interaction cue */
    --card-transform-scale: 1.03;
    left: calc(-1 * var(--card-width-default) * var(--card-scale-relative) * var(--card-scale) * ((var(--card-transform-scale) - 1) / 2));
}
.card.resetting {
    transition: all 500ms ease-in-out;
}
.card-front, .card-back, .card-front-color-overlay {
    position: absolute;

    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    background-size: 100% 100% !important;

    -webkit-backface-visibility: hidden; /* Safari */
    -webkit-perspective: 0;
    -webkit-transform: translate3d(0,0,0);
    -moz-backface-visibility: hidden;

    visibility:visible;
    backface-visibility: hidden;
    transform: translateZ(0px);


    transition: transform 0.8s;
    transform-style: preserve-3d;
    box-shadow: calc(3px * var(--card-scale-relative)) calc(3px * var(--card-scale-relative)) calc(5px * var(--card-scale-relative)) rgba(0,0,0, 0.5);
    /*border-radius: calc(7px * var(--card-scale-relative));*/
    border-radius: calc(var(--card-border-radius-default) * var(--card-scale-relative) * var(--card-scale));
}
.card-front-color-overlay {
    opacity: 0;
}

.card-back {
    background: var(--card-backs-bg);
    transform: rotateY(180deg) translateZ(0px);
}

.card[data-face-up="false"] .card-front,
.card[data-face-up="false"] .card-front-color-overlay {
    transform: rotateY(180deg) translateZ(0px);
}
.card[data-face-up="false"] .card-back {
    transform: rotateY(360deg) translateZ(0px);
}

.card.spades, .card.clubs {
}
.card.diamonds, .card.hearts, .card.joker {
}
/* approximation for blueish color*/
[data-setting_deck_style="four_color"] .card.diamonds .card-front{
    filter: hue-rotate(230deg);
}
[data-setting_deck_style="four_color"] .card.diamonds .card-front-color-overlay {
    opacity: 1;
    background-color: #1804a6;
    mix-blend-mode: screen;
    filter: brightness(85%) saturate(200%);
}
/* approximating for converting to green */
[data-setting_deck_style="four_color"] .card.clubs .card-front {
    filter: grayscale(100%);
    mix-blend-mode: color;
}
[data-setting_deck_style="four_color"] .card.clubs .card-front-color-overlay {
    opacity: 1;
    background-color: #26771a;
    mix-blend-mode: screen;
    filter: brightness(105%) saturate(400%);
}
/*[data-setting_deck_style="four_color"] .card.clubs .card-front::before {*/
/*    !* approximation for greenish color*!*/
/*    content: "";*/
/*    position: absolute;*/
/*    top: 0;*/
/*    right: 0;*/
/*    bottom: 0;*/
/*    left: 0;*/
/*    background-color: #19aa19; !* Set the desired green color *!*/
/*    !**/
/*    #287728*/
/*    #049f04*/
/*     *!*/
/*    mix-blend-mode: screen;*/
/*    filter: brightness(86%) contrast(101%) saturate(200%)*/
/*}*/
.card .card-front {
    /* just default empty card in case we don't have info of it yet */
    background: var(--card-fronts-bg);
    background-size: 1300% 400% !important;
    background-position: 0 0;
}
.card.val-undefined .card-front {
    /* just default empty card in case we don't have info of it yet */
    background: white;
}
.card.val-undefined .card-front:after {
    display: block;
    content: '?';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;

    width: max-content;
    height: max-content;


    font-size: calc(var(--card-width-default) * var(--card-scale-relative) * var(--card-scale) * 0.6);
    color: black;
}
/* actual card background begins below */
.card.spades.val-A .card-front {
    background-position: 0 0;
}
.card.spades.val-2 .card-front {
    background-position: -1200% 0;
}
.card.spades.val-3 .card-front {
    background-position: -1100% 0;
}
.card.spades.val-4 .card-front {
    background-position: -1000% 0;
}
.card.spades.val-5 .card-front {
    background-position: -900% 0;
}
.card.spades.val-6 .card-front {
    background-position: -800% 0;
}
.card.spades.val-7 .card-front {
    background-position: -700% 0;
}
.card.spades.val-8 .card-front {
    background-position: -600% 0;
}
.card.spades.val-9 .card-front {
    background-position: -500% 0;
}
.card.spades.val-10 .card-front {
    background-position: -400% 0;
}
.card.spades.val-J .card-front {
    background-position: -300% 0;
}
.card.spades.val-Q .card-front {
    background-position: -200% 0;
}
.card.spades.val-K .card-front {
    background-position: -100% 0;
}


.card.clubs.val-A .card-front {
    background-position: 0 -300%;
}
.card.clubs.val-2 .card-front {
    background-position: -1200% -300%;
}
.card.clubs.val-3 .card-front {
    background-position: -1100% -300%;
}
.card.clubs.val-4 .card-front {
    background-position: -1000% -300%;
}
.card.clubs.val-5 .card-front {
    background-position: -900% -300%;
}
.card.clubs.val-6 .card-front {
    background-position: -800% -300%;
}
.card.clubs.val-7 .card-front {
    background-position: -700% -300%;
}
.card.clubs.val-8 .card-front {
    background-position: -600% -300%;
}
.card.clubs.val-9 .card-front {
    background-position: -500% -300%;
}
.card.clubs.val-10 .card-front {
    background-position: -400% -300%;
}
.card.clubs.val-J .card-front {
    background-position: -300% -300%;
}
.card.clubs.val-Q .card-front {
    background-position: -200% -300%;
}
.card.clubs.val-K .card-front {
    background-position: -100% -300%;
}


.card.diamonds.val-A .card-front {
    background-position: 0% -200%;
}
.card.diamonds.val-2 .card-front {
    background-position: -1200% -200%;
}
.card.diamonds.val-3 .card-front {
    background-position: -1100% -200%;
}
.card.diamonds.val-4 .card-front {
    background-position: -1000% -200%;
}
.card.diamonds.val-5 .card-front {
    background-position: -900% -200%;
}
.card.diamonds.val-6 .card-front {
    background-position: -800% -200%;
}
.card.diamonds.val-7 .card-front {
    background-position: -700% -200%;
}
.card.diamonds.val-8 .card-front {
    background-position: -600% -200%;
}
.card.diamonds.val-9 .card-front {
    background-position: -500% -200%;
}
.card.diamonds.val-10 .card-front {
    background-position: -400% -200%;
}
.card.diamonds.val-J .card-front {
    background-position: -300% -200%;
}
.card.diamonds.val-Q .card-front {
    background-position: -200% -200%;
}
.card.diamonds.val-K .card-front {
    background-position: -100% -200%;
}

.card.hearts.val-A .card-front {
    background-position: 0% -100%;
}
.card.hearts.val-2 .card-front {
    background-position: -1200% -100%;
}
.card.hearts.val-3 .card-front {
    background-position: -1100% -100%;
}
.card.hearts.val-4 .card-front {
    background-position: -1000% -100%;
}
.card.hearts.val-5 .card-front {
    background-position: -900% -100%;
}
.card.hearts.val-6 .card-front {
    background-position: -800% -100%;
}
.card.hearts.val-7 .card-front {
    background-position: -700% -100%;
}
.card.hearts.val-8 .card-front {
    background-position: -600% -100%;
}
.card.hearts.val-9 .card-front {
    background-position: -500% -100%;
}
.card.hearts.val-10 .card-front {
    background-position: -400% -100%;
}
.card.hearts.val-J .card-front {
    background-position: -300% -100%;
}
.card.hearts.val-Q .card-front {
    background-position: -200% -100%;
}
.card.hearts.val-K .card-front {
    background-position: -100% -100%;
}