@import '/css/global.css';

/* Landscape casino felt: the shell is widened by `board: { fit: 1.7 }` in the
   games array and fills its height via the shared `game-board--fill` +
   `board-table` classes (see game-layout.css). Only the felt-specific styling
   lives here; the dealer/player areas are the growing felt, the status/actions/
   bet rows are fixed. */
.blackjack-board {
  background: var(--sol-felt);
  gap: 8px;
  padding: 14px;
  user-select: none;
}

/* Dealer and player areas are the growing felt (board-table__felt); center the
   hand in whatever height they're given. On a content-height mobile board this
   is a no-op; on the definite-height desktop frame it fills and centers. */
.bj-area {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.bj-area-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bj-hand {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  min-height: 80px;
}

/* Card frame, ink, back pattern and label geometry come from the shared
   playing-cards component (.pc-card / .pc-corner / .pc-pip / .pc-back). Only
   Blackjack's fixed size and label scale live here. */
.bj-card {
  width: 56px;
  height: 80px;
  background: #fff;
}

.bj-card.is-dealt {
  animation: cardDeal 0.22s ease-out;
}

.bj-card-tl,
.bj-card-br {
  font-size: 0.75rem;
}

.bj-card-center {
  font-size: 1.5rem;
  opacity: 0.65;
}

.bj-status {
  text-align: center;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: rgba(255, 255, 255, 0.85);
  padding: 4px 0;
  min-height: 28px;
}

.bj-status--win {
  color: #4ade80;
}
.bj-status--lose {
  color: #f87171;
}
.bj-status--push {
  color: #fbbf24;
}

.bj-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.bj-btn {
  padding: 8px 18px;
  border-radius: var(--border-radius-sm);
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: background 0.15s;
}

.bj-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.28);
}
.bj-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.bj-btn-sm {
  padding: 8px 14px;
  font-size: 1.1rem;
}

.bj-bet-row {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

.bj-bet-label {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--font-size-md);
  min-width: 60px;
  text-align: center;
}

.bj-btn-deal {
  background: #16a34a;
  padding: 8px 22px;
}

.bj-btn-deal:hover {
  background: #15803d;
}

/* Desktop: scale the cards up to match the larger landscape felt so the table
   reads rich, not a few tiny cards floating in green. Placed after the base
   .bj-card so it wins on source order (same specificity). The felt fill itself
   comes from the shared `board-table__felt` class, no per-game flex here. */
@media (min-width: 768px) {
  .bj-card {
    width: 88px;
    height: 126px;
  }

  .bj-hand {
    min-height: 126px;
  }

  .bj-card-tl,
  .bj-card-br {
    font-size: 1.05rem;
  }

  .bj-card-center {
    font-size: 2.4rem;
  }
}