:root {
   --rarity0: #111;
   --rarity1: #005b5a;
   --rarity2: #91abbb;
   --rarity3: #38fcfd;
   --rarity4: #dea630;
}

.card {
   /* non ios perspective: 800px; */
}

.cardImage {
   background-image: url("../images/cards/101.jpg");
   background-size: 100%;
   background-position: center top;
}

.borderOuter {
   position: absolute;
   background-size: 100% 100%;
   z-index: 2;
   left: -10px;
   right: -10px;
   top: -14px;
   bottom: -19px;
}

[data-rarity="0"] .borderOuter {
   border: 8px solid #111;
   border-radius: 8px;
   left: 0px;
   right: 0px;
   top: -5px;
   bottom: -8px; /* was -15, produced gap below in played cards*/
}

[data-rarity="1"] .borderOuter {
   background-image: url("../images/cardBorders/01_cutout.png");
   border-radius: 28px;
}

[data-rarity="2"] .borderOuter {
   background-image: url("../images/cardBorders/02_cutout.png");
}

[data-rarity="2"] .cardImage {
   border-radius: 20px;
}

[data-rarity="3"] .borderOuter {
   background-image: url("../images/cardBorders/03_cutout.png");
}

[data-rarity="4"] .borderOuter {
   background-image: url("../images/cardBorders/04_cutout.png");
}

/* cardsPlayed card border   / */
.boxCardsPlayed [data-rarity="1"] .borderOuter {
   background-image: url("../images/cardBorders/01_mid.png");
}

.boxCardsPlayed [data-rarity="2"] .borderOuter {
   background-image: url("../images/cardBorders/02_mid.png");
}

.boxCardsPlayed [data-rarity="3"] .borderOuter {
   background-image: url("../images/cardBorders/03_mid.png");
}

.boxCardsPlayed [data-rarity="4"] .borderOuter {
   background-image: url("../images/cardBorders/04_mid.png");
}

/* unitType box of played cards */
.boxCardsPlayed [data-rarity="1"] .unitType {
   right: -1px;
}

.boxCardsPlayed [data-rarity="3"] .unitType {
   background: rgba(100, 200, 220, 0.6);
   bottom: -10px;
   right: -1px;
   color: aqua;
}

[data-rarity="3"] .hp {
   background-image: linear-gradient(90deg, rgba(100,100,100, .8) 80%,  rgba(120, 200, 200, 0.7));
   background-color: rgba(120, 200, 200, 0.8);
}

[data-rarity="3"] .attack {
   background-image: linear-gradient(90deg, rgba(171, 40, 82, 0.8) 10%,  rgba(150, 60, 60, 0.7)) ;
}

[data-rarity="3"] .cardTexts {
   border-bottom-left-radius: 30px;
   border-bottom-right-radius: 30px;
}

[data-rarity="4"] .attack {
   background-image: linear-gradient(90deg, rgba(204,162,54, .8) 10%,  rgba(150, 60, 60, 0.7));
}

[data-rarity="4"] .hp {
   background-image: linear-gradient(90deg, rgba(100,100,100, .8) 80% , rgba(155, 150, 130, 0.8));
}

[data-rarity="4"] .cardTexts {
   border-bottom-left-radius: 30px;
   border-bottom-right-radius: 30px;
}

/*       .front {
    position: absolute;
    width: 5px;
    height: 16px;
    background: linear-gradient(to bottom, #999, #666);
    transform: rotateY(90deg) rotateX(10deg) translateX(4px) translateY(28px) translateZ(40px);
 } */

@keyframes rotateFlat {
   0% {
      transform: rotateY(270deg);
   }
   60% {
      transform: rotateY(360deg);
   }
   75% {
      transform: rotateY(340deg);
   }
   85% {
      transform: rotateY(360deg);
   }
   90% {
      transform: rotateY(345deg);
   }
   95% {
      transform: rotateY(360deg);
   }
   97% {
      transform: rotateY(355deg);
   }
   100% {
      transform: rotateY(360deg);
   }
}

/* explain dispaying rarity with panorama box*/

.boxExplainRarity[data-rarity="0"] {
   background-image: url(../images/cardBorders/00text.png);
}
.boxExplainRarity[data-rarity="1"] {
   background-image: url(../images/cardBorders/01text.png);
}
.boxExplainRarity[data-rarity="2"] {
   background-image: url(../images/cardBorders/02text.png);
}
.boxExplainRarity[data-rarity="3"] {
   background-image: url(../images/cardBorders/03text.png);
}
.boxExplainRarity[data-rarity="4"] {
   background-image: url(../images/cardBorders/04text.png);
}

.txtRarity1 {
   color: #91abbb !important;
   text-shadow: 0 0 5px #111;
}
.txtRarity2 {
   color: #eee !important;
   text-shadow: 0 0 5px black;
}
.txtRarity3 {
   color: var(--rarity3) !important;
}
.txtRarity4 {
   color: var(--rarity4) !important;
   xtext-shadow: -1px 0 0px white, 0 0 5px #111;
   letter-spacing: 1px;
}

/* .boxCardsPlayed .card[data-rarity='0'] .cardInner {border: 5px solid var(--rarity0)!important}
.boxCardsPlayed .card[data-rarity='1'] .cardInner {border: 5px solid var(--rarity1)!important}
.boxCardsPlayed .card[data-rarity='2'] .cardInner {border: 5px solid var(--rarity2)!important}
.boxCardsPlayed .card[data-rarity='3'] .cardInner {border: 5px solid var(--rarity3)!important}
.boxCardsPlayed .card[data-rarity='4'] .cardInner {border: 5px solid var(--rarity4)!important} */