Add optional card mode: server deals cards and settles showdowns automatically

- New "カードを配る" switch on the create-table screen (default off); the lobby
  shows "カードあり" for tables that use it
- Card mode (server/cards.js restored): crypto-shuffled deck kept server-side,
  hole cards sent only to their owner until showdown/all-in reveal, board dealt
  per street with burns, all-in runout on a timer (frozen while paused)
- Showdown is evaluated and every pot (incl. side pots, split pots) is paid out
  automatically; host winner selection is only used when card mode is off
- Play UI: board, hole cards, own cards in the action bar, hand names, winning
  cards highlighted; layout tuned for 7+ seats and short screens
- Playing-card styles use .pcard so they don't clash with the existing .card panel
- Tests for hand evaluation, card privacy, runout, side pots, ties and random play

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

public/assets/style.css

@@ -532,6 +532,71 @@ body.table-page {
   z-index: 30;
 }
 
+/* ---------- カード（カード機能ありのテーブル） ---------- */
+.pcard {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 28px;
+  height: 40px;
+  background: #fff;
+  border-radius: 5px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  font-weight: 900;
+  line-height: 1;
+  user-select: none;
+  transition: filter 0.2s;
+}
+.pcard b { font-size: 15px; letter-spacing: -0.05em; }
+.pcard i { font-style: normal; font-size: 13px; margin-top: 1px; }
+.suit-s { color: #1a1a1a; }
+.suit-h { color: #d62839; }
+.suit-d { color: #1f6fd1; }
+.suit-c { color: #16884a; }
+.pcard.back {
+  background: repeating-linear-gradient(45deg, #c0392b 0 3px, #a93226 3px 6px);
+  border: 2px solid #fff;
+}
+.pcard.slot { background: rgba(0, 0, 0, 0.12); box-shadow: none; border: 1px dashed rgba(255, 255, 255, 0.3); }
+.pcard.deal { animation: deal 0.35s ease-out both; }
+@keyframes deal {
+  from { opacity: 0; transform: translateY(-10px) scale(0.8); }
+}
+.pcard.dim { filter: brightness(0.5); }
+.pcard.hl { box-shadow: 0 0 0 2px var(--gold), 0 0 10px rgba(246, 199, 68, 0.8); }
+
+.board { display: flex; gap: 3px; margin-top: 6px; min-height: 40px; }
+
+.hole {
+  position: absolute;
+  top: -18px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 2px;
+  z-index: 1;
+}
+.hole .pcard { width: 25px; height: 35px; border-radius: 4px; }
+.hole .pcard b { font-size: 13px; }
+.hole .pcard i { font-size: 11px; }
+.hole .pcard.back { border-width: 1.5px; }
+/* 手札と重ならないよう D・SB/BB を横に出す */
+.with-cards .chip-marker.dealer { top: 22px; right: -16px; }
+.with-cards .blind-marker { top: 26px; left: -20px; }
+.felt-area.with-cards { margin-top: 62px; }
+.with-cards .bet.above { bottom: calc(100% + 20px); }
+.crowded.with-cards .bet.above { bottom: calc(100% + 14px); }
+.nameplate .phand {
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--gold);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 /* ---------- 席の状態 ---------- */
 .seat.folded .avatar, .seat.folded .nameplate { opacity: 0.45; }
 .seat.away .avatar { opacity: 0.4; }
@@ -615,10 +680,21 @@ body.table-page {
 .crowded .nameplate { min-width: 72px; max-width: 80px; padding: 3px 6px; }
 .crowded .nameplate .pname { font-size: 11px; }
 .crowded .nameplate .pstack { font-size: 12px; }
+.crowded .hole { top: -12px; }
+.crowded .hole .pcard { width: 20px; height: 28px; }
+.crowded .hole .pcard b { font-size: 11px; }
+.crowded .hole .pcard i { font-size: 9px; }
+.crowded.with-cards .chip-marker.dealer { top: 14px; }
+.crowded.with-cards .blind-marker { top: 18px; }
 
 /* ---------- 自分の操作エリア ---------- */
 .me-row { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
 .me-info { flex: 1; min-width: 0; }
+.my-cards { display: flex; gap: 4px; flex: none; }
+.my-cards .pcard { width: 42px; height: 58px; border-radius: 6px; }
+.my-cards .pcard b { font-size: 22px; }
+.my-cards .pcard i { font-size: 19px; }
+.me-sub .my-hand { color: var(--gold); font-weight: 800; }
 .me-sub { font-size: 12px; color: var(--muted); display: flex; gap: 8px; margin-top: 3px; white-space: nowrap; }
 .me-sub .my-bet { color: var(--gold); font-weight: 700; }
 .me-sub .plus { color: var(--green); }
@@ -664,6 +740,18 @@ body.table-page {
   .crowded .nameplate .pname { font-size: 10px; }
   .crowded .nameplate .pstack { font-size: 11px; }
   .crowded .chip-marker { width: 20px; height: 20px; font-size: 10px; }
+  .felt-area.with-cards { margin-top: 52px; }
+  .board .pcard { width: 24px; height: 34px; }
+  .board .pcard b { font-size: 13px; }
+  .board .pcard i { font-size: 11px; }
+  .board { min-height: 34px; margin-top: 4px; }
+  .my-cards .pcard { width: 34px; height: 48px; }
+  .my-cards .pcard b { font-size: 18px; }
+  .my-cards .pcard i { font-size: 15px; }
+  .crowded .hole { top: -10px; }
+  .crowded .hole .pcard { width: 17px; height: 24px; }
+  .crowded .hole .pcard b { font-size: 10px; }
+  .crowded .hole .pcard i { font-size: 8px; }
 }
 
 [hidden] { display: none !important; }