/* ═══════════════════════════════════════════════════════════════════════════
   Card box and grid layout.
   The fixed 180x250 card frame and the flex container it sits in.

   Deliberately NOT loaded by the binder page: binder.php never included these
   rules, because the 3D binder sizes each card from its grid cell. Loading
   them there would resize every slot.
   ═══════════════════════════════════════════════════════════════════════════ */

.pokemonCard {
  width: 180px;
  height: 250px;
  
    // width: clamp(200px, 61vh, 18vw);
    // height: clamp(280px, 85vh, 25.2vw);
  @media screen and (min-width: 768px) {
    // width: 61vh;
    // height: 85vh;
    // max-width: 500px;
    // max-height: 700px;
    width: clamp(12.9vw, 61vh, 18vw);
    height: clamp(18vw, 85vh, 25.2vw);
	max-height: 250px;
	max-width: 180px;
  }
  
  position: relative;
  overflow: hidden;
  margin: 20px;
  overflow: hidden;
  z-index: 10;
  touch-action: none;
  
   touch-action: auto;
    -ms-touch-action: auto;
  
  border-radius: 5% / 3.5%;
  box-shadow: 
    -2px -2px 2px -2px rgba(0, 0, 0, 0.5), 
    2px 2px 2px -2px rgba(0, 0, 0, 0.5), 
    -3px -3px 5px -2px transparent, 
    3px 3px 5px -2px transparent, 
    0 0 2px 0px rgba(255,255,255,0),
    0 27px 17px -10px rgba(0, 0, 0, 0.5);
  
  transition: transform 0.5s ease, box-shadow 0.2s ease;
  will-change: transform, filter;
  
  background-color: #040712;
  background-image: var(--front);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  transform-origin: center;
  
}

.pokemonCard.charizard {
  --color1: var(--charizard1);
  --color2: var(--charizard2);
  --front: var(--charizardfront);
}
.pokemonCard.pika {
  --color1: var(--pika1);
  --color2: var(--pika2);
  --front: var(--pikafront);
}
.pokemonCard.mewtwo {
  --color1: var(--mewtwo1);
  --color2: var(--mewtwo2);
  --front: var(--mewtwofront);
}
.pokemonCard.eevee {
  --color1: #ec9bb6;
  --color2: #ccac6f;
  --color3: #69e4a5;
  --color4: #8ec5d6;
  --color5: #b98cce;
  --front: var(--eeveefront);
}

.demo .pokemonCard {
  background-image: var(--back);
  font-size: 2vh
}
.demo .pokemonCard > span {
  position: relative;
  top: 45%;
}

.demo .pokemonCard:nth-of-type(1),
.demo .pokemonCard:nth-of-type(2),
.demo .pokemonCard:nth-of-type(3) {
	width: 180px;
  height: 250px;
  box-shadow: inset 0 0 0 1px rgba(white,0.4), 0 25px 15px -10px rgba(0, 0, 0, 0.5);
  animation: none;
}

.demo .pokemonCard:nth-of-type(1),
.demo .pokemonCard:nth-of-type(2),
.demo .pokemonCard:nth-of-type(3) {
  &:before, &:after {
    animation: none;
    // opacity: 1;
  } 
}
.demo .pokemonCard:nth-of-type(1) {
  &:before, &:after { display: none; }
}
.demo .pokemonCard:nth-of-type(2) {
  background: none;
  &:before { display: none; }
}
.demo .pokemonCard:nth-of-type(3) {
  background: none;
  &:after { display: none; }
}

.operator {
  display: inline-block;
  vertical-align: middle;
  font-size: 6vh;
}

.demo,
.pokemonCards { 
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  perspective: 2000px;
  position: relative;
  z-index: 1;
  transform: translate3d(0.1px, 0.1px, 0.1px )
}
.demo {
  flex-direction: row;
  justify-content: center;
}

@media screen and (min-width: 768px) {
  .pokemonCards {
    flex-direction: row;
  }
}

/* ── Enlarged card (modal / preview) ──────────────────────────────── */
.largeCard {
	width: 61vh;
    height: 85vh;
    max-width: 500px;
    max-height: 700px;
}

@media only screen and (max-width: 768px) {
  .pokemonCard {
      width: 144px;
	  height: 200px;
  }
}