/* ===========================================================
   Blackjack — game-specific styles only.
   Chrome, buttons, #status, .hint, .score-box/.stat all come
   from shared.css; here we style the felt, cards and layout.
   =========================================================== */

body { gap: 16px; }

h1 { font-size: 2.4rem; }

/* ---------- top row of chip / tally chips ---------- */
.stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

/* ---------- the felt table ---------- */
#table {
  width: 460px;
  max-width: 94vw;
  background: var(--surface);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 10px 40px var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hand-area { display: flex; flex-direction: column; gap: 8px; }

.hand-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-weight: 600;
}
.hand-name { letter-spacing: 1px; text-transform: uppercase; font-size: 0.8rem; opacity: 0.7; }
.hand-total {
  font-size: 1.2rem;
  font-weight: 700;
  background: var(--surface-2);
  border-radius: 6px;
  padding: 2px 10px;
  min-width: 2.4rem;
  text-align: center;
}

/* ---------- the cards row ---------- */
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 92px;          /* reserve space so layout doesn't jump */
}

/* ---------- a single playing card ---------- */
.card {
  position: relative;
  width: 62px;
  height: 88px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 3px 10px var(--shadow);
  flex: 0 0 auto;
  /* deal animation */
  animation: deal 0.28s ease both;
}

/* corner rank/suit (top-left + mirrored bottom-right) */
.card .rank {
  position: absolute;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1;
}
.card .rank.tl { top: 6px; left: 7px; }
.card .rank.br { bottom: 6px; right: 7px; transform: rotate(180deg); }

/* big centre pip */
.card .pip {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

/* red suits ♥ ♦ vs black ♠ ♣ — black tracks --text for dark mode */
.card.red { color: var(--red); }
.card.black { color: var(--text); }

/* face-down card */
.card.back {
  background:
    repeating-linear-gradient(45deg,
      var(--blue-board) 0 8px,
      var(--blue-board-dark) 8px 16px);
  border-color: var(--blue-board-dark);
}
.card.back .rank, .card.back .pip { display: none; }

@keyframes deal {
  from { opacity: 0; transform: translateY(-14px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- action buttons ---------- */
.controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.controls button { padding: 11px 22px; }
.controls button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ---------- narrow phones ---------- */
@media (max-width: 400px) {
  .card { width: 52px; height: 74px; }
  .card .rank { font-size: 0.9rem; }
  .card .pip { font-size: 1.6rem; }
  .cards { min-height: 78px; }
  .controls button { padding: 10px 16px; }
}