/* ===== Namespaced: CDP (Card Deck Piles) v1.5 ===== */

#cardTable{
  --card-w: 18rem;
  --card-h: 32rem;
  --radius: .6rem;
  --flip-duration: .35s;
  --move-duration: .35s;
  --perspective: 80rem;
  --gap: 2rem;
  --pile-pad: 1rem;
  --flip-scale: 1.15;
  

  position: relative;
  width: 100%;
  min-height: calc(var(--card-h) * var(--flip-scale) + 2 * var(--pile-pad) + 1rem);

  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-items: center;
  gap: var(--gap);
}

/* Enforce grid gaps inside Squarespace Fluid Engine */
.sqs-block-code .sqs-block-content #cardTable{
  gap: var(--gap) !important;
  column-gap: var(--gap) !important;
  row-gap: var(--gap) !important;
}

/* Piles */
#cardTable .pile{
  position: relative;
  height: calc(var(--card-h) * 1.1);     /* intrinsic; not % */
  width: clamp(14rem, 42%, 28rem);
  padding: var(--pile-pad);
  box-sizing: border-box;
  perspective: var(--perspective);
  border-radius: .75rem;
  outline: none;
  outline-offset: none;
}

/* Hide the seed container */
.cards-seed{ display:none; }

/* ---------- Card structure (namespaced) ---------- */
/* The card element travels (translate only); no tilt/shadow here */
#cardTable .cdp-card{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center;
  width: var(--card-w);
  height: var(--card-h);
  border-radius: var(--radius);
  user-select: none;
  cursor: pointer;
}

/* Shuttle holds tilt + outer shadow so travel axes stay unrotated */
#cardTable .cdp-shuttle{
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  transition: none;          /* allow inline transitions to override when needed */
  will-change: transform;
}


/* 3D flipper lives inside shuttle */
#cardTable .cdp-flipper{
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform var(--flip-duration);
}

/* Flip state */
#cardTable .cdp-card.is-flipped .cdp-flipper{
  transform: rotateY(180deg) scale(var(--flip-scale));
}

/* Faces */
#cardTable .cdp-face{
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  overflow: hidden;
  backface-visibility: hidden;
}
#cardTable .cdp-back{
  background-size: 102% 102%;
  background-position: center;
  background-repeat: no-repeat;
}
#cardTable .cdp-front{
  transform: rotateY(180deg);
  background: #f7f4ec;
  display: grid;
  place-items: center;
  padding: 1rem;
}
#cardTable .front-content{
  max-width: calc(var(--card-w) * .9);
  max-height: calc(var(--card-h) * .85);
  overflow: auto;
  line-height: 1.35;
  font-size: 1rem;
}

/* Discarded cards don’t accept clicks */
#cardTable .cdp-card.is-discarded{
  pointer-events: none;
  cursor: default;
}

#cardTable { isolation: isolate; }

/* Overlay above both piles for z-order-safe motion */
#cardTable #cdpOverlay{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2147483647;
  perspective: var(--perspective);
}



/* Motion safety */
@media (prefers-reduced-motion: reduce){
  #cardTable .cdp-flipper{ transition: none; }
}