/* 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:2px solid #000;
  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 .4s ease;
}

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

.cardflip-card-back{
  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);
}

.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[data-face-up="false"] .cardflip-card-center{
  visibility:hidden;
  opacity:0;
}

.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{
  padding:0 2px;
  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{
  --inset-h:12%;
  --inset-v:12%;
  content:"";
  position:absolute;
  inset:var(--inset-v) var(--inset-h);
  background:#5a5a5a;
}

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

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

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

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

body.shapes-mode .shape-icon[data-shape="rhombus"]::before{
  inset:16% 14%;
  clip-path:polygon(50% 6%,92% 50%,50% 94%,8% 50%);
}

.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;
}