.pit,.covered,.turned {
   position: absolute;
  left:-16.5em;
  left: var(--cardWidth,-16.5em);
font-size: inherit;
  width: 15em;
  height: 25em;   
  width: var(--cardWidth,15em);
  height: var(--cardHeight,25em);  
  display: block;
}

.covered{
   transform:translateX(calc( 3em + 100%));
}

.turned,.covered{
   background-color: #fff9;
   border:dotted 1px #0009;
   border-radius: 1.1em;
   cursor: pointer;
}

.pit {
pointer-events: none;
}
.card {
    width: 15em;
    height: 25em;   
    width: var(--cardWidth,15em);
    height: var(--cardHeight,25em);  
   will-change: transform;
    transition-property: transform, transform-origin;
    transition-duration: 0.25s ;
    transform-origin: right 75%;
    transition-timing-function: ease-in-out;
    transform-style: preserve-3d;
    cursor: pointer;
    position: absolute;
    font-family: 'Times New Roman', Times, serif;
    background-color: #ffffff;
    text-align: center;
    text-shadow: none;
    border-radius: 1em;
    display: inline-block;
    z-index: 0;
    box-shadow:  0 0.5px 1.5px 0.3px #0002;
   
}

.card.flipped {
    transform: rotateY(180deg)  translateX(calc( -3em ));
   
}
.card.turning{
  /*
  transform: rotateY(5deg) translateX(calc(  50%)) translateZ(-7.5em);*/
  
}

.top-card a{
     pointer-events: all;     
}
.back {
    background-image: url('cardback.gif');
    background-size: 3em;
    transform: translateZ(-1px) rotateY(180deg);
}
.face {
    position: absolute;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 0 0.25em #000000;
    backface-visibility: hidden;
    border-radius: 1em;
    border: solid 0.5em #ffffff;
    transform-style: preserve-3d;
}

.card-corner {
   padding: 0;
   margin: 0;
   text-shadow: none;
   width: 2em;
   line-height: 1em;
   text-align: center;   
   position: absolute;   
   font-weight: bold;
   font-size: 1.35em;
   display: grid;
   grid-template-columns: auto;
   grid-template-rows: 1em 1em;
}

.suit-♥,.suit-♦{
    color: #dd0000;
}
.suit-♣,.suit-♠{
    color:#111111;
}


.card-corner:nth-child(1) {
    top: 0.5em;
    left: 0;
}

.card-corner:nth-child(2) {
    top: 0.5em;
    right: 0;
}

.card-corner:nth-child(3) {
    bottom: 0.5em;
    right: 0;
    transform: rotate(180deg);
}

.card-corner:nth-child(4) {
    bottom: 0.5em;
    left: 0;
    transform: rotate(180deg);
}

.corner-nominal-value {
  
}
.corner-suit {
    font-size: 1.5em;    
    --suited:calc(var(--suitunisize) *  1.5em);
    font-size:var(--suited, 1.5em);
}

