:root {
   /*:::::PLAYSPACE::::*/
   --playspace_height: calc(100vh * 0.85);
   --playspace_width: 65%;
   --Narrowplayspace_width: 55%;
   --card_h: 300px;
   --card_w: calc(var(--card_h) * 0.584);
   --c_large: 1.35;
   --c_medium: 1;
   --c_default_scale: 1;
   --c_small: 0.85;
   --c_xsmall: 0.7;
   --c_xxsmall: 0.55;

   --c_full_spread_spacing: 3%;
   --c_pos_x: 12px;
   --c_pos_y: 12px;
}

div.playspace {
   /* background-color: rgba(255,155,155,0.5);     */
   order: 1;
   height: var(--playspace_height);
   /* margin-left: 2%; */
   width: var(--playspace_width);
}

div.playspace.narrower {
   width: var(--Narrowplayspace_width);
}

#deck {
   box-sizing: border-box;
   position: absolute;
   --width: calc((var(--card_w) * var(--c_default_scale)) + (var(--c_pos_x) * 2.1));
   height: calc((var(--card_h) * var(--c_default_scale)) + (var(--c_pos_y) * 2.1));
   width: var(--width);
   border: var(--borderWeight) solid var(--col_secondary);
   border-radius: var(--borderRadius_pattern);
   bottom: 4%;
   right: 10%;
   /* right: calc(var(--dialogueWidth) - (var(--width) * 1.5)); */
}

div.deckButtons {
   box-sizing: border-box;
   /* --width:calc((var(--card_w) * var(--c_default_scale)) + (var(--c_pos_x) * 2.1));  */
   position: absolute;
   bottom: 4%;
   left: -50%;
   /* right: calc(var(--width) * 2.1+ var(--icon_size)); */
   z-index: 3;
}

#deck[hide="true"] {
   display: none;
   animation: none;
}

#deck[hide="false"] {
   animation: fade-in;
   animation-duration: 0.5s;
   animation-timing-function: var(--timingFunction);
   animation-fill-mode: forwards;
   animation-iteration-count: 1;
}

#deck[active="true"] {
   animation: sellect !important;
   animation-duration: 1s !important;
   animation-timing-function: var(--timingFunction) !important;
   /* animation-fill-mode: forwards; */
   animation-iteration-count: 1 !important;
}


div.card,
div.psudoCard {
   position: absolute;

   /*Repeat this block to update calculations for each card change*/
   max-height: calc(var(--card_h) * var(--c_large));
   min-height: calc(var(--card_h) * var(--c_default_scale));
   max-width: calc(var(--card_w) * var(--c_large));
   min-width: calc(var(--card_w) * var(--c_default_scale));
   /*EndOfBlock*/



   box-sizing: border-box;
   background-image: url('../cards/Back.jpg');
   background-size: cover;
   background-repeat: no-repeat;
   border-radius: var(--borderRadius_card);

   overflow: hidden;
   /* transform-origin: bottom right 60px; */
   transform: translateX(0px) translateY(0px) scale(1) rotate3d(0, 1, 0, 0deg);
   /*::LERPING HAPPENS BELOW::*/
   top: var(--posX);
   left: var(--posY);
   transition-delay: calc(var(--card-index) * 100ms);
   transition-timing-function: var(--timingFunction);
   cursor: pointer;
   z-index: 2;
   /*:::DEBUGGING:::*/
   /* display: none; */
   /* animation-direction: alternate-reverse; */
}

div.card.smaller {
   --c_default_scale: var(--c_xsmall) !important;
   /*TODO: Update these*/
}

div.card.even_smaller {
   --c_default_scale: var(--c_xxsmall) !important;
   /*TODO: Update these*/
}

div.card[gamestate="none"] {
   top: -20%;
   left: -20%;
   /* transition-duration: 10ms; */
   /* transition-timing-function: linear; */
   transition-delay: 0ms;
}

