/* The card alone turns; its grid footprint, arena, and five-card row stay fixed. */
.club-hero--showcase .hero-five-card.hero-flip-ready {
  aspect-ratio: 5 / 7;
  perspective: 1100px;
  -webkit-perspective: 1100px;
  perspective-origin: 50% 50%;
  box-shadow: none;
  overflow: visible;
}
.club-hero--showcase .hero-five-card.hero-flip-ready::before,
.club-hero--showcase .hero-five-card.hero-flip-ready::after { content: none; }
.club-hero--showcase .hero-flip-rotator {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotateY(0deg);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
}
.club-hero--showcase .hero-flip-face {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 2px;
  box-shadow: 3px 5px 8px #0007;
}
.club-hero--showcase .hero-flip-front { transform: rotateY(0deg); }
.club-hero--showcase .hero-flip-back { transform: rotateY(180deg); }
.club-hero--showcase .hero-flip-face::before {
  content: "";
  position: absolute;
  top: 1px;
  bottom: 0;
  right: -1px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(90deg, #e8dfcf, #a59787 55%, #4b4250);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.club-hero--showcase .hero-flip-face::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid #fff5e166;
  border-radius: 2px;
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.club-hero--showcase .hero-five-card.hero-flip-ready .hero-flip-face .card-face,
.club-hero--showcase .hero-five-card.hero-flip-ready .hero-flip-face img {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}