/* =============================================================================
   cards.css — Shared card game design system
   Used by: Blackjack, HiLo, Baccarat
   Depends on: core.css (for --g-* variables and base utilities)
   ============================================================================= */

/* ---------------------------------------------------------------------------
   Card face
   --------------------------------------------------------------------------- */
.card-face {
  width: 56px; height: 80px;
  background: #fff; border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-weight: 900; font-size: 1.1rem;
  position: relative; user-select: none;
  cursor: default;
}
.card-face.red   { color: #e53e3e; }
.card-face.black { color: #1a202c; }
.card-face .card-rank { font-size: 1.3rem; line-height: 1; }
.card-face .card-suit { font-size: 1rem; }

/* ---------------------------------------------------------------------------
   Card back
   --------------------------------------------------------------------------- */
.card-back {
  width: 56px; height: 80px; border-radius: 8px;
  background: linear-gradient(135deg, #0b1d45 0%, #086AD7 100%);
  border: 2px solid rgba(255,255,255,0.15);
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

/* ---------------------------------------------------------------------------
   Deal animation — slides in from above
   --------------------------------------------------------------------------- */
@keyframes card-deal-in {
  from { opacity: 0; transform: translateY(-60px) rotate(-5deg); }
  to   { opacity: 1; transform: translateY(0) rotate(0deg); }
}
.card-deal { animation: card-deal-in 0.35s cubic-bezier(0.34,1.56,0.64,1) forwards; }

/* ---------------------------------------------------------------------------
   Flip animation — hole card reveal
   --------------------------------------------------------------------------- */
@keyframes card-flip-in {
  0%   { transform: rotateY(90deg); opacity: 0; }
  100% { transform: rotateY(0deg); opacity: 1; }
}
.card-flip { animation: card-flip-in 0.3s ease-out forwards; }

/* ---------------------------------------------------------------------------
   Felt table — game board area
   --------------------------------------------------------------------------- */
.felt-table {
  background: radial-gradient(ellipse at center, #1a4731 0%, #0d2b1e 100%);
  border-radius: 20px;
  border: 3px solid rgba(255,255,255,0.08);
  min-height: 260px; padding: 24px;
  position: relative; overflow: hidden;
}
.felt-table::before {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.015'%3E%3Ccircle cx='20' cy='20' r='1'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Hand row
   --------------------------------------------------------------------------- */
.card-hand {
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center; min-height: 88px;
}

/* ---------------------------------------------------------------------------
   Score badge
   --------------------------------------------------------------------------- */
.score-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 24px; padding: 0 8px;
  background: rgba(0,0,0,0.5); border-radius: 12px;
  font-size: 0.75rem; font-weight: 700; color: #fff;
}
.score-badge.bust { background: rgba(239,68,68,0.3); color: #f87171; }
.score-badge.bj   { background: rgba(234,179,8,0.3);  color: #fbbf24; }

/* ---------------------------------------------------------------------------
   HiLo — large centered card display
   --------------------------------------------------------------------------- */
.hilo-stage {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 32px 16px;
  min-height: 220px;
}
.hilo-card {
  width: 100px; height: 140px; border-radius: 14px;
  background: #fff; box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
}
.hilo-card .hilo-rank { font-size: 2.8rem; font-weight: 900; line-height: 1; }
.hilo-card .hilo-suit { font-size: 1.8rem; }
.hilo-card.red   { color: #e53e3e; }
.hilo-card.black { color: #1a202c; }

/* ---------------------------------------------------------------------------
   HiLo — Higher / Lower direction buttons
   --------------------------------------------------------------------------- */
.hilo-direction-btn {
  width: 80px; height: 80px; border-radius: 50%;
  border: none; cursor: pointer;
  font-size: 1.5rem; color: #fff; font-weight: 900;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.hilo-direction-btn.higher { background: linear-gradient(135deg, #059669, #10b981); }
.hilo-direction-btn.lower  { background: linear-gradient(135deg, #dc2626, #ef4444); }
.hilo-direction-btn:hover    { transform: scale(1.08); }
.hilo-direction-btn:active   { transform: scale(0.96); }
.hilo-direction-btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }

/* ---------------------------------------------------------------------------
   HiLo — Accumulated multiplier ring
   --------------------------------------------------------------------------- */
.multiplier-ring {
  display: flex; align-items: center; justify-content: center;
  width: 96px; height: 96px; border-radius: 50%;
  background: radial-gradient(circle, rgba(251,191,36,0.15) 0%, rgba(251,191,36,0.04) 100%);
  border: 3px solid #fbbf24;
  box-shadow: 0 0 24px rgba(251,191,36,0.35);
  font-size: 1.4rem; font-weight: 900; color: #fbbf24;
  letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------------------
   Baccarat — two-column arena
   --------------------------------------------------------------------------- */
.bac-arena {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px; padding: 20px;
}
.bac-col {
  border-radius: 14px; padding: 16px;
  border: 2px solid transparent;
  transition: border-color 0.4s;
}
.bac-col.player-col { background: rgba(59,130,246,0.08); }
.bac-col.banker-col { background: rgba(239,68,68,0.08); }
.bac-col.winner { border-color: rgba(255,255,255,0.3); }
.bac-col.player-col.winner { border-color: rgba(59,130,246,0.5); }
.bac-col.banker-col.winner { border-color: rgba(239,68,68,0.5); }

/* ---------------------------------------------------------------------------
   Result overlay — shown over felt on resolution
   --------------------------------------------------------------------------- */
.card-result-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(4px);
  border-radius: inherit; z-index: 10;
  animation: g-fade-in 0.3s ease forwards;
}
.card-result-overlay .result-label {
  font-size: 2rem; font-weight: 900; text-transform: uppercase;
  letter-spacing: 0.1em; text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
.card-result-overlay .result-amount {
  font-size: 1.3rem; font-weight: 700; margin-top: 8px;
  color: #fbbf24;
}