div.card[gamestate="deal"] {
   --c_default_scale: var(--c_medium);
   transform: translateX(12px) translateY(12px) scale(1) rotate3d(0, 1, 0, 0deg);
   transition-duration: 0.5s;
   transition-timing-function: var(--timingFunction);
   box-shadow: 0.25px 0.25px rgba(0, 0, 0, 0.25);
   animation-name: flipToFront;
   animation-duration: 0.25s;
   animation-iteration-count: 1;
   animation-timing-function: var(--timingFunction);
   animation-delay: 100ms;
   z-index: 3;
}

div.card[gamestate="deck"] {
   --c_default_scale: var(--c_medium);
   transform: translateX(calc((1px * var(--card-index)) + var(--c_pos_x))) translateY(calc(-1px * var(--card-index) + var(--c_pos_y))) scale(1) rotate3d(0, 1, 0, 0deg);
   transition-duration: 0.5s;
   transition-timing-function: var(--timingFunction);
   box-shadow: 0.25px 0.25px rgba(0, 0, 0, 0.25);
}

div.card[gamestate="deck"]:not([prevgamestate="shuffle"]):not([prevgamestate="deck"]) {
   animation-name: flipToBack;
   animation-duration: 0.5s;
   animation-iteration-count: 1;
   animation-timing-function: var(--timingFunction);
   animation-delay: calc(var(--card-index) * 100ms);
}

div.card[gamestate="expose"] {
   --c_default_scale: var(--c_small);
   transform: translateX(0) translateY(0) scale(1) rotate3d(0, 1, 0, 0deg);
   transition-duration: 0.5s;
   transition-timing-function: var(--timingFunction);
   transition-delay: calc(var(--card-index) * 100ms);

}

div.card:hover[gamestate="expose"] {
   cursor: pointer;
   transition-delay: 0ms;
   transform: translateX(0%) translateY(0) scale(1.2) rotate3d(0, 1, 0, 0deg);
   z-index: 4;
}

div.card:hover[gamestate="expose"][fin_row="true"] {
   transform: translateX(0%) translateY(0%) scale(1.2) rotate3d(0, 1, 0, 0deg);

}

div.card[gamestate="shuffle"] {
   /*I.E.*/
   --c_default_scale: var(--c_large);
   animation-name: shuffle;
   animation-delay: calc(var(--card-index) * 100ms);
   animation-duration: 1s;
   animation-iteration-count: 6;
   animation-direction: alternate-reverse;
   animation-timing-function: linear;
   transition-duration: 0.5s;
   transition-timing-function: var(--timingFunction);
   transition-delay: 0ms;
   /* transform: translateX(calc(sin(var(--progress) ) * 50%)) translateY(calc(40% + cos(var(--progress)) * -50%)) scale(1) rotate3d(0, 1, 0, 0deg);   */
   /*calc(50% * sin(0deg)*/
}

div.card[gamestate="shuffle"][shuffle="3"] {
   transform: translateX(calc(sin(var(--progress) * (var(--card-index))*0.1) * 30%)) translateY(calc(cos(var(--progress)* (var(--card-index))*0.2) * -30%)) scale(1) rotate3d(0, 1, 0, 0deg);
}

div.card[gamestate="shuffle"][shuffle="2"] {
   transform: translateX(calc(sin(var(--progress)) * 30%)) translateY(calc(-10% + cos(var(--progress)* (var(--card-index))*0.15) * -30%)) scale(1) rotate3d(0, 1, 0, 0deg);
}

div.card[gamestate="shuffle"][shuffle="1"] {
   transform: translateX(calc(sin(var(--progress)) * 50%)) translateY(calc(40% + cos(var(--progress)) * -50%)) scale(1) rotate3d(0, 1, 0, 0deg);
}

div.card[gamestate="deck"],
div.card[gamestate="shuffle"] {
   background-image: url('../cards/Back.jpg') !important;
}

