:root {
    --chip-size-default: 40px;
    --chip-border-radius-default: 20px;

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

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


    /*--chip-scale-relative: 1;*/ /* uncomment this if we want chips to NOT scale with the UI */
    --chip-scale-relative: var(--canvas-scale);
    --chip-offset-per-chip: calc(0.06 * var(--chip-scale) * var(--chip-size-default) * var(--chip-scale-relative));
    --chip-shadow: calc(2px * var(--chip-scale-relative)) calc(2px * var(--chip-scale-relative)) calc(5px * var(--chip-scale-relative)) rgba(0,0,0,0.7);
}

.chip {
    position: absolute;

    --chip-scale-modifier: 1; /* actual scale of chips for i.e. */
    --chip-scale: calc(var(--chip-scale-modifier) * var(--chip-transform-scale)); /* we have to recalculate it here for it to apply*/

    width: calc(var(--chip-size-default) * var(--chip-scale-relative) * var(--chip-scale));
    height: calc(var(--chip-size-default) * var(--chip-scale-relative) * var(--chip-scale));

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

    perspective: calc(1000px * var(--chip-scale-relative) * var(--chip-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*/
    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;

    background-size: 100% 100% !important;
    box-shadow: var(--chip-shadow);
}
.chip.force-in-front {
    /* for chips in front/being moved, slightly increase them to give the effect of "being closer to you", plus also serving as clear interaction cue */
    --chip-transform-scale: 1.03;
    left: calc(-1 * var(--chip-size-default) * var(--chip-scale-relative) * var(--chip-scale) * ((var(--chip-transform-scale) - 1) / 2));
}

.chip[data-type="lightblue"] {
    background: url('../images/chips/chip_lightblue.png');
}
.chip[data-type="red"] {
    background: url('../images/chips/chip_red.png');
}
.chip[data-type="darkblue"] {
    background: url('../images/chips/chip_darkblue.png');
}
.chip[data-type="green"] {
    background: url('../images/chips/chip_green.png');
}
.chip[data-type="black"] {
    background: url('../images/chips/chip_black.png');
}
.chip[data-type="purple"] {
    background: url('../images/chips/chip_purple.png');
}
.chip[data-type="gold"] {
    background: url('../images/chips/chip_gold.png');
}
.chip[data-type="pink"] {
    background: url('../images/chips/chip_pink.png');
}
.chip[data-type="orange"] {
    background: url('../images/chips/chip_orange.png');
}
/* START special chips */
/* special chips below */

.chip.special-chip {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    margin: auto;
    transition: transform 500ms ease-in-out;
}
.chip[data-type="dealer"] {
    background: url('../images/chips/chip_dealer_blue.png');
}
.chip[data-type="small_blind"] {
    background: url('../images/chips/chip_reddollar.png');
    transition-delay: 150ms;
}
.chip[data-type="big_blind"] {
    background: url('../images/chips/chip_reddollar.png');
    transition-delay: 300ms;
}
.chip[data-type="big_blind"]:after {
    content: '';
    position: absolute;

    top: 30%;
    left: 30%;

    width: inherit;
    height: inherit;

    border-radius: inherit;

    box-shadow: inherit;
    background: inherit;
    background-size: inherit;
}

/* START chip position for player seats LANDSCAPE: */

.chip[data-seat-location-id="0"] {
    transform: translate(calc(40px * var(--canvas-scale)), calc(179px * var(--canvas-scale)));
}
.chip[data-seat-location-id="1"] {
    transform: translate(calc(-300px * var(--canvas-scale)), calc(164px * var(--canvas-scale)));
}
.chip[data-seat-location-id="2"] {/**/
    transform: translate(calc(-352px * var(--canvas-scale)), calc(84px * var(--canvas-scale)));
}
.chip[data-seat-location-id="3"] {/**/
    transform: translate(calc(-350px * var(--canvas-scale)), calc(-73px * var(--canvas-scale)));
}
.chip[data-seat-location-id="4"] {
    transform: translate(calc(-291px * var(--canvas-scale)), calc(-174px * var(--canvas-scale)));
}
.chip[data-seat-location-id="5"] {/**/
    transform: translate(calc(5px * var(--canvas-scale)), calc(-184px * var(--canvas-scale)));
}
.chip[data-seat-location-id="6"] {
    transform: translate(calc(167px * var(--canvas-scale)), calc(-165px * var(--canvas-scale)));
}
.chip[data-seat-location-id="7"] {/**/
    transform: translate(calc(322px * var(--canvas-scale)), calc(-157px * var(--canvas-scale)));
}
.chip[data-seat-location-id="8"] {/**/
    transform: translate(calc(393px * var(--canvas-scale)), calc(7px * var(--canvas-scale)));
}
.chip[data-seat-location-id="9"] {
    transform: translate(calc(279px * var(--canvas-scale)), calc(169px * var(--canvas-scale)));
}
/*
.chip[data-at-seat-pos="s2"] {
    transform: translate(calc(-400px * var(--canvas-scale)), calc(70px * var(--canvas-scale)));
}
.chip[data-at-seat-pos="s3"] {
    transform: translate(calc(390px * var(--canvas-scale)), calc(-100px * var(--canvas-scale)));
}*/


/* START chip positions for player seats PORTRAIT: */

.portrait .chip[data-at-seat-pos="s2"] {
    transform: translate(calc(-170px * var(--canvas-scale)), calc(75px * var(--canvas-scale)));
}
.portrait .chip[data-at-seat-pos="s3"] {
    transform: translate(calc(175px * var(--canvas-scale)), calc(-100px * var(--canvas-scale)));
}

.portrait .chip[data-seat-location-id="0"] {
    transform: translate(calc(121px * var(--canvas-scale)), calc(630px * var(--canvas-scale)));
}
.portrait .chip[data-seat-location-id="1"] {
    transform: translate(calc(-219px * var(--canvas-scale)), calc(576px * var(--canvas-scale)));
}
.portrait .chip[data-seat-location-id="2"] {
    transform: translate(calc(-269px * var(--canvas-scale)), calc(352px * var(--canvas-scale)));
}
.portrait .chip[data-seat-location-id="3"] {
    transform: translate(calc(-269px * var(--canvas-scale)), calc(-200px * var(--canvas-scale)));
}
.portrait .chip[data-seat-location-id="4"] {
    transform: translate(calc(-263px * var(--canvas-scale)), calc(-486px * var(--canvas-scale)));
}
.portrait .chip[data-seat-location-id="5"] {
    transform: translate(calc(-98px * var(--canvas-scale)), calc(-652px * var(--canvas-scale)));
}
.portrait .chip[data-seat-location-id="6"] {
    transform: translate(calc(156px * var(--canvas-scale)), calc(-574px * var(--canvas-scale)));
}
.portrait .chip[data-seat-location-id="7"] {
    transform: translate(calc(177px * var(--canvas-scale)), calc(-342px * var(--canvas-scale)));
}
.portrait .chip[data-seat-location-id="8"] {
    transform: translate(calc(177px * var(--canvas-scale)), calc(211px * var(--canvas-scale)));
}
.portrait .chip[data-seat-location-id="9"] {
    transform: translate(calc(177px * var(--canvas-scale)), calc(496px * var(--canvas-scale)));
}

/* additional offsets if 2 chips are on same player seat (i.e .blind + dealer) */
/* until we get to leaving seats etc. just s1 & s2 should be covered really as there's no other situations like this*/
.chip[data-seat-location-id="0"] + .chip[data-seat-location-id="0"] {
    left: calc(2.5 *var(--chip-size-default) * var(--chip-scale-relative) * var(--chip-scale));
}
.chip[data-seat-location-id="1"] + .chip[data-seat-location-id="1"] {
    left: calc(2.5 *var(--chip-size-default) * var(--chip-scale-relative) * var(--chip-scale));
}
.chip[data-seat-location-id="2"] + .chip[data-seat-location-id="2"] {
    left: calc(2.5 *var(--chip-size-default) * var(--chip-scale-relative) * var(--chip-scale));
}
.chip[data-seat-location-id="3"] + .chip[data-seat-location-id="3"] {
    left: calc(2.5 *var(--chip-size-default) * var(--chip-scale-relative) * var(--chip-scale));
}
.chip[data-seat-location-id="4"] + .chip[data-seat-location-id="4"] {
    left: calc(2.5 *var(--chip-size-default) * var(--chip-scale-relative) * var(--chip-scale));
}
.chip[data-seat-location-id="5"] + .chip[data-seat-location-id="5"] {
    left: calc(2.5 *var(--chip-size-default) * var(--chip-scale-relative) * var(--chip-scale));
}
.chip[data-seat-location-id="6"] + .chip[data-seat-location-id="6"] {
    left: calc(2.5 *var(--chip-size-default) * var(--chip-scale-relative) * var(--chip-scale));
}
.chip[data-seat-location-id="7"] + .chip[data-seat-location-id="7"] {
    left: calc(2.5 *var(--chip-size-default) * var(--chip-scale-relative) * var(--chip-scale));
}
.chip[data-seat-location-id="8"] + .chip[data-seat-location-id="8"] {
    left: calc(2.5 *var(--chip-size-default) * var(--chip-scale-relative) * var(--chip-scale));
}
.chip[data-seat-location-id="9"] + .chip[data-seat-location-id="9"] {
    left: calc(2.5 *var(--chip-size-default) * var(--chip-scale-relative) * var(--chip-scale));
}

.chip[data-at-seat-pos="s2"] + .chip[data-at-seat-pos="s2"] {
    left: calc(2.5 *var(--chip-size-default) * var(--chip-scale-relative) * var(--chip-scale));
}
.chip[data-at-seat-pos="s3"] + .chip[data-at-seat-pos="s3"] {
    left: calc(2.5 *var(--chip-size-default) * var(--chip-scale-relative) * var(--chip-scale));
}

/* adjustments for chips at same seat for portrait (just 1 & 2 seat sorted, as it's really only what is needed right now*/
.portrait .chip[data-seat-location-id="0"] + .chip[data-seat-location-id="0"] {
    left: calc(2.2 *var(--chip-size-default) * var(--chip-scale-relative) * var(--chip-scale));
    top: calc(-1.8 *var(--chip-size-default) * var(--chip-scale-relative) * var(--chip-scale));
}
.portrait .chip[data-at-seat-pos="s2"] + .chip[data-at-seat-pos="s2"] {
    left: 0;
    top: calc(2.5 *var(--chip-size-default) * var(--chip-scale-relative) * var(--chip-scale));
}

/* END special chips */

/* BEGIN chips-stack below */
.chips-stack {
    position: relative;

    display: inline-block;

    width: calc(var(--chip-size-default) * var(--chip-scale-relative) * var(--chip-scale));
    height: calc(var(--chip-size-default) * var(--chip-scale-relative) * var(--chip-scale));
}

.chips-stack .chip:nth-of-type(1) {
    top: calc(-1 * var(--chip-offset-per-chip) * 0);
}
.chips-stack .chip:nth-of-type(2) {
    top: calc(-1 * var(--chip-offset-per-chip) * 1);
}
.chips-stack .chip:nth-of-type(3) {
    top: calc(-1 * var(--chip-offset-per-chip) * 2);
}
.chips-stack .chip:nth-of-type(4) {
    top: calc(-1 * var(--chip-offset-per-chip) * 3);
}
.chips-stack .chip:nth-of-type(5) {
    top: calc(-1 * var(--chip-offset-per-chip) * 4);
}
.chips-stack .chip:nth-of-type(6) {
    top: calc(-1 * var(--chip-offset-per-chip) * 5);
}
.chips-stack .chip:nth-of-type(7) {
    top: calc(-1 * var(--chip-offset-per-chip) * 6);
}
.chips-stack .chip:nth-of-type(8) {
    top: calc(-1 * var(--chip-offset-per-chip) * 7);
}
.chips-stack .chip:nth-of-type(9) {
    top: calc(-1 * var(--chip-offset-per-chip) * 8);
}
.chips-stack .chip:nth-of-type(10) {
    top: calc(-1 * var(--chip-offset-per-chip) * 9);
}
.chips-stack .chip:nth-of-type(11) {
    top: calc(-1 * var(--chip-offset-per-chip) * 10);
}
.chips-stack .chip:nth-of-type(12) {
    top: calc(-1 * var(--chip-offset-per-chip) * 11);
}
.chips-stack .chip:nth-of-type(13) {
    top: calc(-1 * var(--chip-offset-per-chip) * 12);
}
.chips-stack .chip:nth-of-type(14) {
    top: calc(-1 * var(--chip-offset-per-chip) * 13);
}
.chips-stack .chip:nth-of-type(15) {
    top: calc(-1 * var(--chip-offset-per-chip) * 14);
}
.chips-stack .chip:nth-of-type(16) {
    top: calc(-1 * var(--chip-offset-per-chip) * 15);
}
.chips-stack .chip:nth-of-type(17) {
    top: calc(-1 * var(--chip-offset-per-chip) * 16);
}
.chips-stack .chip:nth-of-type(18) {
    top: calc(-1 * var(--chip-offset-per-chip) * 17);
}
.chips-stack .chip:nth-of-type(19) {
    top: calc(-1 * var(--chip-offset-per-chip) * 18);
}
.chips-stack .chip:nth-of-type(20) {
    top: calc(-1 * var(--chip-offset-per-chip) * 19);
}
.chips-stack .chip:nth-of-type(21) {
    top: calc(-1 * var(--chip-offset-per-chip) * 20);
}
.chips-stack .chip:nth-of-type(22) {
    top: calc(-1 * var(--chip-offset-per-chip) * 21);
}
.chips-stack .chip:nth-of-type(23) {
    top: calc(-1 * var(--chip-offset-per-chip) * 22);
}
.chips-stack .chip:nth-of-type(24) {
    top: calc(-1 * var(--chip-offset-per-chip) * 23);
}
.chips-stack .chip:nth-of-type(25) {
    top: calc(-1 * var(--chip-offset-per-chip) * 24);
}
.chips-stack .chip:nth-of-type(26) {
    top: calc(-1 * var(--chip-offset-per-chip) * 25);
}
.chips-stack .chip:nth-of-type(27) {
    top: calc(-1 * var(--chip-offset-per-chip) * 26);
}
.chips-stack .chip:nth-of-type(28) {
    top: calc(-1 * var(--chip-offset-per-chip) * 27);
}
.chips-stack .chip:nth-of-type(29) {
    top: calc(-1 * var(--chip-offset-per-chip) * 28);
}
.chips-stack .chip:nth-of-type(30) {
    top: calc(-1 * var(--chip-offset-per-chip) * 29);
}
.chips-stack .chip:nth-of-type(31) {
    top: calc(-1 * var(--chip-offset-per-chip) * 30);
}
.chips-stack .chip:nth-of-type(32) {
    top: calc(-1 * var(--chip-offset-per-chip) * 31);
}
.chips-stack .chip:nth-of-type(33) {
    top: calc(-1 * var(--chip-offset-per-chip) * 32);
}
.chips-stack .chip:nth-of-type(34) {
    top: calc(-1 * var(--chip-offset-per-chip) * 33);
}
.chips-stack .chip:nth-of-type(35) {
    top: calc(-1 * var(--chip-offset-per-chip) * 34);
}
.chips-stack .chip:nth-of-type(36) {
    top: calc(-1 * var(--chip-offset-per-chip) * 35);
}
.chips-stack .chip:nth-of-type(37) {
    top: calc(-1 * var(--chip-offset-per-chip) * 36);
}
.chips-stack .chip:nth-of-type(38) {
    top: calc(-1 * var(--chip-offset-per-chip) * 37);
}
.chips-stack .chip:nth-of-type(39) {
    top: calc(-1 * var(--chip-offset-per-chip) * 38);
}
.chips-stack .chip:nth-of-type(40) {
    top: calc(-1 * var(--chip-offset-per-chip) * 39);
}
.chips-stack .chip:nth-of-type(41) {
    top: calc(-1 * var(--chip-offset-per-chip) * 40);
}
.chips-stack .chip:nth-of-type(42) {
    top: calc(-1 * var(--chip-offset-per-chip) * 41);
}
.chips-stack .chip:nth-of-type(43) {
    top: calc(-1 * var(--chip-offset-per-chip) * 42);
}
.chips-stack .chip:nth-of-type(44) {
    top: calc(-1 * var(--chip-offset-per-chip) * 43);
}
.chips-stack .chip:nth-of-type(45) {
    top: calc(-1 * var(--chip-offset-per-chip) * 44);
}
.chips-stack .chip:nth-of-type(46) {
    top: calc(-1 * var(--chip-offset-per-chip) * 45);
}