/* ===== Five Card Stud — game-specific styles =====
   Generic glass chrome comes from shared/css/glass.css (cards reuse .c-card
   wholesale; the rules modal uses the shared .c-modal, which scrolls the
   full-screen overlay, never a boxed inner scrollbar). This file lays out a
   four-seat felt table: three opponents across the top, the pot and status in
   the middle, your hero seat at the bottom, then the action row. Each seat
   fans its cards with --cw sized per row. */

:root {
  /* Big-2 green felt chrome: green app background, green buttons and
     green-tinted text. Hole cards keep a green back to match the felt. */
  --accent-1: #2ba25f;
  --accent-2: #3fbf7a;
  --on-accent: #06210f;
  --back-1: #2f8f5b;
  --back-2: #0c3f26;
  --bg-1: #12764c;
  --bg-2: #083f29;
  --bg-glow-a: rgba(18, 118, 76, .55);
  --bg-glow-b: rgba(63, 191, 122, .22);
  --c-text: #eaf3ee;
  --c-muted: #b7d3c2;
}

/* Letterbox behind the felt and the frosted Rules modal follow the same green
   (the primary buttons are already green via .c-btn--primary -> --accent-1/2). */
body { background: #083f29; }
.c-modal__backdrop { background: rgba(3, 22, 14, .5); }
.c-modal__panel { background: rgba(9, 44, 29, .72); }

.c-app { --fpad: clamp(10px, 3.5vw, 30px); }

/* ---------- Table ---------- */
.st-board {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2.4vh, 26px);
  width: 100%;
  max-width: min(1200px, 96vw);
  margin: 0 auto;
}

.st-felt {
  --cw: clamp(34px, min(6vw, 8.5vh), 90px);
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 1.6vh, 14px);
  padding: clamp(12px, 3vw, 22px) clamp(10px, 3vw, 20px);
  border-radius: 22px;
  border: 1px solid rgba(12, 63, 38, .6);
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(47, 143, 91, .5), rgba(12, 63, 38, .2) 60%, transparent),
    linear-gradient(160deg, #12603a, #0a3f27 55%, #073120);
  box-shadow: inset 0 2px 26px rgba(0, 0, 0, .45), 0 8px 22px rgba(0, 0, 0, .35);
}

/* Pot pill, top-centre of the felt. */
.st-pot {
  align-self: center;
  padding: 5px 16px;
  border-radius: 999px;
  border: 1px solid rgba(240, 180, 41, .5);
  background: rgba(8, 40, 26, .6);
  color: #ffe6a8;
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
}
.st-pot b { font-size: 15px; font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none; color: #fff; }

/* ---------- Seat rows ---------- */
.st-row { display: flex; gap: clamp(10px, 3vw, 40px); justify-content: center; width: 100%; }
.st-row--opp .st-seat { --cw: clamp(30px, min(5vw, 7.5vh), 76px); }
.st-row--hero { margin-top: 2px; }
.st-row--hero .st-seat { --cw: clamp(46px, min(7.5vw, 12vh), 108px); }

.st-seat {
  --ch: calc(var(--cw) * 1.42);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px 10px 7px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(4, 24, 15, .4);
  transition: border-color .18s ease, box-shadow .18s ease, opacity .2s ease, transform .18s ease;
}
.st-seat.is-turn {
  border-color: var(--accent-1);
  box-shadow: 0 0 0 2px rgba(240, 180, 41, .45), 0 0 18px rgba(240, 180, 41, .28);
  transform: translateY(-2px);
}
.st-seat.is-folded { opacity: .4; }
.st-seat.is-win {
  border-color: #7ef0a4;
  box-shadow: 0 0 0 2px rgba(126, 240, 164, .5), 0 0 20px rgba(126, 240, 164, .3);
}

.st-seat__top { display: flex; align-items: baseline; gap: 8px; }
.st-name { font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #eafff2; }
.st-stack { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: #ffe6a8; }

.st-cards {
  position: relative;
  min-width: var(--cw);
  height: calc(var(--cw) * 1.42);
}
.st-cards .c-card {
  box-shadow: 0 3px 8px rgba(0, 0, 0, .4), inset 0 0 0 1px var(--card-edge);
}
.st-cards .c-card.st-new { animation: stDeal .26s ease; }
@keyframes stDeal {
  from { transform: translateY(-30px) rotate(-5deg); opacity: 0; }
}

.st-bet {
  min-height: 16px;
  font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: #fff;
}
.st-bet:empty::before { content: ""; }
.st-bet:not(:empty)::before { content: "\1F4B5 "; }
.st-act {
  min-height: 14px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #bfe8cf;
}

/* ---------- Center status ---------- */
.st-status {
  align-self: center;
  max-width: 92%;
  padding: 6px 20px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(6, 30, 19, .66);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 14px; font-weight: 700; letter-spacing: .01em;
  color: var(--c-text);
  text-align: center;
  transition: color .2s ease, border-color .2s ease;
}
.st-status--win  { color: #7ef0a4; border-color: rgba(126, 240, 164, .5); }
.st-status--lose { color: #ff8b94; border-color: rgba(255, 139, 148, .5); }
.st-status--push { color: #ffd97a; border-color: rgba(255, 217, 122, .5); }

/* ---------- Action row ---------- */
.st-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.st-actions .c-btn { min-width: 92px; text-align: center; font-size: 14px; padding: 9px 16px; }

@media (max-width: 430px) {
  .st-felt { --cw: clamp(20px, 5.6vw, 30px); border-radius: 18px; }
  .st-row--opp .st-seat { --cw: clamp(18px, 5vw, 26px); }
  .st-row--hero .st-seat { --cw: clamp(30px, 9vw, 44px); }
  .st-seat { padding: 6px 6px 5px; }
  .st-actions .c-btn { min-width: 78px; padding: 9px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .st-cards .c-card.st-new { animation: none; }
  .st-seat.is-turn { transform: none; }
}