div.psudoCard[gamestate="intro"] {
   position: relative!important;
   margin-left:-5%;
   margin-top: 2%;
   transform: translateX(0) translateY(0) scale(1) rotate3d(0, 1, 0, 0deg);
   transition-duration: 0.5s;
   transition-delay: calc(var(--card-index) * 10ms);
   transition-timing-function: var(--timingFunction);
}
/*
div.psudoCard[gamestate="intro"][index="0"]{
      transform:translateX(-84%) translateY(-15%) scale(0.8) rotate3d(0, 0, 1, 0deg); 
}
div.psudoCard[gamestate="intro"][index="13"]{
    transform:translateX(0) translateY(-15%) scale(0.8) rotate3d(0, 0, 1, 0deg); 
} 
div.psudoCard[gamestate="intro"][index="21"]{
    transform:translateX(84%) translateY(-15%) scale(0.8) rotate3d(0, 0, 1, 0deg); 
}*/
/*
div.card[gamestate="deck"]>div.title,
div.card[face="back"]>div.title,
div.card[gamestate="shuffle"]>div.title {
   display: none;
}*/

div.playspace[gamestate="none"]>div.card {
   /* transition-duration: 2s;
   transition-timing-function: ease-in-out;
   --c_default_scale: var(--c_small);
   height: calc(var(--card_h) * var(--c_default_scale));
   width: calc(var(--card_w) * var(--c_default_scale));

   transform:translateX(mod(var(--card-index), 3));  */
}

div.pattern {
   /* --c_default_scale:var(--c_large); */
   box-sizing: border-box;
   position: absolute;
   height: calc((var(--card_h) * var(--c_default_scale)) + (var(--c_pos_y) * 2.1));
   width: calc((var(--card_w) * var(--c_default_scale)) + (var(--c_pos_x) * 2.1));
   border: var(--borderWeight) solid var(--col_secondary);
   border-radius: var(--borderRadius_pattern);
   cursor: pointer;
}

div.pattern>div.title {
   /* background-color: pink;  */
   position: fixed;
   margin-top: calc((var(--card_h) * var(--c_default_scale)) + (var(--c_pos_y) * 1.2));
   width: calc((var(--card_w) * var(--c_default_scale)) + (var(--c_pos_x) * 2.1));
   height: fit-content;
}

div.pattern>div.title>h1 {
   color: var(--col_primary);
   font-size: calc(var(--pSize)* 0.8);
   font-weight: 900;
   text-align: center;
   text-transform: uppercase;
}

div.pattern>p {
   display: none;
   color: var(--col_primary);
   font-size: unset;
   /*var(--pSize); */
   margin-top: 1%;
   margin-left: 4%;
   margin-right: 4%;
}

div.pattern[active=true] {
   animation: sellect !important;
   animation-duration: 1s !important;
   animation-timing-function: var(--timingFunction) !important;
   /* animation-fill-mode: forwards; */
   animation-iteration-count: 1 !important;
}

div.pattern:hover:not([card]) {
   transition-duration: 1s;
   background-color: var(--col_secondary);
   z-index: 5;
   /* box-shadow:0px 0px 10px 10px var(--col_primary); */
}

div.pattern:hover[card] {
   transition-duration: 1s;
   /* background-color: var(--col_secondary); */
   z-index: 5;
   border-color: var(--col_primary);
   /* box-shadow:0px 0px 10px 10px var(--col_primary); */
}

div.pattern:hover:not([card])>p {
   display: block;

}

div.pattern>h1 {
   display: block;

}

div.pattern[hide="true"] {
   display: none;
   animation: none;
}

div.pattern[hide="false"] {
   animation: fade-in;
   animation-duration: 0.5s;
   animation-timing-function: var(--timingFunction);
   animation-fill-mode: forwards;
   animation-iteration-count: 1;
}

div.pattern[pattern="diamond"][count="1"] {
   /*Top*/
   top: 10%;
   left: 24%;
}

div.pattern[pattern="diamond"][count="4"] {
   /*right*/
   top: 36%;
   left: 38%;
}

div.pattern[pattern="diamond"][count="2"] {
   /*Bottom*/
   top: 56%;
   left: 24%;
}

