/* One physical card per eligible option. Only transforms animate the spread. */
.deck-stage { --fan-scale: 2.375; height: 366px; }
.shuffle-cards { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.shuffle-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80px;
  height: 120px;
  perspective: 800px;
  transform: translate(calc(-50% + var(--fan-x)), calc(-50% + var(--fan-y))) rotate(var(--fan-angle)) scale(var(--fan-scale));
}
.shuffle-inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; }
.shuffle-back, .shuffle-face {
  position: absolute;
  inset: 0;
  border: 1px solid #bea06b;
  border-radius: 4px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 3px 7px #0007;
}
.shuffle-back { background: #30233c url('assets/fortune-card-back.png') center / cover no-repeat; }
.shuffle-face {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
  padding: 8px 3px;
  background: #201923;
  border-color: var(--card-color);
  box-shadow: inset 0 0 0 3px #100d16, inset 0 0 0 4px #675037, 0 3px 8px #0008;
  transform: rotateY(180deg);
}
.shuffle-portrait { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; }
.shuffle-portrait img { display: block; width: 100%; height: 100%; object-fit: contain; }
.shuffle-portrait:has(.faction-crest) { height: 43px; }
.shuffle-face strong { color: var(--card-color); font: 600 10px/1.3 var(--font-body); text-align: center; text-wrap: balance; }
.shuffle-pip { color: #cfac75; font-size: 8px; line-height: 1; }
.fortune-table .main-card { z-index: 30; transition: filter .2s; }
.shuffle-card.is-top-card { visibility: hidden; }
.fortune-table.is-shuffling .shuffle-card.is-top-card { visibility: visible; }
.fortune-table.is-shuffling .main-card { visibility: hidden; opacity: 0; animation: none; }
.fortune-table.is-resolved .shuffle-cards, .fortune-table.is-empty .shuffle-cards { display: none; }
.fortune-table.is-shuffling .shuffle-card { will-change: transform; }
@media (max-width: 920px) { .deck-stage { --fan-scale: 2.2375; } }
@media (max-width: 700px) { .deck-stage { --fan-scale: 2.225; } }
@media (max-width: 420px) { .deck-stage { --fan-scale: 2.1875; height: 336px; } }
@media (prefers-reduced-motion: reduce) {
  .fortune-table.is-shuffling .main-card { visibility: visible; opacity: 1; }
  .fortune-table.is-shuffling .shuffle-card.is-top-card { visibility: hidden; }
  .fortune-table .main-card { transition: none; }
}