/* ============ Cards ============ */

/* --- Falling glittering cards (title background) --- */
.falling-cards {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.falling-card {
  position: absolute;
  width: 50px;
  height: 70px;
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 700;
  color: rgba(255,255,255,0.15);
  opacity: 0;
  will-change: transform, opacity;
  animation:
    fall var(--fall-duration, 15s) linear var(--fall-delay, 0s) forwards,
    spin var(--spin-duration, 6s) ease-in-out var(--fall-delay, 0s) infinite,
    drift var(--drift-duration, 5s) ease-in-out var(--fall-delay, 0s) infinite;
}
.falling-card.red { color: rgba(211,47,47,0.18); border-color: rgba(211,47,47,0.12); }

/* Glitter shimmer sweep */
.falling-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg,
    transparent 0%, transparent 40%,
    rgba(212,175,55,0.35) 46%,
    rgba(255,255,255,0.5) 50%,
    rgba(212,175,55,0.35) 54%,
    transparent 60%, transparent 100%);
  background-size: 250% 250%;
  animation: shimmer 3s ease-in-out infinite;
  animation-delay: var(--fall-delay, 0s);
}

/* Sparkle dots */
.falling-card .sparkle {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  box-shadow: 0 0 4px 1px rgba(212,175,55,0.6);
  animation: sparkle var(--sparkle-duration, 2s) ease-in-out infinite;
  animation-delay: var(--sparkle-delay, 0s);
}

@keyframes fall {
  0%   { transform: translateY(-90px); opacity: 0; }
  8%   { opacity: 0.7; }
  82%  { opacity: 0.7; }
  100% { transform: translateY(calc(100vh + 90px)); opacity: 0; }
}
@keyframes spin {
  from { rotate: var(--start-rot, 0deg); }
  to   { rotate: var(--end-rot, 360deg); }
}
@keyframes drift {
  0%, 100% { translate: var(--drift-start, 0px) 0; }
  50%      { translate: var(--drift-end, 40px) 0; }
}
@keyframes shimmer {
  0%   { background-position: 200% 200%; }
  50%  { background-position: -100% -100%; }
  100% { background-position: 200% 200%; }
}
@keyframes sparkle {
  0%, 100% { opacity: 0; transform: scale(0); }
  50%      { opacity: 1; transform: scale(1); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes cardSpin {
  0%   { transform: rotateY(0deg)   rotateZ(var(--tilt, 0deg)); }
  25%  { transform: rotateY(90deg)  rotateZ(var(--tilt, 0deg)); }
  50%  { transform: rotateY(180deg) rotateZ(var(--tilt, 0deg)); }
  75%  { transform: rotateY(270deg) rotateZ(var(--tilt, 0deg)); }
  100% { transform: rotateY(360deg) rotateZ(var(--tilt, 0deg)); }
}

/* --- Game cards (in-hand) --- */
.cards {
  display: flex;
  justify-content: flex-start;
  gap: 6px;
  min-height: var(--card-h);
  /* Fixed width (not min-width) sized for a 2-card hand, with cards
     left-anchored inside it: adding the 2nd card fills space that's
     already reserved instead of growing the box, which — since ancestors
     center this block — would otherwise shift the 1st card sideways every
     time a card is added. A 3rd+ card (after a hit) just overflows past
     the reserved width rather than resizing/re-centering the box. */
  width: calc(var(--card-w) * 2 + 6px);
  /* Center this fixed-width box itself. Redundant (but harmless) for a
     seat's hand, which is already centered by its flex ancestors — load-
     bearing for the dealer's row, whose parent (.dealer-area) only sets
     text-align: center, which doesn't center a block-level flex box. That
     "worked" before only because the old auto-width box happened to
     stretch full-width. */
  margin: 0 auto;
  flex-wrap: nowrap;
  overflow: visible;
}

.card {
  width: var(--card-w);
  height: var(--card-h);
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  position: relative;
  color: #1a1a1a;
  flex-shrink: 0;
  animation: dealIn 0.35s ease-out;
}
.card.red { color: var(--red); }
.card .c-top, .card .c-bot {
  position: absolute;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}
.card .c-top { top: 4px; left: 5px; }
.card .c-bot { bottom: 4px; right: 5px; transform: rotate(180deg); }
.card .c-suit {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.6rem;
}
.card.hidden-face {
  background: linear-gradient(135deg, #1a237e, #283593);
  border: 2px solid var(--accent);
}
.card.hidden-face .c-top, .card.hidden-face .c-bot, .card.hidden-face .c-suit { display: none; }

@keyframes dealIn {
  0%   { transform: translate(40px, -40px) rotate(15deg); opacity: 0; }
  100% { transform: translate(0, 0) rotate(0); opacity: 1; }
}

/* Dealer cards slightly smaller. Set on .cards (the container), not .card
   (the individual card) — .cards's own width calc above reads --card-w too,
   so setting it only on .card left the reserved box sized for the default
   card width while the cards inside actually rendered smaller, throwing
   off centering. Custom properties inherit downward, so .card still picks
   this up from its .cards parent. */
.dealer-area .cards { --card-w: 56px; --card-h: 78px; }

/* Your hand — larger */
.your-hand .cards { --card-w: 68px; --card-h: 96px; }

@media (max-width: 480px) {
  .cards { --card-w: 48px; --card-h: 68px; }
  .card .c-suit { font-size: 1.2rem; }
  .card .c-top, .card .c-bot { font-size: 0.6rem; }
  .dealer-area .cards { --card-w: 44px; --card-h: 62px; }
  .your-hand .cards { --card-w: 56px; --card-h: 80px; }
  .falling-card { width: 36px; height: 50px; font-size: 1rem; }
  .falling-card .sparkle { width: 2px; height: 2px; }
}