div.pattern[pattern="diamond"][count="3"] {
   /*left*/
   top: 36%;
   left: 10%;
}

div.pattern[pattern="triangle"][count="2"] {
   /*Top Right*/
   top: 18%;
   left: 38%;
}

div.pattern[pattern="triangle"][count="1"] {
   /*Top Left*/
   top: 18%;
   left: 10%;
}

div.pattern[pattern="triangle"][count="3"] {
   /*Bottom*/

   top: 46%;
   left: 24%;
}

div.psudoCard[index="0"],
div.card[index="0"],
div.cardSum[index="0"] {
   background-image: url("../cards/0_Faith.jpg");
}

div.psudoCard[index="1"],
div.card[index="1"],
div.cardSum[index="1"] {
   background-image: url("../cards/1_Power.jpg");
}

div.psudoCard[index="2"],
div.card[index="2"],
div.cardSum[index="2"] {
   background-image: url("../cards/2_Cyborg.jpg");
}

div.psudoCard[index="3"],
div.card[index="3"],
div.cardSum[index="3"] {
   background-image: url("../cards/3_attachment.jpg");
}

div.psudoCard[index="4"],
div.card[index="4"],
div.cardSum[index="4"] {
   background-image: url("../cards/4_Data.jpg");
}

div.psudoCard[index="5"],
div.card[index="5"],
div.cardSum[index="5"] {
   /*Name change to civilisation*/
   background-image: url("../cards/5_Culture.jpg");
}

div.psudoCard[index="6"],
div.card[index="6"],
div.cardSum[index="6"] {
   background-image: url("../cards/6_rescourcing.jpg");
}

div.psudoCard[index="7"],
div.card[index="7"],
div.cardSum[index="7"] {
   background-image: url("../cards/7_extraction.jpg");
}

div.psudoCard[index="8"],
div.card[index="8"],
div.cardSum[index="8"] {
   background-image: url("../cards/8_Optimisation.jpg");
}

div.psudoCard[index="9"],
div.card[index="9"],
div.cardSum[index="9"] {
   background-image: url("../cards/9_Identity.jpg");
}

div.psudoCard[index="10"],
div.card[index="10"],
div.cardSum[index="10"] {
   background-image: url("../cards/10_Evolution.jpg");
}

div.psudoCard[index="11"],
div.card[index="11"],
div.cardSum[index="11"] {
   background-image: url("../cards/11_scales.jpg");
}

div.psudoCard[index="12"],
div.card[index="12"],
div.cardSum[index="12"] {
   background-image: url("../cards/12_Nature.jpg");
}

div.psudoCard[index="13"],
div.card[index="13"],
div.cardSum[index="13"] {
   background-image: url("../cards/13_frontier.jpg");
}

div.psudoCard[index="14"],
div.card[index="14"],
div.cardSum[index="14"] {
   background-image: url("../cards/14_Symbiosis.jpg");
}

div.psudoCard[index="15"],
div.card[index="15"],
div.cardSum[index="15"] {
   background-image: url("../cards/15_Intimacy.jpg");
}

div.psudoCard[index="16"],
div.card[index="16"],
div.cardSum[index="16"] {
   background-image: url("../cards/16_Consumption.jpg");
}

div.psudoCard[index="17"],
div.card[index="17"],
div.cardSum[index="17"] {
   background-image: url("../cards/17_Accountability.jpg");
}

div.psudoCard[index="18"],
div.card[index="18"],
div.cardSum[index="18"] {
   background-image: url("../cards/18_Yearning.jpg");
}

div.psudoCard[index="19"],
div.card[index="19"],
div.cardSum[index="19"] {
   background-image: url("../cards/19_genesis.jpg");
}

div.psudoCard[index="20"],
div.card[index="20"],
div.cardSum[index="20"] {
   background-image: url("../cards/20_Emancipation.jpg");
}

div.psudoCard[index="21"],
div.card[index="21"],
div.cardSum[index="21"] {
   background-image: url("../cards/21_transcendence.jpg");
}

/*TODO:images to cards*/