/* Texas Hold'em. Cards are the shared `card-` rules (cards.css), chips the
   `chip-` rules (chips.css); `th-` rules are this game's. Everyone else sits
   across the felt in a grid that wraps (eight seats on a 390 px phone are two
   columns), the board and the pot are in the middle, and your own seat is
   nearest you, with your choices under the felt. */
@import url("cards.css");
@import url("chips.css");

.th { display: flex; flex-direction: column; gap: 0.8rem; width: 100%; max-width: 46rem; }

.th-felt {
  display: flex; flex-direction: column; gap: 0.7rem; padding: 0.6rem;
  background: var(--felt); color: var(--felt-ink); border-radius: var(--radius); box-shadow: var(--shadow);
}
.th-others { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.45rem; }

/* ---- A seat ---- */
.th-seat {
  display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; padding: 0.4rem 0.5rem;
  border: 2px solid transparent; border-radius: var(--radius); background: rgb(0 0 0 / 0.14);
}
.th-turn { border-color: var(--accent); background: rgb(0 0 0 / 0.24); }
.th-won { box-shadow: 0 0 0 3px #f5d36b; }
.th-folded, .th-away { opacity: 0.6; }
.th-out { opacity: 0.45; }
.th-seat-head { display: flex; align-items: center; gap: 0.4rem; }
.th-name { font-weight: 700; overflow-wrap: break-word; }
/* The dealer button: a white disc with a D, as on a real table. */
.th-button {
  display: inline-grid; place-items: center; flex: none; width: 1.35rem; height: 1.35rem;
  border-radius: 50%; background: #fff; color: #222; font-size: 0.75rem; font-weight: 800;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.4);
}
.th-seat-cards { display: flex; gap: 0.25rem; min-height: calc(2.4rem * 7 / 5); }
.th-seat .card { --card-w: 2.4rem; }
.th-seat .card-corner { top: 0.1rem; left: 0.15rem; }
.th-seat-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.6rem; }
.th-note { font-size: 0.8rem; font-weight: 600; opacity: 0.9; }
.th-bet { display: flex; align-items: center; gap: 0.35rem; font-size: 0.9rem; }
.th-hand { font-size: 0.85rem; font-style: italic; }
.th-won-line { font-size: 0.85rem; font-weight: 700; color: #f5d36b; }

/* Your own seat: bigger cards, nearest you. */
.th-mine { background: rgb(0 0 0 / 0.2); }
.th-mine .th-seat-cards { min-height: calc(4rem * 7 / 5); }
.th-mine .card { --card-w: 4rem; }
.th-mine .card-corner { top: 0.25rem; left: 0.3rem; }

/* ---- The middle: board and pot ---- */
.th-middle { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.th-board { display: flex; gap: 0.3rem; }
.th-board .card { --card-w: 3.4rem; }
.th-board .card-slot { border-color: rgb(255 255 255 / 0.3); }
.th-pots { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.1rem 0.9rem; font-weight: 700; text-align: center; }
.th-blinds { font-weight: 400; font-size: 0.85rem; opacity: 0.85; flex-basis: 100%; }

/* ---- Your choices ---- */
.th-choices { display: flex; flex-direction: column; gap: 0.5rem; }
.th-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.th-amount label { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.th-input {
  width: 6rem; min-height: 2.5rem; padding: 0.2rem 0.5rem; font: inherit; font-variant-numeric: tabular-nums;
  border: 2px solid var(--edge); border-radius: var(--radius); background: var(--card); color: var(--ink);
}
.th-range { font-size: 0.85rem; color: var(--ink-soft); }
.th-why { margin: 0; color: var(--ink-soft); }

/* ---- The hand so far: opens at its newest line (see `HandLog`) ---- */
.th-log {
  display: flex; flex-direction: column-reverse; max-height: 9.5rem; overflow-y: auto;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
}
.th-log ol { margin: 0; padding: 0.4rem 0.8rem; list-style: none; font-size: 0.9rem; }

/* A phone: each seat across the felt is one short row, cards to the right,
   so eight seats don't push the board and your own hand off the screen. */
@media (max-width: 30rem) {
  .th-others .th-seat { display: grid; grid-template-columns: 1fr auto; column-gap: 0.4rem; align-items: center; }
  .th-others .th-seat-cards { grid-column: 2; grid-row: 1 / span 2; min-height: 0; }
  .th-others .th-bet, .th-others .th-hand, .th-others .th-won-line { grid-column: 1 / -1; }
  .th-others .th-seat .card { --card-w: 2rem; }
}

@media (min-width: 40rem) {
  .th-board .card { --card-w: 4rem; }
}

/* ---- The hand before this one (`LastHandBox`): small, under the felt ---- */
.th-last {
  display: flex; flex-direction: column; gap: 0.3rem; padding: 0.45rem 0.7rem; font-size: 0.9rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
}
.th-last-head { margin: 0; }
.th-last-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.5rem; }
.th-last-who { min-width: 3.5rem; font-weight: 600; overflow-wrap: anywhere; }
.th-last-won .th-last-who { font-weight: 800; }
.th-last-cards { display: flex; gap: 0.2rem; }
.th-last .card { --card-w: 1.9rem; }
.th-last .card-corner { top: 0.05rem; left: 0.1rem; }
.th-last-hand { font-style: italic; color: var(--ink-soft); }