.spread { position: relative; width: 100%; margin: 0 auto; --card-w: 18%; }
.spread--single { aspect-ratio: 1 / 1; max-width: 340px; --card-w: 58%; }
.spread--three  { aspect-ratio: 3 / 1.75; max-width: 760px; --card-w: 25%; }
.spread--celtic { aspect-ratio: 16 / 12; --card-w: 15%; }

.card-slot {
  position: absolute;
  left: var(--x); top: var(--y);
  width: var(--card-w);
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
}
.card-slot__label {
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); text-align: center; white-space: nowrap;
}
.card-slot--rotated .card { transform: rotate(90deg); }
.card-slot--rotated .card-slot__label,
.card-slot--rotated .card__caption { transform: translateY(-1.4em); }

.card {
  width: 100%; aspect-ratio: 5 / 9;
  background: none; border: 0; padding: 0;
  perspective: 1200px; cursor: pointer;
  border-radius: 8px;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.6));
}
.card__inner {
  position: relative; display: block; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform var(--flip-ms) cubic-bezier(0.4, 0.2, 0.2, 1);
}
.card:hover .card__inner, .card:focus-visible .card__inner { transform: translateY(-4px); }
.card.is-revealed .card__inner,
.card.is-revealed:hover .card__inner { transform: rotateY(180deg); }
.card.is-revealed { cursor: default; }

.card__face {
  position: absolute; inset: 0; display: block;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 8px; overflow: hidden;
  border: 2px solid var(--gold-soft);
}
.card__face--back { background: var(--card-back); }
.card__face--back::after {
  content: ""; position: absolute; inset: 14%;
  border: 1px solid var(--gold-soft); border-radius: 50%;
}
.card__face--front {
  transform: rotateY(180deg);
  background: radial-gradient(circle at 50% 35%, #2b1a3a, #0d0912);
  display: flex; align-items: center; justify-content: center;
}
.card__face--front img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card.is-reversed .card__face--front img { transform: rotate(180deg); }
.card__fallback {
  position: relative; padding: 0.5em; text-align: center;
  font-family: var(--font-display); font-size: clamp(0.7rem, 1.6vw, 1.1rem);
  color: var(--gold); line-height: 1.2;
}
.card.is-reversed .card__fallback { transform: rotate(180deg); }

.card__caption {
  text-align: center; font-size: 0.8rem; line-height: 1.3;
  opacity: 0; transition: opacity 0.5s 0.35s;
}
.card-slot.is-revealed .card__caption { opacity: 1; }
.card__name { display: block; font-family: var(--font-display); font-size: 1.05em; color: var(--ink); }
.card__orient { color: var(--ink-dim); font-style: italic; }
.card__keywords { display: block; color: var(--ink-dim); font-size: 0.9em; }
.spread--celtic .card__keywords { display: none; }
.spread--celtic .card__caption { font-size: 0.68rem; }

@keyframes card-enter { from { opacity: 0; transform: translate(-50%, -40%); } to { opacity: 1; } }
.card-slot { animation: card-enter 0.5s ease both; }

@media (max-width: 640px) {
  .spread, .spread--single, .spread--three, .spread--celtic {
    aspect-ratio: auto; max-width: none;
    display: flex; flex-direction: column; align-items: center; gap: 1.5rem;
  }
  .card-slot { position: static; transform: none; width: min(58vw, 220px); animation: none; }
  .card-slot--rotated .card,
  .card-slot--rotated .card-slot__label,
  .card-slot--rotated .card__caption { transform: none; }
  .spread--celtic .card__keywords { display: block; }
  .spread--celtic .card__caption { font-size: 0.8rem; }
}