.card-content{
display: grid;
height: 100%;
margin: 0 2em;
grid-template-columns: 1fr 1fr 1fr;
place-items: center;
}
.reversed{
    transform: rotate(180deg);
}
.card-figure-suit,
.card-value-unit{
    font-size:4em;    
    --suited:calc(var(--suitunisize) *  4em);
    font-size:var(--suited, 4em);
    line-height: 1em;  
}
.card-figure-suit{
   vertical-align: baseline;
}
.card-figure-face{
   font-size:4.5em;     
}
.card.value-1 .card-content,
.card.value-2 .card-content,
.card.value-3 .card-content,
.card.value-4 .card-content,
.card.value-5 .card-content,
.card.value-6 .card-content{
    grid-template-rows: 1fr 1fr 1fr;
    
}
.card.value-7 .card-content,
.card.value-8 .card-content{
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
    
}
.card.value-9 .card-content,
.card.value-10 .card-content{
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    
}
.card.value-9 .card-content,
.card.value-10 .card-content{
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    
}
.card.value-11 .card-content,
.card.value-12 .card-content,
.card.value-13 .card-content{
    grid-template-rows: auto 1fr auto;
    
}
.card.value-1 .card-value-unit:nth-child(1){
    grid-column: 2;
    grid-row: 2;
}
.card.value-2 .card-value-unit:nth-child(1){
    grid-column: 2;
    grid-row: 1;
}
 .card.value-2 .card-value-unit:nth-child(2){
    grid-column: 2;
    grid-row: 3;
    transform: rotate(180deg);
 }
 .card.value-3 .card-value-unit:nth-child(1){
    grid-column: 2;
    grid-row: 1;
 }
 .card.value-3 .card-value-unit:nth-child(2){
    grid-column: 2;
    grid-row: 2;
 }
 .card.value-3 .card-value-unit:nth-child(3){
    grid-column: 2;
    grid-row: 3;
    transform: rotate(180deg);
 }
 .card.value-4 .card-value-unit:nth-child(1){
    grid-column: 1;
    grid-row: 1;
 }
 .card.value-4 .card-value-unit:nth-child(2){
    grid-column: 3;
    grid-row: 1;    
 }
 .card.value-4 .card-value-unit:nth-child(3){
    grid-column: 1;
    grid-row: 3;
    transform: rotate(180deg);
 }
 .card.value-4 .card-value-unit:nth-child(4){
    grid-column: 3;
    grid-row: 3;
    transform: rotate(180deg);
 }
 .card.value-5 .card-value-unit:nth-child(1){
    grid-column: 1;
    grid-row: 1;
 }
 .card.value-5 .card-value-unit:nth-child(2){
    grid-column: 3;
    grid-row: 1;    
 }
 .card.value-5 .card-value-unit:nth-child(3){
    grid-column: 1;
    grid-row: 3;
    transform: rotate(180deg);
 }
 .card.value-5 .card-value-unit:nth-child(4){
    grid-column: 3;
    grid-row: 3;
    transform: rotate(180deg);
 }
 .card.value-5 .card-value-unit:nth-child(5){
    grid-column: 2;
    grid-row:2;
 }
 .card.value-6 .card-value-unit:nth-child(1){
    grid-column: 1;
    grid-row: 1;
 }
 .card.value-6 .card-value-unit:nth-child(2){
    grid-column: 1;
    grid-row: 2;
 }
 .card.value-6 .card-value-unit:nth-child(3){
    grid-column: 1;
    grid-row: 3;
    transform: rotate(180deg);
 }
 .card.value-6 .card-value-unit:nth-child(4){
    grid-column: 3;
    grid-row: 1;
 }
 .card.value-6 .card-value-unit:nth-child(5){
    grid-column: 3;
    grid-row: 2;
 }
 .card.value-6 .card-value-unit:nth-child(6){
    grid-column: 3;
    grid-row: 3;
    transform: rotate(180deg);
 }
 
 .card.value-7 .card-value-unit:nth-child(1){
    grid-column: 1;
    grid-row: 1 / span 2;
    
 }
 .card.value-7 .card-value-unit:nth-child(2){
    grid-column: 1;
    grid-row: 3 / span 2;
 }
 .card.value-7 .card-value-unit:nth-child(3){
    grid-column: 1;
    grid-row: 5 / span 2;
    transform: rotate(180deg);
 }
 .card.value-7 .card-value-unit:nth-child(4){
    grid-column: 2;
    grid-row: 2 / span 2;
 }
 .card.value-7 .card-value-unit:nth-child(5){
    grid-column: 3;
    grid-row: 1 / span 2;
   
 }
 .card.value-7 .card-value-unit:nth-child(6){
    grid-column: 3;
    grid-row: 3 / span 2;
    
 }
 .card.value-7 .card-value-unit:nth-child(7){
    grid-column: 3;
    grid-row: 5 / span 2;
    transform: rotate(180deg);
 }
 .card.value-8 .card-value-unit:nth-child(1){
    grid-column: 1;
    grid-row: 1 / span 2;
    
 }
 .card.value-8 .card-value-unit:nth-child(2){
    grid-column: 1;
    grid-row: 3 / span 2;
 }
 .card.value-8 .card-value-unit:nth-child(3){
    grid-column: 1;
    grid-row: 5 / span 2;
    transform: rotate(180deg);
 }
 .card.value-8 .card-value-unit:nth-child(4){
    grid-column: 2;
    grid-row: 2 / span 2;
 }
 .card.value-8 .card-value-unit:nth-child(5){
    grid-column: 2;
    grid-row: 4 / span 2;
    transform: rotate(180deg);
 }
 .card.value-8 .card-value-unit:nth-child(6){
    grid-column: 3;
    grid-row: 1 / span 2;
   
 }
 .card.value-8 .card-value-unit:nth-child(7){
    grid-column: 3;
    grid-row: 3 / span 2;
    
 }
 .card.value-8 .card-value-unit:nth-child(8){
    grid-column: 3;
    grid-row: 5 / span 2;
    transform: rotate(180deg);
 }
 
 .card.value-9 .card-value-unit:nth-child(1){
    grid-column: 1;
    grid-row: 1 / span 2;   
 }
 .card.value-9 .card-value-unit:nth-child(2){
    grid-column: 1;
    grid-row: 3 / span 2;   
 }
 .card.value-9 .card-value-unit:nth-child(3){
    grid-column: 1;
    grid-row: 5 / span 2;      
    transform: rotate(180deg); 
 }
 .card.value-9 .card-value-unit:nth-child(4){
    grid-column: 1;
    grid-row: 7 / span 2;       
    transform: rotate(180deg);
 }
 .card.value-9 .card-value-unit:nth-child(5){
    grid-column: 2;
    grid-row: 4 / span 2;   
 }
 .card.value-9 .card-value-unit:nth-child(6){
    grid-column: 3;
    grid-row: 1 / span 2;   
 }
 .card.value-9 .card-value-unit:nth-child(7){
    grid-column: 3;
    grid-row: 3 / span 2;   
 }
 .card.value-9 .card-value-unit:nth-child(8){
    grid-column: 3;
    grid-row: 5 / span 2;       
    transform: rotate(180deg);
 }
 .card.value-9 .card-value-unit:nth-child(9){
    grid-column: 3;
    grid-row: 7 / span 2; 
    transform: rotate(180deg);  
 }
 .card.value-10 .card-value-unit:nth-child(1){
    grid-column: 1;
    grid-row: 1 / span 2;   
 }
 .card.value-10 .card-value-unit:nth-child(2){
    grid-column: 1;
    grid-row: 3 / span 2;   
 }
 .card.value-10 .card-value-unit:nth-child(3){
    grid-column: 1;
    grid-row: 5 / span 2;  
    transform: rotate(180deg);  
 }
 .card.value-10 .card-value-unit:nth-child(4){
    grid-column: 1;
    grid-row: 7/ span 2;   
    transform: rotate(180deg); 
 }
 .card.value-10 .card-value-unit:nth-child(5){
    grid-column: 2;
    grid-row: 2 / span 2;   
 }
 .card.value-10 .card-value-unit:nth-child(6){
    grid-column: 2;
    grid-row: 6 / span 2;  
    transform: rotate(180deg);  
 }
 .card.value-10 .card-value-unit:nth-child(7){
    grid-column: 3;
    grid-row: 1 / span 2;   
 }
 .card.value-10 .card-value-unit:nth-child(8){
    grid-column: 3;
    grid-row: 3 / span 2;   
 }
 .card.value-10 .card-value-unit:nth-child(9){
    grid-column: 3;
    grid-row: 5 / span 2;   
    transform: rotate(180deg); 
 }
 .card.value-10 .card-value-unit:nth-child(10){
    grid-column: 3;
    grid-row: 7 / span 2;   
    transform: rotate(180deg); 
 }

 .card-figure-suit{
    grid-column: 1;
    grid-row: 1;   
    align-self: normal;
}

 .card-figure-suit.reversed{
    grid-column: 3;
    grid-row: 3;   
}

 .card-figure-face{
    grid-column: 2 /span 2;
    grid-row: 1/span 1;   
}
.card-figure-face:before{  
    font-size: 0.75em;
   /* --suited:calc(var(--suitunisize) *  0.75em);
    font-size:var(--suited, 0.75em);*/
    position: absolute;
    top: 1em;
    margin-left: -1.1em;
    color: #111;
}
.suit-♥.card.value-11 .card-figure-face:before{content:'🍡';}
.suit-♦.card.value-11 .card-figure-face:before{content:'🍺';}
.suit-♣.card.value-11 .card-figure-face:before{content:'🎻';}
.suit-♠.card.value-11 .card-figure-face:before{content:'🍷';}
.suit-♥.card.value-12 .card-figure-face:before{content:'🌻';}
.suit-♦.card.value-12 .card-figure-face:before{content:'🌹';}
.suit-♣.card.value-12 .card-figure-face:before{content:'🌼';}
.suit-♠.card.value-12 .card-figure-face:before{content:'🌷';}
.suit-♥.card.value-13 .card-figure-face:before{content:'🔨';}
.suit-♦.card.value-13 .card-figure-face:before{content:'🔪';}
.suit-♣.card.value-13 .card-figure-face:before{content:'🧨';}
.suit-♠.card.value-13 .card-figure-face:before{content:'🪓';}

 .card-figure-face.reversed{
    grid-column: 1 /span 2;
    grid-row: 3/span 1;   
}
.suit-♥ .card-figure-cloth{
    background-color: #a00;
    background-image: repeating-radial-gradient(#1110 0 0.1em, #111 0.1em 0.2em, #900 0.2em 0.4em, #fff 0.4em 0.7em,#fff0 0.7em 1em);
    background-size: 7% 7%;    
}
.suit-♦ .card-figure-cloth{
    background-color: #0a0;
    background-image: repeating-linear-gradient(60deg,#1110 0 0.1em,#111 0.1em 0.2em, #090 0.2em 0.3em, #fff 0.3em 0.4em,#fff0 0.4em 1em);
    background-size: 10% 10%;
   }
.suit-♣ .card-figure-cloth{
    background-color: #a0a;
    background-image: repeating-linear-gradient(-60deg,#1110 0 0.3em,#111 0.3em 0.4em, #909 0.4em 0.6em, #fff 0.6em 0.8em,#fff0 0.8em 1em);
    background-size: 9% 8%;
}
.suit-♠ .card-figure-cloth{
    background-color: #00a;
    background-image: repeating-radial-gradient(#1110 0 0.2em, #111 0.2em 0.3em, #009 0.3em 0.35em, #fff 0.35em 0.4em,#fff0 0.4em 1em);
    background-size: 20% 20%;
}
.card.value-11 .card-figure-cloth{
    border-radius: 6em 1em;
}
.card.value-12 .card-figure-cloth{
    border-radius: 9em 2em;
}
.card.value-13 .card-figure-cloth{
    border-radius: 3em 1em;
}
.card-figure-cloth{
    grid-column: 1 /span 3;
    grid-row: 2/span 1;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 6em 1em;
    transform: skew(-10deg) rotate(-20deg);
    overflow: hidden;
}
.card-figure-cloth span{
   background-image: 
   repeating-radial-gradient(#1110 0 1em, #111 1em 2em, #dd00 2em 3.5em, #fff 3.5em 4.45em, #1119 4.5em 4.55em, #fff 4.6em 5em),
   linear-gradient(65deg, #1110 0 25%, #111 25% 35%, #00d 35% 55%, #1110 55% 100%),
   linear-gradient(-30deg, #0000 0 45%, #dd0 45% 55%, #0000 55% 100%);
   
   background-size: 100% 140%,
   100% 100%,
   100% 100%;
   background-position-x: 3.65em,
   center,
   center;

   background-repeat: no-repeat repeat, no-repeat;
   background-blend-mode:normal,
   hue,
   normal;
   mix-blend-mode: hard-light;
   display: block;
   width: 100%;
   height: 50%;
}