/* Visible card-back stacks anchor every collection, draw, and redeal. */
.deck-status { gap: 12px; }
.deck-stack {
  position: relative; display: inline-grid; place-items: center;
  flex: 0 0 40px; width: 40px; height: 51px;
  transform: translateZ(0); perspective: 250px;
}
.deck-stack::before, .deck-stack::after, .deck-stack .deck-face {
  position: absolute; width: 32px; height: 44px; border-radius: 5px;
  border: 2px solid #d5e8c5; box-shadow: 0 2px 3px #001d1850;
}
.deck-stack::before, .deck-stack::after { content: ''; background: #1c574b; }
.deck-stack::before { transform: translate(-4px, 4px) rotate(-5deg); }
.deck-stack::after { transform: translate(-1px, 2px) rotate(2deg); }
.deck-stack .deck-face {
  display: grid; place-items: center; z-index: 1;
  color: #e6f4da; font: 18px/1 Georgia, serif;
  background: repeating-linear-gradient(45deg,#235f53 0 4px,#184a41 4px 8px);
  outline: 1px solid #6c9981; outline-offset: -5px;
}
.deck-stack.tabletop-shuffle .deck-face { animation: deck-gather .22s ease-in-out both; }
@keyframes deck-gather {
  0%, 100% { transform: translateX(0) rotate(0); }
  42% { transform: translateX(-9px) rotate(-9deg); }
  76% { transform: translateX(5px) rotate(5deg); }
}
.playing-card.tabletop-travel {
  position: fixed; z-index: 140; margin: 0; pointer-events: none;
  transform-origin: center center; will-change: transform, opacity;
  box-shadow: 0 14px 25px #001d1573, 0 4px 0 #c4d0bd;
}
/* Empty slots occupy the same footprint as dealt cards, so the table doesn't jump. */
.card-placeholder { width: 100%; max-width: 131px; max-height: 180px; min-height: 130px; }
.tabletop-travel-back {
  position: absolute; inset: -1px; border-radius: inherit;
  display: grid; place-items: center;
  color: #e1f1cb; font: 46px/1 Georgia, serif;
  border: 5px solid #e7eddd;
  box-shadow: inset 0 0 0 2px #a0bba3, inset 0 0 0 7px #225c4c;
  background: repeating-linear-gradient(45deg,#235f53 0 9px,#184a41 9px 18px);
}
/* Opening ritual: a single shuffled pack is split into two visible, equal draw decks. */
.table-top.preparing-deck .card-row { visibility: hidden; }
.opening-deal {
  position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 11px;
  background: radial-gradient(ellipse at 50% 48%, #16588add 0%, #0e3c6bdc 78%);
  border-radius: 14px; pointer-events: none; opacity: 0; visibility: hidden;
  transition: opacity .16s ease, visibility .16s ease;
}
.opening-deal.active { opacity: 1; visibility: visible; }
.opening-deal-heading {
  color: #e8f6ff; font: 900 clamp(16px, 3.5vw, 29px) Outfit, sans-serif;
  letter-spacing: .12em; text-align: center; text-shadow: 0 2px 20px #051d49;
}
.opening-deck {
  position: relative; width: 78px; height: 106px; margin: 13px 0 5px;
  filter: drop-shadow(0 12px 10px #00163499); transform: translateZ(0);
}
.opening-deck-layer,.opening-deck-face,.opening-flying-card {
  position: absolute; inset: 0; border-radius: 9px; border: 5px solid #f1f9ff;
  box-shadow: inset 0 0 0 2px #8ec9f1, inset 0 0 0 6px #12518b;
  background: repeating-linear-gradient(45deg,#2673af 0 8px,#15538c 8px 16px);
}
.opening-deck-layer:nth-child(1) {
  z-index: 1; transform: translate(-6px,5px) rotate(-4deg);
  box-shadow: 0 3px 0 #e2f2ff, 0 6px 0 #22639a, 0 9px 0 #d8ecfc,
    inset 0 0 0 2px #8ec9f1, inset 0 0 0 6px #12518b;
}
.opening-deck-layer:nth-child(2) {
  z-index: 2; transform: translate(5px,1px) rotate(3deg);
  box-shadow: 0 3px 0 #e2f2ff, 0 6px 0 #22639a, 0 9px 0 #d8ecfc,
    inset 0 0 0 2px #8ec9f1, inset 0 0 0 6px #12518b;
}
.opening-deck-face { z-index: 4; display: grid; place-items: center; color: #eaf8ff; font: 50px Georgia,serif; }
.opening-deal.shuffling .opening-deck-layer:nth-child(1) { animation: shuffle-left 2.78s cubic-bezier(.33,.04,.26,1) both; }
.opening-deal.shuffling .opening-deck-layer:nth-child(2) { animation: shuffle-right 2.78s cubic-bezier(.33,.04,.26,1) both; }
.opening-deal.shuffling .opening-deck-face { animation: shuffle-face 2.78s ease-in-out both; }
.opening-deal.shuffling .opening-deck { animation: shuffle-bridge 2.78s ease-in-out both; }
@keyframes shuffle-left {
  0%,12% { transform: translate(-6px,5px) rotate(-4deg); }
  24% { transform: translate(-66px,9px) rotate(-16deg); }
  37% { transform: translate(-62px,-2px) rotate(-10deg); }
  54% { transform: translate(-30px,-5px) rotate(-5deg); }
  72% { transform: translate(-8px,2px) rotate(-2deg); }
  88% { transform: translate(-4px,1px) rotate(2deg); }
  100% { transform: translate(-4px,3px) rotate(0); }
}
@keyframes shuffle-right {
  0%,12% { transform: translate(5px,1px) rotate(3deg); }
  24% { transform: translate(65px,8px) rotate(16deg); }
  37% { transform: translate(61px,-2px) rotate(9deg); }
  54% { transform: translate(28px,-6px) rotate(5deg); }
  72% { transform: translate(7px,0) rotate(2deg); }
  88% { transform: translate(2px,2px) rotate(-2deg); }
  100% { transform: translate(2px,1px) rotate(0); }
}
@keyframes shuffle-face {
  0%,13% { opacity: 1; transform: translateY(0); }
  21%,76% { opacity: 0; transform: translateY(-6px) scale(.95); }
  91%,100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes shuffle-bridge {
  0%,69%,100% { transform: translateY(0) scaleY(1); }
  79% { transform: translateY(-7px) scaleY(.93); }
  88% { transform: translateY(4px) scaleY(1.03); }
}
.opening-riffle-card {
  position: absolute; inset: 0; z-index: 3; border-radius: 9px; border: 4px solid #f1f9ff;
  background: repeating-linear-gradient(45deg,#2673af 0 8px,#15538c 8px 16px);
  box-shadow: 0 4px 0 #c8e5fc, inset 0 0 0 2px #8ec9f1, inset 0 0 0 5px #12518b;
  pointer-events: none; opacity: 0;
}
.opening-deal.shuffling .riffle-left { animation: riffle-left-in .72s cubic-bezier(.21,.74,.17,1) both; }
.opening-deal.shuffling .riffle-right { animation: riffle-right-in .72s cubic-bezier(.21,.74,.17,1) both; }
@keyframes riffle-left-in {
  0% { transform: translate(-63px,9px) rotate(-12deg) scale(.96); opacity: 0; }
  19% { opacity: 1; }
  55% { transform: translate(-19px,-12px) rotate(-5deg) scale(.98); opacity: 1; }
  88% { transform: translate(0,0) rotate(0) scale(1); opacity: 1; }
  100% { transform: translate(0,0) rotate(0) scale(1); opacity: 0; }
}
@keyframes riffle-right-in {
  0% { transform: translate(63px,9px) rotate(12deg) scale(.96); opacity: 0; }
  19% { opacity: 1; }
  55% { transform: translate(19px,-12px) rotate(5deg) scale(.98); opacity: 1; }
  88% { transform: translate(0,0) rotate(0) scale(1); opacity: 1; }
  100% { transform: translate(0,0) rotate(0) scale(1); opacity: 0; }
}
.opening-deck-counter { display: flex; gap: 9px; align-items: baseline; color: #cdeaff; }
.opening-deck-counter strong { color: white; font: 900 28px Outfit, sans-serif; font-variant-numeric: tabular-nums; }
.opening-deck-counter span { font-size: 10px; font-weight: 800; letter-spacing: .17em; }
.opening-deal-detail { color: #bbddf6; font-size: 10px; font-weight: 900; letter-spacing: .17em; }
.opening-flying-card {
  position: fixed; inset: auto; z-index: 160; color: #eaf8ff; display: grid;
  place-items: center; font: 35px Georgia,serif; pointer-events: none;
  will-change: transform, opacity; box-shadow: 0 8px 18px #011e3caa, inset 0 0 0 2px #8ec9f1, inset 0 0 0 6px #12518b;
}
.opening-deal.splitting .opening-deck { animation: opening-deck-settle .5s ease-in-out both; }
@keyframes opening-deck-settle { 50% { transform: translateY(4px) rotate(-3deg); } }
@media (max-width: 550px) {
  .deck-status { gap: 6px; }
  .deck-stack { width: 31px; height: 41px; flex-basis: 31px; }
  .deck-stack::before, .deck-stack::after, .deck-stack .deck-face { width: 26px; height: 36px; }
  .deck-stack .deck-face { font-size: 14px; }
  .tabletop-travel-back { font-size: 30px; }
  .card-placeholder { min-height: 95px; }
  .opening-deck { width: 59px; height: 82px; margin: 4px 0; }
  .opening-deck-face { font-size: 36px; }
  .opening-deal { gap: 7px; }
  .opening-deck-counter strong { font-size: 24px; }
  .opening-deck-counter span,.opening-deal-detail { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .deck-stack.tabletop-shuffle .deck-face,.opening-deal.shuffling .opening-deck,.opening-deal.shuffling .opening-deck-layer,.opening-deal.shuffling .opening-deck-face,.opening-deal.shuffling .opening-riffle-card,.opening-deal.splitting .opening-deck { animation: none; }
}