/* 31/public/css/game.css — only what is specific to 31's table. Everything
   else (page chrome, seats, cards, hand tray, lobby, reveal rows) comes
   from the shared kit stylesheets. */

/* Room reserved for chrome around the felt: top bar + status strip + info
   strip + this game's hand tray (cards, status row, action buttons). */
.table-felt { --tbl-felt-chrome: 400px; }

/* Deck + discard piles at the centre of the felt. align-items: flex-start
   so both slots line up by their label row even though Deck has a third
   row (the count) beneath it. */
.pile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.pile-label { font-size: 0.7rem; color: var(--tbl-text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.pile-count { font-size: 0.68rem; color: var(--tbl-text-muted); }
.pile-count.low { color: var(--danger); font-weight: 700; }
.pile-slot {
  width: 68px; height: 96px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  transition: transform 0.1s ease, box-shadow 0.15s ease;
  pointer-events: auto;
}
.pile-slot.drawable { cursor: pointer; box-shadow: 0 0 0 3px rgba(255, 228, 56, 0.35); }
.pile-slot.drawable:hover { transform: translateY(-3px); }
.pile-slot.drawable:active { transform: translateY(0); }
.pile-slot.empty {
  border: 2px dashed var(--tbl-panel-border);
  color: var(--tbl-text-muted);
  font-size: 0.7rem;
}
@media (max-width: 480px) {
  .pile-slot { width: 56px; height: 80px; }
}