/* CardFlip - Cards */

.card,
.cardflip-card{
  position:relative;
  width:var(--cardflip-card-w,clamp(48px,14vw,90px));
  height:var(--cardflip-card-h,clamp(64px,18vw,120px));
  border:0;
  border-radius:8px;
  background:transparent;
  color:transparent;
  cursor:pointer;
  font-size:var(--cardflip-card-font,clamp(28px,5vw,44px));
  font-weight:700;
  perspective:800px;
  transition:border-color .3s ease,box-shadow .3s ease;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}

.card:focus,
.card:focus-visible,
.cardflip-card:focus,
.cardflip-card:focus-visible{
  outline:0;
}

.card.matched,
.cardflip-card.matched,
.cardflip-card.is-matched{
  pointer-events:none;
}

.cardflip-card.matched{
  border-color:#3b7a00;
  color:#3b7a00!important;
}

.cardflip-card-inner{
  position:absolute;
  inset:0;
  border-radius:6px;
  transform-style:preserve-3d;
  transition:transform .25s ease;
}

.cardflip-card-face{
  position:absolute;
  inset:0;
  overflow:hidden;
  border-radius:6px;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  border:3px solid #000;
}

.cardflip-card-back{
  transform:rotateY(0deg) translateZ(1px);
  background-image:url("../assets/images/cardStyles/cardStyleDefault.png");
  background-position:center;
  background-repeat:no-repeat;
  background-size:120%;
}

.cardflip-card-front{
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--cardflip-face-bg,#fff);
  color:#000;
  transform:rotateY(180deg) translateZ(1px);
}

.cardflip-card[data-face-up="true"] .cardflip-card-inner,
.cardflip-card.is-matched .cardflip-card-inner{
  transform:rotateY(180deg);
}

.cardflip-card-center{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:transparent;
  font-size:var(--cardflip-card-face-font,clamp(24px,5vw,42px));
  font-weight:700;
  line-height:1;
  pointer-events:none;
  user-select:none;
}

.cardflip-card .cardflip-card-top{
  display:none;
}

.cardflip-card[data-face-up="true"]{
  color:#000;
}

.cardflip-card.cardflip-red-suit .cardflip-card-center{
  color:red;
}

.cardflip-card[data-face-up="true"].cardflip-red .cardflip-card-center{
  color:red!important;
}

body.colors-mode .cardflip-card{
  container-type:inline-size;
}

body.colors-mode .cardflip-card[data-face-up="true"],
body.colors-mode .cardflip-card.is-matched{
  background-image:none!important;
}

body.colors-mode .cardflip-card .cardflip-card-center{
  --fit-scale:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  overflow:hidden;
  font-size:clamp(16px,18cqw,96px);
  font-weight:700;
  line-height:1;
  transform:scale(var(--fit-scale));
  transform-origin:center;
  white-space:nowrap;
  will-change:transform;
}

body.colors-mode .cardflip-card[data-face-up="true"] .cardflip-card-center{
  color:inherit;
}

body.shapes-mode .cardflip-card .cardflip-card-center{
  position:relative;
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  color:transparent;
}

body.shapes-mode .cardflip-card-center.shape-icon::before{
  content:"";
  position:absolute;
  width:72%;
  aspect-ratio:1;
  background:#365d58;
}

body.shapes-mode .shape-icon[data-shape="circle"]::before{
  border-radius:50%;
}

body.shapes-mode .shape-icon[data-shape="square"]::before{
  border-radius:0;
}

body.shapes-mode .shape-icon[data-shape="rounded_square"]::before{
  border-radius:20%;
}

body.shapes-mode .shape-icon[data-shape="diamond"]::before{
  clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);
}

body.shapes-mode .shape-icon[data-shape="rhombus"]::before{
  aspect-ratio:1.5;
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}

body.shapes-mode .shape-icon[data-shape="triangle"]::before{clip-path:polygon(50% 0,100% 100%,0 100%);}
body.shapes-mode .shape-icon[data-shape="rectangle"]::before{aspect-ratio:1.65;}
body.shapes-mode .shape-icon[data-shape="pentagon"]::before{clip-path:polygon(50% 0,100% 38%,81% 100%,19% 100%,0 38%);}
body.shapes-mode .shape-icon[data-shape="oval"]::before{aspect-ratio:.65;border-radius:50%;}
body.shapes-mode .shape-icon[data-shape="capsule"]::before{aspect-ratio:1.8;border-radius:999px;}
body.shapes-mode .shape-icon[data-shape="rounded_triangle"]::before{clip-path:polygon(50% 3%,57% 8%,98% 87%,98% 95%,91% 100%,9% 100%,2% 95%,2% 87%,43% 8%);border-radius:18%;}
body.shapes-mode .shape-icon[data-shape="bean"]::before{aspect-ratio:.8;border-radius:80% 25% 60% 35%;transform:rotate(25deg);}
body.shapes-mode .shape-icon[data-shape="half_circle"]::before{aspect-ratio:2;border-radius:100% 100% 0 0 / 200% 200% 0 0;}
body.shapes-mode .shape-icon[data-shape="trapezoid"]::before{aspect-ratio:1.4;clip-path:polygon(25% 0,75% 0,100% 100%,0 100%);}
body.shapes-mode .shape-icon[data-shape="parallelogram"]::before{aspect-ratio:1.4;clip-path:polygon(25% 0,100% 0,75% 100%,0 100%);}
body.shapes-mode .shape-icon[data-shape="chevron"]::before{clip-path:polygon(0 0,55% 0,100% 50%,55% 100%,0 100%,45% 50%);}
body.shapes-mode .shape-icon[data-shape="arrowhead"]::before{clip-path:polygon(0 0,100% 50%,0 100%,28% 50%);}
body.shapes-mode .shape-icon[data-shape="kite"]::before{clip-path:polygon(50% 0,100% 30%,50% 100%,0 30%);}
body.shapes-mode .shape-icon[data-shape="right_triangle"]::before{clip-path:polygon(0 0,100% 100%,0 100%);}
body.shapes-mode .shape-icon[data-shape="hexagram"]::before{clip-path:polygon(50% 0,65% 25%,95% 25%,80% 50%,95% 75%,65% 75%,50% 100%,35% 75%,5% 75%,20% 50%,5% 25%,35% 25%);}

.cardflip-card:focus-visible{outline:3px solid #efc969;outline-offset:4px;}
.cardflip-card.is-matched .cardflip-card-front{border:3px solid #3b7a00;}
.cardflip-card.is-matched:not([data-mode="colors"]) .cardflip-card-front{background:#edf7e7;}
.cardflip-card.is-matched[data-mode="normal"] .cardflip-card-center{color:green!important;}
body.shapes-mode .cardflip-card.is-matched .shape-icon::before{background:green;}
@media (prefers-reduced-motion:reduce){.cardflip-card-inner{transition:none;}}

.cardflip-card.challenge-blank .cardflip-card-center{
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none;
}

.cardflip-card[data-face-up="true"].challenge-blank{
  background-image:none!important;
}

.cardflip-card.flipping-down .cardflip-card-center{
  visibility:visible!important;
  opacity:1!important;
}

.blind-match-fx{
  position:absolute;
  inset:-18%;
  z-index:3;
  width:136%;
  height:136%;
  object-fit:contain;
  pointer-events:none;
}